Fit Info Textbox size, depending on the textlength

[Goshi]

Hi,

I´m using info boxes to show text in my tour. Sometimes the text is really long and sometimes it´s just a few words. Can I do a logic block, to check the amount of text and fit the hight to the text?

Another question is:
Can I also include an image in a textbox?
Or do I have to build an own ht for this?

Thank you
Goshi!

[Goshi]

I figured out a good solution for me.

I´m putting the text in an external html document.
Attaching a css to it and then loading the document as external link.

So the Background is always adopting to the right text length and fitting into mobile or desktop screens. If I have a long text, I can style the text or place images into the text. For really long text, I will have another css style attached. It´s also easy to include a text, for me it works fine.
Also the workflow is good, because I can just upload the html file to my ftp and dont have to upload the tour or a piece of the tour!

Maybee this helps other, too.

[Tony]

Hi Goshi,

Good solution

cheers,

Tony

[Goshi]

Ah, I thought

It is only solved for desktop applications!
If im using it on mobile (for example iPad or iPhone) the popup of the website opens up a new tab in the browser (so the tour is left). Has anyone an idea how to avoid this?

If I´m using the text-popup hotspot, it pops up on top of the tour (But this is not an option, because of images I have to load)

To style it would be no problem, because I just can put another css for mobile.
Looking forward to your support,
best Goshi

[Goshi]

Anyone any idea, how the popup works on mobile devices, so the url_popup is not opened in a new tab?
Would be so nice to have this solved, still have 2 days left

[Tony]

Hi Goshi,

Do you have a link to the html page you are loading?

Tony

[Tony]

Hi,

Is this the kind of thing you are looking for?

https://s3-ap-southeast-2.amazonaws.com ... index.html

Tony

[Goshi]

Hi Really thank you for your reply,
I tested so much but right now, I have no idea:

If I´m loading the external website, the "tour" ist ignoring it´s css-style from the html file which I´m loading.#

linkt to the file:
http://www.teuto360-der-wald-in-uns.de/ ... _TE02.html
(in the browser directly it looks right)

in the tour I dont see the changes I´m doing...

If Im watching it in the tour, with the same html,
no way it is working right now, but I have no clue how! No the typo is the right one and the div elements having the same size, but I have no idea why.
I tried to include my css in the projec, but I was messing up everything. If im making changes right now, it has no effect again.

[Tony]

Hi Goshi,

How does this one look? https://s3-ap-southeast-2.amazonaws.com ... index.html

I've used your html page and css and created two versions of it, one for desktop and one for mobile. They have slightly different sized boxes and the text for mobile is smaller. I use a logic block to change the page based on the trigger "isMobile".

Desktop

hotspot-image-link3.jpg (644.12 KiB) Viewed 5519 times

Mobile

Screenshot_20190530-130147_Firefox.jpg (473.53 KiB) Viewed 5519 times

If I´m loading the external website, the "tour" ist ignoring it´s css-style from the html file which I´m loading.#

I think you need an absolute URL to css or place it in the same folder as the .html page. What I did is add the CSS to the .html document.

Tony

[Goshi]

Hi tony,

thanks a lot, that´s a good step in the right direction, thank you!
The idea with the logic block is nice!

On desktop it works for me, but on the mobile version I have no scroll bar, to see the full text, In your screenshot I see more text on your mobile.
Can you post me the project, so I can have a look to it in pano2vr, that would be really nice!

Thank you for your support!

[Goshi]

So I tried to apply my css to the tour, by adding it as external css-file. After this the tour was messed up, so I unchecked the hitbox and deleted the path.
The Tour looked normal again, but my css style was inside the styles.css files restiong next to the index file of the tour. After this everything was looking great, so it will use that file to search for css styles??!!

Anyway it is really good, because I have severalt different hotspot styled with that and if I´m pasting it to every file, a change will be horrible to do. Right now I can just update the styles.css and it works.

[Hopki]

Hi Guys,
The text box will change length depending on the amount of text.
Example: A text with Word Wrap and Auto Size selected will change length depending on the amount of text.
To change the direction it expands, use the position anchor point.
If anchored top it will expand downwards.
If anchored bottom it will expand upwards.
Regards,
Hopki

[Goshi]

Hi Hopki,

thanks for the information. Right now, my tour is nearly on the way to be finished, but I still have the problem that on mobile devices, the ht is opnening in a new browser tab, what is really bad because usr´s leaving the tour.

If I´m using the example fromt Tony, it works fine, the problem ist I dont use the ht_info,
Im using the ht_url, so I can load the content as external webside. This is really good for me, because if the client wants to change something I can just adapt the css style of all of the content, without uploading the whole tour!
I already tried as target _blank, _self, _top ... int the selection pane in pano2vr, without any changes.

Any idea how to solf it?

[Hopki]

Hi Goshi,
If you are using the Web Link component then it has logic blocks that control this.

Screenshot 2019-06-25 at 16.41.10.png (46.51 KiB) Viewed 5316 times

The reason that on mobiles it does not use the iframe is that they do not scroll.
However, if you want to use an iframe then looking at the screenshot above you need to remove the image, ht_url_image_newpage.
Then select the ht_url_image and remove its visible logic block and select, visible.

You can also remove the variable opt_url from the skin.
Regards,
Hopki

[Goshi]

Hi,
thanks for the response, but I dont get it to work :/
So here is the test link:
http://www.teuto360-der-wald-in-uns.de/ ... index.html

If you are clicking the white I icon on the tree, it´s loading the url but in another frame (on mobile). I tried your approach, but maybee I just didnt unterstood it.
Also if im trying to load an external other webside, it´s popping up in a new browser tab on the mobile. I really need to fix it and it hasn´t to be an iframe, but the popup has to work.

Yes I´m using the web link component, but modified it already.
I have different icon for long text, short text and intro text (the one with the i). All of them loading an external webside which is styled by a css file.
See below my modification of the ht_url



If Im doing it like tony suggested, my images are not loaded, and the style is messed up.
Thank you for your help!!!