Javascript page modifiers

Simple way for your users to modify how a page looks

I have been asked more than once on how to make javascript (or as everyone asks now, 'AJAX') methods to modify a page.  It is very simple and easy to implement.

 

In the supplied example, I show modifiers for both single areas, and the whole page.  I know I chose hideous colors, but live with it, it's just an example...

 

First, what you need to do is some simple JS that allows you to change the style attributes of your html, here are both sets of functions; ones that apply to the whole page, others that apply to specific parts:

 

[code:js]

//apply to the whole page
function fontSize(number)
{ document.body.style.fontSize = number + "em"; }
function fontColor(color)
{ document.body.style.color = color; }
function backgroundColor(color)
{ document.body.style.backgroundColor = color; }

//apply to a specific part of the page
function divFontSize(number, div)
{ document.getElementById(div).style.fontSize = number + "em"; }
function divFontColor(color, div)
{ document.getElementById(div).style.color = color; }
function divBackgroundColor(color, div)
{ document.getElementById(div).style.backgroundColor = color; }

[/code]

 

As you can see,that is about as simple and straight-forward as you get, then simple call them like this:

 

[code:html]

<div>
    Single Div Modifiers:
    <a href="javascript:divFontSize('0.8', 'div1')" style="font-size:0.8em;" >small</a> |
    <a href="javascript:divFontSize('1', 'div1')" >medium</a> |
    <a href="javascript:divFontSize('1.2', 'div1')" style="font-size:1.2em;">large</a> |
    <a href="javascript:divFontColor('black', 'div1')" style="color:Black;">black</a> |
    <a href="javascript:divFontColor('navy', 'div1')" style="color:Navy;">navy</a> |
    <a href="javascript:divFontColor('green', 'div1')" style="color:Green;">green</a> |
    <a href="javascript:divBackgroundColor('white', 'div1')" style="background:white;">White</a> |
    <a href="javascript:divBackgroundColor('grey', 'div1')" style="background:grey;">Grey</a> |
    <a href="javascript:divBackgroundColor('yellow', 'div1')" style="background:yellow;">Yellow</a>
</div>

<div id="div1">
    Lorem ipsum dolor sit amet.
    Mauris nunc odio, molestie quis.
    Sed ac orci eu diam dapibus scelerisque. 
    Phasellus in nulla a justo dignissim suscipit.
    Class aptent taciti inceptos himenaeos.
</div>

[/code]

 

In the code shown above, the modifiers will only affect whatever is in div1.  And there you have it.

 


 
 
 

 

Add comment

Loading