Toggle font color

Using JavaScript with Hype Function Library
1

Here’s a method to toggle element styles…

var x = hypeDocument.getElementById('id');
x.style.color != 'black' ? x.style.color = 'black' :  x.style.color = 'red';

I have it set in the Actions Inspector for “On Mouse Click” so it will change the color upon each mouse click in the browser window.

2

Hello, I think this is the closest thing to what I am looking for…

I am working on a project that would require people to have the ability to change the font color used on the page. Is there a way I could have a button that would change the font color or all text on the page?

I tried making a button that on click loaded this Java script and it didn’t do anything.

Please forgive me as I don’t know much about programming I am just a World History teacher trying to design something.

Thanks much,

Michael

3

Did you assign a "Unique Element ID" to the text box? Also, I have to click twice to start the toggle.
togColor.hype.zip (16.8 KB)

4

The standard text black in Hype is not a named one. So it is best to use it's rgb colour. This will fix this issue

var x = hypeDocument.getElementById("id");

x.style.color == 'rgb(0, 0, 0)' ? x.style.color = 'red' : x.style.color = 'rgb(0, 0, 0)';

2 Likes
5

Thanks Mark :smile:

6

My problem is this code is written to only effect one id item. So if I have about 30 Text boxs per scene that need to be changed this can’t happen. Any help would be great. Also, what if I want to have them choose between five colors? how can I add more toggles?

7

Check this out.

http://forums.tumult.com:/uploads/db2156/original/2X/8/853f3ea08ac6ae72a750a07b7eba836eaa02861a.mov

The colour pickers and text elements all now have class names we work with.

Using a little trick of getting an element under a x,y position we can drag a colour pick onto an individual text element and change it’s colour.

Also if we click a colour picker ALL the text elements will change.

I have added an extension in the Head file so this will work for multiple scenes.

All commented in the project.

Toggle text Colors_MHv1.hypetemplate.zip (89.1 KB)

Version 2.

This on has a slight change. I originally had a timeout so that the dragged colour elements could get out of the way before we retrieve the element under the drag end point. If we did not do this we would get the colour element and not the text. (Think layers).

But it just dawned on me that it should work if we drop the zIndex down to 0 of the colour element that was dragged right after the drop.

This way even if it is still in the way, it will not be on top of the text element.

We reset it back late.

This works. Which means we can have the colour changes work quicker.

Also I scrapped using the class name for the colour and simply get the backgroundColor of the dragged element.

Toggle text Colors_MHv2.hypetemplate.zip (93.9 KB)

3 Likes
8

That is awesome Mark!

1 Like
9

Mark,

I have a question, what if I want it to work on all pages of the document. This way they select the color in the menu screen and then click play. Now the color they selected will be used in all the points boxes I used.

10

Off the top off my head ( only a minute to look at this…)

Change the tglColor()

to

window.acolour = element.style.backgroundColor;

 var pageArray = document.querySelectorAll('.pageText');

 
 //-- WE NOW CHANGE THE COLOUR USING THE CLICKED ELEMENTS CLASS NAME
for (i = 0; i < pageArray.length; i++) { 
 
pageArray[i].style.color = window.acolour;
}

and add a new function on each scene load.

var pageArray = document.querySelectorAll('.pageText');

 
 //-- WE NOW CHANGE THE COLOUR USING THE CLICKED ELEMENTS CLASS NAME
for (i = 0; i < pageArray.length; i++) { 
 
pageArray[i].style.color = window.acolour;
}
2 Likes