homepage Welcome to WebmasterWorld Guest from 54.161.228.29
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
toplisek




msg:4395979
 1:44 pm on Dec 9, 2011 (gmt 0)

I like to set the same slide as code from website demos like:
[dojocampus.org...]

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.
dojo.require("dojo.fx");
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;
break;
case 2:
currentAnimation = slideLeft;
break;
case 3:
//Chain two animations to run in sequence.
//Note the array passed as an argument.
currentAnimation = dojo.fx.chain([slideRight, slideLeft, slideRight, slideLeft]);
break;
}
if (currentAnimation) {
//Play the animation. Without this call, it will not run.
dojo.connect(currentAnimation, "onEnd", function(){
currentAnimation = null;
});
currentAnimation.play();
}
}

function pauseAnimation(){
if(currentAnimation && currentAnimation.status() == "playing"){
currentAnimation.pause();
}
}
function resumeAnimation(){
if(currentAnimation && currentAnimation.status() == "paused"){
currentAnimation.play();
}
}
</script>
<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;
}
</style>

<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>
<br/>
<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">
<p>
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.
</p>
</div>

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