Home/ Questions/Q 9246667
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T09:32:43+00:00

I’m new to coding and hope someone could help me with my hopeless code

  • 0

I’m new to coding and hope someone could help me with my hopeless code skills. I’m trying to create a div that will animate on and off the screen on press a button. Here is what I’ve got so far…. it’s probably stupidly wrong but I guess that’s what this site is for.. here you go

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <div id="test">Example Text</div>
 <script>
function myFunction()
{
    var position = test.position();
    if("#test".position<0)
    {  
    alert("hello");
    $("#test").animate({
    "left": 0
    },1000);
}else{
    $("#test").animate({
    "left": -15
    },1000);
});
}
</script>   



</body>
</html>

This function is called when an image is clicked. My idea was to basically tell the div to animate onto the screen if it’s position value is less than 0, which I think tells it that it’s off the screen. If it doesn’t detect it’s value is offscreen, it means the div is onscreen at the moment and so it should animate away. I’d be very grateful of any help that anyone can provide. Thanks very much in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here you go. 

     <!DOCTYPE html>
 <html>
 <head>

 </head>
 <body>
<div id="test">TESTTEST</div>
<input type="button" name="myButton" value="Click Me" onclick="myFunction()" />   
 <script>     
 function myFunction()
{
var divPosition = $("#test").offset();
if(divPosition.left < 0 )
{ 
$("#test").animate({
"left": 0
},1000);
 }else{
$("#test").animate({
"left": -150
},1000);
};
}
 </script>
 </body>
 </html>

    And CSS:

     #test{
     background-color:white;
     border:3px solid black;
     font-size:30px;
     position:absolute;
     left:-20%;
     top:10%;
 }

    Working Fiddle: http://jsfiddle.net/KeE4h/48/

    • 0