Solved

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

Posted on 2011-03-16
15
2,158 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 34

Expert Comment

by:Paul MacDonald
ID: 35150547
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
ID: 35150597
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
ID: 35150794
Try simply putting these three lines near the TOP of your page:

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

Open in new window

0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:pj_curr
ID: 35151994
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
ID: 35152116
This seems to be more cross-browser-friendly:

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

Open in new window

0
 
LVL 34

Expert Comment

by:Paul MacDonald
ID: 35152138
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
ID: 35152225
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
 
LVL 16

Expert Comment

by:sjklein42
ID: 35152408
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
ID: 35154688
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
ID: 35155369
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
ID: 35155395
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 34

Accepted Solution

by:
Paul MacDonald earned 250 total points
ID: 35155938
"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
ID: 35156743
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
ID: 35160589
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
ID: 35160608
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Javascript to set controls visibility 5 32
HTML &#0153 2 16
Why doesn't Google directions work? 6 40
filter portfolio grid display on page load (wordpress) 7 13
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

815 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