homepage Welcome to WebmasterWorld Guest from 54.205.189.156
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Show/Hide Layers and links
typophile




msg:607329
 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




msg:607330
 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




msg:607331
 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




msg:607332
 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




msg:607333
 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




msg:607334
 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




msg:607335
 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




msg:607336
 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




msg:607337
 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




msg:607338
 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




msg:607339
 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




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

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

typophile




msg:607341
 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




msg:607342
 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




msg:607343
 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




msg:607344
 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