|
|
 |
|
03-23-2011, 02:13 AM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
Simple Awesome Inline Modal Box with CSS3
Like JavaScript popup scripts ever presented on jsB@nk:
- [URL="http://www.javascriptbank.com/greybox-cool-html-javascript-ajax-flash-window-popup.html"]GreyBox: Cool HTML/JavaScript/AJAX/Flash... 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">
#popup{
z-index+999999;
position:absolute;
left:400px;
top:200px;
padding:10px;
display:none;
width:400px;
height:200px;
background: #FFFFFF;
box-shadow: 5px 5px 5px #ccc;
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
}
.tit{
width:98%;
height:20px;
padding:5px;
background:#3654A8;
}
</style>
Step 2: Place JavaScript below in your HEAD section
JavaScript
Code:
<script type="text/javascript" language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
document.bgColor="silver" ;
}
else
{
document.getElementById(divId).style.display = 'none';
document.bgColor="#FFFFFF" ;
}
}
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim volutpat sem ac scelerisque. Cras non rutrum lorem. Duis lacinia quam at leo ultrices commodo. Ut eget urna feugiat odio lobortis condimentum. Donec ultrices eros id mi bibendum feugiat. Vestibulum augue eros, ultrices id viverra at, euismod sed neque. Pellentesque non magna vitae velit venenatis condimentum. Phasellus eleifend tristique odio eget posuere. Nulla lacinia molestie quam at luctus. Vestibulum non lorem velit.</p>
<p>Nulla venenatis pretium urna. Suspendisse nisl orci, congue a gravida a, ornare id ipsum. Duis sapien nulla, congue id dictum eget, sollicitudin non nisi. Integer congue dictum augue ac fermentum. Etiam nec semper dui. Pellentesque rutrum lobortis neque in imperdiet. Donec ut lacus felis, id scelerisque nisi. Maecenas lacus erat, cursus nec facilisis non, aliquet ut felis. Aenean <a href="javascript:void(0);" onclick="return ShowHide('popup');"><b>Click Here for PopUp</b></a>. Nam sit amet magna in quam cursus porttitor. Maecenas laoreet blandit tellus, at volutpat turpis suscipit et. Maecenas tempus convallis magna. Vivamus venenatis dolor quis ligula laoreet tristique. Praesent euismod porttitor ligula, vitae iaculis quam faucibus non. Sed sagittis ullamcorper erat vel porttitor.</p>
<p>Suspendisse convallis vehicula ligula, in pellentesque lacus dictum in. Nam a ante eros, vitae luctus mauris. Sed tempus tellus at purus semper ac viverra nulla hendrerit. Quisque condimentum vestibulum cursus. Pellentesque vehicula commodo nisl, quis blandit tortor consequat sed. Praesent sed orci nisl. Donec id justo eu elit elementum convallis ac at metus. Nam quis erat ut lorem facilisis eleifend. Phasellus et velit sed nulla sodales blandit quis sed massa. Praesent suscipit auctor luctus. Praesent eleifend, est sit amet vestibulum placerat, mi erat placerat arcu, non luctus enim tellus a felis. Sed sed sapien dolor. Nulla vestibulum mattis ante, in convallis mauris tempor nec. Proin aliquam arcu eu orci luctus adipiscing. Etiam pulvinar, justo sed volutpat mattis, erat purus gravida sem, vitae pretium eros velit sit amet dolor. </p>
</div>
<div id="popup">
<div class="tit">Your Title </div>
<p>Suspendisse convallis vehicula ligula, in pellentesque lacus dictum in. Nam a ante eros, vitae luctus mauris. Sed tempus tellus at purus semper ac viverra nulla </p>
<a href="javascript:void(0);" onclick="return ShowHide('popup');">Close</a>
</div>
|
03-30-2011, 08:04 PM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
Simple JavaScript Code for Layer Display Toggle
One more JavaScript code example to show/hide a layer every time the users click the specified text link. In live demo of this JavaScript code example, the script used to toggle the comments in a post... 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">
/*
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
div.quote
{
margin-left: 25%;
padding: 10px;
background-color: #FFCF31;
border: 1px solid #00009C;
width: 450px;
text-align: left;
}
div.quote p {
font-size: .8em;
margin: 0px 0px 0px 0px;
}
div#commentForm {
display: none;
margin: 0px 20px 0px 20px;
font-family: Arial, sans-serif;
font-size: .8em;
}
a.commentLink {
font-family: Arial, sans-serif;
font-size: .9em;
}
</style>
Step 2: Place JavaScript below in your HEAD section
JavaScript
Code:
<script type="text/javascript">
// Created by: Justin Barlow | http://www.netlobo.com
// This script downloaded from www.JavaScriptBank.com
function toggleLayer(whichLayer) {
var elem, vis;
if(document.getElementById) // this is the way the standards work
elem = document.getElementById(whichLayer);
else if(document.all) // this is the way old msie versions work
elem = document.all[whichLayer];
else if(document.layers) // this is the way nn4 works
elem = document.layers[whichLayer];
vis = elem.style;
// if the style.display value is blank we try to figure it out here
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<!--
/*
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
-->
<div class="quote">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent porttitor luctus quam. Pellentesque diam libero, feugiat quis, porttitor sagittis, suscipit dignissim, pede. Duis dapibus mauris at enim. Morbi vehicula turpis nec massa.</p>
<p style="text-align: right;"><a class="commentLink" title="Add a comment to this entry" href="javascript:toggleLayer('commentForm');">Add a comment</a>
<div id="commentForm">
<form id="addComment" action="" method="get">
<p>Name:<br>
<input name="name"><br>
Comment:<br>
<textarea rows="3" cols="40" name="comment"></textarea><br>
<input name="submit" value="Add Comment" type="submit"> <input onclick="javascript:toggleLayer('commentForm');" name="reset" value="Cancel" type="reset"></p>
</form>
</div>
</div>
|
04-24-2011, 09:25 PM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
Auto Thousand-Grouped Number Input Fields
One more JavaScript code example to build an auto thousand-grouped number after the users finish to type. JavaScript source code looks good and very easy to use.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Place JavaScript below in your HEAD section
JavaScript
Code:
<script type="text/javascript">
// Created by: Pavel Donchev | http://chameleonbulgaria.com/
// This script downloaded from www.JavaScriptBank.com
function currency(which){
currencyValue = which.value;
currencyValue = currencyValue.replace(",", "");
decimalPos = currencyValue.lastIndexOf(".");
if (decimalPos != -1){
decimalPos = decimalPos + 1;
}
if (decimalPos != -1){
decimal = currencyValue.substring(decimalPos, currencyValue.length);
if (decimal.length > 2){
decimal = decimal.substring(0, 2);
}
if (decimal.length < 2){
while(decimal.length < 2){
decimal += "0";
}
}
}
if (decimalPos != -1){
fullPart = currencyValue.substring(0, decimalPos - 1);
} else {
fullPart = currencyValue;
decimal = "00";
}
newStr = "";
for(i=0; i < fullPart.length; i++){
newStr = fullPart.substring(fullPart.length-i-1, fullPart.length - i) + newStr;
if (((i+1) % 3 == 0) & ((i+1) > 0)){
if ((i+1) < fullPart.length){
newStr = "," + newStr;
}
}
}
which.value = newStr + "." + decimal;
}
function normalize(which){
alert("Normal");
val = which.value;
val = val.replace(",", "");
which.value = val;
}
</script>
Step 2: Copy & Paste HTML code below in your BODY section
HTML
Code:
$ <input type="text" name="currencyField1" onchange="currency(this);" />
|
04-25-2011, 01:58 AM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
XMLWriter: Simple JavaScript XML Creator
XML - a type of data defining - becoming more popular at present because of its flexibility and convenience, data defined by XML become more visual and... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Use JavaScript code below to setup the script
JavaScript
Code:
<script type="text/javascript">
// Created by: Ariel Flesler | http://flesler.blogspot.com/2008/03/xmlwriter-for-javascript.html
// Licensed under: BSD License
// This script downloaded from www.JavaScriptBank.com
/**
* XMLWriter - XML generator for Javascript, based on .NET's XMLTextWriter.
* Copyright (c) 2008 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
* Licensed under BSD (http://www.opensource.org/licenses/bsd-license.php)
* Date: 3/12/2008
* @version 1.0.0
* @author Ariel Flesler
* http://flesler.blogspot.com/2008/03/xmlwriter-for-javascript.html
*/
function XMLWriter( encoding, version ){
if( encoding )
this.encoding = encoding;
if( version )
this.version = version;
};
(function(){
XMLWriter.prototype = {
encoding:'ISO-8859-1',// what is the encoding
version:'1.0', //what xml version to use
formatting: 'indented', //how to format the output (indented/none) ?
indentChar:'\t', //char to use for indent
indentation: 1, //how many indentChar to add per level
newLine: '\n', //character to separate nodes when formatting
//start a new document, cleanup if we are reusing
writeStartDocument:function( standalone ){
this.close();//cleanup
this.stack = [ ];
this.standalone = standalone;
},
//get back to the root
writeEndDocument:function(){
this.active = this.root;
this.stack = [ ];
},
//set the text of the doctype
writeDocType:function( dt ){
this.doctype = dt;
},
//start a new node with this name, and an optional namespace
writeStartElement:function( name, ns ){
if( ns )//namespace
name = ns + ':' + name;
var node = { n:name, a:{ }, c: [ ] };//(n)ame, (a)ttributes, (c)hildren
if( this.active ){
this.active.c.push(node);
this.stack.push(this.active);
}else
this.root = node;
this.active = node;
},
//go up one node, if we are in the root, ignore it
writeEndElement:function(){
this.active = this.stack.pop() || this.root;
},
//add an attribute to the active node
writeAttributeString:function( name, value ){
if( this.active )
this.active.a[name] = value;
},
//add a text node to the active node
writeString:function( text ){
if( this.active )
this.active.c.push(text);
},
//shortcut, open an element, write the text and close
writeElementString:function( name, text, ns ){
this.writeStartElement( name, ns );
this.writeString( text );
this.writeEndElement();
},
//add a text node wrapped with CDATA
writeCDATA:function( text ){
this.writeString( '<![CDATA[' + text + ']]>' );
},
//add a text node wrapped in a comment
writeComment:function( text ){
this.writeString('<!-- ' + text + ' -->');
},
//generate the xml string, you can skip closing the last nodes
flush:function(){
if( this.stack && this.stack[0] )//ensure it's closed
this.writeEndDocument();
var
chr = '', indent = '', num = this.indentation,
formatting = this.formatting.toLowerCase() == 'indented',
buffer = '<?xml version="'+this.version+'" encoding="'+this.encoding+'"';
/*
* modded by Phong Thai @ JavaScriptBank.com
*/
buffer = buffer.replace( '?', '?' );
if( this.standalone !== undefined )
buffer += ' standalone="'+!!this.standalone+'"';
buffer += ' ?>';
buffer = [buffer];
if( this.doctype && this.root )
buffer.push('<!DOCTYPE '+ this.root.n + ' ' + this.doctype+'>');
if( formatting ){
while( num-- )
chr += this.indentChar;
}
if( this.root )//skip if no element was added
format( this.root, indent, chr, buffer );
return buffer.join( formatting ? this.newLine : '' );
},
//cleanup, don't use again without calling startDocument
close:function(){
if( this.root )
clean( this.root );
this.active = this.root = this.stack = null;
},
getDocument: window.ActiveXObject
? function(){ //MSIE
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.async = false;
doc.loadXML(this.flush());
return doc;
}
: function(){// Mozilla, Firefox, Opera, etc.
return (new DOMParser()).parseFromString(this.flush(),'text/xml');
}
};
//utility, you don't need it
function clean( node ){
var l = node.c.length;
while( l-- ){
if( typeof node.c[l] == 'object' )
clean( node.c[l] );
}
node.n = node.a = node.c = null;
};
//utility, you don't need it
function format( node, indent, chr, buffer ){
var
xml = indent + '<' + node.n,
nc = node.c.length,
attr, child, i = 0;
for( attr in node.a )
xml += ' ' + attr + '="' + node.a[attr] + '"';
xml += nc ? '>' : ' />';
buffer.push( xml );
if( nc ){
do{
child = node.c[i++];
if( typeof child == 'string' ){
if( nc == 1 )//single text node
return buffer.push( buffer.pop() + child + '</'+node.n+'>' );
else //regular text node
buffer.push( indent+chr+child );
}else if( typeof child == 'object' ) //element node
format(child, indent+chr, chr, buffer);
}while( i < nc );
buffer.push( indent + '</'+node.n+'>' );
}
};
})();
</script>
Step 2: Place HTML below in your BODY section
HTML
Code:
<script type="text/javascript">
var xw = new XMLWriter('UTF-8');
xw.formatting = 'indented';//add indentation and newlines
xw.indentChar = ' ';//indent with spaces
xw.indentation = 2;//add 2 spaces per level
xw.writeStartDocument( );
xw.writeDocType('"items.dtd"');
xw.writeStartElement( 'items' );
xw.writeComment('button');
xw.writeStartElement('item');
xw.writeAttributeString( 'id', 'item-1');
xw.writeAttributeString( 'enabled', 'true' );
xw.writeStartElement( 'code');
xw.writeCDATA( '<button>Save</button>' );
xw.writeEndElement();
xw.writeElementString('description', 'a save button');
xw.writeEndElement();
xw.writeComment('image');
xw.writeStartElement('item');
xw.writeAttributeString( 'id', 'item-2');
xw.writeAttributeString( 'enabled', 'false' );
xw.writeStartElement( 'code');
xw.writeCDATA( '<img src="photo.gif" alt="me" />' );
xw.writeEndElement();
xw.writeElementString('description', 'a pic of myself!');
xw.writeEndElement();
xw.writeComment('link');
xw.writeStartElement('item');
xw.writeAttributeString( 'id', 'item-3');
xw.writeAttributeString( 'enabled', 'true' );
xw.writeStartElement( 'code');
xw.writeCDATA( '<a href="http://google.com">Google</a>' );
xw.writeEndElement();
xw.writeElementString('description', 'a link to Google');
xw.writeEndElement();
xw.writeEndElement();
xw.writeEndDocument();
var xml = xw.flush(); //generate the xml string
xw.close();//clean the writer
xw = undefined;//don't let visitors use it, it's closed
//set the xml
document.getElementById('parsed-xml').value = xml;
</script>
|
04-25-2011, 03:07 AM
|
|
Senior Member
GB Guru
|
|
Join Date: Sep 2009
Posts: 180
|
|
Simple JavaScript Page-Note Glossary
If you ever seen many web pages, posts of professional knowledges, specialized in skills or researches; perhaps you would see many specialized in words that they're explained after each post/page.
... 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 type="text/css">
/*
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
dl.glossary:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
dl.glossary dt {
float: left;
clear: left;
margin: 0;
padding: 0 0 5px;
}
dl.glossary dt:after {
content: ":";
}
dl.glossary dd {
float: left;
clear: right;
margin: 0 0 0 5px;
padding: 0 0 5px;
}
* html dl.glossary dd {
clear: none;
width: 80%;
}
</style>
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<script type="text/javascript">
// Created by: Aaron Gustafson | http://www.easy-designs.net/
// This script downloaded from www.JavaScriptBank.com
// ---------------------------------------------------------------------
// onLoad Handler
// ---------------------------------------------------------------------
var old = window.onload; // catch any existing onload calls 1st
window.onload = function () {
if (old) { // execute existing onloads
old();
};
for (var ii = 0; arguments.callee.actions.length > ii; ii++) {
arguments.callee.actions[ii]();
};
};
window.onload.actions = [];
/*------------------------------------------------------------------------------
Object: pageGlossary (formerly makeGlossary)
Author: Aaron Gustafson (aaron at easy-designs dot net)
Creation Date: 27 November 2005
Version: 1.0
Homepage: http://www.easy-designs.net/code/pageGlossary/
License: Creative Commons Attribution-ShareAlike 2.0 License
http://creativecommons.org/licenses/by-sa/2.0/
Note: If you change or improve on this script, please let us know by
emailing the author (above) with a link to your demo page.
------------------------------------------------------------------------------*/
var pageGlossary = {
getFrom: false,
buildIn: false,
glossArr: [],
usedArr: [],
init: function( fromId, toId ){
if( !document.getElementById ||
!document.getElementsByTagName ||
!document.getElementById( fromId ) ||
!document.getElementById( toId ) ) return;
pageGlossary.getFrom = document.getElementById( fromId );
pageGlossary.buildIn = document.getElementById( toId );
pageGlossary.collect();
if( pageGlossary.usedArr.length < 1 ) return;
pageGlossary.glossArr = pageGlossary.ksort( pageGlossary.glossArr );
pageGlossary.build();
},
collect: function(){
var dfns = pageGlossary.getFrom.getElementsByTagName('dfn');
var abbrs = pageGlossary.getFrom.getElementsByTagName('abbr');
var acros = pageGlossary.getFrom.getElementsByTagName('acronym');
var arr = [];
arr = arr.concat( dfns, abbrs, acros );
if( ( arr[0].length == 0 ) &&
( arr[1].length == 0 ) &&
( arr[2].length == 0 ) ) return;
var arrLength = arr.length;
for( var i=0; i < arrLength; i++ ){
var nestedLength = arr[i].length;
if( nestedLength < 1 ) continue;
for( var j=0; j < nestedLength; j++ ){
if( !arr[i][j].hasChildNodes() ) continue;
var trm = arr[i][j].firstChild.nodeValue;
var dfn = arr[i][j].getAttribute( 'title' );
if( !pageGlossary.inArray( trm, pageGlossary.usedArr ) ){
pageGlossary.usedArr.push( trm );
pageGlossary.glossArr[trm] = dfn;
}
}
}
},
build: function(){
var h2 = document.createElement('h2');
h2.appendChild( document.createTextNode( 'Page Glossary' ) );
var dl = document.createElement('dl');
dl.className = 'glossary';
for( key in pageGlossary.glossArr ){
var dt = document.createElement( 'dt' );
dt.appendChild( document.createTextNode( key ) );
dl.appendChild( dt );
var dd = document.createElement('dd');
dd.appendChild( document.createTextNode( pageGlossary.glossArr[key] ) );
dl.appendChild( dd );
}
pageGlossary.buildIn.appendChild( h2 );
pageGlossary.buildIn.appendChild( dl );
},
addEvent: function( obj, type, fn ){ // the add event function
if (obj.addEventListener) obj.addEventListener( type, fn, false );
else if (obj.attachEvent) {
obj['e'+type+fn] = fn;
obj[type+fn] = function() {
obj['e'+type+fn]( window.event );
};
obj.attachEvent( 'on'+type, obj[type+fn] );
}
},
ksort: function( arr ){
var rArr = [], tArr = [], n=0, i=0, el;
for( el in arr ) tArr[n++] = el + '|' + arr[el];
tArr = tArr.sort();
var arrLength = tArr.length;
for( var i=0; i < arrLength; i++ ){
var x = tArr[i].split( '|' );
rArr[x[0]] = x[1];
}
return rArr;
},
inArray: function( needle, haystack ){
var arrLength = haystack.length;
for( var i=0; i < arrLength; i++ ){
if( haystack[i] === needle ) return true;
}
return false;
}
};
pageGlossary.addEvent(
window, 'load', function(){
pageGlossary.init('content','extras');
}
);
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<!--
/*
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
-->
<div style="text-align: left; width: 70%;">
<div id="content">
<p>
Lorem ipsum <dfn title="A Web browser created by Microsoft">Internet Explorer</dfn> dolor sit amet, consectetuer adipiscing elit 18 <abbr title="kilobytes">kB</abbr>, sed diam nonummy nibh euismod tincidunt ut laoreet <acronym title="Hypertext Markup Language">HTML</acronym> dolore magna aliquam erat volutpat.</p>
</div>
<div id="extras">
<!-- The page glossary is built here -->
</div>
<br /><br /><br /><b>Note</b>
<p>
In the last section of the script, the ids for the content and glossary are given, in this example they are 'content' and 'extras'. The script will process the abbreviations, acronyms, and definitions contained in the 'content' id and then place them within the 'extras' id.
</p>
</div>
|
|
|
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
|
|
|
|
Hybrid Mode
