Changing a text box class with JavaScript

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Hopki
Gnome
Posts: 10623
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Thu Feb 06, 2020 9:58 pm

Hi,
Following a request to change the class of a text box in a post in the Pano2VR General forum I give this a bit of thought and spoke with Christoph Gnome.
This is a skin project so posted here in the Skins forum.

We have come up with this project that uses the Go To URL action with a JavaScrip call that finds the text box, then removes the current class and then replaces it with a different class from the CSS stylesheet.

As an example in the attached project, in the skin, there is a text box with the ID Title.

The button with the ID Button Zhi Mang Xing has an action to change the class in the text box which is:

1.png
1.png (28.22 KiB) Viewed 1817 times

The URL has the Javascript:

Code: Select all

javascript: skin.findElements('Title')[0].classList.remove('font1', 'font2', 'font3', 'font4', 'font5');
skin.findElements('Title')[0].classList.add('font1');
If you look at the code you will see that the first part finds the element Title which is one of the text boxes that need its class changed, then it removes any class it may have. The CSS Stylesheet I am using has five different classes, font1 to font 5. So I am removing all as I do not know which class the text box may have.

The next part of the JavaScript then finds the text box Title and adds the class 'font1'.

You will see in the buttons that change the class you need a call for each text box.
The good news is you can type out the JavaScript call for one text box then just copy and paste it changing the text box that needs the class to be changed.

For the Button, Button Zhi Mang Xing the URL is:

3.png
3.png (108.95 KiB) Viewed 1817 times

Note you only need the text javascript: at the start of the code.

This will then remove any classes from the text boxes with the ID's: Title, Description, Author, Date, Copyright, Source.
Then it will set the class font1 to all the text boxes.

Just to add a bit more wow to this I add two more actions to the buttons that change the class, on mouse enter and leave they change the class for themselves and also using a colour logic block to invert the colour of the buttons.
I hope this gives you a bit more inspiration.
Regards,
Hopki
Attachments
CSSFont.zip
(14.23 KiB) Downloaded 66 times
Hopki
Garden Gnome Software Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
Tony
Posts: 985
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Fri Feb 07, 2020 12:11 am

Hi Hopki,

Very cool and thanks to Christop gnome.

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/
User avatar
Tony
Posts: 985
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Mon Feb 24, 2020 11:17 am

Hi,

I've just used this function for the first time and it works a treat. I've applied it to the final output of my Zooming Popup with Reveal Text Overlay tutorial https://tonyredhead.com/pano2vr/hotspot ... -reveal-p1 to change the font styling for mobile devices.

You can see a working version here https://p2vrtutorials.s3-ap-southeast-2 ... index.html

As the current tutorial stands when you finish the popup window isn't optimised for mobile and looks like - Image 1.

Adding a scale of 50% for mobile devices fits the popup window into the Samsung S8 screen but the text is unreadable. At least for me :shock: - Image 2.

So by applying the CSS change at the same time as the scale the text size and layout can change to better fit the device - Image 3

before-after-css-change.png
before-after-css-change.png (2.71 MiB) Viewed 1625 times

I'll be adding an addendum to the current tutorial to show how to manage the CSS classes.



cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/
Post Reply