Jul 7, 2008

Handy Javascript Code Snips - Ready to Apply in your webpage

Free Web Hosting, No Ads > CONTRIBUTE > Tutorials

free web hosting

Handy Javascript Code Snips - Ready to Apply in your webpage

modstudioindia
tongue.gif Some common things to implement in our webpage very frequently are as follows. How to implement all these I am going to tell you in this tutorial.
  1. Add To Favorite
  2. Set As Homepage
  3. Go To Top Of Page
  4. No Right Click
  5. Print Page
  6. Adding Current Date
  7. Adding Current Time
  8. Pop-Up Page Creation
  9. Closing Window
  10. Copyright Notice Updation

01. Add To Favorite

Someone may be interested in the content of your page. Offer him/her to add the page in his/her favorite menu. To do this you have to place the following code in your page.

CODE
<a href="javascript:window.external.AddFavorite('http://www.yoursite.com/', 'Site Title');">Add to favorite</a>


Put this code where you want to show this. This script only works for IE5+ browsers.

02. Set As Homepage

Someone may be interested to set your page as their homepage. Offer him/her to set the page as his/her homepage with the following code.


CODE
<script LANGUAGE="JavaScript">
<A href="javascript:history.go(0)" onClick="javascript:this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.YourLink.com');" TARGET="_self">Set As HomePage</A>
</SCRIPT>


Put this code where you want to show this. This script only works for IE5+ browsers.

03. Go To Top Of Page

If your page is too long then always use this option. Offer him/her to go to the top of your page anytime.


CODE
<A HREF="javascript:scroll(0,0)">Go to top</A>


Put this code where you want to show this. This script works in all browsers.

04. No Right Click

Copy & paste the code below in between your <head> and </head>.


CODE
<script language=JavaScript>
<!--
var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}

document.oncontextmenu=new Function("return false")
// -->
</script>


This silent script works in all browsers.

05. Automatic Page Print

Just copy & paste the code below where you want to show this.


CODE
<a href='javascript:;' onClick='window.print();return false'>Print this page.</a>


This script works in all browsers.

06. Adding Current Date In Webpage

To display the current date in your webpage just copy and paste the following code where you want to show it.


CODE
<script type="text/javascript">
var d = new Date()
document.write(d.getDate())
document.write(".")
document.write(d.getMonth() + 1)
document.write(".")
document.write(d.getFullYear())
</script>


This script works in all browsers.

07. Adding Current Time In Webpage

To display the current time in your webpage just copy and paste the following code where you want to show it.


CODE
<script type="text/javascript">
var d = new Date()
document.write(d.getHours())
document.write(":")
document.write(d.getMinutes())
document.write(":")
document.write(d.getSeconds())
</script>


This script works in all browsers.

08. Popup Window

Sometimes we see that we click on a link & it opens up in a new popup window of some size predefined say 300x200. At first copy the code below in your <head> & </head> of the page.

CODE
<script LANGUAGE="JavaScript">
<!--
function Start(page)
{
OpenWin = this.open(page,"CtrlWindow","toolbar=No,menubar=No,location=No,
scrollbars=Yes,resizable=No,status=No,
width=550,height=470,left=150,top=150,"); }
//-->
</SCRIPT>


Now paste the code for your link where you want to display.

CODE
<a href="javascript:void(0);" class="navlink" onclick="javascript:Start ('link.html');">Your Link</a>


This script works in all browsers.

09. Closing Window

We might be interested to close a window with a link or a button. See the code.

Closing with button

CODE
<form>
<input type="button" value="Close Window" onClick="window.close()">
</form>



Closing with link

CODE
<a href="javascript: self.close()">Close Window</a>


This script works in all browsers.

10. Updating Coyright Notice

This copyright notice palces the current year on the page so that copyright notices are always current. Once it's on your page there is no need to update the script.

CODE
<script language = 'JavaScript'>
<!--
function y2k(number) { return (number < 1000) ? number + 1900 : number; }
var today = new Date();
var year = y2k(today.getYear());
document.write('© '+year+' all rights reserved');
//-->
</script>


This script works in all browsers.

 

 

 


Reply

wassie
very nice tutorial.
maybe you could tell us a bit more?
how to put those things on links/buttons/whatever.

Reply

Jayclark
Thanks for the scripts. I'm for sure going to use a few of them. smile.gif

Reply

ongnoai
Gee, modstudioindia, what you wrote is great! Every time I have to write a HTML page, I usually spend unnecessary time to find back a number of these scripts in other pages or on the Web. Thanks for putting that under one roof, anyway.

Now, I think the last catch to solve is a number of paranoid people de-activate Javascript on their browser. It's a shame to see how good pages show up on some screens when JS is not activated. Got a recipe to solve that one ?

Cheers!


Reply

electriic ink
Well, there are ways to get around the people who don't have js turned on. Most of it relies upon php:

03: Scroll To The Top Of The Page

Place this right just after the <body> tag:

CODE
<a name="to_top"></a>


And this is your link:

CODE
<a href="#to_top">Click here to go to the top!</a>


06: Display Today's Date

This uses php:

CODE
<?

 $day = date(l);
 $date = date(j);
 $suff = date(S);
 $month = $date(F);
 $year = date(Y);

 echo $day . $date.$suff . $month . $year;

?>


07: Display The Time

This uses php:

CODE
<?

 $hr = date(G);
 $min = date(i);
 $sec = date(s);

 echo $hr . ":" . $min . ":" . $sec;

?>


08: Popup Window

This method doesn't open the window at a set height / width:

CODE
<a href="/core_files/stuff.cfm" target="_blank">Click here</a>


10: Updated Copyright Notice

This uses php:

CODE
<?

 $this_year = date(Y);

 echo "&copy; Copyright " . $this_year . ". All rights reserved.";

?>



Some items have been missed out because they can't be done with html / php (at least not to my knowledge). Till then I suggest you put the following code after the javascript:

CODE
<p> Unfortunately, this features requires javascript. Please enable javascript in your browser. To learn how to enable it, click <a href="http://www.buymebuyme.com/retail/help/javascript.html" title="Follow these instructions to enable javascript!">here</a></p>


All code on mentioned on this page should be placed inside <noscript> and </noscript> tags!

 

 

 


Reply

wassie
some more great codes smile.gif
thank you for this cmatcmextra
this could be very usefull to our members smile.gif

Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Recent Queries:-
  1. invisionfree sidebar code - 2.43 hr back.
  2. how to apply javascript code on web page - 5.05 hr back.
  3. handy javascript - 58.41 hr back.
  4. javascript handy - 62.58 hr back.
  5. javascript silent window close - 76.85 hr back.
  6. javascript:openwin ie6 size - 79.51 hr back.
  7. how to solve print page is left or right printing javascript code - 83.37 hr back.
Similar Topics

Keywords : handy, javascript, code, snips, ready, apply, webpage

  1. Lesser Known Useful Javascript Features
    (0)
  2. Make A Moderately-secure Password System Using Javascript
    using file redirection to hide the password. (4)
    JavaScript is very handy at making forms, allowing for much more customization and easier ways to
    send data. So making Login forms using JavaScript may seem to many to be a very feasable idea.
    However, JavaScript is very bad at protecting Passwords, as since the passwords are not encypted and
    the whole JavaScript code is in the page, a person could just view the Page Source and find out
    everything. Even if you use an external JavaScript, it would still be poor as the file name for the
    external JavaScript would still be revealed. But I have an answer! There is a rela....
  3. Simple Javascript And Password System
    How to protect your pages with password (6)
    The quickest way to get a password protection system up and running is to use a Prompt box in
    JavaScript that has a title like "Enter your Email Address". Only you and the relevant users know
    what the password should be, could even be one each, that can be sorted out at the next page then
    pass the "input" directly through the url by changing the .href, like
    http://www.iSource.net.nz/users/?leTmeIn= The page that then processes this should also check for
    the referring page, and three fails from an IP if you like the php (the next page): CODE
    <?php // processdo....
  4. [php] Clean Code Functions
    Clean up your html output from php scripts (5)
    There is another Topic about writing 'clean' HTML code posted elsewhere on the Forum.
    I'll edit this Topic and add the link so you can review it on your own, and there is no need for
    me to comment on it in this thread, but the purpose of this Topic is to introduce a pair of
    functions which can be used for making sure that the HTML output from my scripts is readable when a
    view-source is reviewed. Two handy functions are included here. They work together quite nicely,
    and I will start this Tutorial with a short summary of the reasons for their 'being....
  5. Create A Simple Html Editor With Php And Javascript
    (3)
    Ok, I will teach you how to create a simple HTML editor that runs online with buttons that add HTML
    tags. Before we start: You should have basic knowledge of these languages. HTML/XHTML
    Javascript PHP You will need Ability to use filesystem functions. Chmodding abilities
    Features of Editor Online PHP safe Full HTML support A Few Bad Features Can only create new
    documents or overwrite Fairly unsafe Now we are ready to begin. The PHP Script This will be
    our PHP script that we will use to make the file. Make a file called save.php Here is the....
  6. Nice Clean Php Layout Coding.
    Learn a nice neat way to code your layouts with php (7)
    There are basically two main ways to code your php. Method 1) Creating a php document with an html
    look. The you throw in include tags all over the place. Its unorganized, and you have lots of stray
    files hidden in folders and scattered in your base directory. Its difficult to organize, and you
    make mistakes easily. Example: This document would be called index.php Whatever
    Banner or something Some content here. Mostly along the lines of You might ask what
    the problem was? Well, those include tags tend to multiply, and so do all those unne....
  7. Html Legend
    Learn how to create a handy legend with HTML! (9)
    I think this is pretty neat... good for those people who maybe aren't that great at designing
    things but still want something to look nice.. CODE <fieldset> <legend>Legend
    title</legend> Content </fieldset> try it in note pad.. it looks nice...good for
    forums, sign up forms.......
  8. Mootools - My Favourite Javascript Library
    (3)
    It kind of amazes me that there's not even a mention of the Mootools javascript library
    throughout this whole forum. So here I'll do a brief introduction and a tutorial on how to
    produce the famous accordion effect. MooTools is a compact, modular, Object-Oriented javascript
    framework designed to make writing extensible and compatible code easier and faster. MooTools lets
    you get the job done efficiently and effectively. It is slightly based on the powerful Prototype
    javascript framework , of which Scriptaculous runs on. (But frankly, I dislike Scriptaculou....
  9. Javascript Scroll Bar
    A scroll bar for your webpage using javascript (13)
    In this tutorial I will show you how to create two buttons in the bottom left of the screen that,
    when hovered over, will scroll the page. Now to start with, we must create a our buttons, the first
    line will create a div element, or block. Using blocks you can position items anywhere on a page.
    We use the ID property just to let us know what the block is used for, as for the first block, its
    obvious that it contains the vertical buttons and the second two blocks contains the horizontal
    buttons. The style property of the div tag tells the browser how to draw it, in the....
  10. Do You Want To Use Php Code In Your Html Pages?
    Within two minutes you will! (9)
    Whilst searching around for help to setup cutenews blog I came across a way to use php in html pages
    - lo and behold it works! so I thought I'd share it with you all (Unfortunately I can't
    remember the site so I wrote this up a couple of minutes after I did it:) ). This method requires a
    web server with apache installed. So, luckily for us all this covers the whole of Trap17... even
    Qupis /tongue.gif" style="vertical-align:middle" emoid=":P" border="0" alt="tongue.gif" /> Just
    to make the point, this is in no way a difficult task and it doesn't requir....
  11. Simple Scripts In Html And Javascript
    Things like BackgroundColorChanger and so (7)
    like in the topic, here is a description how to change the Backgroundcolor "On The Fly", by klicking
    on a button or radio-box first, we ned the html-and body-tags, create a new html-file on your
    desktop and write the following: QUOTE <script language = "JAVASCRIPT">
    browser interpretation: html - tag means "hey, browser, here comes HTML" in the body-tag you define
    the looking of your site. you can add things like "bgcolor" for the background, "text" for the
    textcolor and link / alink / hlink / vlink to define the linkcolor ( ) the scripttag i....
  12. Your First Autoit
    Learning To Code.. (2)
    Autoit is a simple, yet powerful programming language, it allowed the creation of the pangea
    desktops, and the Remote Pc Control with a cell.. You can learn it too. Here is the first of several
    lessons i will post inside of this topic. It is a 32 bit program, it doesnt work on windows 98, 95,
    and i dont think (THINK) Windows ME Step 1: Download and install the latest version of autoit from
    http://www.autoitscript.com i prefer that you use beta. Step 2: Right click somewhere on your
    desktop or my documents, and mouseover new and click Autoit V3 Script Step 3 (optiona....
  13. Javascript Framework - A Shortcut Javascript
    a shortcut javascript (3)
    hi, today im going to give you small tutorial how to use `Prototype JavaScript Framework`
    1st you have to download `Prototype JavaScript Framework`library from
    http://prototype.conio.net/ prototype makes easy to using Javascript, ex : when you want to point
    (get) the element from HTML usually we use : CODE
    document.getElementById('elementId') with prototype we use CODE
    $('elementId') , yeah...world getting small..with prototype. example
    we`re going to get value from an element of CODE &#....
  14. Tool Tips Using Only Css To Pop Up The Tool Tip
    No javascript involved! (8)
    Tool Tip Tutorial Example Found Here . Please review before continuing. Nice. And no
    javascript at all to be found. The colours I have used are for demonstration purposes only to show
    you that they are adjustable to suit the background or to contrast against them. Your choice. That
    is a styling issue. It is your site, you decide. The original author's idea was to add
    position:relative to the link, in order to allow the span element inside to position absolutely
    in respect to the parent link. This code has been tested in Ie5.5, IE6, Opera7.11 and M....
  15. Php Spy Code
    Spy on your site! (21)
    Code Spy Code Description Anyone who comes to ur forum's IP Adress, Site they came From,
    Their Browser and the time they came will get saved in a place that only the admin knows the
    location of... V.2 More features coming up in V.2!!! POst suggestions/problems...
    Preview:- http://s15.invisionfree.com/Spy/index.php ? REFRESH THE PAGE, AND GO HERE:-
    http://h1.ripway.com/programming/spy%20code/spy.html ^^^^^^^That shows all the IP's, Browsers,
    Time, site and stuff....^^^^^^^^ Code First of all, you'll need to host the files.... I sugg....
  16. Css Based Photo Gallery Code
    Fluid design for layout (3)
    Fluid Design Photo Gallery There are quite a few Topics here on the Trap17 Forum about how to
    set-up and use Photo Galleries and about the link code for getting from a Thumbnail Image to a full
    size Image and all that stuff, so I would like to take this "Photo Gallery" concept one step further
    without covering what others have already supplied instruction for. Usually, when there is a
    solution posted here for the code on "how-to-do-this", there are tables involved and the Links are
    placed inside Table cells. Tables are not neccesarilly a bad thing, but they were n....
  17. How To Stop People From Pirating Your Source Codes
    How to encrypt your webpage source sode (40)
    /ph34r.gif' border='0' style='vertical-align:middle'
    alt='ph34r.gif' /> -Encryption- /ph34r.gif' border='0' style='vertical-align:middle'
    alt='ph34r.gif' /> If your like me, you probably hate those Javascripts witch open a "Right
    Click Disabled" prompt. An easier way to confuse pirates from stealing your hard worked scripts or
    codes you can easily encrypt your html. In this tut i will show you how to both create
    an html encrypting script and will show you the diffrent methods of encryption. 1. The HE....
  18. Image Rollovers In Javascript
    A Write-Once, Use-Anywhere Approach (11)
    Tutorial: Image Rollovers w/ Javascript, by Rob J. Secord, B.Sc. (SystemWisdom) See a
    working Sample of this Script! Download a ZIP containing all working files in this
    tutorial! Note: If you are not interested in reading this entire tutorial and/or have a basic
    understanding of the underlying concepts, you may safely skip to the Implementation section to get
    the code! Description : A Dynamic Image Rollover Script tested to work in 4 major internet
    browsers: MSIE, FireFox, Netscape and Opera. Using only Javascript combined with regular HT....
  19. Css And Javascript Combined For Dynamic Layout
    use of different CSS files at same site (9)
    This tutorial is meant for people that are dealing with problems while coding their site at 100% of
    width. Important notice: Some people has JavaScript disabled, so they will not be able to load CSS
    file (take this in account when creating your website). How this script works. In the HEAD of your
    HTML document will apply this command, so variable.js file will be load at start: CODE
    <script type="text/javascript" src="variable.js"></script> In
    browser JavaScript file variable.js is loaded. This Javascript file consist of this para....
  20. How To: Change An Image When A User Clicks On It
    using both php and javascript (11)
    How To: Change An Image When A User Clicks On It using both php and javascript - a powerful
    combination I have seen quite a few how tos offering a method of doing this but none of which
    resembled my method of making use of both php and javascript. This code is fairly repetitive and
    most of the functions are easy to pick-up if you haven't heard of them before. Here it is...
    Create your two images. Call them anything you like, you'd just need to change their filenames
    in $imgano $imgayes. In fact with this script you can easily create more tha....
  21. Creating Rollovers With Buttons
    Short & simple javascript tutorial that shows you how. (2)
    Javascript in action can render some very neat visual effects, which can make your website more
    appealing, and sometimes even easier to navigate. Among the most common effects are the
    'button' effect, and the mouseover effect. The buttons are very common, of course; if
    nowhere else, most of us have seen them at the end of forms (Click the 'submit' button to
    proceed...). The basic idea is to have a 'depressible' object, which can give you the
    illusion that you're 'pressing' it when you click it. The rollover effect causes
    something to h....
  22. 'make' A Virus To Test Your Norton Antivirus
    Not a harmful code (0)
    This code is to simply check if your Norton Antivirus is working probably. Not sure if it will work
    on other AVs. The following code is provided by EICAR. QUOTE
    X5O!P%@AP[4\PZX54(P^)7CC)7}$EICAR-STANDARD-ANTIVIRUS-TEST-FILE!SH+H* Copy the
    content from the code into Notepad and save it as 'eicar.com' If your Norton AV is working
    probably a pop up of a Virus Alert should pop up and removed the virus immidiately. ....
  23. Image Preloader With Progress Bar Status
    Pure Client-Side JavaScript tested in 4 Browsers! (22)
    Tutorial: Image Preloader with Progress Bar, by Rob J. Secord, B.Sc. (SystemWisdom)
    Description : A Tutorial for a Client-Side Image Preloader with Dynamic Real-Time Progress Bar
    Indicator written in JavaScript! Tested to work with 4 Major Internet Browsers: Firefox, MSIE,
    Netscape, Opera (Complete sample solution provided at end of tutorial, just put it on your
    web-server, add your images and go!) Intended Audience : Beginner to Intermediate Web
    Developers. Although this tutorial will cover some advanced aspects of JavaScript, I will try to
    explain....
  24. How To Put A Phpbb Login Box On Your Main Site.
    Code and .php included!!! (18)
    I have included my coded file with this... Ok here is the code. CODE // //Create login area,
    replace the phpBB2 in /phpBB2/login.php with your forum's //directory // <form
    action="/phpBB2/login.php" method="post" target="_top"> <table
    width="25%" cellspacing="2" cellpadding="2" border="0"
    align="center">  <tr> <td align="left"
    class="nav"><a href="/phpBB2/index.php" class="nav">Prank Place
    Forum Index</a></td>....
  25. How To Make A Simple Webpage From Straight Out Htm
    (10)
    This tutorial will show you how to make a webpage using html. It will be a very simple webpage but
    good for practice. Get free hosting somewhere( anglefire, geocities) and go edit index.html.
    Delete everything that is already there. You will start of by doing this CODE <html>
    <title> What you want to apper at the top of the browser GOES HERE </title>
    <body> <h2> YOUR HEADER GOES HERE </h2> <p>Info about your site can
    go right here. Mabye start a welcome thing telling about your site and other stuff. Mak....
  26. Another Simple Php Tutorial For Beginners
    another easy-to-apply-and-use tutorial (5)
    Another easy to use and to apply PHP tutorial. CODE <?php print
    $_SERVER['USER_AGENT']; ?> Means to OUTPUT the visitor's browser.
    CODE <?php print $_SERVER['REMOTE_ADDR']; ?> Means to OUTPUT
    the visitor's IP address. CODE <?php print
    $_SERVER['SERVER_NAME']; ?> Means to OUTPUT the current server.
    CODE <?php print $_SERVER['DOCUMENT_ROOT']; ?> Menas to OUTPUT
    the current location where the PHP script is located....
  27. Opening New Tabs With Javascript
    (1)
    I just spent a couple of hours trying to figure out how to open new tabs from a Firefox sidebar. I
    found lots of different suggestions but none worked. Well finally I found this and it works. var
    browser = top.document.getElementById("content"); var tab = browser.addTab("http://www.google.com");
    An even better way of doing it is through: const kWindowMediatorContractID =
    "@mozilla.org/appshell/window-mediator;1"; const kWindowMediatorIID =
    Components.interfaces.nsIWindowMediator; const kWindowMediator = Components.classes
    .getService(kWindowMediatorIID); var browserWi....

    1. Looking for handy, javascript, code, snips, ready, apply, webpage

Searching Video's for handy, javascript, code, snips, ready, apply, webpage
Similar
Lesser Known
Useful
Javascript
Features
Make A
Moderately-s
ecure
Password
System Using
Javascript -
using file
redirection
to hide the
password.
Simple
Javascript
And Password
System - How
to protect
your pages
with
password
[php] Clean
Code
Functions -
Clean up
your html
output from
php scripts
Create A
Simple Html
Editor With
Php And
Javascript
Nice Clean
Php Layout
Coding. -
Learn a nice
neat way to
code your
layouts with
php
Html Legend
- Learn how
to create a
handy legend
with
HTML!
Mootools -
My Favourite
Javascript
Library
Javascript
Scroll Bar -
A scroll bar
for your
webpage
using
javascript
Do You Want
To Use Php
Code In Your
Html Pages?
- Within two
minutes you
will!
Simple
Scripts In
Html And
Javascript -
Things like
BackgroundCo
lorChanger
and so
Your First
Autoit -
Learning To
Code..
Javascript
Framework -
A Shortcut
Javascript -
a shortcut
javascript
Tool Tips
Using Only
Css To Pop
Up The Tool
Tip - No
javascript
involved!
;
Php Spy Code
- Spy on
your
site!
Css Based
Photo
Gallery Code
- Fluid
design for
layout
How To Stop
People From
Pirating
Your Source
Codes - How
to encrypt
your webpage
source sode
Image
Rollovers In
Javascript -
A
Write-Once,
Use-Anywhere
Approach
Css And
Javascript
Combined For
Dynamic
Layout - use
of different
CSS files at
same site
How To:
Change An
Image When A
User Clicks
On It -
using both
php and
javascript
Creating
Rollovers
With Buttons
- Short
& simple
javascript
tutorial
that shows
you how.
'make
9; A Virus
To Test Your
Norton
Antivirus -
Not a
harmful code
Image
Preloader
With
Progress Bar
Status -
Pure
Client-Side
JavaScript
tested in 4
Browsers!
;
How To Put A
Phpbb Login
Box On Your
Main Site. -
Code and
.php
included!
;!!
How To Make
A Simple
Webpage From
Straight Out
Htm
Another
Simple Php
Tutorial For
Beginners -
another
easy-to-appl
y-and-use
tutorial
Opening New
Tabs With
Javascript
advertisement



Handy Javascript Code Snips - Ready to Apply in your webpage



 

 

 

 

ADD REPLY / Got an Opinion! Remove these ADs! RAPID SEARCH! Free Web Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE