I’d like to create an accordian with menus inside each section with rollover effects. Is there a way to do this easily?
The trouble I am having is that if I use straight HTML inside each section of the accordian then I have trouble getting the individual items to properly size across all browsers.
This is an example of what I’m trying to achieve… dynamicdrive.com/dynamicinde … glossy.htm
I can accomplish this with some CSS hacks and either tables or unordered lists, however, it would seem as though there would be an easier way to accomplish this using the dhtmlx library.
You can use attachObject mehod to attached the necessary content to the accordion.
dhtmlx.com/docs/products/dhtmlxA … /grid.html
re: Accordian with menu inside
does attach object handle the sizing to 100% or does that all need to be done manually to work through various browsers.
As far as a grid, it seems as though creating a custom style sheet (to get a look similar to the cited example) would be almost as much effort as dealing with the straight HTML with the exception of the cross browser issues.
am I missing something?
The attachObject method just puts the object into the accordion cell. It doesn’t make any mofications with its style.
In case of grid you should create a custom skin. The article about it - dhtmlx.com/docs/products/dhtmlxG … _skin.html
Took a look at the custom skin for the grid and it is a lot easier than I first thought. This should give me a “menu” with rollover effects.
The rollover effects were created by enabling LightMouseNavigation, however it appears as though the LightMouseNavigation uses .rowselected. How would I handle highlighting a row that is clicked, separate and apart from the .rowselected descriptor in the style sheet which is used for the rollover effect. In other words, when you roll over each cell / menu item the row is highlighted and takes on the .rowselected style. When you click on a cell / menu item I’m going to add an event and I want that event to be able to change the cell / menu item that was selected to a different background color and to make the font bold as well as to change the previously selected row back to it’s “normal” style.
There is onRowSelect event. Its handler gets row id and column index of clicked cell.
grid.attachEvent(“onRowSelect”,function(id,index){
…
})
To set cell style you can use the setCellTextStyle(row_id,ind,styleString) method.
The full list of events is dhtmlxGrid/doc/events.html. All methods are presented in dhtmlxGrid/doc/alpha.html