SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    js noob need help with a onclick

    Problem: When click on a tab (Ambient,Trip-Hop,House etc etc) on my website http://chilloutsound.com/ , the Newest Additions and What people are listening to right now is showing up. I only want it to show up on the 'All' tab. Ive tried to play around with ajax and hiding the text with css with display:none while using an onclick event to no avail.

    Can you guys point me in the right direction on how to accomplish this ?

    Thank you!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Separate the listings section in the HTML in to different groups, such as:

    HTML Code:
    <div id="newest">
        ...
    </div>
    <div id="listening">
        ...
    </div>
    <div id="more">
        ...
    </div>
    which then allows you to have better control over them.

    If it were HTML5 you could use the <section> element instead of those divs.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Separate the listings section in the HTML in to different groups, such as:

    HTML Code:
    <div id="newest">
        ...
    </div>
    <div id="listening">
        ...
    </div>
    <div id="more">
        ...
    </div>
    which then allows you to have better control over them.

    If it were HTML5 you could use the <section> element instead of those divs.
    Thank you, but what Ajax function would make them dissapear when selected?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by DanielOkula.com View Post
    Thank you, but what Ajax function would make them dissapear when selected?
    You can hide them with $('#newest, #listening').hide();
    And you can show them with similar code.

    You would show them from the allcat click event, and you would hide them from the filter click event.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is what I came up with so far

    The Tab:
    <a href="#" onclick:"javascript: hide();" id="Ambient" class="filter middle-button" ><span class="middle-right"></span>Ambient</a>

    The JS:
    <script language="Javascript" type="text/javascript">
    function hide(id) {
    $('#now').hide();
    }
    </script>

    What's supposed to be hidden:
    <div id="now">
    <h1>What people are listening to right now</h1>
    </div>

    It's not working, What people are listening to right now is still showing .

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by DanielOkula.com View Post
    It's not working, What people are listening to right now is still showing .
    Go back to the fliter click function that you're using already in your code.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Go back to the fliter click function that you're using already in your code.
    You mean add the $('#now').hide(); to the class="filter " function?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by DanielOkula.com View Post
    You mean add the $('#now').hide(); to the class="filter " function?
    When that click function is triggered on one of the filter choices, that is when you want to hide the newest and listening sections, isn't it?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by DanielOkula.com View Post
    yes
    Well then, that's where you should go to add the extra behaviour. To the click function that you have assigned to the filter selection.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •