Computer Forums
Page 9 of 14 « First 78 9 1011 Last »
Show 40 post(s) from this thread on one page

Computer Forums (http://www.geekboards.com/forums/index.php)
-   Building Websites (http://www.geekboards.com/forums/forumdisplay.php?f=3)
-   -   JavaScript codes for Web DEV (http://www.geekboards.com/forums/showthread.php?t=15045)

JavaScriptBank 01-28-2011 10:15 AM
Browser Cookie with JavaScript and jQuery
 
This short JavaScript article tutorial guides you how to work with browser cookie, cookie in JavaScript by using the JavaScript framework jQuery, through some basi... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 01-28-2011 07:49 PM
JavaScript Color Gradient Maker
 
With this JavaScript code example, you can easy make CSS gradient background, [URL="http://www.javascriptbank.com/=JavaScript color gradient"]JavaScript color gradient</a... 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: Joseph Myers | http://www.codelib.net/
// This script downloaded from www.JavaScriptBank.com

function colorscale(hexstr, scalefactor) {
/* declared variables first, in order;
  afterwards, undeclared local variables */
  var r = scalefactor;
  var a, i;
  if (r < 0 || typeof(hexstr) != 'string')
    return hexstr;
    hexstr = hexstr.replace(/[^0-9a-f]+/ig, '');
    if (hexstr.length == 3) {
    a = hexstr.split('');
  } else if (hexstr.length == 6) {
    a = hexstr.match(/(\w{2})/g);
  } else
    return hexstr;
  for (i=0; i<a.length; i++) {
    if (a[i].length == 2)
      a[i] = parseInt(a[i], 16);
    else {
      a[i] = parseInt(a[i], 16);
      a[i] = a[i]*16 + a[i];
  }
}

var maxColor = parseInt('ff', 16);

function relsize(a) {
  if (a == maxColor)
  return Infinity;
  return a/(maxColor-a);
}

function relsizeinv(y) {
  if (y == Infinity)
  return maxColor;
  return maxColor*y/(1+y);
}

for (i=0; i<a.length; i++) {
  a[i] = relsizeinv(relsize(a[i])*r);
  a[i] = Math.floor(a[i]).toString(16);
  if (a[i].length == 1)
  a[i] = '0' + a[i];
}
return a.join('');
}

function showrainbow(f) {
  var colorcell, hex, i, nhex;
  hex = f.orig.value;
  hex = hex.replace(/\W/g, '');
  nhex = colorscale(hex, f.scalef.value-0);
  if (nhex != hex) {
    f.outp.value = nhex;
    colorcell = document.getElementById('origcolor');
    i = document.getElementById('newcolor');
    colorcell.style.background = '#' + hex;
    i.style.background = '#' + nhex;
    for (i=0; i<256; i++) {
      colorcell = document.getElementById('colorcell'+i);
      nhex = colorscale(hex, i/(256-i));
      colorcell.style.background = '#' + nhex;
      colorcell.nhexvalue = nhex;
    }
  }
}
</script>
Step 2: Copy & Paste HTML code below in your BODY section
HTML
Code:
<div style="width: 400px;">
<form>
<p>
Original color: <input type="text" name="orig" value="339990"><br>
Scale factor: <input type="text" name="scalef" value="4"><br>
<input type="button" value="Output" onclick="showrainbow(this.form)">
<input type="text" readonly name="outp" style="border: none;">
</p>
</form>

<table width="150">
<tr>
<td width="50%" height="50" id="origcolor">Original</td>
<td width="50%" id="newcolor">New</td></tr>
</table>

<table cellpadding="0" cellspacing="0">
<tr>
<script type="text/javascript">
for (i=0; i<256; i++)
document.write('<td width="10" height="50" id="colorcell', i, '" onclick="document.forms[0].outp.value = this.nhexvalue"></td>');
</script>
</tr>
</table>

</div>

JavaScriptBank 01-28-2011 08:24 PM
Built-in JavaScript RegEx APIs
 
Regular Expressions (RegEx) skills are the indispensable knowledges if you would like become a professional JavaScript coder particularly, or a professional programmer generally; because of a lot of p... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 02-04-2011 07:09 PM
JavaScript OOP with Input Display Toggle
 
Usage of this JavaScript code effect is just toggle (show/display) the input text fields when the users click the specified input checkboxes. But this JavaScript code example made with OOP skills, it'... 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: Fang | http://www.webdeveloper.com/forum/showthread.php?p=872326#post872326
// This script downloaded from www.JavaScriptBank.com

function addElement() {
var aInput=document.getElementById('myspan').getElementsByTagName('input');
for(var i=0; i<aInput.length; i++) {
    aInput[i].onclick=new Function('addDelete(this)');
    }
}

function addDelete(obj) {
var parentSpan=document.getElementById('myspan');
if(obj.nextSibling.nodeName!='INPUT') { // add
    var oInputText=document.createElement('input');
    oInputText.setAttribute('type', 'text');
    parentSpan.insertBefore(oInputText, obj.nextSibling);
    }
else { // delete
    parentSpan.removeChild(obj.nextSibling);
    }
}

// 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() {
  addElement();
});
</script>
Step 2: Copy & Paste HTML code below in your BODY section
HTML
Code:
<span id="myspan">
  <input type="checkbox">

  <input type="checkbox">
  <input type="checkbox">
</span>

JavaScriptBank 02-04-2011 08:58 PM
50+ Great Web Applications of Data Visualization
 
Perhaps just read technical JavaScript article tutorials on jsB@nk made you become humdrum?! Today together, we should change the subject in this post, we'll enjoy 5... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

JavaScriptBank 02-04-2011 09:33 PM
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>

JavaScriptBank 02-04-2011 10:06 PM
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

JavaScriptBank 02-04-2011 10:38 PM
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: CSS below for styling thescript, place it into 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: Use JavaScript code below to setup the script
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

JavaScriptBank 02-15-2011 07:59 PM
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: Use JavaScript code below to setup the script
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>

JavaScriptBank 02-15-2011 09:10 PM
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: Use JavaScript code below to setup the script
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>


All times are GMT -5. The time now is 10:21 AM.
Page 9 of 14 « First 78 9 1011 Last »
Show 40 post(s) from this thread on one page

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
HTML Help provided by HTML Help Central.