View Full Version : Vertical scrolling Nav

08-21-2005, 11:21 AM
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 (http://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,

08-21-2005, 01:22 PM
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.

08-21-2005, 08:13 PM
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

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

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

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

Any sugggestions ??

thanks mate

08-21-2005, 09:52 PM
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.


08-23-2005, 08:57 AM
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,


08-23-2005, 03:32 PM
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 (http://home.comcast.net/~jscheuer1/side/tmp23.htm) is close to how it will look and work. (Works best in IE6, it is a demo only.)

08-23-2005, 09:12 PM
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.


08-23-2005, 11:20 PM
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:


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,

08-23-2005, 11:35 PM
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

08-24-2005, 01:59 AM
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.

08-24-2005, 04:15 AM
I might add, as I've been peeking at your progress, that the new subpages should be aligned to their upper left hand corner and not have any additional space at the bottom.

08-24-2005, 06:45 PM
Hi there,
Well, i've been trying to tweak the iframe though haven't got very promising results yet.

I've adjusted the containing div positioning it top left. This helped, though still pulling hair out over positioning the overall content.

At the moment, IE is slowly getting there.... , though FF is all over the browser!

I appriciate all the time you've given me so far,

Am I close to getting this sorted??



08-25-2005, 04:44 AM
I'm not sure what you did but it seems as though you changed the external css style because my local demo which uses it no longer has a Nav section with a scrollbar. I hope you kept backups of what you had, it worked good for the main Nav page. The key was to use the iframe I have twice supplied, here it is again:

<iframe name="contents" src="pr_aboriginal.html" width="610" height="510" frameborder="0" marginHeight="0" scrolling="no"></iframe>Don't use negative margins.

What you are now calling:

<div class="copyIframe">

should not have any dimensions or overflow properties set to it yet. That would be the last thing to add and only if needed.

The subpages need to be aligned either top center or top left (see which works best) and have no extra space at the bottom and not (as they are in FF) broken up by a line break before the large picture. You may need to unlink the subpages from the stylesheets and develop a separate stylesheet(s) for them. Look at the subpages in each browser to see how the are setup without being shown through the iframe.

08-25-2005, 06:09 AM
Actually things are not so bad as I thought. All you need to do is use the iframe I've now given you 3 times without the negative margins (keep the allow transparency thing, that was a good move). Change:

<div class="copyIframe">



And you will be just about perfect in IE. The only real problem left is that in FF, for some reason, the subpages have their images below the rest of the content instead of beside it. That can be fixed by moving the main image up into the heroThumb division:

<div class="heroThumb"> <img src="images/mag.gif" style="position: absolute; z-index: 10; top: 27px; left: 0px; "/>
<p style="padding-bottom: 5px;"><a href="zz">View Large size</a></p>
<p style="padding-bottom: 5px;"><a href="zz">Enlarge for detail</a></p>

<img src="images/heros/hero_lively.jpg" alt="main image" width="348" height="356" />
<p class="pink">*All our jewellery is nickel free*</p>
</div>To see how good things are already in IE with the above suggestions, view the updated demo (http://home.comcast.net/~jscheuer1/side/tmp23.htm).

08-25-2005, 01:04 PM
Hey there!,

Your latest IE demo is looking sweet!, I've adjusted my version to be inline with this, and am about to upload the update.

Next on my list, i'm going to work with the FF issue hopefully get the hero to sit on right side of the content.

At least in FF, when you use the wheel on the mouse the whole page doesn't start breaking apart, that was weird how the nav and logo moved with the iframe content??

I've learnt some neat stuff from you, iframes for one which i'd never used before.

I've noticed my 1st post is upto 2 pages already. I'd like to thank you again for sticking with me. I know you've had to repeat yourself a few time.
sorry dude. :o

08-25-2005, 01:59 PM
I'd like to thank you again for sticking with me. I know you've had to repeat yourself a few time . . . That's OK, I've had trouble in the past explaining frames to people. This time I thought, "What about an example?" But, in order to show the full potential easily from my end, I resorted to tricks that really shouldn't be used in a finished markup. This put me in the position of having to say, "Do as I say, not as I do." Always a tricky stance to take. Anyways, once we get things looking right, the right way, we can add one valid trick, if you like the idea, to prevent the history stack from becoming loaded up with all the subpages. Fixing the subpages for FF really just involves moving that main image up into the division, as I mentioned in my last post. In a test here, that should not adversely affect the IE presentation.

08-25-2005, 08:05 PM
Hi John,

Just when everything was perfect... :o

All I wanted to do was tidy up the styles sheets, add in some informative comments, and get rid of the old code.

Along with this I started working on my top nav.

I've somehow? mucked up the iframe position AGAIN :eek:

I can get it to work in FF this time, adjusting the width from "610" to "665", though i'm bl**dy out of line in IE, and didn't want to start adding in negative margins incase i made it worse.

I promise this will be the LAST post, no more mucking around with the page.

After this, i'm off to practice, practice, practice.

I've renamed the page to..

08-25-2005, 09:09 PM
I would hope that you could just go back to what was working (always keep backups). If not, it looks a though simply figuring out why the subpages are (when viewed individually) centered in IE but, left aligned in FF and changing whatever makes them that way in IE to make them left aligned in IE, will fix it.

08-25-2005, 10:34 PM
Wow, you truely are a clever, clever man!!

Just by adding "text-align: left;" to the body of the subpages all is sorted again in IE

I will make sure to backup everything before I touch the code again :)

All the best to you John, your a good man

08-26-2005, 03:59 AM
That's great! Now, if you want to make it so that the range.html page only occupies one position in the history stack. Back it up first, then do a global search and replace on the file. Search for:

target="contents"replace with:

target="contents" onclick="window.contents.location.replace(this.href);return false;"What this will do is, for javascript enabled browsers, load each subpage into the iframe when its Nav link is clicked, without adding that subpage to the history stack. That way, if the user clicks on the browser's back button, instead of returning to the previous subpage in the iframe, it will return to the previous page. Non javascript browsers will be unaffected. Now, this is not a recommendation, just an option. You need to decide if you want it this way or not. A lot depends upon the rest of your site and how you want it to flow overall.

08-26-2005, 07:46 PM
This sounds very interesting.

I'd like to give this ago, just for the learning curve if anything.

Thanks John