SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hide and show issues

    So, I'm having a few issues with this hide and show jquery plugin.

    You can see it at this location
    http://laworganizer.com/4)%20Single%...ccounting.html

    1) In internet explorer and google chrome there is a large gap between the "navigation" and "Total Client's responsibility:$1,550.00 Total payments:..."
    2) When the info area is expanded then the info area pushes down beyond the content area
    3) When the info area is closed then the, "Total Client's responsibility:$1,550.00 Total payments:..." becomes hidden.

    Okay this feature just has issues for me. I'll prob review it more tomorrow.

    Any pointers would be helpful. I'm hoping there is 1 issue that causing all of these problems.

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BrianBam View Post
    1) In internet explorer and google chrome there is a large gap between the "navigation" and "Total Client's responsibility:$1,550.00 Total payments:..."
    2) When the info area is expanded then the info area pushes down beyond the content area
    3) When the info area is closed then the, "Total Client's responsibility:$1,550.00 Total payments:..." becomes hidden.
    All of these issues are (pretty much) CSS related.

    1) The button ".ShowDetailsButton" has a fixed height set to 125px - reducing this to the actual height of the button (37px) will reduce the gap
    2) The div ".faq_container" is floated to the left, not sure if it needs to be, removing the float will fix this issue (the other solution would be to clear the float, putting an "overflow:auto;" on #BodyContent would do it)
    3) I'm assuming you're using slideUp and slideDown on the .faq_answer_container - of course slideUp will set an inline height of 0px when it's finished (ignoring the height in the CSS). The trick here is to set a min-height on the .faq_answer_container
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks those changed worked good for the most part but I think I may have to change my layout and place the button in that location through another method. I adjusted the "ShowDetailsButton" height which helped remove most of that spacing at the top, but it still exists for i.e. and chrome. Also, the button is only clickable on the far right of the button in firefox.

    Any other suggestions? thx!

  4. #4
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay I got the alignment to work. However, I had to move the location of the BUTTON code from the old location

    ......


    <div id="UserPermissionsList">


    <ul>
    <li>Attorneys </li>
    <li><a href=""> set/edit permissions</a></li>
    <!--<li><a href="#"> + View Details</a></li>-->



    </ul>



    </div>








    </div><!--faq_question-->

    </br>


    <div class="BUTTON">


    <ul>

    <li>
    <a class="ShowDetailsButton">

    </a></li>



    <li>
    <a class="HideAnswerButton">

    </a>


    </li>
    </ul>

    </div><!--Button-->

    .....


    to the current location. The answer section still opens fine, but I can't get it to close.

  5. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Excellent looks like you got it working for the most part

    The reason it isn't closing is because the button's click event handler specifically checks its parent for a class of "open" whereas everywhere else it is referred to using the .closest() method. So we can use that to fix this scenario.

    While we're here, I'd also like to show you the benefit of caching your jQuery results as they can have an impact on performance (since everytime you call the $() method it instantiates a new jQuery object that has its own memory footprint). In your case specifically the optimization would be incredibly small, but if you would have this code executed in a loop then it might be much more beneficial.

    In any case, let's get on with it

    I've rewritten your button click handler to both check the correct element and to cache the .faq element.

    Code JavaScript:
    $('.BUTTON').click(function(){
     
        var $faq = $(this).closest(".faq"), //caching the .faq element's jQuery representation
            newHeight; //declaring newHeight up here - JavaScript hoists the declaration up here anyway
     
        if ($faq.is('.open')) { //we now definitely have a reference to the .faq element
            $faq.find('.faq_answer_container').animate({'height':'0'},500);
            $faq.find('.letter_a').fadeOut(500);
            $faq.find('.letter_q').animate({'left':'25px'});
            $faq.removeClass('open');
        }
        else {
            newHeight = $faq.find('.faq_answer').height() + 'px';
            $faq.find('.faq_answer_container').animate({'height': newHeight } ,500);
            $faq.find('.letter_a').fadeIn(500);
            $faq.find('.letter_q').animate({'left':'10px'});
            $faq.addClass('open');
        }
     
    });
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  6. #6
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks that worked great!


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
  •