0

hide a panel

asked 2011-07-25 07:46:15 +0800

creata87 gravatar image creata87
197 2

updated 2011-07-25 07:47:20 +0800

consider the following

<div id="contentLayer" width="955px" align="center">
	<hbox>
		<vbox>
			<panel id="p1" width="955px">
			</panel>
		</vbox>
		<vbox>
			<panel id="p2" width="955px">
			</panel>
		</vbox>
		<vbox>
			<panel id="p3" width="955px">
			</panel>
		</vbox>
	</hbox>
</div>

i want to see just one panel at a time (the focus to be on one panel, and the other ones should not be visible). by the action of a button you could see one panel sliding in and another one sliding out in the same time. the panels are glued together :) like in this example: http://tympanus.net/Tutorials/FancySlidingForm/

how is this possible in zk?

delete flag offensive retag edit

5 Replies

Sort by ยป oldest newest

answered 2011-07-25 09:57:36 +0800

gganassin gravatar image gganassin flag of Luxembourg
540 6
http://www.hybris.com/

updated 2011-07-25 10:09:21 +0800

<?page title="Auto Generated index.zul"?>
<window title="Wizard Test" border="normal" width="830px">
		<zscript><![CDATA[
		int current = 0;
		void showOne(int theVisible) {
			if (theVisible == current) return;

			List items = stackOfPanels.getChildren();
			Component c = items.get(current);

			String jqCommand = "jq(\"$gb" + current + "\").fadeOut(500)";
			Clients.evalJavaScript(jqCommand);
			c.setVisible(false);
			
			c = items.get(theVisible);
			jqCommand = "jq(\"$gb" + theVisible + "\").fadeIn(500)";
			Clients.evalJavaScript(jqCommand);
			c.setVisible(true);

			current = theVisible;
		}
		]]></zscript>
		<div id="stackOfPanels">
			<groupbox id="gb0" mold="3d">
				<caption>ONE</caption>
				one
			</groupbox>
			<groupbox id="gb1" mold="3d" visible="false">
				<caption>TWO</caption>
				two
			</groupbox>
			<groupbox id="gb2" mold="3d" visible="false">
				<caption>THREE</caption>
				three
			</groupbox>
		</div>
		<hlayout>
			<button label="ONE" onClick="showOne(0)" />
			<button label="TWO" onClick="showOne(1)" />
			<button label="THREE" onClick="showOne(2)" />
		</hlayout>
</window>

Just a fast unfinished prototype that works (+/-).
Giovanni

link publish delete flag offensive edit

answered 2011-07-26 04:28:57 +0800

creata87 gravatar image creata87
197 2

updated 2011-07-26 06:15:24 +0800

..ok, this is really good ;)

when you jump from 1 to 3, you wanna also see 2 fading in and fading out. the normal course of events should be when jumping from 1 to 3: fade out 1, fade in 2, fade out 2, fade in 3. with the code below i get exactly the same output as the original code: fade out 1, fade in 3.

thanks for the reply,
iulia

   	<zscript><![CDATA[
   	      		int current = 0;
   	      		void showOne(int theVisible) {
   	      			if (theVisible == current) return;

   	      			List items = slider.getChildren();
   	      			Component c = items.get(current);
   	      			
   	      			int _current = current;
   	      			
   	      			while (_current > theVisible) {
   	   	      			String jqCommand = "jq(\"$vbox_" + _current + "\").fadeOut(500)";
   	   	      			Clients.evalJavaScript(jqCommand);
   	   	      			c.setVisible(false);
   	   	      			   	   	      	
   	   	      			_current --;
   	   	      			
   	   	      			c = items.get(_current);
   	   	      			jqCommand = "jq(\"$vbox_" + Integer.toString(_current) + "\").fadeIn(500)";
   	   	      			Clients.evalJavaScript(jqCommand);  	
   	   	      			c.setVisible(true);  	
   	      			}
   	      			
   	      			while (_current < theVisible) {
   	   	      			String jqCommand = "jq(\"$vbox_" + _current + "\").fadeOut(500)";
   	   	      			Clients.evalJavaScript(jqCommand);
   	   	      			c.setVisible(false);
   	   	      			
   	   	      			_current ++;
   	   	      			
   	   	      			c = items.get(_current);
   	   	      			jqCommand = "jq(\"$vbox_" + Integer.toString(_current) + "\").fadeIn(500)";
   	   	      			Clients.evalJavaScript(jqCommand);
   	   	      			c.setVisible(true);     	
   	      			}
   	      			
   	      			current = theVisible;      
   	      		}
   	   ]]></zscript>

link publish delete flag offensive edit

answered 2011-07-28 07:32:25 +0800

creata87 gravatar image creata87
197 2

updated 2011-07-28 07:35:16 +0800

..this is the modified function to show fading the middle box too, but it has a catch. why does the visibility of the theVisible is set to true (it is visible) while the middle box is still fading?

		void showOne(int theVisible, boolean visibility) {
			if (theVisible == current && !visibility) return;

			List items = stackOfPanels.getChildren();
			Component c = (Component)items.get(current);

			String jqCommand;
			if (!visibility)
				jqCommand = "jq(\"$gb" + current + "\").fadeOut(500)";
			else
				jqCommand = "jq(\"$gb" + current + "\").fadeIn(500)";
			    
			Clients.evalJavaScript(jqCommand);
			c.setVisible(visibility);

			if (!visibility)
				if (current < theVisible)
					current ++;
				else
				        current --;

			showOne(theVisible, !visibility);
		}

it is called with

        <button label="ONE" onClick="show(0, false)"/>

link publish delete flag offensive edit

answered 2011-07-29 07:46:18 +0800

creata87 gravatar image creata87
197 2

..found it! use the opacity property :D

link publish delete flag offensive edit

answered 2011-07-29 14:27:34 +0800

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

creata87, please show the full code. Thanks

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: 2011-07-25 07:46:15 +0800

Seen: 581 times

Last updated: Jul 29 '11

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