-
FEATURED COMPONENTS
First time here? Check out the FAQ!
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.
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
Asked: 2010-06-01 05:09:49 +0800
Seen: 2,416 times
Last updated: Aug 06 '11