Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2011-03-16
15
Medium Priority
?
2,878 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

1
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 

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 750 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 750 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

704 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