Clash with Omni Menus and slideshow

**Bernie Kruger** · 11-23-2009, 06:50 PM

1) Script Title:

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lide/index.htm

3) Describe problem: slashdot menu, photo gallery, omni menu

I am using the slideshow and decided to use the top menu (the one where you have one left, top and right) and used the top option. With the std settings, the menu partially disappears behind the slideshow as if it is a layer?

With the std settings of 45% for positioning, I reduced to 35% and this fixed it for my monitor. My son has a wide screen and this then truncates the left half of the top menu.

Apart from this glitch, both js scripts work marvelously (damn technology advances

)

While we are at it, is there a way of detecting a user monitor "size" and building that into the script?

here is the page where I have both scripts running
http://www/lbk.co.za/const/renovate/flooring

I am also using frames with the slashdot menu in the left frame so maybe navigate to the page www.lbk.co.za/const/index.htm to see the full effect, just select flooring from anywhere it appears.

Oh and BTW, on the top menu, where does one adjust the char spacing of the menu title, the default looks yukky and prefer std spacing.

Rgds

Bernie

**jscheuer1** · 11-23-2009, 08:35 PM

You need a valid URL DOCTYPE as the very first thing on the Flooring.htm page, like:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

or (not generally recommended but perhaps better for your current markup):

HTML Code:

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

This should prevent the truncation of the top menu. As for it being covered by the slide show, add this to your stylesheet:

Code:

#menu2, #menu2 * {
 position: relative;
 z-index: 10000!important;
}

**Bernie Kruger** · 11-24-2009, 02:15 AM

TY John, that fixed the problem.

4 questions.

1. Where can I read up about the valid doc types and what it actually does. I am not a coder but have enough savvy to understand most code from my DOS daze and Turbo Basic (that old yeah) and design my own web pages for the business.

2. The text in the top menu tab appears to be double spaced, I have tried manipulating various settings but it stays "stretched"

3. How does one get the outside border to grey and no internal borders and where does one set the background color for the menu section, say light grey instead of white, currently I have the border as white to hide the internal borders

Code:

user_defined_stylesheet:false, //if true, prevents script from generating stylesheet for this menu
user_defined_markup:false, //if true, prevents script from generating markup for this menu
design_mode:false,  //if true, generates a report of the script generated/intended styles and 
                    //markup (as a design aid)
menutop:160,     // initial top offset - except for top menu, where it is meaningless
menuleft:'45%',    // initial left offset - only for top menu, as pixels (can be a quoted percentage - ex: '50%')
keepinview:80,   // Use false (for not static) - OR - true or numeric top offset when page scrolls
menuspeed:20,    // Speed of menu sliding smaller is faster (interval of milliseconds)
menupause:500,   // How long menu stays out when mouse leaves it (in milliseconds)
d_colspan:1,     // Available columns in menu body as integer
allowtransparent:false, // true to allow page to show through menu if other bg's are transparent 
                       //or border has gaps
barwidth:25,     // bar (the vertical cell) width
wrapbar:false,    // extend and wrap bar below menu for a more solid look (default false) - will revert to false for top menu
hdingwidth:180,  // heading - non linked horizontal cells width
hdingheight:25,  // heading - non linked horizontal cells height
hdingindent:0,   // heading - non linked horizontal cells 
                 //text-indent represents ex units (@8 pixels decimals allowed)
linkheight:20,   // linked horizontal cells height
linktopad:3,     // linked horizontal cells top padding
borderwidth:0,   // inner border-width used for this menu
/////////////////////////// quote these properties: /////////////////////
bordercolor:'white', // inner border color
borderstyle:'solid',  // inner border style (solid, dashed, inset, etc.)
outbrdwidth:'0ex 0ex 0ex 0ex', // outer border-width used for this menu (top right bottom left)
outbrdcolor:'#808080',  // outer border color
outbrdstyle:'solid',     // outer border style (solid, dashed, inset, etc.)
barcolor:'white',        // bar (the vertical cell) text color
barbgcolor:'#c00000',   // bar (the vertical cell) background color
barfontweight:'12pt,',    // bar (the vertical cell) font weight
baralign:'center',       // bar (the vertical cell) right left or center text alignment
menufont:'Arial',      // menu font
fontsize:'90%',          // express as percentage with the % sign
hdingcolor:'white',      // heading - non linked horizontal cells text color
hdingbgcolor:'#0000c0',  // heading - non linked horizontal cells background color
hdingfontweight:'12pt',  // heading - non linked horizontal cells font weight
hdingvalign:'middle',    // heading - non linked horizontal cells vertical align (top, middle or center)
hdingtxtalign:'center',    // heading - non linked horizontal cells right left or center text alignment
linktxtalign:'left',     // linked horizontal cells right left or center text alignment
linktarget:'',           // default link target, leave blank for same window (other choices: _new, _top, or a window or frame name)
kviewtype:'fixed',       // Type of keepinview - 'fixed' utilizes fixed positioning where available, 
                         //'absolute' fluidly follows page scroll
menupos:'top',         // set side that menu slides in from (right or left or top)
bartext:'Menu:More Floors',       // bar text (the vertical cell) use text or img tag

4. Please give the syntax for the img tag. This may resolve Q2 above for me if I can declare a button image with the text spaced as I want it and I can lose the Menu text.

Code:

bartext:'Menu:More Floors',       // bar text (the vertical cell) use text or img tag

**jscheuer1** · 11-24-2009, 03:24 AM

Originally Posted by Bernie Kruger

1. Where can I read up about the valid doc types and what it actually does. I am not a coder but have enough savvy to understand most code from my DOS daze and Turbo Basic (that old yeah) and design my own web pages for the business.

That's actually a bit complex, here is an OK (nowhere near perfect) start:

http://www.w3schools.com/tags/tag_DOCTYPE.asp

But basically, you should use (in most cases):

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Though the transitional DOCTYPE I gave in my last post is acceptable until you learn to use more standard markup.

The DOCTYPE is a signal to browsers as to what sort of rendering to give your page, and to the server (partially, there are other factors here) as to what type of content to serve the page as.

As far as browsers go, it helps to an extent to standardize the type of rendering your page will receive in various browsers, and forces at least a few assumptions about how to render the page.

Originally Posted by Bernie Kruger

2. The text in the top menu tab appears to be double spaced, I have tried manipulating various settings but it stays "stretched"

Put this in your stylesheet:

Code:

#menu2bar {
 letter-spacing: -0.1em;
}

Originally Posted by Bernie Kruger

3. How does one get the outside border to grey and no internal borders and where does one set the background color for the menu section, say light grey instead of white, currently I have the border as white to hide the internal borders

Grey is not a valid color name in some browsers, gray is supported by all browsers. I'd try setting these values as shown (in menuItems.js):

Code:

outbrdwidth:'0 1px 1px 1px', // outer border-width used for this menu (top right bottom left)
outbrdcolor:'gray',  // outer border color

Originally Posted by Bernie Kruger

4. Please give the syntax for the img tag. This may resolve Q2 above for me if I can declare a button image with the text spaced as I want it and I can lose the Menu text.

Code:

bartext:'<img src="myImageName.gif" alt="">',       // bar text (the vertical cell) use text or img tag

**Bernie Kruger** · 11-24-2009, 05:40 AM

Thanx John

All fixed and working like I want it to.

Rgds

Bernie

**Bernie Kruger** · 11-25-2009, 09:20 AM

On this top menu, it really is great BUT...

Is there a way to place an 'IF' statement in a script of the loaded page to modify the url for that page in the menu so that when the user clicks the link to the page he is already on, you have a Javascript:void; to prevent reloading the page? or alternatively, simply hide that selection for that page, whatever is easier

Thanx in advance

**jscheuer1** · 11-25-2009, 11:28 AM

As long as your link to the page itself uses a relative path, which I believe it does, and the page is not an index page reached via its directory name alone, this script will prevent the link from firing:

Code:

<script type="text/javascript">
(function(){
	function noself(){
		var lp = new RegExp(location.pathname);
		for(var i = 0; i < document.links.length; ++i)
			if(lp.test(document.links[i].href)){
				document.links[i].onclick = function(){
					return false;
				};
			}
		};
	if (window.addEventListener)
		window.addEventListener('load', noself, false);
	else if (window.attachEvent)
		window.attachEvent('onload', noself);
})();
</script>

