JavaScript - Javascript Dates, Minus (w/formatting)/difference

Hi,

I have a problem related to Javascript.


1) I have a php form in which there two text boxes.

2) User enter date in these text boxes via using a calender control.

3) Dates displayed in the textbox in this format i.e: 05-11-2009

I need to compare the dates of both text boxes, but my code is not working fine.


I think i need to convert these the values of both text boxes to date format, but i am unable to do this.

Can anyone please help in writing the new code.

Thanks

i've written a js function to find the difference between two dates. the format being used is dd/mm/yyyy hh:mm. The function returns correct value when give one set of values, but go wrong with another set. examples are given below.

set 1 : Time 1 = 24/02/2011 09:30 , time 2 = 24/02/2011 16:00

Output is corret here. It gives 6 Hours & 30 Minutes (after converting the difference)

set 2: Time 1 = 24/02/2011 09:30 , time 2 = 25/02/2011 16:00

Here, it gives 31 days, 6 Hours & 30 Minutes. My code is given below. Also the alert of dates display strange values. Don't know if it is timezone issue. I wonder what is going wrong here
Code:

function compareDateTime(frmtime,totime)
{
	var date1 = new Date(frmtime);
	var date2 = new Date(totime);
	var diff = new Date();
	alert(date1);
	alert(date2);
	diff = (date2.getTime()-date1.getTime());
	if (diff<0)
	{
		alert("From Time cannot be later than To Time!");
		return 0;
	}
	else if (diff==0)
		{
			alert("From Time cannot be equal with To Time!");
			return 0;
		}
 
	else
	{
		return diff;
	}
}

The returned diff value is broken down as following:
Code:

if (diff>0)
	{
		days = Math.floor(diff / (1000 * 60 * 60 * 24));
 		diff -= days * (1000 * 60 * 60 * 24);
 		hours = Math.floor(diff / (1000 * 60 * 60));
 		diff -= hours * (1000 * 60 * 60);
 		mins = Math.floor(diff / (1000 * 60));
 		alert(days+","+hours+","+mins);
		return true;
	}

Please Help...

which is the real difference between:

<script>
alert('hello');
</script>

and

<script>
function hi()
{alert('hello');}
</script>

thanks in advance
makerjoe

I can't figure out how to properly format the code below. I am looking to add breaks after where it says below. Also to change the color if possible.

Any help would be much appreciated.


function isPPC() {
if (navigator.appVersion.indexOf("PPC") != -1) return true;
else return false;
}
if(isPPC()) {
document.write('<b>Send <A CLASS="contact" HREF=\"mailto:\?subject\=ADD A BREAK AFTER THIS ' + document.title + '?body= ADD A BREAK AFTER THIS ' + '\" onMouseOver="window.status=\'Send your friends e-mail about this page\'; return true" TITLE="Send your friends e-mail about this page">this page<\/A> to a friend</b>');
}
else { document.write('<b>Send <A CLASS="contact" HREF=\"mailto:\?body\=ADD A BREAK AFTER THIS ' + document.title + ' ADD A BREAK AFTER THIS ' + '\" onMouseOver="window.status=\'Send your friends e-mail about this page\'; return true" TITLE="Send your friends e-mail about this page">this page<\/A> to a friend</b>');
}

I am creating a calculator app and I'm a bit stuck with number formatting.

Example of how I would like a number to be formatted:
$2,899,799

I currently have the formatting working except for the commas. I'm using the following code to achieve this.
My result is currently showing up like this $2899799

Code:

function format (expr, decplaces) {
    var str = "" + Math.round (eval(expr) * Math.pow(10,decplaces))
    while (str.length <= decplaces) {
        str = "0" + str
    }
    var decpoint = str.length - decplaces
    return str.substring(0,decpoint) + str.substring(decpoint,str.length);
	}	

function dollarize (expr) {
	return "$" + format(expr,0)

//RESULT FIELDS
form.AnnualScrapSales.value = dollarize(((A - B) * (C2/100)) * G2)

is there a way to add to this "function format" code to also achieve the commas?

I'm trying to remove a vertical scroll that appeared after I added padding 100% to footer. It was suggested that I use javacript to cause the footer not to expand so I don't have to add padding 100% to footer which will eliminate scroll bar. How do I accomplish this when you remove 100% padding from footer?I don't want to see the grey backgroun under footer. I just want to see footer and that's it.

Here's my code
Code:

<!DOCTYPE HTML>
   
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>  
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        
        <style type="text/css">
		#wrapper{width:1000px; height: 520px;margin:-25px auto;   background-color: #3d3d3d;}
		 #header {
       width: 100%;
       height: 75px;
       border: 1px solid #000000;
       margin: 0px 0px 0px 0px;
      
                 padding: 0px 0px 10px 0px;
       background-color: #00a3e8;
       float:left;
       color: #FFFFFF;
       }
	   #contact {position:relative;top:500px;} 
	   *{margin:0px; padding:0px}
#col1{width:200px; height:454px; float:left; 
margin:  0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   background-color: #00a3e8; 
     border: 7px solid #000;}
#col2{width:300px; height:454px; float:left;
 background-color: #00a3e8;
   border: 7px solid #000;
   
margin:0px 0px 0px 130px;
padding: 0px 0px 0px 0px;
text-align:center;
   color: #FFFFFF;}
#col3{width:200px; height:454px;background-color:blue;

  margin: 0px 0px 0px 0px;
             padding: 0px 0px 0px 0px;
   background-color: #00a3e8;
   border: 7px solid #000;
   
  float:right;
             color: #000;    }
#footer{width:100%; height:100%; clear:both;
  
   float:left;
    overflow:hidden;
   margin-top:-23px;
    padding: 100% 0px 5px 0px;
   background-color: #00a3e8;
   text-align: center;
   color: #FFFFFF;}

				 
