-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Is there anyway to make a ZK div fade-out when setVisible(false) is called ?
Hello Justin
You can do it by using any javascript library like, JQuery etc. which is very easy to use. http://api.jquery.com/fadetoggle/
else, if you don't want to use Library than below is the CSS that you can use to do visible and invisble on your div by changing the setClass() method in your logic
.visible,
.hidden {
overflow: hidden;
/* This container should not have padding, borders, etc. */
}
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
.visible > div,
.hidden > div {
/* Put any padding, border, min-height, etc. here. */
}
.hidden > div {
margin-top: -10000px;
transition: margin-top 0s 2s;
}
hope it helps
Harish
Have a sample code with jQuery here:
fade.zul:
<?xml version="1.0" encoding="UTF-8"?>
<!-- jQuery lib -->
<?script src="http://code.jquery.com/jquery-1.11.3.min.js"></script?>
<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:w="http://www.zkoss.org/2005/zk/client"
xmlns:n="http://www.zkoss.org/2005/zk/native"
xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
<window hflex="1" height="100%" border="none">
<button label="fade out" w:onClick="myFadeOut('myDiv')"></button>
<space width="20px" />
<button label="fade in" w:onClick="myFadeIn('myDiv')"></button>
<n:hr></n:hr>
<!-- Div for fading effect -->
<div id="myDiv" style="height: 300px; width: 400px; background-color: yellow;">Fade out / Fade in</div>
<script>
<![CDATA[
/**
* Calls jquery fadeOut() function on a zk widget by the ZK id.
* We use the generated component uuid for let jquery find the
* component.
*/
function myFadeOut(_comp){
var comp = zk.Widget.$('$'+_comp);
console.log(comp.uuid);
jq('#'+comp.uuid).fadeOut(2000);
}
/**
* Calls jquery fadeIn() function on a zk widget by the ZK id.
* We use the generated component uuid for let jquery find the
* component.
*/
function myFadeIn(_comp){
var comp = zk.Widget.$('$'+_comp);
console.log(comp.uuid);
jq('#'+comp.uuid).fadeIn(2000);
}
]]>
</script>
</window>
</zk>
You can call the myFadeIn(); myFadeOut() function right from your controller/ViewModel too. Clients.evalJavaScript("myFadeOut( ' "+ divZkId + " ' )");
best Stephan
Thanks for the answers guys. I know how to make a panel fade-in/out, the area I am having an issue with is doing it whilst still using the setVisible(boolean) method of zkdiv. I have bound a property of my view model to this and would like to use it.
The problem is that zk puts a display:none on the div and I can't seem to override this default behavior or wait for a css transition on opacity to finish before the style is applied.
Isn't setVisible doing the same thing that fade-in/out will do, than why you want to do both the things, i understand you want a stylish way to hide or show your panel, so just use fade-in/out with css and you can achieve the same functionality that you do with setVisible.
you have a bounded property that controls the visibility, just use that property to set the proper class as per you logic and you can achieve same behavior with nice style. using both setvisible and fade-in/out together is just over-kill in my opinion.
Asked: 2015-05-11 08:15:35 +0800
Seen: 31 times
Last updated: May 13 '15