|
|
|
05-15-2010, 10:07 AM
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
JavaScript codes for Web DEV
Helpful JavaScript for Web development
DHTML Fading Animation Image
Enhancing image presentation on your website with this image rotator plus smooth dynamic motion (fade-in-fade-out). A very great anima... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<SCRIPT language=javaScript>
<!-- Beginning of JavaScript -
sandra0 = new Image();
sandra0.src = "photo1.jpg";
sandra1 = new Image();
sandra1.src = "photo2.jpg";
sandra2 = new Image();
sandra2.src = "photo3.jpg";
var i_strngth=1
var i_image=0
var imageurl = new Array()
imageurl[0] ="photo1.jpg"
imageurl[1] ="photo2.jpg"
imageurl[2] ="photo3.jpg"
function showimage() {
if(document.all) {
if (i_strngth <=110) {
testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth+10
var timer=setTimeout("showimage()",100)
}
else {
clearTimeout(timer)
var timer=setTimeout("hideimage()",1000)
}
}
if(document.layers) {
clearTimeout(timer)
document.testimage.document.write("<img src="+imageurl[i_image]+" border=0>")
document.close()
i_image++
if (i_image >= imageurl.length) {i_image=0}
var timer=setTimeout("showimage()",2000)
}
}
function hideimage() {
if (i_strngth >=-10) {
testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth-10
var timer=setTimeout("hideimage()",100)
}
else {
clearTimeout(timer)
i_image++
if (i_image >= imageurl.length) {i_image=0}
i_strngth=1
var timer=setTimeout("showimage()",500)
}
}
// - End of JavaScript - -->
</SCRIPT>
Step 2: Place HTML below in your BODY section
HTML
Code:
<BODY onload=showimage()>
<DIV id=mainbod style="POSITION: relative; VISIBILITY: visible"></DIV>
<DIV id=testimage style="POSITION: relative; VISIBILITY: visible"></DIV>
</BODY>
Javascript Music Player - Random Text Generator - Floating Image Script
Quote:
Originally Posted by Copyright
The Site may provide, or third parties may provide, links to non-JavaScriptBank.com Internet World Wide Web sites or resources. Because JavaScriptBank.com has no control over such sites and resources, you acknowledge and agree that JavaScriptBank.com is not responsible for the availability of such external sites or resources, and does not endorse and is not responsible or liable for any content, advertising, products, or other materials on or available from such sites or resources. You further acknowledge and agree that JavaScriptBank.com shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such site or resource.
|
|
05-18-2010, 08:02 PM
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
Streaming Horizontal Banner
Use this JavaScript code to make a a horizontal image scroller on your web page. If do not view the source code, maybe you will think tha... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Use CSS code below for styling the script
CSS
Code:
<style type="text/css">
<!--
#slideCont {
border:solid 1px #000;
text-align:center;
}
#slideCont img {
margin: 5px;
}
-->
</style>
Step 2: Place JavaScript below in your HEAD section
JavaScript
Code:
<script type="text/javascript">
<!--
/*
-----------------------------------------------
Streaming banners - v.1
(c) 2006 www.haan.net
You may use this script but please leave the credits on top intact.
Please inform us of any improvements made.
When usefull we will add your credits.
------------------------------------------------ */
<!--
function clip() {
// width of the banner container
var contWidth = 425;
// height of the banner container
var contHeight = 90;
var id1 = document.getElementById('slideA');
var id2 = document.getElementById('slideB');
id1.style.left = parseInt(id1.style.left)-1 + 'px';
document.getElementById('slideCont').style.width = contWidth + "px";
document.getElementById('slideCont').style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)';
id2.style.display = '';
if(parseFloat(id1.style.left) == -(contWidth)) {
id1.style.left = '0px';
}
setTimeout(clip,25)
}
// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
clip();
});
//-->
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<div id="slideCont" style="overflow: hidden; position: relative; z-index: 1; width: 425px; height: 90px; top: 0px; clip: rect(auto, 425px, 90px, auto);">
<div id="slideA" style="overflow: hidden; position: absolute; z-index: 1; top: 0px; left: -194px; width: 850px; height: 90px;">
<div style="float: left;" id="innerSlideA">
<a href="http://www.apache.org/"><img src="/logos/logo_jsbank.jpg" border="0" height="44" width="126"></a>
<a href="http://www.haan.net/"><img src="/logos/gif_logojsb2.gif" border="0" height="60" width="120"></a>
<a href="http://www.mysql.com/"><img src="/logos/jsb_banner.gif" border="0" height="44" width="126"></a>
</div>
<div id="slideB" style="overflow: hidden; position: relative; z-index: 1; top: 0px; left: 0px; width: 425px; height: 90px;">
<a href="http://www.apache.org/"><img src="/logos/logo_jsb.jpg" border="0" height="44" width="126"></a>
<a href="http://www.haan.net/"><img src="/logos/logo_jsb__88x31.gif" border="0" height="60" width="120"></a>
<a href="http://www.mysql.com/"><img src="/logos/logo_jsb_120x60.jpg" border="0" height="44" width="126"></a>
</div>
</div>
</div>
|
05-19-2010, 07:35 PM
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
Expanding Navigation Menu onClick
This is a simple expand collapse menu. The anchor tags that expand each menu are added by JavaScript, so the HTML code doesn't contain any event handlers or unnecessary HTML tags. The ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Place CSS below in your HEAD section
CSS
Code:
<style type="text/css">
ul#menu {
width: 100px;
list-style-type: none;
border-top: solid 1px #b9a894;
margin: 0;
padding: 0;
}
ul#menu ol {
display: none;
text-align: right;
list-style-type: none;
margin: 0;
padding: 5px;
}
ul#menu li,
ul#menu a {
font-family: verdana, sans-serif;
font-size: 11px;
color: #785a3c;
}
ul#menu li {
border-bottom: solid 1px #b9a894;
line-height: 15px;
}
ul#menu ol li {
border-bottom: none;
}
ul#menu ol li:before {
content: "-";
}
ul#menu a {
text-decoration: none;
outline: none;
}
ul#menu a:hover {
color: #539dbc;
}
ul#menu a.active {
color: #be5028;
}
</style>
Step 2: Use JavaScript code below to setup the script
JavaScript
Code:
<script language="javascript">
/*
Created by: Travis Beckham :: http://www.squidfingers.com | http://www.podlob.com
version date: 06/02/03 :: If want to use this code, feel free to do so,
but please leave this message intact. (Travis Beckham) */
// Node Functions
if(!window.Node){
var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
function checkNode(node, filter){
return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}
function getChildren(node, filter){
var result = new Array();
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
if(checkNode(children[i], filter)) result[result.length] = children[i];
}
return result;
}
function getChildrenByElement(node){
return getChildren(node, "ELEMENT_NODE");
}
function getFirstChild(node, filter){
var child;
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
child = children[i];
if(checkNode(child, filter)) return child;
}
return null;
}
function getFirstChildByText(node){
return getFirstChild(node, "TEXT_NODE");
}
function getNextSibling(node, filter){
for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
if(checkNode(sibling, filter)) return sibling;
}
return null;
}
function getNextSiblingByElement(node){
return getNextSibling(node, "ELEMENT_NODE");
}
// Menu Functions & Properties
var activeMenu = null;
function showMenu() {
if(activeMenu){
activeMenu.className = "";
getNextSiblingByElement(activeMenu).style.display = "none";
}
if(this == activeMenu){
activeMenu = null;
} else {
this.className = "active";
getNextSiblingByElement(this).style.display = "block";
activeMenu = this;
}
return false;
}
function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++){
menu = menus[i];
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
}
}
if(document.createElement) window.onload = initMenu;
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<ul id="menu">
<li>Menu Item 1
<ol>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
</ol>
</li>
<li>Menu Item 2
<ol>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
<li><a href="#">Sub Item 2.3</a></li>
</ol>
</li>
<li>Menu Item 3
<ol>
<li><a href="#">Sub Item 3.1</a></li>
<li><a href="#">Sub Item 3.2</a></li>
<li><a href="#">Sub Item 3.3</a></li>
</ol>
</li>
<li>Menu Item 4
<ol>
<li><a href="#">Sub Item 4.1</a></li>
<li><a href="#">Sub Item 4.2</a></li>
<li><a href="#">Sub Item 4.3</a></li>
</ol>
</li>
<li>Menu Item 5
<ol>
<li><a href="#">Sub Item 5.1</a></li>
<li><a href="#">Sub Item 5.2</a></li>
<li><a href="#">Sub Item 5.3</a></li>
</ol>
</li>
</ul>
|
05-21-2010, 07:59 PM
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
Waving Text Trailer
This JavaScript codecan be used to be that a mouse cursor pointer was just a mouse cursor. Since DHTML came along and gave programmers the ability to track the precise coordinates of the mouse, it was... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Place CSS below in your HEAD section
CSS
Code:
<STYLE>.spanstyle {
FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: black; FONT-FAMILY: Verdana; POSITION: absolute; TOP: -50px
}
</STYLE>
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<SCRIPT>
/*
Cursor Trailor Text- By Peter Gehrig (http://www.24fun.ch/)
Permission given to Dynamicdrive.com to feature script in it's archive.
*/
var moves=17
var tracker=0
var xpos
var ypos
var cursortext='JavaScriptBank.com - Bank of over 2000+ free JavaScript'
cursortext=cursortext.split("")
function setup() {
if (tracker==1 && document.all) {
for (i=cursortext.length-1; i>=1; i--) {
xposition[i]=xposition[i-1]+moves
yposition[i]=yposition[i-1]
}
xposition[0]=xpos+moves
yposition[0]=ypos
for (i=0; i<cursortext.length-1; i++) {
var thisspan = eval("span"+(i)+".style")
thisspan.posLeft=xposition[i]
thisspan.posTop=yposition[i]
}
}
else if (tracker==1 && document.layers) {
for (i=cursortext.length-1; i>=1; i--) {
xposition[i]=xposition[i-1]+moves
yposition[i]=yposition[i-1]
}
xposition[0]=xpos+moves
yposition[0]=ypos
for (i=0; i<cursortext.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xposition[i]
thisspan.top=yposition[i]
}
}
var timer=setTimeout("setup()",40)
}
function MouseMovement(e)
{
xpos = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
ypos = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
tracker=1
}
var xposition=new Array()
for (i=0;i<=cursortext.length-1;i++) {
xposition[i]=-50
}
var yposition=new Array()
for (i=0;i<=cursortext.length-1;i++) {
yposition[i]=-50
}
/*hieu ung di chuyen chuot*/
for (i=0;i<=cursortext.length-1;i++) {
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(cursortext[i])
document.write("</span>")
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = MouseMovement;
</SCRIPT>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<BODY onload=setup()>
</body>
|
05-23-2010, 07:51 PM
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
Trailing Kisses and Lips
Spreading the love on your site with this JavaScript! It produces big kisses and lips behind your mouse pointer as it moves, each disappearing only after a noticeable delay (set to 1 second in demo). ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: CSS below for styling thescript, place it into HEAD section
CSS
Code:
<style type="text/css">
<!--
h1 {
color:#cc3333;
font-family:"Comic Sans MS",Helvetica;
}
h3 {
color:#993333;
font-family:"Comic Sans MS",Helvetica;
}
.kisser {
position:absolute;
top:0;
left:0;
visibility:hidden;
}
-->
</style>
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<script language="JavaScript1.2" type="text/JavaScript">
<!-- cloak
//Kissing trail- By dij8 (dij8@dij8.com)
//Modified by Dynamic Drive for bug fixes
//Visit http://www.dynamicdrive.com for this script
kisserCount = 15 //maximum number of images on screen at one time
curKisser = 0 //the last image DIV to be displayed (used for timer)
kissDelay = 1000 //duration images stay on screen (in milliseconds)
kissSpacer = 50 //distance to move mouse b4 next heart appears
theimage = "lips_small.gif" //the 1st image to be displayed
theimage2 = "small_heart.gif" //the 2nd image to be displayed
//Browser checking and syntax variables
var docLayers = (document.layers) ? true:false;
var docId = (document.getElementById) ? true:false;
var docAll = (document.all) ? true:false;
var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document."
var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":""
var stylebitK = (docLayers) ? "":".style"
var showbitK = (docLayers) ? "show":"visible"
var hidebitK = (docLayers) ? "hide":"hidden"
var ns6=document.getElementById&&!document.all
//Variables used in script
var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage
lastX = 0
lastY = 0
//Collection of functions to get mouse position and place the images
function doKisser(e) {
posX = getMouseXPos(e)
posY = getMouseYPos(e)
if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) {
showKisser(posX,posY)
lastX = posX
lastY = posY
}
}
// Get the horizontal position of the mouse
function getMouseXPos(e) {
if (document.layers||ns6) {
return parseInt(e.pageX+10)
} else {
return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft))
}
}
// Get the vartical position of the mouse
function getMouseYPos(e) {
if (document.layers||ns6) {
return parseInt(e.pageY)
} else {
return (parseInt(event.clientY) + parseInt(document.body.scrollTop))
}
}
//Place the image and start timer so that it disappears after a period of time
function showKisser(x,y) {
var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x
if (curKisser >= kisserCount) {curKisser = 0}
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".left = " + processedx)
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".top = " + y)
eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'")
if (eval("typeof(kissDelay" + curKisser + ")")=="number") {
eval("clearTimeout(kissDelay" + curKisser + ")")
}
eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)")
curKisser += 1
}
//Make the image disappear
function hideKisser(knum) {
eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")
}
function kissbegin(){
//Let the browser know when the mouse moves
if (docLayers) {
document.captureEvents(Event.MOUSEMOVE)
document.onMouseMove = doKisser
} else {
document.onmousemove = doKisser
}
}
window.onload=kissbegin
// decloak -->
</script>
Step 3: Place HTML below in your BODY section
HTML
Code:
<script language="JavaScript" type="text/JavaScript">
<!-- cloak
// Add all DIV's of hearts
if (document.all||document.getElementById||document.layers){
for (k=0;k<kisserCount;k=k+2) {
document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>n')
document.write('<div id="kisser' + (k+1) + '" class="kisser"><img src="' + theimage2 + '" alt="" border="0"></div>n')
}
}
// decloak -->
</script>
Step 4: must download files below
Files
lips_small.gif
small_heart.gif
|
05-25-2010, 08:06 PM
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
Slideshow with zoom-in-zoom-out-animation
Slideshow with great transitoon effect. Each image has a JavaScript link of its own. Netscape-users will see a simple image-rotation-ef... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Place HTML below in your BODY section
HTML
Code:
<BODY onload=initiate()>
<SCRIPT>
<!-- Beginning of JavaScript -
// Slideshow with zoom-in-zoom-out-animation
// CONFIGURATION:
// 1. Create your images (gif or jpg). They should have the same width.
// Put those images in the same directory as the HTML-file.
// You can add as many images as you like.
// 2. Copy the script-block and paste it into head-section of your HTML-file..
// 3. Copy the span-blocks with the id "imgcontainer" into the body-section
// of your HTML-file.
// 4. Insert 'onLoad="initiate()"' into the body tag.
// 5. Configure the varibales below.
// The width of your images (pixels). All pictures should have the same width.
var imgwidth=256
// The horizontal and vertical position of the images (pixels).
var pos_left=10
var pos_top=10
// The name of your images. You may add as many images as you like.
var imgname=new Array()
imgname[0]="logojs.gif"
imgname[1]="photo3.jpg"
imgname[2]="photo4.jpg"
// Where should those images be linked to?
// Add an URL for each image.
// If you don't want to add an URL just write '#' instead of the URL.
var imgurl=new Array()
imgurl[0]="http://javascriptbank.com"
imgurl[1]="http://javascriptbank.com"
imgurl[2]="http://javascriptbank.com"
// This block will preload your images. Do not edit this block.
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=imgname[i]
}
// Standstill-time between the images (microseconds).
var pause=2000
// Speed of the stretching and shrinking effect. More means slower.
var speed=20
// This variable also affects the speed (the length of the step between each inmage-frame measured in pixels). More means faster.
var step=10
// Do not edit the variables below
var i_loop=0
var i_image=0
function stretchimage() {
if (i_loop<=imgwidth) {
if (document.all) {
imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>"
}
i_loop=i_loop+step
var timer=setTimeout("stretchimage()",speed)
}
else {
clearTimeout(timer)
var timer=setTimeout("shrinkimage()",pause)
}
}
function shrinkimage() {
if (i_loop>-step) {
if (document.all) {
imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>"
}
i_loop=i_loop-step
var timer=setTimeout("shrinkimage()",speed)
}
else {
clearTimeout(timer)
changeimage()
}
}
function changeimage() {
i_loop=0
i_image++
if (i_image>imgname.length-1) {i_image=0}
var timer=setTimeout("stretchimage()",pause)
}
function initiate() {
if (document.all) {
document.all.imgcontainer.style.posLeft=pos_left
document.all.imgcontainer.style.posTop=pos_top
changeimage()
}
if (document.layers) {
document.imgcontainer.left=pos_left
document.imgcontainer.top=pos_top
rotatenetscape()
}
}
function rotatenetscape() {
document.imgcontainer.document.write("<a href='"+imgurl[i_image]+"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>")
document.imgcontainer.document.close()
i_image++
if (i_image>imgname.length-1) {i_image=0}
var timer=setTimeout("rotatenetscape()",pause*2)
}
document.write("<div id=\"roof\" style=\"position:relative\">")
document.write("<div id=\"imgcontainer\" style=\"position:absolute;top:0px;left:0px\"></div>")
document.write("</div>")
// - End of JavaScript - -->
</SCRIPT>
</BODY>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
|
05-29-2010, 03:57 AM
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
AJAX Net Page Fetcher
This AJAX playscript allows you make page read on other page's content (both asks to be from the same web site - avoid [URL="http://www.javascriptbank.com/javascript/security/"]security issues</... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<script type="text/javascript" name="ajaxpagefetcher.js">
/***********************************************
* Ajax Page Fetcher- by JavaScript Kit (www.javascriptkit.com)
***********************************************/
var ajaxpagefetcher={
loadingmessage: "Loading Page, please wait...",
exfilesadded: "",
connect:function(containerid, pageurl, bustcache, jsfiles, cssfiles){
var page_request = false
var bustcacheparameter=""
if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE6 or below
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
var ajaxfriendlyurl=pageurl.replace(/^http://[^/]+//i, "http://"+window.location.hostname+"/")
page_request.onreadystatechange=function(){ajaxpagefetcher.loadpage(page_request, containerid, pageurl, jsfiles, cssfiles)}
if (bustcache) //if bust caching of external page
bustcacheparameter=(ajaxfriendlyurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
document.getElementById(containerid).innerHTML=ajaxpagefetcher.loadingmessage //Display "fetching page message"
page_request.open('GET', ajaxfriendlyurl+bustcacheparameter, true)
page_request.send(null)
},
loadpage:function(page_request, containerid, pageurl, jsfiles, cssfiles){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(containerid).innerHTML=page_request.responseText
for (var i=0; i<jsfiles.length; i++)
this.loadjscssfile(jsfiles[i], "js")
for (var i=0; i<cssfiles.length; i++)
this.loadjscssfile(cssfiles[i], "css")
this.pageloadaction(pageurl) //invoke custom "onpageload" event
}
},
createjscssfile:function(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
return fileref
},
loadjscssfile:function(filename, filetype){ //load or replace (if already exists) external .js and .css files
if (this.exfilesadded.indexOf("["+filename+"]")==-1){ //if desired file to load hasnt already been loaded
var newelement=this.createjscssfile(filename, filetype)
document.getElementsByTagName("head")[0].appendChild(newelement)
this.exfilesadded+="["+filename+"]" //remember this file as being added
}
else{ //if file has been loaded already (replace/ refresh it)
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist using
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
var allsuspects=document.getElementsByTagName(targetelement)
for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1){
var newelement=this.createjscssfile(filename, filetype)
allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i])
}
}
}
},
pageloadaction:function(pageurl){
this.onpageload(pageurl) //call customize onpageload() function when an ajax page is fetched/ loaded
},
onpageload:function(pageurl){
//do nothing by default
},
load:function(containerid, pageurl, bustcache, jsfiles, cssfiles){
var jsfiles=(typeof jsfiles=="undefined" || jsfiles=="")? [] : jsfiles
var cssfiles=(typeof cssfiles=="undefined" || cssfiles=="")? [] : cssfiles
this.connect(containerid, pageurl, bustcache, jsfiles, cssfiles)
}
} //End object
//Sample usage:
//1) ajaxpagefetcher.load("mydiv", "content.htm", true)
//2) ajaxpagefetcher.load("mydiv2", "content.htm", true, ["external.js"])
//3) ajaxpagefetcher.load("mydiv2", "content.htm", true, ["external.js"], ["external.css"])
//4) ajaxpagefetcher.load("mydiv2", "content.htm", true, ["external.js", "external2.js"])
//5) ajaxpagefetcher.load("mydiv2", "content.htm", true, "", ["external.css", "external2.css"])
</script>
<script type="text/javascript">
// Fetch and display "content.htm" inside a DIV automatically as the page loads:
ajaxpagefetcher.load("joe", "content.htm", true)
</script>
Step 2: Place HTML below in your BODY section
HTML
Code:
<div id="bob"></div>
<script type="text/javascript">
<!-- Fetch and display "sub/content2.htm" inside a DIV when a link is clicked on. Also load one .css file-->
<a href="javascript:ajaxpagefetcher.load('bob', 'sub/content2.htm', false, '', ['page.css'])">Load Content 2</a>
</script>
|
05-30-2010, 07:23 PM
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
Helpful JavaScript resources for Designers
Web Design - a task that requires the creativity and a lot of time, to create the high quality products. However, in the environment of modern web nowadays, the Internet produced a lot of libraries, u... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
|
06-04-2010, 10:58 PM
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
LCD Digital Clock
This digital clock JavaScript code attempts to parody that cool 'glowing in the dark night' look of a LCD clock watch by its interface. LCD displays the ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Copy & Paste CSS code below in your HEAD section
CSS
Code:
<style>
<!--
.styling{
background-color:black;
color:lime;
font: bold 15px MS Sans Serif;
padding: 3px;
}
-->
</style>
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<script>
<!--
/*****************************************
* LCD Clock script- by Javascriptkit.com
*****************************************/
var alternate=0
var standardbrowser=!document.all&&!document.getElementById
if (standardbrowser)
document.write('<form name="tick"><input type="text" name="tock" size="6"></form>')
function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById("digitalclock") : document.all.digitalclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var dn="AM"
if (hours==12) dn="PM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
hours="0"+hours
if (minutes<=9)
minutes="0"+minutes
if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+" : "+minutes+" "+dn
else
document.tick.tock.value=hours+" "+minutes+" "+dn
}
else{
if (alternate==0)
clockobj.innerHTML=hours+"<font color='lime'> : </font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
else
clockobj.innerHTML=hours+"<font color='black'> : </font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
}
alternate=(alternate==0)? 1 : 0
setTimeout("show()",1000)
}
window.onload=show
//-->
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<span id="digitalclock" class="styling"></span>
|
06-08-2010, 10:29 AM
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
10 Tiny JavaScript Snippets for Good Beginners
Yes, as the title of this JavaScript tutorial said, these JavaScript tips and tricks are so tiny and simple for operating, but sometimes we (web developers and web programmers/coders) forget about the... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|