You are not logged in.

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

Friday, May 25th 2018, 8:39am

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

jordi

Intermediate

Posts: 483

Location: Barcelona

Occupation: creating ideas & coding them

  • Send private message

2

Friday, May 25th 2018, 9:21am

nice code
everpano.com step beyond 360

spacerywirtualne

Professional

Posts: 919

Location: Poland, Europe

Occupation: krpano developer : virtual tours

  • Send private message

3

Friday, May 25th 2018, 9:24am

*w00t* *thumbup*


Thank you for this example. It is very useful.


Piotr
Your own online, cloud tool for creating virtual tours - www.cms4vr.com

facebook page :: youtube

cms4vr team *thumbsup*

jeromebg

Professional

Posts: 795

Location: Angers - France

Occupation: Photographer

  • Send private message

4

Friday, May 25th 2018, 9:24am

Lovely ! you're the best Klaus !!!

Tuur

Sage

Posts: 3,191

Location: Netherlands

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

  • Send private message

5

Friday, May 25th 2018, 10:17am

*love*
http://www.virtualtuur.com
Skype:studiotuur

6

Friday, May 25th 2018, 4:29pm

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.

7

Saturday, May 26th 2018, 9:13am

Thank you very much!
*thumbsup*

8

Saturday, May 26th 2018, 1:34pm

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.

Alexey Tkachenko

Professional

Posts: 760

Location: Sevastopol, Crimea, Russian Federation

Occupation: Interpreting, Building virtual tours

  • Send private message

9

Monday, May 28th 2018, 1:40pm

Very cool example, Klaus! *thumbup*
Regards,

Alexey

Fernando

Intermediate

Posts: 205

Location: Habana, Cuba

Occupation: Architect, Photographer, Programmer.

  • Send private message

10

Thursday, May 31st 2018, 2:27pm

Thanks very much Klaus *thumbsup* Very useful example. This is a new feature that is going to allow other powerful javascript functions as autocomplete, input, search engine, etc., Now easier way.

11

Thursday, May 31st 2018, 9:20pm

a very useful example, klaus!
tx!

that layer with type="html" would be welcome :)

Fernando

Intermediate

Posts: 205

Location: Habana, Cuba

Occupation: Architect, Photographer, Programmer.

  • Send private message

12

Wednesday, June 6th 2018, 7:11pm

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.

13

Wednesday, June 6th 2018, 7:45pm

Hi,

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

Source code

1
2
3
4
5
6
7
<data name="hosp" devices="normal">
  ... font-size:16px; ...
</data>

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


Best regards,
Klaus

Fernando

Intermediate

Posts: 205

Location: Habana, Cuba

Occupation: Architect, Photographer, Programmer.

  • Send private message

14

Wednesday, June 6th 2018, 7:58pm

define different data elements
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

15

Wednesday, June 6th 2018, 8:22pm

define different data elements
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...

Source code

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

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

Fernando

Intermediate

Posts: 205

Location: Habana, Cuba

Occupation: Architect, Photographer, Programmer.

  • Send private message

16

Wednesday, June 6th 2018, 11:56pm

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
Fernando has attached the following image:
  • ex1.jpg

This post has been edited 1 times, last edit by "Fernando" (Jun 7th 2018, 1:27pm)


17

Thursday, June 7th 2018, 5:18am

i think you didnt understand what i suggested.

Source code

1
2
3
4
5
6
7
<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

Source code

1
2
3
4
5
6
7
8
<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>

This post has been edited 1 times, last edit by "indexofrefraction" (Jun 7th 2018, 9:59am)


18

Wednesday, October 3rd 2018, 8:24pm

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



best greetings
Suso

19

Thursday, October 4th 2018, 11:01am

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

20

Thursday, October 4th 2018, 5:03pm

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