Display DIV and then go to an element inside that DIV

Question

I am currently trying to unhide a DIV and then right after scroll down to an element.

I have this "index" of text where I have a list of anchor tags href'ing to different ID's down the page, but at first sight the text is hidden and will first display when you click on one of the index links. All this works fine untill I get to the scroll part.

There is nothing special about the code so far, it's just a mere if statement adding & removing a CSS class depending on the client action. But how do I get the page to automatically scroll down after the DIV displays?

I tried this solution: How to go to specific to element on page, but I couldn't seem to fit it in my own script.

if ($('#<%=paragraph.ClientID%>').hasClass("readable")) {
     $('#<%=paragraph.ClientID%>').removeClass("readable"); // Readable is the class that hides the paragraphs.
     // Run function to scroll down to selected element here.
}
else {
     $('#<%=paragraph.ClientID%>').addClass("readable");
}

What I first tried was something like this:

(function($) {
        $.fn.goTo = function() {
            $('html, body').animate({
                scrollTop: $(this).offset().top + 'px'
            }, 'fast');
            return this; // for chaining...
        }
    })(jQuery);

    function showParagraphs(elementId) {
        if ($('#<%=paragraph.ClientID%>').hasClass("readable")) {
            $('#<%=paragraph.ClientID%>').removeClass("readable");
            scrollToElement(elementId);
        }
        else {
            $('#<%=paragraph.ClientID%>').addClass("readable");
        }
    };

    function scrollToElement(elementId) {
        $(elementId).goTo();
    };

But the above script didn't work. And my javascript skills a limited, so I'm kind of lost.

Any hints or help would be awesome. Thank you.

It would be much easier if you could show the corresponding parts of your current code/HTML. — kapa, Jan 26 '11 at 10:02
I second bazmegakapa. What are you trying to achive? what does the structure look like? Give us the 'Meat' :-) — mahatmanich, Jan 26 '11 at 10:08

score 3 · Accepted Answer · answered Jan 26 '11 at 10:27

3

Your code looks mostly working. I think the only thing you need to change is that in your showParagraphs function you just have to...

replace scrollToElement(elementId) with scrollToElement('#<%=paragraph.ClientID%>')

...since you're pulling the id for the element you want to affect from the server and not a passed in argument.

If that doesn't do it, here's a working demo that I threw together that you can try implementing as an alternative.

answered Jan 26 '11 at 10:27

mVChr

49,587
11
107
104

So when I click on one of my anchor tags, this should show my paragraphs DIV and scroll me to the selected ID? – Jan 26 '11 at 10:43

score 2 · Answer 2 · answered Jan 26 '11 at 10:13

If I understand your problem right, it's an easy solution. To wait for the event to finish, use callback function.

Example code:

$('.clickable').onclick(function(){
   $('.mydiv').show('slow', function(){
     location.href = '#myElement';
   });
});

And link to jQuery.show() docs

Oh, maybe it's confusing ... '.clickable' is your action trigger (a button, link), '.mydiv' is your div that shows up, #myElement is the id of element you want to scroll to.

Display DIV and then go to an element inside that DIV

2 Answers2