youngpup.net - ypSlideOutMenus

3/29/2004 7:31 PM

hey em,

I too was recently looking into how to get the menus centered and also have sub menus.. I looked around but didnt find anything so i took a crack at it myself... I grabbed the centering code from here and the submenu code from aveda and merged them and actually got it working..

Im definately not a programer, I am just a designer with very limited coding abilities. so there is probably a bunch of mistakes and useless extra lines.. but it works!! but if any one has any ideas to clean it up let me know.

the site and code are located here : www.acclaimtrust.com

thanks youngpup! these menus are awesome... i love them! your a genious

was it ok for me to use the code for these site?? i originally found it at simplythebest.net under freeware. i hope so

i also used the menus here : www.orcbc.ca

__
ed

Sub-Menu

4/5/2004 6:59 AM

does anyone have a script for ypSlideOutmenu with sublinks i.e like aveda?

__
Seriform

Thank you!

4/6/2004 5:19 AM

I stumbled upon your SlideOutMenu more my accident, and I am impressed! I replaced the original Java navigation applet at www.hmd.lu by your sliding menus, and it's just perfect!

Pascal

__
Pascal - http://www.hmd.lu/

Transparancy

4/8/2004 7:53 PM

What's the easiest way to make the sub part transparent? I assume you can use an image, but is there some js or css property you can set?

Thanks.

__
Stephen - http://www.ninemilestudio.com

Re: Transparency

4/8/2004 9:21 PM

There are proprietary properties for windows/IE and for mozilla, but nothing that will work in browsers like opera, safari, and mac/ie.

So if you need support for most modern browsers, the easiest way is to use the old hack of the background gif that has alternating pixels transparent.

If you only care about win/ie and mozilla, then you can get transparency with this simple CSS:

#myTransparentElement {
  /* for mozilla */
  -moz-opacity:.6;

  /* for win/ie */
  filter:alpha(opacity=60);
  }

Otherwise, if you like pain and you don't need to support ultra-old NN4.x, you can get most modern browsers to display true transparency by either using a PNG background in opera, safari, and mac/ie, or a proprietary CSS tag in mozilla and win/ie. For a demonstration of this evilness please see the [a http://youngpup.net/2004/transmenus/project?file=transmenu.css]source.

Search for "backgroundColor" and "backgroundPng".

__
boogs - http://youngpup.net/

Gar.

4/8/2004 9:24 PM

fallen pray to my own crapping parsing routines.

make that:

http://youngpup.net/2004/transmenus/project?file=transmenu.css

and

http://youngpup.net/2004/transmenus/project?file=transmenu.js

__
boogs - http://youngpup.net/

Double-Gar!

4/8/2004 9:32 PM

Fallen prey to my own crappy parsing routines.

__
boogs - http://youngpup.net/

Thanks

4/9/2004 3:59 PM

Thank you. That worked perfect.

Thanks also for sharing. I will be sure to make a donation soon because now I am starting to feel guilty for using your stuff AND getting free support...

__
Stephen

Drop Down Menu help!

4/10/2004 11:04 AM

Where can I find the Script for a menu like this site?
http://www.creedfeed.com

cause I want a menu exactly like that but I can't find anything in here that looks like this, expept for this script, but that's not the same tho..
can anyone help me out?

__
JJ - http://www.dlplp.com

Mr.

4/15/2004 3:50 AM

http://www.codingforums.com/showthread.php?t=36198

i especially like the use of the first name three times

__
Subhailc

Simple Help with Submenus Please

4/15/2004 5:54 PM

Submenus:

Hey - I love this ypslideout stuff, but can't get sub menus to work properly. Essentially I have it call another menu onmouseover, but unfortunately the original menu disappears onmouseout and i need it to stay.

http://www.teambuilders-int.com/v4/new_header.htm

Go under 'Solutions'. From 'Sales Management Executives' I want it to branch out into another menu... but as you can see the original menu disappears.

How do I get it to stay put while you go into the next submenu?

Please email me with any help/suggestions!

__
web-guy

How about this?

4/15/2004 9:31 PM

Where can I find the Script for a menu like this site? http://www.creedfeed.com

=================

JJ-how about this: http://www.milonic.com/

__
M

Untitled Jibbering

4/15/2004 10:07 PM

