Quick question about the omni slide menu

[oolkingloo]

1) Script Title:

Omni Slide Menu

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...lide/index.htm

3) Describe problem:

I'm having a bit of trouble figuring out just how to customize this script as I have very little knowledge of javascript. Basically what I'd like to do is to have user specific content displayed in the box instead, such as the following:


<ss:link source="$storeVersion.homePage"></ss:link>
<div class="cartInfo">
<div id="myAccount">
<ss:image source="$storeVersion.images['icon_account.gif']" border="0" hspace="2"/>
<span class="cartInfoHeadings">My Account</span>
<div id="myAccountDL" style="display:block;">
<!-- test whether the user is logged in or not -->
<ss:if test="$customer.isLoggedIn()">
<ss:link source="$storeVersion.logoff"><ss:image source="$storeVersion.images['icon_arrow.gif']" border="0"/>Sign Out</ss:link><br/>
<ss:else />
<ss:link source="$storeVersion.customerHistory"><ss:image source="$storeVersion.images['icon_arrow.gif']" border="0"/>Sign In</ss:link><br/>
</ss:if>
<ss:link source="$storeVersion.customerRegistration"><ss:image source="$storeVersion.images['icon_arrow.gif']" border="0"/>Register</ss:link><br/>
<ss:link source="$storeVersion.customerHistory"><ss:image source="$storeVersion.images['icon_arrow.gif']" border="0"/>Account History</ss:link><br/>
<ss:link source="$storeVersion.lostPassword"><ss:image source="$storeVersion.images['icon_arrow.gif']" border="0"/>Lost Password</ss:link>
</div>
</div>
<div class="cartInfo">
<div id="shoppingCart" style="margin-left:-5%;">
<ss:image source="$storeVersion.images['icon_cart.gif']" border="0" hspace="2"/>
<span class="cartInfoHeadings">Shopping Cart</span>
<div id="shoppingCartDL" style="display:block">
<ss:link source="$storeVersion.cart"><ss:image source="$storeVersion.images['icon_arrow.gif']" border="0"/>View Cart</ss:link><br/>
<ss:link source="$storeVersion.checkout"><ss:image source="$storeVersion.images['icon_arrow.gif']" border="0"/>Checkout</ss:link><br/>
<ss:set name="math" value="$system.getMath('0')"/>
<ss:foreach item="detail" within="$cart.details">
<ss:eval source="$math.set($math.add($detail.quantity))"/>
</ss:foreach>
<div><ss:image source="$storeVersion.images['icon_arrow.gif']" border="0"/># of Item(s): <ss:value source="$math.get()"/></div>
<div style="margin-top:3px"><ss:image source="$storeVersion.images['icon_arrow.gif']" border="0"/>Total: <span class="headPrice"><ss:value source="$cart.subTotal"/></span></div>
</div>
</div>
</div>

I've tried removing all html based tags and manually replacing the items sited in menuitems.js with no luck. I'm sure this is a rather simple issue, but as I said before I'm rather new to javascript. The chunk of code above is user-specific content for a webstore, such as shopping cart info, account info, ect.

Also, how do I go about removing two of the menus so only one is displayed?

Any help would be greatly appreciated. Thank you in advance!

-King

[jscheuer1]

The easy question first. To get rid of unwanted menus, delete their entries from the menuItems.js file. For example, to get rid of the all but the right menu, the menuItems.js file should look like so:

/***********************************************
* 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[3] = {
id:'menu3', //use unique quoted id (quoted) REQUIRED!!
bartext:'RIGHT MENU',
menupos:'right',
kviewtype:'fixed', 
menuItems:[ // REQUIRED!!
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
["Menu"], //create header
["Dynamic Drive", "http://www.dynamicdrive.com", ""],
["What's New", "http://www.dynamicdrive.com/new.htm",""],
["What's Hot", "http://www.dynamicdrive.com/hot.htm", ""],
["Message Forum", "http://www.dynamicdrive.com/forums", ""],
["Submit Script", "http://www.dynamicdrive.com/submitscript.htm", ""],
["Link to Us", "http://www.dynamicdrive.com/link.htm", ""],

["FAQ", "http://www.dynamicdrive.com/faqs.htm", "", 1, "no"], //create two column row, requires d_colspan:2 (the default)
["Email", "http://www.dynamicdrive.com/contact.htm", "",1],

["External Links", "", ""], //create header
["JavaScript Kit", "http://www.javascriptkit.com", "_new"],
["Freewarejava", "http://www.freewarejava.com", "_new"],
["Coding Forums", "http://www.codingforums.com", "_new"]  //no comma after last entry

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

////////////////////Stop Editing/////////////////

make_menus();

For the other question, you should use design mode (working from the one remaining menu from above):

/***********************************************
* 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[3] = {
id:'menu3', //use unique quoted id (quoted) REQUIRED!!
design_mode:true,  // Set to true to see the generated styles and markup
bartext:'RIGHT MENU',
menupos:'right',
kviewtype:'fixed', 
menuItems:[ // REQUIRED!!
//[name, link, target, col . . . [SNIP!]

View/refresh the page. Once you see those, you may copy and paste one or the other or both into a copy of your page (save the original page and the original menuItems.js file just in case). The styles if used go in the head. The HTML markup (which you will be using) goes as the very first thing in the body of the new copy of the page.

Next remove design mode in this copy of the page's menuItems.js file and turn on user defined for markup (turn it on for styles too if you will be user defining them as well, here I leave user defined styles off, set to false):

/***********************************************
* 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[3] = {
id:'menu3', //use unique quoted id (quoted) REQUIRED!!
user_defined_stylesheet:false,  // Set to true if you wish to override the script's stylesheet
user_defined_markup:true,  // Set to true if you wish to override the script's markup
design_mode:false,  // Set to true to see the generated styles and markup
bartext:'RIGHT MENU',
menupos:'right',
kviewtype:'fixed', 
menuItems:[ // REQUIRED!!
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
["Menu"], //crea . . . [SNIP!]

Now on the new copy of the page the script will use the markup in the new copy of the page instead of that which would be generated by the script. So you can go ahead and edit that markup to be whatever you want it to be. Once everything is set the way you want it, leave the user_defined_markup set to true and use this new page and new menuItems.js file as the basis for all of your Omni Slide pages.

[oolkingloo]

Alright so I've got the gist of it, the only thing I've run into so far that I'm having troubles with is the menu loses its javascript properties when user_defined_markup: is set to true. I took the code generated by design_mode, placed the css in the site's global stylesheet (It's sort of a CMS set up) and the placed the markup portion just after the body tag. I have also tried placing the css directly into the head. The menu shows up, but as I said, it loses the javascript hover (fixed position type deal with the glide effect) & expanding/collapsing.

The mmenu.js file is still included in the head as it initially was

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title><ss:value source="$page.title"/></title><ss:script source="$system.sharedScripts['storefront.js']"/>
<ss:style source="$storeVersion.baseStyleSheet"/>

<ss:style source="$storeVersion.colorStyleSheet"/>

<link rel="icon" href="$store.images['favicon.ico']" type="image/x-icon">
<link rel="shortcut icon" href="$store.images['favicon.ico']" type="image/x-icon">

<ss:if test="$page.hasMetaDescription()"><meta name="description" content="$page.meta.description"></ss:if>
<ss:if test="$page.hasMetaKeywords()"><meta name="keywords" content="$page.meta.keywords"></ss:if>
<style type="text/css">

#menu1 a {color:black;background-color:white;text-decoration:none;text-indent:1ex;}
#menu1 a:active {color:black;text-decoration:none;}
#menu1 a:hover {color:black;background-color:#FFFF99}
#menu1 a:visited {color:black;text-decoration:none;}

</style>
<script src="http://www.notquiteproz.com/mmenu.js" type="text/javascript"></script>
<script src="http://www.notquiteproz.com/menuItems.js" type="text/javascript">

/***********************************************
* Omni Slide Menu script - &copy; John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
* 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
***********************************************/

</script></font>

</head>

<body>
<div id="menu1" onmouseover="movein(this);" onmouseout="moveout(this);"><div><table>
<td class="heading" colspan="2">Menu</td><td id="menu1bar" rowspan="12"><br>S<br>I<br>D<br>E<br> <br>M<br>E<br>N<br>U<br> </td></tr>
<tr><td colspan="2"><a href="http://www.dynamicdrive.com" target="">Dynamic Drive</a></td></tr>
<tr><td colspan="2"><a href="http://www.dynamicdrive.com/new.htm" target="">What's New</a></td></tr>
<tr><td colspan="2"><a href="http://www.dynamicdrive.com/hot.htm" target="">What's Hot</a></td></tr>
<tr><td colspan="2"><a href="http://www.dynamicdrive.com/forums" target="">Message Forum</a></td></tr>
<tr><td colspan="2"><a href="http://www.dynamicdrive.com/submitscript.htm" target="">Submit Script</a></td></tr>
<tr><td colspan="2"><a href="http://www.dynamicdrive.com/link.htm" target="">Link to Us</a></td></tr>
<tr><td colspan="1"><a href="http://www.dynamicdrive.com/faqs.htm" target="">FAQ</a></td><td colspan="1"><a href="http://www.dynamicdrive.com/contact.htm" target="">Email</a></td></tr>
<tr><td class="heading" colspan="2">External Links</td></tr>
<tr><td colspan="2"><a href="http://www.javascriptkit.com" target="_new">JavaScript Kit</a></td></tr>
<tr><td colspan="2"><a href="http://www.freewarejava.com" target="_new">Freewarejava</a></td></tr>
<tr><td id="menu1lastrow" colspan="2"><a href="http://www.codingforums.com" target="_new">Coding Forums</a></td></tr>
</table></div></div>

That's the chunk that involves this script. The css supplied in the design_mode output is currently in the global stylesheet. I played with it and once I get the scrolling & expanding/collapsing to work I'll be able to throw in the code I supplied before into the markup and I should be good to go.

Thank you a ton for your help, it is greatly appreciated. You sir, are a coding genius, this is an excellent script. I've come to know it to an extent after having looked over it so many times .

As you can see in the thumbnail, the menu stays stationary, and does not collapse or expand.

Also here is the code in the menuItems.js file

/***********************************************
* 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[1] = {
id:'menu1', //use unique quoted id (quoted) REQUIRED!!
fontsize:'100%', // express as percentage with the % sign
linkheight:22 ,  // linked horizontal cells height
hdingwidth:210 ,  // heading - non linked horizontal cells width
user_defined_stylesheet:false,  // Set to true if you wish to override the script's stylesheet
user_defined_markup:true,  // Set to true if you wish to override the script's markup
design_mode:false,  // Set to true to see the generated styles and markup

// Finished configuration. Use default values for all other settings for this particular menu (menu[1]) ///

menuItems:[ // REQUIRED!!
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
["Menu"], //create header
["Dynamic Drive", "http://www.dynamicdrive.com", ""],
["What's New", "http://www.dynamicdrive.com/new.htm",""],
["What's Hot", "http://www.dynamicdrive.com/hot.htm", ""],
["Message Forum", "http://www.dynamicdrive.com/forums", ""],
["Submit Script", "http://www.dynamicdrive.com/submitscript.htm", ""],
["Link to Us", "http://www.dynamicdrive.com/link.htm", ""],

["FAQ", "http://www.dynamicdrive.com/faqs.htm", "", 1, "no"], //create two column row, requires d_colspan:2 (the default)
["Email", "http://www.dynamicdrive.com/contact.htm", "",1],

["External Links", "", ""], //create header
["JavaScript Kit", "http://www.javascriptkit.com", "_new"],
["Freewarejava", "http://www.freewarejava.com", "_new"],
["Coding Forums", "http://www.codingforums.com", "_new"]  //no comma after last entry

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



////////////////////Stop Editing/////////////////

make_menus();

The mmenu.js file is still the unaltered script supplied on the download page.

[jscheuer1]

For your styles to take effect you need in the menuItems.js file:

user_defined_stylesheet:true,  // Set to true if you wish to override the script's stylesheet

instead of the current false. Just that much might solve it. If not, I would need a link to the page to troubleshoot it.

But you may just have to give #menu1 and #menu1 div each an appropriate width, perhaps a height for each of auto.

The thing is when copying over the styles, you shouldn't have touched things dealing with dimensions, overflow, or position. Dimensions are OK once you see how it's laying out, those can be tweaked as needed. But position and overflow are required by the script.

As I say, if you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[oolkingloo]

I've got it worked out, tinkered with it for a bit longer tonight. Thank you very much for your help!