CODEWITHSUNDEEP
javascriptjqueryhtml
MySQL
MySQL

Reputation: 181

Moving two div elements at once

Not sure if I'm being too clear with the title. Sorry, it's late and I don't think I have a cleared mind.

Anyway what I want this to do is..

  1. When the div(manager) is clicked, the div(managerp) appears.
  2. The div(manager) moves to the area the same time managerp moves there. Almost as though they move as one div element.
  3. On the next click managerp Fades out, and manager moves back to its original position.

I'm able to do all of that, but it won't return to it's original position. I am a novice when it comes to jQuery, so this is where I ask for your help.

EDIT: The div manager doesn't seem to return to the old position. I've tried editing the css through jQuery to get it to, but it doesn't seem to work.

HTML : 

    <div id="manager">
        <span>&raquo;</span>
</div>
<div id="managerp" style="">

</div>

No, I can't put managerp within manager, it doesn't seem to position itself as good as it should.

jQuery : 

            $(document).ready(function() {
            $("#manager").click(function() {
                $("#manager").css({'margin-left' : '270px', 'border-left' : '0'});
                $("#managerp").toggle("slow", function() {
                    if ($("#managerp").is(':visible'))
                        $("span").html("&laquo;");
                    else 
                        $("span").html("&raquo;");
                });
            });
        });

This should help you get the picture of what it's supposed to look like. (Sorry if I am giving way too much information)

One Two

Thank you for your help. If you need me to be more specific as to what it should be doing, just ask.

This is how it looks when it doesn't return correctly.

Upvotes: 1

Views: 2653

Answers (6)

Swaraj
Swaraj

Reputation: 21

Hope this helps ...

You need to reset Margin-Left to 0. Also hide the div ManagerP at the start. 

<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
        $(document).ready(function() {
    $("#managerp").hide();
    $("#manager").click(function() {
    $("#managerp").toggle("slow", function() {
          if ($("#managerp").is(':visible')){
              $("span").html("&laquo;");
              $("#manager").css({'margin-left' : '270px', 'border-left' : '01'});           }
          else {
                $("span").html("&raquo;");
                $("#manager").css({'margin-left' : '0px', 'border-left' : '01'});}
                                            });
        });
    });


</script>       
<body>
<div id="manager">
   <span>&raquo;</span>
</div>
<div id="managerp" style="">
  This is a test for sliding control <br>
  This is Manager P DIV
</div>
</body>
</html>

Apologies for bad formatting... working with notepad isn't fun

Upvotes: 0

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94379

How about this:

$(document).ready(function() {
        $("#manager").click(function() {
            $("#managerp").toggle("slow", function() {
                if($("#managerp").is(':visible')){
                    $("span").html("&laquo;");
                    $("#manager").css({'margin-left' : '0px', 'border-left' : '0'});
                }else{
                    $("span").html("&raquo;");
                    $("#manager").css({'margin-left' : '270px', 'border-left' : '0'});
                }
            });
        });
});

You have to reset the margin to 0px.

Upvotes: 1

aifarfa
aifarfa

Reputation: 3939

IMO your problem is not to deal with jQuery.

the problem is you can't put the #manager and #managerp together as single element

try CSS absolute/relative position

Upvotes: 1

krishnan
krishnan

Reputation: 139

    var flag = false; 
     $(document).ready(function() {
                $("#manager").click(function() {
                    if(!flag)
                    {
                        $("#manager").css({'margin-left' : '270px', 'border-left' : '0'});
                        flag = true;
                    }
                    else
                    {
                        $("#manager").css({'margin-left' : '0px', 'border-left' : '0'});
flag = false;
                    }
                        $("#managerp").toggle("slow", function() {
                            if ($("#managerp").is(':visible'))
                                $("span").html("&laquo;");
                            else 
                                $("span").html("&raquo;");
                        });                
                });
            });

Upvotes: 1

Mutahhir
Mutahhir

Reputation: 3832

At first guess, there's no place in your code which actually resets the margin back. You're just resetting the text, but no margin back to zero. Am I missing something here?

Upvotes: 0

Starx
Starx

Reputation: 79041

Use multiple-selector on your code to manipulate multiple elements. Like this

 $("#manager, #managerp").css({
    'marginLeft' : '270px', 
    'borderLeft' : '0'
});

Upvotes: 0

Related Questions