Web Style Press, Best Practices from all the Web, Build Better Websites » Essentials http://www.webstylepress.com Web VS Style Mon, 26 Dec 2011 10:35:53 +0000 en hourly 1 http://wordpress.org/?v=3.3 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 Javascript Essentials Part 1 http://www.webstylepress.com/javascript-essentials-part-1/ http://www.webstylepress.com/javascript-essentials-part-1/#comments Fri, 31 Oct 2008 19:46:38 +0000 Hiroshi http://www.webstylepress.com/?p=386 Javascript Essentials Part 1 is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> This section contains following solutions in JavaScript.

  • Make Home Page Script (text based, image based)
  • Add to Favorites Script (Cross Browser, By Image, By text)
    (Simple, Cross Browser support, Onload add to favorites)
  • Switch to Full Screen
  • Last Date of Page Updated
  • Print Page (IE, Cross Browser)
  • Save page from printing (Printing Security Issue)
  • Website Launched Since
  • Close window
    (With Prompt, Without Prompt, Self close with time (5000 for 5 sec.) Auto close with prompt, Self close with time (3000 for 3sec.) Auto close without prompt)
  • Open window on browser close – Open window on close window
  • Back Button (history.back)
    (Text based, Image based, History back and forward buttons)

Make Home Page Script

Text Based Script
<!--[if IE]>
<A HREF="#" class="downlinks"
onClick="this.style.behavior='url(#default#homepage)';
this.setHomePage('http://www.webstylepress.com');">
Make Webstylepress Homepage
</A>
<![endif]-->
Image Based Script
<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.webstylepress.com');"><img src="images/homepage.jpg" alt="Make WebStylePress Homepage" name="Image-HomePage" width="" height="" border="0">

Javascript Essentials Part 1 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-1/feed/ 0