**Bernie Kruger** · 11-25-2009, 12:14 PM

Originally Posted by jscheuer1

As long as your link to the page itself uses a relative path, which I believe it does, and the page is not an index page reached via its directory name alone, this script will prevent the link from firing:

--snip--

Brilliant as expected, works like a dream. Only allows one to call the same page once as I am navigating to it from a slidemenu in a left frame, thereafter the top menu does the cycling of pages; that I can live with.

Bernie

**jscheuer1** · 11-25-2009, 04:33 PM

Here's something else you might try, replace (in menuItems.js):

Code:

menuItems:[
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
//["Hot Sites"], //create header

["Traviata Kelida AC3", "../renovate/flooring.htm", "_self"],
["Traviata Supreme AC4", "../renovate/AC4.htm", "_self"],
["Traviata Prestige AC5", "../renovate/AC5.htm", "_self"],
["Allure Waterproof", "../renovate/Allure.htm", "_self"],
["Traviata Home Page", "http://www.traviata.co.za", "_blank"],
["Navigate"],
["Back to Renovate", "../renovate/renovate.htm", "_self"]
//["Search", "", "", 2, "no"], //create two column header w/ 2 and 1 column members, requires d_colspan:3
//["Search", "", "", 1],
//["Google", "http://www.google.com/", "_new", 1, "no"], //create three column row, requires d_colspan:3
//["Yahoo", "http://www.yahoo.com/", "_new", 1, "no"],
//["AltaVista", "http://www.altavista.com/", "_new", 1],

//["Personal", "", ""], //create header
//["Ansi Art Gallery", "http://home.comcast.net/~ansiguy", "_new"],
//["John's Javascript Jungle", "http://home.comcast.net/~jscheuer1/side", "_new"]  //no comma after last entry

]}; // REQUIRED!! do not edit or remove

with:

Code:

//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
//["Hot Sites"], //create header
menuItems: (function(ar){
	var lp = new RegExp((location.pathname).replace(/\/[^\/]+$/, ''));
	for (var i = ar.length - 1; i > -1; --i){
		if(ar[i][1] && lp.test(ar[i][1])){
			ar.splice(i, 1);
		}
	}
	return ar;
})([["Traviata Kelida AC3", "../renovate/flooring.htm", "_self"],
["Traviata Supreme AC4", "../renovate/AC4.htm", "_self"],
["Traviata Prestige AC5", "../renovate/AC5.htm", "_self"],
["Allure Waterproof", "../renovate/Allure.htm", "_self"],
["Traviata Home Page", "http://www.traviata.co.za", "_blank"],
["Navigate"],
["Back to Renovate", "../renovate/renovate.htm", "_self"] //no comma after last entry
])}; // REQUIRED!! do not edit or remove

This has the same caveat as the other method as regards an index page reached via its folder name alone, and a different one - if the names of the pages are the same, but in different folders, this will remove too much.

What it should do though, since you have neither of those two issues in your menuItems there, is simply skip entirely the link for the page you are on.

Note: This is untested, so keep a backup copy of your menuItems.js file.

**Bernie Kruger** · 11-26-2009, 08:38 AM

John, it didn't work, it removes the menu completely. I edited one page to remove the 1st script you gave, the primary target page for the flooring when I tested if there was a conflict, I also tried the second script with the 1st intact and the same result, menu disappears.

It would be neat if this can be resolved as with this website there are multiple discipline offerings requiring each their own section. I used a self modified version of the thicktabs.css and that is fine except that when you add pages to a section or delete, it means that all the the pages in that section have to be edited to add or remove the changes.

If you navigate to the worktops from the slidemenu of the main page www.lbk.co.za/const/index.htm, then in the page that opens click on PGBison, you will see how I resolved this there but it is not eloquent.

I have seen how folk navigate websites and believe me there are still many web illiterate folk out there so I try make it idiot proof.

Thread: Clash with Omni Menus and slideshow

Thread Tools

Search Thread

Clash with Omni Menus and slideshow

Just when I thought I was happy :P

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions