Animation / If Statement - Moving Ball Up And Down
Sep 15, 2010
I'm new to coding and working 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...
<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. How to get the ball bounce from the edge of the screen back to the top and continue to do it.
View 15 Replies
ADVERTISEMENT
Dec 2, 2009
project of manipulating bouncing ball. Once user inputs the new ani value, the ball goes out. I want user to set any value ani, int and size of the ball to achieve desired animation.
[Code]...
View 7 Replies
View Related
Oct 21, 2005
i've got the following code that checks the browser width and then redirect is it's under 500px, but IE 5.5 just redirects regardless:
<script language="javascript" type="text/javascript">
function checkBrowserWidth()
{
var theWidth = getBrowserWidth();
if (theWidth < 499)
{
window.location.replace("/handheld/");
}
return true;
}
function getBrowserWidth()
{
if (window.innerWidth)
{
return window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth != 0)
{
return document.documentElement.clientWidth;
}
else if (document.body)
{
return document.body.clientWidth;
}
return 0;
}
checkBrowserWidth();
window.onload = checkBrowserWidth;
</script>
any ideas??
View 4 Replies
View Related
Apr 27, 2011
I'm nothing with javascript but often use code from [URL]to complete projects. The problem at present is that I need two functions to run on a single page, and it keeps throwing errors and not working.One is for an navigation rotator, the other is for a twitter feed.
Code:
<!-- jquery for twitter links -->
<script type="text/javascript"
[code]....
View 3 Replies
View Related
Apr 25, 2011
I tried many ways to do it .. but didn't work any of them ..
The idea is move the foot to room no.1 .. but i want to see the foot moving on the red line to the room
like this pic : [url]
View 7 Replies
View Related
Jan 5, 2010
I'm trying to make a Javascript application that animates a ball bouncing up and down. I have five image files (ball1.jpg, ball2.jpg, etc located in the same folder as my html file. Here is my code:
[Code]...
My code also has all of the text which makes it xhtml in the beginning which I didn't type out. When I open the html file in Chrome, I see the first picture and the Start Animation button but when I click the button nothing happens.
View 13 Replies
View Related
May 4, 2009
I have a very strange issue which happens only on the Mac/Firefox 2 (and 3 I believe) : [URL] The top left logo (ball) is a simple flash 'spin' animation, that is activated using javascript via the navigation (onmouseover effect). This works fine on Windows - Firefox, IE and Mac - Safari. However on Mac/Firefox, the logo ball on page load simply DOES NOT APPEAR. However, when you simply SCROLL down or if you move your mouse over the navigation (which calls the flash), then the logo appears. Basically, it's really odd because the logo ball is there, but Mac/Firefox does not show it until you do something to the page, like scroll.
View 1 Replies
View Related
Apr 4, 2011
my webstie allows users to change the color of the background, so to keep the text readable I have it changing as well.the color picker I am using has text boxes with rgb values 0-255 for each.I am trying to get one bit of text to alternate between red and blue with the conditions
Code:
if(blue>green && blue>red)
{
[code]....
View 2 Replies
View Related
Jan 10, 2012
I have a button which is animated with a rollover effect, obtained through jQuery of course. I wish to open a lightbox clicking that button and I tried with a simple, self-made lightbox and with FancyBox but in either case the lightbox is displayed without animation.I post the code for my buttons and the lightboxHTML for buttons:
<ul> <li><div id="fader0"> <div class="from"><a class="products" href="#inline"><img src="images/tabproducts.png" alt="Our products" /></a></div> <div class="to"><a class="products" href="#inline"><img src="images/tabproductsHover.png" alt="Our products"
[code]....
View 1 Replies
View Related
Aug 27, 2011
I've been messing with this code to make a fade in animation with setTimout. The only thing is addition isn't working on the fade in. A subtraction on a negative works though. This seems strange to me.
changeit.style.opacity -= -0.01; works but when it's changed to changeit.style.opacity += 0.01; there's no fade in. It's the only thing I change. My intuition says to me it should work with addition, but maybe there's something I'm not understanding.
<html>
changeit.style.opacity -= -0.01; if this is set to changeit.style.opacity += 0.01; it doesn't work. What?
Of course this is all just for Firefox for now. If I put this in something useful I'll change it so it'll work in other browsers later.
View 8 Replies
View Related
Nov 14, 2000
If any body know any code to keep the same url in the location var when i use difernets links.
View 3 Replies
View Related
Sep 1, 2005
is there a possibility to move a node from one child position to
another ?
View 4 Replies
View Related
Apr 17, 2009
I have a website made of 4 div's that are set with have these settings:
Code:
#all { color: white; font-size: 10px; background-color: #282828; position: relative; width: 532px; min-height: 740px; margin: 7px auto 30px; padding: 348px 297px 10px 174px; }
#left { position: absolute; top: 348px; left: 0; }
[Code].....
In internet explorer the script works fine and in firefox it does mpt work, the footer div stays at position -300
View 2 Replies
View Related
Jan 19, 2011
I am getting to learn JavaScript, and as for my first personal project, I would like to have a page with some text on it and when the user scrolls, a div containing a picture will move with the user when they scroll. I have found a solution, however, I do not like it.
<html>
<head runat="server">
<title>Test</title>
[code]...
As you can see, it works by getting the scroll position and adding 250, to a height property-element above the image div. I have tried to use document.getElementById("image").style.top = scrollevel + 'px', but it does not work.
View 2 Replies
View Related
Sep 24, 2009
How do I go about moving a general DIV with Javascript?
View 7 Replies
View Related
Feb 14, 2001
I have looked around and cannot find what I need. I am looking to put a box in my left nav bar that shows 10 links at a time. I would like it to slowly scroll upward continuously in a loop. I have about 50 to 75 links I would like to put there.
Doe anyone know where I can find such a script?
View 3 Replies
View Related
Jul 20, 2005
I'm totally new to JavaScript, and haven't been able to find the
answer to that on the web:
I have an image and want to use an imagemap in a way that when the
cursor touches a certain point there's some text (possibly
moving/scrolling) displayed on/over the image.
In concrtene: I have a face, and when touching the eye with the cursor
I want to print "seeing" in the screen.
View 2 Replies
View Related
May 27, 2010
I need to move the entire contents of one div to a sibling div. At present I'm just doing (assuming the 2 divs are called 1st and 2nd):
What I need to know is if this is the quickest means (in performance terms) of doing this as I will be performing the operation regularly and on a large number of nodes and it's in an area where the UX really can't stutter ?
View 4 Replies
View Related
Apr 8, 2009
I've implemented the following into one of my web sites. It moves the container down with the page when a visitor is scrolling down.
[URL]
It works well, although when tested in Safari and Chrome it doesn't move down the page. Works well in IE and Firefox.
Does anyone know where a similar example is cross-browser compatible?
View 1 Replies
View Related
Jul 15, 2010
how I could move a div around a page on mouse down? Like drag and drop it where I want it to be on the page and grab its x,y position?
View 2 Replies
View Related
Dec 26, 2010
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta http-equiv='Content-Script-Type' content='text/javascript'>
[Code]....
What am I doing wrong? The onclick wont trigger.
View 2 Replies
View Related
Aug 5, 2011
I am fairly experienced in HTML but javascript I am useless with.My website can be found here;http://mgwalker.site90.com/index.htmlIf you would be as kind as to load it in Chrome and in firefox, in firefox the changing image pops up on the top right of the screen.
View 6 Replies
View Related
Sep 11, 2007
I have some problem in javascript slider functions.In slider (pan and zoom)control when i click the mid bar, the slider move in clicking direction after that click the back side of slider the slider is moving backside also.
View 2 Replies
View Related
Oct 23, 2004
consider the senario for example if i am taking some input from user on my page and checking that the input should be a number for that imake a script shown below which is working fine Code:
View 3 Replies
View Related
Nov 12, 2004
I have a fully working listbox that I'm having troubles with. The idea is to select from the first box and add to the second box. I've done this a variety of ways and wanted to use DOM as it solves some speed issues with the other solutions if the elements in the boxes are in the thousands.
The problem I'm having may be in IE6, note how using the code below that you can move items over to the right hand side using "Add >" and it sorts it the result like a good script. But when you start to move things the other way using "< Rem" the first box is fine, but the 2nd box never bothers to remove the results! From there on, the moving is pretty much broken. I suspect this is an IE bug since if I ALT+TAB and hide the browser then go back the results are as they should be, however, perhaps I'm just doing something dumb in my code? Code:
View 3 Replies
View Related
Mar 17, 2006
i need to shake the window of the browser when i click a button in a flash movie..
View 4 Replies
View Related
