...

View Full Version : Javascript Chnaging Classes and resettig them



barkermn01
06-12-2008, 03:23 PM
<script type="text/javascript">
var oldid;
var oldd1;
function set_active(id){
if(oldid !== '')
{
oldid = id;
oldd = document.getElementById(id).className;
document.getElementById(id).className = 'style3';

}else{
document.getElementById(oldid).className = oldd;
oldid = id;
oldd = document.getElementById(id).className;
document.getElementById(id).className = 'style3';
}
}
</script>


i have a script and the onclick works they click on link in the div with that id and the div gets set but then when they click on the link i need to remeber so if they click on another link it changes the old one back but for some reason the oldid and oldd is not storing the data sent to them
any one help pls

My full page code


<style type="text/css">
.style4 {
background-color: #D5EDFA;
font-family: Tahoma, Arial;
font-size: 14px;
color: #3C413C;
}
.style5 {
background-color: #3C413C;
font-family: Tahoma, Arial;
font-size: 14px;
color: #FFFFFF;
}
.style6 {
font-family: Tahoma, Arial;
font-size: 14px;
background-color: #EA6326;
color: #3C413C;
}
.style5 A {
color: #EA6326;
text-decoration: none;
font-family: Tahoma, Arial;
}
.style4 A {
color: #3C413C;
text-decoration: none;
font-family: Tahoma, Arial;
}
.style5 A:Hover {
color: #EA6326;
text-decoration: underline;
font-family: Tahoma, Arial;
}
.style4 A:Hover {
color: #3C413C;
text-decoration: underline;
font-family: Tahoma, Arial;
}
.style3 {
border-color: #EA6326;
border-width: thin;
border-style: solid;
font-family: Tahoma, Arial;
background-color: #D5EDFA;
font-size: 14px;
color: #3C413C;
}
</style>
<script type="text/javascript">
var oldid;
var oldd1;
function set_active(id){
if(oldid !== '')
{
oldid = id;
oldd = document.getElementById(id).className;
document.getElementById(id).className = 'style3';

}else{
document.getElementById(oldid).className = oldd;
oldid = id;
oldd = document.getElementById(id).className;
document.getElementById(id).className = 'style3';
}
}
</script>
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="350" height="163" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" align="center" class="style5" id=""></td>
<td width="50" align="center" class="style5" id=""><a href="javascript:;" onclick="pre_year();"><strong>&lt;&lt;</strong></a></td>
<td colspan="3" align="center" id="" class="style5">{year}</td>
<td width="50" align="center" class="style5" id=""><a href="javascript:;" onclick="snxt_year();"><strong>&gt;&gt;</strong></a></td>
<td width="50" align="center" class="style5" id=""></td>
</tr>
<tr>
<td align="center" id="" class="style4"></td>
<td align="center" id="" class="style4"><a href="javascript:;" onclick="pre_month();"><strong>&lt;&lt;</strong></a></td>
<td colspan="3" align="center" id="" class="style4">{month}</td>
<td align="center" id="" class="style4"><a href="javascript:;" onclick="nxt_month();"><strong>&gt;&gt;</strong></a></td>
<td align="center" id="" class="style4"></td>
</tr>
<tr>
<td align="center" id="1.1" class="{style4.1}"><a href="javascript:;" onclick="set_active('1.1');">1</a></td>
<td align="center" id="2.1" class="{style4.1}"><a href="javascript:;" onclick="set_active('2.1');">2</a></td>
<td width="50" align="center" class="{style4.1}" id="3.1"><a href="javascript:;" onclick="set_active('3.1');">3</a></td>
<td width="50" align="center" class="{style4.1}" id="4.1"><a href="javascript:;" onclick="set_active('4.1');">4</a></td>
<td width="50" align="center" class="{style5.1}" id="5.1"><a href="javascript:;" onclick="set_active('5.1');">5</a></td>
<td align="center" id="6.1" class="{style6.1}"><a href="javascript:;" onclick="set_active('6.1');">6</a></td>
<td align="center" id="7.1" class="{style7.1}"><a href="javascript:;" onclick="set_active('7.1');">7</a></td>
</tr>
<tr>
<td align="center" id="1.2" class="{style1.2}"><a href="javascript:;" onclick="set_active('1.2');">8</a></td>
<td align="center" id="2.2" class="{style2.2}"><a href="javascript:;" onclick="set_active('2.2');">9</a></td>
<td align="center" id="3.2" class="{style3.2}"><a href="javascript:;" onclick="set_active('3.2');">10</a></td>
<td align="center" id="4.2" class="{style4.2}"><a href="javascript:;" onclick="set_active('4.2');">11</a></td>
<td align="center" id="5.2" class="{style5.2}"><a href="javascript:;" onclick="set_active('5.2');">12</a></td>
<td align="center" id="6.2" class="{style6.2}"><a href="javascript:;" onclick="set_active('6.2');">13</a></td>
<td align="center" id="7.2" class="{style7.2}"><a href="javascript:;" onclick="set_active('7.2');">14</a></td>
</tr>
<tr>
<td align="center" id="1.3" class="{style1.3}"><a href="javascript:;" onclick="set_active('1.3');">15</a></td>
<td align="center" id="2.3" class="{style2.3}"><a href="javascript:;" onclick="set_active('2.3');">16</a></td>
<td align="center" id="3.3" class="{style3.3}"><a href="javascript:;" onclick="set_active('3.3');">17</a></td>
<td align="center" id="4.3" class="{style4.3}"><a href="javascript:;" onclick="set_active('4.3');">18</a></td>
<td align="center" id="5.3" class="{style5.3}"><a href="javascript:;" onclick="set_active('5.3');">19</a></td>
<td align="center" id="6.3" class="{style6.3}"><a href="javascript:;" onclick="set_active('6.3');">20</a></td>
<td align="center" id="7.3" class="{style7.3}"><a href="javascript:;" onclick="set_active('7.3');">21</a></td>
</tr>
<tr>
<td align="center" id="1.4" class="{style1.4}"><a href="javascript:;" onclick="set_active('1.4')">22</a></td>
<td align="center" id="2.4" class="{style2.4}"><a href="javascript:;" onclick="set_active('2.4');">23</a></td>
<td align="center" id="3.4" class="{style3.4}"><a href="javascript:;" onclick="set_active('3.4');">24</a></td>
<td align="center" id="4.4" class="{style4.4}"><a href="javascript:;" onclick="set_active('4.4');">25</a></td>
<td align="center" id="5.4" class="{style5.4}"><a href="javascript:;" onclick="set_active('5.4');">26</a></td>
<td align="center" id="6.4" class="{style6.4}"><a href="javascript:;" onclick="set_active('6.4');">27</a></td>
<td align="center" id="7.4" class="{style7.4}"><a href="javascript:;" onclick="set_active('7.4');">28</a></td>
</tr>
<tr>
<td align="center" id="1.5" class="{style1.5}">{29}</td>
<td align="center" class="{style2.5} style10" id="2.5">{30}</td>
<td align="center" class="{style3.5} style10" id="3.5">{31}</td>
<td align="center" class="{style4.5} style10" id="4.5">&nbsp;</td>
<td align="center" class="{style5.5} style10" id="5.5">&nbsp;</td>
<td align="center" class="{style6.5} style10" id="6.5">&nbsp;</td>
<td align="center" class="{style7.5} style10" id="7.5">&nbsp;</td>
</tr>
</table>
<div align="center">
<input type="button" value="This Date" />
</div></td>
</tr>
</table>

