How to add different images with links in menuitems list in Omni Slide Menu?

[meenukk]

1) Script Title: Omni Slide Menu

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

3) Describe problem: How to add different images with links in menuitems list in Omni Slide Menu? I am using the right menu to display the social network signs like Facebook, Blogspot, Twitter in menuitems list I want to display images with links instead of names like "what's New" with link?

[badbear1605]

I would like to put in a google voice widgit
and a google chat widget and a facebook badge
and i keep getting errors when adding the code to
where the link would norm be inserted, I am def a noob
to websites and such trying to learn as much as i can
my best guess is i have to find a way to tell it to look at the code
as html instead of it looking at it as javascript or change the code to
javascript (no way id figure it out anytime soon)

[jscheuer1]

For example, in the demo's menuItems.js for the first menu, you could do:

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
// 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"],
["<img src='http://www.freewarejava.com/fwlogo2.gif' style='height: 20px; width: 162px;' border=0>", "http://www.freewarejava.com", "_new"],
["Coding Forums", "http://www.codingforums.com", "_new"]  //no comma after last entry

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

Notes:

Be aware, some sites will block you hotlinking to their images. This may only be noticeable once your page is live. So best to use your own.

Notice the quoting convention. Only single quotes (') allowed inside the img string which is itself delimited by double quotes (").

Width and height of the image must fit the existing layout. Or change that layout with other options for that menu. Or do as I did here, resizing the image using style to fit the layout.

[badbear1605]

would you please take a look at these codes that i am looking to add to the omnislide of course i understand i myself will have to play with sizing and such but in reguards to implementing this code im still wondering how tricky it would be to insert

Facebook Badge

<!-- Facebook Badge START --><a href="http://www.facebook.com/pages/Glendale-AZ/Bear-Technical-Services/230638373918" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Bear Technical Services">Bear Technical Services</a><span style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; line-height: 16px; font-variant: normal; font-style: normal; font-weight: normal; color: #555555; text-decoration: none;">&nbsp;|&nbsp;</span><a href="http://www.facebook.com/business/dashboard/" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Make your own badge!">Promote Your Page Too</a><br/><a href="http://www.facebook.com/pages/Glendale-AZ/Bear-Technical-Services/230638373918" target="_TOP" title="Bear Technical Services"><img src="http://badge.facebook.com/badge/230638373918.6077.1001061144.png" width="200" height="100" style="border: 0px;" /></a><!-- Facebook Badge END -->


Google Talkback Badge (Google Chat)

<iframe src="http://www.google.com/talk/service/badge/Show?tk=z01q6amlqd7mvtahqo540b75el88fb4vlspq30dj0eaq9omr97gt1sb0ml4dn3knuhk59p00dpg28neibvk6v2dgtkmsp5nrnjaduled93esoqem35kd1vs4nhovmnua7cqbidpa996da193vdtk12qc 20dc66kj3r4pg2heo&amp;w=200&amp;h=60" frameborder="0" allowtransparency="true" width="200" height="60"></iframe>


Google Voice Badge

<object type="application/x-shockwave-flash" data="https://clients4.google.com/voice/embed/webCallButton" width="230" height="85"><param name="movie" value="https://clients4.google.com/voice/embed/webCallButton" /><param name="wmode" value="transparent" /><param name="FlashVars" value="id=ee6d6bffb20b8a117182c64b94f89f01950f551b&style=0" /></object>

I tried inserting it a few diff ways thru dreamweaver playing with some of the options im setting up a right side menu changing some of the sizing and such but
when i tried to implement these codes as the links it would cause a syntax error in javascript and i could not resolve it, i stayed up all night trying different variations

any addtl assistance would be greatly appreciated

[jscheuer1]

The second one, Google Talkback Badge does nothing for me even if I paste its code into a blank page. The other two work out OK in the menu. Instead of having to change all those double quotes into single quotes, you can just change the delimiters to single quotes:

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
// 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"],
['<!-- Facebook Badge START --><a href="http://www.facebook.com/pages/Glendale-AZ/Bear-Technical-Services/230638373918" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Bear Technical Services">Bear Technical Services</a><span style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; line-height: 16px; font-variant: normal; font-style: normal; font-weight: normal; color: #555555; text-decoration: none;">&nbsp;|&nbsp;</span><a href="http://www.facebook.com/business/dashboard/" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Make your own badge!">Promote Your Page Too</a><br/><a href="http://www.facebook.com/pages/Glendale-AZ/Bear-Technical-Services/230638373918" target="_TOP" title="Bear Technical Services"><img src="http://badge.facebook.com/badge/230638373918.6077.1001061144.png" width="200" height="100" style="border: 0px;" /></a><!-- Facebook Badge END -->', "", ""],
['<object type="application/x-shockwave-flash" data="https://clients4.google.com/voice/embed/webCallButton" width="230" height="85"><param name="movie" value="https://clients4.google.com/voice/embed/webCallButton" /><param name="wmode" value="transparent" /><param name="FlashVars" value="id=ee6d6bffb20b8a117182c64b94f89f01950f551b&style=0" /></object>', "", ""]  //no comma after last entry

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

Getting it to layout well - that's another story. But at least they both show up.

[badbear1605]

Thank You you are amazing found out it was a glitch with the creation of the widget found the solution used the same setup and applied it works great just playing with the layout now.... Again thank you very much on for a great design and wonderful support

[badbear1605]

Looks horrible in IE and Firefox items overlap,
but in chrome they are perfect any advise

menu[3] = {  // REQUIRED!!  This menu explicitly declares all available options even if they are the same as the defaults
id:'menu3', //use unique quoted id (quoted) REQUIRED!!
/////////////////////////////////////
///////////// no quotes for these properties (numbers represent pixels unless otherwise noted): ////////////
/////////////////////////////////////

d_colspan:3,     // Available columns in menu body as integer
wrapbar:true,    // extend and wrap bar below menu for a more solid look hdingwidth:150,  // heading - non linked horizontal cells width
borderwidth:2,   // inner border-width used for this menu
/////////////////////////// quote these properties: /////////////////////
baralign:'center',       // bar (the vertical cell) right left or center text alignment
menufont:'billy',      // menu font
fontsize:'100%',          // express as percentage with the % sign
linktarget:'',           // default link target, leave blank for same window (other 
kviewtype:'absolute',       // Type of keepinview - 'fixed' utilizes fixed menupos:'right',         // set side that menu slides in from (right or left or top)
bartext:'Quick Links',       // bar text (the vertical cell) use text or img tag
linkheight:25 ,  // linked horizontal cells height
hdingwidth:200 ,  // heading - non linked horizontal cells width
///////////////////////////
menuItems:[
["Bear Technical Services, LLC"], //create header
["Home", "http://www.beartechservices.com", "_new"],
["Services", "http://www.beartechservices.com/services","_new"],
["Support", "http://www.beartechservices.com/support", "_new"],
["About Us", "http://www.beartechservices.com/about", "_new"],

["Social Networks", "", "", 2, "no"], //create two column header w/ 2 and 1 column members, requires d_colspan:3
["", "", "", 1],
['<a href="http://www.facebook.com/pages/Glendale-AZ/Bear-Technical-Services/230638373918" target="_TOP" title="Bear Technical Services, LLC"><img src="http://badge.facebook.com/badge/230638373918.6077.1001061144.png" width="50" height="50" style="border: 0px;" /></a>', "", "", 1, "no"], //create three column row, requires d_colspan:3
['<a href="http://www.twitter.com/beartechservice" target="_TOP" title="Bear Technical Services, LLC"><img src="/soc-img/twitter.png" width="50" height="50" style="border: 0px;" /></a>', "", "", 1, "no"],
['<a href="http://www.myspace.com/beartechservices" target="_TOP" title="Bear Technical Services, LLC"><img src="/soc-img/myspace.png" width="50" height="50" style="border: 0px;" /></a>', "", "_", 1],

["Search", "", "", 2, "no"], //create two column header w/ 2 and 1 column members, requires d_colspan:3
["", "", "", 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"],
["Bing", "http://www.bing.com/", "_new", 1],

["Contact US", "", ""], //create header
['<object type="application/x-shockwave-flash" data="https://clients4.google.com/voice/embed/webCallButton" width="250" height="85"><param name="movie" value="https://clients4.google.com/voice/embed/webCallButton" /><param name="wmode" value="transparent" /><param name="FlashVars" value="id=ee6d6bffb20b8a117182c64b94f89f01950f551b&style=0" /></object>', "_new"],
['<iframe src="http://www.google.com/talk/service/badge/Show?tk=z01q6amlq25l8uf798sq9ei6g5pujsrrumms6udoi9sr1r9dl3em59o7hs8e89g6uo1q51tt3d256p1rjt7luime5rtbfplpdo6v1iteig6k5ivt9tu3m3k1ig4b4u13obqggtts1c9nnkm48uocssvirb6odqfndn4re1ujcmn6a9ffcic93f47dfecqj3kbo7t4d91iqbfdcnilvno6tcid7dqg&amp;w=150&amp;h=40" frameborder="0" allowtransparency="true" width="150" height="40"></iframe>', "_new"],  
 
["Thank You For Visiting Our Page"]   //no comma after last entry


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

[jscheuer1]

Put this in the head of the page:

<style type="text/css">
#menu3 td {
	height: auto!important;
}
</style>

[badbear1605]

ok the toolbar is configured and works great my site is www.beartechservices.com i just need to put my own content on the actual site but my last issue is: when the page first loads you can barely see the bar and it is half hidden by the scroll bar and when i move it to the left same thing it halfway disappears but when you mouseover and let it close it fixes itself, but initially people wont be able to see the bar let alone click on it thank you for your wisdom and your assistance.

[jscheuer1]

Basically the source code needs to be valid, or at least more nearly valid than it is. There are two heads! And there are other basic standards violations.

But once you fix all that, other problems arise. I've been playing with it off and on for a while now. Still not perfect, but much better, for a demo go to:

http://home.comcast.net/~jscheuer1/side/bear_h.htm

Use your browser's 'view source' to get the code. I've had to put the menuItems.js code on the page, hopefully you will understand how to make that external again, if not (or for any other questions) - let me know.