Welcome to WebmasterWorld Guest from 23.22.46.195

Forum Moderators: incrediBILL

Show/Hide Layers and links

   
3:18 pm on Jul 20, 2001 (gmt 0)

10+ Year Member



I am trying to create some drop-down menus using the show/hide layers js behavior. Because I want the links to be live text and not gifs I have to make each menu item a link (even if it doesn't go anywhere ie <link="javascript;:">. I have a show layer behavior on mouseover and a hide layer behavior on mouseout for each link. The problem is that each link is in a table cell in a table nested in the layer and when the mouse passes over the cell padding the layer hides. I want the cell padding because without it everything looks crushed together. Is there any way (css?) to increase the active area of a link? Increase the boundary around the link without using the cell padding? Apply the show/hide behavior to the whole menu? the whole table?
6:13 pm on Jul 20, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



The issue comes up because you want to use text links, and links are only active right in the text box.

The only thing I thought of so far is a total kludge, but it works. You could get rid of the cell-padding, but instead surround each text link with spacer.gifs, above, below, left and right, sized the way you need them, including the spacer gifs INSIDE the anchor tag.

Like this example, to add 6 pixels of "active-link" padding around the text:
<a href="javascript:function"><img src="spacer.gif" width=100 height=6 border=0 alt=""><br><img src="spacer.gif" width=5 height=6 border=0 alt="">KLUDGED LINK<img src="spacer.gif" width=5 height=6 border=0 alt=""><br><img src="spacer.gif" width=100 height=6 border=0 alt=""></a>

It sure gives you lots of alt attributes to play with if you want.

6:31 pm on Jul 20, 2001 (gmt 0)

10+ Year Member



Yes that would work but I have 50 of these to do. There's got to be a simpler way. I mean I've seen this done before and I'm pretty sure they didn't use spacers. What can you attach a behavior to besides an image or a link?
7:46 pm on Jul 20, 2001 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



<dreaming>
Gads, it would be REALLY nice if you could designate the entire area of a table cell as a link, such as: <a href='wherever'><td>blah blah</td></a> Then, whatever text and graphics were placed in that cell would be part of the hyperlink...
</dreaming>
8:12 pm on Jul 20, 2001 (gmt 0)

10+ Year Member



I'm thinking of scrapping the layer idea and using the menu js.
I got this piece of js from fireworks but I cant get it to work, any of you javascript gurus know why? It's all goobeldygook to me, I just cut and paste it and hope it works.

in head:

<script language="JavaScript">
<!--
function fwLoadMenus() {
if (window.fw_menu_0) return;
window.fw_menu_0 = new Menu("root",50,15,);
fw_menu_0.addMenuItem("menu item 1");
fw_menu_0.addMenuItem("menu item 2");
fw_menu_0.hideOnMouseOut=true;

fw_menu_0.writeMenus();
} // fwLoadMenus()

//-->
</script>
<script language="JavaScript1.2" src="fw_menu.js"></script>

in body:

<script language="JavaScript1.2">fwLoadMenus();</script>

in link:

href="#" onMouseOut="FW_startTimeout();" onMouseOver="window.FW_showMenu(window.fw_menu_0,143,94);"

5:25 am on Jul 21, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



This looks like only part of the necessary script, typophile. It calls on functions and variables that are not declared anywhere in the code you posted.

It's Fireworks specific code (notice all the fw's), and I believe it requires a special Fireworks HTML page to declare these things for your page to refer to.

Check the Macromedia support page at:
[macromedia.com...]
for info on copying the JavaScript that Fireworks generates.

12:01 pm on Jul 21, 2001 (gmt 0)

10+ Year Member



Hi typophile,

Try line-height and/or text-indent in the CSS class for the specific anchors in question. It appears that NN4.x supports those two CSS properties fairly well.

You are welcome to look at some of my menu examples. I'm new here... will it be considered spamming to post a link to my menu examples?

BTW, this is a terrific site, I'm glad I found it!

4:41 pm on Jul 21, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Welcome to the WebmasterWorld forums, Mike, and thanks for the helpful contributions.

Since most of us here are promoters in one way or another, we avoid links to our personal sites — it could open the door to a promotionally flooded board in no time at all, and the valuable information we share would be obscured.

However, you are welcome to say something like "on the site in my profile". You also can share URLs person-to-person through the "StickyMail" feature linked at the top of the page. In fact, if you will, please send me a Sticky with the URL for your menu examples.

Thanks again for your contribution.

5:10 pm on Jul 21, 2001 (gmt 0)

10+ Year Member



Hi tedster,
Thanks for the welcome!

I understand completely about not wanting to turn the board into a "promotion" site. No problem! My menu examples are easy to get to from the main page of the site listed in my profile. They are not stand-alone, they require my API.

Thanks again!

8:09 am on Jul 23, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You only need one spacer GIF just have your layer on top of another layer containing a transp. GIf then as soon as you mouse leaves the top layer the bottom layer triggers the close.

This is the best cross-browser way to do it

1:07 pm on Jul 23, 2001 (gmt 0)

10+ Year Member



knighty:
That's an interesting technique... I had not thought of that. This could be useful with my mouseOver Menus - I was hooking document.onmouseover, but I really wanted to leave that event for the application.

Great idea, Thanks!

1:16 pm on Jul 23, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



if you want to this in action sticky mail me for the URL
9:11 pm on Jul 30, 2001 (gmt 0)

10+ Year Member



>You only need one spacer GIF just have your layer on top of another layer containing a transp. GIf then as soon as you mouse leaves the top layer the bottom layer triggers the close...

I tried this even before I posted this topic but, because I wanted to make multiple overlapping drop down menus, the layers that the other menus are on seemed to interfere with the hidelayer action tied to the spacer which presumably has to be on the bottom layer. Is this right? should I do it with a different layer to trigger the close one below each menu layer?

9:13 pm on Jul 30, 2001 (gmt 0)

10+ Year Member



>You only need one spacer GIF just have your layer on top of another layer containing a transp. GIf then as soon as you mouse leaves the top layer the bottom layer triggers the close...

I tried this even before I posted this topic but, because I wanted to make multiple overlapping drop down menus, the layers that the other menus are on seemed to interfere with the hidelayer action tied to the spacer which presumably has to be on the bottom layer. Is this right? should I do it with a different layer to trigger the close one below each menu layer?

8:21 am on Jul 31, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



typophile,

Just have two layers show when you mouseover - the bottom wider layer with the transparent gif and the smaller visible menu on the top, as soon as the mouse moves over the bottom layer simply hide both those layers.

so basically show 2 layers - then hide hide those 2 layers..you can do this as many times you want enabling multiple drop downs on the same page.

5:22 pm on Aug 1, 2001 (gmt 0)

10+ Year Member



Thanks Knightly, That seems to be working well.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month