Board Logo

how to implement mouseover?
ychadha - 12/12/2006 at 09:29 AM

Hi

Could you please guide me through the process of implementing mouseover in Tree Menu PRO?
I read through the documentaion and also went through the relevant posts in the product forum, but still the process is not very clear to me.

Thanks


tigra - 12/12/2006 at 10:12 AM

you can assign different CSS classes to the tree items in different states in tree_tpl.js. Example from demo1 provided in the distribution package:

Code:
'style_48':'mout', // normal root caption style
'style_112':'mover', // mouseovered normal root caption style


then in the tree.css you define the mentioned CSS classes with different properties to create the rollover effect:

Code:
.mout {
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
background-color: #ffffff;
text-decoration: none;
width: 100%;
padding: 0px;
}
.mover {
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
background-color: #4682B4;
text-decoration: none;
width: 100%;
padding: 0px;
}


In this particular case the background color changes on mouseover.


ychadha - 12/12/2006 at 10:32 AM

Thanks for the prompt reply...I guess I didn't explain the part which I did't understand properly.
The entries are already present in the tree_tpl.js and the css file for the mouseover.
For handling the mouseover, I added the following in the item-events section of tree_tpl.js

'onItemMover':'onMouseOverItem' // when the mouse is over some item

and as per one of the posts earlier posted in the forum, the item scope setting for tt is to be used in the following manner:

Use item scope settings key 'tt', e.g.:
['Text', 'link.html', {'tt':'Item description'}]

Now my question is: Where do I apply these settings?

Thanks,


tigra - 12/12/2006 at 11:52 AM

Custom event handler (onItemMover) has no relation with 'tt' item scope key. 'tt' is applied to items in the tree_items.js and assigns the tooltip message for the item when mouse remains over the item for some time (this is the equivalent of assigning title="" attribute to the regular <a href=""> tag). With onItemMover in tree_tpl.js you attach your own function (in this case function onMouseOverItem) to the mouseover event of the item. (this is the equivalent of assigning onmouseover="" attribute to the <a href="">). Custom function can be defined anywhere from where it is can be called by the tree in the page.


ychadha - 12/12/2006 at 02:40 PM

ok...i checked and tried a fw things...but there is nothing called tree_items.js with us.
all the files i could find which had a 'tree' in it are :
tree.css
tree_tpl.js
tree.js

any pointers?


Thanks


tigra - 12/12/2006 at 02:44 PM

tree items structure may be inside the main html document. check for something that starts with "var TREE_ITEMS" or similar.


Softcomplex: http://www.softcomplex.com/
Back to forum: http://www.softcomplex.com/forum/