CODEWITHSUNDEEP
jqueryhtml
Jitender
Jitender

Reputation: 7969

how to get value when function is running on browser

i have animated div in html. it is adding 1px to div in every second, now i want if my div's right position reach 15 then one alert box should say "hiii". i have made a small function but it is not working.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>

.wrap { border:solid 1px #F00; width:1000px; height:300px; overflow:hidden; position:relative}

.box { width:200px; height:200px; background:#00F; position:absolute}
</style>


<script type="text/javascript" src="jquery-1.7.2.js"></script>

<script type="text/javascript">


var left=5; 

$(function aniMation(){




    $('.box').css({right:++left})
    setTimeout(aniMation,1000)  

    })



$(function (){

    var box= $(".box").css("right")

    if(box=="10px"){

        alert("hiii")

        }


    })





</script>


</head>


<body>

<div class="wrap">

<div class="box"></div>

</div>

</body>

Upvotes: 1

Views: 49

Answers (2)

Ned Batchelder
Ned Batchelder

Reputation: 375754

This function is run once when the page is ready, and then never run again:

$(function (){
    var box= $(".box").css("right")

    if(box=="10px"){
        alert("hiii")
        }
    })

If you want to check the div's position, you have to do it repeatedly, perhaps in the same function that is moving the div.

Upvotes: 1

Alex
Alex

Reputation: 18522

I don't think you're actually calling that function other than on page load!

From the docs:

jQuery( callback )

A shorthand for $(document).ready(). Allows you to bind a function to be executed when the DOM document has finished loading.

I've checked the lines you call in the Console of my browser (Google Chrome) and they seem to work. The problem is that the function is only executed once on page load, which is before the check is true.

Upvotes: 3

Related Questions