The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Button that can change Text font and background colour, html?
Rating  5
lcfcchris
post Jan 23 2013, 04:45 PM
Post #1





Group: Members
Posts: 5
Joined: 23-January 13
Member No.: 18,513
Hi, I've just signed up to this forum, so apologies if I am posting in the wrong place. I am doing a web design unit on my course at college and need some basic help with the coding.
I need a button/buttons that can change background and the text font on a page, I have found one that goes in HTML but only changes text colour.

(<script>
function myFunction()
{
x=document.getElementById("demo") // Find the element
x.style.color="#ff0000"; // Change the style
}
</script> ) And have Tried changing 'color' to font then a font name after the '=' sign but nothing happens. Im thinking it may need to be done in CSS but not sure, can someone help me out smile.gif, and also show me how to link it to the button ( <button type="button" onclick="myFunction()">Change text font</button> )

One more thing, Does anyone know of any basic accessibility tools, I have coded it so you can hold 'alt' and a number to move to that page, but any other basic ones would be appreciated. Thankyou!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
lcfcchris
post Jan 23 2013, 04:49 PM
Post #2





Group: Members
Posts: 5
Joined: 23-January 13
Member No.: 18,513
Found a perfect one for the background, no wjust need one for the text font smile.gif

<html>
<head>

<script type="text/javascript">
<!--

var dcol = ['aqua', 'black', 'blue', 'fuchsia', 'gray', 'green', 'lime', 'maroon', 'navy', 'olive', 'purple', 'red', 'silver', 'teal', 'white', 'yellow'];
function changeBCol() {
var bodo=document.getElementById('bod');
bodo.style.backgroundColor = dcol[Math.floor(Math.random() * dcol.length)];
}
//-->
</script>

</head>
<body id="bod">
<input id="but" name="but" type=Button onclick="changeBCol();" value="Shuffle Background Colour"></input>
</body>
</html>
<!-- spaceId: 2114709203 -->
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 23 2013, 05:36 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Just combine the two. If you want the text color to also be random and don't mind risking foreground and backgrund gets the same color...
CODE

...
bodo.style.backgroundColor = dcol[Math.floor(Math.random() * dcol.length)];
body.style.color = dcol[Math.floor(Math.random() * dcol.length)];
...


It would be neater though to check what background color was chosen and then apply a contrasting (hardcoded) color for the text. That can be done with a bunch of if...else statements.

CODE

if ( bodo.style.backgroundColor == 'aqua' )
{
   bodo.style.color = 'blue';
}
else if ( bodo.style.backgroundColor == 'blue' )
{  
   bodo.style.color = 'white';
}

// go trough all the other colors until the last
else
{
   bodo.style.color = 'black';
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
lcfcchris
post Jan 23 2013, 05:50 PM
Post #4





Group: Members
Posts: 5
Joined: 23-January 13
Member No.: 18,513
QUOTE(pandy @ Jan 23 2013, 05:36 PM) *

Just combine the two. If you want the text color to also be random and don't mind risking foreground and backgrund gets the same color...
CODE

...
bodo.style.backgroundColor = dcol[Math.floor(Math.random() * dcol.length)];
body.style.color = dcol[Math.floor(Math.random() * dcol.length)];
...


It would be neater though to check what background color was chosen and then apply a contrasting (hardcoded) color for the text. That can be done with a bunch of if...else statements.

CODE

if ( bodo.style.backgroundColor == 'aqua' )
{
   bodo.style.color = 'blue';
}
else if ( bodo.style.backgroundColor == 'blue' )
{  
   bodo.style.color = 'white';
}

// go trough all the other colors until the last
else
{
   bodo.style.color = 'black';
}



Thanks for the reply ! smile.gif, I will add that now, any idea on how to make it change the Font for the text aswell? only has to be to one other font.
smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 23 2013, 06:57 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
You mean you want the font to change when the button is clicked, but the same font is OK for all backgrounds? Just add it. You can stack how many lines you want in there.

CODE

...
bodo.style.backgroundColor = dcol[Math.floor(Math.random() * dcol.length)];

bodo.style.fontFamily = 'Comic Sans MS';
bodo.style.fontWeight = 'bold';
bodo.style.fontStyle = 'italic';
bodo.style.fontSize = '1.5em';

if ( bodo.style.backgroundColor == 'aqua' )
...


Each and every CSS property is accessible in the same way.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
lcfcchris
post Jan 23 2013, 08:25 PM
Post #6





Group: Members
Posts: 5
Joined: 23-January 13
Member No.: 18,513
QUOTE(pandy @ Jan 23 2013, 06:57 PM) *

You mean you want the font to change when the button is clicked, but the same font is OK for all backgrounds? Just add it. You can stack how many lines you want in there.

CODE

...
bodo.style.backgroundColor = dcol[Math.floor(Math.random() * dcol.length)];

bodo.style.fontFamily = 'Comic Sans MS';
bodo.style.fontWeight = 'bold';
bodo.style.fontStyle = 'italic';
bodo.style.fontSize = '1.5em';

if ( bodo.style.backgroundColor == 'aqua' )
...


Each and every CSS property is accessible in the same way.


Thanks alot is perfect now! just what I needed!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 23 2013, 09:31 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(lcfcchris @ Jan 23 2013, 10:45 PM) *

And have Tried changing 'color' to font then a font name after the '=' sign but nothing happens.

You can use the font shorthand property in javascript, but its syntax needs to be the same as in CSS: http://www.w3.org/TR/CSS21/fonts.html#propdef-font e.g.:

CODE
foo.style.font='100% sans-serif';


QUOTE
One more thing, Does anyone know of any basic accessibility tools, I have coded it so you can hold 'alt' and a number to move to that page, but any other basic ones would be appreciated.

Not sure what you mean with tools here, but designing pages using progressive enhancement is a good first step: http://en.wikipedia.org/wiki/Progressive_enhancement
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 23 2013, 09:33 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
QUOTE(lcfcchris @ Jan 24 2013, 02:25 AM) *

Thanks alot is perfect now! just what I needed!


You are welcome. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jan 24 2013, 02:30 AM
Post #9


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
See also http://www.d.umn.edu/itss/training/online/...essibility.html for articles about Accessibility and http://www.d.umn.edu/itss/training/online/...sign/tools.html for a list of Accessibility tools.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
shubham agarwal
post Nov 17 2014, 01:12 AM
Post #10





Group: Members
Posts: 1
Joined: 17-November 14
Member No.: 21,818
Hey I am new to Javascript,
can u please explain the program a bit!

Thank u.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Nov 17 2014, 05:03 AM
Post #11


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
See http://en.wikipedia.org/wiki/JavaScript .
And have a look around at http://www.javascriptkit.com .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 11:53 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC