Support Forum Softcomplex logo
About Us  | Services  | Download  | Order  | Support  | |
| Search | Today's Posts | Stats | Board Rules | Not logged in [ Login | Register ]
go to bottom
Last active: Never

Printable Version | Subscribe | Add to Favourites   Post new thread
Author: Subject: how to implement mouseover?
ychadha
Junior Member

Posts: 3
Registered: 12/4/2006
Member Is Offline
posted on 12/12/2006 at 09:29 AM Reply With Quote
how to implement mouseover?


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
View User's Profile View All Posts By User U2U Member
tigra
Administrator

Posts: 2049
Registered: 6/17/2002
Location: US, CO
Member Is Offline
posted on 12/12/2006 at 10:12 AM Reply With Quote

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.
View User's Profile View All Posts By User U2U Member
ychadha
Junior Member

Posts: 3
Registered: 12/4/2006
Member Is Offline
posted on 12/12/2006 at 10:32 AM Reply With Quote

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,
View User's Profile View All Posts By User U2U Member
tigra
Administrator

Posts: 2049
Registered: 6/17/2002
Location: US, CO
Member Is Offline
posted on 12/12/2006 at 11:52 AM Reply With Quote

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.
View User's Profile View All Posts By User U2U Member
ychadha
Junior Member

Posts: 3
Registered: 12/4/2006
Member Is Offline
posted on 12/12/2006 at 02:40 PM Reply With Quote

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
View User's Profile View All Posts By User U2U Member
tigra
Administrator

Posts: 2049
Registered: 6/17/2002
Location: US, CO
Member Is Offline
posted on 12/12/2006 at 02:44 PM Reply With Quote

tree items structure may be inside the main html document. check for something that starts with "var TREE_ITEMS" or similar.
View User's Profile View All Posts By User U2U Member
Post new thread

Related Links:
Product Page
Product Demonstrations Live Demos
Multiple Trees
Frames Targeting
Icons and Styles Overloading
Event Handling
Performance Test
Version 1.2 features
Product Documentation Documentation
Documenation Page
Change Log
Support Forum Technical Support
Support Forum
Customer Care System
Order Now ORDER NOW!
Add to Cart
View Cart
 

Go To Top


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