body{overflow-x:hidden; 
    overflow-y:auto;    background-color: #3d3d3d;} 
		</style>
  </head>
    <body>
     <div id="header"><img width="416" height="70" src="MyProfile_clip_image001.gif" alt="UJ" />
    
       </div>
&nbsp;



<div id="wrapper">
  <div id="col1"></div>
  <div id="col2"><div id="contact">Contact Us</div></div>
  <div id="col3"></div>
 
</div>
 <div id="footer"><div id="contact">Contact Us</div></div>
</body>
</html>

Hi,

I've built a sorting table for what will (hopefully) be a leaderboard for Forza 4. I have the table sorted properly and my current script (within the table) adds up all three T columns and brings the total to 72.001 as expected, woot!

Where I'm stuck is converting the 72.001 to 1 minute 12.001 seconds (1:12.001) and I need to have it include the thousandths since the game gives that information. Once I get the JS going for the top row I can copy down

Any advice on converting this is greatly appreciated and I Bolded the JS I'm referring to:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Forza Motorsport 4 FRS Leaderboard</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="sortable.js"></script>
	<style>
		table {
			text-align: left;
			font-size: 12px;
			font-family: verdana;
			background: #c0c0c0;
		}
 
		table thead  {
			cursor: pointer;
		}
 
		table thead tr,
		table tfoot tr {
			background: #c0c0c0;
		}
 
		table tbody tr {
			background: #f0f0f0;
		}
 
		td, th {
			border: 1px solid white;
		}
	</style>
</head>
 
<body>
 
<table cellspacing="3" cellpadding="4" class="" id="myTable">
	<thead>
		<tr>
			<th class="c1">DRIVER</th>
			<th class="c2">1</th>
			<th class="c2">2</th>
			<th class="c2">3</th>
			<th class="c6">TOTAL</th>
			<th class="c5">DIVISION</th>
			<th class="c7">CONTROLLER</th>
		</tr>
	</thead>
 
	<tbody>
		<tr id="SubTable1" class="r1">
			<td class="c1">Driver Name 1</td>
			<td class="c2">12.000</td>
			<td class="c2">24.000</td>
			<td class="c2">36.001</td>
			<script language="javascript" type="text/javascript">
            var tds = document.getElementById('SubTable1').getElementsByTagName('td');
            var totalTime = 0.000;
			for(var i = 0; i < tds.length; i ++) {
                if(tds[i].className == 'c2') {
                    totalTime += isNaN(tds[i].innerHTML) ? 0 : parseFloat(tds[i].innerHTML);
                }
            }
            document.getElementById('SubTable1').innerHTML += totalTime;
			</script>
			<td class="c5">1</td>
			<td class="c7">Wheel</td>
		</tr>
		<tr class="r2">
			<td class="c1">Driver Name 2</th>
			<td class="c2">12.100</th>
			<td class="c3">24.100</th>
			<td class="c4">36.100</th>
			<td class="c6">00.000</th>
			<td class="c5">2</th>
			<td class="c7">Gamepad</th>
		</tr>
		<tr class="r2">
			<td class="c1">Driver Name 3</th>
			<td class="c2">12.200</th>
			<td class="c3">24.200</th>
			<td class="c4">36.200</th>
			<td class="c6">00.000</th>
			<td class="c5">3</th>
			<td class="c7">Wheel</th>
		</tr>
		<tr class="r2">
			<td class="c1">Driver Name 4</th>
			<td class="c2">12.300</th>
			<td class="c3">24.300</th>
			<td class="c4">36.300</th>
			<td class="c6">00.000</th>
			<td class="c5">4</th>			
			<td class="c7">Gamepad</th>
		</tr>
		<tr class="r2">
			<td class="c1">Driver Name 5</th>
			<td class="c2">12.400</th>
			<td class="c3">24.400</th>
			<td class="c4">36.400</th>
			<td class="c6">00.000</th>
			<td class="c5">5</th>
			<td class="c7">Wheel</th>
		</tr>
	</tbody>
</table>

<script type="text/javascript">
var t = new SortableTable(document.getElementById('myTable'), 100);
</script>
 
</body>
</html>

Oh, and any help on centering the result in the cell (72.001) would be excellent too, thank you.


Jerome

This has been driving me nuts, let me start off by saying this is what I'm currently working with...

I've included a js file in the header of the site which utilizes a function in a php file. Just the standard Code:

<script language="javascript" src="http://yourwebsitehere.com/includes/js.js"></script>

In the .js file I'm setting the location to a php file as a variable...

Code:

var url="/file-here.php";
 url=document.location.host+url;

Obviously the document.location.host isn't working for me but here's what's going on...

At first I just had, Code:

var ="http://www.domain.com/file-here.php";

in the js file.

So if the user is on www.domain.com/some-directory/another/ the script will work, however if the user is on domain.com/some-directory/another the script won't work, because I've included www. in the variable within the js file.

However, if I set it to Code:

var ="http://domain.com/file-here.php";

, it will work on domain.com/some-directory/ but not on www.domain.com/some-directory.

So basically I need to return the host url somehow, depending on if the user is on the page with www. or without www. so it will always work.

With php, I could just use Code:

$server['HTTP_HOST']/file-here.php

and it will always return www.domain.com or domain.com depending on the URL the user is on, but obviously php won't work in a js file so I'm looking for the correct string/command to get this.

Anyone have any idea how to return just the www.domain.com or domain.com portion of the current URL with javascript?

So no matter where they are on the site, with or without www. the script can still function by having the correct URL to the PHP file at all times?

Hi

I'm using an image hover script so when you mouseover a thumbnail it displays a larger version of the image in a javascript/jquery nice image popup (not a popup window but like a floating image). It comes from the script here http://cssglobe.com/lab/tooltip/02/

The trouble is, I need the large image to display above and to the left of the thumbnail - not to the right and below. Looking in the js file I see these values:

Code:

this.imagePreview = function(){	
	/* CONFIG */
		
		xOffset = 10;
		yOffset = 30;
		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result

I've tried making these -500 and -500 but it just makes them like the negative value was not added (the large image goes down 500px).

So as I don't understand javascript code I'm thinking that is not the way to give a negative number?

Would appreciate any help please

google is not my friend on this one

if I wanted to set a variable with radio buttons to decide whether a function adds or subtracts, I know I can't do this:

Code:

<body>

<input type="radio" name ="op" onclick="op='-'">count up: <input type="radio" name ="op" onclick="op='+'">

<script type="text/javascript">

var op;

function calc() {
start=start op 1000;
	}
</script>
</body>

but is there something I can do, without getting all if/elsey?

Hi there,

To summarize my problem:
For example:
Sales : $ 5 (id=sales)
Discount: 11% (id=disc)
Total Discount: $ 0.55 (id=disc)
Rounded Discount: $ 0.6 (1 decimal) (id=rounded)
Net Sales: $ 4.40 (id=net_sales)

document.getElementById("net_sales").value = sales - rounded.toFixed(1);

Net Sales: $
<input id = "net_sales" type="Text" name="net_sales" size="4" value="<?php if (!empty($net_sales)) echo $net_sales; ?>">


I tried the above, it is working in the browser. However, it cannot be written into MYSQL (with PHP). What is wrong with my Javascript?

Thanks.

Hi, I need to re-size a div to be 100% of the browser but taking into account the height of an existing header div.

Currently it works but it doesn't factor the height of the above header div, and therefore scrolls off the page (the height of the header div)

I need to manipulate ( subtract the height value of the header) in the javascript somehow.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<script type="text/javascript">
function SetHeightOfDiv(){
var theDiv = document.getElementById('content');
theDiv.style.height = BrowserHeight()+"px";
}

function BrowserHeight() {
var theHeight;
if (window.innerHeight) {
theHeight = window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight) {
theHeight = document.documentElement.clientHeight;
}
else if (document.body) {
theHeight = document.body.clientHeight;
}
return theHeight;
}
</script>
</head>

<body style="height:100%; background-color:blue; margin:0; padding:0; color:#ffffff; font-size:15px; text-align:center; font-family:monospace,arial"
onload="SetHeightOfDiv()">

<div id="wrapper" style="height:100%; width:900px; background-color:yellow; margin-left:auto; margin-right:auto; overflow:hidden">

<div id="header" style="margin-top:0px; height:130px; width:890px; margin-left:5px; background-color:red; position:fixed">
<p>The FIXED HEADER</p>
</div>

<div id="content" style="margin-top:132px; background-color:grey; width:890px; margin-left:5px">
<p>THE BODY - that extends below the browser window (possibly the height of the header)</p></br>
<p>So how do we manipulate the Javascript to 'Subtract' the height of the HEADER?</p></br>

<p style="text-align:left; padding-left:10px">
function SetHeightOfDiv(){ <br>
var theDiv = document.getElementById('content');<br>
theDiv.style.height = BrowserHeight()+"px";<br>
}<br>
</br>
function BrowserHeight() {<br>
var theHeight;<br>
if (window.innerHeight) {<br>
theHeight = window.innerHeight;<br>
}<br>
else if (document.documentElement && document.documentElement.clientHeight) {<br>
theHeight = document.documentElement.clientHeight;<br>
}<br>
else if (document.body) {<br>
theHeight = document.body.clientHeight;<br>
}<br>
return theHeight;<br>
}</p>
</div>

</div> <!--end of wrapper-->
</body>
</html>

Thanks

I'm trying to write something to display the percentage difference of my parents' ages. I'm obviously having issue. Also I would like to shorted the percentage output to three digits, e.g. 9.25%. Any help would be greatly appreciated. Here is what I have.

Code:

//Set the two dates
var dadDate=new Date(1964, 9, 27); //Month is 0-11 in JavaScript
var momDate=new Date(1962, 4, 29); 
var today=new Date();
//Get 1 day in milliseconds
var one_day=1000*60*60*24;

//Calculate difference btw the two dates, and convert to days
var dadDay=Math.ceil(today.getTime()-dadDate.getTime())/(one_day);
var momDay=Math.ceil(today.getTime()-momDate.getTime())/(one_day);

//Calculate difference
var abDif=Math.abs(dadDay-momDay);
var agePer=Math.ceil(((abDif)/(dadDay + momDay)/2)*100);
document.write"Dad, congratulations. You are " agePer "% younger than Mom.";