You are not logged in.

Example: html div inside krpano with scrolling support

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

  • 1
  • 2

tmhok

Intermediate

Posts: 171

  • Send private message

21

Friday, October 5th 2018, 12:42am

Quoted from "Suso Barral"

Quoted from "klaus.krpano"

Quoted from "Suso Barral"

how can I put a button inside the html to close html div?

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
tmhok has attached the following image:
  • QQ图片20181005064050.png

Fernando

Intermediate

Posts: 235

Location: Habana, Cuba

Occupation: Architect, Photographer.

  • Send private message

22

Tuesday, November 6th 2018, 6:07am

solved: modify style for handheld device

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

This post has been edited 1 times, last edit by "Fernando" (Nov 7th 2018, 1:16am)

Fernando

Intermediate

Posts: 235

Location: Habana, Cuba

Occupation: Architect, Photographer.

  • Send private message

23

Tuesday, March 26th 2019, 10:00am

[solved] ...get the current scroll position

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

1) set id to the div element:


Source code

 
1
2
3
4
5
6
7
8
9
10
11
12

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

Source code

 
1
2
3
4
5
6
7
8
9

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

Source code

 
1
2
3
4
5
6
7

<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

This post has been edited 3 times, last edit by "Fernando" (Apr 4th 2019, 2:35pm) with the following reason: solved

Tuur

Sage

Posts: 3,414

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

24

Thursday, May 2nd 2019, 3:21pm

edited

...never mind...

Tuur *thumbsup*
https://www.virtualtuur.com
Skype:studiotuur

Krpano ToolBox: https://krpano.com/forum/wbb/index.php?p…&threadID=16023
Measure in 360 photos with : https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top

ramirox3

Intermediate

Posts: 259

Location: La Ceja, Colombia

Occupation: photographer

  • Send private message

25

Thursday, May 2nd 2019, 11:07pm

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

Fernando

Intermediate

Posts: 235

Location: Habana, Cuba

Occupation: Architect, Photographer.

  • Send private message

26

Friday, May 3rd 2019, 3:49pm

working example

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?
Fernando has attached the following file:

klaea

Beginner

Posts: 14

  • Send private message

27

Saturday, May 25th 2019, 4:28pm

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>

This post has been edited 3 times, last edit by "klaea" (May 29th 2019, 2:51pm)

Red

Trainee

Posts: 99

Location: Australia

Occupation: Virtual tour creator, VR app developer

  • Send private message

28

Monday, July 8th 2019, 9:44am

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
www.pano-ad.com.au

This post has been edited 1 times, last edit by "Red" (Jul 8th 2019, 3:27pm)

panorama07

Trainee

Posts: 58

  • Send private message

29

Friday, November 22nd 2019, 8:38pm

or mobile

Quoted 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
Is it possible to change the width of the scroll and its color on the mobile?

San7

Intermediate

Posts: 365

Occupation: coding in krpano

  • Send private message

30

Saturday, November 23rd 2019, 7:50am

I tried it and it works

Source code

 
1
2
3

<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

Source code

 
1
2

<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
http://novosibpano.ru/Plugins/

This post has been edited 1 times, last edit by "San7" (Nov 23rd 2019, 10:22am)

Artur

Beginner

Posts: 7

Location: Portugal

Occupation: Student

  • Send private message

31

Monday, March 2nd 2020, 12:26pm

Thanks Klaus, very useful! *thumbup*

Cestmoimahdi

Beginner

Posts: 21

Location: Germany

  • Send private message

32

Monday, March 16th 2020, 7:32am

Change scrollbar color

Hi Klaus

Quoted 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 *love*

mastucc

Beginner

Posts: 36

  • Send private message

33

Thursday, May 21st 2020, 7:23pm

Insert image

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

klaus.krpano

Administrator

  • "klaus.krpano" started this thread

Posts: 12,830

  • Send private message

34

Thursday, May 21st 2020, 9:13pm

Hi,

yes, you can add any html code, for images make sure the paths are correct (relative to the html file).

Also have a look at this example (included in the download package):
https://krpano.com/examples/#pp-blur

Best regards,
Klaus
  • 1
  • 2

Similar threads