homepage Welcome to WebmasterWorld Guest from 54.146.175.204
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Show/Hide Layers and links
typophile

10+ Year Member



 
Msg#: 885 posted 3:18 pm on Jul 20, 2001 (gmt 0)

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?

 

tedster

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



 
Msg#: 885 posted 6:13 pm on Jul 20, 2001 (gmt 0)

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.

typophile

10+ Year Member



 
Msg#: 885 posted 6:31 pm on Jul 20, 2001 (gmt 0)

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?

mivox

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



 
Msg#: 885 posted 7:46 pm on Jul 20, 2001 (gmt 0)

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

typophile

10+ Year Member



 
Msg#: 885 posted 8:12 pm on Jul 20, 2001 (gmt 0)

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);"

tedster

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



 
Msg#: 885 posted 5:25 am on Jul 21, 2001 (gmt 0)

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.

MikeFoster

10+ Year Member



 
Msg#: 885 posted 12:01 pm on Jul 21, 2001 (gmt 0)

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!

tedster

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



 
Msg#: 885 posted 4:41 pm on Jul 21, 2001 (gmt 0)

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.

MikeFoster

10+ Year Member



 
Msg#: 885 posted 5:10 pm on Jul 21, 2001 (gmt 0)

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!

knighty

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 885 posted 8:09 am on Jul 23, 2001 (gmt 0)

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

MikeFoster

10+ Year Member



 
Msg#: 885 posted 1:07 pm on Jul 23, 2001 (gmt 0)

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!

knighty

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 885 posted 1:16 pm on Jul 23, 2001 (gmt 0)

if you want to this in action sticky mail me for the URL

typophile

10+ Year Member



 
Msg#: 885 posted 9:11 pm on Jul 30, 2001 (gmt 0)

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

typophile

10+ Year Member



 
Msg#: 885 posted 9:13 pm on Jul 30, 2001 (gmt 0)

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

knighty

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 885 posted 8:21 am on Jul 31, 2001 (gmt 0)

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.

typophile

10+ Year Member



 
Msg#: 885 posted 5:22 pm on Aug 1, 2001 (gmt 0)

Thanks Knightly, That seems to be working well.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved