Example: html div inside krpano with scrolling support

  • Hi, this is about the klaus example "div inside krpano" and the user indexofrefraction code in order to modify the text of div section for handheld device:

    I modified the project for working with styles in HTML file instead multiple styles lines in .xml, example:

    old xml (witout use class) :

    <data name="info"><![CDATA[
    <span style="text-decoration:none;cursor:pointer;font-size:16px;" >
    Solution by indexofrefraction user, for change text size if handheld device:
    var ishandheld = document.getElementById('krpanoSWFObject').get('device.handheld');
    var fs = (ishandheld == true || ishandheld == 'true') ? 20 : 16;
    div.innerHTML = args[1].replace(/font-sizeW:Wd+px/g, 'font-size:'+fs+'px');

    current xml:

    <data name="info"><![CDATA[
    <span class="panos">

    In current html add style definition:
    .panos { color:#B6D1F0;text-decoration:none;cursor:pointer;font-size:1rem }
    .panos_handheld { color:#B6D1F0;text-decoration:none;cursor:pointer;font-size:1.5rem }

    For change the chain class="panos", with class="panos_handheld" if the device is handheld, my solution is:

    var ishandheld = document.getElementById('krpanoSWFObject').get('device.handheld');
    var fs = (ishandheld == true || ishandheld == 'true') ? 'panos_handheld' : 'panos';
    div.innerHTML = args[1].replace(/class="panos"/g, 'class='+fs);

    (100% inspired (almost copied) in solution of indexofrefraction user *thumbsup* ) Thanks!

    Best regards,


    Edited once, last by Fernando (November 7, 2018 at 1:16 AM).

  • Hi. if you need to known the current scroll position:

    1) set id to the div element:

    (...) continued with original klaus code

    2. Create js action:

    3. Create layer for show scroll position:

    <layer name="show_scroll"
    html="click to show scroll position"

    Finish, now you can see the current scroll position for coding.

    Best regards,

    Edited 3 times, last by Fernando: solved (April 4, 2019 at 2:35 PM).

  • Hi,

    This line: onloaded="add_html_code(get(data[html_example_code].content), 10);"

    How can I make this an onclick event on a hotspot? I've tried to add the add_html_code to set(layer[html_div]....). But I cant figure out how to make it work.


    <hotspot onclick="Too here --> "/>
    <layer name="html_div" onloaded="Move this --> add_html_code(get(data[html_example_code].content), 10);" />
    <data name="html_example_code">
    <![CDATA[ ... ] ]>

    Edited 3 times, last by klaea (May 29, 2019 at 2:51 PM).

  • Hi,
    I'm also trying to call the action in a hotspot onclick like so but the data doesn't populate the div.

    js(add_html_code(get(data[html_example_code].content), 10));

    Is there anything else I need to add to be able to get data to populate the div onclick?
    It currently only seems to work in the onloaded attribute of the html_div layer. I know I can have multiple html_div layers with separate data applied to each onloaded.

    But is there a way to use just the one html_div layer and add different divs to the layer?

    Thanks for any help

  • Is it possible to change the width of the scroll and its color on the mobile?

  • I tried it and it works

    <div id="close" onclick="document.getElementById('krpanoSWFObject').call('set(layer[html_div].visible,false); set(layer[html_div].enabled,false);')" >
        <img src="close.png"  style="width:20; height:20px;  cursor:pointer; float:right;" />

    Or so

    <img src="close.png" style="width:20; height:20px; cursor:pointer; float: right;" 

    I didn’t notice *smile* . Reply to post

  • Very interesting discussion.
    Is it possible to insert an image in the div block?

    For example:

    <li>With support for browser-based-scrolling by mouse-wheel, scroll-bars and touch-controls.</li>
    <li>Fully integrated into krpano as &lt;layer&gt; container element.</li>
    <img src="acb.jpg" alt="test image">

    I can't link correctly the image.
    Where is my mistake,

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!