xPages repeat control onmouseover

Question

I have a repeat control that contains simple checkBox and computed field (doesn't really matter), like this: [ ] text1 [x] text2 [ ] text3 [x] text4 [x] text5

I want to show additional clickable icon next the current item/row when you hover a mouse pointer over it [ ] text1 (*) [x] text2 [ ] text3 [x] text4 [x] text5

Is that possible? Thanks

P.S. I need to show that icon regardless of where the mouse cursor (checkbox or text field). I want to show it for the current row (when mouse cursor somewhere within current row)

maybe I need to save row index in some scope variable... Any thoughts ? — VladP

Serdar Basegmez Serdar Basegmez · Accepted Answer · 2014-08-14T06:32:25

It's possible with an easy CSS trick. As an example, take the following repeat control:

<xp:table>
    <xp:tr>
        <xp:td></xp:td>
        <xp:td>
            <xp:label
                value="Some Header"
                id="label1">
            </xp:label>
        </xp:td>
    </xp:tr>
    <xp:repeat
        id="repeat1"
        rows="30"
        var="textValue"
        indexVar="index">
        <xp:this.value><![CDATA[#{javascript:["text1", "text2", "text3", "text4", "text5"] }]]></xp:this.value>
        <xp:tr
            styleClass="magicRow">
            <xp:td>
                <xp:button
                    value="x"
                    id="button1"
                    styleClass="magicButton">
                </xp:button>
            </xp:td>
            <xp:td>
                <xp:checkBox
                    text=""
                    id="checkBox1">
                </xp:checkBox>
                <xp:text
                    escape="true"
                    id="computedField1"
                    value="#{textValue}">
                </xp:text>
            </xp:td>
        </xp:tr>
    </xp:repeat>
</xp:table>

We have used the repeat control within a table, so it repeats row elements 5 times. Now we will use the following CSS to hide the magic button and show it only when mouse pointer is over the row:

tr.magicRow .magicButton { visibility:hidden; } 
tr.magicRow:hover .magicButton { visibility:visible; }

:hover is a useful CSS selector.

xPages repeat control onmouseover

2 Answers