Web Style Press, Best Practices from all the Web, Build Better Websites » Javascript http://www.webstylepress.com Web VS Style Mon, 26 Dec 2011 10:35:53 +0000 en hourly 1 http://wordpress.org/?v=3.3 Country Select – On Change Country Flag Image Transition http://www.webstylepress.com/country-select-on-change-country-flag-image-transition/ http://www.webstylepress.com/country-select-on-change-country-flag-image-transition/#comments Thu, 31 Dec 2009 03:10:00 +0000 Hiroshi http://www.webstylepress.com/?p=550 Country Select – On Change Country Flag Image Transition is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> This is a very easy example on country flag change. If you have got a form with country selection field then you can easily display a flag related to that specific country on country selection made by user. In this example all the flags images are placed in a folder named as ‘flags’ which is in folder named as ‘images’. You should have a folder ‘images’ at website root and a folder ‘flags’ containing all the flags in png file format in it. Give this script a go. This is really cool and easy way to create a user friendly selection form field.

<img id="flag" src="images/flags/pk.png"/>
<select onchange="if(document.images) document.images['flag'].src='images/flags/'+this.options[this.selectedIndex].value+'.png';" name="country">
<option selected="selected" value="pk">Pakistan</option>
<option value="af">Afghanistan</option>
<option value="al">Albania</option>
<option value="dz">Algeria</option>
<option value="as">American Samoa</option>
<option value="ad">Andorra</option>
<option value="ao">Angola</option>
<option value="ai">Anguilla</option>
<option value="aq">Antarctica</option>
<option value="ag">Antigua and Barbuda</option>
<option value="ar">Argentina</option>
<option value="am">Armenia</option>
<option value="arpa">Arpanet</option>
<option value="aw">Aruba</option>
<option value="au">Australia</option>
<option value="at">Austria</option>
<option value="az">Azerbaijan</option>
<option value="bs">Bahamas</option>
<option value="bh">Bahrain</option>
<option value="bd">Bangladesh</option>
<option value="bb">Barbados</option>
<option value="by">Belarus</option>
<option value="be">Belgium</option>
<option value="bz">Belize</option>
<option value="bj">Benin</option>
<option value="bm">Bermuda</option>
<option value="bt">Bhutan</option>
<option value="bo">Bolivia</option>
<option value="ba">Bosnia and Herzegovina</option>
<option value="bw">Botswana</option>
<option value="bv">Bouvet Island</option>
<option value="br">Brazil</option>
<option value="io">British Indian Ocean Territory</option>
<option value="bn">Brunei Darussalam</option>
<option value="bg">Bulgaria</option>
<option value="bf">Burkina Faso</option>
<option value="bi">Burundi</option>
<option value="kh">Cambodia</option>
<option value="cm">Cameroon</option>
<option value="ca">Canada</option>
<option value="cv">Cape Verde</option>
<option value="ky">Cayman Islands</option>
<option value="cf">Central African Republic</option>
<option value="td">Chad</option>
<option value="cl">Chile</option>
<option value="cn">China</option>
<option value="cx">Christmas Island</option>
<option value="cc">Cocos (Keeling) Islands</option>
<option value="co">Colombia</option>
<option value="km">Comoros</option>
<option value="cg">Congo</option>
<option value="ck">Cook Islands</option>
<option value="cr">Costa Rica</option>
<option value="hr">Croatia (Hrvatska)</option>
<option value="cu">Cuba</option>
<option value="cy">Cyprus</option>
<option value="cz">Czech Republic</option>
<option value="cs">Czechoslovakia (former)</option>
<option value="dk">Denmark</option>
<option value="dj">Djibouti</option>
<option value="dm">Dominica</option>
<option value="do">Dominican Republic</option>
<option value="tp">East Timor</option>
<option value="ec">Ecuador</option>
<option value="eg">Egypt</option>
<option value="sv">El Salvador</option>
<option value="gq">Equatorial Guinea</option>
<option value="er">Eritrea</option>
<option value="ee">Estonia</option>
<option value="et">Ethiopia</option>
<option value="eu">Europe</option>
<option value="fk">Falkland Islands (Malvinas)</option>
<option value="fo">Faroe Island</option>
<option value="fj">Fiji</option>
<option value="fi">Finland</option>
<option value="fr">France</option>
<option value="gf">French Guiana</option>
<option value="pf">French Polynesia</option>
<option value="tf">French Southern Territories</option>
<option value="ga">Gabon</option>
<option value="gm">Gambia</option>
<option value="ge">Georgia</option>
<option value="de">Germany</option>
<option value="gh">Ghana</option>
<option value="gi">Gibraltar</option>
<option value="gb">Great Britain (UK)</option>
<option value="gr">Greece</option>
<option value="gl">Greenland</option>
<option value="gd">Grenada</option>
<option value="gp">Guadeloupa</option>
<option value="gu">Guam</option>
<option value="gt">Guatemala</option>
<option value="gn">Guinea</option>
<option value="gw">Guinea-Bissau</option>
<option value="gy">Guyana</option>
<option value="ht">Haiti</option>
<option value="hm">Heard and McDonald Islands</option>
<option value="hn">Honduras</option>
<option value="hk">Hong Kong</option>
<option value="hu">Hungary</option>
<option value="is">Iceland</option>
<option value="in">India</option>
<option value="id">Indonesia</option>
<option value="int">International</option>
<option value="ir">Iraq</option>
<option value="iq">Iran</option>
<option value="ie">Ireland</option>
<option value="il">Israel</option>
<option value="it">Italy</option>
<option value="jm">Jamaica</option>
<option value="jp">Japan</option>
<option value="jo">Jordan</option>
<option value="kz">Kazakhstan</option>
<option value="ke">Kenya</option>
<option value="ki">Kiribati</option>
<option value="kp">Korea (North)</option>
<option value="kr">Korea (South)</option>
<option value="kw">Kuwait</option>
<option value="kg">Kyrgyzstan</option>
<option value="la">Laos</option>
<option value="lv">Latvia</option>
<option value="lb">Lebanon</option>
<option value="ls">Lesotho</option>
<option value="lr">Liberia</option>
<option value="ly">Libya</option>
<option value="li">Liechtenstein</option>
<option value="lt">Lithuania</option>
<option value="lu">Luxembourg</option>
<option value="mo">Macau</option>
<option value="mk">Macedonia</option>
<option value="mg">Madagascar</option>
<option value="mw">Malawi</option>
<option value="my">Malaysia</option>
<option value="mv">Maldives</option>
<option value="ml">Mali</option>
<option value="mt">Malta</option>
<option value="mh">Marshall Islands</option>
<option value="mq">Martinique</option>
<option value="mr">Mauritania</option>
<option value="mu">Mauritius</option>
<option value="yt">Mayotte</option>
<option value="mx">Mexico</option>
<option value="fm">Micronesia</option>
<option value="md">Moldova</option>
<option value="mc">Monaco</option>
<option value="mn">Mongolia</option>
<option value="ms">Montserrat</option>
<option value="ma">Morocco</option>
<option value="mz">Mozambique</option>
<option value="mm">Myanmar</option>
<option value="na">Namibia</option>
<option value="nr">Nauru</option>
<option value="np">Nepal</option>
<option value="nl">Netherlands</option>
<option value="an">Netherlands Antilles</option>
<option value="nc">New Caledonia</option>
<option value="nz">New Zealand (Aotearoa)</option>
<option value="ni">Nicaragua</option>
<option value="ne">Nigee</option>
<option value="ng">Nigeria</option>
<option value="nu">Niue</option>
<option value="nf">Norfolk Island</option>
<option value="mp">Northern Mariana Islands</option>
<option value="no">Norway</option>
<option value="om">Oma</option>
<option value="pk">Pakistan</option>
<option value="pw">Palau</option>
<option value="pa">Panama</option>
<option value="pg">Papua New Guinea</option>
<option value="py">Paraguay</option>
<option value="pe">Peru</option>
<option value="ph">Philippines</option>
<option value="pn">Pitcairn</option>
<option value="pl">Poland</option>
<option value="pt">Portugal</option>
<option value="pr">Puerto Ric</option>
<option value="qa">Qatar</option>
<option value="re">Reunion</option>
<option value="ro">Romania</option>
<option value="ru">Russia</option>
<option value="rw">Rwanda</option>
<option value="gs">S. Georgia and S. Sandwich Isls</option>
<option value="kn">Saint Kitts and Nevis</option>
<option value="lc">Saint Lucia</option>
<option value="vc">Saint Vincent and the Grenadines</option>
<option value="ws">Samoa</option>
<option value="sm">San Marino</option>
<option value="st">Sao Tome and Principe</option>
<option value="sa">Saudi Arabia</option>
<option value="sn">Senegal</option>
<option value="rs">Serbia</option>
<option value="sc">Seychelles</option>
<option value="sl">Sierra Leone</option>
<option value="sg">Singapore</option>
<option value="sk">Slovak Republic</option>
<option value="si">Slovenia</option>
<option value="sb">Solomon Islands</option>
<option value="so">Somalia</option>
<option value="za">South Africa</option>
<option value="es">Spain</option>
<option value="lk">Sri Lanka</option>
<option value="sh">St. Helena</option>
<option value="pm">St. Pierre and Miquelon</option>
<option value="sd">Sudan</option>
<option value="sr">Suriname</option>
<option value="sj">Svalbard and Jan Mayen Islands</option>
<option value="sz">Swaziland</option>
<option value="se">Sweden</option>
<option value="ch">Switzerland</option>
<option value="sy">Syria</option>
<option value="tw">Taiwan</option>
<option value="tj">Tajikistan</option>
<option value="tz">Tanzania</option>
<option value="th">Thailand</option>
<option value="tg">Togo</option>
<option value="tk">Tokelau</option>
<option value="to">Tonga</option>
<option value="tt">Trinidad and Tobago</option>
<option value="tn">Tunisia</option>
<option value="tr">Turkey</option>
<option value="tm">Turkmenistan</option>
<option value="tc">Turks and Caicos Islands</option>
<option value="tv">Tuvalu</option>
<option value="ug">Uganda</option>
<option value="ua">Ukraine</option>
<option value="ae">United Arab Emirates</option>
<option value="uk">United Kingdom</option>
<option value="us">United States</option>
<option value="uy">Uruguay</option>
<option value="um">US Minor Outlying Islands</option>
<option value="su">USSR (former)</option>
<option value="uz">Uzbekistan</option>
<option value="vu">Vanuat</option>
<option value="va">Vatican City State (Holy See)</option>
<option value="ve">Venezuela</option>
<option value="vn">Viet Nam</option>
<option value="vg">Virgin Islands (British)</option>
<option value="vi">Virgin Islands (U.S.)</option>
<option value="wf">Wallis and Futuna Islands</option>
<option value="eh">Western Sahara</option>
<option value="ye">Yemem</option>
<option value="zr">Zaier</option>
<option value="zm">Zambia</option>
<option value="zw">Zimbabwe</option>
</select>

Country Select – On Change Country Flag Image Transition is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/country-select-on-change-country-flag-image-transition/feed/ 5 Use Any Font in Webpages As Text http://www.webstylepress.com/use-any-font-in-webpages-as-text/ http://www.webstylepress.com/use-any-font-in-webpages-as-text/#comments Fri, 23 Jan 2009 10:06:43 +0000 Hiroshi http://www.webstylepress.com/?p=481 Use Any Font in Webpages As Text is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> use-any-fonts

Now using javascript we can use any font in web page by using techniques such as Typeface and Facelift Image Replacement (or FLIR) or sIFR. sIFR needs flash while others do not. sIFR is for smoothness look of fonts.

Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS and get original smooth font look whatever you specify, even if the user machine have not those fonts. This technique is limited yet with limited fonts support and also it is recommended to use it for title of headings of web page. All the font at the web page using this technique can heavy things up at server and page might load very slow. Even then it is cool. Type face is easy, flexible and open source.

Using FLIR to display any font in web page is even easy. Here they have got complete instructions for just that.

I have tried type face method and here is its example to download.

Type Face Example Download

Related Resources

Facelift
Novemberborn
Implementing sIFR for smoothness of fonts in webpages
http://typeface.neocracy.org
http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/

Use Any Font in Webpages As Text is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/use-any-font-in-webpages-as-text/feed/ 0 Change Image Opacity Easily Using CSS or JS http://www.webstylepress.com/change-image-opacity-easily-using-css-js/ http://www.webstylepress.com/change-image-opacity-easily-using-css-js/#comments Fri, 23 Jan 2009 09:14:06 +0000 Hiroshi http://www.webstylepress.com/?p=484 Change Image Opacity Easily Using CSS or JS is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> We can simply use CSS alone to reproduce opacity effect that have traditionally been done using scripting. The advantage of looking to CSS instead is obvious – much more lightweight and easier to implement. We can use this method where we need to use a dim or faint version of image, while when some one places mouse over it, then image comes sharp, clear and bright.

Use the following code in head section of web page.

<style type="text/css">
.opacityit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.4;
}
.opacityit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}
</style>

Use the following code in body where the image is located.

<a href="#" class="opacityit"><img border="0" src="email.gif" /></a>

By this method image loads kind of blur in background and in light colors, but when some one places mouse over it. It becomes sharp.

Simple Opacity

We are using JavaScript to change the opacity of an image here. The technique works in both IE4+ and NS6+, and can be used to create some interesting “fading” effects. Here is the simple way to just place an image with opacity.

<img src="image.gif" style="filter:alpha(opacity=50); -moz-opacity:0.5">

In -moz-opacity:0.5 accepted range of values are 0 to 1, where 0 would make the image disappear and in alpha(opacity=50) range is between 1 to 100. We have combined the code both for IE and Mozilla for code compatibility.

We can also alter the opacity of image using javascript.

Head section code

<script>
function alteropacity(imageobject, opacity){
 if (navigator.appName.indexOf("Netscape")!=-1
  &&parseInt(navigator.appVersion)>=5)
    imageobject.style.MozOpacity=opacity/100
 else if (navigator.appName.indexOf("Microsoft")!= -1 
  &&parseInt(navigator.appVersion)>=4)
    imageobject.filters.alpha.opacity=opacity
}
</script>

Body Section Code

<img src="image.gif" style="filter:alpha(opacity=50); -moz-opacity:0.5" 
onMouseover="alteropacity(this, 100)" onMouseout="alteropacity(this, 30)">

Change Image Opacity Easily Using CSS or JS is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/change-image-opacity-easily-using-css-js/feed/ 2 Advanced JS Calendar http://www.webstylepress.com/advanced-js-calendar/ http://www.webstylepress.com/advanced-js-calendar/#comments Thu, 06 Nov 2008 08:43:42 +0000 Hiroshi http://www.webstylepress.com/?p=451 Advanced JS Calendar is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]>

Following javascript based calendar is kind of advanced and it shows current month, year and controls of next or previous. You can view days of any year or month in future or in past. You get the idea. This calendar uses an external javascript file. The origional code can be found at dynamicdrive.

Download Advanced JS Calendar

Advanced JS Calendar is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/advanced-js-calendar/feed/ 0 Create Simple Javascript Based Calendar http://www.webstylepress.com/simple-js-calendar/ http://www.webstylepress.com/simple-js-calendar/#comments Wed, 05 Nov 2008 08:35:13 +0000 Hiroshi http://www.webstylepress.com/?p=447 Create Simple Javascript Based Calendar is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> Following script is a calendar script which simply shows current month and highlights current date.

<html><body>
<table border="0" cellpadding="5" cellspacing="0">
  <tr>
    <td align="center" valign="middle" bgcolor="#eeeeee">
<table border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF">
        <tr> 
          <td align="center" valign="middle"> <SCRIPT LANGUAGE="JavaScript">
