Anchoring a hor scroll menu on page load....see example

makemusic · Nov 1, 2004

Hi,

I've finally managed to get my updated website up and running and it's all cool except one thing that's really bugging me. I have one section of my site that uses a horizontal scrolling menu with around 100 clickable images which are in chronological order (day 1, day 2 etc).

The problem is when you scroll to day 23, for example, after the page loads the horizontal menu sets back to its original position. This means you have to scroll horizontally every time after the page loads. I'd like to fix the menu so that when on Day 23, the respective image in the menu is visible (rather than day 1).

The menu is set up via a CSS layer.

All will become clear if you go to

http://www.spannerheadz.com

and click "sailing". Go to "Log", then scroll to the bottom to hit "[2003] Europe and Atlantic Crossing". Once you've done that the horizontal menu will appear at the top of the page.

If anyone can help I would be eternally grateful!

cLFlaVA · Nov 1, 2004

I would suggest keeping the main content area inside an iframe. This way, on each click of the horizontal menu, the content will reload in the iframe, and keep the horizontal menu exactly where you left it.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

makemusic · Nov 1, 2004

Is it really that simple?? ;-) I used an iframe for the forum so I'll give it a go........

cLFlaVA · Nov 1, 2004

yup, the main page won't reload, so there's no reason for it to reset back to the beginning.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

makemusic · Nov 1, 2004

Hmmm...if i stick the iframe within my div id tag all i get is a blank space. It's in the correct position but nothing within it displays. My code goes:

<div id="menu">
<iframe frameborder="0" align="center" width="100%" height="70">
<table containing menu> </table>
</iframe>
</div>

Any clues?

cLFlaVA · Nov 1, 2004

An iframe is like a separate page inside a page.

You'd need to change all of those pages to have JUST the main content (no nav, etc.).

For example, page 1 would look like this:

Code:

<html><body>
<table width=100% cellpadding=2 cellspacing=2>
  <tr>
    <td>
      <table>
        <tr>
          <td><font face=verdana,ariel #333300 size=3><b>Saturday 26th July, 2003 - Day One - Launch Day</b></font>

	<br><font face=verdana,ariel #333300 size=2><i>Weather: Overcast<br>Leg: Emsworth, UK to Cowes, Isle of White<br>Distance: 20.5 miles</i></font>
	</td>
	</tr>
	<tr><td></td></tr>
      </table>
    </td>
  </tr>

  <tr>
    <td>
      <table cellpadding=5>
	<tr>
	  <td align=left valign=top><img src=images/001.jpg alt="Pontoon at Emsworth Harbour where water taxi takes crew to Ramprasad" width=300 height=200 align=left valign=middle border=1><font face=verdana size=2 #333300>Invariably some mixed feelings on day one. Said goodbye to Mum on the pontoon before catching One-Tooth-Sid’s river taxi to the boat.<br><br><img src=images/002.jpg alt="Fellow crew members and family have a few beers at the helm" width=300 height=200 align=right valign=middle border=1> <br><br><br><br><br><br><br><br><br><br>Conny, Lorraine and I were joined on deck with our respective family members for a farewell beer... <br><br>

<img src=images/003.jpg alt="Jamie making a few nervous jokes" width=300 height=200 align=left valign=middle border=1>
<br><br>
...with Lorraine’s dad and my dad having a good snoop around Ramprasad to ensure the vessel is ship-shape! 


<img src=images/004.jpg alt="The Cockpit, ready for take off" width=200 height=133 align=right valign=middle border=1>
<br><br><br><br><br><br><br><br><br><br>
<img src=images/005.jpg alt="The restaurant. Note stainless steel shaft, which is base of mast and around which the table slides up above Sam's head" width=300 height=200 align=left valign=middle border=1>
<br><br><br><br><br><br>

<img src=images/006.jpg alt="...and they're off - sideways.  Good luck guys" width=200 height=133 align=right valign=middle border=1>
<br><br><br><br><br><br><br><br>
After saying goodbye we pretty much set sail straightaway for our first destination, The Isle of Wight.

<br><br>Sailing for the first time in a while was sensory overload. Forgot every single knot I’d ever learnt (all three of them) and realised that my shower-proof mac doesn’t cut the mustard in the slashing rain. 
<img src=images/007.jpg alt="Tea and vomit anyone?" width=300 height=200 align=left valign=middle border=1>
<br><br>Then there’s down-below. For the uneducated going ‘down-below’ on a yacht whilst at sea is not only difficult because of the way the boat rocks, but is a sure-fire way of getting sea-sick. The best way to get rid of sea-sickness is to get up on deck and look at the horizon. Why then did I volunteer to make some tea and toast in the galley within an hour of setting sail? You’re supposed to wait a couple of days before getting your sea-legs! Actually, I did alright. Got a bit dizzy but I saw it through and managed to pull it off, even if it did take approx. 46 mins to make each slice of toast. In case it wasn’t obvious cooking on a boat is hard work, especially when everything is tilting at 30 degrees.
<img src=images/008.jpg width=200 height=300 align=right valign=middle border=1>
<br><br>
On our way to the Isle of Wight we did some trolling, which is hanging a fishing line out the back of the boat whilst moving along. Low and behold we caught two mackerel, which I unhooked and killed, whilst Sam gutted them and Conny filleted. When docked at Cowes I knocked up a mackerel and chick pea curry, a variation on Zoe’s mushroom and chick-pea recipe.<br><br>
<img src=images/009.jpg alt="The nerves start to show"width=300 height=200 align=left valign=middle border=1>
Whilst the food went down well I think there was still a lot of first day nerves, at least for me. Had I made the right decision to leave the comfortable surroundings of home? What’s Sam really like when it’s blowing a force 7 in 20ft waves? Would I get on with Conny and Lorraine? Is sailing for me anyway? After all I’ve only ever done this once before and that was with people I knew. These and many more questions continued to race through my mind when we got the river taxi to Cowes and rounded our first day off with a walk down the promenade and a couple of beers.

