Vertical scrolling Nav

[elliot]

Hi Guys,

Appologies if this has been covered before...

I'm in the process of making a website that has a vertical scrolling nav,
Here's a link to view the work so far. Your able to click to view the different products:

www.clippergems.com/pr_aboriginal.html

Being able to use the nav, i'm not happy with the fact each time you click to view a different product, the nav bounces back to it's original position, loosing the place you were at...?

So... my question is,
Can you control where the nav sits depending which page your at, with anchor points maybe??

i'm guessing Javascript is involved? I'll put my hands up now to say i'm a low level novice when it comes to Javascript. If anyone could help i'd really really appreiciate it.

thanks very much,
Elliot

[jscheuer1]

The easiest way to accomplish this would be to use an iframe (inline frame) for the selected content on the right. Another method would be to use a frames page. An iframe would allow you to click on the Vertical scrolling Nav and have just the content on the right updated in its iframe, leaving the Vertical scrolling Nav in its current state. No javascript, which is not universally available and/or used by the browsing public, would be required.

[elliot]

Hi there,

thanks for the reply. I haven't had a go with iframes before, so went straight to a few sites for a bit of a read.

I've given it a go, and started to get a result in Firefox, though the area was an empty white square in IE??

I read that some browsers have issues with the iframe tag, though i've got the latest version of IE??

I added the folllowing code to sit above my exsisting nav whilst i get it to work:

<iframe src="iframe.html" more attributes style="background: red; width: 170px; position: absolute; z-index: 20; left: 56px; top:135px;">
blah blah blah
</iframe>

the HTML it's referencing has the following as a test:

<div>
<img src="images/thumbs/ab_tmb1.jpg" /><br /><br />
<img src="images/thumbs/ab_tmb1.jpg" /><br /><br />
<img src="images/thumbs/ab_tmb1.jpg" /><br /><br />
<img src="images/thumbs/ab_tmb1.jpg" /><br /><br />
<img src="images/thumbs/ab_tmb1.jpg" /><br /><br />
<img src="images/thumbs/ab_tmb1.jpg" /><br /><br />
<img src="images/thumbs/ab_tmb1.jpg" /><br /><br />
</div>

Firefox picks up everything, whilst IE has nothing, uhmmmm....

Any sugggestions ??

thanks mate

[jscheuer1]

Best thing for me to help guide you through this would be for you to put up what you have so far as a test page and provide a link to it for me to see what is happening. If you are using a Mac, the latest version of IE for that OS could be a real problem. If you are under Windows and using IE6, there should be no real problem with iframes but, there could be a few things that need to be done differently than they would be in FF.

PLEASE: Include the URL to your problematic webpage that you want help with.

[elliot]

Hi There,

I've attached the page where I’ve included my (iframe) test. For some reason when I uploaded these from my local drive and checked them they worked in both IE & FF ??

would you know why it only worked in FF when I was checking the page locally??

But the good thing is they're showing!! so many thanks for this

One other question....
I roughly get the idea of the iframe, if I’ve got 10 pages, with 10 links on the nav, Wont each page when it loads in do the same thing with the nav at what ever point it's at , pop to the top?
Do I need to load just the main area into a base page with the nav?? if so how d'ya do that..... uhmmm

Thanks very much for all your help,
Elliot

http://www.clippergems.com/pr_aboriginal.html

[jscheuer1]

I see you've put an iframe in or on top of the Nav area. That isn't what I meant at all but, at least you are starting to use an iframe. That's a step in the right direction. My idea is that you have only one page with the Nav on it, call it nav.html. On that one page where you now have a large content block on the right side of the page that displays the details for each Nav item, make that content block an iframe. Then, each time you click on a link in the Nav, have it update the contents in that iframe. The way this is done is to give the iframe a name:

<iframe name="contents" src="pr_aboriginal.html" width="610" height="510" frameborder="0" marginHeight="0" scrolling="no"></iframe>

Put this iframe in place of the "copy" and "hero" divisions. The pr_aboriginal.html and all of your other pages like pr_lively and pr_modern will need to be changed to fit inside the iframe, to only have the specific content on them (only the "copy" and "hero" divisions), not the Nav or other page elements like decoration, logo, etc. Then for your links in the Nav (on nav.html) use:

<a href="pr_lively.html" target="contents"><img src="images/thumbs/jet_tmb1.jpg" width="60" height="60" alt="view jet star" class="thumb_left"/> 
<img src="images/thumbs/jet_tmb2.jpg" width="60" height="60" class="thumb_right" alt=""/></a> 
<div style="width: 105px;"> 
<p style="font-size: 60%; float: left; "><a href="pr_lively.html" target="contents">Large</a></p>
<p style="font-size: 60%; float: right;"><a href="pr_lively.html" target="contents">Small</a></p>

Using a bit of trickery that you should not, this is close to how it will look and work. (Works best in IE6, it is a demo only.)

[elliot]

I've just had a play with the link you added to your comcast website.

It's works exactly as i'd like it too, both on IE and FF, fantastic stuff.

I'm off to fine tweak the areas you suggested. You've saved me alot of time,

Thanks very much for all your help.

Elliot

[elliot]

Sorry to bother you.... i've another question.

From giving your example a go, the way the nav worked was exactly what i was looking for.
unfortunately there's a few new problems, i still pretty clueless about??

I've gone and renamed the main page with the nav:

http://www.clippergems.com/nav.html

For the time being, i've been woking on one page, called it tester.html, which the first link in the nav references.

...
IE wont pick up the background gif which tiles vertically within the site template to make the blue background for the hero. It shows fine in FF ??
I tried setting the background for the iframe content to transparent, didn't do anything
...
Within FF the iframe is much bigger and if someone used the wheel on their mouse it scrolls moving the whole page, including the nav??
I tried setting a height, though didn't do anything

thanks again for your time,
Elliot

[elliot]

just so I dont waste to much of your time, i've worked out the issue with the background gif not showing in IE.

gone and added:

(allowtransparency="true") to the iframe,

and (background: transparent; ) to the body

[jscheuer1]

OK, I was a little afraid of this but, we are still on the right track. What I put up on my site was just a visual representation of what we are shooting for. I didn't want to take the time to download all your graphics and subpages, then edit the subpages as would be required to make things work correctly. You will notice that in my demo in FF, the links on the right don't work. That is because I had to cover them with a transparent image to prevent that section from scrolling. That is just one trick I used to make it look about right. What we need to do is to make up all new subpages. Each one of these will have only the copy and hero divisions on them. This will make it much easier to fit them to the iframe. The iframe will be able to be set to its true dimensions and we shouldn't need to control the overflow. The iframe's true dimensions are going to be very close to 610x510 rather than the 850x630 my demo uses and no negative margins (or much smaller ones) should be needed.

The key for now is to make up the new subpages. Keep copies of what you have but, make new ones with just the copy and hero divisions on them (plus head, title, style links, body tag - but that's it). Use the iframe from my post:

<iframe name="contents" src="pr_aboriginal.html" width="610" height="510" frameborder="0" marginHeight="0" scrolling="no"></iframe>

Once you have that, we can fine tune from there.