Skip to main content

Background text from javascript

Changing Text Colors
You can see the effects of these color settings and changes in the paragraph below by clicking the "Switch Colors" button.
Here is a paragraph of text with foreground and background color settings. These settings are changed by clicking the following button.
Figure 10-7. Switching foreground and background color styles.
<script type="text/javascript">

function SwitchColors()
{
  if (document.getElementById("PAR").style.color == "red") {
    document.getElementById("PAR").style.color = "white";
    document.getElementById("PAR").style.backgroundColor = "red"; }
  else {
    document.getElementById("PAR").style.color = "red";
    document.getElementById("PAR").style.backgroundColor = "white"; 
  }
}
</script>

<p id="PAR" style="border:solid 1; padding:10; color:red; background-color:white; 
font-size:12pt; font-weight:bold">
  Here is a paragraph of text with foreground and background color settings.
  These settings are changed by clicking the following button.
</p>

<input type="button" value="Switch Colors" onclick="SwitchColors()"/>
Listing 10-6. Code to switch foreground and background color styles.
The <p> tag contains a style attribute to initially set the foreground and background color of the paragraph. When the button is clicked, function SwitchColors() alternates between the foreground and background colors. An if statement tests the current foreground color. If it is red, then the foreground color is changed to white and the background color is changed to red. Otherwise, the paragraph is given red text on a white background.
Changing Button Colors
An effective use of colors is in designing your own buttons. The following button, for instance, illustrates the use of colors to provide visual clues to mouse activities surrounding it.



Figure 10-8. Using color styles as visual clues to mouse actions.
<input type="button" value="Click Me" style="color:white; background-color:steelblue"
  onmouseover="this.style.color='black'; this.style.backgroundColor='lightblue'"
  onmouseout="this.style.color='white'; this.style.backgroundColor='steelblue'"
  onmousedown="this.style.color='white'; this.style.backgroundColor='red'"
  onmouseup="this.style.color='black'; this.style.backgroundColor='lightblue'"/>
Listing 10-7. Code to use color styles as visual clues to mouse actions.
Once again, if multiple buttons on the same page need to share this styling, then the script should be moved to a function that can be called from all of the buttons.



Figure 10-9. Calling functions for color style changes.
<script type="text/javascript">

function MouseOver(Which)
{
  Which.style.color = "black";
  Which.style.backgroundColor = "lightblue";
}
function MouseOut(Which)
{
  Which.style.color = "white";
  Which.style.backgroundColor = "steelblue";
}
function MouseDown(Which)
{
  Which.style.color = "white";
  Which.style.backgroundColor = "red";
}
function MouseUp(Which)
{
  Which.style.color = "black";
  Which.style.backgroundColor = "lightblue";
}

</script>

<input type="button" value="Click Me" style="color:white; background-color:steelblue"
  onmouseover="MouseOver(this)" onmouseout="MouseOut(this)"
  onmousedown="MouseDown(this)" onmouseup="MouseUp(this)"/>
<input type="button" value="Click Me" style="color:white; background-color:steelblue"
  onmouseover="MouseOver(this)" onmouseout="MouseOut(this)"
  onmousedown="MouseDown(this)" onmouseup="MouseUp(this)"/>
<input type="button" value="Click Me" style="color:white; background-color:steelblue"
  onmouseover="MouseOver(this)" onmouseout="MouseOut(this)"
  onmousedown="MouseDown(this)" onmouseup="MouseUp(this)"/>
Listing 10-8. Code to call functions for color style changes.
Table Colors
In the following table of cursor shapes, the background color of the table cells changes to gray (#E0E0E0) when the cursor is moved over the cell, providing a visual clue to the cell over which the mouse is positioned. Also, the cursor changes to the shape identified by the cell text.
default pointer crosshair
move text wait
n-resize ne-resize nw-resize
s-resize se-resize sw-resize
e-resize w-resize help
Figure 10-10. Changing table cell colors and cursors.
In this example, a function is called on a mouseover event associated with the table cell. Two parameters are passed to the function: a self identification of the cell (this) and the name of the cursor shape (this.innerHTML) given by the text in the cell. A second function is called on a mouseout event to revert to normal cell styling.
<script type="text/javascript">

function Set(Cell,Cursor)
{
  Cell.style.backgroundColor = "#E0E0E0";
  Cell.style.cursor = Cursor;
}

function Reset(Cell)
{
  Cell.style.backgroundColor = "#FFFFFF";
}

</script>

<table border="1" cellpadding="5">
<tr>
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">default</td> 
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">hand</td>  
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">crosshair</td>  
</tr>
<tr>
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">move</td> 
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">text</td>  
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">wait</td>  
</tr>
<tr>
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">n-resize</td> 
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">ne-resize</td>  
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">nw-resize</td>  
</tr>
<tr>
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">s-resize</td> 
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">se-resize</td>  
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">sw-resize</td>  
</tr>
<tr>
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">e-resize</td> 
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">w-resize</td>  
  <td onmouseover="Set(this,this.innerText)" onmouseout="Reset(this)">help</td>  
</tr>
</table>
Listing 10-9. Code to change table cell colors and cursors.
Note that the innerText property of a table cell refers to the text appearing between its <td> and </td> tags. Also, the mouse cursor automatically reverts to its default styling when not explicitly set. It is not necessary, in other words, for the mouseout function to include the statement Cell.style.cursor = "default".
You are probably familiar with tables that look like the following, containing a column of links along with one or more additional columns describing the links.
Link Url Description
Google www.google.com Google has many special features to help you to find exactly what you're looking for.
AltaVista www.altavista.com The AltaVista Toolbar is free, customizable, and gives you the research tools to perform searches from your browser.
Yahoo! www.yahoo.com The Yahoo! Music Engine brings you a new and powerful way to enjoy and explore music on your PC.
Figure 10-11. Table cells with links.
Below is an interesting variation on such a table, using background colors to highlight the selected table row and making the row itself a link.
Link Url Description
Google http://www.google.com Google has many special features to help you to find exactly what you're looking for.
AltaVista http://www.altavista.com The AltaVista Toolbar is free, customizable, and gives you the research tools to perform searches from your browser.
Yahoo! http://www.yahoo.com The Yahoo! Music Engine brings you a new and powerful way to enjoy and explore music on your PC.
Figure 10-12. Styling table rows as links.
<script type="text/javascript">

function RowOn(Row)
{
  Row.style.backgroundColor = "#A0A0A0";
  Row.style.color="#FFFFFF";
  Row.style.cursor = "hand";
}
function RowOff(Row)
{
  Row.style.backgroundColor = "#FFFFFF";
  Row.style.color="#000000";
}
function RowDown(Row)
{
  Row.style.backgroundColor = "#FF0000";
}

</script>

<table border="1" cellpadding="2">
<tr>
  <th>Link</th>
  <th>Url</th>
  <th>Description</th>
</tr>
<tr onmouseover="RowOn(this)"  onmouseout="RowOff(this)" 
    onmousedown="RowDown(this)" onmouseup="RowOn(this)"
    onclick="open('http://www.google.com','','')">
  <td>Google</td>
  <td>www.google.com</td>
  <td>Google has many special features to help you to find exactly what
      you're looking for.</td>
</tr>
<tr onmouseover="RowOn(this)"  onmouseout="RowOff(this)" 
    onmousedown="RowDown(this)" onmouseup="RowOn(this)"
    onclick="open('http://www.altavista.com','','')">
  <td>AltaVista</td>
  <td>www.altavista.com</td>
  <td>The AltaVista Toolbar is free, customizable, and gives you the
      research tools to perform searches from your browser.</td>
</tr>
<tr onmouseover="RowOn(this)"  onmouseout="RowOff(this)" 
    onmousedown="RowDown(this)" onmouseup="RowOn(this)"
    onclick="open('http://www.yahoo.com','','')">
  <td>Yahoo!</td>
  <td>www.yahoo.com</td>
  <td>The Yahoo! Music Engine brings you a new and powerful way to enjoy
      and explore music on your PC.</td>
</tr>
</table>
Listing 10-10. Code to style table rows as links.
Each table row, <tr>, contains event handlers to respond to mouseover, mouseout, mousedown, and mouseup events. These event handlers pass their self references to the functions, which set the color of that particular row. These generalized functions perform the common style settings for all the rows. The onclick handlers for the rows, however, need individual scripts to link to individual URLs. In this case, sites are opened in secondary windows.
Form Colors
Colors can be applied dynamically to form elements to provide visual clues to their selection. In the following example, a text field changes its background color when text is being entered.

Enter text:

Figure 10-13. Styling a textbox on data entry.
Enter text: 
<input type="text" 
  onfocus="this.style.backgroundColor='sandybrown'; this.style.color='white'"
  onblur="this.style.backgroundColor='white'; this.style.color='black'"/>
Listing 10-11. Code to style a textbox on data entry.
This effect is produced using onfocus and onblur event handlers. The former traps the event where focus is brought to the textbox, when the user clicks inside the box; the latter traps the event where focus is removed from the textbox, when the user clicks or tabs out of the field.
Similar effects can be produced for other form elements.

Checkboxes:

Figure 10-14. Styling checkboxes with colors.
Checkboxes:
<input id="CB1" type="checkbox"
  onclick="this.style.backgroundColor='sandybrown';
  document.getElementById('CB2').style.backgroundColor='white';
  document.getElementById('CB2').checked=false;
  this.blur()"/>
<input id="CB2" type="checkbox"
  onclick="this.style.backgroundColor='sandybrown';
  document.getElementById('CB1').style.backgroundColor='white';
  document.getElementById('CB1').checked=false;
  this.blur()"/>
Listing 10-12. Code to style checkboxes with colors.
In this case a clicked checkbox has its background color set. It is also necessary to turn off any background color that has been set for the other checkbox and remove any checkmark in that other box (.checked=false). The statement this.blur() removes the dotted selection box from around the field produced by the browser when the field is clicked. This statement removes focus from the field by issuing the element's blur() method.

Radio Buttons:

Figure 10-15. Styling radio buttons with colors.
Radio Buttons:
<input id="RB1" type="radio" name="Radio"
  onclick="this.style.backgroundColor='sandybrown';
  document.getElementById('RB2').style.backgroundColor='white';
  this.blur()"/>
<input id="RB2" type="radio" name="Radio"
  onclick="this.style.backgroundColor='sandybrown';
  document.getElementById('RB1').style.backgroundColor='white';
  this.blur()"/>
Listing 10-13. Code to style radio buttons with colors.
These radio buttons are treated in the same way as the above checkboxes. In this case, it is not necessary to uncheck the other button when a button is clicked since radio buttons perform this task automatically as mutually exclusive choices.

Drop-Down List:

Figure 10-16. Styling a drop-down list with colors.
Drop-Down List:
<select onblur="var Index = this.selectedIndex;
                this.options[Index].style.backgroundColor='sandybrown'; 
                this.options[Index].style.color='white'"
       onfocus="for (i=0; i<this.length; i++) {
                  this.options[i].style.backgroundColor='white'; 
                  this.options[i].style.color='black'}"
>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
Listing 10-14. Code to style a drop-down list with colors.
After the user makes a selection from the drop-down list and either clicks or tabs out of the field, a blur event occurs. The onblur event handler sets the background and foreground colors of the selected option to indicate that a selection has been made. When focus is brought to the drop-down list, the options are iterated and set back to their normal colors.
In the above coding examples, various techniques are employed to activate style changes. Sometimes JavaScript statements are coded in-line, within the event handler of the tag to be changed; in other cases statements are packaged in a JavaScript function which is called from the tag. There is no rule about the technique to use. It pretty much depends on your preferred style of coding. You will certainly run into situations that need a particular technique, and these will be obvious. Otherwise, you should adopt a comfortable, workable coding style and be consistent about it.

Comments

Post a Comment

Popular posts from this blog

Tip/Trick: Fix Common SEO Problems Using the URL Rewrite Extension

Search engine optimization (SEO) is important for any publically facing web-site.  A large % of traffic to sites now comes directly from search engines, and improving your site’s search relevancy will lead to more users visiting your site from search engine queries.  This can directly or indirectly increase the money you make through your site. This blog post covers how you can use the free Microsoft  URL Rewrite Extension  to fix a bunch of common SEO problems that your site might have.  It takes less than 15 minutes (and no code changes) to apply 4 simple  URL Rewrite  rules to your site, and in doing so cause search engines to drive more visitors and traffic to your site.  The techniques below work equally well with both ASP.NET Web Forms and ASP.NET MVC based sites.  They also works with all versions of ASP.NET (and even work with non-ASP.NET content). [In addition to blogging, I am also now using Twitter for quick updates and to sh...
Post a Comment
Read more

ASP.NET MVC - Set custom IIdentity or IPrincipal

Here's how I do it. I decided to use IPrincipal instead of IIdentity because it means I don't have to implement both IIdentity and IPrincipal. Create the interface interface ICustomPrincipal : IPrincipal { int UserId { get ; set ; } string FirstName { get ; set ; } string LastName { get ; set ; } } CustomPrincipal public class CustomPrincipal : ICustomPrincipal { public IIdentity Identity { get ; private set ; } public bool IsInRole ( string role ) { return false ; } public CustomPrincipal ( string email ) { this . Identity = new GenericIdentity ( email ); } public int UserId { get ; set ; } public string FirstName { get ; set ; } public string LastName { get ; set ; } } CustomPrincipalSerializeModel - for serializing custom information into userdata field in FormsAuthenticationTicket object. public class CustomPrincipalSerializeMode...
8 comments
Read more

How to create a countdown timer in jquery

Create a countdown timer in jQuery First we need to include the jQuery library file to the HTML page to perform this task. To do that we need to understand that what exactly a jQuery library fie is ? JQuery library file is the library of JavaScript, which means this file contains the predefined functions of jQuery. We just need to call these functions to perform the task. jQuery functions reduces the lines of code and makes our task easy. As this jQuery library file contains the javascript functions so we need to call the function within <script> </script> tag. Now after including the file, we need to define a variable which will store that for how long you want the timer on the page(c=60) and now the time you set needs to be changed in hours , minutes and seconds using the code “ var hours = parseInt( time / 3600 ) % ;var minutes = parseInt( time / 60 ) % 60; var seconds = time % 60;” Now we need to put the condition if timer got finished (if (t...
1 comment
Read more