monthnames = new Array(
"January",
"Februrary",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"Decemeber");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0) 
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("<table border=0 bgcolor=#FFFFFF ");
document.write("bordercolor=black><font color=black face=verdana>");
document.write("<tr><td colspan=7><center><strong>" 
+ monthnames[thismonth] + " " + thisyear 
+ "</strong></center></font></td></tr>");
document.write("<tr>");
document.write("<td align=center>Su</td>");
document.write("<td align=center>M</td>");
document.write("<td align=center>Tu</td>");
document.write("<td align=center>W</td>");
document.write("<td align=center>Th</td>");
document.write("<td align=center>F</td>");
document.write("<td align=center>Sa</td>"); 
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td> </td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
      }
   }
}
if (count==thisdate) {
document.write("<font color='E44401'><strong>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</strong></font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table></p>");
// End -->
</SCRIPT> </td>
        </tr>
      </table>
    </td>
  </tr>
</table></body></html>

Download Simple Calendar Script

Create Simple Javascript Based Calendar is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/simple-js-calendar/feed/ 0 Javascript Essentials Part 6 http://www.webstylepress.com/javascript-essentials-part-6/ http://www.webstylepress.com/javascript-essentials-part-6/#comments Mon, 03 Nov 2008 00:01:49 +0000 Hiroshi http://www.webstylepress.com/?p=430 Javascript Essentials Part 6 is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> We shall discuss the following important issues relating to javascript.

  • Mouseover mouseout changes and Theme change
    - Change Link Color (Text change, Color change, both change)
    - Color Switch by css (background change)
    - Theme switch by css
  • Image Galleries
    - CJ motion gallery – left right mouse over scroll
    - Oncliking link image changes with fade in out – gallery (Captions & Image Transitions)
    - Compact Gallery
    - One popup for all images (Displaying changing images.)
    - One popup for all images (Displaying changing images and captions
  • More Form Effects
    - Form field highlight on focus
    - Form Field Select
    - Form field counter
    - Data appears or disappears on click and focus out

Mouseover mouseout changes

Change Link Color(Text change, Color change, both change)

This example explains how to change the link color and text on mouse over and out events.

Consider following script for mouse over and out events.

onMouseOver="this.innerHTML = 'The Software Tycoon'; this.style.color = '#ff0000';" onMouseOut="this.innerHTML = 'Microsoft'; this.style.color = '#0000ff';"

Full example:

<html>
<body>
<A HREF="http://www.microsoft.com/"
onMouseOver="this.style.color = '#ff0000';" onMouseOut="this.style.color = '#0000ff';">Microsoft</A>
<br><br>
<A HREF="http://www.microsoft.com/">
<FONT COLOR="#0000ff" onMouseOver="this.innerHTML = 'The Software Tycoon'; this.style.color = '#ff0000';" onMouseOut="this.innerHTML = 'Microsoft'; this.style.color = '#0000ff';">Microsoft</FONT></A>
<br>
<A HREF="http://www.microsoft.com/">
<FONT onMouseOver="this.innerHTML = 'The Software Tycoon'" onMouseOut="this.innerHTML = 'Microsoft'">Microsoft</FONT></A>
</body>
</html>

more reference at JavaScript Event Handlers – onmouseover and onmouseout

Javascript Essentials Part 6 is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/javascript-essentials-part-6/feed/ 1 Javascript Essentials Part 5 http://www.webstylepress.com/javascript-essentials-part-5/ http://www.webstylepress.com/javascript-essentials-part-5/#comments Sun, 02 Nov 2008 17:16:27 +0000 Hiroshi http://www.webstylepress.com/?p=422 Javascript Essentials Part 5 is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> Talk about form controls via Javascript. I have been hunting down js control over forms from the day I started web development. I love the control over programming and its essential too. Here in this javascript essentials part I will share with you some essential form controls.

  • Accept Terms & Go
  • Advanced Email Address Validator
  • Auto Drop Down List – Select from drop down and list updates accordingly
  • Auto Month DropDown with Date and Year
  • Auto Phone Number Format
  • Auto Tab
  • Character Counter
  • Check Un-check all from check boxes
  • Check Un-check all 2
  • Characters Disallow
  • Preview Image While Uploading
  • Submit Once

Accept Terms and Go

This script is about forcing user to click check box in order to accept terms or policy.

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Colin Pc  -->
<!-- Web Site:  http://www.insighteye.com/ -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function checkCheckBox(f){
if (f.agree.checked == false )
{
alert('Please check the box to continue.');
return false;
}else
return true;
}
//  End -->
</script>
</head>
<body>
<form action="www.tecnonascita.com" method="POST" onsubmit="return checkCheckBox(this)">
I accept: <input type="checkbox" value="0" name="agree">
<input type="submit" value="Continue Order">
<input type="button" value="Exit" onclick="document.location.href='backpage.html';">
</form>
</body>
</html>

Javascript Essentials Part 5 is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/javascript-essentials-part-5/feed/ 0 Javascript Essentials Part 4 http://www.webstylepress.com/javascript-essentials-part-4/ http://www.webstylepress.com/javascript-essentials-part-4/#comments Sun, 02 Nov 2008 13:32:14 +0000 Hiroshi http://www.webstylepress.com/?p=405 Javascript Essentials Part 4 is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> We will cover following essentials of javascript in this area.

  • TOOLTIPS
    - Moving Tooltips
    - Hint Tooltip
    - Fade in out Tooltip
    - Regular Tooltip
  • DATE & TIME
    - Regular Time & Date Full Script (Live)
    - Date Script (Month, Date, Year)
    - Time Script (Time(Hour,minutes,second), AM:PM) – Live
  • Rotation
    - Image Rotation (Page Reload or Refresh Based)
    - Text Rotation (Page Reload or Refresh Based)
    - Image Rotation (Daily)
    - Image Rotation (After some seconds) – Appear
    - Image Rotation (After some seconds) – Fade in out
  • Form Validation
    - By Simple Body and Head Section Script Method
    - By External js Validator File
  • Scrollers (marquee and advanced)
    - Scroll Control by an external js File
    - Simple Scroll
    - Continuous Scroll
  • Text and Image Loading
    - Loading by text (till all page loads)
    - Loading by image

TOOLTIPS

Moving Tooltips
<head>
<script language="JavaScript">
<!--
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
//-->
</script>
</head>
<body>
<DIV id=dek style="Z-INDEX: 1; VISIBILITY: hidden; POSITION: absolute"></DIV>
  <SCRIPT language="" type=text/javascript>
<!--
Xoffset=  20;    // modify these values to ...
Yoffset= 10;    // change the popup position.
var old,skn,iex=(document.all),yyy=-550;
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all
if (ns4)
skn=document.dek
else if (ns6)
skn=document.getElementById("dek").style
else if (ie4)
skn=document.all.dek.style
if(ns4)document.captureEvents(Event.MOUSEMOVE);
else{
skn.visibility="visible"
skn.display="none"
}
document.onmousemove=get_mouse;
function popup(msg,bak){
var content="<TABLE  WIDTH=200 BORDER=0 BORDERCOLOR=#4F1919 CELLPADDING=3 CELLSPACING=0 "+
"BGCOLOR="+bak+"><TD ALIGN=center><FONT COLOR=ffffff SIZE=1 face=Verdana, Arial, Helvetica, sans-serif>"+ msg +"</FONT></TD></TABLE>";
yyy=Yoffset;
 if(ns4){skn.document.write(content);skn.document.close();skn.visibility="visible";}
 if(ns6){document.getElementById("dek").innerHTML=content;skn.display='';}
 if(ie4){document.all("dek").innerHTML=content;skn.display='';}
}
function get_mouse(e){
var x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft;
skn.left=x+Xoffset;
var y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop;
skn.top=y+yyy;
}
function kill(){
yyy=-1000;
if(ns4){skn.visibility="hidden";}
else if (ns6||ie4)
skn.display="none";
}
// -->
</SCRIPT>
<a onmouseover="popup('.enter static, non-flash, non animated website :)','#840000')" onmouseout=kill() href="index1.htm" target="_self">
<img src="20040410-300x250-blank.jpg" width="100" height="50" border="0"></a>

Download Moving Tool Tip

Hint Tooltip

This tool tip is for hint purpose and appears by clicking at some link.

Download Hint Tooltip Script

Fade in out Tooltip

http://www.dynamicdrive.com/dynamicindex5/linkinfo2.htm

Regular Tooltip

Image tool tip is by alt tag and text tooltip is by title tag.

<a href="#" title="here is tooltip text">some link</a>
<img src="someimage.jpg" alt="tooltip text">

Javascript Essentials Part 4 is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/javascript-essentials-part-4/feed/ 1 Javascript Essentials Part 3 http://www.webstylepress.com/javascript-essentials-part-3/ http://www.webstylepress.com/javascript-essentials-part-3/#comments Sat, 01 Nov 2008 16:40:32 +0000 Hiroshi http://www.webstylepress.com/?p=394 Javascript Essentials Part 3 is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> I have selected some very very essential scripts based on javascript which are widely and mostly used in everyday website. I have been also using these for years and it seems like these will never get old and will be always wanted by web developers. I started a series of Javascript Essentials and this is the third episode regarding that. Hope everybody will find these extremely useful.

I will answer to the following most wanted requirements in javascript here:

  • Tab Content Script – Switching Menu Like Yahoo
  • External JS Switcher
  • Jump Menu Switching
    (Radio buttons select and jump menu content changes)
  • Right Click Menu-IE5.5+
  • Featureless Window – Pop up window with custom properties
  • Button Pop-Up
  • Pop-Up – Body Based
  • Pop-Up Using Head and Body of Web page
  • Pop-Up window maker
  • Pop-Up Box – On Load – Cross Browser
  • Focus (Window Focus)
  • Jump to Top Sliding Scrolling Button

Tab Content Script – switching menu like yahoo

Head CSS Section
<style type="text/css">
#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}
#tablist li{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}
#tablist li a:link, #tablist li a:visited{
color: navy;
}
#tablist li a.current{
background: lightyellow;
}
#tabcontentcontainer{
width: 400px;
/* Insert Optional Height definition here to give all the content a unified height */
padding: 5px;
border: 1px solid black;
}
.tabcontent{
display:none;
}
</style> <script type="text/javascript">
//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]
////////Stop editting////////////////
function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}
var previoustab=""
function expandcontent(cid, aobject){
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}
function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}
function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}
function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs
break
}
}
}
function do_onload(){
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
</script>
Body Section
<ul id="tablist">
<li><a href="http://www.dynamicdrive.com" class="current" onClick="return expandcontent('sc1', this)">Dynamic Drive</a></li>
<li><a href="new.htm" onClick="return expandcontent('sc2', this)" theme="#EAEAFF">What's New</a></li>
<li><a href="hot.htm" onClick="return expandcontent('sc3', this)" theme="#FFE6E6">What's Hot</a></li>
<li><a href="search.htm" onClick="return expandcontent('sc4', this)" theme="#DFFFDF">Search</a></li>
</ul> <DIV id="tabcontentcontainer">
<div id="sc1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
</div>
<div id="sc2" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/new.htm">What's New</a> section to see recently added scripts to our archive.
</div>
<div id="sc3" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/hot.htm">Hot</a> section for a list of DD scripts that are popular to the visitors.
</div>
<div id="sc4" class="tabcontent">
<form action="http://www.google.com/search" method="get" onSubmit="this.q.value='site:www.dynamicdrive.com '+this.qfront.value">
<p>Search Dynamic Drive:<br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></p>
</form>
</div>
</DIV>

Script Home Page

Javascript Essentials Part 3 is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/javascript-essentials-part-3/feed/ 0 Javascript Essentials Part 2 http://www.webstylepress.com/javascript-essentials-part-2/ http://www.webstylepress.com/javascript-essentials-part-2/#comments Sat, 01 Nov 2008 08:45:34 +0000 Hiroshi http://www.webstylepress.com/?p=390 Javascript Essentials Part 2 is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> In Javascript Essential Part-2 we will cover following tasks.

  • Page Fit to Screen
  • No Right Click (no alert)
  • No Right Click with alert
  • No Right Click on Images
  • Disable Image Toolbar script
  • Count Down (Live)
  • Count Up (Live) FF1+ IE5+ Opr7+
  • Scroll bar color – 16-A- Left Scroll bar
  • No Scroll bar
  • Auto Page Reloaded-Auto Refresh – Meta tag based – Button based -Live Refresh with countdown
  • Dynamically Re sized Iframe – Auto Re sizable Iframe (IE5+/NS6)
  • Switch content -Tabbed content – FF1+ IE5+ Opr7+
  • Special content switching with div
  • Switch content 2 – FF1+ IE5+

Page Fit to Screen

Add this script in the head section of page to switch the page position to fit the screen.

<script language="JavaScript">
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
</script>

Javascript Essentials Part 2 is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/javascript-essentials-part-2/feed/ 0