5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

jQuery problem

by devaldcool
4 replies
I have swapping div's. When I click the "#inactive" id, the "#active-page" should disappear and the "#inactive-page" should appear. Moreover, the "#active" id should become the "#inactive" id and vice versa. I have used swapping id's =>"#inactive-page-swap" with the qualities of "#inactive-page" and "#active-swap" with qualities of "#active".

THE PROBLEM IS - when I click the "#inactive" id, the "#active-page" disappears but the "#inactive-page" does not appear. :confused: :confused: :confused:

<script>
$(document).ready(function(){
$("#inactive").click(function(){
$("#inactive").attr("id","active-swap");
$("#active").attr("id","inactive");
$("#active-swap").attr("id","active");


$("#active-page").attr("id","inactive-page-swap",function(){
$("#inactive-page").attr("id","active-page");
$("#inactive-page-swap").attr("id","inactive-page");
});
});
});
</script>

Please help me!!!
#jquery #problem
  • Profile picture of the author Brandon Tanner
    You're missing quotes around #inactive on the 3rd line of the script.

    Also, learn to indent your code correctly, and it will be much easier to read.
    Signature

    {{ DiscussionBoard.errors[7889938].message }}
  • Profile picture of the author SteveJohnson
    Beyond Brandon's comment, you're introducing all kinds of troubles when you try to swap IDs. You're running the js after the DOM has been built - you can rename the IDs, but the browser won't know it.

    I don't know exactly what you're trying to do, but it appears that you might be better off adding and removing classes if you're just trying to affect the appearance of the containers.
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[7892144].message }}
  • Profile picture of the author viescripts
    Originally Posted by devaldcool View Post


    <script>
    $(document).ready(function(){
    $("#inactive").click(function(){
    $("#inactive").attr("id","active-swap");
    $("#active").attr("id","inactive");
    $("#active-swap").attr("id","active");


    $("#active-page").attr("id","inactive-page-swap",function(){
    $("#inactive-page").attr("id","active-page");
    $("#inactive-page-swap").attr("id","inactive-page");
    });
    });
    });
    </script>

    Man, on your explanations about activation-deactivation, you need the following lines:


    Code:
    <script>
$(document).ready(function(){
  $("#inactive").click(function(){
    $("#inactive").attr("id","active-swap");
    $("#active").attr("id","inactive");
    $("#active-swap").attr("id","active");
  });
});
</script>
    Why not using display or visibility CSS properties? This is easy, pretty logical and recommended by all tutorials. And it's all about appearance-disappearance.
    In case you cannot use the CSS properties, I'd use parent selectors.

    e.g.
    Code:
      $('#first-parent-selector').find("#inactive").attr("id","active");
  $('#second-parent-selector').find("#active").attr("id","inactive");
    your html code will look like
    Code:
    <div id="first-parent-selector">
  <div id="inactive">
  </div>
</div>
<div id="second-parent-selector">
  <div id="active">
  </div>
</div>

    This is more logical for jQuery than using a third party element.
    {{ DiscussionBoard.errors[7893469].message }}
  • Profile picture of the author Michael71
    Now this is really crap... changing ID's ...

    Go with classes, this is more compliant.

    Every ID has to be unique per page... classes don't have to.

    And if this is just for "design purposes" you chould just use addClass, removeClass or toggleClass with proper CSS.
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[7893667].message }}

Trending Topics