CODEWITHSUNDEEP
jquerydjango
knirirr
knirirr

Reputation: 2807

Django jump directly to div

I'm trying to set up links such that with a URL as follows it would be possible to jump directly to the relevant div upon page load within a Django application, e.g.

mysite.mydomain/faqs#faq9-1

Here's an example of one of the FAQs:

<div class="panel-group" id="faq-9">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#faq9-1">
                    9.1 FAQ Title here.
                </a>
            </h4>
        </div>
        <div id="faq9-1" class="panel-collapse collapse">
            <div class="panel-body">
                 Body of FAQ here.
            </div>
         </div>
    </div>

Of course, simply loading the relevant URL does nothing, and replacing the href="#faq9-1" and/or id="faq9-1" with name="faq9-1" doesn't change this. So, I thought perhaps some jquery might do the trick:

<script type="application/javascript">
$(document).ready(function () {
    var faq = window.location.href.split('#')[1];
    if (faq) {
        console.log("Got FAQ: " + faq);
        if(faq.match(/^faq/)) {
            $('html, body').animate({
                scrollTop: $("#" + faq).offset().top
            }, 2000);
        }
    }
});
</script>

...still nothing, though. I can't even get anything to trigger the jump from the console window. I've also tried this plugin:

https://github.com/flesler/jquery.scrollTo

...and, tried both the plugin and the method above from the console. Still nothing. Presumably I am missing something obvious, so I would welcome any suggestions.

Upvotes: 0

Views: 366

Answers (2)

knirirr
knirirr

Reputation: 2807

Eventually managed to get this working by the following means. Firstly, by adding another ID parameter:

<a data-toggle="collapse" data-parent="#accordion" href="#faq1-2" id="faq1_2">

That fixed moving the relevant section to the top, but it then needed some javascript to move the section viewed out from under a banner and also to expand the view:

$(window).load(function () {
        if (window.location.hash) {
            var faq = window.location.href.split('#')[1];
            var tbody = faq.replace(/_/,'-');
            $('#' + tbody).addClass("in");
            window.scrollBy(0,-160);
        }

    });

Upvotes: 0

kfarnell
kfarnell

Reputation: 89

I can't see all of your html, but if your page doesn't scroll (as in, there's not enough info on the page to need a scroll bar) then the page is not going to jump, because there is nowhere to jump to.

You shouldn't need jQuery to accomplish this. Your code is right to have <a href="#faq9-1"></a> and the div being <div id="faq9-1">

Upvotes: 1

Related Questions