Comment Del.icio.us Digg Reddit Technorati Furl

Javascript Essentials Part 1

Nov 1, 2008 Essentials, Javascript

This section contains following solutions to 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">

Add to Favorites Cross Browser Script

Add the following In Head Section
<script type="text/javascript">
function bookmarksite(title, url){
if (document.all)
window.external.AddFavorite(url, title);
else if (window.sidebar)
window.sidebar.addPanel(title, url, "")
}
</script>

Now that you have included script in head section, lets move to body part of script.

Add the following In Body Section

You can display add to favorite link in web page based on text or image as following.

Text Based
<a href="javascript:bookmarksite('Webstylepress', 'http://www.webstylepress.com')">Bookmark this site!</a>
Image Based
<a href="#" onClick="javascript:window.external.AddFavorite('http://www.webstylepress.com', 'Webstylepress, Web developers guide');"><img src="images/bt2_1.jpg" alt=".add to favourites" name="Image4" width="34" height="34" border="0"></a>
Onload Add to favorites Script

This script will be added in body tag of web page. When web page will be completed loading, it will ask user to add website into favorites.

<body onLoad="if(document.all) window.external.AddFavorite(window.document.location,window.document.title)">

Switch to Full Screen Script

This script consists of two parts. First a part of code you have to add in head section and second piece of code you will add in body section to display link to click to for making that web page homepage of browser.

Head Section Script
<script language="JavaScript" type="text/JavaScript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
</script>
Body Section Code
<a href="#" 
target="_self" class="downlinks" 
onClick="MM_openBrWindow('index1.htm','maintn32','fullscreen=yes')">Switch to full screen
</a>

index1.htm is the page which will be switched to full screen.

Last Date of Page Updated

Want to know which date the page was last modified or updated? Add following javascript code in body section of page.

<SCRIPT language=JavaScript>
var m = "" + document.lastModified;
var p = m.length-8;
document.write(m.substring(p, 0));
</SCRIPT>

Print Page Script (Cross Browser)

<SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form>'
+ '<input type=button name=print value="Print" '
+ 'onClick="javascript:window.print()"></form>');
}
</script>

OR Print Button (Cross Browser Compatible)

<SCRIPT Language="Javascript">
function printit(){ 
if (window.print) {
window.print() ; 
} else {
var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(6, 2);//Use a 1 vs. a 2 for a prompting dialog box WebBrowser1.outerHTML = ""; 
}
}
</script> 
<SCRIPT Language="Javascript"> 
var NS = (navigator.appName == "Netscape");
var VERSION = parseInt(navigator.appVersion);
if (VERSION > 3) {
document.write('<form><input type=button value="Print this Page" name="Print" onClick="printit()"></form>'); 
}
</script>

OR

Print Through Image
<a href="#" onClick="javascript:window.print()">
<img src="someimage.jpg"></a>

Save Page From Printing Script (Printing Security Issue)

<link rel=alternate media=print href="printversion.doc">

Add above script into your head section of page. When user will try to print the page an alternative print will come out according to document mentioned in href (in this case printversion.doc).

Website Launched Since - Javascript Code

<script language="javascript">
montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
function countup(yr,m,d){
today=new Date()
todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
todaym=today.getMonth()
todayd=today.getDate()
todaystring=montharray[todaym]+" "+todayd+", "+todayy
paststring=montharray[m-1]+" "+d+", "+yr
difference=(Math.round((Date.parse(todaystring)-Date.parse(paststring))/(24*60*60*1000))*1)
difference+=" days"
document.write("It has been "+difference+" since the launch of website name")
}
//enter the count up date using the format year/month/day
countup(2005,09,07)
</script>

Close Window Script

Close Browser Window With Prompt
<a href="Javascript:self.close();" class="downlinks">Close website</a>
Without Prompt
<a href="#" 
onclick="window.opener=null; window.close(); return false">
thelinkbuttonorwhatever
</a>
Self Close With time (5000 for 5 sec.) Auto Close Browser Window With Prompt
<script language="javascript"> 
setTimeout("self.close();",5000) 
</script>
Self Close With time (3000 for 3sec.) Auto Close Without Prompt
<script language="javascript"> 
setTimeout("self.opener=null; self.close(); return false;",3000) 
</script>

Open Browser Window on Browser Window Close - Open Window on Close Window

<body onUnload="window.open('http://www.google.ca/', 'newWindow', 'scrollbars=0,resizable=0,height=300,width=400')">

When viewer will close window (containing this code in body tag), he will get another window opened after closing first one which is given as url above.

Back Button (history.back) Script

Text Link
<a href="javascript:history.back(1)" target="_parent">Go back</a>
Image Link
<a href="javascript:history.back(1)" 
target="_parent">
<img src="images/this.jpg" width="100" height="20" border="0">
</a>

OR

History Back and Forward Buttons
<form>
<input type="button" value=" back " onClick="history.go(-1)">
<input type="button" value="forward" onCLick="history.go(1)">
</form>

Tags: , , , ,
Try Random Style!

Leave a Reply