1

ZK5 Combobox/Bandbox - slideDown animate effect

asked 2010-06-01 05:09:49 +0800

victorskl gravatar image victorskl
43 3

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.

delete flag offensive retag edit

16 Replies

Sort by ยป oldest newest

answered 2010-08-06 02:41:40 +0800

victorskl gravatar image victorskl
43 3

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.

link publish delete flag offensive edit

answered 2010-08-05 21:17:05 +0800

SimonPai gravatar image SimonPai
1696 1

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

link publish delete flag offensive edit

answered 2010-08-03 17:28:16 +0800

martindk gravatar image martindk
19 1

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.

link publish delete flag offensive edit

answered 2010-06-16 11:01:14 +0800

yz2yz gravatar image yz2yz
3

updated 2010-06-16 11:02:29 +0800

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!

link publish delete flag offensive edit

answered 2010-06-01 22:24:02 +0800

victorskl gravatar image victorskl
43 3

updated 2010-06-01 22:26:11 +0800

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 :(

link publish delete flag offensive edit

answered 2010-06-01 06:54:49 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

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.

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2010-06-01 05:09:49 +0800

Seen: 2,416 times

Last updated: Aug 06 '11

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More