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

[efhx]

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?

[mvmacd]

I do not see any slideDown() anywhere. What are you trying to slideDown?

[efhx]

Originally Posted by mvmacd

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

[mvmacd]

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()"

[efhx]

Originally Posted by mvmacd

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?

[mvmacd]

Originally Posted by efhx

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..

[DanInMa]

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.

[Arnaud]

Originally Posted by efhx

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:

$(".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 *