0

Wanted: Sliding container

asked 2012-01-19 17:17:35 +0800

valmar gravatar image valmar
925 2 13
http://www.timo-ernst.net

Hi guys,

I am looking for a solution that allows me to smoothly slide between multiple child components when I click a button.

E.g. I have a Window component. In this window, I have 1 div component. When I click a button, I want this div to "slide" out to the left and a new div to slide in (from the right).

I know that jQuery has this animation effect build-in but what's best practice to implement this with ZK?

delete flag offensive retag edit

8 Replies

Sort by ยป oldest newest

answered 2012-01-20 01:05:27 +0800

samchuang gravatar image samchuang
4084 4

Hi

maybe you could try to use Actions and Effects

link publish delete flag offensive edit

answered 2012-01-21 16:35:56 +0800

valmar gravatar image valmar
925 2 13
http://www.timo-ernst.net

Thanks for the hint but that slides the component from top to bottom.
But I want a right-to-left slide animation.
(Will also need left-to-right later).

link publish delete flag offensive edit

answered 2012-01-22 16:01:18 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

Hi valmar,

Please refer to the sample below:

ZKFiddle-Link

index.zul
<zk>
<script type="text/javascript"><![CDATA[
function slide (first, dir) {
var $firstDiv = jq('#'+first),
left = parseInt($firstDiv.css('left'),10),
toSlide = (dir == 'left')? left > -300 : left < 0;
if (toSlide) {
for (var c = $firstDiv[0]; c; c = c.nextSibling) {
var $c = jq(c),
$cLeft = parseInt($c.css('left'),10);
$c.animate({
left: dir == 'left' ? $cLeft - 150 : $cLeft + 150
}, 400);
}
}
}
]]></script>
<window id="win" border="normal" title="window" height="300px" width="150px" style="position: relative; overflow: hidden;">
<div height="250px" width="130px" style="position: absolute; background-color: #009900; margin-left: 10px; left: 0px;" />
<div height="250px" width="130px" style="position: absolute; background-color: #000099; margin-left: 10px; left: 150px;" />
<div height="250px" width="130px" style="position: absolute; background-color: #009999; margin-left: 10px; left: 300px;" />
</window>
<button label="slide left">
<attribute name="onClick">
Clients.evalJavaScript("slide ('"+win.getFirstChild().getUuid()+"', 'left');");
</attribute>
</button>
<button label="slide right">
<attribute name="onClick">
Clients.evalJavaScript("slide ('"+win.getFirstChild().getUuid()+"', 'right');");
</attribute>
</button>
</zk>

For more information, please refer to
JQuery animate
Slide Elements in Different Directions

Regards,
ben

link publish delete flag offensive edit

answered 2012-01-22 17:38:55 +0800

valmar gravatar image valmar
925 2 13
http://www.timo-ernst.net

Uh, that's very cool. Thanks a lot, benbai.

In the meantime, I created a different, own implementation though:

<?page title="Auto Generated index.zul"?>
<window title="Hello World!!" border="normal" width="1024" height="768px">

	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script type="text/javascript">
		function slide(){
			$(".box1").hide("slide", { direction: "left" }, 500);
			$(".box2").show("slide", { direction: "right" }, 500);
		}
	</script>

	<hbox>
		<div id="box3" class="box3" width="250px" height="200px" style="background-color: orange;" visible="true" />
		<div>
			<div id="box1" class="box1" width="250px" height="200px" style="position: absolute; background-color: red;" visible="true" />
			<div id="box2" class="box2" width="250px" height="200px" style="position: absolute; background-color: green" visible="true" />
		</div>
	</hbox>
	<button label="slide" xmlns:w="http://www.zkoss.org/2005/zk/client" w:onClick="slide()" />
</window>

link publish delete flag offensive edit

answered 2012-01-23 06:47:48 +0800

RichardL gravatar image RichardL
768 4

I downloaded an existing implementation called Easy Slider. It is easily configurable, has and looks pretty nice. To get started, once you have downloaded it, copy and paste the .js and .css files and images into your project's web content.

Then in your zul:

<zk xmlns:c="client">
    <script type="text/javascript" src="js/easySlider1.7.js"></script>
    <script type="text/javascript">
        zk.afterMount(function() {
            jq("$slider").easySlider({
		auto: true,
		continuous: true,
		numeric: true
	});
        });
    </script>
    <style src="css/screen.css" />
    <div id="slider">
        <n:ul xmlns:n="native">
            <n:li><image src="images/slider/01.jpg"/></n:li>
            <n:li><image src="images/slider/02.jpg"/></n:li>
            <n:li><image src="images/slider/03.jpg"/></n:li>
            <n:li><image src="images/slider/04.jpg"/></n:li>
            <n:li><image src="images/slider/05.jpg"/></n:li>
        </n:ul>
    </div>
</zk>

One thing I noticed is that the listitem width and height get messed up (probably a conflict with ZK's javascript), so I changed the easySlider1.7.js file at line 64 and 65 to make the list items have a fixed width and height, like so:

var w = 696;//$("li", obj).width(); 
var h = 241;//$("li", obj).height();

Hope this helps,
Richard

link publish delete flag offensive edit

answered 2012-01-23 07:44:26 +0800

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

Interesting example Richard thanks for sharing!

I was struggling with the same thing some weeks ago and the width/height was also my main problem! I've tried your snippet without the hardcoded width/height and it's not that bad: the width is working fine with a 100% of the space, height is not.

Anyway: i quote Valmar 100%: this container would be really really nice to have!

Giovanni

link publish delete flag offensive edit

answered 2012-10-24 11:42:11 +0800

millis gravatar image millis
21 1

Hi everybody,
I've tried this valmar code

<?page title="Auto Generated index.zul"?>
<window title="Hello World!!" border="normal" width="1024" height="768px">

	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script type="text/javascript">
		function slide(){
			$(".box1").hide("slide", { direction: "left" }, 500);
			$(".box2").show("slide", { direction: "right" }, 500);
		}
	</script>

	<hbox>
		<div id="box3" class="box3" width="250px" height="200px" style="background-color: orange;" visible="true" />
		<div>
			<div id="box1" class="box1" width="250px" height="200px" style="position: absolute; background-color: red;" visible="true" />
			<div id="box2" class="box2" width="250px" height="200px" style="position: absolute; background-color: green" visible="true" />
		</div>
	</hbox>
	<button label="slide" xmlns:w="http://www.zkoss.org/2005/zk/client" w:onClick="slide()" />
</window>

But I would like to know if there is an option to enable slide automatically without clicking the button. I need it.
Thansk so much.
I hope your answer.
see you

link publish delete flag offensive edit

answered 2012-10-25 04:20:31 +0800

RichardL gravatar image RichardL
768 4

updated 2012-10-25 04:22:11 +0800

You could use a Timer component to call the slide function or use the easySlider third party js (see above).By the way, jquery is already included in zk so you don't need the script for that.

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
2 followers

RSS

Stats

Asked: 2012-01-19 17:17:35 +0800

Seen: 638 times

Last updated: May 30 '15

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