Actually, creedfeed (ha ha! i can't type that without laughing) is using a modified (quite nicely i might add) version of transmenus.

__
boogs - http://youngpup.net/

Help

4/20/2004 10:41 AM

I am trying to do this cool background fade in and fade out. But I can't seem to find the right place to put the fade in code. If you want my code email me.

Thanks.

__
Djcrazysk8er - http://ferraricolor.mmaweb.net

Re: Help

4/20/2004 12:45 PM

Can you post the relevant code here, or a URL to it? so that more than one person can have a crack at it?

__
boogs - http://youngpup.net/

Help Update

4/20/2004 12:56 PM

Here is the link to my Menu.js file. The code I am trying to add in is calling a function in another JS file. Here is the function call.

setOpacity('ContentLyr', 100);
setOpacity('PageNavLyr', 100);

__
Djcrazysk8er - http://ferraricolor.mmaweb.net/menus/menus.js

Let Me Clarify

4/22/2004 10:46 AM

Let me clarify. I am trying to run a function when all of the menus are closed. But for some reason the function gets triggered whenever you mouse over to another main nav item.

If anyone could shed a little light or an idea to help me out that would be greatly appreciated.

__
Djcrazysk8er - http://ferraricolor.mmaweb.net

Hey Now boogs...

4/22/2004 1:41 PM

Actually, creedfeed (ha ha! i can't type that without laughing) is using a modified (quite nicely i might add) version of transmenus.

===============

Hey now... there's nothing wrong with Creed ;) Yes, I'm using the transmenus.

__
CreedFeed - http://www.creedfeed.com

Disappear on "out" instead of slide

4/22/2004 7:26 PM

nice menu system!!! Can anybody help me out in modifying it so instead of the menu sliding back when let go or if someone scrolls on another button, it just disappears? But it still slides out when rolled over?

thanks.

__
kyre

where are the FAQs?

4/27/2004 1:37 PM

what happened to the explanantion on the old youngpup site?

there was a pretty useful explaination of what all of the variable stood for... and now it is gone :(

well I might as well ask:
I am trying to do a slide out for the bottom nav bar of my site and I cannot figure out how to get it so that the slide always happens next to the bottom bar... if the content above extends too far the slider pops up too high etc.

any thoughts? is there a way to determine the position of the bottom of the page and then have that dynamically filled into the positioning values?

__
spooner

onclick instead of onmouseover

4/30/2004 6:47 AM

Prelude: Thanks much, Aaron, for the free release.

I have a question/problem though, which I deserve since I am using your script apart from its original intent.

Instead of each menu folding out on onmouseover, I am using onclick. and an onclick to retract the menu.

Except the menu wants to retract without a function being called. (for example: click on the layer and the move the mouse from over it. after a few moments it retracts.)

sleepless hours. i hope this is senseable.

your spambot-proof code makes me feel all safe and warm inside.

__
staylor

Re: FAQs, click-not-mouse

4/30/2004 8:28 AM

Spooner

You're right. This site (this menu) desperately needs an FAQ section. I'm actually surprised anybody was using the documentation on the old site; you're the first one who has asked what happened to it.

What I hear you saying is that you want the menus to "stick" to the bottom of the screen, no matter how you resize it.

If that is so, then the problem is not unlike relative positioning and centering. There are two examples of how to do this in the examples section.

staylor:

I see... Your sleepless nights are my fault; I never thoguht about this use case carefully (I'm not sure I knew what a use case was when I wrote this code!).

Anyway, there is a bit of code in ypSlideOutMenus.js which is hardwired to the mouseover/mouseout events. Check out lines 98 and 99:

http://youngpup.net/2001/ypslideoutmenus/project?file=ypSlideOutMenus.js

To fix for what you're trying to do, you'd need to remove/comment those lines, or lines 80 and 81 if you're using ypSlideOutMenuC.js.

Sorry about that.

__
boogs - http://youngpup.net/

Untitled Jibbering

4/30/2004 8:54 AM

Thanks Tons, Aaron.

I knew I left some sense out somewhere. If anything, your code has spared me a couple extra hours of sleep.

"I have a question/problem though, which I deserve since ..."

I meant I deserved the problem, not the solution.

Thanks again for your help.

_S

__
staylor

Untitled Jibbering

4/30/2004 10:45 AM

Thanks very much Boogs-

Yeah I read those FAQs because that is where I was able to figure out what you were doing... :)
learned a lot from those..

still learning a lot from the code but those FAQs at least told you what value meant what and where it was being applied in the code..

thanks for the links to the examples.. So I would guess I should just use the same thinking behind the centered exmaple and instead of splitting the value in half just use the height and subtract an offset. But the question I have is what part of the code actually writes the height to the CSS? Is there a diff btw the javascript version and the relative with CSS? Any advantages to either??

thanks again

spooner

__
Anonymous Coward

Untitled Jibbering

5/1/2004 12:18 AM

"So I would guess I should just use the same thinking behind the centered exmaple and instead of splitting the value in half just use the height and subtract an offset."

exactly :)

"But the question I have is what part of the code actually writes the height to the CSS?"

Heh. The writeCSS() function, of course (no, really!) :). The CSS that it writes out is built up in the constructor, lines ~24-70. But this is not relevant to your problem; the way the JavaScript works is to modify the initial position dynamically using DHTML. It doesn't matter what the CSS says.

" Is there a diff btw the javascript version and the relative with CSS? Any advantages to either??"

Well, the advantages of the CSS version are that it's probably more flexible and simpler for those who already know CSS well. Plus you don't have to figure out any custom JavaScript. Finally, the performance will probably be a little bit better.

The benefit of the JavaScript approach is that is compatible with all browsers ypSlideOutMenus is, including Netscape 4.x, while the CSS approach requires a modern CSS-capable browser.

I think nowadays, most people will go for the CSS approach, but it depends on your target audience, really.

Hope that helps!

__
boogs - http://youngpup.net/

Submenu example please

5/7/2004 3:59 PM

Submenus! Can we please see the code for some simple submenu examples? Aveda.com is great but trying to pick through their code is true needle in haystack work.

__
scanman20 - http://www.notonebit.com

Duh...

5/7/2004 4:20 PM

Oh and stupid question, what's the difference between ypSlideOutMenusC.js and ypSlideOutMenus.js?

__
scanman20 - http://www.notonebit.com

submenus, etc.

5/7/2004 4:53 PM

Often times, I create compressed versions of javascript files by removing whitespace. This can easily halve their weight.

By convention, I append "C" to the names of these files. There is no functional difference, it's just that one is easier to read.

As for submenus, they aren't officially supported. Happily, some people have hacked the code to make it work, but I've not picked through it either. If you want to use submenus, look at transmenus or any of the zillions of other DHTML menu systems on the net.

__
boogs - http://youngpup.net/

database driven menus

5/11/2004 10:51 PM

The menus I'm trying to impliment for a site are going to be completely dynamic from a DB, so setting the height of of the menus is a problem. Is there any way to work around this so that I don't just have to set the height way to high so that

__
th

images as parent menu

5/13/2004 4:03 PM

Can anyone tell me how to use images for the parent div / table?? What I want to do is have the CSS tricked out version (http://www.youngpup.net/_projectDirectories/ypSlideOutMenus/css/index.html) with my parent menu (ideas, experiments, components, & writings) as images stacked vertically, then have dynamically added text menu items (from a database) flyout to the right of those images. However, I cannot get the images to make the flyout work correctly. The images are in a table.

Many thanks!

__
brett

Dom

5/20/2004 9:03 AM

Hi all

Great work!!

I have a question, I'm doing this site http://www.bearsyouth.org they are using macs and say the menus arent closing when you rollout , also some of the text is outside the menu box...

Im totally lost as to what ive done wrong, any ideas:)

thanks!!

__
Dom - http://www.bearsyouth.org

Setting slideout menu to 100% width?

5/20/2004 11:36 PM

Is there a way to set the slide out menu to 100% screen width?

I'm thinking something like this: http://www.goldmansachs.com

__
AW

Can't get my menu to "flatten out"

5/22/2004 3:00 AM

Hey All...I need help big time. I'm a newbie and I can't seem to get my menu to "flatten out/mesh" The layers are all visible. Anyone willing to take a look at my code? Thanks a bunch.

__
WAA

Untitled Jibbering

5/25/2004 1:32 PM

I'm trying to put a slideout menu on my company's website. It's kinda silly that they ask me to do it since I have never worked on a website before. Itried to do it but keeps on getting an error message that says "ypSlideOutMenu is undefined" I have no idea what's going on. Can someone help?

__
KC

Javascript relative postioning

5/26/2004 9:05 PM

Love the javascript relative positioning!

Just one wee problem with it - it works fine, so long as the page is not wider than the browser window. If this happens, scrollbars appear in the window, which means the center of the browser is no longer the center of the page. Which means the offset of my menu, which is relative to browser center, is wrong, and no longer lines up with the page properly.

To fix this, I simply put in a cap. I know my page width will not be less than 750px wide. So I tell the script that if my browser window is less than 750px, it should use 750px anyway...

// this function calculates the window's width - different for IE and netscape
    function getWindowWidth()
    {
        BrowserWidth = window.innerWidth ? window.innerWidth : document.body.offsetWidth;
        
        return (BrowserWidth < 750 ) ? 750 : BrowserWidth;
    }

__
Pseudonym

*nix tests come thru

6/4/2004 5:54 AM

Appears to work flawlessly under konq & Moz 1.5 running under debian. Great work YP.

__
hcel

xhtml ie5 mac script errors.

6/8/2004 8:51 PM

in xhtml, i get a script error on ie5 on mac

this is my header.

1 2	`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`

it works fine with

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

__
the king

Tree menus

6/9/2004 12:17 PM

Is there a version that has multiple (tree) type menus? Looking for category, sub-cat type drop-down tree menu structure. This would be a separate menu area for each subsequent cat.

__
Mollask

Rollover On Click Popup-Menu?

6/11/2004 9:34 AM

I did this popup-menu (http://www.r-reizen.nl) with Dreamweaver, but it is very heavy and slow...I would prefer the script from Youngpup, but the example menus I tried uit don't slide uit. Maybe because i am putting the script into Dreamweaver? Or because I have a Mac OSX?
I hope somebody can help me. Thanks a lot :)

__
Ulla - http://www.r-reizen.nl

IE 5 on Mac - sad menus :(

6/11/2004 4:02 PM

Hey all.
Just checking back to see if anyone has had a problem with their menu system not working properly on ie 5 mac. (see my post above)

If you roll over the menu, it doesn't show up. Or shows up if you roll out a certain way, but only shows the menu retracting. Weird. Works perfectly fine on Safari.

If someone could point me to an area within the code that I should be focusing on to find a solution, I'd really appreciate it.

I have the doctype set to loose and the page is centered, but not using youngpup's center example.

Many thanks.

__
em

Dom

6/11/2004 4:41 PM

Heya did you see the kings post a bit further up, this sorted my issues with ie on mac

I had the incorrect doctype

__
Dom

Re: IE 5 on Mac - sad menus :(

6/11/2004 6:00 PM

Hey Dom,
Yeah I tried a bunch of different doctypes. What type of problems did you have with ie 5 on mac?

Thanks for the suggestion. I appreciate it.

Any others? Thanks.

__
em

mac ie

6/11/2004 7:44 PM

Heya

The prob i had was that the menu wasnt closing on rolloff

i replaced the doc type with this one

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

everything seemed to work fine after that.

__
Dom

something nice

6/16/2004 3:03 PM

i've gotten basic submenus to work, but i'm stuck with one of the tricks used on the www.aveda.com site. specifically, what part of the menu declaration makes the whole menu item act as a link instead of just the text?

i understand that they are putting the menu items in div tags to make them, and its simple to get the submenu to stay out by putting the onMouseOver() and onMouseOut() functions in the div tag instead of the anchor tag.

__
matt - www.trinitybiblecollege.edu

A god in his own mind

6/17/2004 1:07 AM

Don't suppose any of you fine people could explain to me how I cango about triggering TWO menus activating w/ single link, could you? I've tried simply pasting a second call to the function, like so:

onmouseover="ypSlideOutMenu.showMenu('menu1'); ypSlideOutMenu.showMenu('menu2');"

but it don't like that! They both open but one closes right away while 2 remains open...

FanTASTIC script, btw!

__
almighty wannabe

Ugly answer to above

6/18/2004 12:09 AM

ypSlideOutMenu.showMenu = function(id)
{
var reg = ypSlideOutMenu.Registry
var obj = ypSlideOutMenu.Registry[id]
if (obj.container) {
obj.over = true
//for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)
//if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }
if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
}
}
ypSlideOutMenu.hideMenu = function(id)
{
var obj = ypSlideOutMenu.Registry[id]
if (obj.container) {
if (obj.hideTimer) window.clearTimeout(obj.hideTimer)
//obj.hideTimer = window.setTimeout("ypSlideOutMenu.hide('" + id + "')", ypSlideOutMenu.hideDelay);
}
}

This is just quick and ugly, but somewhat answers the above question - I just glanced at the simple example, find that in ypSlideOutMenusC.js and comment out the three lines,

then use

<table bgcolor="#CCCCCC" width="450" cellpadding="2" cellspacing="0" border="0">
    <tr>
        <td width="50" align="center" class="menuActuator"><a href="#" onmouseover="ypSlideOutMenu.hideAll();ypSlideOutMenu.showMenu('menu1');ypSlideOutMenu.showMenu('menu2');" onmouseout="ypSlideOutMenu.hideMenu('menu1')">menu1</a></td>
        <td width="50" align="center" class="menuActuator"><a href="#" onmouseover="ypSlideOutMenu.hideAll();ypSlideOutMenu.showMenu('menu2')" onmouseout="ypSlideOutMenu.hideMenu('menu2')">menu2</a></td>
        <td width="50" align="center" class="menuActuator"><a href="#" onmouseover="ypSlideOutMenu.hideAll();ypSlideOutMenu.showMenu('menu3')" onmouseout="ypSlideOutMenu.hideMenu('menu3')">menu3</a></td>
        <td width="50" align="center" class="menuActuator"><a href="#" onmouseover="ypSlideOutMenu.hideAll();ypSlideOutMenu.showMenu('menu4')" onmouseout="ypSlideOutMenu.hideMenu('menu4')">menu4</a></td>
        <td width="200" align="left" class="menuActuator"><a href="#" onmouseover="ypSlideOutMenu.hideAll()">hide 'em all</a></td>
        <td width="100">&nbsp;</td>
    </tr>
    </table>

In place of the current top table direcly under the body tag in simple/index.html

only problem is that they do not go away automatically - I would think you would be better off just writting something from scratch, based on his code so you could have multiple menus open at once, but not have them slide away if you are not hovering over them (since it is rather hard to hover over two at a time)

__
Zach - http://fantasysportswire.com

rolled out on page load

6/20/2004 1:29 PM

Does anyone have any ideas about making the menu appear already rolled out when the page loads, then rolling back in after mouseout as usual? What I'm trying to do is maintain the state of the menu from page to page. See my site for an example of the issue.

__
Justin - http://chromogenic.net/

ie vs mozilla

6/23/2004 12:14 PM

there is a slight difference in the way the menus are rendered, they seem to be pushed to the right 5-10 pixels when viewed in mozilla/firefox. i'm guessing that this is probably a problem with something that i'm doing rather than YoungPup's script. could anyone give me a clue?

__
matt - www.trinitybiblecollege.edu

Menus stay open on safari

6/24/2004 1:46 AM

I have put these menus on a site and they stick open in safari when you quickly mouse over all the menus. Does anyone know the solution to this problem?

www.xsiq.com

__
the king - www.killapenguin.com

Autogenerating Menu

6/25/2004 2:35 PM

Hey, I am trying to I suppose add in a new feature for myself yet am having trouble and cannot figure why.

What I am doing is trying to write a script to automatically find all the menu divs in the page and, well, make menus out of them. The problem isn't where you would expect: the menus generate fine but then the script errors out when it hits the writeCSS() call. Like I said it makes no sense to me.

My mess looks something like this:

// this is called from body element -> onload="doOnLoad()"
function doOnLoad()
{
    var DIR    = "right";    // Menu opening direction
    var LEFT   = 171;    // Menu indent
    var TOP    = 0;        // Menu vertical position
    var WIDTH  = 200;    // Width of Menu
    var HEIGHT = 24;    // Height of each Item on Submenus

    if(document.getElementById)
    {
        // Get all DIV elements
        var allDiv = document.getElementsByTagName('div');

        // This holds script for YP menu building
        var menuBuildScript = "var menus = [";
        
        for(var i=0; i<allDiv.length; i++)
        {
            if(allDiv[i].className == "menuActuator")
            {
                // Get menu ID
                var menuID = allDiv[i].getAttribute("menuID");

                // Get number of menu entries
                // Use this to figure menu height based on item size.
                var adjHeight = HEIGHT * allDiv[i].getAttribute("menuItems");

                // Append this menu to our script
                menuBuildScript += "new ypSlideOutMenu(\"" + menuID + "\", \"" + DIR + "\", " + LEFT + ", " + TOP + ", " + WIDTH + ", " + adjHeight + "), \n";
            }
        }
        
        // Remove last comma & whitespace from script
        menuBuildScript = menuBuildScript.substr(0,menuBuildScript.length-3);
        menuBuildScript += "]";
        
        // Run script to build menus
        eval(menuBuildScript);
    }

    // Error in this function ---
    ypSlideOutMenu.writeCSS();
}

Of course I have modified my HTML to include the two custom attributes used, IE

<div class="menuActuator" menuID="menu1" menuItems="6">

The error causes the page to disappear completely as soon as it calls writeCSS. No error is given in IE, mozilla says ypSlideOutMenu is not defined (in it's reference from the for loop declaration.) Everything of course runs fine when the menus are generated normally, and this script generates the EXACT same code to eval yet when we call writeCSS after this way it errors whereas normally, well, it works. Any thoughts?

Also, I forgot to mention right away, these menus are excellent, they really make things look good, thanks very much for releasing them!

__
Thumper

Nevermind...

6/25/2004 3:23 PM

Please disregard that last post, I worked around it. I ended up changing writeCSS so instead of outputting it to the document it accesses each element via document.getElementById and change the style attributes from there.

It works wonderfully now, thanks again for the script its awesome.

__
Thumper

Menu stays open

6/27/2004 2:41 PM

I'm using an old version of the ypslideoutmenusc.js on this site and I finally decided to update to the newer version. The site's navigation is using submenus so decided to opt for the modified script from AVEDA. I could use transmenus.js but it is too tricky for me and weights more than 30k. I adapted the aveda script and all worked fine in the MS Explorer.

I then changed to Firefox, my favorite browser, only to find out that the menus ware not working correctly. They had lost their nice motion effect.

After several tries, I found out that the problem had to do with the DOCTYPE declaration. To cope with the notorious IE box model rendering, I had added "http://www.w3.org/TR/html4/loose.dtd" which, for some obscure reason, was creating this problem in Firefox. I deleted it and everything was o.k. I then added the iframes that the original page had and noticed that the menus remained open even if the pointer was far away from the menus. The only way to close them was to roll the mouse outside the iframe area.

Since Iâ€™m not a coder, I decided to follow a designer approach in trying to resolve this problem. I added a transparent div underneath the menu and over the iframe, covering almost all its width and height. I also added two lines in the script, at showmenu and hidemenu functions to change the visibility of the transparent div.

Of course there must be more appropriate solutions but this worked in my case.

__
theos - http://www.rodi.it/menutest.asp

Stop Email Notifications?

6/28/2004 8:03 PM

How can I stop the e-mail notifications of replies of posts to this ???

__
CreedFeed

IE Using Different Location Than Other Browsers

6/29/2004 12:09 AM

IE seems to be using a different position for the menu than other browsers at the following page:

http://www.shelter-mortgage.com/test/

I've modified the menu positions to work write in IE but this obviously throws everything else off in all other browsers. What could be causing the difference?

Any help appreciated.

__
MastaM00 - http://www.shelter-mortgage.com/test/

firefox pc & macs

7/14/2004 6:40 AM

i love the script
but also find that the javascript centering method positions slightly different on macintosh safari & ie
and also in firefox.
Is there a simple fiox for this?

initiating a browser detector (albeit with my limited designerish programming skills) is proving buggy as hell.

this is about the only time in my life i wish my client wasn't using a mac and wasnt using firefox on his home pc

i programmed the site's initial template at home on my pc; looked great in ie but on my mac at work its about 12px out; it also happens in windows firefox.

has anyone developed a fix for this small but rather quirky issue?

__
karl - www.fire.ie

centering issue

7/14/2004 9:03 AM

is this an IE box model issue?

__
karl - www.fire.ie

Animations over the menus :: Help!

7/14/2004 3:47 PM

my animations make in Macromedia Flash MX 2004 thats over the menus, how can fix this?, Many thanks.

__
foxdead71

Re: animations

7/14/2004 4:07 PM

See this comment:

http://youngpup.net//2004/transmenus/comments#c270

__
boogs

RE: Menu positioning differences IE vs. others

7/14/2004 5:11 PM

In Safari my menus positioned fine, but in IE they were 10-15 px off. I found a solution that worked (for me anyways), which is to position the DIVs containing the menu items as "relative".

Specifically, to help good old IE position your menu itemscorrectly, the key is to include the "position:relative" declaration in your DIV tag for each menu item in your HTML (as this does not seem to work when only included in the CSS).

Example:

<div id="menu4Content" class="menu" style="position:relative;">

__
vibe9 - www.ontopbikeshop.com/about

RE: Menu positioning differences IE vs. others

7/15/2004 4:32 AM

damn that doesnt work here:

http://www.fire.ie/drop

but thanks for the help

__
karl - www.fire.ie

Scroll Bars

7/15/2004 4:41 AM

Menu adds scrollbars even though the menu fits on the page. Any ideas?
http://pcextreme.biz/menutest/menu.htm

__
Divine

Untitled Jibbering

7/15/2004 7:20 AM

at a guess make a style with overflow hidden for a div?

__
karl - www.fire.ie

centering without tables

7/16/2004 3:38 PM

is there a way to center the menu with only css and not tables?

__
Anonymous Coward

Nice Mixture

7/16/2004 4:00 PM

I am close to finishing Peoriainfo.com with lots-o-YP integration in the navigation. The home page is pretty optimized, only with the help of Young Pup. The design is cool and stuff. Check it out

__
Trality - http://www.peoriainfo.com

Re: centering with only CSS

7/16/2004 4:05 PM

http://youngpup.net/_projectDirectories/ypSlideOutMenus/relativeCSS/index.html

__
boogs

Re: centering with only CSS

7/16/2004 4:23 PM

Sorry but I don't understand. The example you provide above still uses a table for the top level items. I'm assuming this is necessary for the centering to work?

__
Anonymous Coward

Re: centering with only CSS

7/16/2004 4:45 PM

No, not at all. That happens to be the way that it's centered in that example, but it's irrelevant.

The important point is to make a block-level container (such as a TD or a DIV) position:relative and then put the menus inside *that*.

The container itself can be centered any way you want, or in fact positioned anywhere with any mechanism you want. The menus will happy live inside there and position themselves relative to it.

Sorry for the confusion. I didn't actually look at the code in that example before I sent it, and remembered it being CSS-based. The concept is exactly the same, though.

__
boogs

Re: centering with only CSS

7/16/2004 4:47 PM

So for example, this should work:

<div style="text-align:center;">
  <div style="margin:0 auto; width:100px;">

    <div id="myMenuContainer">
      <div id="myMenuContent">
      </div>
    </div>

  </div>
</div>

__
boogs

Menus in other frame?

7/17/2004 3:47 AM

A qucky: Is it possible to launch the dropdownmenus in a different frame than the actual menubar?

__
Skalman

Please Make an Example YP Drop down Menus

7/17/2004 3:55 PM

I need this for a site that I am doing called PeoriaInfo.com. I need to manage a menu containing many items.
Help!!!

__
Trality

Example on my site

7/18/2004 6:03 PM

Just went through the refer logs, and saw that it was there so I wanted to just say two things on it.

(mine is the one at http://sportsforum.ws/myfsw/?lg=304)

The rest of my entire project there lost Moz somewhere - so at the moment its IE only (will figure out where I lost Moz sooner or later, impossible for that to work in Opera as written) - and I said they work on mouseover, discovered that was dumb and it works on click now (the ypslideout is used when you click a letter or position on top)

And if you are expecting or looking for a menu, you wont find it, well, unless you are looking for a very very big menu :) - It is a good example of taking one very nicely written component that had a thought of use, and using it for something completely different.

__
Zach - http://sportsforum.ws

Not showing all of submenu

7/23/2004 2:28 AM

on one of my bigger submenus, theres 27 cells but it will only display the top 25. Any idea why?

__
Anonymous Coward

Menu Slide out on Cell

7/23/2004 5:17 AM

Is there a way to make the menu slide out when you run over a cell and not a pic?

__
Anonymous Coward

Re: on cell

7/23/2004 6:06 AM

Yeah, it's really the same concept. Just move the onmouseover up into the cell declaration. eg:

<td onmouseover="ypSlideOutMenu.showMenu(....)">
  hello!
</td>

__
boogs

Problem with IE 6.0.3790.0

7/23/2004 4:51 PM

Did anybody found problems using ypSlideOutMenus with IE 6.0.3790.0 (the one distributed with W2003 server and probably with the next Xp versions)?
You cannot really use the menu functionality becouse all the menu choiches are printed above the menu line.
Using IE 6.0.2800.1106 all is working fine.
I am not an expert in Javascript so I will thanks very much if somebody could find a solution.

Silvano
(see ypSlideOutMenus at www.promarzio.com )

__
Silvano - www.promarzio.com

object doesn't support this property or method

7/25/2004 1:31 PM

Hi!

I'm getting a damn js error in the status bar only on IE6, which says

'line 20, 
char 3, 
object doesn't support this property or method'.

The line in question is this: ypSlideOutMenu.writeCSS();

Its really annoying, I'm using the exact same code as shown in the 'css-menus' example.

Anyone know what's going on?

__
Mambo - www.mambogani.com

Old version of menu?

7/25/2004 4:06 PM

Sounds like you have an old version of the menu code from before that method was added. Please download the latest from this site and replace the one you're using.

Verify that you have the correct version by searching the source for ".writeCSS".

__
boogs

7/25/2004 6:32 PM

Thanks! I had downloaded the zip file... I think you need to update this as the ypSlideOutMenusC.js file is the old one...

got the correct file now.

__
Mambo - www.mambogani.com

Rollover Image In NS 4.7

7/29/2004 12:51 AM

Hello there ... I have downloaded the latest version on the menu...

I have Rollover Images in each drop down instead of plain text .. Works perfectly in IE ..

But the Rollover Image doesn't show in NS 4.7 ...

Any Help Please ..

__
kicha - --

Bizarre JS error

7/29/2004 8:44 AM

I'm getting a JavaScript error only on IE6 and only on one page. I cannot seem to find any differences between this page and any prior work I've done with the ypSlideOutMenus.

Whenever a mouseover event is fired for the link, I get a javascript error stating that the Object does not support this property or method.

ypSlideOutMenu.showMenu = function(id)
{
    var reg = ypSlideOutMenu.Registry
    var obj = ypSlideOutMenu.Registry[id]
    
    if (obj.container) {
        obj.over = true

        // close other menus.
        // I THROW ERRORS!
        for (menu in reg) if (id != menu) ypSlideOutMenu.hide(menu)

        // if this menu is scheduled to close, cancel it.
        if (obj.hideTimer) { reg[id].hideTimer = window.clearTimeout(reg[id].hideTimer) }

        // if this menu is closed, open it.
        if (!obj.open && !obj.aniTimer) reg[id].startSlide(true)
    }
}

Here is how the menus are being created

<script language="javascript">
    var oneMenu = new ypSlideOutMenu("first", "down", 20, 140, 160, 65);
    var twoMenu = new ypSlideOutMenu("second", "down", 70, 140, 160, 165);
    var threeMenu = new ypSlideOutMenu("third", "down", 140, 140, 160, 165);
    ypSlideOutMenu.writeCSS();
</script>

And here is the menu source:

<div id="firstContainer">
    <div id="firstContent" class="menu">
        <div class="options">
            <a href="#">Item 1</a>
            <a href="#">Item 2</a>
        </div>
    </div>
</div>
        
<div id="secondContainer">
    <div id="secondContent" class="menu">
        <div class="options">
            <a href="#">Item 1</a>
            <a href="#">Item 2</a>
            <a href="#">Item 3</a> 
            <a href="#">Item 4</a>
            <a href="#">Item 5</a>
            <a href="#">Item 6</a>
        </div>
    </div>
</div>
        
<div id="thirdContainer">
    <div id="thirdContent" class="menu">
        <div class="options">
            <a href="#">Item 1</a>
            <a href="#">Item 2</a>
            <a href="#">Item 3</a> 
            <a href="#">Item 4</a>
        </div>
    </div>
</div>

Thanks for any help I might receive on this.

__
jeremiah - http://www.facility9.com

D'oh

7/29/2004 8:46 AM

Apparently, you cannot enclose your main menu in a div with an id of 'menu'. Once I changed that, everything worked. Sorry for wasting your bandwidth, Aaron.

__
jeremiah - http://www.facility9.com

something nice 2

7/29/2004 12:54 PM

Has anyone come up with a solution to this post:

---

i've gotten basic submenus to work, but i'm stuck with one of the tricks used on the www.aveda.com site. specifically, what part of the menu declaration makes the whole menu item act as a link instead of just the text?

i understand that they are putting the menu items in div tags to make them, and its simple to get the submenu to stay out by putting the onMouseOver() and onMouseOut() functions in the div tag instead of the anchor tag.

---

I've got the same question.

Thanks Monte

__
Monte - http://www.pixelsanddots.com

Rounding with Centering

7/31/2004 4:22 PM

I'm trying to use the JS method for making the menus relative to center. When the browser is a certain widths the drop downs are off by 1px. I assume this is a rounding thing. Is there anyway to keep this from happening? Solutions need to be netscape 4.x compatible. Thanks in advance for any advice.

__
Jon - http://www.jonlesser.org

DaggerMaster

8/2/2004 7:20 PM

I need help. I'm not a novice programmer, but I can't for the life of me figure this out.

I'm working on a jewelry web site and want two slide-out menus to come out at once in different parts of the screen: one containing the jewelry picture, and the other its description.

Does anybody know how to do this? What code mods would I need to make?

__
DgrMstr - www.redseven3.com

Can you open 2 sliders at once?

8/3/2004 11:22 AM

Sorry for the duplicate message. I realized I titled the last one incorrectly.

I need help. I'm not a novice programmer, but I can't for the life of me figure this out.

I'm working on a jewelry web site and want two slide-out menus to come out at once in different parts of the screen: one containing the jewelry picture, and the other its description.

Does anybody know how to do this? What code mods would I need to make?

__
DgrMstr - www.redseven3.com

Delay Slide Out

8/3/2004 4:31 PM

Any way to delay the intial rollout other than putting a
setTimeout in the onmouseover?

i have 10 of em and it seems silly to put the delay in 10 times.

seesm like around this line in the code
reg[id].startSlide(true) you should be able to put a settimeout but i can't seem to get everything to evaluate properly.
for eample
window.setTimeout(reg[id]+".startSlide("+true+")",1000);
doesn't work
ideas?

__
casaubon

Re: delay

8/3/2004 4:38 PM

That's not working because the reference to "reg" is lost when you go to global scope once the timeout triggers.

Luckily, reg is just a shortcut to the full variable name: ypSlideOutMenu.registry, so you should be able to do:

window.setTimeout("ypSlideOutMenu.registry['" + id + "'].startSlide(true)");

That should work.

__
boogs

JS error

8/4/2004 12:02 PM

I noticed that Firefox 0.9.2 gives an error with ypSlideoutMenusC when using the built in JavaScript console. This is an example using your examples.

Error: syntax error
Source File: javascript: http://www.youngpup.net/_projectDirectories/ypSlideOutMenus/simple/index.html
Line: 1, Column: 77
Source Code:
http://www.youngpup.net/_projectDirectories/ypSlideOutMenus/simple/index.html

I also noticed that it causes one of my scripts not to work in Firefox only. The script that doesn't work is an expand/collaspe script. Could this be caused by the error?

__
Anonymous Coward

Download links to older zip file

8/4/2004 1:47 PM

Just a heads up, the zip that's available on the project page is not the latest version of the script (with the writeCSS modification). Cheers.

__
Shaun Inman - http://www.shauninman.com

CSS Menu With ULs

8/6/2004 9:00 AM

I want to make menus using CSS and ULs and also utilize ypSlideOutMenu.

Here's a site that seems to use SlideOut in this manner: http://www.shockmedia.com.au/

Here's some menu code:
<ul id="nav">
<li id="menu1Container"><span><a href="#" title="Home" accesskey="h">Home</a></span></li>
<li id="menu2Container"><span><a href="#" title="Corporate Profile" accesskey="1">Corporate Profile</a></span>
<ul id="menu2Content">

<li><span><a href="#" title="Overview">Overview</a></span></li>
<li><span><a href="#" title="Services">Services</a></span></li>
<li><span><a href="#" title="Clients">Clients</a></span></li>
<li><span><a href="#" title="Case Studies">Case Studies</a></span></li>
<li><span><a href="#" title="News and Accolades">News and Accolades</a></span></li>
<li><span><a href="#">Contact Details</a></span></li>
</ul>
</li>

Any ideas on what the CSS would look like and how to accomplish this?

Thanks ...

__
TS - www.BetterConnect.com

Form fields poking through the menu divs

8/9/2004 5:27 PM

Hi Aaron.

I think I read somewhere that this is one of those "can't do anything about it" problems, but I thought I would ask to be sure.

Certain form fields seem to poke right through the drop down menus, which is not pretty. Do you know any fixes?

I figured I might assign a "show/hide" on the form fields on mouse over, but the page is already choking from the menu code because it generates a lot of dynamic junk from the modifications.

Here is the page: http://gaults.vkistudios.net/

The fields in question are on the 2nd tab titled "advanced search".

Thanks.

__
Stephen - http://www.ninemilestudio.com

true, until recently...

8/9/2004 6:07 PM

the thing about the form fields was true until recently. There has been some work on the transmenus thread to adopt a technique that uses an iframe to force menus to display on top of input boxes.

Check out the posts near here: http://youngpup.net//2004/transmenus/comments#c610

Nobody has yet adopted this to ypSlideOutsMenus.

__
boogs

More - CSS Menu With ULs

8/11/2004 9:29 AM

Just thought I would try one more time ... Any comments on CSS Menu With ULs above?

I appreciate your time. :-)

Thanks ...

__
TShorter

power of unordered lists

8/11/2004 11:35 AM

TShorter, you may find this an interesting read. I shore did.

http://www.kryogenix.org/code/browser/aqlists/

__
slholmes - http://polyphonicstudios.editme.com/

re: uls, etc

8/11/2004 11:48 AM

Yeah, absolutely. Take a look at that script. In general, these days I would always favor structured HTML with a behavior layer on top.

People, please keep in mind that this is an ancient script. Written well before anything with structured HTML was even possible. It's NN4-compatible for god's sake.

I only keep it online because lots of people still ask about it.

__
boogs

Firing menus from the body tag?

8/12/2004 12:33 AM

Help !! Can anybody show me how to open a menu using onLoad within the body tag? This is my code right now. Obvously something's not right.

<body class="menuActuator" 
bgcolor="#ffffff"
onLoad="ypSlideOutMenu.showMenu('menu97')>

Any help would be greatly appreciated!

__
DgrMstr - www.redseven3.com

whoops

8/12/2004 12:39 AM

Oh yeah, that won't work because the menus actually load a 10th of a second or so *after* the page loads.

So the easy way to fix this is:

onload="window.setTimeout('ypSlideOutMenus.showMenu(\'menu97\')', 200)"

A slightly better way would be to change the code in the script file at the end of the .load() function. The last line (inside the else { } clause) would be the call:

ypSlideOutMenus.showMenu('menu97');

__
boogs

Thank you Boogs !!!

8/12/2004 2:19 AM

that was it. It worked like a charm. I opted to go with the first solution.

Thanks a million!

__
DgrMstr - www.redseven3.com

Keeping Menus Open

8/12/2004 5:16 PM

Hey really really excellent menu script this, I'm using it in biut of a different way than I've seen I'll come back and show y'all when it's published :oD

Anyway I've set up 2nd level submenus no problem, but I want the parent menu (1st level menu) to stay open when the 2nd level menu is open. Every menu just closes itself as soon as another is opened. Pleeeeeeeease how do I stop it doing that? I should mention the menus execute onclick in my version.

Try and explain as if I was very simple, I'm a real novice with javascript but I'm learning a lot from this script.

Thank you in advance for your help, I'm putting a link back to you on my FAQ page :oD

__
SP

Take a look at aveda.com

8/12/2004 5:36 PM

Easiest thing to do is just look at the code in use at aveda.com, since they have already accomplished this.

__
boogs

Disabling .hideMenu for some links

8/13/2004 11:48 AM

Thanks boogs, I've decided to leave my menu as it is rather than the aveda approach, since my menus fold out over each other in the same position. So I have a much simpler question for someone, anyone, if it isn't too cheeky to ask two things.

I am using onclick to show/hide the menus, but I want to disable this function for some links but not others. i.e. you click on link1 and it loads a page but the menu doesnt hide. You click on link2 and it does hide. I can only disable all or none, I'm sure it's possible and I'm just being a dunce.

Hugs and kisses to anyone who can help me out

__
SP

move data?

8/15/2004 12:50 AM

this might be stupid. actually, this is probably stupid... but... what's the best way to move the data for the contents of the drop-downs into an external file? does it ahve to be done with an include or is there a nice platform-independent way to put that stuff in the javascript?

__
Anonymous Coward

re: move data

8/15/2004 8:18 PM

Since the "data" is just plain-old HTML, you're left with all the options you usually have wit HTML -- document.write( ) with javascript (not recommended!), or server-side include files.

I don't know of any better way off hand.

__
boogs

Call function from alternative content

8/16/2004 1:53 PM

+ '<a href="#" >Brochures</a> '

inside this type of link, how can you link

onMouseOver="ypSlideOutMenu.showMenu('menu0')" onMouseOut="ypSlideOutMenu.hideMenu('menu0')"
?

__
Trality

You can ask here

8/18/2004 3:59 AM

You can ask here jsp hosting PROKMU. They can surely can solve this problem

__
DuFunk - http://www.prokmu.com

Preload images

8/18/2004 6:52 AM

Hi, this mu is great!
But the images on preload don't works..

look my example: http://tfh.interfree.it/Home.htm

any suggestion?

__
Shrike - http://tfh.rules.it

All Horizontal Menu

8/18/2004 7:08 AM

I need to build a two level menu that not only lists the top level horizontally, but also the second level.

There needs to be a row of top level items (like ypslideout now) then on mouseover ideally i'd like a row of sub items to slide in from the righthand side just below.

Anyone know if ypslideoutmenus could be adapted to this or know of a similar product that can do this?

Thanks

Ben

__
Ben

Scrollbars

8/18/2004 5:03 PM

If you increase the height too much in this piece of code:
new ypSlideOutMenu("computercases1", "right", 155, yPosition - 108, 160, 600)
It starts to increase the height of the web page and makes scroll bars. How can I fix that?

__
Divine - pcextreme.biz

Re: horizontal, scrollbars

8/19/2004 11:51 AM

horizontal
===================
cool idea...

ypSlideOuts with the aveda multi-level extensions can easily be adapted to this.

The horizontal is no problem at all since ypSlideOuts is totally agnostic as to the content of each menu. The multi-level part has been covered by many on this thread.

scrollbars
===================
It should only be making scrollbars if the top position of the menu + the height of the menu is greater than the height of the document.

This means that there would be scrollbars no matter what since the menu goes off the page.

Perhaps you are making the menu unnecessarily tall? 600 seems a little much.

If you specifically want the menu you to be that tall, but don't want scrollbars, you could always supress them with the following CSS:

<style type="text/css">
body {
    overflow:hidden;
    }
</style>

... but that will supress them even if necessary for the content. I think your best bet is to rethink that 600 for the height.

__
boogs

Travel site using dropdown

8/19/2004 1:19 PM

So I have been using the cool slide under for our new top nav but it drops down too far on every browser on my Mac ... any fixes for this? It looks great on my PC.
any help will be appreciated.
Here is a page:
http://www.gate1travel.com/italy-travel/

Here is the actual file for topnav:
http://www.gate1travel.com/_borders/top_include.htm

__
bjcook - www.gate1travel.com

How do I setup alt tags for menu items?

8/19/2004 6:18 PM

I've developed a site using the menus, however for some reason the menu code appears as alt tag information if the cursor is held over the menu a few seconds. I'm desperate to fix this, can anyone kindly provide some ideas?

The site is at www.itim.com.au

Thanks!

__
Mon

Re: alt tags

8/19/2004 6:47 PM

You need to delete the title part of code. For instance title="onmouseover=ypSlideOutMenu.showMenu('menu1'); onmouseout=ypSlideOutMenu.hideMenu('menu1')" It's easy to work out.

I was just coming back to plug my first site, the first draft is here http://tigershark.unitedhosting.co.uk/~red-tyger.com (www.red-tyger.com in a few days) and show y'all how I used to menu a little differently although I only have it aligned in IE so far.

It keeps throwing up a 'menus is not defined' error and I can't for the life of me work out why? Except for the message it functions as it should.

__
SP - www.red-tyger.com

Javascript Relative positioning not working

8/27/2004 2:25 PM

I'm trying to use the example of javascript positioning to make my menu position itself, but instead of changing position it simply doesn't work anymore when I try to define menu.onactivate.

Is there a part of the HTML that I could add the onactivate attribute to, instead of making it a variable in js and trying to assign it?

__
Pete - www.blizzlink.com

I need someone to help me..

8/27/2004 6:52 PM

I installed the ypSlideOutMenu script, and it works fine, but it's off several pixels in firefox, it works perfect in ie.

I've spent hours trying to figure it out.

I'm willing to pay 10 dollars paypal or if you'd rather have a gmail account, I have an invite left.

email me at everyusernameisgone AT yahoo dot com

thanks,
chris

__
chris

Untitled Jibbering

8/29/2004 5:39 PM

I really can't get it to work: Centering with div's instead of a table.

:(

__
Anonymous Coward

Menu With PHP

9/2/2004 10:53 AM

Hello,

I have added this menu to a php page but all of my submenus are now cropped at exactly the half way point. So if the width is set to 150 pixels the submenu will only show the first 75 px. Each submenu across the board is cropped at 75 px. The left positioning is correct but I only get half the submenu.

TIA,

Monte

__
Monte

In from the Left out to the Right

9/2/2004 11:20 AM

Hello All:

Normal use of the ypSlideOutMenu script has sliders come in from the defined place: top, bottom, left, or right.

What I'm wondering is if there's a way to make a slider come in say from the left and then leave towards the right?

Any thoughts on how I might accomplish this.

__
DgrMstr

Stange problem with css...

9/3/2004 9:20 PM

At first, congrats for this nice js piece. :)

I'm currently merging ypslidemenu in my CMS.
I've added an enhanced admin panel where I can add links, change layout, save configs etc...

PROBLEM IS :
With 1 to 27 submenus, no problem !
From 28 submenus, css is no more used and menu looks bad of course, but the menu works !???

If someone has an idea where I have to search... It makes me crazy.
I can send you html source code if required or install it on my server to show you the problem (only local PC actually, but problem exists on prod server too)

Thanks a lot

__
Lolo Irie - http://etalkers.org

Untitled Jibbering

9/8/2004 2:09 PM

anybody have an example of image buttons being used that stay highlighted when you roll off of them into the menu items?

did that make any sense :D

__
nimmot - baseboard.net

Menu Only Crossing IFRAME in IE

9/9/2004 6:24 PM

I've created a menu based on the CSS example.

Everything works dandy on IE6 but I can't seem to get the menu to go on top of the IFRAME image on any other type of brower (Opera 7 for example).

Could anyone give me any tips? The website can be found below...

__
Graham Orford - cgi.gorford.plus.com/atlas.php

Need a little help

9/10/2004 8:07 AM

Looking to make the navigation menu stay in a specific location. At this time it moves depending on the size and resolution of the browser. I need it to stay right under the G in the word Golf Course within the navigation menu.

I could really use a detailed response. Telling me to use CSS will not help me, unless of course you can tell me what to add and where. Much appreciation. I really need this done asap. So please throw me a solution.

Kind regards,
Gravity

http://www.highpointccgolf.com/index.php

__
Gravity - http://www.highpointccgolf.com/index.php

Free Gmail Account

9/10/2004 8:41 AM

Gravity Here,

If anyone is interested I have a gmail invite to the person that gets this resolved the fastest. If they want it. I just really need to get this fixed. It's bothering me ;)

Kind regards,
Gravity

__
gravity - http://www.highpointccgolf.com/index.php

Need a Little Help

9/10/2004 10:45 AM

Well I could be wrong here, but when I want to move a menu I look for the following line...

new ypSlideOutMenu("menu1", "down", 12, 40, 180, 100),

The number 12 (in this example) is the number of pixels from the left that the drop down menu starts. I think the second is the distance from the top, then it's the width of length of the menu itself.

Apologies if I'm misreading the problem.

__
Graham Orford

Need a Little Help

9/10/2004 11:56 AM

@Graham,

The problem is that using those variables make the drop down be in a certain location based on your browser size and so forth. If you maximize the screen the drop down can be way off the main site area.. and when you downsize it can be under the accomodations instead of under Golf.

I need it to stay under the Golf Nav Option .. always .. no matter what resolution or size of the browser.

Kind regards,
Gravity

__
gravity - http://www.highpointccgolf.com/index.php

Need a Little Help

9/11/2004 5:20 AM

@Gravity,

I'm not sure what you mean about screens being maximised. The top left corner is always the top left corner.

However I do get what you mean about resolutions. I've solved this by creating a different set of divs for each resolution I wanted to support (in my case 640, 800, and 1024 widths). The menus themselves can be shared so no duplication of the meny content is needed.

My menus even resize themselves if you change resolution once the page has been loaded. Check out my demo below.

Hope it helps.

__
Graham Orford - cgi.gorford.plus.com/atlas.php

Untitled Jibbering

9/12/2004 3:25 AM

Did that work for you ? new ypSlideOutMenu("menu1", "down", 12, 40, 180, 100),

__
Mike - http://www.prokmu.com

Great drop down menus

9/12/2004 2:35 PM

I've implemented this successfully now on http://www.mackinawcity.com/ and http://www.loghomes.org/

Thanks a bunch!

__
junjun - http://www.domedia.org/

Delay

9/13/2004 7:38 AM

Based on what I read above, I put this in my body tag:

onload="window.setTimeout('ypSlideOutMenus.showMenu(\'menu2\')', 200)"

The hope was that this would allow somebody to mouseover the menus for a short period without triggering the vertical cascade down of the submenus.

The problem I need to solve is that when a user just travels across the menus with their cursor, without wanting to see the submenus come down, the menus come down. I'd like it if they needed to stay on the menu for a second or two in order to see the submenus and if they don't stay for a second or two, then nothing happens.

Any help would be appreciated. Unfortunately, I'm not that adept at programming, so if you can spell it out like you'd spell it out to your grandfather, that'd be great.

Thanks!!

__
hardworker - www.walkersands.com/lifewatch/web_stage

cross-browser... which?

9/14/2004 1:12 PM

which is ultimately more cross-browser friendly...
transmenus or ypSlideOutMenus???

__
raciere

Need help getting started

9/19/2004 6:41 PM

Hi, guys.

I'm not a coder and don't pretend to be one, but if a script isn't too complex, I can usually do simple customizations. But I'm having trouble with ypSlideOutMenus, namely, where to start. Can't seem to find any instructions with the script. :/

Can someone give me a push in the right direction? If I just want to customize the links and how they display on my page (a horizontal menu), what files do I need to revise? What lines am I looking for?

Thanks for your help.

__
Devon

Context menu

9/23/2004 10:11 PM

How can this menu script be used to create a context (right-click) menu?

__
Scott

No Solution to Delay?

9/28/2004 4:02 PM

I take it there's no solution to the "Delay" post above. More likely, nobody has time to help me on this. Oh well. Frown.

__
hardworker

re:delay

9/28/2004 6:04 PM

try this:

var pending = null;
var timer = null;

function showMenuDelayed(menuName) {
  pending = menuName;
  timer = window.setTimeout("ypSlideOutMenu.showMenu('" + menuName + "')", 200);
}

function hideMenuDelayed(menuName) {
  if (pending == menuName) {
    window.clearTimeout(timer);
  }
  ypSlideOutMenu.hideMenu(menuName);
}

And you would use it like this:

<a href="monkey.html" onmouseover="showMenuDelayed('monkey')" onmouseout="hideMenuDelayed('monkey')">
check out my awesome colection of monkeys!
</a>

__
boogs

image button rollovers stay highlighted?

10/8/2004 1:48 PM

still wondering if anybody has an example of image buttons being used that stay highlighted when you roll off of them into the sub menu items?

any help appreciated :)

__
nimmot - baseboard.net

menu not opening smoothly on certain machines

10/12/2004 7:41 PM

I'm having a problem with the menu not opening smoothly on some machines - it stutters and opens haltingly. This is on an AMD 1.6Ghz / 512Kb RAM machine, whereas on a P4 1.5Ghz / 1Gb RAM and a P4 3Ghz 512Kb RAM machine, its absolutely fine and smooth.

I'm using:

ypSlideOutMenu.aniLen = 500
ypSlideOutMenu.hideDelay = 400

has anybody else experienced this erratic behaviour? Any ideas?

__
Mambo

Is there anything else running on the machine?

10/12/2004 8:24 PM

I doubt it has to do with the machine's specs - rather, that something else is running on it which is consuming CPU at the same time.

Check out the task manager.

__
boogs

Positioning after Postback and Slow Connection

10/13/2004 8:16 AM

I have our menus distributed horizontally across the top of our site. On the first page load the menus display properly. However, after a postback the menus display down the left side of the browser. Between the parent menu bar and the content of the page, there is a large area of blank space with no content/html.

I have also noticed this behavior on ASP pages if the user is on a slow connection.

Has anyone noticed this behavior? What is a workaround for either/both conditions (postback/slow connection)?

Thanks

__
Chuck - www.edgemediadesign.com

Re: Positioning after Postback

10/13/2004 4:21 PM

I figured part of it out. When Smart Navigation is turned on in the web.config or on the page it causes the layout problem. Now I'm off to try and get it to work with smartnavigation.

__
Chuck - www.edgemediadesign.com

problems in IE6 and NS7

10/18/2004 11:57 AM

Does anybody know what could be causing the dropdown in the screenshot to be cutoff in NS7?

http://www.web-g.com/metatechno/css.jpg

It works fine in Safari, Firefox, and IE for Mac, but looks like crap on IE6 for windows.
What am I doing wrong? I suspect that I am using incorrect CSS somewhere. BTW, I am using the relative method for placing the menus.

http://www.web-g.com/metatechno/product2.html

Thanks for the script.

__
Adam

Total Newbie Needs Help

10/19/2004 1:51 PM

My skills are not yet js enabled but i'm trying. I've got a DWMX site I'd like to implement your sliding menus. I'm not sure which steps to take -

-do I copy your code into my page header and save the script file in my site root?
-how do I ad links to the menu items?
-do I download the css file and save it to my site root?

-I just need a little direction on how to proceed -thx in advance for help.

__
nerdie_ninja_girl

Yet Another Newbie

10/20/2004 2:32 PM

I am trying to hook these menu's to dreamweaver rollovers. I can't seem to get them to work, is there any documentation on how to do this?

Thanks

__
Jwebby - http://www.eplanethostng.com/newsite-1

diplay menus in adjacent frame?

10/20/2004 2:35 PM

Will the program allow me to display menus either in the adjacent frame or accross the frame border?

thanks.

mark

__
zenzeus

Star with menu open

10/21/2004 5:55 AM

There are zillions of scripts, but this one is very very good. Congratulations.

I'm traying to implement this script and is working just fine, but i need menu my menu open by default. There is only one menu (menu1)

new ypSlideOutMenu("menu1", "up", 0, 170, 720, 240)

I tried

<BODY onLoad="ypSlideOutMenu("menu1", "up", 0, 170, 720, 240)" </BODY>

but only works if page is refreshed (F5). How can we do this?

Thank you
Isac (Portugal)

__
isac

Igore above post

10/21/2004 6:38 AM

The solution was founded above, but the code is incorrect ;-)

onload="window.setTimeout('ypSlideOutMenus.showMenu(\'menu97\')', 200)"

drop the s letter should be

onload="window.setTimeout('ypSlideOutMenu.showMenu(\'menu97\')', 200)"

Bye

__
isac

IE on mac problems

10/25/2004 5:30 AM

The website I'm working on is nearly finished. Yesterday I checked it out on a Mac with IE.

2 problems :
- the rollout and rollin effects only appear when the cursor leaves the sensitive zone (a td), and nothing happens when it enters it.
- the positionning of the menus (relative) doesn't render acurately, I have no clue why, and it seems to happen at random, since these to urls with the same code appear differently:
http://users.skynet.be/am252629/oa/fr/architectes/index.htm
http://users.skynet.be/am252629/oa/fr/ordre/index.htm

It looks fine on Win IE and Netscape though.
Has anyone encountered or fixed one of these problems ?
Any help greatly appreciated.

__
qdudekem

CSS Relative Positioning & Cross Browser Support

10/26/2004 11:14 PM

Ironically, the solution I posted a while back about positioning, works for absolute positioned layouts, but does not work for relative/auto centered CSS layouts.

Any suggestions out there? I've got it to work on IE WIN & Safari, but not in Mozilla or Firefox.

Basically, I need to use some Javascript to detect the browser and feed it different menu coordinates.. unless there's an issue with my css or something?

Example: www.wbsnowboardtraining.com/menuf.html

__
vibe9 - www.wbsnowboardtraining.com/menuf.html

Cross Browser Support - Answer

10/27/2004 12:13 AM

Try setting all your margins to zero using both CSS, and also the old fashioned way: in the body tag.

This should solve your absolute positioning problem.

__
DgrMstr - www.RedSeven3.com

Had to change array statement and not sure why

10/27/2004 12:45 AM

I don't see anyone else complaining about errors, but I was getting hidden javascript errors on IE, from people who had configured their browser to alert them of errors on pages.

I seldom do anything in Javascript, but did find a reference to a change in the way arrays were handled, and hacked the menu statement to the following. Seems to work ok, but I am confused why I had to do it. Also, when the menu item has not sub items it would be nice to to have a left over box showing, and not sure how to do this.

Here is what I changed it to:

******************************

var menus = new Array(7)

menus[1] = new ypSlideOutMenu("menu1", "right", 140, 140, 180, 200)
menus[2] = new ypSlideOutMenu("menu2", "right", 140, 152, 180, 250)
menus[3] = new ypSlideOutMenu("menu3", "right", 140, 174, 180, 200)
menus[4] = new ypSlideOutMenu("menu4", "right", 140, 191, 180, 200)
menus[5] = new ypSlideOutMenu("menu5", "right", 140, 208, 180, 200)
menus[6] = new ypSlideOutMenu("menu6", "right", 140, 225, 180, 200)

for (var i = 1; i < menus.length; i++) {
menus[i].onactivate = new Function("document.getElementById('act" + i + "').className='active';");
menus[i].ondeactivate = new Function("document.getElementById('act" + i + "').className='';");
}

__
Soul Orb - http://www.linuxhackers.ca/

RE: Cross Browser Support (answer)

10/27/2004 9:00 AM

No success - FireFox still won't auto centre the menu. Any other suggestions? Or am I missing something?

__
vibe9 - www.wbsnowboardtraining.com/menuf.html

Hiding form selects

10/27/2004 9:39 AM

here are acouple of functions that will hide the form selects when you pass over an anctive yp menu, just remember to call the functions onMouseOver and onMouseOut

function show() {
var selNodes = document.getElementsByTagName('select')
var i=0;
if (!selNodes.item(0)) {
return false;
} else {
do{selNodes.item(i).style.visibility = 'hidden';}
while(++i < selNodes.length);
}
}
function hide() {
var selNodes = document.getElementsByTagName('select')
var i=0;
if (!selNodes.item(0))
{
return false;
}
else
{
do{selNodes.item(i).style.visibility = 'visible';}
while(++i < selNodes.length);
}
}

__
ash - www.etchell.co.uk

RE: RE: Cross Browser Support (answer)

10/27/2004 1:22 PM

Huh, that's odd. Well I do have one other suggestion that certainly worked for me - even on FireFox; however, it requires a server-side language (PHP, Cold Fusion, etc...), and a javascript browser detection script. I'll email it to you if you want.

:mal

__
DgrMstr - www.RedSeven3.com

Adding borders issue

11/2/2004 2:58 PM

I am trying to add a border to the drop down menu. I am only getting a top and left border when using a strict DTD such as...

[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">[/code]

If I add the border to the ypSlideOutMenusC.js file, I end up with duplicate borders along the top and left, even when specifying to borders in the page's CSS.

__
Connie

Strange problem with IE6

11/8/2004 11:40 PM

Iâ€™m having a few problems with IE6 and the youngpup menu,
at the moment the menu sits perfectly in the right spot in Mozilla Firebird 0.6.1, Firefox 1.0 and Netscape 7.1 (all on pc, at the moment I donâ€™t have a mac to test on) but soon as IE gets its hands on it, the placement goes out the window and this is by at least 100px or so.

The sites address is http://www.avlifts.com.au/cart/

I hope thereâ€™s a quick answer to this one as its been driving me mad.

Thanks,

__
Dave

Positioning problem (again ...)

11/9/2004 6:41 AM

I see a lot of people has had problems with the menu positioning. So do I!
We are using a CMS (Jahia) that has include the slide out menus so I'm not completely mastering the code yet.
In IE/win the menus show up a little bit to far down and to far left.
In Moz/win all the menus show up in the same spot.
I've tried to use CSS to position my elements and some of them just floats, no position: relative or anything. Could this be a problem?
The site is at
http://192.68.102.165/jahia

Thanks

__
Kassen

Answers to positioning problems

11/9/2004 2:40 PM

This problem has to do with margins on the body and/or html elements. Make sure that you set them explicitly.

Like:

body, html {
    margin:0;
}

Dave, I took at look at your site and I have to admit I don't see what could be causing it right off. It seems like either the width of the window is getting calculated incorrectly in IE, or the menu's positions are being influenced by their container.

The container theory could only be true if the container was absolutely positioned, and I don't see that.

I've never seen the window width getting calculated wrong, but I guess it could be caused by the doctype switch you are using (you are using IE6 strict mode there, right?). Try changing the line which calculates the width for IE to use document.documentElement.offsetWidth instead of document.body.offsetWidth.

That's the only thing I can think of, sorry. Please post when you figure it out.

__
boogs

not working in IE...

11/10/2004 5:56 PM

Hey guys. I'm currently doing a site here: http://morrisons.juicecreative.com.au/

I can get the menus to work fine in Firefox, but not in Internet Explorer. Could you please have a look and tell me what I'm doing wrong?

__
Torm3nt - http://morrisons.juicecreative.com.au

ypslideoutmenus Mozilla/Firefox problem

11/15/2004 4:32 PM

Friends of mine, who have Mozilla/Firefox as their browser can't see the menubar. Now is my question, what can I do about it?

__
Laiky - www.bananarama.nl

menu retracting issue ...

11/15/2004 5:40 PM

Hi there ...

I have had no problems with the menus in firefox ... however, they do not retract slowly like they do in MSIE ... in FireFox ... as soon as you mouseOut, the drop-menu dissappears.

any ideas?

__
Gordon

Doin' it right?

11/16/2004 9:14 AM

Hi all!
Sorry if u feel this is off topic. Just want to make sure I'm doing this right cause I don't quite get it to work.
My page is like this (simplified):

<body> <div id="bulk"> <div id="leftSide"> <div id="logo"> </div> </div><!--leftSide-->
    <div id="rightSide"> <div id="header"> <div id="menus">
                <div class="quicklinkmenu"></div>
                <div id="mainmenu">
                    <div class="mainmenurel">
                        <div id="menu1"  class="topmenublue" style="position:relative;"><a href="/jahia/Jahia/cache/off/pid/3" onmouseover="ypSlideOutMenu.showMenu('menu1');" onmouseout="ypSlideOutMenu.hideMenu('menu1');" title="Om oss">Om oss</a></div>
                    </div>
                    <div class="mainmenurel">
                        <div id="menu2"  class="topmenublue" style="position:relative;"><a href="/jahia/Jahia/cache/off/pid/5" onmouseover="ypSlideOutMenu.showMenu('menu2');" onmouseout="ypSlideOutMenu.hideMenu('menu2');" title="Djurskyddsarbete">Djurskyddsarbete</a></div>
                    </div>
                </div>
                    <script language="javascript" type="text/JavaScript"><!--new ypSlideOutMenu("menu1", "down", getX('menu1'), getY('menu1'), 120, 200);
                new ypSlideOutMenu("menu2", "down", getX('menu2'), getY('menu2'), 132, 100);--></script>
                    <div id="menu1Container"><div id="menu1Content" class="menublue">
                            <div class="optionsblue">
                                <a href="/jahia/Jahia/cache/off/pid/55">Kontakta oss</a>
                                <a href="/jahia/Jahia/cache/off/pid/41">Organisation</a>
                            </div>
                        </div>  </div>
                <div id="menu2Container">                        <div id="menu2Content" class="menublue">
                            <div class="optionsblue">
                                <a href="/jahia/Jahia/cache/off/pid/46">Vem g&ouml;r vad</a>
                                <a href="/jahia/Jahia/cache/off/pid/47">Tillsynsstatistik</a>
                            </div>
                        </div>  </div>
            </div>
...

Does this seem to be right?
The CSS is

body, html {margin: 0px;padding: 0px;background-color: <%=backcolor1%>;}
#header{position: relative;    top: 5px;    z-index: 5;    margin: 0 0 0 -20px;    }
#bulk {    white-space: no-wrap;    position: relative;}
#menus {    position: relative;    z-index: 5;    margin: 0;padding: 1px 0 2px 0;    }
/*IE/Win fixes \*/
* html #menus {height: 1%;}
/*End hide from IE/mac*/
#leftSide {    position: relative;    display: inline;    float:left;    width: 171px;    margin: 0px;}
#rightSide{    position: relative;    width: auto;    margin: 0 0 0 171px;}
/*IE/Win fixes, hide from IE/mac\*/
* html #rightSide {    position: absolute;    margin-left: 0;    left: 0px;    top: 0;    z-index: 0;}
/*Hide over*/
.quicklinkmenu {    position: relative;    height: 34px;    vertical-align: middle;    padding: 0px 0px 0px 11px;    left: 0px;    top: 0px;}
/*IE/Win fixes, hide from IE/mac\*/
* html .quicklinkmenu {    height: 1%;}
/*Hide over*/
    .topmenublue {position: relative;    }
    .topmenublue a { display: inline;float: left;        height: 21px;        padding: 5px 9px 0px 7px;        white-space: nowrap;        text-align: center;        vertical-align: middle;    }
#mainmenu {    position: relative;    height: 26px;    vertical-align: middle;    padding: 0px 10px 0px 0px;    left: 0px;    top: 1px;}
/*IE/Win fixes \*/
* html #mainmenu {    padding-left: 21px;}
/*End hide from IE/mac*/
.mainmenurel {     position: relative;}

So the only thing that differs between IE (where it works) and Mozilla is the "#rightSide" block. Absolute <-> relative positioning.

Thanks for any help.

Regards,
Christian

P.S. Sorry for the long post. D.S.

__
Kassen

bgcolor

11/17/2004 11:20 AM

Where do you set the color of the menus in this? I'm not very good with javascript.

__
doro

Help!

11/18/2004 6:16 PM

I designed a nice little bar from the CSS Centered example. And, while alone, it looks quite seksi, but when I add it to my page, it becomes b0rked. =( Would anyone be willing to check out what's going on and tell me what to change? I would be quite thankful. =D

__
Neko~ - http://kittyanarchy.net/

Service Pack 2

11/19/2004 6:47 AM

aaron I have had issues with this and the samples downloaded.. I.E. is buggin me at the minute with the downloaded samples about Active X..blah blah

__
Paul Anthony - http://www.netramedia.com

keep button on till mouseout of menu

11/19/2004 3:12 PM

www.ankerdd.com/cda
I hacked Dreamweavers mouseover function to change my buttons (swap image) and trigger the menu slideouts. However, the buttons restore to their original state on mouseout of the button. I would like them to stay on until mouseout of the menu or until mouseover on a different button. Any help on how to achieve this would be appreciated.

__
rekna - http://www.ankerdd.com

Mac IE issue

11/23/2004 9:04 AM

I tried everything I could but the menu doesn't seem to work properly on Mac IE.
The cell launching the menu doesn't react as it should.

Here's the site : http://www.ordredesarchitectes.be/fr/architectes/index.htm

Am I missing anything ?
Can anyone help ?

Thx

__
qdudekem

ypSlideOutMenusC - how to center or relatively position vertically?

11/24/2004 6:00 AM

Wow, ypSlideOutMenusC script is way cool!

What interests me is how I can make it do the same thing with the window height as with the width (calculate center of the window etc)?

Example: my web page is quite simple - it contains one big single-cell table ( <width="100%" height="100%"> <td align="center" valign="middle"> ...).
The main menu with ypSlideOutMenusC script is actually a smaller table within the big one, centered horizontally and vertically for every window size.
Anyway, my slide out menus are placed correctly horizontally but not vertically.

Is there a way of solving this problem?
I'm not a programmer and I would really appreciate any piece of advice (not to mention code). :)

Thanks and keep up the good work!

__
toros

Flash & ypSlideOutMenus....

11/26/2004 4:43 PM

Okay, first a big thank to youngpup... great work on your scripts.

My problem was already discussed in an earlier comment, but it didn't resolve it. It work on my windows machine fine, but fails terribly on my Linux system (both...firefox and mozilla) - It still displays flash over the menu layers and i tried now a lot. However, I found a site, which is:
http://www.cityofpetal.com/jax/index.htm

There the DHTML render fine over the flash thingy....but how?

The site i am working on is: http://heimatspiel.hochlager.ch

Anyone knows anything about this issue? Is there a "ypSlideOutMenus" site with flash (and which renders over flash?)

__
Rocketeer - http://www.hochlager.ch

DHTML displayed over Flash

11/26/2004 6:25 PM

Rocketeer,

You need you add this param to your flash object definition:

<param name="wmode" value="transparent">

and this code to your <embed> tag: wmode="transparent" style="z-index: 0;"

That shoud solve your problem.

__
DaggerMaster - www.RedSeven3.com

IE Using Different Location Than Other Browsers

11/28/2004 10:46 PM

simply put ... leftMargin=0 topMargin=0 ... in the body tag...

this will align IE tight to the margins... I know this is not compatible with Nav, but it is not an issue as Nav will simply over look it...

that should bring IE in to alignment with all other browsers...

__
Lawcom

Remove CSS from the index to a seperate CSS file?

11/29/2004 12:20 AM

SO far I am liking this, but I don't want to clutter my index with the CSS, and would like to place the CSS in a seperate file called "ypSlideOutMenusC.css". I am using the CSS version of this mentioned here: http://www.youngpup.net/2001/ypslideoutmenus/project?folder=css

Thanks for the help on this!

-AdamStac

__
AdamStac - www.adamstac.com

DocTypes

11/29/2004 12:22 AM

Just noticed that my menu works perfectly cross browser no problems, except the site it is meant for are currently using PHP and doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">

the menus only seem to work with

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

it goes completely haywire in Netscape with the first doctype..

any advice or help or ideas ?

__
Lawcom

IE6 requesting bagground image from server.

12/8/2004 9:04 AM

I had some problems making a navigation system based on son of a suckerfish and the youngpup slideoutmenu.

First problem was that EI insisted on rendering the test from the slideoutmenu transparently on top of the suckerfish menu - making the text unreadable.

To work around this i had to set the EI only css property:
overflow-x:hidden; in the suckerfish menu.

This worked great in IE5 - but no-go in IE6 - until i deleted the doctype - voila - sucess!

I found another thing. Every time the menu displayed, EI6 (not EI5) requested the slideout-menuÂ´s bagground image (set as a css property) from the server. I had to remove the bagground image from the menu - sigh.

WHATS UP WITH IE6 - IM BLODDY SICK OF IT!

You can view the result of my efforts here

__
Miller K

I'm sick of browsers too

12/8/2004 12:15 PM

:) I agree. The browser differences and incompatabilities eat up a tremendous amount of my time. Ugh!!! What's a developer to do? Maybe we should all just switch over to flash. At least we know our sites will look the same no matter what browser is being used. All in favor say, "aye".

Note to: Microsoft, Netscape, Mozilla, Firefox, et al.

Get off your butts and agree on browser logic that displays and behaves the same no matter what. We're sick to death of your nit-picking and squabbling.

__
DaggerMaster - www.RedSeven3.com

YPSlideout f*ing up the page in IE

12/13/2004 7:41 PM

Hello:

I'm having a problem with the div tags that contain the slide out menu pushing the DIV tags below it down the page in IE. Also for some reason when I link to the JS for the menu, it chops half the page off (again in IE only). The drop down is under the thing on the top right called "shortcuts".

Here is the URL:

http://ninemilestudio.com/drkibblewhite/

...and the CSS:

#shortcuts {
width: 138px;
font-size: 10px;
float: right;
margin-top:10px;
margin-right:10px;
}

.menu {
background-color:#CCCCCC;
}

.dropDown a:link, .dropDown a:visited, .dropDown a:active {
display: block;
width: 132px;
line-height: 20px;
text-decoration: none;
padding-left: 6px;
border-bottom: 1px solid #AAAAAA;
}

.dropDown a:hover {
background: #A6B7A4;
color: #FFFFFF;
text-decoration: none;
}

Your help is greatly appreciated.

Thank you.

__
Stephen - www.ninemilestudio.com

Page chopped in half in IE

12/13/2004 11:31 PM

OK I figured out one of my problems, but one remains. For some reason when I insert the js for the menu, IE will only display half the page in the browser. Really weird.

Has anyone seen this before? Not sure it's the js, some new IE setting....

Thanks.

__
Stephen - ww.ninemilestudio.com

firefox 1.0 extra pixel goodness

12/14/2004 6:28 PM

seems a few of us are going cross eyed over this. i'm assuming bad style sheeting is to blame, but what part? if anyone has found the reason firefox appends a few extra pixels to menus, please please please post how you have fixed it. please. thank you.

__
matt510 - http://www.v921.net

Saving Bandwidth

12/24/2004 1:00 PM

I'm on a bandwidth saving crusade at the moment and I have a couple of questions.

1) Am I right in thinking that as long as a .css or .js hasn't changed the cached version will be used on the client side, preventing the need for a duplicate download?

2) If the above it true, is there a way of placing my menu in a seperate file to the dynamic content of the html? If my menu div's aren't changing I was wondering if there was a way of seperating them from the rest of the page and saving users a load of duplicated bandwidth.

I know we are only talking about a few Kb but it a really builds up quick and a 10% saving on bandwidth means 10% more concurrent users.

Thanks in advance (and Merry Xmas)

Graham

__
Graham Orford

Re: bandwidth

12/24/2004 1:26 PM

Typically, your point about the cacheing is correct, though this depends on an incredibly varied number of factors including client, proxy, and server configuration. Usually, yes, the client will use the cached version of the js and css unless they have changed. Some popular browsers even cache them longer and you have to "force" reload them, hence designers constantly says "clear cache to see recent changes".

As far as splitting out the menu HTML it would be pretty difficult. The only real way you could manage it is to put it into a separate javascript file and document.write( ) it into the page, eg:

document.writeln('<div id="myContainer><div id='myContent'>...');

Though you'd really need to measure whether this is better or worse for your clients. I know for instance, at Google, that we usually try to do at most one external file per page, sometimes none, even if that means duplicating some code in the original page.

The reason why is that even when a page is cached, a conformant browser must ask the server if it has changed. The conversation goes something like this (for each linked file):

Browser: I have ypSlideOutMenusC.js, dated 4/1/2001. Do you have a newer one?
Server: nope. use the one you have.
Browser: I have createMenuContent.js, dated 12/23/2004. Do you have a newer one?
Server: ah, yes, here it is. Please use this one.

