Ask your JavaScript questions! Pay money and get answers fast! (more info)

External Links to page with ScrollTo plugin and offsets JavaScript

  • SOLVED

I have a site where I am implementing the ScrollTo / LocalScroll plugins to navigate back and forth within the main page of the site.

Here it is: [[LINK href="http://embassylane.com/egojava/"]]http://embassylane.com/egojava/[[/LINK]] (Note: site should be viewed in Chrome/Firefox/Safari)

Thanks to an earlier resolved question on JS / Questions, the home page works well, but I do have three further bits of functionality I need implemented:

<strong>1.</strong> Some of my links on the home page, take you away from this page. For example, if you are in the 'About' section of the website, and you click the 'company' sublink, it takes you away from the page, to a new page ( [[LINK href="http://embassylane.com/egojava/company/"]]http://embassylane.com/egojava/company/[[/LINK]] ). On this new page, I still have the main navigation menu (about/work/news/learn/support/connect/blog), except now none of these links work properly. The main reason they don't work is that they don't have the 325px offset that all the ScrollTo links have on the home page. <strong>SO MY QUESTION IS</strong>: When linking to specific sections on my home page from external pages, how do I get the links to include the 325 px offset that the Scrollto plugin is using on my home page? (Ideally, I would like if the external link took you to the home page, and then scrolled to the correct location.)

<strong>2.</strong> Right now, I also can't link directly to one of the hidden subsection links. For example, If I want to link to the 'Nicole Pierce' subsection of the 'About' section, the link does not work. It will just take me to the 'About' section. When I look at the 'ScrollTo' demo page - http://demos.flesler.com/jquery/scrollTo/ - it appears that you can accomplish this functionality.
<strong>How can this functionality be included?</strong> (Also, I would want to link to a subsection from an external page)


<strong>3.</strong> When you first land on the home page, each of the sections displays the first subsection. For example, the 'About' section shows the 'egoart, inc.' sub section. The 'Work' section shows the 'video' subsection. The 'News' section shows the 'exit dance theater' sub section, etc. Right now, if you click these subsections, the text turns from grey to black, but<strong> I would like the default subsection nav text to <em>already</em> be black when you first land on the page. (Similarly, the top navigation menu 'about' should also already be black when you first land on the home page - right now, these menus only turn black when you click it.</strong>

<strong>4.</strong> I will add a $10 bonus to someone who can also provide code to fix my Internet Explorer 7/8/9 problems (fonts all out of whack in lower sections, font in main nav menu forcing horizontal scroll, footer not displaying properly).

Answers (1)

2011-06-23

Christianto answers:

Hi James,

I guess I'm the one who fix your problem before.. :D

In order to make it work with direct link like
http://embassylane.com/egojava/#supportsectioncontent
we have to set and retrieve hash value of the url.

As you can see on scrollTo demo if we use direct link for example
http://demos.flesler.com/jquery/scrollTo/#target-examples
The window will jump to the correct area. But in your site if we use direct link for example:
http://embassylane.com/egojava/#supportsectioncontent
It will jump to incorrect position since we should set the offset to get it to correct position.
More over its not animated.

I will try to create it for you, You content change a lot, would you mind to send me your newest zip of your site like before?

Thanks

Best,
Christianto


Christianto comments:

I just realize that you send me an email on 15 june...

sorry I didn't reply you mail, this mail address only intended to receive junk mail when I register to one site or to send/receive large file so it didn't download automatically when there are large files.

You can contact me through my profile page instead of using that email :D


james p comments:

Hi Christianto-

Just sent you zipped version of the site.

-james


Christianto comments:

Hi James,

I've sent you the modify zipped file to your mail, please check it..
There are files that I modify, index.html (on root for frontpage) and init.js on js folder..

On index.html I fix some of xHTML tag that aren't closing properly, this is the reason why your site typography getting bigger than it should. Since your site font size are using relative unit which base on container value and its not wrap properly, the browser will multiple its value...

I also add IE specific style on head tag (pointing to ie-fix.css and ie89-fix.css), please adjust the script/css path inside head tag since I modify it to relative path..

Since I don't have windows 7, I can't test your site on IE9 but I think it isn't too difference..

On init.js I add ability to direct link to certain section or hidden subsection on your homepage. The position represent with hash (#) symbol on your browser address, each time you click on a section it will change.

If you want to direct link it just put the hash together with name of section.


// Absolute Path to section of support
http://embassylane.com/egojava#supportsectioncontent

// Or Relative Path to hidden subsection of work (photography)
../index.html#worktwo


Also the font will change its color if direct link applied.

Let me know if it work or there are something that I miss..

Thanks,
Christianto

ps.On this answer I attach a zip, it only contain modified files..