homepage Welcome to WebmasterWorld Guest from 54.197.147.90
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
double click disables single click
Wayder




msg:4342478
 9:24 pm on Jul 21, 2011 (gmt 0)

I have attached the code below.
My problem is that if I single click a date everything works fine and the background colour to that cell changes. If I double click a date then the background colour of that date is no longer changeable with a single click.

Does anyone know why?
Does anyone have a fix?

Thanks


<style type="text/css">
#container1{position:relative;margin:0.5em 1em;padding:0.5em;width:90%;border:solid 1px #FF0000;}
.clicker{cursor:pointer;color:blue;text-decoration:underline;}
.clicker:hover{text-decoration:underline overline;}
#one{display:none;}
#holTable{margin-left:10em;border-collapse:collapse;}
#holTable th{padding:2px 5px;background-color:#666;color:#fff;}
#holTable #thl{background:#666 url('/images/site/table_left.png') left top no-repeat;padding-left:8px;}
#holTable #thr{background:#666 url('/images/site/table_right.png') right top no-repeat;padding-right:8px;}
#holTable tr{background-color:#e5e5e5;}
#holTable td{padding:1px 8px;border:2px solid #fff;text-align:center;}
#holTable .point{color:blue;text-decoration:underline;cursor:pointer;}
#holTable .point:hover{background-color:#c5c5c5;text-decoration:underline;}
</style>
<script type="text/javascript">
document.body.onclick = function(e){
var targ;
if(!e){ var e=window.event;}
if(e.target){ targ=e.target; }else if(e.srcElement){ targ=e.srcElement; }
if(targ.nodeType==3){ targ = targ.parentNode; }
var id = targ.id;
var regex = /^[0-9]{1,2}-[0-9]{2}-[0-9]{4}$/;
if(id == "two2"){
var one = document.getElementById('one');
var two = document.getElementById('two');
one.style.display = 'block';
two.style.display = 'none';
}else if(id == "one1"){
var one = document.getElementById('one');
var two = document.getElementById('two');
one.style.display = 'none';
two.style.display = 'block';
}else if(id.match(regex)){
var theID = document.getElementById(id);
if(theID.style.backgroundColor == ''){
theID.style.backgroundColor = '#c5c5c5';
}else{
theID.style.backgroundColor = '#e5e5e5';
}
}
}
</script>
<div id="container1">
<div id="one">
<p>Div one</p>
<p><span class="clicker" id="one1">click here</span>.</p>
<p>Select the days that have been deducted from your holiday entitlement</p>
<table id="holTable">
<tr>
<th id="thl">&nbsp;</th>
<th colspan="5"> July 2011 </th>
<th id="thr">&nbsp;</th>
</tr>
<tr>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="point" id="1-07-2011"> 1 </td>
<td class="point" id="2-07-2011"> 2 </td>
</tr>
<tr>
<td class="point" id="3-07-2011"> 3 </td>
<td class="point" id="4-07-2011"> 4 </td>
<td class="point" id="5-07-2011"> 5 </td>
<td class="point" id="6-07-2011"> 6 </td>
<td class="point" id="7-07-2011"> 7 </td>
<td class="point" id="8-07-2011"> 8 </td>
<td class="point" id="9-07-2011"> 9 </td>
</tr>
<tr>
<td class="point" id="10-07-2011"> 10 </td>
<td class="point" id="11-07-2011"> 11 </td>
<td class="point" id="12-07-2011"> 12 </td>
<td class="point" id="13-07-2011"> 13 </td>
<td class="point" id="14-07-2011"> 14 </td>
<td class="point" id="15-07-2011"> 15 </td>
<td class="point" id="16-07-2011"> 16 </td>
</tr>
<tr>
<td class="point" id="17-07-2011"> 17 </td>
<td class="point" id="18-07-2011"> 18 </td>
<td class="point" id="19-07-2011"> 19 </td>
<td class="point" id="20-07-2011"> 20 </td>
<td class="point" id="21-07-2011"> 21 </td>
<td class="point" id="22-07-2011"> 22 </td>
<td class="point" id="23-07-2011"> 23 </td>
</tr>
<tr>
<td class="point" id="24-07-2011"> 24 </td>
<td class="point" id="25-07-2011"> 25 </td>
<td class="point" id="26-07-2011"> 26 </td>
<td class="point" id="27-07-2011"> 27 </td>
<td class="point" id="28-07-2011"> 28 </td>
<td class="point" id="29-07-2011"> 29 </td>
<td class="point" id="30-07-2011"> 30 </td>
</tr>
<tr>
<td class="point" id="31-07-2011"> 31 </td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<div id="two">
<p>Div two</p>
<p><span class="clicker" id="two2">click here</span>.</p>
</div>

 

Wayder




msg:4342491
 10:20 pm on Jul 21, 2011 (gmt 0)

I thought that as I couldnt find what the problem was, I would move on and look at another part of the script and come back later to look again with fresh eyes, and I ran headlong into the answer.

FYI
if(theID.style.backgroundColor == ''){

Will only trigger once because after I have populated it, its no longer empty so its now...

if(theID.style.backgroundColor == '' || theID.style.backgroundColor != 'rgb(197, 197, 197)' && theID.style.backgroundColor != '#c5c5c5'){

I'm not sure if its fully cross browser yet (need to test), but it works in FF & IE.

Thanks for looking.

Ray...

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved