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;" >
    example1
    </span><br><br>
    (...)
    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">
    example1
    </span><br>

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

    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,

    Fernando

    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:

    Code
    <layer name="show_scroll"
    type="text"
    x="10"
    y="10"
    html="click to show scroll position"
    onclick="show_scroll();"
    />


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

    Best regards,
    Fernando

    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.

    Example:

    <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[ ... ] ]>
    </data>

    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
    Red

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

  • I tried it and it works

    Code
    <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;" />
    </div>


    Or so

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

    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,
    Marco

Participate now!

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