Page 16 of 17 FirstFirst ... 614151617 LastLast
Results 151 to 160 of 161

Thread: Free JavaScript codes

  1. #151

    JavaScript Text Auto-Select onClick

    If this JavaScript code example installed on a web page, when users click on text-container HTML elements then it will select all of its inner text automatically.

    At present, this JavaScript code m... 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: Matt Murphy | http://www.matts411.com/
    // This script downloaded from www.JavaScriptBank.com
    
    function autoSelect(selectTarget) {
     	if(selectTarget != null && ((selectTarget.childNodes.length == 1
          && selectTarget.childNodes[0].nodeName == "#text") || (selectTarget.tagName == "INPUT"
          && selectTarget.type == "text"))) {
      		if(selectTarget.tagName == 'TEXTAREA' || (selectTarget.tagName == "INPUT" && selectTarget.type == "text")) {
      			 selectTarget.select();
      		} else if(window.getSelection) { // FF, Safari, Opera
       			var sel = window.getSelection();
       			var range = document.createRange();
       			range.selectNode(selectTarget.firstChild);
       			sel.removeAllRanges();
       			sel.addRange(range);
      		} else { // IE
       			document.selection.empty();
       			var range = document.body.createTextRange();
       			range.moveToElementText(selectTarget);
       			range.select();
      		}
     	}
    }
    </script>
    Step 2: Copy & Paste HTML code below in your BODY section
    HTML
    Code:
    <h4 style="margin-bottom: 0;">A <code>div</code> Element:</h4>
    
    <div onclick="autoSelect(this);">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ultrices vestibulum elit. Mauris congue sapien sed dolor. Pellentesque sem augue, porttitor id, placerat ac, congue ac, eros. Etiam fermentum consectetuer pede. Donec tincidunt. Suspendisse non nisi. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer porta egestas sapien.
    </div>
    
    <h4 style="margin-bottom: 0;">An <code>input</code> Element:</h4>
    <input type="text" size="50" onclick="autoSelect(this);" value="Lorem ipsum dolor sit amet, consectetuer adipiscing elit.">
    
    <h4 style="margin-bottom: 0;">A <code>textarea</code> Element:</h4>
    <textarea rows="5" cols="30" onclick="autoSelect(this);">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ultrices vestibulum elit. Mauris congue sapien sed dolor. Pellentesque sem augue, porttitor id, placerat ac, congue ac, eros. Etiam fermentum consectetuer pede.
    
    </textarea>
    
    <h4 style="margin-bottom: 0;">A <code>pre</code> Element:</h4>
    <pre onclick="autoSelect(this);">
    function toggle_visibility(id) {
      var e = document.getElementById(id);
      if(e.style.display == 'none')
        e.style.display = 'block';
      else
        e.style.display = 'none';
    }
    </pre>






  2. #152

    Use jQuery to Generate Random Strings

    This short JavaScript article tutorial guides us how to make a random string with JavaScript (random string JavaScript) and jQuery. Both two detail at JavaScriptBank.com - 2.000+ free JavaScript codes


    How to setup







  3. #153

    Picture Gallery with Display Switcher

    This is really very cool and amazing picture gallery to promote your personal/business pictures on the web. With two type of displaying, this JavaScript gallery script allow users to switch the layout... 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">
    body {
    	margin: 0;
    	padding: 50px 0 0;
    	font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    	color: #fff;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    
    img {
    	border: none;
    }
    h1 {
    	font: 5em normal Georgia, 'Times New Roman', Times, serif;
    	text-align:center;
    	margin-bottom: 20px;
    }
    h1 span { 	color: #e7ff61; }
    h1 small{
    	font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
    	text-transform:uppercase;
    	letter-spacing: 1.5em;
    	display: block;
    	color: #ccc;
    }
    
    .container {
    	width: 758px;
    	margin: 0 auto;
    	padding-bottom: 100px;
    	overflow: hidden;
    }
    ul.display {
    	float: left;
    	width: 756px;
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	border-top: 1px solid #333;
    	border-right: 1px solid #333;
    	background: #222;
    }
    ul.display li {
    	float: left;
    	width: 754px;
    	padding: 10px 0;
    	margin: 0;
    	border-top: 1px solid #111;
    	border-right: 1px solid #111;
    	border-bottom: 1px solid #333;
    	border-left: 1px solid #333;
    }
    ul.display li a {
    	color: #e7ff61;
    	text-decoration: none;
    }
    ul.display li .content_block {
    	padding: 0 10px;
    }
    ul.display li .content_block h2 {
    	margin: 0;
    	padding: 5px;
    	font-weight: normal;
    	font-size: 1.7em;
    
    }
    ul.display li .content_block p {
    	margin: 0;
    	padding: 5px 5px 5px 245px;
    	font-size: 1.2em;
    }
    ul.display li .content_block a img{
    	padding: 5px;
    	border: 2px solid #ccc;
    	background: #fff;
    	margin: 0 15px 0 0;
    	float: left;
    }
    
    ul.thumb_view li{
    	width: 250px;
    }
    ul.thumb_view li h2 {
    	display: inline;
    }
    ul.thumb_view li p{
    	display: none;
    }
    ul.thumb_view li .content_block a img {
    	margin: 0 0 10px;
    }
    
    
    a.switch_thumb {
    	width: 122px;
    	height: 26px;
    	line-height: 26px;
    	padding: 0;
    	margin: 10px 0;
    	display: block;
    	background: url(switch.gif) no-repeat;
    	outline: none;
    	text-indent: -9999px;
    }
    a:hover.switch_thumb {
    	filter:alpha(opacity=75);
    	opacity:.75;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    }
    a.swap { background-position: left bottom; }
    
    
    </style>
    Step 2: Copy & Paste JavaScript code below in your HEAD section
    JavaScript
    Code:
    <script type="text/javascript" src="/javascript/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
     
    	$("a.switch_thumb").toggle(function(){
    	  $(this).addClass("swap"); 
    	  $("ul.display").fadeOut("fast", function() {
    	  	$(this).fadeIn("fast").addClass("thumb_view"); 
    		 });
    	  }, function () {
          $(this).removeClass("swap");
    	  $("ul.display").fadeOut("fast", function() {
    	  	$(this).fadeIn("fast").removeClass("thumb_view");
    		});
    	}); 
    
    });
    </script>
    Step 3: Copy & Paste HTML code below in your BODY section
    HTML
    Code:
    <a href="javascript:void(0);" class="switch_thumb">Switch Thumb</a> 
    <ul style="display: block;" class="display">
    	<li>
    		<div class="content_block">
    			<a href="#"><img src="sample.gif" alt=""></a>
    			<h2><a href="#">Image Name</a></h2>
    			<p>Askin',
    jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
    spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
    kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
    driveway shootin'. </p>
    		</div>
    	</li>
    	<li>
    		<div class="content_block">
    			<a href="#"><img src="sample2.gif" alt=""></a>
    			<h2><a href="#">Image Name</a></h2>
    			<p>Askin',
    jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
    spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
    kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
    driveway shootin'. </p>
    		</div>
    	</li>
    	<li>
    		<div class="content_block">
    			<a href="#"><img src="sample3.gif" alt=""></a>
    			<h2><a href="#">Image Name</a></h2>
    			<p>Askin',
    jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
    spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
    kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
    driveway shootin'. </p>
    		</div>
    	</li>
    	<li>
    		<div class="content_block">
    			<a href="#"><img src="sample4.gif" alt=""></a>
    			<h2><a href="#">Image Name</a></h2>
    			<p>Askin',
    jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
    spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
    kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
    driveway shootin'. </p>
    		</div>
    	</li>
    	<li>
    		<div class="content_block">
    			<a href="#"><img src="sample5.gif" alt=""></a>
    			<h2><a href="#">Image Name</a></h2>
    			<p>Askin',
    jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
    spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
    kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
    driveway shootin'. </p>
    		</div>
    	</li>
    	<li>
    		<div class="content_block">
    			<a href="#"><img src="sample6.gif" alt=""></a>
    			<h2><a href="#">Image Name</a></h2>
    			<p>Askin',
    jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
    spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
    kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
    driveway shootin'. </p>
    		</div>
    	</li>
    	<li>
    		<div class="content_block">
    			<a href="#"><img src="sample7.gif" alt=""></a>
    			<h2><a href="#">Image Name</a></h2>
    			<p>Askin',
    jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
    spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
    kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
    driveway shootin'. </p>
    		</div>
    	</li>
    	<li>
    		<div class="content_block">
    			<a href="#"><img src="sample8.gif" alt=""></a>
    			<h2><a href="#">Image Name</a></h2>
    			<p>Askin',
    jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
    spell, chitlins spittin' watchin' hootch me rightly kinfolk that. </p>
    		</div>
    	</li>
    	<li>
    		<div class="content_block">
    			<a href="#"><img src="sample9.gif" alt=""></a>
    			<h2><a href="#">Image Name</a></h2>
    			<p>Askin',
    jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
    spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
    kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
    driveway shootin'. Woman kickin', work yer last dogs, rattler hee-haw
    mobilehome stew trailer driveway shootin'.</p>
    		</div>
    	</li>
    	<li>
    		<div class="content_block">
    			<a href="#"><img src="sample10.gif" alt=""></a>
    			<h2><a href="#">Image Name</a></h2>
    			<p>Askin',
    jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
    spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
    kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
    driveway shootin'. </p>
    		</div>
    	</li>
    	<li>
    		<div class="content_block">
    			<a href="#"><img src="sample11.gif" alt=""></a>
    			<h2><a href="#">Image Name</a></h2>
    			<p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell. </p>
    		</div>
    	</li>
    	<li>
    		<div class="content_block">
    			<a href="#"><img src="sample12.gif" alt=""></a>
    			<h2><a href="#">Image Name</a></h2>
    			<p>Askin',
    jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
    spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
    kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
    driveway shootin'. </p>
    		</div>
    	</li>
    </ul>
    Step 4: downloads
    Files
    Picture_Gallery_with_Display_Switcher_images.zip







  4. #154

    JavaScript Proper Social Security Number Validation

    One more JavaScript code example to accept numeric characters. But this JavaScript will work in the different manner, it on... 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">
    // Created by: Mr. J | http://www.huntingground.net
    // This script downloaded from www.JavaScriptBank.com
    
    function advance2(currentField,nextField,limit) {
      if(nextField!="rset"&&document.myForm2[currentField].value.length == limit){
        document.myForm2[nextField].select();
      } else {
        if (document.myForm2[currentField].value.length == limit) {
          document.myForm2[currentField].maxLength=limit
          document.myForm2[nextField].select()
          document.myForm2[nextField].disabled=false
          document.myForm2[currentField].blur()
          document.myForm2[nextField].style.backgroundColor="#EFCCA4"
        }
      }
    }
    </script>
    Step 2: Place HTML below in your BODY section
    HTML
    Code:
    <p>
    This form is formatted for a social security number (XXX-XX-XXXX).</p>
    
    <form name="myForm2" onreset="this.rset.disabled='true'; this.rset.style.backgroundColor=''">
    <input type="text" name="t1" size="6" onclick="select()" onKeyUp="advance2('t1','t2',3)">
    <input type="text" name="t2" size="6" onclick="select()" onKeyUp="advance2('t2','t3',2)">
    <input type="text" name="t3" size="6" onclick="select()" onKeyUp="advance2('t3','rset',4)">
    <input type="reset" name="rset" onclick="this.blur()" disabled>
    </form>
    
    <div style="text-align: left; width: 70%;">
    <p>
    The limit for each individual field is passed to the function by the appropriate input event, as shown in the form using the format: <code>onKeyUp="advance2('currentField','nextField',limit)</code>"</p>
    </div>






  5. #155

    JavaScript Content Auto-Indexing using DOM

    On the web pages with a lot of text content such as technical documents, novels, text stories, reportages, etc; usually we have to create the bookrmarks (anchor links) manuallly. Now these time-consum... 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">
    .hidden {
      visibility: hidden;
    }
    </style>
    Step 2: Use JavaScript code below to setup the script
    JavaScript
    Code:
    <script type="text/javascript">
    // Created by: Stuart Langridge | http://www.kryogenix.org/ | Licensed under: MIT License
    // This script downloaded from www.JavaScriptBank.com
    
    /*
    Generate a table of contents, based on headings in the page.
    
    To place the TOC on the page, add
    
    <div id="generated-toc"></div>
    
    to the page where you want the TOC to appear. If this element
    is not present, the TOC will not appear.
    
    The TOC defaults to displaying all headings that are contained within
    the same element as it itself is contained in (or all headings on the
    page if you did not provide a generated-toc container). To override this,
    provide a "highest heading" value by adding class="generate_from_h3"
    (or h2, h4, etc) to the container. (If unspecified, this will display all
    headings, as if class="generate_from_h1" was specified.)
    
    The TOC defaults to operating only on headings contained within the same
    element as it itself, i.e., in a page like this:
    
    <div>
      <div>
        <div id="generated-toc"></div>
        <h1>foo</h1>
        <h2>bar</h2>
      </div>
      <h1>quux</h1>
    </div>
    
    The "quux" heading will not appear in the TOC. To override this,
    add class="generate_for_page" to the container, which will process
    all headings on the page wheresoever they may be.
    
    */
    
    generated_toc = {
      generate: function() {
        // Identify our TOC element, and what it applies to
        generate_from = '0';
        generate_for = 'unset';
        tocparent = document.getElementById('generated-toc');
        if (tocparent) {
          // there is a div class="generated-toc" in the document
          // dictating where the TOC should appear
          classes = tocparent.className.split(/\s+/);
          for (var i=0; i<classes.length; i++) {
            // if it specifies which heading level to generate from,
            // or what level to generate for, save these specifications
            if (classes[i].match(/^generate_from_h[1-6]$/)) {
              generate_from = classes[i].substr(classes[i].length-1,1);
            } else if (classes[i].match(/^generate_for_[a-z]+$/)) {
              generate_for = classes[i].match(/^generate_for_([a-z])+$/)[1];
            }
          }
        } else {
          // They didn't specify a TOC element; exit
          return;
        }
    
        // set top_node to be the element in the document under which
        // we'll be analysing headings
        if (generate_for == 'page') {
          top_node = document.getElementsByTagName('body');
        } else {
          // i.e., explicitly set to "parent", left blank (so "unset"),
          // or some invalid value
          top_node = tocparent.parentNode;
        }
    
        // If there isn't a specified header level to generate from, work
        // out what the first header level inside top_node is
        // and make that the specified header level
        if (generate_from == 0) {
          first_header_found = generated_toc.findFirstHeader(top_node);
          if (!first_header_found) {
            // there were no headers at all inside top_node!
            return;
          } else {
            generate_from = first_header_found.toLowerCase().substr(1);
          }
        }
    
        // add all levels of heading we're paying attention to to the
        // headings_to_treat dictionary, ready to be filled in later
        headings_to_treat = {"h6":''};
        for (var i=5; i>= parseInt(generate_from); i--) {
          headings_to_treat["h" + i] = '';
        }
    
        // get headings. We can't say
        // getElementsByTagName("h1" or "h2" or "h3"), etc, so get all
        // elements and filter them ourselves
        // need to use .all here because IE doesn't support gEBTN('*')
        nodes = top_node.all ? top_node.all : top_node.getElementsByTagName('*');
    
        // put all the headings we care about in headings
        headings = [];
        for (var i=0; i<nodes.length;i++) {
          if (nodes[i].nodeName.toLowerCase() in headings_to_treat) {
            // if heading has class no-TOC, skip it
            if ((' ' + nodes[i].className + ' ').indexOf('no-TOC') != -1) {
              continue;
            }
            headings.push(nodes[i]);
          }
        }
    
        // make the basic elements of the TOC itself, ready to fill into
    
        // first, check if there's a cookie defined to save the state as open
        status = generated_toc.readCookie("generated_toc_display");
        if (status && status == "open") {
          display_initially = "block";
          toggle_initially = "Hide table of contents";
        } else {
          display_initially = "none";
          toggle_initially = "Show table of contents";
        }
    
        cur_head_lvl = "h" + generate_from;
        cur_list_el = document.createElement('ul');
        cur_list_el.style.display = display_initially;
        p = document.createElement('p');
        span = document.createElement('span');
        span.className = 'hidden';
        a = document.createElement('a');
        a.href = '#aftertoc';
        a.appendChild(document.createTextNode('skip table of contents'));
        span.appendChild(a);
        p.appendChild(span);
        tocparent.appendChild(p);
        p = document.createElement('p');
        p.id = 'toggle-container';
        a = document.createElement('a');
        a.id = 'generated_toc_d_toggle';
        a.appendChild(document.createTextNode(toggle_initially));
        p.appendChild(a);
        a.onclick = generated_toc.wrapOpenClose(a,cur_list_el);
        a.href = '#';
        tocparent.appendChild(p);
        tocparent.appendChild(cur_list_el);
    
        // now walk through our saved heading nodes
        for (var i=0; i<headings.length; i++) {
          this_head_el = headings[i];
          this_head_lvl = headings[i].nodeName.toLowerCase();
          if (!this_head_el.id) {
            // if heading doesn't have an ID, give it one
            this_head_el.id = 'heading_toc_j_' + i;
            this_head_el.setAttribute('tabindex','-1');
          }
    
          while(this_head_lvl > cur_head_lvl) {
            // this heading is at a lower level than the last one;
            // create additional nested lists to put it at the right level
    
            // get the *last* LI in the current list, and add our new UL to it
            var last_listitem_el = null;
            for (var j=0; j<cur_list_el.childNodes.length; j++) {
              if (cur_list_el.childNodes[j].nodeName.toLowerCase() == 'li') {
                last_listitem_el = cur_list_el.childNodes[j];
              }
            }
            if (!last_listitem_el) {
              // there aren't any LIs, so create a new one to add the UL to
              last_listitem_el = document.createElement('li');
            }
            new_list_el = document.createElement('ul');
            last_listitem_el.appendChild(new_list_el);
            cur_list_el.appendChild(last_listitem_el);
            cur_list_el = new_list_el;
            cur_head_lvl = 'h' + (parseInt(cur_head_lvl.substr(1,1)) + 1);
          }
    
          while (this_head_lvl < cur_head_lvl) {
            // this heading is at a higher level than the last one;
            // go back up the TOC to put it at the right level
            cur_list_el = cur_list_el.parentNode.parentNode;
            cur_head_lvl = 'h' + (parseInt(cur_head_lvl.substr(1,1)) - 1);
          }
    
          // create a link to this heading, and add it to the TOC
          li = document.createElement('li');
          a = document.createElement('a');
          a.href = '#' + this_head_el.id;
          a.appendChild(document.createTextNode(generated_toc.innerText(this_head_el)));
          li.appendChild(a);
          cur_list_el.appendChild(li);
        }
    
        // add an aftertoc paragraph as destination for the skip-toc link
        p = document.createElement('p');
        p.id = 'aftertoc';
        tocparent.appendChild(p);
    
        // go through the TOC and find all LIs that are "empty", i.e., contain
        // only ULs and no links, and give them class="missing"
        var alllis = tocparent.getElementsByTagName("li");
        for (var i=0; i<alllis.length; i++) {
          var foundlink = false;
          for (var j=0; j<alllis[i].childNodes.length; j++) {
            if (alllis[i].childNodes[j].nodeName.toLowerCase() == 'a') {
              foundlink = true;
            }
          }
          if (!foundlink) {
            alllis[i].className = "missing";
          } else {
            alllis[i].className = "notmissing";
          }
        }
    
      },
    
      wrapOpenClose: function(a, cur_list_el) {
        // we return a function here so that it acts as a closure;
        // in essence the inner function, which is the event handler
        // for clicking on the toggle-toc link, remembers the a and cur_list_el
        // elements as they are when they're passed in to it.
        // This is an explicit function rather than an anonymous function
        // defined where it's called so it's easier to understand.
        return function(e) {
          d = cur_list_el.style.display;
          a.firstChild.nodeValue = (d == 'block' ? 'Show' : 'Hide') + ' table of contents';
          a.className = (d == 'block' ? 'toggle-closed' : 'toggle-open');
          cur_list_el.style.display = d == 'block' ? 'none' : 'block';
          // set a cookie to "open" or "closed" to save the state of the TOC
          if (cur_list_el.style.display == "block") {
            generated_toc.createCookie("generated_toc_display","open",21);
          } else {
            generated_toc.createCookie("generated_toc_display","closed",21);
          }
          if (window.event) {
            window.event.returnValue = false;
            window.event.cancelBubble = true;
          } else {
            e.preventDefault();
            e.stopPropagation();
          }
        }
      },
    
      /* cookie handling: http://www.quirksmode.org/js/cookies.html */
      createCookie: function(name,value,days) {
        if (days) {
          var date = new Date();
          date.setTime(date.getTime()+(days*24*60*60*1000));
          var expires = "; expires="+date.toGMTString();
        }
        else var expires = "";
        document.cookie = name+"="+value+expires+"; path=/";
      },
    
      readCookie: function(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
          var c = ca[i];
          while (c.charAt(0)==' ') c = c.substring(1,c.length);
          if (c.indexOf(nameEQ) == 0)
            return c.substring(nameEQ.length,c.length);
        }
        return null;
      },
    
      eraseCookie: function(name) {
        createCookie(name,"",-1);
      },
    
      innerText: function(el) {
        return (typeof(el.innerText) != 'undefined') ? el.innerText :
              (typeof(el.textContent) != 'undefined') ? el.textContent :
              el.innerHTML.replace(/<[^>]+>/g, '');
      },
    
      findFirstHeader: function(node) {
        // a recursive function which returns the first header it finds inside
        // node, or null if there are no functions inside node.
        var nn = node.nodeName.toLowerCase();
        if (nn.match(/^h[1-6]$/)) {
          // this node is itself a header; return our name
          return nn;
        } else {
          for (var i=0; i<node.childNodes.length; i++) {
            var subvalue = generated_toc.findFirstHeader(node.childNodes[i]);
            // if one of the subnodes finds a header, abort the loop and return it
            if (subvalue) return subvalue;
          }
          // no headers in this node at all
          return null;
        }
      },
    
      init: function() {
        // quit if this function has already been called
        if (arguments.callee.done) return;
    
        // flag this function so we don't do the same thing twice
        arguments.callee.done = true;
    
        generated_toc.generate();
      }
    };
    
    (function(i) {var u =navigator.userAgent;var e=/*@cc_on!@*/false; var st =
    setTimeout;if(/webkit/i.test(u)){st(function(){var dr=document.readyState;
    if(dr=="loaded"||dr=="complete"){i()}else{st(arguments.callee,10);}},10);}
    else if((/mozilla/i.test(u)&&!/(compati)/.test(u)) || (/opera/i.test(u))){
    document.addEventListener("DOMContentLoaded",i,false); } else if(e){     (
    function(){var t=document.createElement('doc:rdy');try{t.doScroll('left');
    i();t=null;}catch(e){st(arguments.callee,0);}})();}else{window.onload=i;}})(generated_toc.init);
    </script>
    Step 3: Place HTML below in your BODY section
    HTML
    Code:
    <div>
    
      <div>
        <div id="generated-toc"></div>
        <h1>foo</h1>
        <h2>bar</h2>
      </div>
      <h1>quux</h1>
    </div>






  6. #156

    JavaScript Add-Remove HTML Elements with DOM

    This JavaScript code example will dynamically add/remove HTML elements with content included within them according to ... 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: Dustin Diaz | http://www.dustindiaz.com/
    // This script downloaded from www.JavaScriptBank.com
    
    var Dom = {
      get: function(el) {
        if (typeof el === 'string') {
          return document.getElementById(el);
        } else {
          return el;
        }
      },
      add: function(el, dest) {
        var el = this.get(el);
        var dest = this.get(dest);
        dest.appendChild(el);
      },
      remove: function(el) {
        var el = this.get(el);
        el.parentNode.removeChild(el);
      }
    };
    var Event = {
      add: function() {
        if (window.addEventListener) {
          return function(el, type, fn) {
            Dom.get(el).addEventListener(type, fn, false);
          };
        } else if (window.attachEvent) {
          return function(el, type, fn) {
            var f = function() {
              fn.call(Dom.get(el), window.event);
            };
            Dom.get(el).attachEvent('on' + type, f);
          };
        }
      }()
    };
    Event.add(window, 'load', function() {
      var i = 0;
      Event.add('add-element', 'click', function() {
        var el = document.createElement('p');
        el.innerHTML = 'Remove This Element (' + ++i + ')';
        Dom.add(el, 'content');
        Event.add(el, 'click', function(e) {
          Dom.remove(this);
        });
      });
    });
    </script>
    Step 2: Place HTML below in your BODY section
    HTML
    Code:
    <div id="doc">
    
      <p id="add-element">Add Elements</p>
      <div id="content"></div>
    </div>






  7. #157

    JavaScript Filename Array Maker

    During coding JavaScript applications, we usually have to work with many JavaScript arrays; and sometimes declare/initiate them is the time-consuming tasks.

    For this reason, I would like to present... 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">
    #display {
      position: relative;
      left: 10px;
      width: 450px;
      border: 1px solid black;
      padding: 10px;
    }
    </style>
    Step 2: Copy & Paste JavaScript code below in your HEAD section
    JavaScript
    Code:
    <script type="text/javascript">
    // Created by: Mr. J | http://www.huntingground.net/
    // This script downloaded from www.JavaScriptBank.com
    
    function init(){
      array_name=document.f1.t1.value //name of array
      val2=document.f1.t3a.value
      ext=document.f1.t4.value
      for(r=0;r<document.f1.r1.length;r++){ // check which r1 radio is selected
        if(document.f1.r1[r].checked==true){
          option=document.f1.r1[r].value // selected radio value
        }
      }
    
      if(option==0){
        document.getElementById("display").innerHTML=array_name+" = new Array(" // opening array type 1
      } else {
        document.getElementById("display").innerHTML=array_name+" = new Array()<br>" // opening array type 2 & 3
      }
    
      if(document.f1.r2[0].checked==true){ // if indexed values
        make_array1()
      }
    
      if(document.f1.r2[1].checked==true){ // if non index values
        make_array2()
      }
    }
    
    function make_array1(){
      array_length=document.f1.t2.value-1 // length of array
      index_values=document.f1.t3.value // index value
    
      if(array_length==""||array_length==0){ // make sure a viable number is used
        document.getElementById("display").innerHTML="Please Enter a Number"
        document.f1.b2.disabled=true
        return
      } else {
        if(!ns){document.f1.cpy.disabled=false}
      }
    
      for(num=0;num<array_length;num++){
        j=num
        if(num<10){num="00"+num}
        if(num>9&&num<100){num="0"+num}
        if(document.f1.t4.value.length>0){
          i=num+val2+ext}
          else{i=num+val2}
    
      if(option==0){ // insert inner indexes for type 1
        document.getElementById("display").innerHTML+="\""+index_values+i+"\", "
      } else {
        if(option==1){ // insert inner indexes for type 2
          document.getElementById("display").innerHTML+=array_name+"["+j+"]="
          document.getElementById("display").innerHTML+="\""+index_values+i+"\"<br>"
        } else { // insert inner indexes for type 3
          document.getElementById("display").innerHTML+=array_name+"["+array_name+".length]=\""+index_values+i+"\"<br>"
        }
      }
    }
    
    if(num<10){num="00"+num}
    if(num>9&&num<100){num="0"+num}
    if(num>100){num=num}
    
    if(document.f1.t4.value.length>0){
      i= num+val2+ext}
      else{i=num+val2}
    
      if(option==0){ // insert last indexes for type 1
        document.getElementById("display").innerHTML+="\""+index_values+i+"\")"
      } else {
        if(option==1){ // insert last indexes for type 2
          document.getElementById("display").innerHTML+=array_name+"["+(j+1)+"]="
          document.getElementById("display").innerHTML+="\""+index_values+i+"\"<br>"
        } else { // insert last indexes for type 3
          document.getElementById("display").innerHTML+=array_name+"["+array_name+".length]=\""+index_values+i+"\"<br>"
        }
      }
    }
    
    index_value=new Array()
    count= 0
    last=0
    
    function make_array2(){
      if(!ns){document.f1.cpy.disabled=false}
      for(r=0;r<document.f1.r1.length;r++){ // check which r1 radio is selected
        if(document.f1.r1[r].checked==true){
          chkrad=r
        }
      }
      if(chkrad!=last){ // prevent additional index when only changing array style
        count--
      }
    
      if(document.f1.t4.value.length>0){
        index_value[count]=document.f1.t3.value+ext}
      else {
        index_value[count]=document.f1.t3.value
      }
    
      for(i=0;i<count;i++){
        if(option==0){
          document.getElementById("display").innerHTML+="\""+index_value[i]+"\", "
        } else {
          if(option==2){
            document.getElementById("display").innerHTML+=array_name+"["+array_name+".length]=\""+index_value[i]+"\"<br>"
          } else {
            document.getElementById("display").innerHTML+=array_name+"["+i+"]=\""+index_value[i]+"\"<br>"
          }
        }
      }
    
      if(option==0){
        document.getElementById("display").innerHTML+="\""+index_value[i]+"\")"
      } else {
        if(option==2){
          document.getElementById("display").innerHTML+=array_name+"["+array_name+".length]=\""+index_value[i]+"\"<br>"
        } else {
          document.getElementById("display").innerHTML+=array_name+"["+i+"]=\""+index_value[i]+"\"<br>"
        }
      }
      count++
      document.f1.t3.select()
      last=chkrad
    }
    
    function oreset(){
      count=0
      document.f1.t3.value=""
      document.getElementById("display").innerHTML=""
      document.f1.t3.select()
    }
    
    function chk(){
      if(document.f1.r2[0].checked==true){
        document.f1.t2.disabled=false
        document.getElementById("sp").disabled=false
        document.f1.t2.style.backgroundColor="#FFFFFF"
        document.f1.b1.disabled=false
        document.f1.b2.disabled=true
        document.f1.b3.disabled=true
        document.f1.t3a.disabled=false
        document.f1.t3a.style.backgroundColor="#FFFFFF"
      } else {
        document.f1.t2.disabled=true
        document.getElementById("sp").disabled=true
        document.f1.t2.style.backgroundColor="#c0c0c0"
        document.f1.b1.disabled=true
        document.f1.b2.disabled=false
        document.f1.b3.disabled=false
        document.f1.t3.select()
        document.f1.t3a.disabled=true
        document.f1.t3a.style.backgroundColor="#c0c0c0"
      }
    }
    
    function Copy(id){
      if(ns){
        alert("Sorry, Netscape does not recongise this function")
        document.f1.cpy.disabled=true
        return
      }
      copyit=id
      textRange = document.body.createTextRange();
      textRange.moveToElementText(copyit);
      textRange.execCommand("Copy");
      alert("Copying Complete.\n\nPlease Paste into your SCRIPT")
    }
    
    ns=document.getElementById&&!document.all
    
    function getKey(e) {
      pressed_key=(!ns)?event.keyCode:e.which
      if( pressed_key==13){
        init()
      }
    }
    document.onkeypress = getKey;
    </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
    */
    -->
    <form name="f1">
    
    <table border="0">
      <tr>
        <td>Array Name:</td>
        <td colspan="6">
          <input type="text" name="t1" value="myArray">
        </td>
      </tr><tr>
        <td>
    
          <span id="sp">Indexed Array Length:</span>
        </td>
        <td colspan="6">
          <input type="text" name="t2" value="5" size="3" maxlength="3">
        </td>
      </tr><tr>
        <td>Index Value:</td>
        <td colspan="6">
    
          <input type="text" name="t3" value="image" size="10">
          <input type="text" name="t3a" value="_tn" size="10"> Ext
          <input type="text" name="t4" value=".jpg" size="4" maxlength="4">
        </td>
      </tr><tr>
        <td>Index Style:</td>
        <td align="right">1
          <input type="radio" name="r1" value="0" checked onclick="init()">
        </td>
    
        <td> </td>
        <td align="right">2
          <input type="radio" name="r1" value="1" onclick="init()">
        </td>
        <td> </td>
        <td align="right">3
          <input type="radio" name="r1" value="2" onclick="init()">
        </td>
        <td width="80"> </td>
    
      </tr><tr>
        <td>Add Numerical Values:</td>
        <td align="right">Yes
          <input type="radio" name="r2" value="0" checked onclick="chk()">
        </td>
        <td align="center"> </td>
        <td align="right">No
          <input type="radio" name="r2" value="1" onclick="chk()">
        </td>
    
        <td> </td>
        <td colspan="2"> </td>
      </tr><tr align="center">
        <td>
          <input type="button" name="b1" value="Numerical Enter" onclick="init()">
        </td>
        <td colspan="6">
          <input type="button" name="cpy" value="Copy Array" onclick="Copy(display)" disabled>
    
          <input type="button" name="b2" value="Manual Enter" onclick="init()" disabled>
          <input type="button" name="b3" value="Restart" onclick="oreset()" disabled>
        </td>
      </tr>
    </table>
    
    </form>
    
    <div id="display"></div>






  8. #158

    jQuery JavaScript Countdown Timer with Bar Display

    This is really a cool JavaScript code example to display an amazing JavaScript countdown timer on your web pages. With the support of the powerful JavaScript framework - jQuery - you can set the point... 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" media="screen">
    /*
         This script downloaded from www.JavaScriptBank.com
         Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
    */
       #seconds-box,#minutes-box,#hours-box,#days-box {
       width: 222px;
       height: 30px;
       background: #eee;
       border: 1px solid #ccc;
            }
    
      #seconds-outer,#minutes-outer,#hours-outer,#days-outer {
       margin: 10px;
       width: 200px;
       height: 9px;
       border: 1px solid #aaa;
       background: #f3f3f3;
      }
      
      #seconds-inner,#minutes-inner,#hours-inner,#days-inner {
       height: 100%;
       width: 100%;
       background: #c00;
      }
    
            #seconds-count,#minutes-count,#hours-count,#days-count {
                float: left;
                font-size: 0.9em;
                margin-left: -200px;
                margin-top: 7px;
              
            }
    
     </style>
    Step 2: Use JavaScript code below to setup the script
    JavaScript
    Code:
    <script type="text/javascript" src="/javascript/jquery.js"></script>
    <script type="text/javascript">
    
    /*
         This script downloaded from www.JavaScriptBank.com
         Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
    */
        function timeleft(timetype){
            days=0;hours=0;mins=0;
            var e = new Date(2010,11,25,0,0,0);
            var now  = new Date();
            var left = e.getTime() - now.getTime();
    
            left = Math.floor(left/1000);
      days = Math.floor(left/86400);
      left = left%86400;
      hours=Math.floor(left/3600);
      left=left%3600;
      mins=Math.floor(left/60);
      left=left%60;
      secs=Math.floor(left);
    
            switch(timetype){
                case "s":
                    return secs;
                    break;
                case "m":
                    return mins;
                    break;
                case "h":
                    return hours;
                    break;
                case "d":
                    return days;
                    break;
            }
        }
    
        function set_start_count(){
            set_hour_count();
            set_minute_count();
            set_day_count();
        }
    
        function set_day_count(){
            d=timeleft('d');
            $('#days-count').text(d.toString() + ' day(s)');
        }
    
        function set_hour_count(){
            h=timeleft('h');
            $('#hours-count').text(h.toString() + ' hour(s)');
        }
    
        function set_minute_count(){
            m = timeleft('m');
            $('#minutes-count').text(m.toString()+ ' minute(s)');
        }
        function set_second_count(){
            s = timeleft('s');
            $('#seconds-count').text(s.toString() + ' second(s)');
        }
    
        function update_minute(){
            var now = new Date();
            var mw = $('#minutes-outer').css('width');
            mw = mw.slice(0,-2);
            var s = now.getSeconds(); 
            sleft = (60 - s)
            if (sleft == 0)
            {
                sleft=60;
            }
            m = ((sleft/60)*mw).toFixed();
            $('#minutes-inner').css({width:m});
            return sleft*1000;
        }
    
        function update_hour(){
            var now = new Date();
            var mw = $('#hours-outer').css('width');
            mw = mw.slice(0,-2);
            var s = now.getMinutes(); 
            sleft = 60 - s
            m = ((sleft/60)*mw).toFixed();
    
            $('#hours-inner').css({width: m});
            return sleft*(1000*60);
        }
    
        function update_day(){
    
            var now = new Date();
            var mw = $('#days-outer').css('width');
            mw = mw.slice(0,-2);
            var s = now.getHours(); 
            sleft = 24 - s
            m = ((sleft/24)*mw).toFixed();
    
            $('#days-inner').css({width: m });
            return sleft*(1000*60*24);
        }
    
        function reset_day(){
            $('#days-inner').width($('#days-outer').width());
            start_countdown_day();
        }
    
        function reset_hour(){
            $('#hours-inner').width($('#hours-outer').width());
            start_countdown_hour();
        }
    
        function reset_second(){
            $('#seconds-inner').width($('#seconds-outer').width());
            start_countdown_second();
        }
    
        function reset_minute(){
            $('#minutes-inner').width($('#minutes-outer').width());
            start_countdown_minute();
        }
    
        function start_countdown_second(){
             set_second_count();
             now = new Date();
             $('#seconds-inner').animate({width: 0}, 1000,reset_second);
        }
    
        function start_countdown_minute(){
            set_minute_count();
            $('#minutes-inner').animate({width: 0}, update_minute(),reset_minute);
            //update_minute());
        }
    
        function start_countdown_hour(){
            set_hour_count();
            $('#hours-inner').animate({width: 0},update_hour(),reset_hour);
        }
    
        function start_countdown_day(){
            set_day_count();
            $('#days-inner').animate({width: 0},update_day(),reset_day);
        }
    
        $(document).ready( function(){ 
            start_countdown_second();
            start_countdown_minute();
            start_countdown_hour();
            start_countdown_day();
         });
    </script>
    Step 3: Place HTML below in your BODY section
    HTML
    Code:
    <center>
     
     <div id="days-box">
         <div id="days-count"> </div>
         <div id="days-outer"> 
            <div id="days-inner"> </div> 
         </div>
     </div>
    
    
     <div id="hours-box">
         <div id="hours-count"> </div>
         <div id="hours-outer"> 
            <div id="hours-inner"> </div> 
         </div>
     </div>
    
     <div id="minutes-box">
         <div id="minutes-count"> </div>
         <div id="minutes-outer"> 
            <div id="minutes-inner"> </div> 
         </div>
     </div>
    
    <div id="seconds-box">
         <div id="seconds-count"> </div>
         <div id="seconds-outer"> 
            <div id="seconds-inner"> </div> 
         </div>
     </div>
    
    </center>
    Step 4: downloads
    Files
    jquery.js







  9. #159

    JavaScript Dynamic Drop Down Values on Action

    If your web pages have a huge list of options to show in the drop down menus (listed into categories), why don't you consider to use this JavaScri... 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: Sandeep Gangadharan | http://www.sivamdesign.com/scripts/
    // This script downloaded from www.JavaScriptBank.com
    
    function changer(link) {
      if (link=="") {
        return; }
    
    //======================
    // Edit this portion below. For each new state copy and paste
    // the entire IF statement and change the name of the state and the cities.
    // Make sure the spelling of the state is the same in the IF statement and in the link.
    
      if (link=="Arizona") {
        document.theForm.theState.value="Arizona";
        var theOptions=new Array (
          "Bisbee",
          "Deer Valley",
          "Flagstaff",
          "Mesa",
          "Phoenix"); }
      else if (link=="California") {
        document.theForm.theState.value="California";
        var theOptions=new Array (
          "Alameda",
          "Bakersfield",
          "Burbank",
          "Los Angeles"); }
      else if (link=="Florida") {
        document.theForm.theState.value="Florida";
        var theOptions=new Array (
          "Altamonte Springs",
          "Boca Raton",
          "Miami",
          "West Palm Beach"); }
      else if (link=="New York") {
        document.theForm.theState.value="New York";
        var theOptions=new Array (
          "Albany",
          "East Rockaway",
          "New York City"); }
    
    // Do not edit anything below this line:
    //======================
    
      i = document.theForm.secondChoice.options.length;
        if (i > 0) {
          document.theForm.secondChoice.options.length -= i; document.theForm.secondChoice.options[i] = null;
        }
    
      var theCount=0;
      for (e=0; e<theOptions.length; e++) {
        document.theForm.secondChoice.options[theCount] = new Option();
        document.theForm.secondChoice.options[theCount].text = theOptions[e];
        document.theForm.secondChoice.options[theCount].value = theOptions[e];
        theCount=theCount+1; }
    }
    
    //  NOTE: [document.theForm.theState.value] will get you the name of the state,
    //  and [document.theForm.secondChoice.value] the name of the city chosen
    </script>
    Step 2: Place HTML 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
    */
    -->
    <form name=theForm>
      <strong>Select a State:</strong><br>
    
      <a href="javascript:changer('Arizona')">Arizona</a> | 
      <a href="javascript:changer('California')">California</a> | 
      <a href="javascript:changer('Florida')">Florida</a> | 
      <a href="javascript:changer('New York')">New York</a>
      <br><br>
      <strong>Then ...</strong><br>
    
      <input type="hidden" name="theState">
      <select name="secondChoice">
         <option value="">Select a City</option>
      </select>
    </form>






  10. #160

    Build Simple Flash Timer Countdown in ActionScript

    Countdown timer for an event seems to be an indispensable thing in the modern life of human, we can see them in the holidays of Christmas, new year, birthday, etc. Or easily, we can see them daily in ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


    How to setup







Page 16 of 17 FirstFirst ... 614151617 LastLast

Similar Threads

  1. Need Help In JavaScript
    By Zash in forum Programming
    Replies: 1
    Last Post: 10 September, 2010, 18:08 PM
  2. Javascript
    By Sbfc_ in forum Community Building
    Replies: 5
    Last Post: 19 March, 2010, 00:21 AM
  3. Javascript
    By KMRock in forum Programming
    Replies: 0
    Last Post: 29 July, 2009, 01:02 AM
  4. [WTH] $$ for Simple Javascript
    By MarxGrayscaleServices in forum Services
    Replies: 2
    Last Post: 31 May, 2009, 19:31 PM
  5. Use PHP functions in JavaScript
    By ankit in forum Programming
    Replies: 3
    Last Post: 31 May, 2009, 10:12 AM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •