|
| |
|
|
DaveX
Posts: 217
Joined: 5/4/2004
Status: offline
 |
Menu question - 4/4/2008 22:11:08
Is it possible to have a menu on a page as a CSS element that changes the content of another element or does it have to refresh the whole page? I'm wondering how to make a persistent, collapsible menu without using a frame. On a related note I found a script that scrolls thumbnails that I really like but I can't think of a way to use it without using a frame.
|
|
|
|
Tailslide
Posts: 6267
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
RE: Menu question - 4/5/2008 2:43:03
HI Dave
When you say collapsable menu - do you mean dropdown menu? If so then there are a couple of ways that I've used:
1. Accessible Suckerfish
2. http://www.twinhelix.com/dhtml/fsmenu/ (not totally free - do make a donation if it's a commercial venture)
Both require a little Javascript but in both cases the menu functions without it in modern browsers and the top level works in IE without JS.
If you don't mean "menu" as such and the element concerned should just be hovered over to show something elsewhere on the page then have a look at this site http://www.cssplay.co.uk/ and see if there's anything that does the trick.
If you want an image or a link hovered over to show an image elsewhere on the page then there's this: http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm which I use quite a lot.
If you want something where you click on an element and it shows/hides content under that element then this is good: http://bonrouge.com/br.php?page=togglit
Basically - using CSS you can get an element to show another element "on hover". The problem is that IE doesn't understand the 10 year old CSS specs and won't do this without help (javascript). So in the end when you want this sort of thing done you have to rely on Javascript to one extent or another.
As far as the frames go - I can't imagine that whatever you want can't be done without frames. Have a look on Dynamic Drive - there are tons of gallery scripts on there such as this: http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm. At the very worst you could stick all the thumbs in a div which you assign a specified width to and add a scroll bar to it.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
DaveX
Posts: 217
Joined: 5/4/2004
Status: offline
|
RE: Menu question - 4/5/2008 21:56:22
Those are all helpful. I've seen a couple of them before. It seems I always find people who want things very specific. For instance, one of the first sites I ever built uses frames. I upgraded it a bit recently using a script which scrolls thumbnails. Here's an original page:
http://www.sallym ars dot com/ud111207frame.htm
and here's a newer one:
http://www.sallym ars dot com/ud0208frame.htm
I retrofitted the newer page. I found the scrolling thumb script which looks great and works great and I'd considered that hover script you suggested on Dynamic Drive (where I got the scroller by the way) but I couldn't find one that combined the two. I'm just wondering if, short of learning the scripting myself, there would be any options without using a frame.
| |
|
|
|
Tailslide
Posts: 6267
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
RE: Menu question - 4/6/2008 4:16:40
Yes - no need for frames at all there, just have the photo scroller thing in a div as per what's actually there in the script and set it next to the other content. Float the scroller left and the content right (if you want the same layout as you've got in that example) and you're there!
Yes you can also combine the two scripts. I've done an example for you using the earlier Thumbnail Viewer script which I've tweaked (not by myself I hasten to add - with stuff gleaned from the DD forum) to allow both keyboard navigation and captions under the photo. I don't know how to achieve this level of accessibility with the later script which is why I use the earlier one.
In this example I've got small photos appearing but obviously you'd probably want larger ones. There's a default photo (bit slow appearing in IE for some reason) and default caption. I've just stuck the photos to appear in at random - presumably you'd want larger versions of the one that you're hovering over. It should give you a general idea though.
Only the top 4 scrolling photos have been set up to do the hover thing yet.
Easy to add the extra bits of code necessary to do this - just add:
title="Baseball game Photo" onfocus="modifyimage('dynloadarea', 0); get_cap(this.title);" onmouseover="modifyimage('dynloadarea', 0); get_cap(this.title);"
into the link tag you've assigned to each thumbnail. Note the "0" in the modifyimage function thing? That relates to the larger image you've set in the thumbnailviewer.js script. The first image is 0 the second 1 the third 2 etc etc.
Have a look at the dynloadarea div in the contents div and see what I've done there and then check the css rule that applies to it in the style rules in the document head. It's set up for the small image so obviously you'd need to tweak the size etc.
Here it is: TEST PAGE
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
DaveX
Posts: 217
Joined: 5/4/2004
Status: offline
|
RE: Menu question - 4/6/2008 23:23:13
It's starting to make better sense now. Now, if I wanted I could change the 'hover' to an actual click couldn't I?
| |
|
|
|
Tailslide
Posts: 6267
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
RE: Menu question - 4/7/2008 2:03:36
With this script it already does that.
All you have to do is to add the correct link address into the thumbnailviewer.js file. Currently I've added index.html but just change that for each photo and you're done.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
DaveX
Posts: 217
Joined: 5/4/2004
Status: offline
|
RE: Menu question - 4/7/2008 16:24:17
This is helping with a few things I'm playing with. Question: I'm not seeing where, in the code, the calls(?) for the mouseover on the first few images are. I don't see the images that show up on the right referenced anywhere.
Also, if you look at the original page I built, there are forward/back arrows that allow the user to view the images that way as well. Everything is very specific to what the owner wants which brings me around to maybe why I used frames to begin with. I couldn't find a script that would do everything I wanted. I'm studying the code you used for your example to figure out how you combined them so hopefully I can find another script to give me the arrow capability as well. Or perhaps I should leave well enough alone? At any rate you always shed some light on whatever quandary I've gotten myself into!
| |
|
|
|
Tailslide
Posts: 6267
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: online
|
RE: Menu question - 4/7/2008 16:38:37
The scrolling script in my test page is the one you've used on the other site so maybe there are images in the script that aren't on my server so don't appear on the test page - can't check at the moment, I'll have a look tomorrow.
On the hover thing - there's a javascript file - thumbnailviewer.js where the large image and the links are referenced.
As far as the mouseover calls - this is the first link and it's mouseover call:
<a href="ud0208_01.htm" title="Baseball game Photo" onfocus="modifyimage('dynloadarea', 0); get_cap(this.title);" onmouseover="modifyimage('dynloadarea', 0); get_cap(this.title);">
The title is the caption that appears under the image. The onfocus= etc and the onmouseover= etc are the two functions that cause the mouseover. Onfocus works for keyboard navigation and the onmouseover works for mouse users. The get_cap bit makes the title attribute into the caption.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
