Example: html div inside krpano with scrolling support

  • Hi,

    there were recently a few requests about how to bring a html div element into krpano and allow using the 'native' browser-based scrolling (e.g. by mouse-wheel, scroll-bars or touch-controls) inside it.

    Just adding html-code would be possible also by using the textfield plugin and scrolling could be added by using the scrollarea plugin, but for letting the browser handle the scrolling it gets a bit more tricky because in this case the event-handling between krpano and the browser would need to get 'coordinated' correctly.

    Therefore here a full example:
    Example
    XML Source

    Is uses a normal <layer> container element puts any kind of html-content inside it.

    I'm also considering bringing that functionality directly into krpano, maybe as extended textfield or as layer with type="html" or something like that.

    Best regards,
    Klaus

  • Hi,

    Great, this has come along at a perfect time for me!

    Maybe I am missing something as when I use the example xml provided and stick it in a tour created with the normal template, the loadscene in the startup actions causes the layer not to appear.

    Thanks.

  • Maybe I am missing something as when I use the example xml provided and stick it in a tour created with the normal template, the loadscene in the startup actions causes the layer not to appear.


    Either define the layer inside the scene where you want it - or add keep="true" to the layer when defining it outside a scene and using it for all scenes.

  • Hi, this is a question about klaus´s example:

    <data name="hosp"><![CDATA[
    HOSPEDAJES:<br>
    <span style="text-decoration:none;cursor:pointer;font-size:16px;" onclick="document.getElementById('krpanoSWFObject').call('miprueba();');" style="color:#FFFFFF;">Ambos Mundos. Hotel</span><br>

    ]]></data>

    How to use this example either for mobile and normal devices? I need for example if mobile font-size:24px; else 16px.

    Any idea?

    Greets,
    Fernando.

  • Hi,

    you could e.g. define different data elements - one for desktop and tablets and one for mobiles:

    Code
    <data name="hosp" devices="normal">
      ... font-size:16px; ...
    </data>
    
    
    <data name="hosp" devices="mobile">
      ... font-size:24px; ...
    </data>

    Best regards,
    Klaus

  • Thank very much Klaus, That had it thinking, but I have too many data elements: They are 40 categories or more than I would have to duplicate. Won't there be another solution based in javascript?

    Best Regards,
    Fernando


    you can do that yourself.. use something like...

    Code
    <data name="hosp" devices="normal"> ... {{FONTSIZE}} ... </data>


    then before displaying the page
    parse your data[hosp].content and replace {{FONTSIZE}} with your font size

  • Thanks Index, it was my initial idea, that works but repeating code.
    I want to adapt the good Klaus´s example optimized for my project: 40 categories, 200 item each.


    Partial code:


    <layer name="html_div" type="container"
    (...)
    onloaded.normal="
    add_html_code(get(data[categ1_normal].content), 10);"
    onloaded.mobile="
    add_html_code(get(data[categ1_mobile].content), 10);"
    />

    <data name="categ1_normal"><![CDATA[
    HOSPEDAJES:<br>

    <span style="text-decoration:none;cursor:pointer;font-size:16px;" onclick="document.getElementById('krpanoSWFObject').call('any_action();');" style="color:#FFFFFF;">Item1</span><br>

    <span style="text-decoration:none;cursor:pointer;font-size:16px;"" onclick="document.getElementById('krpanoSWFObject').call('any_action();');" style="color:#FFFFFF;">Item2</span><br>
    (...)

    <span style="text-decoration:none;cursor:pointer;font-size:16px;"" onclick="document.getElementById('krpanoSWFObject').call('any_action();');" style="color:#FFFFFF;">Item200</span><br>


    ]]></data>

    <data name="categ1_mobile"><![CDATA[
    HOSPEDAJES:<br>

    <span style="text-decoration:none;cursor:pointer;font-size:24px;" onclick="document.getElementById('krpanoSWFObject').call('any_action();');" style="color:#FFFFFF;">Item1</span><br>

    <span style="text-decoration:none;cursor:pointer;font-size:24px;"" onclick="document.getElementById('krpanoSWFObject').call('any_action();');" style="color:#FFFFFF;">Item2</span><br>
    (...)

    <span style="text-decoration:none;cursor:pointer;font-size:24px;"" onclick="document.getElementById('krpanoSWFObject').call('any_action();');" style="color:#FFFFFF;">Item200</span><br>


    ]]></data>

    In this solution we have to do it everything two times: one for NORMAL and another for MOBILE, an inefficient use to DEVICES in this case. For normal-simple projects that would be all right.

    For that reason I look for javascript solution.


    Best Regards,
    Fernando

  • i think you didnt understand what i suggested.

    Code
    <data name="categ1"><![CDATA[
    HOSPEDAJES:<br>
    <span style="text-decoration:none;cursor:pointer;font-size:16px;" onclick="document.getElementById('krpanoSWFObject').call('any_action();');" style="color:#FFFFFF;">Item1</span><br>
    <span style="text-decoration:none;cursor:pointer;font-size:16px;"" onclick="document.getElementById('krpanoSWFObject').call('any_action();');" style="color:#FFFFFF;">Item2</span><br>
    (...)
    <span style="text-decoration:none;cursor:pointer;font-size:16px;"" onclick="document.getElementById('krpanoSWFObject').call('any_action();');" style="color:#FFFFFF;">Item200</span><br>
    ]]></data>

    and

    Code
    <action name="add_html_code" type="Javascript"><![CDATA[
    ...
    var content = krpano.get(args[1]); 
    var fs = krpano.device.mobile ? 24 : 16;
    content = content.replace(/fontsize\:\d+px/, 'fontsize:'+fs+'px');
    div.innerHTML = content;
    ...
    ]]></action>

  • Hi,

    see the 'Here a link for testing the krpano JS API' part in the example.
    It shows how to call any krpano code and that can be also used to remove or hide the layer (e.g. call removelayer or set visible to false).

    Best regards,
    Klaus



    Hi Klaus

    "Here a link"
    I don´t see it



    Thanks
    Suso

Participate now!

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