Example: html div inside krpano with scrolling support

Quote from Suso Barral

Hi Klaus

"Here a link"
I don´t see it

Thanks
Suso

Display More

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 ) Thanks!

Best regards,

Fernando

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

1) set id to the div element:

<action name="add_html_code" type="Javascript"><![CDATA[


		var div = document.createElement("div");
		
		// basic styles to fit into the layer size and allow scrolling:
		
		div.id = "mylist";
		div.style.width = "100%";
		div.style.height = "100%";
		div.style.overflow = "auto";
		div.style.boxSizing = "border-box";
		div.style.padding = args[2] ? (args[2] + "px") : "0";

(...) continued with original klaus code

2. Create js action:

<action name="show_scroll" type="Javascript">
<![CDATA[


var name = "list_scroll";
list_scroll=document.getElementById('mylist').scrollTop
krpano.set("myscroll", list_scroll);krpano.showlog();krpano.trace(get(myscroll));


]]>
</action>

3. Create layer for show scroll position:

<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

...never mind...

Tuur

ERROR: show_scroll - TypeError: krpano.showlog is not a function

This is the full example. To use:Change the scroll position, then Press first button to copy this position, change again the scroll position, press the second button to restore the saved position.
Best regards,
Fernando
PD.
How to post examples as this without to remove license or encrypt xml?

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>

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

Quote from klaus.krpano

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

Display More

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

Or so

<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 . Reply to post

Thanks Klaus, very useful!

Hi Klaus

Quote from panorama07

Therefore here a full example:
Example
XML Source

is there any way to change scrollbar color?
and is it possible to use xml inside it(to scroll xml content)??
thanks

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