vwphillips
06-12-2008, 03:49 PM
<!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></title>
<style type="text/css">
.style4 {
background-color: #D5EDFA;
font-family: Tahoma, Arial;
font-size: 14px;
color: #3C413C;
}
.style5 {
background-color: #3C413C;
font-family: Tahoma, Arial;
font-size: 14px;
color: #FFFFFF;
}
.style6 {
font-family: Tahoma, Arial;
font-size: 14px;
background-color: #EA6326;
color: #3C413C;
}
.style5 A {
color: #EA6326;
text-decoration: none;
font-family: Tahoma, Arial;
}
.style4 A {
color: #3C413C;
text-decoration: none;
font-family: Tahoma, Arial;
}
.style5 A:Hover {
color: #EA6326;
text-decoration: underline;
font-family: Tahoma, Arial;
}
.style4 A:Hover {
color: #3C413C;
text-decoration: underline;
font-family: Tahoma, Arial;
}
.style3 {
border-color: #EA6326;
border-width: thin;
border-style: solid;
font-family: Tahoma, Arial;
background-color: #D5EDFA;
font-size: 14px;
color: #3C413C;
}
</style>
<script type="text/javascript">
var oldobj;

function set_active(id){
var obj=document.getElementById(id);
if (!obj.saveclass) obj.saveclass=obj.className;
if (oldobj&&oldobj!=obj) oldobj.className=oldobj.saveclass;
oldobj=obj;
oldobj.className = 'style3';
}
</script> </head>

