ZK - Open Source Ajax Java Framework
|
ZK5 Combobox/Bandbox - slideDown animate effect
Don't know if it works for with bandbox and combobox too. Try this:
// speed up the ModalDialogs while disabling the animation
Window.setDefaultActionOnShow("");
Let me know if it goes.
Hi,
Thanks for help. But it didn't work out.
Seem like I have to go with ZK3 and by so far my experience together with other components, I like ZK3 a lot better than ZK5.
My end user feedback for ZK5 slideDown animation is that, they see as like it is slowness rather than visual effect animation :(
unzip the zul.jar, open web\js\zul\inp\ComboWidget.js,
find zk(b).slideDown(this,{afterAnima:this._afterSlideDown});
in the slideDown function, add duration:100:
zk(b).slideDown(this,{duration:100,afterAnima:this._afterSlideDown});
rezip the zul.jar, it works!
I have to agree with the original poster's assessment of the new animation features. ZK 5 is built on top of JQuery and uses its animation facilities. That said, you should be able to execute the following JavaScript to disable the animation globally:
jq.fx.off=true
While this works, it creates other anomalies such as failure for a combobox dropdown to close automatically.
Hi all,
I've post a feature request regarding to this issue.
For now you can use a hack on widget methods:
<zk>
<script defer="true"><![CDATA[
zul.inp.ComboWidget.prototype.open = function(opts) {
if (this._open) return;
this._open = true;
if (opts && opts.focus)
this.focus();
var pp = this.$n("pp"),
inp = this.getInputNode();
if (!pp) return;
zWatch.fire('onFloatUp', this); //notify all
var topZIndex = this.setTopmost();
var ppofs = this.getPopupSize_(pp);
pp.style.width = ppofs[0];
pp.style.height = "auto";
pp.style.zIndex = topZIndex > 0 ? topZIndex : 1 ; //on-top of everything
var pp2 = this.$n("cave");
if (pp2) pp2.style.width = pp2.style.height = "auto";
pp.style.position = "absolute"; //just in case
pp.style.display = "block";
// throw out
pp.style.visibility = "hidden";
pp.style.left = "-10000px";
//FF: Bug 1486840
//IE: Bug 1766244 (after specifying position:relative to grid/tree/listbox)
//NOTE: since the parent/child relation is changed, new listitem
//must be inserted into the popup (by use of uuid!child) rather
//than invalidate!!
var $pp = zk(pp);
$pp.makeVParent();
// throw in
pp.style.left = "";
this._fixsz(ppofs);//fix size
$pp.position(inp, "after_start");
pp.style.display = "none";
pp.style.visibility = "";
/* MODIFIED: turn off animation effect */
//zk(pp).slideDown(this, {afterAnima: this._afterSlideDown});
pp.style.visibility = "true";
pp.style.display = "block";
/* MODIFIED */
//FF issue:
//If both horz and vert scrollbar are visible:
//a row might be hidden by the horz bar.
if (zk.gecko) {
var rows = pp2 ? pp2.rows: null;
if (rows) {
var gap = pp.offsetHeight - pp.clientHeight;
if (gap > 10 && pp.offsetHeight < 150) { //scrollbar
var hgh = 0;
for (var j = rows.length; j--;)
hgh += rows.offsetHeight;
pp.style.height = (hgh + 20) + "px";
//add the height of scrollbar (18 is an experimental number)
}
}
}
if (!this._shadow)
this._shadow = new zk.eff.Shadow(pp,
{left: -4, right: 4, top: -2, bottom: 3});
if (opts && opts.sendOnOpen)
this.fire('onOpen', {open:true, value: inp.value}, {rtags: {onOpen: 1}});
};
zul.inp.Bandbox.prototype.open = zul.inp.ComboWidget.prototype.open;
]]></script>
<combobox>
<comboitem>Comboitem 1</comboitem>
<comboitem>Comboitem 2</comboitem>
<comboitem>Comboitem 3</comboitem>
</combobox>
<bandbox>
<bandpopup>
<vbox>
<label>Label 1</label>
<label>Label 2</label>
<label>Label 3</label>
</vbox>
</bandpopup>
</bandbox>
</zk>
Regards,
Simon
Thanks Simon for follow up for feature request. This indeed the only reason that I stuck at ZK3.6.4 and, couldn't use ZK5. Because in my app, the combobox and bandbox are the main UI components that capture user selection on a few scienticfic parameters then process the business logic. Since user don't like/know the animated drop-down and, have an impression as slowness instead. :(
Your code for "hack on widget methods" work fine for Firefox but not working in IE8. I tested with ZK 5.0.1 and 5.0.3.
There is also another reason to turnoff fading-effects:
All this effects are slow with X11/windows terminal/citrix-clients. Instead of 1 screenupdate, there are many updates.
/Robert
This Problem affects me too.
At the moment I just ignore it but by the time our new release rolls out this will become a problem for me.
I would prefer to globally disable animation instead of editing js-files for every release.
Regards,
Martin
Hi all,
With the latest build (09/02) of 5.0.4, now we can reduce the above code snipplet down to
<zk>
<script defer="true"><![CDATA[
zul.inp.Combobox.prototype.slideDown_ = function(pp) {
pp.style.visibility = "true";
pp.style.display = "block";
};
zul.inp.Bandbox.prototype.slideDown_ = zul.inp.Combobox.prototype.slideDown_;
]]></script>
<combobox>
<comboitem>Comboitem 1</comboitem>
<comboitem>Comboitem 2</comboitem>
<comboitem>Comboitem 3</comboitem>
</combobox>
<bandbox>
<bandpopup>
<vbox>
<label>Label 1</label>
<label>Label 2</label>
<label>Label 3</label>
</vbox>
</bandpopup>
</bandbox>
</zk>
To change slide up effect, override slideUp_ function instead.
Regards,
Simon
The above code does not work in IE 7.0.5730.13
Error: Could not get the visibility property: invalid argument
Hi Bobzk,
My bad, it's wrong CSS value. Instead please try to use
pp.style.visibility = "visible";
Thanks for pointing this out.
Regards,
Simon
Hi SimonPaql,
Yes, works fine now. I should not have been so lazy and spent some more time on it - I'd have found it myself eventually.
Thanks.
Hi, SimonPai
I use Zk 5.0.4 and your code works fine remove bandbox animation.. thank you :)
Unfortunately, this code causes some rendering anomalies for the bandbox. Shortening the animation duration works much better for my application, but having to modify the prototype in this way seems like overkill. While SimonPai's enhancement request was denied, I have submitted another more specific request to allow changing this duration value in a more straightforward manner (and consistent with how other settings can be modified).
I've done the following to disable the animation globally: put the following into your zk.xml file :
<device-config>
<device-type>ajax</device-type>
<embed><![CDATA[
<script type="text/javascript">
jq(function() {
setTimeout(function() {
if (window.zul && window.zul.inp && window.zul.inp.Combobox) {
zul.inp.Combobox.prototype.slideDown_ = function(pp) {
jq(pp).css("visibility", "visible").css("display", "block");
};
}
},
100);
});
</script>
]]></embed>
</device-config>
This ensures that the slideDown_ is overridden on every page. Notice that it's setup to run with a 100ms delay from jQuery's ready handler - this is necessary, as for some reason on Webkit browsers (Chrome & Safari) it seems that when jQuery's ready handler fires, the javascript file containing the Combobox widget is not yet fully loaded.
Hi florimon , how to overridden the slideDown_ in every page ?
Hi,
How can I turn off slide down animate effect for Combobox and Bandbox? It can be simply seem at Live Demo page, combobox and bandbox sections.
I like to have just usual behavior like in ZK3, which has no kind of visual effect.
Just want behavior like simply click then, dropdown/popup in fast/generic manner.
Many thanks.