Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:20
Re: onclass failing - background image not working via CSS
Poster: nwilcox
Dated: Tuesday May 6 2008 - 20:55:55 BST
I didn't pursue this further.. client was happy with what we had.. thanks!
onclass failing - background image not working via CSS
Poster: nwilcox
Dated: Thursday April 10 2008 - 16:04:30 BST
onclass is only partially working for me on my menu layout file.
-->
<-- Here is the image that I'd like to have placed at the bottom left corner of each menu item so I can create a variable height items but still have the rounded bottom cornerThe text styles are working but I cannot get the background image to display (or any image to display for that matter).
http://clients1.serverside.net/agc-ca/?page=content
I have placed a unique class for the onclass declaration but it is not appearing in the menu on rollover.
Any help would be appreciated. It is a rounded bottom left corner graphic that will always be assigned to the bottom left of the menu item button.
What am I doing wrong?
Thanks!
Re: onclass failing - background image not working via CSS
Poster: Ruth
Dated: Thursday April 10 2008 - 19:14:18 BST
Hi,
Can you be more specific as to an item I can test or something. I can't figure out where you want the image to be to make anything look round. The only round area I see is the tab looking at the top, right and left and they look rounded in mouse off and on position.
Ruth
Re: onclass failing - background image not working via CSS
Poster: nwilcox
Dated: Thursday April 10 2008 - 19:38:06 BST
sorry Ruth
In the left column navigation column when the mouse is over a link, the blue background bar has a rounded left top and bottom corner. On the site now I can get the top roudned corner but since the text could be 1 line or 2 lines, I can't put the bottom rounded corner in the background of the menu item. I have a small graphic (that I showed above in the first post) that needs to be placed into the lower left side of each menu item (via CSS) to create the appropriate effect.
Does that make sense? I've applied the onclass CSS and I've tested it by changing the text decoration and it works but the background image in the class isn't working.
Thanks!
Nick
Re: onclass failing - background image not working via CSS
Poster: Ruth
Dated: Thursday April 10 2008 - 22:08:46 BST
Hi,
Not a problem, but could I ask a favor? Can you put the images you use in the menu someplace where I can get them. It takes forever to copy paste url from the data file, then select and save image.
Ruth
Re: onclass failing - background image not working via CSS
Poster: nwilcox
Dated: Thursday April 10 2008 - 22:18:35 BST
Ruth wrote:
Hi,
Not a problem, but could I ask a favor? Can you put the images you use in the menu someplace where I can get them. It takes forever to copy paste url from the data file, then select and save image.
Ruth
Not a problem, but could I ask a favor? Can you put the images you use in the menu someplace where I can get them. It takes forever to copy paste url from the data file, then select and save image.
Ruth
Sure here you go and thanks! Maybe I'm just not doing something right and I just need another set of eyes
The ones you'll need are as follows
rounded_top.gif rounded_bottom.gif
separator_image.gif
arrow_v_off.gif
arrow_v_over.gifThe css I have set up for the onclass and off class is below and sits in a css file in a folder off the root called css/:
Code:
.mButtonOff {
background-image: none;
text-decoration: none;
}
.mButtonOver {
background-image: url("../javascript/milonic/rounded_bottom.gif");
background-position: bottom left;
background-repeat: no-repeat;
text-decoration: none;
}
background-image: none;
text-decoration: none;
}
.mButtonOver {
background-image: url("../javascript/milonic/rounded_bottom.gif");
background-position: bottom left;
background-repeat: no-repeat;
text-decoration: none;
}
Re: onclass failing - background image not working via CSS
Poster: Ruth
Dated: Friday April 11 2008 - 0:36:33 BST
Hi,
Well, the problem is that it won't accept the background image being used in both the data file and the css file. The data file is overriding the css to show the overbgimage.
I have found a solution, but I need to wait for Andy to respond because there is a bug when using an image, imageposition and a subimage. If you want it now, I'll post but you will have to remove the subimages from the menu in order for it to work
Ruth
Re: onclass failing - background image not working via CSS
Poster: nwilcox
Dated: Friday April 11 2008 - 15:54:56 BST
I think I can work around it, please give me an idea on how to proceed
Re: onclass failing - background image not working via CSS
Poster: Ruth
Dated: Friday April 11 2008 - 17:56:05 BST
Hi,
Sure
First, you need to make a new image, a blank.gif that is the same size as the rounded_bottom.gif image.
I made a new style since I put everything into the css file that is a css thing, and I didn't know if the style that you were using was also used in submenus or something. So, the new style for that main menu is
Code:
with(menuStyleVerticalSub_main=new mm_style()){
offclass="mButtonOff";
onclass="mButtonOver";
image="blank.gif";
overimage="rounded_bottom.gif";
imageposition="bottom";
pagebgcolor="transparent";
pagecolor="black";
separatorsize=1;
separatorimage="separator_image.gif";
subimagepadding=0;
}
offclass="mButtonOff";
onclass="mButtonOver";
image="blank.gif";
overimage="rounded_bottom.gif";
imageposition="bottom";
pagebgcolor="transparent";
pagecolor="black";
separatorsize=1;
separatorimage="separator_image.gif";
subimagepadding=0;
}
Then the css stuff for mButton classes
Code:
.mButtonOff{
background-color: transparent;
color:#5A5A5A;
font-style:normal;
font-family:arial,tahoma,serif;
font-size:11px;
border:0px solid #fff2e1;
margin:0px;
padding:3px 2px 3px 12px;
text-decoration:none;
}
.mButtonOver{
background: transparent url(rounded_top.gif) top left; background-repeat: no-repeat;
color:#FFFFFF;
font-style:normal;
font-family:arial,tahoma,serif;
font-size:11px;
border:0px solid #fff2e1;
margin:0px; padding:3px 2px 3px 12px;
text-decoration:none;
}
background-color: transparent;
color:#5A5A5A;
font-style:normal;
font-family:arial,tahoma,serif;
font-size:11px;
border:0px solid #fff2e1;
margin:0px;
padding:3px 2px 3px 12px;
text-decoration:none;
}
.mButtonOver{
background: transparent url(rounded_top.gif) top left; background-repeat: no-repeat;
color:#FFFFFF;
font-style:normal;
font-family:arial,tahoma,serif;
font-size:11px;
border:0px solid #fff2e1;
margin:0px; padding:3px 2px 3px 12px;
text-decoration:none;
}
And this is the menu, itself
Code:
<script language=javascript type=text/javascript>
<!--
with(milonic=new menuname("SideMenu")){
style=menuStyleVerticalSub_main;
alwaysvisible=1;
menuwidth="180px";
orientation="vertical";
position="relative";
aI("text=AGC Districts;showmenu=AboutAGCSubVertical;");
aI("text=Find A Member;status=Link 2;showmenu=AboutAGCSubVertical;");
aI("text=How to Join;status=Link 3;showmenu=AboutAGCSubVertical;");
aI("text=Buy A Product;status=Link 4;showmenu=AboutAGCSubVertical;");
aI("text=Search Jobs;status=Link 5;showmenu=AboutAGCSubVertical;");
aI("text=Get Involved;status=Link 6;showmenu=AboutAGCSubVertical;");
}
drawMenus();
-->
</script>
<!--
with(milonic=new menuname("SideMenu")){
style=menuStyleVerticalSub_main;
alwaysvisible=1;
menuwidth="180px";
orientation="vertical";
position="relative";
aI("text=AGC Districts;showmenu=AboutAGCSubVertical;");
aI("text=Find A Member;status=Link 2;showmenu=AboutAGCSubVertical;");
aI("text=How to Join;status=Link 3;showmenu=AboutAGCSubVertical;");
aI("text=Buy A Product;status=Link 4;showmenu=AboutAGCSubVertical;");
aI("text=Search Jobs;status=Link 5;showmenu=AboutAGCSubVertical;");
aI("text=Get Involved;status=Link 6;showmenu=AboutAGCSubVertical;");
}
drawMenus();
-->
</script>
The rounded_top is now the overbgimage and you don't need a matching bgimage because with the css class it's not necessary. As I said, you cannot use the subimage right now because you must use the imageposition="bottom"; in the style to get that rounded_bottom.gif to appear at the bottom of the left side, but to offset that is the advantage that you can now make your rounded_top.gif image longer, say 150px in length, and when someone who needs larger fonts for accessibility issues, you will still have a complete 'tab' look since the css is set for no repeat for the bgimage, and if you make it that long, it works up to 500% font size increase and still looks like a tab. Hope this helps.
Ruth
Re: onclass failing - background image not working via CSS
Poster: nwilcox
Dated: Friday April 11 2008 - 18:01:08 BST
HI Ruth... okay I'll give this a try.. but the subimage (in this case the double arrow graphic) can't be used?
If this is a bug, will it be fixed?
Thank you1
Re: onclass failing - background image not working via CSS
Poster: Ruth
Dated: Friday April 11 2008 - 20:50:22 BST
No, it can't be used. I did report it to Milonic. The problem is that you need to set imageposition="bottom"; you have to set it for this setup to make sure the rounded_bottom.gif goes to the bottom left. But setting imageposition seems to also be affecting the subimage. Nothing I tried stopped the problem.
Ruth
Re: onclass failing - background image not working via CSS
Poster: nwilcox
Dated: Friday April 11 2008 - 20:54:03 BST
wow okay... I guess I'll have to leave it as I have it now. I really need the subimage arrow more than arounded corner
I really appreciate the effort you took to help me out. Is there a possibilty of that being fixed in a future release of the menu?
Re: onclass failing - background image not working via CSS
Poster: Ruth
Dated: Friday April 11 2008 - 20:54:36 BST
Hi,
Well, maybe you can try using subimagecss and onsubimagecss. I'll play with it and see if that will allow a fix.
Ruth
Re: onclass failing - background image not working via CSS
Poster: nwilcox
Dated: Friday April 11 2008 - 21:04:15 BST
Ruth wrote:
Hi,
Well, maybe you can try using subimagecss and onsubimagecss. I'll play with it and see if that will allow a fix.
Ruth
Well, maybe you can try using subimagecss and onsubimagecss. I'll play with it and see if that will allow a fix.
Ruth
oh! I didn't realize ther was an submimagecss... maybe that would work? Cool thanks Ruth!
Re: onclass failing - background image not working via CSS
Poster: Ruth
Dated: Friday April 11 2008 - 21:04:38 BST
Welcome. But, I can't test it because I have no clue how to do images other than background images in css. I'm not too css savvy
Hopefully you know how to do a class for the subimages.Ruth