Solved

HTML page on load jump to named anchor / div element with id

Posted on 2011-03-16
15
2,060 Views
Last Modified: 2012-06-21
Hello, I am having some trouble with a website I am programming. I want the page to load halfway down the page at a named anchor. The page is a very tall page, with div elements on top of each other holding content. Very similar to this site : http://www.volll.com  Each div has an id, and a named anchor at the top, and using the jQuery scrollto script, a navigation menu when clicked takes you to the right section. However, my main section (its a div with the id #section_main), like volll.com is halfway down the page. I've looked at their code in painstaking detail and just can't find how they get the page to load at that exact position, with no flickering. I've tried lots of techniques – body onload calling a javascript function that changes the window.location and a jquery $(document).ready() function location.replace('#section_main'); Both of these techniques WORK, but...when the page first loads, it briefly shows the content before the #section_main div and then goes to the correct position. Weirdly, this does not happen in Chrome or Safari. I've even tried to do it on my cpanel with my web hosts, and doing an .htaccess file redirecting to the named anchor. Apparently (according to Google) redirecting to a named anchor with .htaccess is impossible? Any tips would be greatly appreciated. Unfortunately I cannot share the html files as they are confidential, but can put together an html file with the structure of my page if that's required. Hope you can help! Paul
0
Comment
Question by:pj_curr
  • 5
  • 4
  • 3
  • +1
15 Comments
 
LVL 33

Expert Comment

by:paulmacd
Comment Utility
I take it sending people directly to www.domain.tld/default.html#section_main is out of the question?
0
 
LVL 12

Expert Comment

by:Amick
Comment Utility
http://www.volll.com/#section_main
or
http://www.volll.com/#play

Is there a reason you're using javascript?
0
 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
Try simply putting these three lines near the TOP of your page:

<script>
window.location = '#section_main';
</script>

Open in new window

0
 

Author Comment

by:pj_curr
Comment Utility
paulmacd:That is one way of doing it, although if the website is found on a search engine the user would be taken to the top of the page. Amick: - We're using javascript for scrolling to same page links (jQuery scrollto plugin), and some jQuery animation using http://www.spritely.net/. I assumed that automatically going to a named anchor on load would be javascript, but if you know a different technique I'm all ears! sjklein42: Thanks, I tried that line of code above the html tag, below it, above the head tag and it worked in Chrome Safari, but not Firefox. In Chrome and Safari it loads the page at the desired #section_main, but with Firefox it just loads at the top of the page. Any alternative ideas anyone? .htaccess? Server side code? Thanks for all your help guys. Paul
0
 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
This seems to be more cross-browser-friendly:

<script>
window.location.hash = '#section_main';	
</script>

Open in new window

0
 
LVL 33

Expert Comment

by:paulmacd
Comment Utility
You might want to note what the code behind the page is.  There's nothing about the technology you're using (other than Javascript) in your question.
0
 
LVL 12

Expert Comment

by:Amick
Comment Utility
If you're happy with the way volll.com is handling their page, you may want to examine the function smoothto at line 59 in  the file http://volll.com/js/volll.js.  
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
It is not that hard.  The trick is to know the right name of the property to set  ( location.hash  )

http://www.w3schools.com/jsref/prop_loc_hash.asp
0
 

Author Comment

by:pj_curr
Comment Utility
Hi guys, thanks for the advice and comments above.

sjklein42: I tired this :

(function($) {
$(document).ready(function() {

window.location.hash = '#section_main';	

 });//end document ready

})(jQuery);

Open in new window


Again the above works, but in Firefox, there is a small delay on page load – it will show the very first div element, and then move the window location to the #section_main. It does this in IE too, but not Webkit browsers weirdly

Amick: I have looked at that smoothto function in detail, but my javascript knowledge is fairly limited, so I'm not really sure what's going in on that file. The thing I do like is that when you go directly to a link on http://www.volll.com it actually takes you directly to that section (so for instance, you could share the link http://www.volll.com/#section_works it takes you directly there, so no window location event is happening – very clever. If anyone can advise how they've done this along with the #section_main beiing at the right place on page loading I'd be very happy!

paulmacd: I'm not hugely knowledgeable about server technologies if that's what you mean? My site is XHTML, with jQuery plugins. The server is Apache I believe, so a PHP solution would be best (if there is one). I hope I understood...
0
 
LVL 16

Expert Comment

by:sjklein42
Comment Utility
One more variant for you to try:

Put this at the top of your page:

<script>
if ( window.location.href.indexOf('#') == (-1) )
{
	window.location.href = (window.location.href + '#section_main');	
	window.location.hash = '#section_main';	
	window.location.reload();
	window.location.hash = '#section_main';	
}
</script>

Open in new window

0
 
LVL 16

Assisted Solution

by:sjklein42
sjklein42 earned 250 total points
Comment Utility
Note that the javascript I am offering does not go in a function but is naked.  If you wait for the page to be loaded before calling it, it is too late.  It needs to go at the top before any HTML starts being rendered.  Right after the <html> tag should work.
0
 
LVL 33

Accepted Solution

by:
paulmacd earned 250 total points
Comment Utility
"The server is Apache I believe, so a PHP solution would be best..."

Then a PHP solution may be your best bet.  The trouble here is that you're trying to solve a client-side problem (the way the page renders in the browser) with client-side code (that can't run until the page is loaded in the browser) so the effect you get will depend on the client (as you've noticed - different behaviors in different browsers).  

I'm not a PHP guy so I can't be much help here but it seems to me that on the server side you could check to see if the page is not a postback (the page is being loaded for the first time) and then cause the page to load at the anchor you want.  
0
 
LVL 12

Expert Comment

by:Amick
Comment Utility
Why not avoid the problem entirely by rearranging the code so the content you'd like to have immediately displayed arrives first?  Even Volll's code sometimes flickers the about page before arriving at #section_main.  

What is the advantage of going through hoops to rearrange page presentation after it arrives at the client rather than employing flow-cognizant page layout from the beginning?
0
 

Author Comment

by:pj_curr
Comment Utility
Thanks for all your help with this guys.

In a nutshell, it's virtually impossible to seamlessly do this, but the best solution I found was this (if you're interested!):

 
<?php
header("Location: http://www.mysite.com/redirectedpage.php#main");
?>

Open in new window


Set a PHP redirect on my index page to a redirectedpage.php#main which works seamlessly in Firefox, Safari, Chrome, but not in some IE versions or Opera. This will do for me.

Thanks again.
Paul
<?php
header("Location: http://www.mysite.com/redirectedpage.php#main");
?>

Open in new window

0
 

Author Closing Comment

by:pj_curr
Comment Utility
It was a very specific and obscure problem, and I was lucky to get the help and direction that I did. Thanks!
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn how to dynamically set the form action using jQuery.

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now