... and so on ...

The cost of that call asking if there is a newer version is often much more expensive on typical users' computers than the cost of just sending whatever the contents were with the original request. This is compounded by the fact that for javascript files, the browser must pause rendering and wait for the response to be returned (because the script might document.write() into the output).

So basically, the only way to know is to measure it. But for something as small as 2 or 3 k of menu html my guess is that it would not be worth the extra roundtrip.

Hope this helps!

__
boogs

Re: bandwidth (2)

12/24/2004 3:35 PM

I just realized that you were asking specifically about bandwidth, not speed.

If you put the menu code into a javascript file as I mentioned above, you probably *will* save bandwidth, even if it's slower for the user. It depends on what your priorities are, I suppose.

anyway. Merry christmas :)

__
boogs

Great menu

12/29/2004 10:49 AM

Only one out of 8 headlines has submenus.
What part of the code can i get rid of without messing up the rest?
Example of code i dont want:
<div id="menu4Container">
<div id="menu4Content" class="menu">

</div>
</div>

<div id="menu5Container">
<div id="menu5Content" class="menu">

</div>
</div>

__
Ipanema - www.ipanema.nu

Problems! alksdjjd!!!11one

1/5/2005 2:37 PM

Boogs! Killer script man I love it. You're truly a DHTML fiend.

I have run into some problems as of late. It completely quit working for my IE6.

http://www.proheatinc.com/products/heaters/band/starflexdivs.html

Notice the menuness in Firefox. Everything appears to be in place, any ideas?

__
Sparky - http://www.proheatinc.com/products/heaters/band/starflexdivs.html

javascript error

1/18/2005 2:29 PM

I'm using the slide out menus and they are great. I'm having a problem of the postioning javascript file generating a javascript error in a browser. The particular line of code is this:
for (var i = 0; i < menus.length; i++) {

The error says menus is undefined. Anybody know how I can fix this? I'm not a programmer so I don't have any idea where to start. The entire postioning file is as follows:
new ypSlideOutMenu("menu1", "down", 404, 124, 200, 105),
new ypSlideOutMenu("menu2", "down", 466, 124, 200, 115),
new ypSlideOutMenu("menu3", "down", 539, 124, 200, 115),
new ypSlideOutMenu("menu4", "down", 609, 124, 200, 115),
new ypSlideOutMenu("menu5", "down", 709, 124, 200, 115)

for (var i = 0; i < menus.length; i++) {
menus[i].onactivate = new Function("document.getElementById('act" + i + "').className='active';");
menus[i].ondeactivate = new Function("document.getElementById('act" + i + "').className='';");
}

ypSlideOutMenu.writeCSS();

thanks
mark

__
Mark

ypSlideOutMenus - Archived Comments (Feb 2004 - Jan 2005)