homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Simulated slide with dojo

WebmasterWorld Senior Member 5+ Year Member

Msg#: 4395977 posted 1:44 pm on Dec 9, 2011 (gmt 0)

I like to set the same slide as code from website demos like:

What I have to change to work slide?

Posted on this URL:
<script type="text/javascript">
//Note that you have to require "dojo.fx" to use the slide methods.
//These are not included in the base.
var slideRight = dojo.fx.slideTo({node: "animDiv",duration: 1000, left: 300, top: 80});
var slideLeft = dojo.fx.slideTo({node: "animDiv",duration: 1000, left: 0, top:80});
var currentAnimation;

function doAnimation(index) {
if(currentAnimation && currentAnimation.status() != "stopped"){
return;//do not interrupt a running animation

console.log("doAnimation " + index);
switch(index) {
case 1:
currentAnimation = slideRight;
case 2:
currentAnimation = slideLeft;
case 3:
//Chain two animations to run in sequence.
//Note the array passed as an argument.
currentAnimation = dojo.fx.chain([slideRight, slideLeft, slideRight, slideLeft]);
if (currentAnimation) {
//Play the animation. Without this call, it will not run.
dojo.connect(currentAnimation, "onEnd", function(){
currentAnimation = null;

function pauseAnimation(){
if(currentAnimation && currentAnimation.status() == "playing"){
function resumeAnimation(){
if(currentAnimation && currentAnimation.status() == "paused"){
<style type="text/css">
.box {
margin-top: 10px;
color: #292929;
width: 300px;
top: 80px;
position: absolute;
border: 1px solid #BABABA;
background-color: #ddd;
padding-left: 10px;
padding-right: 10px;
margin-left: 10px;
margin-bottom: 1em;
-o-border-radius: 10px;
-moz-border-radius: 12px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 3px 7px #adadad;
border-radius: 10px;
-moz-box-sizing: border-box;
-opera-sizing: border-box;
-webkit-box-sizing: border-box;
-khtml-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;

<button dojoType="dijit.form.Button" onClick="doAnimation(1);">Slide Right</button>
<button dojoType="dijit.form.Button" onClick="doAnimation(2);">Slide Left</button>
<button dojoType="dijit.form.Button" onClick="doAnimation(3);">Slide Right Then Left</button>
<button dojoType="dijit.form.Button" onClick="pauseAnimation(2);">Pause</button>
<button dojoType="dijit.form.Button" onClick="resumeAnimation(2);">Resume</button>

<div id="animDiv" class="box">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla
facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi
semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum
magna. Sed vitae risus.

2008 The Dojo Foundation, All Rights Reserved. | Hosting generous


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved