Support Forum Softcomplex logo
| About Us  | Services  | Download  | Order  | Support  | |
| Search | Today's Posts | Stats | Board Rules | Not logged in [ Login | Register ]
 SoftComplex Forums » Tigra Menu Product Family » Background color not changing on MouseOver go to bottom
Last active: Never

Printable Version | Subscribe | Add to Favourites   Post new thread
Author: Subject: Background color not changing on MouseOver
arunkj
Junior Member

Posts: 4
Registered: 3/22/2005
Member Is Offline
posted on 3/22/2005 at 01:16 AM Reply With Quote
Background color not changing on MouseOver
Hi,

First of all, a special thanks to SoftComplex & Denis Gritcyuk, author of Tigra Menu 1.0 for providing such a great service.

I'd downloaded Tigra Menu 1.0 and customized to my needs. Everything is working great. Expect for one small issue which i tried to fix it myself but still couldn't after several tries.

The problem i'm facing is when i move my mouse over an menu item, its background color is not changing. I've pasted below my menu.js, menu.css and menu_tpl.js file contents.

I appreciate any assistance and advance thanks for it.


menu.js
---------
var menus = [];

// --- menu class ---
function menu (item_struct, pos, styles) {
// browser check
this.item_struct = item_struct;
this.pos = pos;
this.styles = styles;
this.id = menus.length;
this.items = [];
this.children = [];

this.add_item = menu_add_item;
this.hide = menu_hide;

this.onclick = menu_onclick;
this.onmouseout = menu_onmouseout;
this.onmouseover = menu_onmouseover;
this.onmousedown = menu_onmousedown;

var i;
for (i = 0; i < this.item_struct.length; i++)
new menu_item(i, this, this);
for (i = 0; i < this.children.length; i++)
this.children.visibility(true);
menus[this.id] = this;
}
function menu_add_item (item) {
var id = this.items.length;
this.items[id] = item;
return (id);
}
function menu_hide () {
for (var i = 0; i < this.items.length; i++) {
this.items.visibility(false);
this.items.switch_style('onmouseout');
}
}
function menu_onclick (id) {
var item = this.items[id];
return (item.fields[1] ? true : false);
}
function menu_onmouseout (id) {
this.hide_timer = setTimeout('menus['+ this.id +'].hide();',
this.pos['hide_delay'][this.active_item.depth]);
if (this.active_item.id == id)
this.active_item = null;
}
function menu_onmouseover (id) {
this.active_item = this.items[id];
clearTimeout(this.hide_timer);
var curr_item, visib;
for (var i = 0; i < this.items.length; i++) {
curr_item = this.items;
visib = (curr_item.arrpath.slice(0, curr_item.depth).join('_') ==
this.active_item.arrpath.slice(0, curr_item.depth).join('_'));
if (visib)
curr_item.switch_style (
curr_item == this.active_item ? 'onmouseover' : 'onmouseout');
curr_item.visibility(visib);
}
}
function menu_onmousedown (id) {
this.items[id].switch_style('onmousedown');
}
// --- menu item Class ---
function menu_item (path, parent, container) {
this.path = new String (path);
this.parent = parent;
this.container = container;
this.arrpath = this.path.split('_');
this.depth = this.arrpath.length - 1;
// get pointer to item's data in the structure
var struct_path = '', i;
for (i = 0; i <= this.depth; i++)
struct_path += '[' + (Number(this.arrpath) + (i ? 2 : 0)) + ']';
eval('this.fields = this.container.item_struct' + struct_path);
if (!this.fields) return;

// assign methods
this.get_x = mitem_get_x;
this.get_y = mitem_get_y;
// these methods may be different for different browsers (i.e. non DOM compatible)
this.init = mitem_init;
this.visibility = mitem_visibility;
this.switch_style = mitem_switch_style;

// register in the collections
this.id = this.container.add_item(this);
parent.children[parent.children.length] = this;

// init recursively
this.init();
this.children = [];
var child_count = this.fields.length - 2;
for (i = 0; i < child_count; i++)
new menu_item (this.path + '_' + i, this, this.container);
this.switch_style('onmouseout');
}
function mitem_init() {
document.write (
'<a id="mi_' + this.container.id + '_'
+ this.id +'" class="m' + this.container.id + 'l' + this.depth
+'o" href="' + this.fields[1] + '" style="position: absolute; top: '
+ this.get_y() + 'px; left: ' + this.get_x() + 'px; width: '
+ this.container.pos['width'][this.depth] + 'px; height: '
+ this.container.pos['height'][this.depth] + 'px; visibility: hidden;'
+' background: black; color: white; z-index: ' + this.depth + ';" '
+ 'onclick="return menus[' + this.container.id + '].onclick('
+ this.id + ');" onmouseout="menus[' + this.container.id + '].onmouseout('
+ this.id + ');" onmouseover="menus[' + this.container.id + '].onmouseover('
+ this.id + ');" onmousedown="menus[' + this.container.id + '].onmousedown('
+ this.id + ');"><div class="m' + this.container.id + 'l' + this.depth + 'i">'
+ this.fields[0] + "</div></a>n"
);
this.element = document.getElementById('mi_' + this.container.id + '_' + this.id);
}
function mitem_visibility(make_visible) {
if (make_visible != null) {
if (this.visible == make_visible) return;
this.visible = make_visible;
if (make_visible)
this.element.style.visibility = 'visible';
else if (this.depth)
this.element.style.visibility = 'hidden';
}
return (this.visible);
}
function mitem_get_x() {
var value = 0;
for (var i = 0; i <= this.depth; i++)
value += this.container.pos['block_left']
+ this.arrpath * this.container.pos['left'];
return (value);
}
function mitem_get_y() {
var value = 0;
for (var i = 0; i <= this.depth; i++)
value += this.container.pos['block_top']
+ this.arrpath * this.container.pos['top'];
return (value);
}
function mitem_switch_style(state) {
if (this.state == state) return;
this.state = state;
var style = this.container.styles[state];
for (var i = 0; i < style.length; i += 2)
if (style && style[i+1])
eval('this.element.style.' + style + "='"
+ style[i+1][this.depth] + "';");
}





menu.css
-----------
.m0l0o {
text-decoration: none;

border: 1px solid #6699cc;
background: #336699;
}

.m0l1o {
text-decoration: none;

border: 1px solid #6699cc;
background: #336699;
}

.m0l2o {
text-decoration: none;

border: 1px solid #6699cc;
background: #336699;
}

.m0l0i {
font-size: 12px;
font-family: Verdana, Tahoma, Arial;
padding: 10px;
text-decoration: none;

color: white;
background: #4B619B;
}

.m0l1i {
font-size: 11px;
font-family: Verdana, Tahoma, Arial;
padding: 6px;
text-decoration: none;

color: white;
background: #4B619B;
}

.m0l2i {
font-size: 11px;
font-family: Verdana, Tahoma, Arial;
padding: 4px;
text-decoration: none;

color: white;
background: #4B619B;
}



.m010over {
border: 1px solid #6699cc;
background: #6699cc;
}

.m011over {
border: 1px solid #6699cc;
background: #6699cc;
}

.m012over {
border: 1px solid #6699cc;
background: #6699cc;
}






menu_tpl.js
--------------
var MENU_POS = new Array();

// item sizes for different levels of menu
MENU_POS['height'] = [35, 25, 22];
MENU_POS['width'] = [175, 190, 150]; // for width for level1, level2, level3

// menu block offset from the origin:
// for root level origin is upper left corner of the page
// for other levels origin is upper left corner of parent item
MENU_POS['block_top'] = [84, 5, 10]; // for menu start position in top
MENU_POS['block_left'] = [0, 150, 100]; // for menu start position in left (for level1, level2, level3)

// offsets between items of the same level
MENU_POS['top'] = [36, 26, 23];
MENU_POS['left'] = [0, 0, 0];

// time in milliseconds before menu is hidden after cursor has gone out
// of any items
MENU_POS['hide_delay'] = [200, 200, 200];

/* --- dynamic menu styles ---
note: you can add as many style properties as you wish but be not all browsers
are able to render them correctly. The only relatively safe properties are
'color' and 'background'.
*/

var MENU_STYLES = new Array();

// default item state when it is visible but doesn't have mouse over
MENU_STYLES['onmouseout'] = [
'background', ['#ffffff', '#ffffff', '#ffffff'],
'color', ['#000000', '#000000', '#000000'],
];

// state when item has mouse over it
MENU_STYLES['onmouseover'] = [
'background', ['#ffffff', '#ffffff', '#ffffff'],
'color', ['#000000', '#000000', '#000000'],
];

// state when mouse button has been pressed on the item
MENU_STYLES['onmousedown'] = [
'background', ['#cccccc', '#cccccc', '#cccccc'],
'color', ['#000000', '#000000', '#000000'],
];
View User's Profile View All Posts By User U2U Member
olga
Administrator

Posts: 84
Registered: 11/22/2004
Member Is Offline
posted on 3/24/2005 at 10:36 PM Reply With Quote

You need to modify your dynamic styles (menu_tpl.js file) that defines CSS properties applied dynamically to menu items depending on the mouse state.
Style property values are lists containing setting for different menu levels. More levels expected - more elements required for each attribute. Given menu example has three levels so all arrays have three elements as well. So you just should change attribute 'background' and its values for levels you want to have rollover effects. For example:
Code:

MENU_STYLES['onmouseout'] = [
'background', ['#336699', '#339966', '#993366'],
];
// state when item has mouse over it
MENU_STYLES['onmouseover'] = [
'background', ['#6699cc', '#66cc99', '#cc6699'],
];
// state when mouse button has been pressed on the item
MENU_STYLES['onmousedown'] = [
'background', ['#99ccff', '#99ffcc', '#cc99ff'],
];
View User's Profile View All Posts By User U2U Member
arunkj
Junior Member

Posts: 4
Registered: 3/22/2005
Member Is Offline
posted on 3/24/2005 at 11:21 PM Reply With Quote

Quote:
Originally posted by olga
You need to modify your dynamic styles (menu_tpl.js file) that defines CSS properties applied dynamically to menu items depending on the mouse state.
Style property values are lists containing setting for different menu levels. More levels expected - more elements required for each attribute. Given menu example has three levels so all arrays have three elements as well. So you just should change attribute 'background' and its values for levels you want to have rollover effects. For example:
Code:

MENU_STYLES['onmouseout'] = [
'background', ['#336699', '#339966', '#993366'],
];
// state when item has mouse over it
MENU_STYLES['onmouseover'] = [
'background', ['#6699cc', '#66cc99', '#cc6699'],
];
// state when mouse button has been pressed on the item
MENU_STYLES['onmousedown'] = [
'background', ['#99ccff', '#99ffcc', '#cc99ff'],
];
View User's Profile View All Posts By User U2U Member
arunkj
Junior Member

Posts: 4
Registered: 3/22/2005
Member Is Offline
posted on 3/24/2005 at 11:36 PM Reply With Quote

Hi,

Thank you so much for your quick response. I really appreciate it.

Actually, as i said before, i had tried setting baground property values in my Menu_Styles array in menu_tpl.js file. But, still rollover effect didn't work. Infact, even after getting your reply, i replaced my code with yours and tried too... but still its not working.

I've pasted below my new menu_tpl.js file with modified code added... but still its not working.



/* --- geometry and timing of the menu --- */
var MENU_POS = new Array();

// item sizes for different levels of menu
MENU_POS['height'] = [35, 25, 22];
MENU_POS['width'] = [175, 190, 150]; // for width for level1, level2, level3

// menu block offset from the origin:
// for root level origin is upper left corner of the page
// for other levels origin is upper left corner of parent item
MENU_POS['block_top'] = [84, 5, 10]; // for menu start position in top
MENU_POS['block_left'] = [0, 150, 100]; // for menu start position in left (for level1, level2, level3)

// offsets between items of the same level
MENU_POS['top'] = [36, 26, 23];
MENU_POS['left'] = [0, 0, 0];

// time in milliseconds before menu is hidden after cursor has gone out
// of any items
MENU_POS['hide_delay'] = [200, 200, 200];

/* --- dynamic menu styles ---
note: you can add as many style properties as you wish but be not all browsers
are able to render them correctly. The only relatively safe properties are
'color' and 'background'.
*/

var MENU_STYLES = new Array();

// default item state when it is visible but doesn't have mouse over
MENU_STYLES['onmouseout'] = [
'background', ['#336699', '#339966', '#993366'],
];
// state when item has mouse over it
MENU_STYLES['onmouseover'] = [
'background', ['#6699cc', '#66cc99', '#cc6699'],
];
// state when mouse button has been pressed on the item
MENU_STYLES['onmousedown'] = [
'background', ['#99ccff', '#99ffcc', '#cc99ff'],
];



Even though my menu descriptions are for 3 levels, my menu item file contains only items for 2 levels.... is this causing any issues? i've pasted my menu_items.js file contents too below...


var MENU_ITEMS =[
["Staff / Contacts", "#",
["Organization Chart", "includes/documents/staff/SSorgchart.pdf"],
["Partnership Program", "LiaisonPartnership.html"],
["Staff", "staff.aspx"]
],
["Training / Documents", "#",
["Classroom Courses", "Classroom_Courses.html"],
["Reference Doc.", "Reference%20Docs.pdf"],
["Online Courses", "OnlineCoursesMain.html"]
],
["Sign In", "sslogin.aspx"]
];



Any help is really appreciated. Advance thanks too.

arun.
View User's Profile View All Posts By User U2U Member
olga
Administrator

Posts: 84
Registered: 11/22/2004
Member Is Offline
posted on 3/30/2005 at 09:04 PM Reply With Quote

You should remove attribute 'background' from all your static styles ( in the menu.css file).
View User's Profile View All Posts By User U2U Member
arunkj
Junior Member

Posts: 4
Registered: 3/22/2005
Member Is Offline
posted on 3/31/2005 at 04:34 PM Reply With Quote

Thank you very much !

It works great ! I really appreciate your effort and support on this. Great work & thank you so much.

Arun.
View User's Profile View All Posts By User U2U Member
Post new thread

Related Links:
Product Page Tigra Menu
Product Demonstrations Live Demos:
Traditional Blue
White Steps
Inner HTML
All Together
Frames Targeting
Free Download Free Download
Free Download Menu Builders
Online Builder
Builder for Windows
Product Documentation Documentation:
Documenation Page
Change Log
Menus Comparison Table
Support Forum Support Forum
  		Tigra Menu PRO
Product Demonstrations Live Demos
Alignment & Multimenus
Unlimited Depth
Item sizing and positioning
Inner HTML
Frames, Targeting
Static Positioning
Free Download Menu Builders
Online Builder
Product Documentation Documentation
Documenation Page
Tigra Menu PRO FAQ
Change Log
Menus Comparison Table
Support Forum Technical Support
Support Forum
Customer Care System
Order Now ORDER NOW!
Add to Cart
View Cart
  		Product Page Tigra Menu GOLD
Functionality demos Functionality demos
Multiple
Cross-framed
Select-boxes
Effects
Design demos Design demos
Icons & arrows
Idea!
Hi there!
Matrix
MS Style
XP Style
Dots
3D-Buttons
Product Documentation Documentation
Documenation Page
Change Log
Menus Comparison Table
Support Forum Technical Support
Support Forum
Customer Care System
Order Now ORDER NOW!
Add to Cart
View Cart
 

 SoftComplex Forums  » Tigra Menu Product Family » Background color not changing on MouseOver Go To Top


Powered by XMB 1.9.1 Nexus
Developed By Aventure Media & The XMB Group © 2002-2004