PDA

View Full Version : 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/dynamicindex1/omnislide/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:


<!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):


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


#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


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.


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

jscheuer1
11-24-2009, 03:24 AM
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):


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


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:


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


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


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


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.


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:


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


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:


//[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.

jscheuer1
11-26-2009, 11:52 AM
John, it didn't work, it removes the menu completely.

No, it doesn't, at least not here, you may have edited it incorrectly - I just tested it. But, though it didn't make the menu disappear, it didn't achieve its objective of removing the link for the current page either. That's because I had constructed the RegExp incorrectly, that's been fixed below.

Here is (employing this now fully operational method) a working menuItems.js file (replace your entire menuItems.js file with it, but keep a backup of the current one just to be on the safe side) for the const/Renovate/AC4.htm and related pages:


/***********************************************
* Omni Slide Menu script - John Davenport Scheuer
* very freely adapted from Dynamic-FX Slide-In Menu (v 6.5) script- by maXimus
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
* as first mentioned in http://www.dynamicdrive.com/forums
* username:jscheuer1
***********************************************/

//One global variable to set, use true if you want the menus to reinit
//when the user changes text size (recommended):
resizereinit=true;

menu[2] = { // REQUIRED!! This menu explicitly declares all available options
//even if they are the same as the defaults
id:'menu2', //use unique quoted id (quoted) REQUIRED!!
/////////////////////////////////////
///////////// no quotes for these properties (numbers represent pixels unless otherwise noted): ////////////
/////////////////////////////////////
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:19, // 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:20, // 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:'#e0e0e0', // inner border color
borderstyle:'solid', // inner border style (solid, dashed, inset, etc.)
outbrdwidth:'0 1px 1px 1px', // outer border-width used for this menu (top right bottom left)
outbrdcolor:'#c0c0c0', // outer border color
outbrdstyle:'solid', // outer border style (solid, dashed, inset, etc.)
barcolor:'white', // bar (the vertical cell) text color
barbgcolor:'', // bar (the vertical cell) background color
barfontweight:'bold', // 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:'bold', // 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:'<img src="../renovate/scripts/TabBack.gif" alt="More Floors">', // bar text (the vertical cell) use text or img tag
///////////////////////////
//[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(/^.*(\/[^\/]+)$/, '$1'));
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

make_menus();

Now, in another matter, you have placed the DOCTYPE incorrectly at the beginning of the AC4.htm (and presumably, though I didn't check, other) page(s):


<html>

<head>

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


<meta http-equiv="Content-Lan . . .

It should be:


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

<head>



<meta http-equiv="Content-Lan . . .

This doesn't matter a whole lot except in IE. But in (some, if not all) IE browsers, without the DOCTYPE in its proper place, the Omni menu will only be partially seen because it will be too far to the left.

Bernie Kruger
11-26-2009, 04:11 PM
Did the mod on AC4 and when selecting flooring I get this

http://www.lbk.co.za/const/Images/error1.jpg

Happens with all 4 pages of flooring and once you click OK you get

http://www.lbk.co.za/const/Images/menu.jpg

So the selected page option goes but apart from the error, it is fine.

I did not publish yet so these are local tests only, also tested in IE and get the same results.

I took out the 1st script you gave me on AC4 page and it does not seem to clash as all the other pages do load, with the JS error, each referencing the name of the page.

Using FP as an editor, I get a similar error in the preview pane, not sure why it is a backspace, possibly because I am testing locally - am I missing some add-on for my PC?

I haven't a cooking clue where to even start looking :confused:

ETA
the links to the external pages and renovate - no glitches. Remember I am using a split frame if that has any significance

jscheuer1
11-26-2009, 04:58 PM
Sorry about that. That's actually not an error. It's an alert I had put in for diagnostic purposes - to make sure I was getting the correct RegExp. I left it in by mistake. It (highlighted) may be removed:


menuItems: (function(ar){
var lp = new RegExp((location.pathname).replace(/^.*(\/[^\/]+)$/, '$1'));
alert(lp.source);
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

I've already removed it from my previous post.

Bernie Kruger
11-26-2009, 05:38 PM
Brilliant, as per usual, you should update the source code on the downloads page, I think I am done with this script as it is working EXACTLY the way I want it.

Bernie Kruger
11-26-2009, 06:02 PM
Uhmm

IE8, the top menu has moved left on a wide screen - damn MS :(

jscheuer1
11-26-2009, 06:20 PM
I think you may have missed this bit from before when we were primarily discussing the latest mod (emphasis added):


Now, in another matter, you have placed the DOCTYPE incorrectly at the beginning of the AC4.htm (and presumably, though I didn't check, other) page(s):


<html>

<head>

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


<meta http-equiv="Content-Lan . . .

It should be:


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

<head>



<meta http-equiv="Content-Lan . . .

This doesn't matter a whole lot except in IE. But in (some, if not all) IE browsers, without the DOCTYPE in its proper place, the Omni menu will only be partially seen because it will be too far to the left.

Bernie Kruger
11-27-2009, 04:50 AM
I did do as you suggested but only on the one page as on my screen size, it was working fine, then I did this on the other 3 pages. Just tested on my son's wide screen and it is fixed. Now I have a huge amount of pages to go update where this doctype was wrongly inserted in the 1st place.

Oh well, now I know about this I should have less of these queries/bugs in future.

Thanx for all the help, you are a star. :D

BTW I put in a plug for DD on the TOC sdmenu which is always visible to my visitors. ;)