Search code examples
jqueryhtmlcsstwitter-bootstraphyperlink

External link to a div on a one page Bootstrap site

I am building a one page site and the divs are set to sweep in horizontally using jQuery and CSS.

link to site http://97squared.co.uk/starstruck-roadshow.co.uk/

The problem I have is that I want to be able to link to sections of the site (blog etc) from external sources. Currently the divs are brought to the browser window by calling the id of the div in the href, for example

<a href='#about-us' class=scrollitem'>About Us</a>

but if I try to access that div from an external link for example

http://http://97squared.co.uk/starstruck-roadshow.co.uk/#about-us

or

http://97squared.co.uk/starstruck-roadshow.co.uk/index.php#about-us

it doesn't take me to the relevant div on the page.

How can I get around this via .htaccess rewrites or jQuery redirects?

Solution

  • ok figured it out with help from the others on here

    I used @pattie var hash = window.location.hash; and mixed with my code got it to work.

            var hash = window.location.hash;    
        var sildeNum = $('.page').length,
          wrapperWidth = 100 * sildeNum,
          slideWidth = 100/sildeNum;
        $('.wrapper').width(wrapperWidth + '%'); 
        $('.page').width(slideWidth + '%');
        var slideNumber = $(hash).index('.page'),           
            margin = slideNumber * -100 + '%';
        $('.wrapper').animate({marginLeft: margin},500);                    
        return false;