-
FEATURED COMPONENTS
First time here? Check out the FAQ!
hopefully we will finally find an answer to this and other people might find it useful.
consider 3 panels, panel 1, panel 2 and panel 3, and 3 buttons, button 1, button 2 and button 3 outside the panels.
in the central area only one panel at a time can be visible. if panel 1 is visible and button 3 is pressed, all panels slide left until panel 3 is in the visible area. same, if panel 3 is visible and button 1 is pressed, all panels slide right until panel 1 is in the visible area. this sliding effect must appear like a slideshow through the panels.
anyone has any ideas? something really similar to this example: http://tympanus.net/codrops/2010/06/07/fancy-sliding-form-with-jquery/
I tried and i am getting the slider but fieldsets are overlapping, i am able to see two field sets ,but sliding is working fine ,check this code and try it out.If u get correctly let me know.
SlidingTemplateWizard.zul
--------------------------------------------------------------------
<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" xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd"> <h:link href="assets/css/slidingstyle.css" rel="stylesheet" type="text/css" /> <h:script src="assets/js/slidingtemplate.js" type="text/javascript"></h:script> <style> span.reference{ position:fixed; left:5px; top:5px; font-size:10px; text-shadow:1px 1px 1px #fff; } span.reference a{ color:#555; text-decoration:none; text-transform:uppercase; } span.reference a:hover{ color:#000; } h1{ color:#ccc; font-size:36px; text-shadow:1px 1px 1px #fff; padding:20px; } </style> <h:div> <span class="reference"> <a href="http://tympanus.net/codrops/2010/06/07/fancy-sliding-form-with-jquery/">back to Codrops</a> </span> </h:div> <h:div id="content"> <div id="wrapper" width="900px" height="500px" > --> <h:div id="steps"> <h:form id="formElem" name="formElem" action="" method="post"> <h:fieldset class="step"> <h:legend>Create Template</h:legend> <h:p> <groupbox id="gb" open="false" mold="3d" width="700px"> <caption image="/assets/images/template.png" label="Create Template" /> <hlayout> <vbox> <hbox> <label value="Template Name:" /> <textbox id="txttemplatename" /> <label value="No of Charts:" /> <textbox id="txtNoofcharts" /> </hbox> </hlayout> </groupbox> </h:p> </h:fieldset> <h:fieldset class="step"> <h:legend>ExcelViewer</h:legend> <h:p> <div apply="com.Jay.Excel.ctrl.EditorComposer"> <tablelayout columns="3" > <tablechildren rowspan="1"> <panel border="normal" height="425px" width="300px"> <panelchildren> <div width="300px" height="425px"> </groupbox> </div> </panelchildren> </panel> </tablechildren> </tablelayout> </div> </h:p> </h:fieldset> <h:fieldset class="step"> <h:legend>Confirm</h:legend> <h:p> Everything in the form was correctly filled if all the steps have a green checkmark icon. A red checkmark icon indicates that some field is missing or filled out with invalid data. In this last step the user can confirm the submission of the form. </h:p> <h:p class="submit"> <h:button id="registerButton" type="submit">Register</h:button> </h:p> </h:fieldset> </h:form> </h:div> <h:div id="navigation" style="display:none;"> <h:ul> <h:li class="selected"> <h:a href="#">Create Template</h:a> </h:li> <h:li> <h:a href="#">ExcelViewer</h:a> </h:li> <h:li> <h:a href="#">Confirm</h:a> </h:li> </h:ul> </h:div> </h:div> </h:div> </zk>
*{ margin:0px; padding:0px; } body{ color:#444444; font-size:13px; background: #f2f2f2; font-family:"Century Gothic", Helvetica, sans-serif; } #content{ margin:15px auto; text-align:center; width:800px; position:relative; height:100%; } #wrapper{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; border:2px solid #fff; background-color:#f9f9f9; width:800px; overflow:hidden; } #steps{ width:800px; /*height:320px;*/ overflow:hidden; } .step{ float:left; width:800px; /*height:320px;*/ } #navigation{ height:45px; background-color:#e9e9e9; border-top:1px solid #fff; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; } #navigation ul{ list-style:none; float:left; margin-left:22px; } #navigation ul li{ float:left; border-right:1px solid #ccc; border-left:1px solid #ccc; position:relative; margin:0px 2px; } #navigation ul li a{ display:block; height:45px; background-color:#444; color:#777; outline:none; font-weight:bold; text-decoration:none; line-height:45px; padding:0px 20px; border-right:1px solid #fff; border-left:1px solid #fff; background:#f0f0f0; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(240,240,240)), color-stop(0.55, rgb(227,227,227)), color-stop(0.78, rgb(240,240,240)) ); background: -moz-linear-gradient( center bottom, rgb(240,240,240) 9%, rgb(227,227,227) 55%, rgb(240,240,240) 78% ) } #navigation ul li a:hover, #navigation ul li.selected a{ background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff; } span.checked{ background:transparent url(../imgs/checked.png) no-repeat top left; position:absolute; top:0px; left:1px; width:20px; height:20px; } span.error{ background:transparent url(../imgs/error.png) no-repeat top left; position:absolute; top:0px; left:1px; width:20px; height:20px; } #steps form fieldset{ border:none; padding-bottom:20px; } #steps form legend{ text-align:left; background-color:#f0f0f0; color:#666; font-size:24px; text-shadow:1px 1px 1px #fff; font-weight:bold; float:left; width:590px; padding:5px 0px 5px 10px; margin:10px 0px; border-bottom:1px solid #fff; border-top:1px solid #d9d9d9; } #steps form p{ float:left; clear:both; margin:5px 0px; background-color:#f4f4f4; border:1px solid #fff; width:400px; padding:10px; margin-left:100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; } #steps form p label{ width:160px; float:left; text-align:right; margin-right:15px; line-height:26px; color:#666; text-shadow:1px 1px 1px #fff; font-weight:bold; } #steps form input:not([type=radio]), #steps form textarea, #steps form select{ background: #ffffff; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; padding: 5px; width: 200px; float:left; } #steps form input:focus{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background-color:#FFFEEF; } #steps form p.submit{ background:none; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; } #steps form button { border:none; outline:none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #ffffff; display: block; cursor:pointer; margin: 0px auto; clear:both; padding: 7px 25px; text-shadow: 0 1px 1px #777; font-weight:bold; font-family:"Century Gothic", Helvetica, sans-serif; font-size:22px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background:#4797ED; } #steps form button:hover { background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff; }
..the example was just an example, just in case it was not easy to understand what i am looking for. the example is much too complicated :)
do you happen to have a working example of 3 simple divs that slide left or right on the action of a button?
Hi
here is my idea,
1. hide all panels expect the visible panel
2. when click a button
use Clients.evalJavaScript send javascript to client side, the client code would be something like animation, like this ZK Demo JQuery effect
I'd love to see a real simplified example of this.
Asked: 2011-07-28 04:28:36 +0800
Seen: 523 times
Last updated: Jan 22 '12