JavaScript - Access An Element's Dom0 Index Via Inline Js
Trying to return the DOM 0 element index from within the html
Example: Code: <input type="text" onfocus="alert(this.element)" /> I do not want to use IDs any way to do this? Similar TutorialsI was under the impression that you can always access any element on a webpage very easily by assigning a value to the "id" attribute. It seems this is true in the Chrome browser but not in the Opera Browser. My God I can't believe how much disarray the state of programming is in when it comes to certain things working in certain browsers...What's the HTML5 standard on this situation...in other words what does the ECMAScript standard say is the proper implementation? Code: <!DOCTYPE html> <html> <head> <title>Project 9-4</title> <script type="text/javascript"> /* <![CDATA[ */ function submitReservation() { var expirationDate = new Date(); expirationDate.setDate( expirationDate.getDate() + 1); document.cookie = "userFirstName=" + inputFirstName.value + "; expires=" + expirationDate.toUTCString(); document.cookie = "userLastName=" + inputLastName.value + "; expires=" + expirationDate.toUTCString(); document.cookie = "userStreet=" + inputStreet.value + "; expires=" + expirationDate.toUTCString(); document.cookie = "userCity=" + inputCity.value + "; expires=" + expirationDate.toUTCString(); document.cookie = "userState=" + inputState.value + "; expires=" + expirationDate.toUTCString(); document.cookie = "pickupDate=" + inputPickupDate.value + "; expires=" + expirationDate.toUTCString(); document.cookie = "returnDate=" + inputReturnDate.value + "; expires=" + expirationDate.toUTCString(); } function displayReservation() { if(!document.cookie) { window.alert("You don't have a reservation!"); return; } var allInputs = document.getElementsByTagName("input"); var crumbs = document.cookie.split("; "); var reservationInfo = "Reservation details: "; for(var i=0; i<crumbs.length; i++) if(allInputs[i].type=='text') { allInputs[i].value = crumbs[i].substring(crumbs[i].indexOf("=")+1, crumbs[i].length); reservationInfo += allInputs[i].value + ", "; } window.alert(reservationInfo); } /* ]]> */ </script> </head> <body> <h1>Hertz Rent-A-Car</h1> <form action="" method="get"> First name: <input type="text" id="inputFirstName" size="16" maxlength="32" /> Last name: <input type="text" id="inputLastName" size="16" maxlength="32" /> <fieldset> <legend>Address<legend> Street : <input type="text" id="inputStreet" size="16" maxlength="32" /> City: <input type="text" id="inputCity" size="16" maxlength="32" /> State: <input type="text" id="inputState" size="16" maxstring="32" /> </fieldset> Pickup date: <input type="date" id="inputPickupDate" name="inputPickupDate" /> Return date: <input type="date" id="inputReturnDate" /> <input type="button" id="buttonSubmit" value="Submit Reservation" onclick="submitReservation();" /> <input type="button" id="buttonDisplay" value="Show Reservation" onclick="displayReservation();" /> </form> </body> </html> Should you be able to access any webpage element by simply specifying the value of it's 'id' attribute? Chrome says 'yes'. Opera says 'no can do'. I get a 'Uncaught Exception;ReferenceError:Undefined variable' error message in the Opera debugger window. The exact same .html document throws no exceptions in the Chrome(version 18) browser. The bit of code in bold in the code below is giving me this error in IE: Error: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB) Timestamp: Tue, 16 Mar 2010 15:07:11 UTC Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code: 0 URI: http://www.mateinastate.co.uk/users/mateinastate Code: Code: if(document.getElementById('msn1').innerHTML=="") { document.getElementById('msn1').style.display='none'; } if(document.getElementById('yahoo1').innerHTML=="") { document.getElementById('yahoo1').style.display='none'; } if(document.getElementById('skype1').innerHTML=="") { document.getElementById('skype1').style.display='none'; } if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">') { document.getElementById('facebook1').style.display='none'; } else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">') { document.getElementById('facebook1').style.display='none'; } else { document.getElementById('fbook-add').innerHTML='Facebook Profile'; } What it's saying isn't actually true (I don't think)... this is how the section is laid out: Code: <div id="submenu1" class="anylinkcss"> <ul> <li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li> <li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li> <li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li> <li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li> <li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li> <li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li> </ul> </div> <script type="text/javascript" src="/html_1/js/contact-information.js"></script> Does anyone know why this might error in just IE? Hi, I'm relativly new to JS and brand new to the forum so you might need to dumb down your replys for my slightly lacking knowledge. That being said I do have a very solid grasp of html, css and am getting there with JS and its various frameworks. I'm integrating wordpress into an existing site for a friend and currently have the main blog page appear in a DIV. This is the best way to integrate in this case due to many reasons mostly of way the site is constructed. Code: <div class="scroll-pane" id="scrollbox"> WORDPRESS BLOG </div> My issue is that links within that DIV, in the blog, when clicked redirect the page. The simple answer to this would be to have them just open in a new page, which I can easily do with the below code. Code: function Init() { // Grab the appropriate div theDiv = document.getElementById('scrollbox'); // Grab all of the links inside the div links = theDiv.getElementsByTagName('a'); // Loop through those links and attach the target attribute for (var i=0, len=links.length; i < len; i++) { // the _blank will make the link open in new window links[i].setAttribute('target', '_blank'); } } window.onload = Init; But what I'd rather it do is have any link clicked inside the DIV to reload in that same DIV, similar to an iframe, but obviously without using an iframe, due to it's compatibility issues. Is this possible by editing the above code? If not what do I need? Thanks in advance for any help! I have following HTML code: Quote: <br/> <div style="display:none">.....</div> <div style="display:none">.....</div> How can I modify display to block in style attribute with Javascript? i have some really annoying issues with a widget which is known inline modal you can see that widget after you click the play button in the given link below, please help me out, the issue is that use google chrome and then go to this place, the link is: http://www.bloghuts.com/2010/09/star-island.html and in this page click on play, then you yourself will see the error, please tell me what to do with this error. And another problem is that again open the above link in internet explorer and click the play button you will see a different kind of annoying problem, except these two explorers it works fine, PLEASE HELP ME I WOULD REALLY BE THANKFUL TO YOU. Hi i have some inline code that i would prefer to transfer into javascript functions and place in a .js file in the head or foot of my webpage. I have tried to convert into funtions myself but could not get to work. Would appreciate any help to give me the correct working code. thanks. Here is the portion of code from inside a working form: <button id="decbtn" onclick="updbtn.style.background='url(images/wuc.gif)';qty.style.background='';decrement(this.parentNode.getElementsByTagName('input')[0]);return false;">-1</button> <input id="qtyinp" name="qty" onkeyup="updbtn.style.background='url(images/wuc.gif)';qty.style.background='url(images/packindic.png) no-repeat bottom right #ffffff';this.value=this.value.replace(/[^\d]/,'');return false;" maxlength="3" value="0" type="text"> <button id="incbtn" onclick="updbtn.style.background='url(images/wuc.gif)';qty.style.background='';increment(this.parentNode.getElementsByTagName('input')[0]);return false;">+1</button> <input name="pid" value="A0517A" type="hidden"> <button id="updbtn" type="submit" onclick="this.style.background='';qty.style.background='url(images/upd.png) no-repeat right top #ffffff';">Update</button> I wrote the code below to practice getting divs to appear and disappear. It has 2 divs. The first div contains two links. One link is to hide the second div, the other link is to make it reappear. I have styles in the head, and 1 inline for each div. Javascript is supposed to change the inline style display value from block to none on the click. The problem is, when I change the value in blue from block to none manually on the server, the change happens successfully and stays in place until I change it back manually. But when I click on the Hide Schedule link, that means I'm telling javascript to change the inline value block to none (highlighted in red in the javascript function), to make the second div disappear. onClick, it disappears for a fraction of a second, then reappears just as it was before the I clicked the link. I haven't clicked the other link, because the div that is supposed to vanish does so for only a split second. It looks like javascript isn't working right. I use firefox. Does anyone know what is going on? Thanks Code: <!DOCTYPE html> <xhtml> <head> <title>Practice Calendar</title> <style type="text/css"> .practicecalendar { float: left margin: 0; width: 18em; background: #eee; text-align: center; } .practiceschedule { float: right; margin: 0; width: 18em; background: #99E6FF; text-align: center; } </style> <script type="text/javascript"> <!-- function showSchedule(){ document.getElementById("practiceschedule").style.display = 'block'; } function hideSchedule(){ document.getElementById("practiceschedule").style.display = ' none '; } //--> </script> </head> <body> <div id='practicecalendar' class='practicecalendar' style=' display: block; '> <p><a href='' onClick='showSchedule()'>Show Schedule</a></p> <p><a href='' onClick='hideSchedule()'>Hide Schedule</a></p> </div> <div id='practiceschedule' class='practiceschedule' style=' display: block ; '> <p><a href='' onClick='showCalendar()'>Schedule</a></p> </div> </body> </xhtml> Hello, I'm sure someone on this site is familiar with Lightforms AJAX contact forms. I've downloaded one and am attempting to integrate with my current Contact page. Lightform comes with 3 external .js sheets one of which is formcheck.js. While Lightform has sufficiently functioning and nicely styled JS which checks for valid inputs in the text fields, I would also like to add watermark text in a few of the text fields. I pretty much had what I wanted on my own form until I tired to mix it as inline code with with Lightform Contact form. Here is the mixtu Code: <input id="name" name="name" type="text" class="validate['required','length[3,-1]','nodigit']" size="20" value="Mr., Ms., Pastor..."onBlur="if(document.getElementById('name').value=='') {document.getElementById('name').value='Mr., Ms., Pastor...'};" onfocus="document.getElementById('name').value=''"; /> Perhaps someone can tell me why my watermark effect won't happen anymore. thanks for your time. Alright, I'm using a Rooh.It WordPress plugin right now, but I don't like the way they do it, so I want to write my own code to do something similar. I want the user to be able to select the text they want to highlight, and the background color of that text changes to whatever color they have selected. How can I do this in JavaScript? Hi, The following code works: Code: <html> <head> <style type="text/css"> img { opacity:0.4; filter:alpha(opacity=40); } </style> </head> <body> <img src="http://www.w3schools.com/Css/klematis.jpg" width="150" height="113" alt="klematis" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> <img src="http://www.w3schools.com/Css/klematis2.jpg" width="150" height="113" alt="klematis" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> </body> </html> But the problem is you have to repeat the inline JavaScript for all <img> tags. I tried to put the script in the head to no avail: Code: <html> <head> <style type="text/css"> img { opacity:0.4; filter:alpha(opacity=40); } </style> <script type="text/javascript"> function getElements() { var x=document.getElementsByTagName("img"); x.style.opacity=1; x.filters.alpha.opacity=100; } </script> </head> <body> <img src="http://www.w3schools.com/Css/klematis.jpg" width="150" height="113" alt="klematis" onmouseover="getElements()" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> <img src="http://www.w3schools.com/Css/klematis2.jpg" width="150" height="113" alt="klematis" onmouseover="getElements()" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> </body> </html> Everything seems right to me, but it doesn't work. Many thanks for any help! Mike Hi all, i have created one simple login form with 5 fields namely username,email id,password,retype password and phone no.and i have created one alert message for each function so that it displays alert message when there is an error. now i want to replace alert message with INLINE VALIDATION(displays beside text only).... kindly tell me how to do.... below is the code i have written using alert message....... Code: <html> <head> <meta charset="utf-8"> <title>Validation using JavaScript</title> <script type="text/javascript"> function checkName(form) { var sRealname = form.realname.value; var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i; var isCorrectFormat = oRE.test(sRealname); if (!isCorrectFormat) { alert("Incorrect format."); textbox.select(); textbox.focus(); return false; } else { alert("Correct format"); return true; } if (sRealName == '') { alert('Error: Username cannot be blank!'); form.realname.focus(); return false; } else if (sRealName.length < 4) { alert("UserName should be atleast 4 characters long"); return false; } return true; } function checkEmail(form) /* for email validation */ { if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value)) { return true; } alert('Invalid E-mail Address! Please re-enter.'); return false; } function validatePwd(form) /* password & retype-password verification */ { var invalid = ' '; minLength = 6; var pw1 = form.password.value; var pw2 = form.password2.value; if (pw1 == '' || pw2 == '') { alert('Please enter your password twice.'); return false; } if (form.password.value.length < minLength) { alert('Your password must be at least ' + minLength + ' characters long. Try again.'); return false; } if (document.form.password.value.indexOf(invalid) > -1) { alert('Sorry, spaces are not allowed.'); return false; } else { if (pw1 != pw2) { alert('You did not enter the same new password twice. Please re-enter your password.'); return false; } else { alert('Passwords Match.'); return false; } return false; } } function validPhone(form) /* phone no validation */ { var valid = '0123456789'; phone = form.phoneno.value; if (phone == '') { alert('This field is required. Please enter phone number'); return false; } if (!phone.length > 1 || phone.length < 10) { alert('Invalid phone number length! Please try again.'); return false; } for (var i = 0; i < phone.length; i++) { temp = '' + phone.substring(i, i + 1); if (valid.indexOf(temp) == -1) { alert('Invalid characters in your phone. Please try again.'); return false; } } return true; } function validate() { var form = document.forms['form']; if (!checkName(form) || !checkEmail(form) || !validatePwd(form) || !validPhone(form)) { return false; } return true; } </script> </head> <body> <form action="" method="post" name="form" onsubmit="return validate()"> User Name : <input type="text" name="realname" size="19"> <br> E-Mail : <input type="text" name="email" size="25"> <br> Password : <input type="password" name="password" maxlength="12" size="25"> <br> Retype password: <input type="password" name="password2" maxlength="12" size="25"> <br> PhoneNo : <input type="phoneno" name="phoneno" maxlength="10" size="25"> <br> <input type="submit" value="Submit"> </form> </body> </html> Hi, I'm looking to add the functionality of 'inline editing' with AJAX. I have found a good piece of code from a website (http://www.yvoschaap.com/weblog/ajax...pdate_text_20/) which does it well but I want to improve it slightly. I have a span tag with text in it which turns into an input box when a user clicks on the text. The user edits the input box and then click away from the input box in order to save the change and the input box turns back into regular text. How do i make it so when the person clicks on the text the input box appears but also an 'Update' and 'Cancel' link appears to the side of it so that the user can only update or cancel that field by clicking on the links. The code that does this is as follows: HTML CODE: Code: <span id="userName" class="editText">John Doe</span> JAVASCRIPT - controls when text is clicked for input to appear: Code: //edit field created function editBox(actual) { //alert(actual.nodeName+' '+changing); if(!changing){ width = widthEl(actual.id) + 20; height =heightEl(actual.id) + 2; if(height < 40){ if(width < 100) width = 150; actual.innerHTML = "<input id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" maxlength=\"254\" type=\"text\" value=\"" + actual.innerHTML + "\" onkeypress=\"return fieldEnter(this,event,'" + actual.id + "')\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\" />"; }else{ if(width < 70) width = 90; if(height < 50) height = 50; actual.innerHTML = "<textarea name=\"textarea\" id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\">" + actual.innerHTML + "</textarea>"; } changing = true; } actual.firstChild.focus(); } JAVASCRIPT - Initiated the update of the field. Code: function fieldBlur(campo,idfld) { if (campo.value!="") { elem = document.getElementById( idfld ); remotos = new datosServidor; nt = remotos.enviar(urlBase + "?fieldname=" +escape(elem.id)+ "&content="+escape(campo.value)+"&"+formVars,""); elem.innerHTML = nt; changing = false; return false; } } I tried playing around to do it myself by adding an <a> link with an onclick event handler in the editBox() function ie. Code: onlick="noLight(this); return fieldBlur(this,'" + actual.id + "');" But i realise that the two values passed to the function need to be changed as i cannot use (this) if it's not within the input box? If anyone could help me with this query it would be greatly appreciated. I hope Ive given enough info and have expressed my problem clearly. If you have any questions let me know and I'll answer them ASAP. If you would like to see the whole source please go to the original website where i got it from - http://www.yvoschaap.com/weblog/ajax...pdate_text_20/ Thanks in advance I am trying to re-write a script that I found on w3schools. The script should check whether ALT key was pressed or not. My objective is not to use any inline scripts and to refer to the event within a function. My script is not working. Could someone please have a look at it and help me? Thank you very much <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Event Object</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript"> function general() { document.getElementsByTagName("body")[0].onmousedown=function() { if(document.getElementsByTagName("body")[0].onmousedown.altKey==1) { alert("You pressed Alt key"); } else { alert("ALT key was not pressed"); } } } window.onload=general; </script> </head> <body> <p> Click somewhere in the document, we will tell you whether or not you pressed ALT key </p> </body> </html> </code> Uhm, hi. So, sorry if this is the wrong place, but I hope someone can help. I'm 13 years old, and I'm slowly learning how to code. I made this website for my teacher from scratch using basic HTML tables, with a few PHP include lines I copied from somewhere. Not bad, right? Well, here's the tricky part. When she was using her previous website, she kept messing up her various widgets when she added site content (because Wikispaces sucks ) So, my hope was to create an inline editor (AJAX??) for her to only be able to edit a certain part of the page. A) ONLY SHE SHOULD BE ABLE TO EDIT IT, so I need some kind of a login system. I have access to phpMyAdmin to run MySQL queries and such. B) I was hoping for a top corner login button like Twitter, or the example shown here. C) I know I can give her access to my FTP and make a separate file, and use an include script, but she wouldn't know how to use an FTP. D) I'd prefer if the editor DID NOT use HTML. Reason being, I wouldn't want to have to make her use <br> every time she wants a line break. E) It should be like this. If her username is detected as logged in, a button should be displayed above the editable area that says "Edit". Then, when she clicks that, a text box shows up, she edits her text, and clicks "Submit". I'm sure this would be mighty difficult to do, but I'd much appreciate the help. I know I used phrases such as "MySQL queries" and "PHP include script", but please talk to me as if I were 4 years old. I have extremely limited coding knowledge. Also, please don't get annoyed if I ask a lot of stupid questions. Be sure to let me know if you need any more information! THANK YOU SO MUCH! ~Kyle$calise Hello, everyone... I have this problem that is really bugging me. I am trying to implement this script found in Javascriptkit: http://www.javascriptkit.com/script/...ltooltip.shtml It has a very unique feature of grabbing arbitrary HTML tags and attaching tooltips to them. Priceless to my site. But the problem is, the script only works with jQuery up to 1.2.6... after that version, it stops working entirely. Quite an issue, as you can imagine. It also has some issues with browsers other than Firefox that I hope updating the code might fix. I don't have any lead on this... could anybody look into the code and tell me what's wrong? Thank you, Hey all, so im working on a piece of jquery/JS which executes (drops down a new div) when you click a link. I have the links setup as <a href="#" id="d0">Execute 1</a> <a href="#" id="d1">Execute 2</a> <a href="#" id="d2">Execute 3</a> And the jscript detects when d0, d1 or d2 is clicked and executes my script. It all works perfectly, however when you click on a link it will jump to the top of the page as a side effect of the a href="#" I assume? Is there anyway to have my same effect work inline (without jumping the page to the top) ? Thank you very much! URL: https://medicard1.com/services.html Site also employs CodeIgniter from original developer. Code below sets up a table with a form and script in separate cells of the same row. Looks good and click on check box works ok, but script seems to only run when the page is initially loaded. Does not change variable 'c' and display the change. Am in a bind for this one. My developer is away for the holiday and CEO wants it done ASAP. Anyone have an idea? <!-- Setup a table to hold the elements where I want them without conflicting with CodeIgniter - K.I.S.S.--> <table style="border:0px;"> <tr> <td style="width:600px; text-align:left;"> <!-- Un-submitted form with legend and checkbox input to acknowledge terms and display discount code --> <form name="acknowledge" action="" method=""> <legend>I acknowledge that I have read and understand the content of this page <!-- onClick should execute display_code() script --> <input style="border:0px; width:40px;" type="checkbox" name="investor" onClick="display_code()"/> </legend> </form> </td> <td style="width:200px; text-align:right;"> <!-- Script should check checked state of checkbox investor and set c to appropriate value --> <script type="text/javascript"> <!-- set c="" after get this working --> var c="NOT SET"; function display_code() { if (document.acknowledge.investor.checked) { var c="INVESTOR"; } else { <!-- set c="" after get this working --> var c="NO CODE"; } } document.write('Your code is: ' + c); </script> </td> </tr> </table> Hi, well i used soh tanaka inline modal window which is a popup window like lightbox. But it failed to work with IE9 RELEASED CANDIDATE VERSION. Can anyone tell me that why is it having issue with a better version of explorer. I have made a video to show the error, as to make it more easy to explain what i am saying. here is the link to it http://www.youtube.com/watch?v=pHi9ZlGyWc0 i would look forward to the replies. thank you. I moved this to a more appropriate place... http://www.codingforums.com/showthread.php?t=184432 There are some VERY similar questions and answers, but I have been unable to get them to work for me. The simple situation is calculate days since a date with JS, and output it as part of a text line: create variable xxx with subtraction, or datediff() <body> <p>XYZ has been in effect for (xxx) days.</p> </body> Nothing more, & thanks. Reply With Quote 01-17-2015, 03:40 PM #2 sunfighter View Profile View Forum Posts Senior Coder Join Date Jan 2011 Location Missouri Posts 4,830 Thanks 25 Thanked 672 Times in 671 Posts When I have a question about javascript I go to w3schools JavaScript Tutorial or MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript. FYI datediff() is not an official JS function. What I normally do is get the date as a UTC number (millsecs after an old date) do the math and then convert back. Code: <!DOCTYPE html> <html lang="en"> <meta charset="utf-8" /> <head> <title></title> </head> <body> <div id="her" style="clear:both;"></div> <script type="text/javascript"> var d1 = new Date("january 01, 2015"); var d2 = new Date(); var work = d2.getTime() - d1.getTime(); var xxx = Math.round(work/86400000); document.getElementById("her").innerHTML = 'XYZ has been in effect for '+xxx+' days.'; </script> </body> </html> The number 86400000 comes from 1000*60*60*24 to convert millisecs to days |