untitled

Tips 'n' Tricks

Brought to you from the Bravenet news letters.

Little pieces of code that add that extra little something to your site.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Ever wondered how they get the cursor to automatically flash in the first input field of a form?

In order for a user to fill out a form field, he/she must first give it focus. This is achieved by clicking in the form field. Only then can they enter their data. This snippet will automatically give focus to the first form field.

Take the contents of the text area and add it to the <head> area of your webpage. Then replace your <body> tag with the complete <body onload="setfocus()"> tag below. That's it. The form that is shown below is an example that you can use to test the effectiveness of this little script.

  <script type="text/javascript">
  function setfocus()
  {
    document.forms[0].field.focus()
  }
  </script>

<body onload="setfocus()">


  <form>


    <input type="text" name="field" size="30"> 

    <input type="text" name="field1" size="30">

    <input type="text" name="field2" size="30">

    <input type="text" name="field3" size="30">

    <input type="text" name="field4" size="30">

  </form>

Using techniques like this one make your site easier to use, one of a webmaster's main goals. When you are asking a person to fill out a form you should save them a mouse click by predicting their needs and providing 'focus' to the first field in your form automatically.

Add the time to your webpage?

Here's the Code: 

<script type="text/javascript">

var timer = null
function stop()
{
  clearTimeout(timer)
}

function start()
{
  var time = new Date()
  var hours = time.getHours()
  var minutes = time.getMinutes()
  minutes=((minutes < 10) ? "0" : "") + minutes
  var seconds = time.getSeconds()
  seconds=((seconds < 10) ? "0" : "") + seconds
  var clock = hours + ":" + minutes + ":" + seconds
  document.forms[0].display.value = clock
  timer = setTimeout("start()",1000)
}

</script>

<body onload="start()" onunload="stop()">

<form>
    <input type="text" name="display" style="background-color: #E8EFFA; font: bold 11px verdana; width: 63px;">
</form>

Take the contents of the text area and add it to the <head> area of your webpage. Then replace your <body> with the complete body tag shown, then add the complete form tag to your page in the location you would like the clock to appear. It is that simple.

Last Modified

Do you update your content regularly?
This handy little script can be placed at the bottom of your webpages to inform your visitors of the last time that page was updated.

This page was last modified:

<script language="JavaScript">
  document.write(document.lastModified);
</script>

Form Submit Button Gives a Message

Here's the Code: 

<!-- the confirm part is in the onSubmit of the form tag don't forget to 
change the url in the form 'action='-->
<form method="post" 
action="pathto/yourscript/" 
onSubmit="return confirm('Are you sure you want to submit this information?');">
   <!--enter their form data-->
   first name: <input type="text" name="name" style="width: 100px;" />
   last name: <input type="text" name="name" style="width: 100px;" />

   <input type="submit" value="Submit">
</form>

 

Looks like this:

 
Show a Random Quote

Here's the Code: 
<script type="text/javascript">

   //these are your quotes - we've included three
   var message = new Array(
   'I do not fear computers. I fear the lack of them. 
<strong style="font-size: 10px;">-Isaac Asimov</strong>',
   'Never trust a computer you can\'t throw out a window. 
<strong style="font-size: 10px;">-Steve Wozniak</strong>',
   'Why think? We have computers to do that for us. 
<strong style="font-size: 10px;">-Jean Rostand</strong>'
   );
   
   // if you want to include more quotes - increase the 
number three to how many you have
   var rand = Math.floor(Math.random() * 3);
   //this writes the quote to the page
   document.write('"'+message[rand]+'"');


</script>
 
It displays a Quote that changes each time a user refreshes your web page!
 
Highlight Text Area Button

You may have noticed around the Bravenet site that whenever we want you to copy code from a text area we provide you with a button that will highlight all of the code for you to copy and paste onto your website. Well we thought we'd share that code snippet with you as it can be very handy.

This is how to code the feature:

Use the 'Highlight All' button above to highlight the text, then copy it and paste it into the <body> of your HTML document.

Remember that if you would like to have several different highlightable text areas on the same page you will have to change the 'name' of the text area and ensure that the new name is replaced in the 'onclick' event of the button.

In addition, it is not a bad idea to get in the habit of replacing all tags within the text area with special characters to avoid the code in the text area from interfering with the html displaying your page. The special character for an opening tag '<' is &lt; and a closing tag '>' is &gt;.

Creating Transparent Gifs
Spicing up your site with graphics can be a lot of fun, but it can also be tricky. In this tip, we will look at making a transparent gif to use on a site with a background image, but really you can use this lesson for many purposes. Let's say you have a patterned background for your site, and you want to place a piece of text with a special font or effect.

You need your pattern to show through, and because background patterns change depending on browser resolution among other things - you can never ensure that your pattern will match up if it is included with the text.

You will need to build a transparent .gif, and usually you will want to use anti-aliasing to make the edges smoothly blend in with your background.

The trick to building a transparent .gif is to build it on a background color that is most dominant in your background image. The reason for this is that when the gif is saved it still has anti-aliased pixels around it that are the same color as the background it was built on.

 
Why Not to Rely Heavily on Tables 

Building your site using tables is an easy way to structure your page, and all major browsers support them, so why not use a heavily table based layout?

The main problem with table based layouts is that most browsers can not display the table until everything between the <table></table> tags has loaded. This becomes especially troublesome if you have a lot of content. In addition, if your entire site is wrapped in a table, and then you have multiple tables nested inside, your page can take a very long time to display correctly.

So what are the alternatives?

Below is a standard three column table:

<table width="300" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td>paragraph 1 </td>
    <td>paragraph 2 </td>

    <td>paragraph 3 </td>
  </tr>
<table>

A better alternative without table tag:

<div style="width:300px;"> 
  <p style="float:left;width:33%;">paragraph 1 </p>

  <p style="float:left;width:33%;">paragraph 2 </p>
  <p style="float:left;width:33%;">paragraph 3 </p>
</div>

Don't worry you can still use tables just keep in mind, that the more tables you have, the longer it will take to render. Try closing one table before you open another.

Email Forms Service Tip

Below is an example of some neat tags you can use when building your forms. I'll show you the code and the display, and then explain it below.

Here is the code:

 <form action="http://yoursite.com/yourformprocessor" method="post" 
style="margin: 0px; padding: 0px;">

    <div style="width:250px;">
    <p style="text-align: right;">
    <label for="firstname" style="font: bold 11px arial;">First name: 
</label>
    <input type="text" id="firstname" style="height: 13px; color: #b273c0;  
background-color: #eee; border: 1px solid #004891;"><br>
    <label for="lastname" style="font: bold 11px arial;">Last name: 
</label>

    <input type="text" id="lastname" style="height: 13px; color:#b273c0; 
background-color: #eee; border: 1px solid #004891;"><br>
    <input type="submit" value="Send"> <input type="reset">
    </p>
    </div>
 </form>

This is what it looks like:



 

So what's the big deal?

For some reason, the very handy <label> tag is under-rated, and often forgotten. What it does is assign a label such as "First Name:" to an input field. This is specified through the "for" attribute of the label tag and an "id" attribute in your form element. These attributes must have the same value in order for them to pair up.

If the code below does not render properly visit our online version.

Wouldn't it be nice to be able to put a "print page" button on your webpage without it showing up in the printed out page. Here is a little script that will do just that.

Put this part of the script between the <head> and </head> tags of your webpage.

<script type="text/javascript">

function printPage() { 
  if(document.all) { 
    document.all.divButtons.style.visibility = 'hidden'; 
    window.print(); 
    document.all.divButtons.style.visibility = 'visible'; 
  } else { 
    document.getElementById('divButtons').style.visibility = 'hidden'; 
    window.print(); 
    document.getElementById('divButtons').style.visibility = 'visible'; 
  } 
} 

</script>

This part of the script can be placed anywhere within the body of your webpage where you would like the button to appear.

<div id="divButtons" name="divButtons">
	<input type="button" value = "Print this page" onclick="printPage()" style="font:bold 11px verdana;color:#FF0000;background-color:#FFFFFF;">
</div>
 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

 

Back to the Bloggers Blog!

 

 


Web Hosting · Blog · Guestbooks · Message Forums · Mailing Lists
Allwebco Web Templates · Build your own toolbar · Site Building Articles · Audio, Fonts, Clipart
powered by a free webtools company bravenet.com