Computer Forums

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 08-14-2010 12:27 PM

10 Tiptop Analog and Digital Clock Resources and Techniques with Javascript
 
With beautiful and amazing analog or digital clock on the web pages, you're able to attract more visitors to your website if it relates to some date/time. In Flash, the web developers and web designer... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup







JavaScriptBank 08-16-2010 08:32 PM

Helpful JavaScript Time and Date Picker, Plugins for Frameworks
 
Do you need a beautiful JavaScript time/date picker for your web blog? Just spend a little of time to view these JavaScript time and date pickers in action, maybe you wi... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup







JavaScriptBank 08-16-2010 09:05 PM

Incredible and Amazing 3D JavaScript Canvas Enginges
 
Did you ever imagine the JavaScript programming language could render fantastic, incredible out of 3D effects, animations? Let check out these JavaScript codes presented in this free JavaScript articl... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup







JavaScriptBank 08-20-2010 08:56 PM

Super Amazing jQuery Dynamic Navigation Menu Solutions
 
In the world of jQuery framework, there are many design miracles made by web developers, web designers that attract the web audiences. One of these jQuery d... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup







JavaScriptBank 08-20-2010 09:35 PM

JavaScript Try and Catch Statement in Advance
 
Through this free JavaScript article tutorial, <i>Louis</i> gives you a detailed viewpoint about <code>Try</code> and <code>Catch</code> statement in the JavaScript wen programming language; by specif... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup







JavaScriptBank 08-25-2010 07:26 PM

Great Powered Resources for 7 Helpful jQuery Plug-ins
 
This free JavaScript article provides a list of over 20 great resources for jQuery add-ons, such as: jQuery AJAX plugin, Paralax, jQuery UI plugin, jQuery plugin form, jQuery Background tricks, jQuery... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup







JavaScriptBank 08-27-2010 07:38 PM

Top 10 Free Web Chat box Plug-ins and Add-ons
 
If you want to make your website more interactive and attract thousands of visitors on a regular basis, then adding an online chat box to the website is perhaps one ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup







JavaScriptBank 09-08-2010 07:32 PM

jsClock: Featured Digital Clock JavaScript
 
If you're needing a simple digital clock that is updating automatically and takes directly the time from the server, also you want to show the time in other count... 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">
/*
    This script downloaded from www.JavaScriptBank.com
    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
.clock{
        cursor:pointer;
        padding:5px 5px 5px 5px;
        margin:5px 0 5px 0;
        width:70px;
        -webkit-border-bottom-right-radius: 4px;
        -webkit-border-bottom-left-radius: 4px;
        -webkit-border-top-right-radius: 4px;
        -webkit-border-top-left-radius: 4px;
        -moz-border-radius-bottomright: 4px;
        -moz-border-radius-bottomleft: 4px;
        -moz-border-radius-topright: 4px;
        -moz-border-radius-topleft: 4px;
        text-align:center;
        font-weight: bold;
        font-family: arial;
}


#clock {
        background-color:#000000;
        color:#00CC66;
}

#reloj {
        background-color:#999999;
        color:#FFFFFF;
}


#rellotje {
        background-color:#237ab2;
        color:#FFFFFF;
}
</style>

Step 2: Use JavaScript code below to setup the script
JavaScript
Code:

<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 moveClock(idClock,startTime){//move given clock
        var timeout=1000;//miliseconds to repeat the function

        if ( startTime === undefined ) {//just take the browser time
                    rightNow = new Date();
                hour = rightNow.getHours();
                minute = rightNow.getMinutes();
                second = rightNow.getSeconds();               
        }       
        else{//starttime set
                rightNow = startTime.split(':',3);
                hour = parseInt(rightNow[0],10);
                minute =  parseInt(rightNow[1],10);
                second =  parseInt(rightNow[2],10);
                if (second==59){
                        if (minute==59){
                                if (hour==23) hour=0;       
                                else hour++;
                                minute=0;
                        }else minute++;
                        second=0;
                }else second++;
        }

        if (minute<10) minute= "0" + minute;
        if (second<10) second= "0" + second;

        currentTime=hour + ":" + minute + ":" +second;// tim to return
        document.getElementById(idClock).innerHTML = currentTime;//tim for the HTML element

        //recursivity
        if (startTime===undefined) setTimeout("moveClock('"+idClock+"')",timeout);//browser time
        else setTimeout("moveClock('"+idClock+"','"+currentTime+"')",timeout);//set time
               
}
</script>

Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:

Normal clock using browser time:

<div id="clock" class="clock">clock</div>moveClock("clock");<br /><br />
<hr>
Clock using server time:
<div id="reloj" class="clock">reloj</div>  moveClock("reloj","< ?php echo date("G:i:s");? >");<br /><br />
<hr>
Clock with manual time:
<div id="rellotje" class="clock">rellotje</div> moveClock("rellotje","23:58:56");<br /><br />
<hr>

<script  type='text/javascript'>
moveClock("clock");
moveClock("reloj","2:23:25");
moveClock("rellotje","23:58:56");
</script>







JavaScriptBank 09-09-2010 07:41 PM

jsPDF: Generating your PDF Web Page Documents using JavaScript
 
<b>jsPDF</b> is an open-source JavaScript library written by <i>James</i>, this tool allow us generate PDF web page documents in server-side and client-side by using nothing... 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" src="base64.js"></script>
<script type="text/javascript" src="sprintf.js"></script>
<script type="text/javascript" src="jspdf.js"></script>

<script type="text/javascript">

function demo1() {
        var doc = new jsPDF();
        doc.text(20, 20, 'Hello world!');
        doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
        doc.addPage();
        doc.text(20, 20, 'Do you like that?');
       
        // Output as Data URI
        doc.output('datauri');
}

function demo2() {
        var doc = new jsPDF();
        doc.setFontSize(22);
        doc.text(20, 20, 'This is a title');
       
        doc.setFontSize(16);
        doc.text(20, 30, 'This is some normal sized text underneath.');       
       
        // Output as Data URI
        doc.output('datauri');
}

function demo3() {
        var doc = new jsPDF();
        doc.text(20, 20, 'This PDF has a title, subject, author, keywords and a creator.');
       
        // Optional - set properties on the document
        doc.setProperties({
                title: 'Title',
                subject: 'This is the subject',               
                author: 'James Hall',
                keywords: 'generated, javascript, web 2.0, ajax',
                creator: 'MEEE'
        });
       
        // Output as Data URI
        doc.output('datauri');
}

function demo4() {       
        var name = prompt('What is your name?');
        var multiplier = prompt('Enter a number:');
        multiplier = parseInt(multiplier);

        var doc = new jsPDF();
        doc.setFontSize(22);       
        doc.text(20, 20, 'Questions');
        doc.setFontSize(16);
        doc.text(20, 30, 'This belongs to: ' + name);
       
        for(var i = 1; i <= 12; i ++) {
                doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ___');
        }
       
        doc.addPage();
        doc.setFontSize(22);
        doc.text(20, 20, 'Answers');
        doc.setFontSize(16);
       
        for(var i = 1; i <= 12; i ++) {
                doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));
        }       
        doc.output('datauri');
       
}

</script>

Step 2: Copy & Paste HTML code below in your BODY section
HTML
Code:

<h2>Simple Two-page Text Document</h2>
<pre>var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.addPage();
doc.text(20, 20, 'Do you like that?');

// Output as Data URI
doc.output('datauri');</pre>
<a href="javascript:demo1()">Run Code</a>

<h2>Different font sizes</h2>
<pre>var doc = new jsPDF();
doc.setFontSize(22);
doc.text(20, 20, 'This is a title');

doc.setFontSize(16);
doc.text(20, 30, 'This is some normal sized text underneath.');       

// Output as Data URI
doc.output('datauri');</pre>
<a href="javascript:demo2()">Run Code</a>


<h2>Adding metadata</h2>
<pre>var doc = new jsPDF();
doc.text(20, 20, 'This PDF has a title, subject, author, keywords and a creator.');

// Optional - set properties on the document
doc.setProperties({
        title: 'Title',
        subject: 'This is the subject',               
        author: 'James Hall',
        keywords: 'generated, javascript, web 2.0, ajax',
        creator: 'MEEE'
});

// Output as Data URI
doc.output('datauri');</pre>
<a href="javascript:demo3()">Run Code</a>


<h2>Example of user input</h2>
<pre>var name = prompt('What is your name?');
var multiplier = prompt('Enter a number:');
multiplier = parseInt(multiplier);

var doc = new jsPDF();
doc.setFontSize(22);       
doc.text(20, 20, 'Questions');
doc.setFontSize(16);
doc.text(20, 30, 'This belongs to: ' + name);

for(var i = 1; i <= 12; i ++) {
        doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ___');
}

doc.addPage();
doc.setFontSize(22);
doc.text(20, 20, 'Answers');
doc.setFontSize(16);

for(var i = 1; i <= 12; i ++) {
        doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));
}       
doc.output('datauri');</pre>
<a href="javascript:demo4()">Run Code</a>

Step 3: Download files below
Files
base64.js
jspdf.js
sprintf.js







JavaScriptBank 09-10-2010 07:52 PM

Remove an Element in JavaScript Array
 
This free JavaScript snippet guides you how to remove an element in JavaScript array, by the value of element or its index. Very useful and helpful for coding and programming in JavaScript. Indexes in... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup








All times are GMT -5. The time now is 03:06 AM.

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