Simple javascript problem

Question

I have one simple problem i guess that i can't solve

Here is the complete code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<style type="text/css">
<!--
#content{
    width:300px;
    height:300px;
    background-color:#FF0000;
    overflow:hidden;
    position: relative;
    top: -300px;
}
#content1{
    width:300px;
    background-color:#33FF00;
    height:300px;
    z-index:100;
    position: relative;
    left: 300px;
}
#content2{
    width:300px;
    height:300px;
    background-color:#000099;
    z-index:100;
    position: relative;
    top: -400px;
}



-->
</style>


</head>
<body>
<script language="javascript">
function example_animate(px) {
    $('#content2').animate({
        'marginTop' : px
    });
}
</script>
<script language="javascript">
function example_animate2(px) {
    $('#content1').animate({
        'marginLeft' : px

    });


}
</script>


    <p>

       <input type="button" value="Move Up" onClick="example_animate('-=200px')" />
      <input type="button" value="Move Left" onclick="example_animate2('-=300px')" />

    </p>
    <div id="content1"></div>


    <div id="content">

</div>


<div id="content2"></div>




</body>
</html>

Now, few things in which I need help and don't understand how can they be done. First of all, how can I make that both animations occur only once?

Secondly, how can the green box always appear over the blue one?

Then, how can I make buttons disappear after being clicked? . So when I for example click "Move Up", I need that button to disappear.

And lastly, when "Move Left" is triggerd, I need that "Move Up" button disappears also, just like the "Move Left" , while on the other hand, "Move Left" won't disappear when "Move Up" is clicked ("Move Up" just will)

Is this simple,and could it be done? Please help!

Answer 1

>>how can I make buttons disappear after being clicked
If you set ID to buttons, it could be done like this

$(document).ready(function() {
$("#button1").click(function () {
$(this).hide();
}); 
});

By using $(element).click(...) you add event listener to specific element, but it can be done only after dom is ready. Read about js and events to understand what i'm talking about.

>>when "Move Left" is triggerd, I want that "Move Up" button disappears also, just like the "Move Left"
add click handler for moveLeft where moveUp disappears just like in example above
Edit: "this" refers to the clicked element. use moveUp id in the moveLeft click handler to make it disappear.
>>I need that the green box always appears over the blue one
set z-index style for your boxes
>>I want that both animations can occur only once
You could set up some animationComplete variable that shows whether animation was complete or not.

Simple javascript problem

Question

1 answers

solution1
0 2011-09-19 23:05:17

Simple javascript problem

Question

1 answers

solution1 0 2011-09-19 23:05:17

solution1
0 2011-09-19 23:05:17