</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body></html>

And then your links would look like this:

Code:

<td>
  <a href="../log/day_001.asp" onclick="changePage(this.href); return false;"><img ... /></a>&nbsp;
</td>

And then you could have this function (for neatness):

Code:

function changePage(loc) {
    document.getElementById('iframeid').src = loc;
}

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

makemusic · Nov 1, 2004

Fortunately I've used include files so changing each page shouldn't be a problem, but let me just check what you are suggesting:

The link code you gave - I'd need only change the image tag. I leave everything else as it is? The "(this.href)" I leave as is?

The function - that sits in a CSS, and I leave that as it is?

Do I keep the iframe tag within the div id tag or am I only refering to an iframe in the function?

My apologies, Flava, I'm still a little confused. I might need some more time to play around with this (when I'm a little less tired)!

cLFlaVA · Nov 1, 2004

The link code - leave it exactly as it appears in my example. this.href passes the function the href for that particular <a> tag.

So this:

<a href="../log/day_001.asp" onclick="changePage(this.href); return false;">

Is identical to this:

<a href="../log/day_001.asp" onclick="changePage('../log/day_001.asp'); return false;">

The return false in that statement means that it will still open if JavaScript has been disabled by the user - it'll just open in a new window.

The function does NOT sit in CSS, it sits between your <head></head> tags in the main page (not the iframe) like this:

Code:

<head>
<script language="javascript">
<!--
function changePage(loc) {
    document.getElementById('iframeid').src = loc;
}
-->
</script>
</head>

Finally, give the iframe an id. Reference this id in the function, explicitly.

If you give the iframe an id "the_iframe":

<iframe id="the_iframe"></iframe>

Then you can reference it in the function like this:

document.getElementById('the_iframe').src = loc;

Hope this helps.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

makemusic · Nov 1, 2004

OK FLava, I'm about to go to bed and try this properly tomorrow. Just to confirm though, the <iframe> tag still sits in the <div id> tag and appears just the once?

Catch you tomorrow, and thanks for your help thus far. I intend to get this nailed and you are my only hope

cLFlaVA · Nov 1, 2004

yup, you only need one iframe tag. and it can sit in any number of surrounding tags - they're unimportant for this example.

i'll be back at work, wasting time on this site, at 9am tomorrow. let me know if you need more help.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

Vragabond · Nov 2, 2004

Ok, I complained about this in another thread and I will do it again. Why use javascript to alter the src of the iframe when iframe is a simple frame and target attribute is what it is supposed to be used to reference links to a specific frame? Something in the lines of:

Code:

<td>
  <a href="../log/day_001.asp" target="iframeid"><img ... /></a>&nbsp;
</td>

makemusic · Nov 2, 2004

Hi Vragabond,

The target doesn't sit in the iframe, the menu does.

makemusic · Nov 2, 2004

Sorry, yes it does!

makemusic · Nov 2, 2004

OK, Vragabond, if I employ your solution it opens the link in a new window.

Flava - if I use your code the frame opens in the same page but there is still no content.

Any further ideas? I feel I'm almost there but perhaps just one line of code away!

cLFlaVA · Nov 2, 2004

I agree with Vrag's statement, make the target the iframe name. It's probably not working for you with Vrag's solution because the id of the iframe is set, but not the name. Make sure you give the iframe a name property that's the same as the id property.

Then, the only problem left will be ensuring you have the correct data in the correct html pages.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

makemusic · Nov 2, 2004

Sorry guys, but I'm gonna have to knock this one on the head. The closest I've got is displaying an empty iframe in the correct position.

I hate failing [mad]

and I hate wasting people's time so I thank you for your considered and helpful responses thus far. Perhaps one day I'll come back to it and start from scratch (it probably doesn't help that I'm trying to alter existing code) but I've wasted too much time on this already.

Grrrrr!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Anchoring a hor scroll menu on page load....see example

makemusic

Programmer

cLFlaVA

Programmer

makemusic

Programmer

cLFlaVA

Programmer

makemusic

Programmer

cLFlaVA

Programmer

makemusic

Programmer

cLFlaVA

Programmer

makemusic

Programmer

cLFlaVA

Programmer

Vragabond

Programmer

makemusic

Programmer

makemusic

Programmer

makemusic

Programmer

cLFlaVA

Programmer

makemusic

Programmer

Similar threads

Part and Inventory Search

Sponsor