Following is a great resource of javascript codes and downloads and these are very necessary scripts used in real time in a daily web developer's life. These scripts can make your life easier if you are a web developer which include very necessary scripts needed by every web developer. I can not stress that enough. Javascript Essentials consists of six parts, each with huge collection of useful tutorials and downloads relating to javascript.
These include basic to advanced scripts in downloadable form and copy past form. Scripts include bookmark, add to favorites, full screen, informational, statistical scripts, close browser window issues, popup window issues, popup makers, web page controls, switchers, cookie related scripts, tooltips scripts, date and time related scripts, Image rotaion and image galleries scripts, form validation related scripts, scrollers, form controls and all kind of check, controls and validations, theme switchers and other javascript huge resources can be found at following URL.
Javascript Essentials
Dancing Pics Javascript Trick
Download rar file and extract contents. Open file copy script, select any ie browser window with any website opened with images, past code in ie browser address bar and hit enter. See what happens.
dancing-pics.rar
Funny Javascript Code
Download rar file and extract contents. Open file copy script, past it in ie browser address bar and hit enter. See what happens. You can customize code within.
funny-js-trick.rar
Download the rar file, extract its content. Open file and copy its contents and past in any already opened window's address bar containing URL or any web page address bar. You will see the contents of webpage will shift and rearrange position.
js-trick.rar
Advanced & latest versions of browsers support transparent PNG by default. i.e. Internet Explorer 7, New Firefox, Safari and Opera etc. For IE 6 another version of this script works fine in which I gave you an example how to implement transparency in PNG for web pages. But what about background image and what if you have older browser like IE 5.5 etc.
This example covers all issues relating to displaying transparent PNG image in webpage, wether it be image or background and independent of browser.
For this script you will have to take care about following things.
- script tag which calls js file is little bit different with defer type inclusion.
- You will have to attach id to image and CSS as well.
- And a js file of course.
No need to put anything with simple image. Script will automatically identify img tag and if it gets transparent PNG, it will display it transparent. If you have used a CSS for TD which has background and that is PNG. You will assign an id to that TD and with little bit modification in the CSS, you will be able to manage it all.
While using PNG background, give TD exact width and height, in case you want to display it once, otherwise it will be stretched.
Anyways see it for yourself. Nonetheless it is powerful solution. Have fun!
Download Transparent PNG Powerful Example - Cross Browser, Compatible
We will be needing a js file and a page containing form input field to do this task.
What we are planning is, The input field contains default value. Onclick default value disappears and allows the user to insert text.
If the user types anything it remains there but if he does not write anything and clicks at next input field than the default value reappears in previous field.
JS file Code:
function remName(a, b){
if(a.value==b){
a.value='';
}else if(a.value==''){
a.value=b;
}else{
a.value=a.value;
}
}
function chkName(a, b){
if(a.value==''){
a.value=b;
}else{
a.value=a.value;
}
}Two functions are controlling the event as above.
Call the js file in the page and define input fields and put some code like this.
Input Fields:
<font color="#ff0000"><code><input name="txtName" type="text" id="txtName" onfocus="remName(this, 'Name');" onblur="chkName(this, 'Name');" value="Name">
<input name="txtEmail" type="text" id="txtEmail" value="Email" onfocus="remName(this, 'Email');" onblur="chkName(this, 'Email');"></code></font>
and so on...
Copy and paste in this javascript code in address bar of your browser.
javascript:function Shw(n) {if (self.moveBy) {for (i = 35; i > 0; i--) {for (j = n; j > 0; j--) {self.moveBy(1,i);self.moveBy(i,0);self.moveBy(0,-i);self.moveBy(-i,0); } } }} Shw(6)
Bold i- and j- are i- - and j- - (no space)
Modify these before pressing enter.
Watch your window's "shaking it". You can change the value of i if you wish :)
If you need to change the state of link onclick event t blod in navigation then we will use following code.
<html>
<head>
<title>Change Links State On Click</title>
<style type="text/css">
.activate { font-weight: bold; }
</style>
</head>
<body>
<a href="#" id="link1" onclick="changeActiveStates(this)">Link A</a>
<a href="#" id="link2" onclick="changeActiveStates(this)">Link B</a>
<a href="#" id="link3" onclick="changeActiveStates(this)">Link C</a>
<script type="text/javascript">
function byId(id) {
return document.getElementById ? document.getElementById(id) : document.all[id];
}
var prevLink = "";
function changeActiveStates(ele) {
if (prevLink) byId(prevLink).className = "";
ele.className = 'activate';
prevLink = ele.id;
}
</script>
</body>
</html>
This will cause the link to appear bold when clicked and when you click another link then previous clicked link will be normal and active link will be bold.
Simple ;)
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>
Body Section
<a href="javascript:bookmarksite('my blog', 'http://www.javedkhalil.wordpress.com')">Bookmark this!</a>
