Javascript menu has issues in firefox + cmsms

[dirtywhitellama]

The floating javascript menu on the left side on this site,  http://www.hisbodylife.com/index.php  looks great in IE.  It looks great in firefox - on a regular html page.  But when I included it in my template it gets an extra line at the bottom which becomes just a black box.  Its not a big deal but its unsightly   IE continues to display it fine, though.  I don't have any other browsers available to test.

The files responsible for controlling my script are here:

http://hisbodylife.com/ssm.js
http://hisbodylife.com/ssmItems.js

Thanks for any help you can give.

[tsw]

Sorry to say but you cant really expect clean results from browsers without clean html...

http://validator.w3.org/check?verbose=1 ... Findex.php

[Russ]

Isn't the background colour of the menu set In the javascript?
In http://hisbodylife.com/ssmItems.js
e,g, menuBGColor="#000000";

Try changing the colour to something else to see if that it is. Also check to see if the javascript sets a DIV around the menu (usual) - might be worth setting this to 'padding: 0;' and 'margin: 0;'
I think it sets DIV ID="basessm", but I could be wrong - I've got to dash out!

BUT before you go changing CSS - get your page to vaildate first. Trying to get CSS to work on a page that won't validate is like trying to find a needle in a haystack It could well drive you mad.

On a personal note, I don't really think these sorts of slide out menus are very acessible or indeed much fun to use. Especially as you seem to be duplicating the menu at the bottom of the page? There are perhaps better ways to do this - just my opinion though.

Hope this helps,
Russ

[dirtywhitellama]

only at the base of the home page, because I am concerned that not all of my users will have javascript. The slide out menu appears on all pages.

The black is the background color.  When the color didn't have the # sign it wouldn't display the background in CMS pages at all (there would be a transparent border showing the page behind.)


Didn't even think about validating, I'm afraid I've never done it before, just checked with my users to see if things were working.  Course this is the first webpage I've even worked on that's any bigger than a personal site with a handful of pictures and stuff on it.  I'll get on that and see if it helps anything.

[dirtywhitellama]

Alright, my home page is now validated, and every template that I am using on the entire site should be validated, although for various reasons not every content block or even right now most of my content blocks are 100% validated.  (I would guess that very few have anything wrong with them besides instead of )

The menu remains unchanged.

Any tips now?

[Dr.CSS]

didn't take this out of smItems.js yet?
menuBGColor="#000000";
do you think it might help?

  mark

[dirtywhitellama]

if I comment out the menuBG line completely, it breaks everything and when I load a page I get only the page background color with no text or anything. Guess because the javascript is looking for the menuBG and it isn't there.

When I blank out the value for menuBG, I get an invisible border(see attached).  I haven't decided if I like the invisible background or the extra space at the bottom better, but neither is what I really want.

I guess it probably has something to do with the browser specific coding but what I don't understand is why it would work properly normally but not in the CMS.


[attachment deleted by admin]

[Dr.CSS]

you could give it the color of the menu #32328D, and that would be the color of the borders on the links, but the bar at the bottom will be that color, it will give you a 3 sided border look.

do you have any idea what this 1 is, if you take it out what happens
ssmItems[6]=["Search", "../search.html", "", 1, "no"] //create two column row
ssmItems[7]=["Sitemap", "../index.php?page=sitemap", "",1]

the thing about IE is that it will guess at what you want, some times it does a good job, but it sucks too!

  mark

[dirtywhitellama]

Yeah but IE is the one getting it right! :/ 

That 1, I dont remember exactly, it had to do with creating the 2 links on one line. Taking that out and making those two seperate lines didn't fix it (I tried that before).

I could look for a script that would just write a window and style it manually, I guess.  That might be a better plan.

edit: I tried the background color change you suggested.  I liked it even less than my other two options

[Russ]

I think I would be heading back to using a normal accessible menu When that doesn't need javascript?

Russ

[Dr.CSS]

Did you try doing it the way it looks in the pic. on your last post then add borders around the links?

  mark

[dirtywhitellama]

If I knew where to find the code to add borders around the links, perhaps that would work better.

[Dr.CSS]

the  http://hisbodylife.com/ssmItems.js has this,,

/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=70; // no quotes!!
XOffset=0;
staticYOffset=60; // no quotes!!
slideSpeed=10 // no quotes!!
waitTime=300; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="#000000";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=150; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="3";
hdrFontColor="#FFFCF7";
hdrBGColor="#2B2B89";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="25";
linkFontFamily="Verdana";
linkFontSize="3";
linkBorder="1px solid #000"; try adding this to see if it works, you will have to take out the menuBGColor="#000000"; or make the border 3px to make it show up.
linkBGColor="#131370";
linkOverBGColor="#5959C6";
linkTarget="_top";
linkAlign="Left";
barBGColor="#32328D";
barFontFamily="Verdana";
barFontSize="4";
barFontColor="white";
barVAlign="top";
barWidth=30; // no quotes!!
barText=" Menu"; // tag supported. Put exact html for an image to show.

///////////////////////////

                                      mark

[dirtywhitellama]

The problem is if ssm.js isn't looking for that in ssmItems.js  it won't do anything. I puttered around with it for a while at one point trying to give it abackground image instead of a background color and I managed (kind of) but couldn't get it to do the things I wanted it to with the background img.

I think my options for a sliding left menu are :

1) disassemble the entire ssm.js and see if I can make it work
2) put up with an inferior appearance
3) find a new one that I can style more manually

and I think I may just have to make a decision there.

[Dr.CSS]

did you try it just fun to see if it worked?
the only problem with using that menu that i can see, other than your style problem, is you have to manualy add pages to your 'array' in the script whenever you add pages, not on the 'fly' like the rest of the menus offered by CMSMS,, i might pick that menu up and use it in a template to see if i can change that,,

    mark