Search the Community

Hello everyone I have an array ( php ) which i want it to use in javascrip. i have used json encode function but this is not the problem. I want to use the values from an array and plot a graph The PHP array looks like this <?php $visits = array( 'UK' => 5, 'US' => 10, 'AS' => 15, 'AD' => 20, 'FG' => 25, 'HF' => 30, 'DG' => 35, 'JH' => 40, 'ET' => 45, 'HG' => 50, 'KT' => 55, 'ER' => 10, 'UI' => 65, 'ER' => 70, 'UY' => 75, 'UT' => 80, 'UK' => 5 ); ?> and the javascript file is <script type="text/javascript"> var arr = "<?php json_encode($visits) ?>"; $(function () { $('#container').highcharts({ chart: { type: 'area' }, title: { text: 'Total Impressions' }, subtitle: { text: '' }, xAxis: { labels: { formatter: function() { return this.value; // clean, unformatted number for year } } }, yAxis: { title: { text: 'Hits' }, labels: { formatter: function() { return this.value / 1000 +'k'; } } }, tooltip: { pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}' }, plotOptions: { area: { pointStart: 1940, marker: { enabled: false, symbol: 'circle', radius: 2, states: { hover: { enabled: true } } } } }, series: [{ name: 'Country', data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640, --- This are all demo values 1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126, | 27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662, | 26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605, | <---- This is where i want to loop through the countries from my array 24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, | 22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, | 10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ] --- }, { name: 'Hits', data: [null, null, null, null, null, null, null , null , null ,null, --- This are all demo values 5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322, | 4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478, | 15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049, | <---- This is where i want to loop through the values from my array. 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000, | 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000, | 21000, 20000, 19000, 18000, 18000, 17000, 16000] --- }] }); }); </script> Any help will be greatly appreciated... Thank in advance,....

I've never understood the application of return true and return false after function calls in JavaScript. Could somebody please explain their meaning. This is a very simple script which will create a popup window for each links in an html document. function createPopup(e) { 'use strict'; // Get the event object: if (typeof e == 'undefined') var e = window.event; // Get the event target: var target = e.target || e.srcElement; // Create the window: var popup = window.open(target.href, 'PopUp', 'height=100,width=100,top=100,left=100,location=no,resizable=yes,scrollbars=yes'); // Give the window focus if it's open: if ( (popup !== null) && !popup.closed) { popup.focus(); return false; // Prevent the default behavior. } else { // Allow the default behavior. return true; } } // End of createPopup() function. // Establish functionality on window load: window.onload = function() { 'use strict'; // Add the click handler to each link: for (var i = 0, count = document.links.length; i < count; i++) { document.links[i].onclick = createPopup; } // End of for loop. }; // End of onload function. The only part of the script that doesn't make sense here is the return true/false. Why do we use return true or return false after calling a JavaScript function?

Given the following code: updateTotal: function () { var total = 0; $('input#itemLineTotal').each(function (i) { price = $(this).val().replace("$", ""); if (!isNaN(price)) total += Number(price); }); $('#subTotal').html("$" + this.roundNumber(total, 2)); var grdTotal = total + this.updateSalesTax(); grdTotal = this.roundNumber(grdTotal, 2); $('#grandTotalTop, #grandTotal').html("$" + grdTotal); }, updateSalesTax: function () { var total = 0; $('input#itemLineTotal').each(function (i) { price = $(this).val().replace("$", ""); if (!isNaN(price)) total += Number(price); }); var tax = $("#tax").val(); $("#salesTax").html("$" + mioInvoice.roundNumber(tax, 2)); return tax; }, How can add the tax to the total to give the grand total. Please help

Hi i want to change the attribute of a div id when the div is clicked.. but its not working for some reason ? $('#prev').attr('id',''); $('#next').attr('id','2'); //Pagination Click $(".controls").click(function(){ $("html, body").animate({ scrollTop: 0 }, 700); $('#next').removeattr('id',''); $('#prev').attr('id',''); $('#next').attr('id','7');

Hello mates, I'm a newbie to JavaScript. Normally when I assign an HTML element to a variable created in JavaScript I place the element id in quotes like this: var output = document.getElementById('output'); But there is something new that I've come across: var output = document.getElementById(elementId); elementId is an undeclared parameter and it is without quotes. 'output' in the first snippet refers to <p id="output"></p> in the HTML code. What is surprising to me is that var output = document.getElementById(elementId); works just the same even though there is no HTML element declared with the name elementId. To put this into context, the code is in 2 files; today.html and today.js. today.html: <html> <head> <title>Today</title> </head> <body> <p id="output"></p> <script src="today.js"></script> </body> </html> today.js: function setText(elementId, message) { 'use strict'; if ( (typeof elementId == 'string') && (typeof message == 'string') ) { // Get a reference to the paragraph: var output = document.getElementById(elementId); // Update the innerText or textContent property of the paragraph: if (output.textContent !== undefined) { output.textContent = message; } else { output.innerText = message; } } // End of main IF. } function init() { 'use strict'; var today = new Date(); var message = 'Right now it is ' + today.toLocaleDateString(); message += ' at ' + today.getHours() + ':' + today.getMinutes(); // Update the page: setText('output', message); } // End of init() function. window.onload = init;

Javascript CODE: var m=n=0; function show_services() { m=m+1; n=m+1; if(m==6) {m=6;n=1;} if(m==7) {m=1;n=2;} str1 = "/images/pic" + m + ".PNG"; str2 = "/images/pic" + n + ".PNG"; document.getElementById('w1').innerHTML = str1; document.getElementById('w2').innerHTML = str2; document.getElementById('img1').src = str1; document.getElementById('img2').src = str2; } var my_str = setInterval(function() {show_services()},1000); ############################################################################## <img id="img1" src="/images/pic1.PNG" style="margin-top:30px" height="100px" width="550px"/><br> <img id="img2" src="/images/pic2.PNG" style="margin-top:30px" height="100px" width="550px"/><br> <br> <div id='w1'></div> <br> <div id='w2'></div> ############################################################################## the code is working fine, files have been placed at the right place, str1 and str2 are getting correct values and they are updating at the right time..............I run same code on browser and it works fine, but, when I run the same code on website domain, it does work at all, what can be the reason for this ............

can someone help me?can you make this script?i dont make the script yet. when i click set as correct..., clicked response become correct answer and the other become default. thanks in advance, sorry for my bad english. iam indonesian.

Hi friends, i am new in php, user fill the text box to get the value and post it to the next page using ajax. this is my requirement. i call the textbox in while loop ,so i used the text box name is ship_quantity[] In jquery i get the value like that $('input[name="ship_quantity[]"]').each(function(){ var sq=$(this).val(); alert(sq); now i get the value of 1,2 as user inputs. my questions is how to extract this values and send to ajax post.

Hi guys, I was wondering if i could have some help on a piece of functionality I am trying to implement onto a website I am currently developing. The Scenario is as follows : I have a table residing on a MySql data base called Bookings. The Bookings table consists of a composite primary key based upon the following 2 fields: BookingDate & Booking Slot. On my website, I have built a bookings page which will consist of a a simple HTML Form, which has a Date Field and a Radio-Button group which has 3 different time slots (eg: 9am, 2pm and 4pm). Firstly, the User will select a Date they would wish to place a booking on and then click a submit button called "Check Availablity". Once this button is clicked, Ideally, I would like a script to check an see what free slots are available for that Date and then disable the radio buttons related the slots which are already booked. Here is a simple scenario to help explain the functionality i am trying to implement : The User comes to the Bookings page, and selects the Date 14/03/2011. Then clicks the "Check Availablity" button. In this scenario, the 9am slot is already booked for this date (eg: this booking already exists on the MySql database table), so the 9am radio button on the page is then disabled, not allowing the user to try an attempt to book this timeslot on this date. Below is the a simplified version of the php script which I wrote to implement the this functionality. <?php function checkSlot() { // Get data $test_date = $_GET["bookingDate"]; // Database connection $conn = mysqli_connect("localhost","root","","wordpress"); if(!$conn) { die('Problem in database connection: ' . mysql_error()); } // Attempt to find Duplicate Primary Keys $query = "SELECT Count(*) AS 'total' FROM Bookings WHERE booking_date ='{$booking_date}' AND booking_slot = '9am'"; $result = mysqli_query($conn, $query) or die(mysqli_error($conn)); $num = $result->fetch_assoc(); If ($num['total'] == 0) { echo "<script> document.getElementById('9amTimeSlotRadioButton').disabled = false; </script>"; } else if($num['total'] > 0) { echo "<script> document.getElementById('9amTimeSlotRadioButton').disabled = true; </script>"; } } ?> My problem is that I cant get the Javascript line within the if statement to execute and disable/enable the related 9am radio button. Upon research into this, I have recently found out that it is not possible to do this with just Php and JavaScript, as php runs serverside and javascript runs client-side and Ajax would be needed here. So, im in a spot of bother now as one of the main selling points of this project was to be able to get this functionality working. I have a massive favour to ask of you guys, could you chime in and guide me on how to implement this functionality by using Ajax? I have zero experience in the language so I really dont know where to start. Any input at all on this topic would be much appreciated. Thanks in advance guys, Dave Ireland.

hello every one.... Can any one plz help me how to detect mobile device brand like samsung, nokia or micromax uisng php or javascript.... Any help will be greatly appreciated.... Thank you.. :)

hello eveyone.. How can i pass values from one page to another using javascript.. I can do it using php but I need in javascript or jquery... suppose take this as an example... <script src="myscript.js?uid=123"></script> if the above step is possible then plz help me out.... IF NOT THEN the second way i want is <script src="myscript.php?uid=123"></script> If the above code doesn't have script tag then i can access the value but tthe <script> tag is making me impossible to do it...... I have used this step to access the value from the above code but it shows nothing... <?php $val = $_GET['uid']; echo $val; ?> Any help will be greatly appreciated... Thank you in advance...

I need a js gallery that automatically loads a main photo and I'm hoping someone can point me in the right direction to find one. Currently I'm using http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm But my issue is that this code doesn't load a photo until an image is clicked or you hover over it and I want one that loads a chosen photo automatically. (I have a db table with the photos info in it) Thanks for any help or pointers SJ

Hi, I need help getting this thing to work, I'm not sure on how to $_GET[] data after a fragment in the URL. I've seen it used on websites before, for example: example.com/#home?q=test A working example is: http://craftland.org/#map&p=aether This is the code I'm using for the pages: http://pastebin.com/vAHppEyr Any help would be great! Thanks, Kez.

Hi There! I would like to contribute to some free software web project. I have good skills in PHP and frontend Html, CSS3 and JavaScript (jQuery). Could you guide me please? Where can I start from? Thank you very much!

Hey Guys ! i'm not sure if i posted my topic in the right side anyway .. i have a countdown.js file everything is OK , but the big problem is the countdown not working at all ,( Days , Hours ,Min , Sec) all of this keeps in zero but the count UP work normal this is the source code : http://jsfiddle.net/NdfPR/2/ in line 29 and 30 until: new Date(2014, 4 - 1, 4, 0, 0, 0), since: null, nothing happen with this code but if i changed to this until: null, since: new Date(2014, 4 - 1, 4, 0, 0, 0), the count up will work and i don't count up ,, this js file is linked to my template so if there's anything to solve this problem ,, i'm here if i forget anything to

I'm wondering the best way to handle validation messages for blind people, or sight-impaired. In my application, the situation on a save with errors is: User clicks save AJAX call goes to save the record; wait bar appears on the page's status bar Error is returned. The wait bar changes to show "Error on save" Below the status bar, each field name is listed with the appropriate error message. ("Name - Cannot be blank" or whatever) Within the fields themselves, the same message is shown again. (Next to the "Name" label on the page, "cannot be blank" would show up.) This functionality is great for sighted people. But for non-sighted, I'm not sure exactly how to handle it. Should an error become "selected" or something? I mean, it's just a div. I don't really have the answer. I posted this in general HTML but it could frankly be AJAX or JS or something. I think HTML is probably the most correct.

I am using javascript:void(window.open('http://server1/test/test_update.php?matter="&Fields!matter.Value + "', '_blank', 'fullscreen=yes, scrollbars=auto'));" to launch a report from a SSRS 2008 report that is being viewed within an iFrame. This is done in the Jump to URL. <iframe name='myIframe' id='myIframe' src='http://sqlreports/ReportServer?Report&rs:Command=Render&rc:LinkTarget=_blank&rc:Stylesheet=my_htmlviewer' scrolling='auto' frameborder='0' width='100%' onload='resize_iframe()' ></iframe> the resize_iframe() function just makes the iFrame full screen to whatever the window is made. Before adding the @rc:LinkTarget=_blank to the iFrame, the links did not work. Now, when I click on the link to launch the PHP page I get two windows that open. One opens and renders the page properly: http://server1/test/test_update.php?matter=123456 while the other window opens with the "Internet Explorer cannot display the webpage" error with the following URL: javascript:void(window.open('http://server1/test/test_update.php?matter=123456,%20_blank,%20fullscreen=yes,%20scrollbars=auto')); I'm not quite sure what is causing these two windows to open up. When I remove the @rc:LinkTarget=_blank from the iFrame, the links go back to not working. I've also tried to remove the _blank for the Jump to URL. Any ideas/assistance would be greatly appreciated. Thanks, Jamey8420

So I have a webpage where I pull several rows from the database and create a list on the webpage. Any one of these rows can get updated independently at any time. For the past several years I've used something like this: function execRefresh() { $("#refreshIcon").fadeIn("fast"); $("#'. $p .'").load("/data.php?inid='. $p .'&rand=" + Math.random(), "", function () { $("#refreshIcon").fadeOut("slow"); } ); setTimeout(execRefresh, 20000) } $(document).ready(function () { execRefresh(); }); This will reload the entire content from the database to repopulate the list on the webpage. I'm wondering if there is a better way to do this. The downfalls I'd like to overcome if possible would be (and I realize these two overlap a bit): 1. I am loading the entire table for everyone on the webpage even if there are no changes (unnecessary loads/database pings). - Is there a way to only pull new data if there is a change? - Is there a way to only pull the rows that got changed? - Is there a way to make it so that I don't have to make a call to the database for every single user? 2. I have to create an interval to determine how often I reload the data. Currently I have 20 seconds, this means if an update occurs right after the user loaded data, it could be up to 20 seconds before they see that change (not loading when necessary). - Is there a way to tell the client there has been a change and it needs to update so that it doesn't have extended periods of time where the data isn't updated without just making the interval shorter (and thus having more unnecessary loads)? I know that, for example, Google chat is nearly instantaneous in telling you "Someone is typing" and then showing what they sent as a chat. I imagine that they don't have millions of users constantly pinging a database that contains the chats and whether or not a user is currently typing every second. What would the best way to do this be? I assume it's relatively common and there are possibly some best practices for things such as this. Thanks

This is a general question, thus no script. I'm looking for hints as to what could cause the following: Is there any reason that javascript or jQuery include scripts could prevent radio button values from being sent to the server while all other values from selects and texts are correctly sent? When not using the javascript or jQuery includes the radio values are sent.

Hi there, I am having a small problem getting php to work with google maps APIs. Basically, I have an API url where I pull down lat/long coordinates from for 10 houses and then I want these to map out on the google maps. So, I am not sure how to link the 2 together.. Here is what I have so far: <?php // Loading Domus API $url_search = 'http://url/site/go/api/search'; $xml_search = @simplexml_load_file($url_search) or die ("no file loaded") ; //Displaying latitude and longutude $xml_search = json_decode($xml_search); foreach($xml_search->property as $house) { echo $lat = $house->address->latitude , $long = $house->address->longitude; }; ?> and JavaScript bit: var locations = [ ]; var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(-33.92, 151.25), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var marker, i; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } Many thanks

i know i can just redirect it with jquery ,js - client side, or using php - server side, but what is the fastest way to do that when the page is loading? let say i have users from the us, uk, canada - English language, French, German, Chinese... now where is the best place to detect the ip of the country and then give the user the interface in his language? second question, if the user want to change the language with a language buttons like: English, French, German, Chinese... what is the fastest way to do that again without redirect the page to another page? client side, server side or both. i can track the ip, i can redirect the page in more than one way, but i'm looking for the fastest way and that why I'm asking this.

I have been struggling with this progress bar for a while now I need to know whether it is possible to have a real time progress bar for MySQL insertions since database operations are relatively very fast. I have already browsed a few demonstrations but they all relate to data being sent to a form instead and they all seem to work perfectly. I actually have 4 files and this is implemented based on the tutorial with this link http://www.sitepoint.com/tracking-upload-progress-with-php-and-javascript/ **Form.php** <html> <head> <title>File Upload Progress Bar of MySQL Data</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="bar_blank"> <div id="bar_color"></div> </div> <div id="status"></div> <?php $time_start = microtime(true); $mysqlserver = "localhost"; $user = "root"; $pass = ""; $db = "Profusion"; $link = mysql_connect( "$mysqlserver", $user, $pass ); if ( ! $link ) die( "Couldn't connect to MySQL" ); //print "Successfully connected to server<P>"; mysql_select_db( $db ) or die ( "Couldn't open $db: ".mysql_error() ); //print "Successfully selected database \"$db\"<P>"; $result3=mysql_query("INSERT INTO dest_table.create_info SELECT * from Profusion.source_cdr") or die(mysql_error()); $progress=mysql_affected_rows(); $time_end = microtime(true); $time = $time_end - $time_start; echo "Total time taken :"." ".round($time,6) . " s"; ?> 2nd file style.css #bar_blank { border: solid 1px #000; height: 20px; width: 300px; } #bar_color { background-color: #006666; height: 20px; width: 0px; } #bar_blank, #hidden_iframe { display: none; } 3rd file **script.js** function toggleBarVisibility() { var e = document.getElementById("bar_blank"); e.style.display = (e.style.display == "block") ? "none" : "block"; } function createRequestObject() { var http; if (navigator.appName == "Microsoft Internet Explorer") { http = new ActiveXObject("Microsoft.XMLHTTP"); } else { http = new XMLHttpRequest(); } return http; } function sendRequest() { var http = createRequestObject(); http.open("GET", "progress.php"); http.onreadystatechange = function () { handleResponse(http); }; http.send(null); } function handleResponse(http) { var response; if (http.readyState == 4) { response = http.responseText; document.getElementById("bar_color").style.width = response + "%"; document.getElementById("status").innerHTML = response + "%"; if (response < 100) { setTimeout("sendRequest()", 1000); } else { toggleBarVisibility(); document.getElementById("status").innerHTML = "Done."; } } } function startUpload() { toggleBarVisibility(); setTimeout("sendRequest()", 1000); } /* (function () { document.getElementById("myForm").onsubmit = startUpload; })();// i commented this out since this collects information from the form and the last file **progress.php** <?php session_start(); $key = ini_get("session.upload_progress.prefix") . $result3; if (!empty($_SESSION[$key])) { $current = $_SESSION[$key]["bytes_processed"]; $total = $_SESSION[$key]["content_length"]; echo $current < $total ? ceil($current / $total * 100) : 100; } else { echo 100; } I need to show a progress bar as data is inserted into mysql and the total time taken for the query to execute. there are currently 28 rows to be inserted so it's not that big. Everything else seems to work except that the progress bar won't get displayed.

Hi everybody! Look please at my Snake application on khanacademy and help me please to make fruit not to spawn on the gray wall. I don't understand what condition should i put in my checkFruits function, only you can help me. https://www.khanacademy.org/cs/snake-mania/2429405117

HI can anyone help i have a error with my code it allows me to run the while loop to echo my variables from a SQL table but wont run the javacript replying there is a error here are my 2 forms of coding. radio_search.php <?php include "sql.php"; if ($_GET[search] == '') { $where = ""; } else { $where = " WHERE manufacfurer LIKE '%".$_GET[search]."%' OR model LIKE '%".$_GET[search]."%' OR further_details LIKE '%".$_GET[search]."%' id LIKE '%".$_GET[search]."%' angle LIKE '%".$_GET[search]."%' type LIKE '%".$_GET[search]."%' OR country LIKE '%".$_GET[search]."%'" ; } $dblink = mysqli_connect($mysql_host, $mysql_user, $mysql_pw, $mysql_db); $sql_query = "SELECT * FROM sharpeners".$where." ORDER BY id,manufacturer, model"; $query_result = mysqli_query($dblink, $sql_query) OR die ("Cannot read from Product List ".mysql_error($dblink)); $num_of_rows = mysqli_num_rows ($query_result) or die ("No entries yet."); echo "<div align=center><b>There are $num_of_rows Sharpeners in the DB</b></div>\n"; ?> <div align ="center"> <p><p><p><p><p><p></p></p></p></p></p></p> <table border="5" cellspacing="8"> <thead> <tr> <th><U>Sharpener ID:</U></th> <th><U>Angle:</U></th> <th><U>Manufacturer:</U></th> <th><U>Model:</U></th> <th><U>Type:</U></th> <th><U>Country:</U></th> <th><U>Further Details:</U></th> </tr> </thead> </div> <?php while ($row = mysqli_fetch_array ($query_result)) { echo "<tr><td>".$row["id"]."</td><td>" .$row["angle"]."</td><td>".$row["manufacturer"]."</td><td>" .$row ["model"]. "</td><td>" .$row ["type"]. "</td><td>".$row ["country"]. "</td><td>".$row["further_details"]."</td></tr>\n";} ?> </table> search_radios.php <?php include "sql.php"; ?> <script language="javascript" type="text/javascript"> <!-- //Browser Support Code function ajaxFunction(){ var ajaxRequest; try{ // Opera >=8.0, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // still doesn't work alert("Your Browser is not supported."); return false; } } } ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ var ajaxDisplay = document.getElementById('ajaxDiv'); ajaxDisplay.innerHTML = ajaxRequest.responseText; } } var radio = document.getElementById('radioSearch').value; ajaxRequest.open("GET", "radio_search.php?search=" + radio, true); ajaxRequest.send(null); } //--> </script> <?php // End Ajax ?> <p> <form> <input type="text" id="radioSearch" name="search" onkeyup="ajaxFunction();" autocomplete="off" /> <input type="submit" value="Submit" /> </form> </p> <div id='ajaxDiv'> <?php include "radio_search.php"; ?> </div> </body> </html> Thankyou

Javascript timer not displaying correctly. It has always displayed properly , but today out of nowhere its just not working the hours and the minutes are not working but , the seconds are counting down. I am new to web development this is the CDN and the external ref to the countdown timer <script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="countdown.jquery.js"></script> <!-- this is countdown timer script" <!--> <script src="script.js"></script> <!-- this is where countdown timer is refences and where i change the date" <!--> below is the <script src="countdown.jquery.js"> (function($){ $.fn.countdown = function(options){ var settings={'date':null}; if(options){ $.extend(settings,options); } this_sel= $(this); function count_exec(){ eventDate=Date.parse( settings['date']) / 1000; currentDate= Math.floor($.now()/1000); seconds=eventDate -currentDate; days = Math.floor(seconds / (60 * 60 * 24)); seconds -= days * 60 * 60 * 24; hours = Math.floor(seconds / (60 * 60)); seconds -= hours * 60 * 60; minutes = Math.floor(seconds/60); seconds -= minutes * 60; this_sel.find('.days').text(days); this_sel.find('.hours').text(hours); this_sel.find('.mins').text(hours); this_sel.find('.secs').text(seconds); } count_exec(); interval=setInterval(count_exec,1000); } }) (jQuery); this is the jquery file <script src="script.js"></script> $(document).ready(function(){ $('#countdown').countdown({date: '26 January 2014 10:00:00'}); });