Click here to Skip to main content
15,076,130 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
jquery scroller moves toward right on #what click and continues to so whenever the button is clicked but #hat moves just once would want it to move whenever #hat is clicked

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(document).ready(function()
{
    $("#what").click(function()
    {
        $("div").animate(
        {
            left: '+=250px'         
        });       
    });
    
    $("#hat").click(function()
    {
        $("div").animate(
        {
            right: '+=250px'         
        });       
    });
});
</script> 
</head>
<body>
    <p id="what">></p>
    <p id="hat"><</p>     
<p></p>
<table border="4">    
        <div style="background:#42ny41;height:100px;width:100px;position:absolute;">
        Java is Object oriented
        </div>
        </body>
</html>


What I have tried:

changed function for onclick events
Posted
Updated 31-Dec-17 5:13am

1 solution

If I understand correctly, you want a click on the #hat element to move the div back to the left. Instead of doing right: '+=250px', this works:
JavaScript
left: '-=250px'
So that does the opposite of the click on #what.
   
Comments
Karthik_Mahalingam 31-Dec-17 13:06pm
   
5
Thomas Daniels 31-Dec-17 13:06pm
   
Thank you!
four systems 1-Jan-18 3:34am
   
left and right is controlled by left: '+=250px' and right: '+=250px' attributes it does moves in either direction but towatds left just once and then towards right
Thomas Daniels 1-Jan-18 3:37am
   
Your code wasn't working for me with "right: '+=250px'"... but anyway, I'm not sure what you mean by this comment.
four systems 1-Jan-18 3:40am
   
is your browser javascript enabled cause it works on chrome and mozilla
Thomas Daniels 1-Jan-18 3:42am
   
Well, of course it's enabled - otherwise my code wouldn't work either :) But no, "right: '+=250px'" doesn't work for me on both Chrome and Firefox.
four systems 1-Jan-18 3:46am
   
yes that is the question that right doesnt works but it does works once when the document is loaded
Thomas Daniels 1-Jan-18 3:47am
   
Right never worked for me, so I suggest left to fix it.
four systems 1-Jan-18 3:51am
   
changed right to left and left: '-=250px' works now thanks

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900