jquery help

Discussion in 'Web Design and Development' started by phadam, Apr 21, 2011.

  1. phadam, Apr 21, 2011
    Last edited by a moderator: Apr 22, 2011

    phadam macrumors regular

    Joined:
    Jan 21, 2009
    #1
    Can someone help me with my jquery script. I'm having some issues and can't see where I went wrong. I have a single page site and I am trying to get the slide toggle effect to start off closed when the page opens and open/close only on click. Right now, when the page opens each section of the slide toggle is already open :/

    here is my script so far:

    Code:
    <script type="text/javascript">
    jQuery(function($) {
        var openText = 'Open';
        var closeText = 'Close';
        $('.item-util .more-toggle').toggle(
            function() {
                $(this).html(closeText);
                $(this).parent().siblings('div').slideToggle('slow');
            },
            function() {
                $(this).html(openText);
                var returnTo = $(this).parents('.item');
                $.scrollTo(returnTo, {offset:{top:-150, left:0}, duration:600});
                $(this).parent().siblings('div').slideToggle('slow');
            }
        );
    });
    </script>
     
  2. designguy79 macrumors 6502

    Joined:
    Sep 24, 2009
    Location:
    Michigan
    #2
    Can you post a link to the page so we can see the whole code?

    Also, are you getting an errors? If you are using Firefox, go to Tools -> Error Console and then refresh the page. Also, the Firebug add-on/module is invaluable when debugging.
     
  3. phadam thread starter macrumors regular

    Joined:
    Jan 21, 2009
    #3
    I don't have the site up on a server yet, still going through it all. Would a screen cap of the source code help any?
     
  4. designguy79 macrumors 6502

    Joined:
    Sep 24, 2009
    Location:
    Michigan
    #4
    Sure, a little. The actual code would be better so I could just copy-and-past and test it here.

    Did you look in "Error Console" and see if any errors appeared? Also, what version of jQuery are you loading.
     
  5. c1phr macrumors 6502

    Joined:
    Jan 8, 2011
    #5
    Without seeing the rest of the code, I could be wrong, but, try setting the "display" property in your CSS to none for all of the panels you want hidden. Then jquery will show them.

    The other issue is that your Jquery can never execute (or it's somehow executing as soon as the DOM is loaded, but there is no document ready call). You don't have any hook for your click in there.

    Try something more like this

    Code:
    $document.ready(function(){
        $("selector_for_button").click(function(){
            $(".item_util,.more-toggle").slideToggle("slow");
        });
    });
    
    That isn't everything, but you can adapt it to your page as needed and it should work.
     
  6. phadam thread starter macrumors regular

    Joined:
    Jan 21, 2009
    #6
    got the page up on it's server for testing http://greasyphotography.com

    I think once the page opens correctly with the slide toggle in it's closed state the "open" and "close" options should no longer be backwards, is that correct? or would I have to readjust the script again?

    thanks for all the help so far
     
  7. c1phr macrumors 6502

    Joined:
    Jan 8, 2011
    #7
    The div "item-alpha tier five first" has an inline style to set display to block. Try changing it to be display: none. Doing that in Chrome Developer Tools worked for me.
     
  8. phadam thread starter macrumors regular

    Joined:
    Jan 21, 2009
    #8
    hmm. Hi c1phr. Thanks for the help so far. I tried to change the display property to none but still got the same issue in safari and haven't tested in firefox or any other browser yet. I was thinking my problem would have been coming from the js script.
     
  9. rfoap macrumors member

    rfoap

    Joined:
    Apr 10, 2005
    #9
    phadam, c1phr was correct ... your .first and .last classes have their "display" CSS set incorrectly.

    Add this to the <head> tag of your page (after all other code in the head) and it seems to work as I understand you'd like it to:

    Code:
    <style>
    .item-info .first {
    	display: none;
    }
    
    .item-info .last {
    	display: block;
    }
    </style>
    Also note that you have a </style> tagging hanging out in your <head> tag that doesn't need to be there!
     
  10. iphonepiephone macrumors regular

    Joined:
    Oct 9, 2009
    #10
    It's advisable to keep stylesheet code isolated, in a separate .CSS file...
     

Share This Page