Web Style Press, Best Practices from all the Web, Build Better Websites » Tricks 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 Simple RollOver Swap Image http://www.webstylepress.com/simple-rollover-swap-image/ http://www.webstylepress.com/simple-rollover-swap-image/#comments Tue, 28 Oct 2008 09:11:47 +0000 Hiroshi http://www.webstylepress.com/?p=361 Simple RollOver Swap Image is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> Adobe Dreamweaver offers a way to Swap Images by adding javascript through its behaviours which uses following functions:

function MM_swapImgRestore()
function MM_findObj(n, d)
function MM_swapImage()
function MM_preloadImages()

And at OnMouseOver and OnMouseOut events you can swap images, but that method adds a lot of javascript code into your pages.

There is another very simple and easy way of swapping images. You need a single js file of 1 kb that will be sufficient for all the pages of your website. Moreover implementation of code is as easy as think and done.

This is the implementation of Easy and Simple Image Swap by Jehiah Czebotar.

Create a js file i.e. rollover.js and put following code in that:

function SimpleSwap(el,which){
  el.src=el.getAttribute(which || "origsrc");
}
function SimpleSwapSetup(){
  var x = document.getElementsByTagName("img");
  for (var i=0;i<x.length;i++){
    var oversrc = x[i].getAttribute("oversrc");
    if (!oversrc) continue;
    // preload image
    // comment the next two lines to disable image pre-loading
    x[i].oversrc_img = new Image();
    x[i].oversrc_img.src=oversrc;
    // set event handlers
    x[i].onmouseover = new Function("SimpleSwap(this,'oversrc');");
    x[i].onmouseout = new Function("SimpleSwap(this);");
    // save original src
    x[i].setAttribute("origsrc",x[i].src);
  }
}
var PreSimpleSwapOnload =(window.onload)? window.onload : function(){};
window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();}

Include it in web page like this:

<script language="javascript" type="text/javascript" src="rollover.js"></script>

Finally place your image like following.

<img src="ss_img.gif" oversrc="ss_img_over.gif">

oversrc will handle the hover state of image. Now you will just place image and then point its hover state image in oversrc and you are done.

Download Simple Image Swap Example

Simple RollOver Swap Image is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/simple-rollover-swap-image/feed/ 2 Create Rounded Flexible Div Without Images http://www.webstylepress.com/rounded-div-without-images/ http://www.webstylepress.com/rounded-div-without-images/#comments Sun, 26 Oct 2008 17:59:12 +0000 Hiroshi http://www.webstylepress.com/?p=306 Create Rounded Flexible Div Without Images is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]>

Nifty Corners Cube is a solution to get rounded corners without images, and this third version is build by three main components:

  • A javascript file, named “niftycornerscube.js”
  • A CSS file, named “niftycorners.css”
  • The javascript calls specific for the pages

Nifty Corners Cube

Create Rounded Flexible Div Without Images is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/rounded-div-without-images/feed/ 0 Embed SWF Files Via Javascript – Active Content Script http://www.webstylepress.com/embed-swf-files-javascript-run-active-content/ http://www.webstylepress.com/embed-swf-files-javascript-run-active-content/#comments Sun, 19 Oct 2008 17:54:25 +0000 Hiroshi http://www.webstylepress.com/?p=156 Embed SWF Files Via Javascript – Active Content Script is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> Previously We used to embed flash files in web pages via simple embed method which pops up flash settings alert or Flash Settings Manager. Following way is to embed Flash movie (swf file) in web page using Javascript which will play for all browsers and will not alert you for flash settings.

Old Way Of Embeding SWF In Web Pages
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="200" height="100">
<param name="movie" value="mymovie.swf">
<param name="quality" value="high">
<param name="menu" value="false">
<embed src="mymovie.swf" width="200" height="100" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false"></embed>
</object>

We had to go to Flash Global Settings Manager to set settings to stop that pop up window.

New Adobe Dreamweaver CS3 provides a way to embed flash files in web pages via javascript by using AC_RunActiveContent.js file.

Suppose I have swf movie named as mymovie.swf. I will embed it in web page by using following method. You will need AC_RunActiveContent.js file which Adobe Dreamweaver provides while you embed swf in web pages.

For Head Section Of Page
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
Embeding SWF Via Javascript
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','200','height','100','src','mymovie','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','mymovie' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="200" height="100">
  <param name="movie" value="mymovie.swf">
  <param name="quality" value="high">
  <embed src="mymovie.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="200" height="100"></embed>
</object></noscript>

* For above example, you will have to change the movie name at four places. Two times it appears as mymovie.swf and two times as mymovie in code above and movie’s height and width three times too.

Download Full Script

Embed SWF Files Via Javascript – Active Content Script is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/embed-swf-files-javascript-run-active-content/feed/ 0 Auto Resize Browser Window To Image Size http://www.webstylepress.com/auto-resize-browser-window-to-image-size/ http://www.webstylepress.com/auto-resize-browser-window-to-image-size/#comments Sat, 27 Sep 2008 00:32:48 +0000 Hiroshi http://www.webstylepress.com/?p=100 Auto Resize Browser Window To Image Size is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> This script is typically best for pop-up windows where you want to display random images on request. It will allow browser window to auto-fit according to the image size.

Add this script into head section of web page:

<script language="javascript">
<!--
var i=0;
function resize() {
  if (navigator.appName == 'Netscape') i=40;
  if (document.images[0]) window.resizeTo(document.images[0].width +30, document.images[0].height+80-i);
  self.focus();
  self.moveTo(170,50);
}
//--></script>

We just wrote a function named as resize. Call this function in the body tag of the popup page.

<body onload="resize();">

This function will serve the purpose and on page load it will look for the image size and will resize the browser window according to the image size.

This script is for popup page at which image is placed. Call the popup page with no toolbar or menubar as decsribed below:

<a href="#" onClick="window.open('popup-page.html', '', 'toolbar=0,menubar=0,location=0,left=0,top=113,screenX=0,screenY=100,scrollbars=yes'); return false;">Launch popup</a>

Download Window Resize Script

Auto Resize Browser Window To Image Size is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/auto-resize-browser-window-to-image-size/feed/ 0