rollover javascript (for IE in quirks mode) for objects inside contentPane

Hi there, Has anyone been able to add rollover effects to the contentPane objects of the main page? I had doctype definition and realised that in IE everything was going a bit all over the place. I'm sticking with the standard way Mendix outputs index.html and index3.html, but would like to add at least some javascript rollovers to some objects. I know it's done on the toolbar and it's also easy to add listeners to main page components. Direct access through DOM is quite difficult as, first I don't have all elements with IDs (as they use "mxid" instead), and then as the content area in the application changes, and the main page is no longer loaded becomes a bit tricky to even add event listeners to the anything inside the contentPane. I've managed quite easily event listeners on the main components (topPane, mainbox, footer, etc). With some persistence I've managed some event listeners on objects well inside "tableColumn" table cells albeit is all quite cumbersome and a bit flaky too. Has anyone added some rollover scripts to objects inside contentPane, to work for IE browsers? by the way, the :hover pseudo-class used in style sheet works absolutely fine for all other browsers except IE. LR.
2 answers

Hi Luis,

content inside the contentPane is controlled by the client screen manager. It is dynamic and content gets switched in and out of it based on interaction with the server or with the user. It isn't actually set up for external event handlers. One of the reasons being the tracking of connected event handlers and their corresponding disconnection when content is destroyed (to allow the GC to clean up and prevent memory leaks).

The attribute 'mxid' you find inside forms is a custom identifier that is unique per form, whereas the 'id' attribute has to be unique per document. Using id would make it, ah, technically challenging to have multiple instances of the same form in the browser.

Where exactly are you trying to apply this rollover behaviour (which widgets/nodes)?


Hi Michiel,

btw, many thanks for the LogoViewer (worked really well!).

re: We have some action trigger buttons where we've added a secondary style class "myClass". This allows me to style the action button with a given image by selecting those specific table cells instead of going directly to a "ViewButton" class div. So basically I have something like this:


<td class="TableColumn myClass">
    <div class="ViewButton" mxid="actionTrigger1">
        <span id="mendix_widget_MxButton_0" validate="none" progressbar="none" mxaction="onclick:do_some_action" dojotype="mendix.widget.MxButton" async="false" mxcontext="4" content_id="825" widgetid="mendix_widget_MxButton_0">


.myClass .ViewButton span

Like this I only style the buttons I want. All good so far. I've added a second style where I use the :hover pseudo-class for the rollover effect. Again all fine as I am normally using firefox and firebug. It works all fine in all browsers with or without DocType definition, except in IE, where without defining a DocType I cannot use the :hover in divs, spans and so on, so I have to resort to javascript. We cannot use doctype due to other problems. So that's basically it, and it has been quite painful to access anything inside the contentPane, so I thought that it could be some other way out there.