|
JavaScript - Generic Animation Time Question
Basically i dont understand the concept of the timing for animation.
I seen some code samples and they seem to subtract two different times from eachother :S you can tell im confused. and also about calculating frames...heres a quote explaining how frames work but stupid me all of a sudden dont seem to understand english anymore Quote: After that, we need to calculate the total number of frames we are going to animate. If a time of 0 or less then 0 is given, then we are just going to have 1 frame. Otherwise, we divide the time by 40. This is just an arbitrary value that means each frame will last 40 milliseconds (which comes out to 25 frames per second). It doesn't matter if the number of frames comes out to a fraction - we are just going to be using that value to calculate the correct amount of movement per frame. thank you Similar TutorialsI am wondering if its possible to execute a JavaScript script as soon as the page is loaded? Perhaps a generic execution? I tried this, but it didn't work: Code: <SCRIPT type="text/javascript">
if (document.forms["form"]["quantitym"].value > '.$row['sizem'].') {
alert ("The quantity for product $row['id'] is no longer available.");
}
</SCRIPT>
<FORM action="updatecart.html" method="post" name="form">
<DIV>
<B>Medium:</B> <INPUT name="quantitym" value="'.$content['sizem'].'">
</DIV>
</FORM>
This is for my shopping cart system. The idea is, the customer might have 4 items in his cart, but whilst he was shopping, someone might of bought the same item, result in only 3 being available, but his cart still says 4. My solution to this is to make a script run through out his shopping when ever the cart items are listed and just prior payment execution, if the quantity he wants is no longer available, he will be alerted. $row['sizem'] is PHP drawing how many items there are from my stock database. If the value of the INPUT exceeds this availability, JavaScript shall alert. Does anyone know why it isn't alerting? I am trying to trigger one custom function or another, depending on whether a radio button is checked or not. How can this be done? (I was hoping that "self" would be the ticket, but I think I was barking up the wrong tree.) Code: function toggleFieldsetByRadio(element){
if(SELF.checked){
enable(element);
}else{
disable(element);
}
}
How should I do this? I am hoping to use this function with an onchange event. ~ Mo I want to create some type of seasonal feel on my Web page where there are falling leaves. I presently have 6 different gif images of leaves that I know I will probably have to load into an array. I also know that I will have to figure out the maximum width & height of the screen, which is different in Internet Explorer and other browsers. My goal is to load the leaves randomly as well using 'Math.floor(Math.random()*6)', if that is correct. Beyond that, I am lost on how to manipulate the Web page to make this animation occur. Any help would be appreciated. Thank you. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Autumn</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<script type="text/javascript">
<!--Hide from incompatible browsers
/* <![CDATA[ */
var widthMax=0;
var heightMax=0;
var leavesLoaded = new Array(6);
for (var i=0; i<6; ++i)
{
leavesLoaded[i] = new Image();
leavesLoaded[i].src = "leaf" + (i+1) + ".gif";
}
function setLeaf()
{
if (navigator.appName == "Microsoft Internet Explorer")
{
widthMax=document.documentElement.clientWidth;
heightMax=document.documentElement.clientHeight;
}
else
{
widthMax=window.innerWidth-14;
heightMax=window.innerHeight;
}
setTimeout('fallingLeaves()',400);
}
/* ]]> */
// Stop hiding from incompatible browsers -->
</script>
</head>
<body onload="setLeaf();" >
<p><img src="images/leaf1.gif" id="leaf" style="position:absolute; left:0px; top:0px; visibility:hidden" alt="Image of a Leaf" /></p>
</body>
</html>
Hi, I have created an animation exercise for an eLearning lesson in a program that uses JavaScript as the scripting for a Windows executable. A retired social worker who creates these eLearning materials as give-away's to help people in the community improve health, it would be a big help to reaching more people if instead of a Windows executable version, the animation could be developed in a web page. A lot more people could view the eLearning and try this exercise which trains people in pacing their breathing. The animation has a 300X300 circle on the canvas with a couple of text input boxes and a start button. The JS < 50 lines of script, but since it was not developed for a web page, it has no tags and it depends on objects like the circle or button (or 2 audio files to create the inhale/exhale sounds) that were already placed on the canvas in the Windows executable program. I'm not very skilled using Dreamweaver CS5, but with help, reading, references can try to convert this JS into a web version, if it's possible. Not sure how to do this and would appreciate any help. I am adding a screenshot of the interface and the JS functions that are called by the start button. //JS: ( bar1 is the variable entered by the use as breaths per minute-BPM; //time1 is the exercise length; the variables initially are set as follows: //time1=15, //volume=100) var time1 function minuteTimer() { breakLoop = false stopLoop = false fork (calcBreathing) for (var i=0;i<time1;i++) { wait(60) breakLoop = true Submit.Show() Text122.Show() Text12.Show() TextInput22.Show() TextInput2.Show() Submit2.Hide() TextInput2.SetTransparency(0,false) TextInput22.SetTransparency(0,false) Text12.SetTransparency(0,false) Text122.SetTransparency(0,false) Text5.SetTransparency(0,false) Frame12.SetTransparency(0,false) Submit.SetTransparency(0,false) TextInput2.Enable(true) TextInput22.Enable(true) Debug.trace("\n minutes elapsed "+(i+1)+"\n") } stopLoop = true } function calcBreathing() { var bar2 = 60/bar1 for (loop = 0;loop<bar1;loop++) { mySound.Play(1,volume) Vector8.Scale(.5,.5, bar2*.3) mySound.Stop() wait (bar2*.05) mySound2.Play(1,volume) Vector8.Scale(-.5,-.5,bar2*.6) mySound2.Stop() wait (bar2*.05) if (breakLoop) break } breakLoop = false if (bar1 > 6) bar1-- if (!stopLoop) calcBreathing() } Any help appreciated. Thanks very much. Kind Regards, saratogacoach I have a picture of a pinwheel on my website that I want to spin onMouseover. Can this be done with JavaScript?
Hi, I created JavaScript animation and the picture after animation finished disappear. Could anyone tell me or point me how to resolve this kind of issue? I tested it in IE as well as Firefox.. I could send the code but it is quite long for posting, but the screenshots from before and after animation is finished are as below. thanks in advance for any help. trotsky I have created an animation API, which has an option for the 'effect' or animation type. Now i'm trying to produce a slow, fast slow effect using a sine wave but seem to be having some trouble! The code below is supposed to get the steps to calculate each frame by diving the usable part of the sine wave into the total frames. The code should then go on to calculate insert the relevant values into the frame variables, after which multiply them all so that they are the correct scale so that when the animation is running it simply looks up the value and applies it, no need for any processing. With an animation from 0 to 740 (px in this case) the function returns: 115, 228, 335, 434, 523, 598, 659, 703, 730, 740 Oh and just a quick addition the variable "end" will equal 740 in the case above, or whatever the end value is. Code: case "SFS":
var step = 90 / totalFrames;
var pi = Math.PI;
var raid = 0;
for (var i = 1; i <= totalFrames; i++){
raid = (i*step)*(pi/180);
queueFrameValue[topOfQueue][i] = Math.sin(raid);
}
var multiplier = end / queueFrameValue[topOfQueue][totalFrames];
for (var i = 1; i <= totalFrames; i++){
queueFrameValue[topOfQueue][i] = queueFrameValue[topOfQueue][i] * multiplier;
}
break;
Thanks! I have a site with a lot of animated gifs and I was wondering if there was a way to (on page load) stop all gif animations (only show first image frame). Then when you click a link, it will animate the animated gifs.
Hi, I will really appreciate if someone could take a look at my code below and inform me where I'm going wrong, because I can't seem to tell. The instructions a -the file starts with the text "Avalon Books" on the left edge of the page. -the text moves to the center of the page. -After the text reaches the center, the image file kids.jpg appears -Every two seconds thereafter, the image file is swapped with the next image file in the stack (there are 3 images in total). I am only posting the few relevant functions where the problem could be. All the other functions are working properly. I am new to JavaScript so any help will be really appreciated. Thank you This is the main file: Code: function placeObjects(){
var W = (0.5)*winWidth(); //gets the width of user's browser.
placeIt("avalon",0,0); //placeIt function is working fine.
placeIt("kids",W-75,100);
placeIt("fiction",W-75,100);
placeIt("nfiction",W-75,100);
setZ("kids",3); //setZ function is below.
setZ("fiction",2);
setZ("nfiction",1);
moveAvalon();
}
function moveAvalon(){
var x = xCoord("avalon");
if(x <= (W-125)){
shiftIt("avalon", 10, 0);
setTimeout("moveAvalon()",50);
}
else swapImages(); //if x is greater than W-125
}
function swapImages(){
showIt("kids");
showIt("fiction");
showIt("nfiction");
setTimeout("swapIt(kids,fiction,nfiction)",2000); //syntax could be wrong here?
}
</script>
</head>
<body onload="placeObjects()"> //calls the first function on load.
...............
</body>
</html>
and here is the second file that contains all the functions (I am posting 2 of those functions): Code: function setZ(id, z){
var object=document.getElementById(id);
object.style.zIndex="z";
}
function swapIt(id1, id2, id3){
var object1=getObject(id1);
var object2=getObject(id2);
var object3=getObject(id3);
var z1;
var z2;
var z3;
object1.style.zIndex="z1";
object2.style.zIndex="z2";
object3.style.zIndex="z3";
object1.style.zIndex="z3";
object2.style.zIndex="z1";
object3.style.zIndex="z2";
}
Anyone got any suggestions on techniques? The main one I find is to use translate to move the canvas around, which just seems odd to me. I don't even fully understand how it works. But the one I was looking at used clearRect. In examples given looked as though it had to redraw the canvas every frame. I'm just mucking around with a simple poker game, figured i'd have the table in one layer and anything that moves on a top layer? By doing that I could only clear each card as it moved around...yes? Anyone know of a better way of doing things? I am having some difficulty with this project. It is supposed to be an animation of falling leaves. I am very new to arrays and JavaScript, so right off the bat I know that the arrays I have are not right, or are missing something else in order for it to function. Basically all I have for this project is a still picture of the leaves and that is it. If there is someone out there with some JavaScript expertise, could you tell me what I am doing wrong? Here is the code so far, I think it is too long. Code: <script type="text/javascript">
/* <![CDATA[ */
grphcs=new Array(6)
Image0=new Image();
Image0.src=grphcs[0]="images/leaf1.gif";
Image1=new Image();
Image1.src=grphcs[1]="images/leaf2.gif";
Image2=new Image();
Image2.src=grphcs[2]="images/leaf3.gif";
Image3=new Image();
Image3.src=grphcs[3]="images/leaf4.gif";
Image4=new Image();
Image4.src=grphcs[4]="images/leaf5.gif";
Image5=new Image();
Image5.src=grphcs[5]="images/leaf6.gif";
var minSpeed = 5;
var maxSpeed = 30;
var randomSpeed = 5;
var randomSpeed2 = 10;
var randomSpeed3 = 15;
var randomSpeed4 = 20;
var randomSpeed5 = 25;
var randomSpeed6 = 30;
var minHorizontal = 200;
var maxHorizontal = screen.availWidth - 300;
var leftPosition = Math.floor(Math.random() * (maxHorizontal -
(minHorizontal + 1)) + minHorizontal);
var leftPosition2 = Math.floor(Math.random() * (maxHorizontal -
(minHorizontal + 1)) + minHorizontal);
var leftPosition3 = Math.floor(Math.random() * (maxHorizontal -
minHorizontal +1)) + minHorizontal);
var leftPosition4 = Math.floor(Math.random() * (maxHorizontal -
minHorizontal + 1)) + minHorizontal);
var leftPosition5 = Math.floor(Math.random() * (maxHorizontal -
minHorizontal + 1)) + minHorizontal);
var leftPosition6 = Math.floor(Math.random() * (maxHorizontal -
minHorizontal + 1)) + minHorizontal);
var minVertical = 50;
var maxVertical = screen.availHeight - 300;
var topPosition = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition2 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition3 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition4 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition5 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
var topPosition6 = Math.floor(Math.rnadom() * (maxVertical -
(minVertical + 1)) + minVertical);
function matchLeaf() {
if (navigator.appName == "Microsoft Internet Explorer") {
widthMax = document.documentElement.clientWidth;
heightMax = document.documentElement.clientHeight;
}
else {
widthMax = window.innerwidth - 14;
heightMax = window.innerHeight;
}
autumnFall();
}
function autumnFall();
var fallingLeaf1 = document.getElementById("leaf1");
fallingLeaf1.style.left = leftPosition + "px";
fallingLeaf1.style.top = topPosition + "px";
fallingLeaf1.style.visibility = "visible";
topPosition += parseInt(randomspeed);
leftPosition += 0;
if (topPosition >= screen.availHeight - 300) {
topPosition = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition = Math.floor(Math.random() * (maxHorizontal -
(minHorizontal + 1)) + minHorizontal);
leaf1.src = "images/leaf" + Math.floor(Math.random() * 6 +
".gif";
randomSpeed = Math.floor(Math.random() * maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf2 = document.getElementById("leaf2");
fallingLeaf2.style.left = leftPosition2 + "px";
fallingLeaf2.style.top = topPosition2 + "px";
fallingLeaf2.style.visibility = "visible";
topPosition2 += parseInt(randomSpeed3);
leftPosition2 += 0;
if (topPosition2 >= screenavailHeight - 300) {
topPosition2 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition2 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf2.src = "images/leaf" + Math.floor(Math.random() * 6)
+ "gif";
randomSpeed2 = Math.floor(Math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf3 = document.getElementById("leaf3");
fallingLeaf3.style.left = leftPosition3 + "px";
fallingLeaf3.style.top = topPosition3 + "px";
fallingLeaf3.stye.visibility = "visible";
topPosition3 += parseInt(randomSpeed3);
leftPosition3 += 0;
if (topPosition3 >= screen.availHeight - 300) {
topPosition3 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition3 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf3.src = "images/leaf" + Math.floor(Math.random() * 6
+ "gif";
randomSpeed3 = Math.floor(Math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf4 = document.getElementById("leaf4");
fallingLeaf4.style.left = leftPosition4 + "px";
fallingLeaf4.style.top = topPosition4 + "px";
fallingLeaf4.style.visibility = "visible";
topPosition4 += parseInt(randomSpeed4);
leftPosition4 += 0;
if (topPosition4 >= screen.availHeight - 300) {
topPosition4 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition4 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf4.src = "images/leaf" + Math.floor(Math.random() * 6
+ "gif";
randomSpeed4 = Math.floor(Math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf5 = document.getElementById("leaf5");
fallingLeaf5.style.left = leftPosition5 + "px";
fallingLeaf5.style.top = topPosition5 + "px";
fallingLeaf5.style.visibility = "visible";
topPosition5= parseInt(randomSpeed5);
leftPosition5 += 0;
if (topPosition5 >= screen.availHeight - 300) {
topPosition5 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition5 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf5.src = "images/leaf + Math.floor(Math.random() * 6 +
"gif";
randomSpeed5 = Math.floor(Math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
var fallingLeaf6 = document.getElementById("leaf6");
fallingLeaf6.style.left = leftPosition6 + "px";
fallingLeaf6.style.top = topPosition6 + "px";
fallingLeaf6.style.visibility = "visible";
topPosition6 = parseInt(randomSpeed6);
leftPosition6 += 0;
if (topPosition6 >= screen.availHeight - 300) {
topPosition6 = Math.floor(Math.random() * (maxVertical -
(minVertical + 1)) + minVertical);
leftPosition6 = Math.floor(Math.random() * (maxHorizontal
- (minHorizontal + 1)) + minHorizontal);
leaf6.src = "images/leaf + Math.floor(Math.random() * 6 +
"gif";
randomSpeed6 = Math.floor(math.random() * (maxSpeed -
(minSpeed + 1)) + minSpeed);
}
}
/* ]]> */
</script>
</head>
<body onload="setInterval('matchLeaf()', 100);">
<img id="leaf1" src="images/leaf1.gif" alt="leafone"
style="position:absolute; left:100px; top:100px;" />
<img id="leaf2" src="images/leaf2.gif" alt="leaftwo"
style="position:absolute; left:100px; top:100px;" />
<img id ="leaf3" src="images/leaf3.gif" alt="leafthree"
style="position:absolute; left:100px; top:100px;" />
<img id="leaf4" src="images/leaf4.gif" alt="leaffour"
style="position:absolute; left:100px; top:100px;" />
<img id="leaf5" src="images/leaf5.gif" alt="leaffive"
style="position:absolute; left:100px; top:100px;" />
<img id="leaf6" src="images/leaf6.gif" alt="leafsix"
style="position:absolute; left:100px; top:100px;" />
Hello readers! I made some animation code Code: for (var i = 1; i < 8; i++) {
var slc = ".s" + i;
$(slc).css(
{
'position':'absolute',
'top':'-300px',
'left':30*i*5,
'width':'100px',
'height':'300px',
'backgroundColor':'white'
});
};
$('body').click(function() {
for (var t = 1; t < 8; t++) {
var asd = '.s' + t;
$(asd).animate({
'top':'0px'
}, 100*t).animate({
'top':'-300px'
}, 100*t);
};
});
in html there are some div tags. So, question is - How to normilize queue of animation? You see that first box moves fast and the last one moves very slow to the end. I would like boxes to move proportionally in relation to the time. Could you give some recommendations about this stuff? hi im using dhtml xgrid where i need to do validation for time ,(from-time and to-time i.e ind==1 and ind==2 ) to-time must be greater than from-time else i need to alert a message to-time must be greater than from-time. can any one send me the code for it time format is[05:00]. Code: var err_str="";
function validate_grid(value,id,ind)
{
$("#result").html(" ").show();
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
Hi Code: var err_str="";
function validate_grid(value,id,ind)
{
$("#result").html(" ").show();
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
alert(err-str);
here ind==1 is from_time and ind==2 is to_time,i need to validate time as to_time must be always greater than from-time,if condition fails an alert msg should populate.time format is[05:00]as it is in string format im unable to do the validation for it.(ex:from-time=08:00 to-time=07:59 condition fails) thank you. Hello im using dhtmlx grid in this cells i have from time and to time (i.e ind==1 and ind==2) i need to validate time where to-time must be greater than from-time else it should alert an message,i have writeen a normal Regular expression for the time validation.as the time is i string format i.e[05:00],please can any one send me code for that. Code: var err_str="";
function validate_grid(value,id,ind)
{
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
Hi I am new here, am having a terrible problem with animation build up. have searched and found various codes to stop,but can't implement in the .js in a way that works. Maybe am putting in wrong place. Wondering if anyone can help, would really appreciate it. Following is the code: Thank you Code:
var droplinemenu={
arrowimage: {classname: 'downarrowclass', src: 'down.gif', leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 600}, //duration of slide in/ out animation, in milliseconds
buildmenu:function(menuid){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
if (!this.istopheader)
$subul.css({left:0, top:this._dimensions.h})
var $innerheader=$curobj.children('a').eq(0)
$innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
$innerheader.append(
'<img src="'+ droplinemenu.arrowimage.src
+'" class="' + droplinemenu.arrowimage.classname
+ '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
)
$curobj.hover(
function(e){
var $targetul=$(this).children("ul:eq(0)")
if ($targetul.queue().length<=1) //if 1 or less queued animations
if (this.istopheader)
$targetul.css({left: $mainmenu.position().left, top: $mainmenu.position().top+this._dimensions.h})
if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
$mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
$targetul.slideDown(droplinemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(droplinemenu.animateduration.out)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
}) //end document.ready
}
}
I'm attempting to write a function that will cause a small red dot to slide from off-screen, to it's position, 15 px into the page. However every time I run it, it does nothing, and I get a message on Firebug reading "dot 1 is null" on line 4 of the function. Below is the function: Code: function openingAnim() {
var dot1 = null;
dot1 = document.getElementById('m-dot1');
dot1.style.left = '0px';
doMove();
function doMove() {
while (dot1.style.left < 15) {
setTimeout("dot1.style.left = parseInt(dot1.style.left)+1+'px';",20);
}
}
}
And here is the id of the dot graphic from my CSS file: Code: #m-dot1 {
position:absolute;
background:url(../images/m-dot1.png);
width:50px;
height:50px;
outline:none;
left:-50px;
top:89px;
z-index:15
}
Can anyone tell me what I'm doing wrong? I have just completed my JS studies and wish to try 3 things to test what I have learned, first I wish to create a simple animation, then I'll attempt my own slideshow and last a specific script. First, can I try the animation on this specific forum? If not then is there another forum for this on this board or do I have to go to an animation specific site please?
Hi guys. I'm trying this tutorial to get a sweet looking menu. http://snook.ca/archives/javascript/...ge-animations/ I've followed all the steps but I seem to be missing something, because the transition is just a simple hover transition. Can someone check what I'm doing wrong, please? Thank you very much! JS Code Code: $('a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -150px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})
HTML Code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript" src="javascript.js"></script> <script type="text/javascript" src="jquery.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </body> </html> Styles code Code: ul {
list-style:none;
margin:0;
padding:0;
}
li {
float:left;
width:100px;
height:50px;
margin:0;
padding:0;
text-align:center;
}
li a {
display:block;
padding:0;
height:100%;
color:#FFF;
text-decoration:none;
}
li a {
background:url(animation.jpg) no-repeat 0 0;
}
li a:hover {
background-position:0px -150px;
}
Hi everyone! I'm new to coding and need help on my school project. I have to animate a ball and make it move up and down the page using the if statement and the or logic. I understand the concepts of the if statement but when it comes to actually writing it in code, I fail miserably at it. Heres the code... Code: <html>
<body>
<center><button type="button"onClick="first()">Click to move ball down!</button>
<button type="button"onclick="second()">Click to return ball to top!</button></center>
<IMG ID="ball"STYLE="position:absolute;left:50;top:50;width:100;height:100;"SRC="ball.jpg">
<script language="JavaScript">
var myElement=document.getElementById("ball");
var loc= 50;
function first()
{
loc +=50;
myElement.style.top=loc;
}
setInterval("first()",50);
function move()
{
if(loc>500 || loc<0)
{
loc=-loc;
}
myBall.style.top=loc;
}
</script>
</body>
</html>
.. so what is happening is the ball will continuously fall without stopping. Can someone help me get the ball bounce from the edge of the screen back to the top and continue to do it. Thanks. |
|||||||