?
Solved

Moving box from right to left in jQuey

Posted on 2011-09-08
7
Medium Priority
?
252 Views
Last Modified: 2012-05-12
Hi. I'm experimenting with jQuery.

I'm trying to move a 80px x 80px green box from right to left across a webpage using the setInterval method.

Here is the HTML:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!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 runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery-1.6.2.js"></script>
    <script type="text/javascript" src="JScript.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="box">
    
        Go!</div>
    </form>
    
</body>
</html>

Open in new window


Here's the CSS:
.box
{
    
    width: 80px;
    height: 80px;
    background-color: green;
    margin-left: 861px;
}

Open in new window


And here's the jQuery:
$(function () {
    var greenLeft = $('.box').offset().left;
    setInterval(function () {
        $('.box').css('left', --greenLeft);
    }, 200);
});

Open in new window


When I run the webpage, nothing happens. Would it be easier to use the 'animate' method?
0
Comment
Question by:WhyDidntItWork
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 2000 total points
ID: 36504771
Set margin-left style property instead of left style property.
Since the box isn't absolute positioned; setting the style property left doesn't do anything.
$(function () {
    var greenLeft = $('.box').offset().left;
    setInterval(function () {
        $('.box').css('margin-left', --greenLeft);
    }, 200);
});

Open in new window

0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36505153
why not use animate function of jquery
http://api.jquery.com/animate/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<style>
		.box
		{
			width:80px;
			height:80px;
			position:absolute;
			left:1000px;
			border:1px solid #ccc;
			background-color:pink;
		}
	</style>
	<script src="jquery-1.4.2.min.js"></script>
	<script>
		$(document).ready(function(){
			
			$(".box").animate({"left":"0px"}, "slow");

		});
	</script>
</HEAD>

<BODY>
	<div class="box">Box</div>
</BODY>
</HTML>

Open in new window

0
 

Author Closing Comment

by:WhyDidntItWork
ID: 36505939
Thanks Albert.

It worked like you said it would.

What is the importance of having the box absolute positioned? I'll have to do some digging into that.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:WhyDidntItWork
ID: 36505959
Thanks for trying Gurvinder. I tried your code and variations of it but I couldn't get it to work. All things said, I would prefer the animate method.
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36506000
did you change the jquery script url? Since i tried this on IE8, and Chrome6 and it worked
0
 

Author Comment

by:WhyDidntItWork
ID: 36506028
Gurvinder, I take it back. It did work but it didn't give the granular control that I was looking for. Thanks for the suggestion.
0
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 36506608
You can use the animate method though.
The thing is, you can't really control the speed in some cases.

Animate has the duration property which you can set at "fast", "slow" or a number (which is the duration; the higher the number the longer it takes).
Suppose you want to move an element from left to right of the screen. (what a scenario heh)
It just depends on how wide your screen is how fast the element will move.

Another tip : you might want to stop the 'animation' when the element is at the other side of your screen.
Use clearInterval for that.
$(function () {
    var greenLeft = $('.box').offset().left;
    slide = setInterval(function () {
        if(greenLeft == 0)
            clearInterval(slide);

        $('.box').css('margin-left', --greenLeft);
    }, 200);
});

Open in new window

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question