<body>
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="350" height="163" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" align="center" class="style5" id=""></td>
<td width="50" align="center" class="style5" id=""><a href="javascript:;" onclick="pre_year();"><strong>&lt;&lt;</strong></a></td>
<td colspan="3" align="center" id="" class="style5">{year}</td>
<td width="50" align="center" class="style5" id=""><a href="javascript:;" onclick="snxt_year();"><strong>&gt;&gt;</strong></a></td>
<td width="50" align="center" class="style5" id=""></td>
</tr>
<tr>
<td align="center" id="" class="style4"></td>
<td align="center" id="" class="style4"><a href="javascript:;" onclick="pre_month();"><strong>&lt;&lt;</strong></a></td>
<td colspan="3" align="center" id="" class="style4">{month}</td>
<td align="center" id="" class="style4"><a href="javascript:;" onclick="nxt_month();"><strong>&gt;&gt;</strong></a></td>
<td align="center" id="" class="style4"></td>
</tr>
<tr>
<td align="center" id="1.1" class="{style4.1}"><a href="javascript:;" onclick="set_active('1.1');">1</a></td>
<td align="center" id="2.1" class="{style4.1}"><a href="javascript:;" onclick="set_active('2.1');">2</a></td>
<td width="50" align="center" class="{style4.1}" id="3.1"><a href="javascript:;" onclick="set_active('3.1');">3</a></td>
<td width="50" align="center" class="{style4.1}" id="4.1"><a href="javascript:;" onclick="set_active('4.1');">4</a></td>
<td width="50" align="center" class="{style5.1}" id="5.1"><a href="javascript:;" onclick="set_active('5.1');">5</a></td>
<td align="center" id="6.1" class="{style6.1}"><a href="javascript:;" onclick="set_active('6.1');">6</a></td>
<td align="center" id="7.1" class="{style7.1}"><a href="javascript:;" onclick="set_active('7.1');">7</a></td>
</tr>
<tr>
<td align="center" id="1.2" class="{style1.2}"><a href="javascript:;" onclick="set_active('1.2');">8</a></td>
<td align="center" id="2.2" class="{style2.2}"><a href="javascript:;" onclick="set_active('2.2');">9</a></td>
<td align="center" id="3.2" class="{style3.2}"><a href="javascript:;" onclick="set_active('3.2');">10</a></td>
<td align="center" id="4.2" class="{style4.2}"><a href="javascript:;" onclick="set_active('4.2');">11</a></td>
<td align="center" id="5.2" class="{style5.2}"><a href="javascript:;" onclick="set_active('5.2');">12</a></td>
<td align="center" id="6.2" class="{style6.2}"><a href="javascript:;" onclick="set_active('6.2');">13</a></td>
<td align="center" id="7.2" class="{style7.2}"><a href="javascript:;" onclick="set_active('7.2');">14</a></td>
</tr>
<tr>
<td align="center" id="1.3" class="{style1.3}"><a href="javascript:;" onclick="set_active('1.3');">15</a></td>
<td align="center" id="2.3" class="{style2.3}"><a href="javascript:;" onclick="set_active('2.3');">16</a></td>
<td align="center" id="3.3" class="{style3.3}"><a href="javascript:;" onclick="set_active('3.3');">17</a></td>
<td align="center" id="4.3" class="{style4.3}"><a href="javascript:;" onclick="set_active('4.3');">18</a></td>
<td align="center" id="5.3" class="{style5.3}"><a href="javascript:;" onclick="set_active('5.3');">19</a></td>
<td align="center" id="6.3" class="{style6.3}"><a href="javascript:;" onclick="set_active('6.3');">20</a></td>
<td align="center" id="7.3" class="{style7.3}"><a href="javascript:;" onclick="set_active('7.3');">21</a></td>
</tr>
<tr>
<td align="center" id="1.4" class="{style1.4}"><a href="javascript:;" onclick="set_active('1.4')">22</a></td>
<td align="center" id="2.4" class="{style2.4}"><a href="javascript:;" onclick="set_active('2.4');">23</a></td>
<td align="center" id="3.4" class="{style3.4}"><a href="javascript:;" onclick="set_active('3.4');">24</a></td>
<td align="center" id="4.4" class="{style4.4}"><a href="javascript:;" onclick="set_active('4.4');">25</a></td>
<td align="center" id="5.4" class="{style5.4}"><a href="javascript:;" onclick="set_active('5.4');">26</a></td>
<td align="center" id="6.4" class="{style6.4}"><a href="javascript:;" onclick="set_active('6.4');">27</a></td>
<td align="center" id="7.4" class="{style7.4}"><a href="javascript:;" onclick="set_active('7.4');">28</a></td>
</tr>
<tr>
<td align="center" id="1.5" class="{style1.5}">{29}</td>
<td align="center" class="{style2.5} style10" id="2.5">{30}</td>
<td align="center" class="{style3.5} style10" id="3.5">{31}</td>
<td align="center" class="{style4.5} style10" id="4.5">&nbsp;</td>
<td align="center" class="{style5.5} style10" id="5.5">&nbsp;</td>
<td align="center" class="{style6.5} style10" id="6.5">&nbsp;</td>
<td align="center" class="{style7.5} style10" id="7.5">&nbsp;</td>
</tr>
</table>
<div align="center">
<input type="button" value="This Date" />
</div></td>
</tr>
</table>
</body>

</html>

barkermn01
06-13-2008, 01:02 PM
hi ok i have that all working but the same thing again i cant not get it to store
My Full Code - Excluding CSS now



<script type="text/javascript">
var year = '<?=date("Y")?>';
var month = '<?=date("m")?>';
var oldobj;

var months = array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
var days = array(31, leap_year(), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

function leap_year(){
var lyear = 2008;
while(lyear < year)
{
lyear + 4;
}
if(year == lyear)
{
return 29;
}else{
return 28;
}

}

function set_active(id){
var obj=document.getElementById(id);
if (!obj.saveclass) obj.saveclass=obj.className;
if (oldobj&&oldobj!=obj) oldobj.className=oldobj.saveclass;
oldobj=obj;
oldobj.className = 'style3';
}

function pre_year(){
year--;
document.getElementById("year").innerHTML = year;
}

function nxt_year(){
year++;
document.getElementById("year").innerHTML = year;
}

function pre_month(){
month--;
if(month < 1) month = 12;
if(month < 10) month = '0'+month;
document.getElementById("month").innerHTML = month;
}

function nxt_month(){
month++;
if(month > 12) month = 1;
if(month < 10) month = '0'+month;
document.getElementById("month").innerHTML = month;
}

var Sday;

function calc(dd){
if((dd != '') or (dd != 'undefined')){ Sday = dd; }else{ dd = Sday;}
document.getElementById("date").value = dd+'/'+month+'/'+year;
}
</script>
<link href="master.css" rel="stylesheet" type="text/css" />
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr height="35px">
<td><table width="360" height="245" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tr height="35px">
<td height="35" colspan="2" align="center" bordercolor="#3C413C" class="style5" id=""><a href="javascript:;" onclick="pre_year(); calc();"><strong>&lt;</strong>&lt;</a></td>
<td colspan="3" align="center" bordercolor="#3C413C" class="style5" id=""><span id="year"><?=date("Y")?></span></td>
<td colspan="2" align="center" bordercolor="#3C413C" class="style5" id=""><a href="javascript:;" onclick="nxt_year(); calc();">&gt;<strong>&gt;</strong></a></td>
</tr>
<tr height="35px">
<td colspan="2" align="center" bordercolor="#D5EDFA" class="style4" id=""><a href="javascript:;" onclick="pre_month(); calc();"><strong>&lt;</strong>&lt;</a></td>
<td height="35" colspan="3" align="center" bordercolor="#D5EDFA" class="style4" id=""><span id="month"><?=date("m")?></span></td>
<td colspan="2" align="center" bordercolor="#D5EDFA" class="style4" id=""><a href="javascript:;" onclick="nxt_month(); calc();">&gt;<strong>&gt;</strong></a></td>
</tr>
<tr height="35px">
<td width="50" height="35" align="center" class="style4" id="1.1"><a href="javascript:;" onclick="set_active('1.1'); calc(01);">1</a></td>
<td width="50" height="35" align="center" class="style4" id="2.1"><a href="javascript:;" onclick="set_active('2.1'); calc(02);">2</a></td>
<td width="50" height="35" align="center" class="style4" id="3.1"><a href="javascript:;" onclick="set_active('3.1'); calc(03);">3</a></td>
<td width="50" height="35" align="center" class="style4" id="4.1"><a href="javascript:;" onclick="set_active('4.1'); calc(04);">4</a></td>
<td width="50" height="35" align="center" class="style4" id="5.1"><a href="javascript:;" onclick="set_active('5.1'); calc(05);">5</a></td>
<td width="50" height="35" align="center" class="style4" id="6.1"><a href="javascript:;" onclick="set_active('6.1'); calc(06);">6</a></td>
<td width="50" height="35" align="center" class="style4" id="7.1"><a href="javascript:;" onclick="set_active('7.1'); calc(07);">7</a></td>
</tr>
<tr height="35px">
<td width="50" height="35" align="center" class="style4" id="1.2"><a href="javascript:;" onclick="set_active('1.2'); calc(08);">8</a></td>
<td width="50" height="35" align="center" class="style4" id="2.2"><a href="javascript:;" onclick="set_active('2.2'); calc(09);">9</a></td>
<td width="50" height="35" align="center" class="style4" id="3.2"><a href="javascript:;" onclick="set_active('3.2'); calc(10);">10</a></td>
<td width="50" height="35" align="center" class="style4" id="4.2"><a href="javascript:;" onclick="set_active('4.2'); calc(11);">11</a></td>
<td width="50" height="35" align="center" class="style4" id="5.2"><a href="javascript:;" onclick="set_active('5.2'); calc(12);">12</a></td>
<td width="50" height="35" align="center" class="style4" id="6.2"><a href="javascript:;" onclick="set_active('6.2'); calc(13);">13</a></td>
<td width="50" height="35" align="center" class="style4" id="7.2"><a href="javascript:;" onclick="set_active('7.2'); calc(14);">14</a></td>
</tr>
<tr height="35px">
<td align="center" class="style4" id="1.3"><a href="javascript:;" onclick="set_active('1.3'); calc(15);">15</a></td>
<td align="center" id="2.3" class="style4"><a href="javascript:;" onclick="set_active('2.3'); calc(16);">16</a></td>
<td align="center" id="3.3" class="style4"><a href="javascript:;" onclick="set_active('3.3'); calc(17);">17</a></td>
<td align="center" id="4.3" class="style4"><a href="javascript:;" onclick="set_active('4.3'); calc(18);">18</a></td>
<td height="35" align="center" class="style4" id="5.3"><a href="javascript:;" onclick="set_active('5.3'); calc(19);">19</a></td>
<td width="50" height="35" align="center" class="style4" id="6.3"><a href="javascript:;" onclick="set_active('6.3'); calc(20);">20</a></td>
<td width="50" height="35" align="center" class="style4" id="7.3"><a href="javascript:;" onclick="set_active('7.3'); calc(21);">21</a></td>
</tr>
<tr height="35px">
<td align="center" class="style4" id="1.4"><a href="javascript:;" onclick="set_active('1.4'); calc(22);">22</a></td>
<td align="center" id="2.4" class="style4"><a href="javascript:;" onclick="set_active('2.4'); calc(23);">23</a></td>
<td height="35" align="center" class="style4" id="3.4"><a href="javascript:;" onclick="set_active('3.4'); calc(24);">24</a></td>
<td height="35" align="center" class="style4" id="4.4"><a href="javascript:;" onclick="set_active('4.4'); calc(25);">25</a></td>
<td align="center" id="5.4" class="style4"><a href="javascript:;" onclick="set_active('5.4'); calc(26);">26</a></td>
<td align="center" id="6.4" class="style4"><a href="javascript:;" onclick="set_active('6.4'); calc(27);">27</a></td>
<td align="center" id="7.4" class="style4"><a href="javascript:;" onclick="set_active('7.4'); calc(28);">28</a></td>
</tr>
<tr height="35px">
<td align="center" id="1.5" class="style4">{29}</td>
<td align="center" class="style4" id="2.5">{30}</td>
<td height="35" align="center" class="style4" id="3.5">{31}</td>
<td colspan="4" align="center" class="" id="4.5"><input type="text" name="date" /></td>
</tr>
</table>
<div align="center">
<input type="button" value="This date" />
</div></td>
</tr>
</table>


My Problem


function calc(dd){
if(dd != ''){ Sday = dd; }else{ dd = Sday;}
document.getElementById("date").value = dd+'/'+month+'/'+year;
}
for some reason Sday is not storing the dd or the check is not working

vwphillips
06-13-2008, 01:23 PM
function calc(dd){
if(dd&&dd != ''){
Sday = dd;
}
else{
dd = Sday;
}
document.getElementById("date").value = dd+'/'+month+'/'+year;
}



calendars are not easy and suggest not the best learning exercise.

barkermn01
06-13-2008, 01:28 PM
this is not learning exsercise lol
but i got most of it working just trying to store the data but thanks for that

vwphillips
06-13-2008, 01:33 PM
also

you cant call a function until it is loaded


var year = '<?=date("Y")?>';
var month = '<?=date("m")?>';
var oldobj;

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

function leap_year(){
var lyear = 2008;
while(lyear < year)
{
lyear + 4;
}
if(year == lyear)
{
return 29;
}else{
return 28;
}

}

var days = [31, leap_year(), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

................

barkermn01
06-13-2008, 01:49 PM
ok thanks for that forgot javacript loads in sequence lol to mutch php code

Can i ask what dose dd&&dd do (what i read it dosent make sense)

&& = and

so you are saying day and day not equal to nothing
why is this please

vwphillips
06-13-2008, 06:35 PM
if(dd(if dd exists) &&dd != ''(and if dd does not equal '')){



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum