Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JQuery: Where To Add .slideDown( )? To This??

    I'm trying to add slideDown to http://jsfiddle.net/Jk59f/ so that it slides down smoothly if the dark area is not expanded and just refreshes the link if it is clicked or another link is clicked.

    I haven't been able to figure it out though after testing multiple areas.. it just doesnt slide at all it just jumps!

    How do I do this?
    Last edited by efhx; 12-17-2011 at 07:18 AM.

  • #2
    New Coder
    Join Date
    Nov 2011
    Location
    New England
    Posts
    62
    Thanks
    0
    Thanked 10 Times in 10 Posts
    I do not see any slideDown() anywhere. What are you trying to slideDown?
    For programming information, visit irnsystems.com
    Also check out Points2Survey and earn items.

  • #3
    New Coder
    Join Date
    Apr 2006
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mvmacd View Post
    I do not see any slideDown() anywhere. What are you trying to slideDown?
    There is no slideDown because I removed it since it wasnt working.. but if you click the Item 1, the dark area just jumps into view. The Dark area is what I'm trying to get to slide down

  • #4
    New Coder
    Join Date
    Nov 2011
    Location
    New England
    Posts
    62
    Thanks
    0
    Thanked 10 Times in 10 Posts
    ah.. well, it looks kind of complicated. I can't quite decipher all your code, I've tried manually sliding down both #dark, and also the [hidden] div inside it, but it didn't have a dark background.

    Why don't just make 2 divs, 1 div with the link, the other [the dark div] to have the content.

    make a function, dark(), and make the first div disappear immediately [.hide(0)], then put $('#dark').slideDown(500);

    Then on the first div, make the link's href "javascript:dark()"
    For programming information, visit irnsystems.com
    Also check out Points2Survey and earn items.

  • #5
    New Coder
    Join Date
    Apr 2006
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mvmacd View Post
    ah.. well, it looks kind of complicated. I can't quite decipher all your code, I've tried manually sliding down both #dark, and also the [hidden] div inside it, but it didn't have a dark background.

    Why don't just make 2 divs, 1 div with the link, the other [the dark div] to have the content.

    make a function, dark(), and make the first div disappear immediately [.hide(0)], then put $('#dark').slideDown(500);

    Then on the first div, make the link's href "javascript:dark()"
    i got it to work like this http://jsfiddle.net/VUz2g/ but how do i make sure it doesnt slide down if its already down and showing the dark area?

  • #6
    New Coder
    Join Date
    Nov 2011
    Location
    New England
    Posts
    62
    Thanks
    0
    Thanked 10 Times in 10 Posts
    Quote Originally Posted by efhx View Post
    i got it to work like this http://jsfiddle.net/VUz2g/ but how do i make sure it doesnt slide down if its already down and showing the dark area?
    The only way I know how is to hide "Item 1" when you click on it, because, once again, I cannot really understand how you are executing your code. Sorry..
    For programming information, visit irnsystems.com
    Also check out Points2Survey and earn items.

  • #7
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    ok, before I take a crack at this.. are you planning on loading content via ajax at anypoint? Becuase the code would be quite different if so. I see you have a div with an id of ajax, but at no point are you doing anything ajax related.

  • #8
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    Quote Originally Posted by efhx View Post
    how do i make sure it doesnt slide down if its already down and showing the dark area?
    Not trying to improve your code but you could do something like:

    Code:
    $(".viewproject").click(function() {
    
        if ($("#dark").css('display') == 'none') {
            
            var id = $(this).attr("id").replace(/^.(\s+)?/, "");
            var contentTobeLoaded = $("#workitem" + id).html();
            $('#ajax').animate({
                opacity: '0'
            }, 600, function() {
                $('#dark').show();
                $('#ajax').html(contentTobeLoaded).hide().slideDown(1000).delay(500).animate({
                    opacity: '1'
                }, 500, function() {
                    // $('#ajax').html('<img class="loader" src="/src/images/icons/loader.gif" alt="">');
                });
            });
        }
    });
    Using if ($("#dark").css('display') == 'none') you can test the value of the display style of your #dark div.

    jQuery .show() will set css display to 'block' and .hide() will set it to 'none' * I think *
    Chuck Norris counted to infinity.
    Twice.


  •  

    Posting Permissions

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