Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #444555 Score: 0
    Profile photo of Therese Michael
    Therese Michael
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    picture perfect
    1 pt
    @tmichael9734

    Hi Everyone,

    I wish you’re all doing well, safe and healthy!

    Is there any way to display the tool tip of a button when it is tabbed by keyboard users?  I was able to show/hide the tip with On MEnter and MExit; but, this method is not accessible.

    Thanks for any help,

    Therese

    #444563 Score: 1
    Profile photo of Robert Aung-Naing
    Robert Aung-Naing
    Member
    beginner
    intermediate
    friend finder
    profile
    wise owl
    contributor
    17 pts
    @raungnaing

    Hi,

    Lectora has MouseEnter and MouseExit triggers but does not support focus and blur triggers. However, you can write a page level action that will set focus and blur events of the HTML elements and map them to the MouseEnter and MouseExit actions that  you already have. With this, when you tab to the button, focus event will fire and then it will call the MouseEnter action function that you already setup.

    Have a look at the sample title and try it out. Especially look at the page action (OnShowRunJS) which does the mapping of focus events to MouseEnter action functions. This approach only works after publishing or when you do Preview in browser. It does not work in Run Mode.

    Also, note that button40, button63, etc. in the page action refer to the HTML names of buttons. You can get those by selecting the button, going to Properties tab and hover or click on the small expand arrow in the lower-right corner of the first group of controls.

    Hope this fits your needs.

    Robert.

     

    This post has received 1 vote up.
    Attachments:
    1. FocusAction.zip
    #444567 Score: 0
    Profile photo of Therese Michael
    Therese Michael
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    picture perfect
    1 pt
    @tmichael9734

    Thank you Robert.  Could you please send me the JS as text here?  I cannot unzip the file.

    #444593 Score: 1
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    32 pts
    @CarlFink

    I copied this out of Robert’s file:

    triv$(‘button’,button40.div).get(0).onfocus = button40onOver;
    triv$(‘button’,button40.div).get(0).onblur = button40onOut;
    triv$(‘button’,button63.div).get(0).onfocus = button63onOver;
    triv$(‘button’,button63.div).get(0).onblur = button63onOut;
    triv$(‘button’,button143.div).get(0).onfocus = button143onOver;
    triv$(‘button’,button143.div).get(0).onblur = button143onOut;

    This post has received 1 vote up.
    #444595 Score: 0
    Profile photo of Robert Aung-Naing
    Robert Aung-Naing
    Member
    beginner
    intermediate
    friend finder
    profile
    wise owl
    contributor
    17 pts
    @raungnaing

    Thanks for replying Carl. I didn’t see the response until now.

    I can’t attach awt file so I’ll just copy the contexts of FocusAction.awt here:

    <?xml version=”1.0″ encoding=”UTF-8″?>
    <lectoratitle lectorafileversion=”18.2″ lectoraproductversion=”18.2.3″ lectoraproductname=”Lectora Inspire” lectoraproductcode=”LD”>
    <titledata titletype=”standard”>
    <currentid>1970</currentid>
    <currtheme></currtheme>
    <language>en</language>
    <ribbonpasteoption>0</ribbonpasteoption>
    <logpixelsx>96</logpixelsx>
    <logpixelsy>96</logpixelsy>
    </titledata>
    <resourcedata />
    <variabledata>
    <variable id=”1071″ referenceobjectid=”1068″>
    <name>Entry_0001</name>
    <initialvalue></initialvalue>
    <lastupdated>0</lastupdated>
    <reserved_variable />
    <automatic_variable />
    <form_variable />
    </variable>
    </variabledata>
    <objectdefaults />
    <objectdata>
    <title id=”1″ center=”center” respdesign=”true”>
    <name>FocusAction</name>
    <lastupdated>1590079193</lastupdated>
    <respprops>
    <phoneportrait>
    <title pubthisview=”true” />
    </phoneportrait>
    <tabletlandscape>
    <title pubthisview=”true” />
    </tabletlandscape>
    <phonelandscape>
    <title pubthisview=”true” />
    </phonelandscape>
    <tabletportrait>
    <title pubthisview=”true” />
    </tabletportrait>
    </respprops>
    <bgcolor>FFFFFF</bgcolor>
    <textcolor>000000</textcolor>
    <linkcolor>0000FF</linkcolor>
    <width>1009</width>
    <height>662</height>
    <font>
    <height>12</height>
    <facename>Arial</facename>
    </font>
    <page id=”2″ parent=”1″>
    <name>Page 1</name>
    <lastupdated>1590079315</lastupdated>
    <transitionin>
    <transtype>-1</transtype>
    <delay>0</delay>
    <speed>10</speed>
    <effect>0</effect>
    </transitionin>
    <action id=”1146″ parent=”2″ on=”show”>
    <name>OnShowRunJS</name>
    <lastupdated>1590079701</lastupdated>
    <actionitem actiontaken=”runjavascript”>
    <targetstring>triv$(&apos;button&apos;,button40.div).get(0).onfocus = button40onOver; triv$(&apos;button&apos;,button40.div).get(0).onblur = button40onOut; triv$(&apos;button&apos;,button63.div).get(0).onfocus = button63onOver; triv$(&apos;button&apos;,button63.div).get(0).onblur = button63onOut; triv$(&apos;button&apos;,button143.div).get(0).onfocus = button143onOver; triv$(&apos;button&apos;,button143.div).get(0).onblur = button143onOut;</targetstring>
    <browserWnd />
    </actionitem>
    </action>
    <text id=”186″ parent=”2″ ontop=”false” fixed=”false” proportional=”false” defaulttext=”none”>
    <name>Text Block</name>
    <lastupdated>1590079836</lastupdated>
    <possize>
    <point>
    <x>426</x>
    <y>161</y>
    </point>
    <size>
    <cx>200</cx>
    <cy>80</cy>
    </size>
    </possize>
    <cssclasses></cssclasses>
    <opacity>100</opacity>
    <bordereffect>
    <borderweight>1</borderweight>
    <linestyle>0</linestyle>
    <bordercolor>999999</bordercolor>
    <outline>0</outline>
    </bordereffect>
    <html>span.text186Font1 { font-size:16px; font-family:&quot;Arial&quot;, sans-serif; color:#010101;} &lt;p style=&quot;margin-left:0px;text-indent:0px;margin-top:0px;margin-bottom:0px;text-align:left;&quot; &gt; &lt;span class=&quot;text186Font1&quot; style=&quot;background-color:transparent&quot; &gt; &amp;nbsp;&lt;/span &gt;&lt;/p &gt; </html>
    <rtf>{\rtf1\ansi\deflang1033\ftnbj\uc1\deff1 {\fonttbl{\f0 \froman \fcharset0 Times New Roman;}{\f1 \fswiss Arial;}} {\colortbl\red0\green0\blue0 ;\red255\green255\blue255 ;\red0\green0\blue0 ;} {\stylesheet{\f1\fs24\cf0\cb1\ulc0 Normal;}{\cs1\cf0\cb1\ulc0 Default Paragraph Font;}} {\*\revtbl{Unknown;}} \paperw12240\paperh15840\margl1800\margr1800\margt1440\margb1440\headery720\footery720\deftab360\formshade\aendnotes\aftnnrlc\pgbrdrhead\pgbrdrfoot \sectd\pgwsxn12240\pghsxn15840\marglsxn1800\margrsxn1800\margtsxn1440\margbsxn1440\headery720\footery720\sbkpage\pgncont\pgndec \plain\plain\f1\fs24\ql\par} </rtf>
    <raw></raw>
    <numoflines>1</numoflines>
    <numpubbullets>0</numpubbullets>
    <textpublishlang>Inherit</textpublishlang>
    <marginsize>0</marginsize>
    </text>
    <textbutton id=”40″ parent=”2″ ontop=”true” fixed=”false” proportional=”false” initdisabled=”false”>
    <name>Button</name>
    <lastupdated>1590079302</lastupdated>
    <possize>
    <point>
    <x>160</x>
    <y>182</y>
    </point>
    <size>
    <cx>120</cx>
    <cy>40</cy>
    </size>
    </possize>
    <cssclasses></cssclasses>
    <opacity>100</opacity>
    <autosize>0</autosize>
    <type>20100</type>
    <linestyle>0</linestyle>
    <strokewidth>1</strokewidth>
    <strokecolor>0963B1</strokecolor>
    <text>Button One</text>
    <textcolor>FFFFFF</textcolor>
    <fontsize>-16</fontsize>
    <fontheight>12</fontheight>
    <fontstyle>0</fontstyle>
    <textalignment>1</textalignment>
    <fontfamily>Lucida Sans Unicode</fontfamily>
    <handledata>
    <controlpoint value=”50″ />
    </handledata>
    <shapefillinfo fillstyle=”2″ gradientangle=”270″ bevelheight=”0″ color=”085394″>
    <gradientstop color=”0064BB” value=”0.000000″ />
    <gradientstop color=”007CE9″ value=”0.500000″ />
    <gradientstop color=”1994FE” value=”1.000000″ />
    </shapefillinfo>
    <action id=”45″ parent=”40″ on=”mouseenter”>
    <name>OnMEnterChange</name>
    <lastupdated>1590079273</lastupdated>
    <actionitem actiontaken=”changecontents” target=”object” targetobject=”186″>
    <targetstring>Button One</targetstring>
    <browserWnd />
    </actionitem>
    </action>
    <action id=”1564″ parent=”40″ on=”mouseexit”>
    <name>OnMExitChange</name>
    <lastupdated>1590079302</lastupdated>
    <actionitem actiontaken=”changecontents” target=”object” targetobject=”186″>
    <browserWnd />
    </actionitem>
    </action>
    <type>20100</type>
    </textbutton>
    <entryfield id=”1068″ parent=”2″ ontop=”false” fixed=”false” proportional=”false” formvar=”1071″>
    <name>Entry_1</name>
    <lastupdated>1590079759</lastupdated>
    <possize>
    <point>
    <x>162</x>
    <y>482</y>
    </point>
    <size>
    <cx>150</cx>
    <cy>24</cy>
    </size>
    </possize>
    <cssclasses></cssclasses>
    <opacity>100</opacity>
    <numchars>40</numchars>
    <default></default>
    <bgcolor>FFFFFF</bgcolor>
    </entryfield>
    <textbutton id=”63″ parent=”2″ ontop=”true” fixed=”false” proportional=”false” initdisabled=”false”>
    <name>Button 2</name>
    <lastupdated>1590079755</lastupdated>
    <possize>
    <point>
    <x>160</x>
    <y>282</y>
    </point>
    <size>
    <cx>120</cx>
    <cy>40</cy>
    </size>
    </possize>
    <cssclasses></cssclasses>
    <opacity>100</opacity>
    <autosize>0</autosize>
    <type>20100</type>
    <linestyle>0</linestyle>
    <strokewidth>1</strokewidth>
    <strokecolor>0963B1</strokecolor>
    <text>Button Two</text>
    <textcolor>FFFFFF</textcolor>
    <fontsize>-16</fontsize>
    <fontheight>12</fontheight>
    <fontstyle>0</fontstyle>
    <textalignment>1</textalignment>
    <fontfamily>Lucida Sans Unicode</fontfamily>
    <handledata>
    <controlpoint value=”50″ />
    </handledata>
    <shapefillinfo fillstyle=”2″ gradientangle=”270″ bevelheight=”0″ color=”085394″>
    <gradientstop color=”0064BB” value=”0.000000″ />
    <gradientstop color=”007CE9″ value=”0.500000″ />
    <gradientstop color=”1994FE” value=”1.000000″ />
    </shapefillinfo>
    <action id=”1586″ parent=”63″ on=”mouseenter”>
    <name>OnMEnterChange</name>
    <lastupdated>1590079329</lastupdated>
    <actionitem actiontaken=”changecontents” target=”object” targetobject=”186″>
    <targetstring>Button Two</targetstring>
    <browserWnd />
    </actionitem>
    </action>
    <action id=”1585″ parent=”63″ on=”mouseexit”>
    <name>OnMExitChange</name>
    <lastupdated>1590079308</lastupdated>
    <actionitem actiontaken=”changecontents” target=”object” targetobject=”186″>
    <browserWnd />
    </actionitem>
    </action>
    <type>20100</type>
    </textbutton>
    <textbutton id=”143″ parent=”2″ ontop=”true” fixed=”false” proportional=”false” initdisabled=”false”>
    <name>Button 3</name>
    <lastupdated>1590079752</lastupdated>
    <possize>
    <point>
    <x>160</x>
    <y>382</y>
    </point>
    <size>
    <cx>120</cx>
    <cy>40</cy>
    </size>
    </possize>
    <cssclasses></cssclasses>
    <opacity>100</opacity>
    <autosize>0</autosize>
    <type>20100</type>
    <linestyle>0</linestyle>
    <strokewidth>1</strokewidth>
    <strokecolor>0963B1</strokecolor>
    <text>Button Three</text>
    <textcolor>FFFFFF</textcolor>
    <fontsize>-16</fontsize>
    <fontheight>12</fontheight>
    <fontstyle>0</fontstyle>
    <textalignment>1</textalignment>
    <fontfamily>Lucida Sans Unicode</fontfamily>
    <handledata>
    <controlpoint value=”50″ />
    </handledata>
    <shapefillinfo fillstyle=”2″ gradientangle=”270″ bevelheight=”0″ color=”085394″>
    <gradientstop color=”0064BB” value=”0.000000″ />
    <gradientstop color=”007CE9″ value=”0.500000″ />
    <gradientstop color=”1994FE” value=”1.000000″ />
    </shapefillinfo>
    <action id=”1618″ parent=”143″ on=”mouseenter”>
    <name>OnMEnterChange</name>
    <lastupdated>1590079337</lastupdated>
    <actionitem actiontaken=”changecontents” target=”object” targetobject=”186″>
    <targetstring>Button Three</targetstring>
    <browserWnd />
    </actionitem>
    </action>
    <action id=”1617″ parent=”143″ on=”mouseexit”>
    <name>OnMExitChange</name>
    <lastupdated>1590079309</lastupdated>
    <actionitem actiontaken=”changecontents” target=”object” targetobject=”186″>
    <browserWnd />
    </actionitem>
    </action>
    <type>20100</type>
    </textbutton>
    </page>
    </title>
    </objectdata>
    </lectoratitle>

     

    #444630 Score: 1
    Profile photo of Therese Michael
    Therese Michael
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    picture perfect
    1 pt
    @tmichael9734

    Yessss! It works… Thanks a million Robert and Carl…

    The 508 team requested the tips for all tabbed buttons in the header (home, menu, etc.), so I put the OnShow action in the title level, and it worked great on every page.

    Many thanks again.  Please take care and stay safe,

    Therese

    This post has received 1 vote up.
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.