SunQuest
 
           JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 
Go Back   Dev Articles Community Forums > Programming > JavaScript Development
Reload this Page

Question about highlight script

Discuss Question about highlight script in the JavaScript Development forum on Dev Articles.
Question about highlight script JavaScript Development forum discussing the use of JavaScript and its features as a powerful DOM manipulator. JavaScript is used in most websites to enrich the interface and enhance the user experience.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
Ajax Application Generator Generate database and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!
  #1  
Old April 10th, 2005, 07:57 AM
juanmanuelsanch juanmanuelsanch is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Mar 2005
Posts: 25 juanmanuelsanch User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 31 m 27 sec
Reputation Power: 0
Question about highlight script
hi all ! I have this script

Code:
 <script type="text/javascript"> 
/***********************************************
* Highlight Table Cells Script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
//Specify highlight behavior. "TD" to highlight table cells, "TR" to highlight the entire row:
var highlightbehavior="TD"
var ns6=document.getElementById&&!document.all
var ie=document.all
function changeto(e,highlightcolor){
source=ie? event.srcElement : e.target
if (source.tagName=="TABLE")
return
while(source.tagName!=highlightbehavior && source.tagName!="HTML")
source=ns6? source.parentNode : source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")
source.style.backgroundColor=highlightcolor
}
function contains_ns6(master, slave) { //check if slave is contained by master
while (slave.parentNode)
if ((slave = slave.parentNode) == master)
return true;
return false;
}
function changeback(e,originalcolor){
if (ie&&(event.fromElement.contains(event.toElement)||sour  ce.contains(event.toElement)||source.id=="ignore")||source.tagName=="TABLE")
return
else if (ns6&&(contains_ns6(source, e.relatedTarget)||source.id=="ignore"))
return
if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source)
source.style.backgroundColor=originalcolor
}
</script>


and I have this table

<tr id="TABLE">
<td height="10" bgcolor="${color2}" class="IndexColumn1" >${index}</td>
<td class="HoraColumn1" bgcolor="${color2}">${fila.hora_Citas}</td>
<td class="HoraLlegadaColumn1" bgcolor="${color2}">${fila.horaent_Citas}</td>
</tr>

The problem is that if I change the value from TD to TR the script wont highlight anything. I dont know why basiclly because I dont know avascript.

Any help is apreciatted.

THanks!
Reply With Quote
  #2  
Old April 10th, 2005, 08:42 AM
ChiefWigs1982's Avatar
ChiefWigs1982 ChiefWigs1982 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Jan 2005
Location: I have emerged from the place of spells and fairies
Posts: 97 ChiefWigs1982 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 Days 17 h 35 m 12 sec
Reputation Power: 4
That's nowhere near enough code to be able to help you out.

You haven't even posted the bits of html that call the JS functions.

Also, this is the JavaScript forum, not the php one. Please don't
post php code here, post what's outputted by it.

<edit>Plus, if you could actually explain what you are trying to do,
rather than just asking why it doesn't work, I'm sure I/we can come
up with some much nicer code than that mess...
Reply With Quote
  #3  
Old April 10th, 2005, 09:43 AM
juanmanuelsanch juanmanuelsanch is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Mar 2005
Posts: 25 juanmanuelsanch User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 31 m 27 sec
Reputation Power: 0
Quote:
Originally Posted by Agent47
That's nowhere near enough code to be able to help you out.

You haven't even posted the bits of html that call the JS functions.

Also, this is the JavaScript forum, not the php one. Please don't
post php code here, post what's outputted by it.

<edit>Plus, if you could actually explain what you are trying to do,
rather than just asking why it doesn't work, I'm sure I/we can come
up with some much nicer code than that mess...


well first of its javascript isnt ? the code I jsut wrote was javascript. If you mean the ${} thats JSTL.
what I want its to highlight and entire row of my table when the mouse its over it.

I call the function doing this is my table
<table width="1311" border="1" bordercolor="#000000" align="center" bgcolor="#FFFFFF" class="style36" id="tableBody" onMouseover="changeto(event, 'lightblue')" onMouseout="changeback(event, '${color2}')">
Reply With Quote
  #4  
Old April 11th, 2005, 07:23 AM
ChiefWigs1982's Avatar
ChiefWigs1982 ChiefWigs1982 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Jan 2005
Location: I have emerged from the place of spells and fairies
Posts: 97 ChiefWigs1982 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 Days 17 h 35 m 12 sec
Reputation Power: 4
Please post all of your code. The html/javascript that is, not the
JSTL. Open your page in your browser and view src, then copy /
paste the entire table here.

Did you write all the JS? If so, why have you chosen to do it this
way? It just seems bloated and unnecessary...
Reply With Quote
  #5  
Old April 11th, 2005, 07:35 AM
juanmanuelsanch juanmanuelsanch is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Mar 2005
Posts: 25 juanmanuelsanch User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 31 m 27 sec
Reputation Power: 0
Quote:
Originally Posted by Agent47
Please post all of your code. The html/javascript that is, not the
JSTL. Open your page in your browser and view src, then copy /
paste the entire table here.

Did you write all the JS? If so, why have you chosen to do it this
way? It just seems bloated and unnecessary...



No I didnt wrote the JS code I got it from a page... but dosent seem to work on my table

Code:
 
		<div class="scrollingDiv">
		  <table width="859" align="center" class="style36" id="header">
			<thead>
			  <tr>
				<th class="IndexColumn"></th>
				<th class="HoraColumn">Cita</th>
				<th class="HoraLlegadaColumn">Llegada</th>
				<th class="NombreColumn">Nombres</th>
				<th class="ApellidoColumn">Apellidos</th>
				<th class="NoSessionColumn">Sesión</th>
				<th class="ProtocoloColumn">Protocolo</th>
				<th class="PrescriptorColumn">Prescriptor</th>
				<th class="NoSessionColumn">Pendiente</th>
				<th class="CoberturaColumn">Cobertura</th>
				<th class="OpcionColumn">Opción</th>
				<th class="ObservacionColumn">Observación</th>
				<th class="CheckColumn"></th>
			  </tr>
			</thead>
		  </table>
			<table width="1311" border="1"  bordercolor="#000000" align="center" bgcolor="#FFFFFF" class="style36" id="tableBody" onMouseover="changeto(event, 'lightblue')" onMouseout="changeback(event, '${color2}')">
			  <tbody>
				<c:forEach var="fila" items="${requestScope.citas_diarias}">
	 <c:set var="index" value="${index+1}"/>
	 
	<c:set var="tipoproto" value="${fila.tipo_Protocolo}"/>
	<!--<c:out value="${tipoproto}" /> -->
	<c:set var="Fisio" value="Fisio"/>
	<c:if test="${tipoproto==Fisio}">
	<c:set var="color2" value="#0FA13C"/>
	</c:if>
	<c:set var="Medica" value="Medica"/>
	<c:if test="${tipoproto==Medica}">
	<c:set var="color2" value="#2386D2"/>
	</c:if>
	<c:set var="Nutricion" value="Nutrición"/>
	<c:if test="${tipoproto==Nutricion}">
	<c:set var="color2" value="#D5E664"/>
	</c:if>
		
	<c:set var="condicion" value="${fila.opcion_Citas}"/>
	<c:set var="Nuevo" value="Nuevo"/>
	<c:if test="${condicion==Nuevo}">
	<c:set var="color2" value="#E1610C"/>
	</c:if>
	
	<c:set var="Prueba" value="Prueba"/>
	<c:if test="${condicion==Prueba}">
	<c:set var="color2" value="#E1610C"/>
	</c:if>
<script type="text/javascript"> 
/***********************************************
* Highlight Table Cells Script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
//Specify highlight behavior. "TD" to highlight table cells, "TR" to highlight the entire row:
var highlightbehavior="TD"
var ns6=document.getElementById&&!document.all
var ie=document.all
function changeto(e,highlightcolor){
source=ie? event.srcElement : e.target
if (source.tagName=="TABLE")
return
while(source.tagName!=highlightbehavior && source.tagName!="HTML")
source=ns6? source.parentNode : source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")
source.style.backgroundColor=highlightcolor
}
function contains_ns6(master, slave) { //check if slave is contained by master
while (slave.parentNode)
if ((slave = slave.parentNode) == master)
return true;
return false;
}
function changeback(e,originalcolor){
if (ie&&(event.fromElement.contains(event.toElement)||sour  ce.contains(event.toElement)||source.id=="ignore")||source.tagName=="TABLE")
return
else if (ns6&&(contains_ns6(source, e.relatedTarget)||source.id=="ignore"))
return
if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source)
source.style.backgroundColor=originalcolor
}
</script>
				<tr id="TABLE">
				  <td height="10" bgcolor="${color2}" class="IndexColumn1" >${index}</td>
				  <td width="40" bgcolor="${color2}">${fila.hora_Citas}</td>
				  <td width="40" bgcolor="${color2}">${fila.horaent_Citas}</td>
				  <td width="85" bgcolor="${color2}">${fila.nom_Usuario}</td>
				  <td width="85" bgcolor="${color2}">${fila.apellido_Usuario}</td>
				  <td width="30" bgcolor="${color2}">${fila.gastadas_Sesiones}</td>
				  <td width="85" bgcolor="${color2}">${fila.protocolo_Citas}</td>
				  <td width="85" bgcolor="${color2}">${fila.prescriptor_Usuario}</td>
				  <td width="60"  bgcolor="${color2}">${fila.faltantes_Sesiones}</td>
				  <td width="100"  bgcolor="${color2}">${fila.mutua_Usuario}</td>
				  <td width="60"  bgcolor="${color2}">${fila.opcion_Citas}</td>
				  <td width="80" bgcolor="${color2}">${fila.observacion_Citas}</td>
				  <td width="10" bgcolor="${color2}">
					<input name="checkbox" type="checkbox" value="${fila.DNI_Citas},${fila.protocolo_Citas},${fila.n  om_Usuario},${fila.apellido_Usuario},${fila.protoc  olo_Citas}">
				  </td>
				</tr>
				</c:forEach>
			  </tbody>
			</table>
Thanks for the help
Reply With Quote
  #6  
Old April 11th, 2005, 07:54 AM
ChiefWigs1982's Avatar
ChiefWigs1982 ChiefWigs1982 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Jan 2005
Location: I have emerged from the place of spells and fairies
Posts: 97 ChiefWigs1982 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 Days 17 h 35 m 12 sec
Reputation Power: 4
Code:
<td height="10" bgcolor="${color2}" class="IndexColumn1" >${index}</td>
That's the JSLT code!!

It's kind of hard to see what's going on when I don't have the src...

Quote:
Originally Posted by Me
Please post all of your code. The html/javascript that is, not the
JSTL. Open your page in your browser and view src, then copy /
paste the entire table here.
Reply With Quote
  #7  
Old April 11th, 2005, 12:59 PM
juanmanuelsanch juanmanuelsanch is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Mar 2005
Posts: 25 juanmanuelsanch User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 31 m 27 sec
Reputation Power: 0
Quote:
Originally Posted by Agent47
Code:
<td height="10" bgcolor="${color2}" class="IndexColumn1" >${index}</td>
That's the JSLT code!!

It's kind of hard to see what's going on when I don't have the src...


The table uses JSTL ! I pasted my entire table using src. The values inside that table comes from the server so I need JSTL
to make them visible to the user.

Im really lost here. I added you to my msn so we can talk.

Thanks!
Reply With Quote
  #8  
Old April 11th, 2005, 01:19 PM
ChiefWigs1982's Avatar
ChiefWigs1982 ChiefWigs1982 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Jan 2005
Location: I have emerged from the place of spells and fairies
Posts: 97 ChiefWigs1982 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 Days 17 h 35 m 12 sec
Reputation Power: 4
I know that's the JSTL, but that's not what the user sees when
they view the page in their browser, is it?

I want the actual html that's produced by the JSTL.
Reply With Quote
  #9  
Old April 12th, 2005, 07:00 AM
juanmanuelsanch juanmanuelsanch is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Mar 2005
Posts: 25 juanmanuelsanch User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 31 m 27 sec
Reputation Power: 0
Quote:
Originally Posted by Agent47
I know that's the JSTL, but that's not what the user sees when
they view the page in their browser, is it?

I want the actual html that's produced by the JSTL.


Let me tell you that its huge !

Code:
 
<body>
<table width="200" border="0" align="center" id="principal">
<tr>
	<td><form name="demoForm" method="post" action="SvMedex">
<!-- -->
	 <input name="boton2" type="hidden" value="anotar" id="boton2"> <input name="horaent" type="hidden" value="" id="horaent">
	 <table width="119" border="0" align="right">
		<tr>
		 <td width="156" height="158">
	<iframe width=156 height=158 name="gToday:normal:agenda.js" id="gToday:normal:agenda.js" src="/Medex/HelloWorld/iflateng.htm" scrolling="no" frameborder="0">
</iframe>
</td>
		</tr>
		<tr>
		 <td height="29"><div align="center">
			 <select name="tipodeproto" id="tipodeproto">
				<option value="Fisio">Fisio</option>
				<option value="Medica">Médica</option>
				<option value="Nutrición">Nutrición</option>
			 </select>
			 <input name="boton" type="submit" id="boton" value="Ver">			
			</div></td>
		</tr>
	 </table>
	<!-- -->
	 <table width="156" height="181" border="0" align="left">
		<tr>
		 <td width="150" height="154"><img src="/Medex/Imagenes/medex.jpg" width="150" height="150"></td>
		</tr>
		<tr>
		 <td height="21"><div align="center">
			 <input type="hidden" name="dateField" value="" size="10" maxlength="10">
			 <input name="boton" type="submit" id="boton" value="Desconectar">
		 </div></td>
		</tr>
	 </table>
	 <table width="436" height="150" border="1" align="center">
		<tr bgcolor="#006600" class="style2">
		 <td width="106"><div align="center" class="style2 style4 style6">
			 <div align="center">Gestión Usuarios</div>
		 </div></td>
		 <td width="144"><div align="center" class="style7">
			 <div align="center">Facturas</div>
		 </div></td>
		 <td width="77"><div align="center" class="style8">
			<div align="center">Citas</div>
		 </div></td>
		 <td width="81"><div align="center" class="style7">
			 <div align="center">Reportes</div>
		 </div></td>
		</tr>
		<tr bgcolor="#006600">
		 <td>
			<div align="center">
			 <input name="boton" type="submit" id="boton5" value="Registrar">
		 </div></td>
		 <td><div align="center">
			 <input name="boton" type="submit" id="boton" value="Emitir y cargar factura" align="middle">
		 </div></td>
		 <td><div align="center">
			 <input name="boton" type="submit" id="boton42" value="Añadir cita">
		 </div></td>
		 <td><div align="center">
			 <input name="boton" type="submit" id="boton" value="Reporte 1">
		 </div></td>
		</tr>
		<tr bgcolor="#006600">
		 <td><div align="center">
			 <input name="boton" type="submit" id="boton" value="Buscar usuarios">
		 </div></td>
		 <td><div align="center">
			 <input name="boton" type="submit" id="boton6" value="Especiales">
		 </div></td>
		 <td><div align="center">
			 <input name="boton" type="submit" id="boton4" value="Ver citas">
		 </div></td>
		 <td><div align="center">
			 <input name="boton" type="submit" id="boton" value="Reporte 2">
		 </div></td>
		</tr>
		<tr bgcolor="#006600">
		 <td><div align="center"></div></td>
		 <td><div align="center">
			 <input name="boton" type="submit" id="boton7" value="Por cobrar">
		 </div></td>
		 <td><div align="center">
		 </div></td>
		 <td><div align="center"></div></td>
		</tr>
	 </table>
	 <!-- FlatCalendar Tags (tag name and id must match) -->
	 <p>&nbsp;</p>
 
<!--	 <table width="306" border="0" align="center">
		<tr>
		 <td width="313" height="30"><div align="right" class="style18">
			 <div align="center">Citas para el 12/abril/2005</div>
		 </div></td>
		</tr>
	 </table>-->
<!-- /* Our outer div gives a unified size (including scroll bar) and border to the
			 the two tables.
			*/ -->
<center>
		<div class="scrollingDiv">
		 <table width="859" align="center" class="style36" id="header">
			<thead>
			 <tr>
				<th class="IndexColumn"></th>
				<th class="HoraColumn">Cita</th>
				<th class="HoraLlegadaColumn">Llegada</th>
				<th class="NombreColumn">Nombres</th>
				<th class="ApellidoColumn">Apellidos</th>
				<th class="NoSessionColumn">Sesión</th>
				<th class="ProtocoloColumn">Protocolo</th>
				<th class="PrescriptorColumn">Prescriptor</th>
				<th class="NoSessionColumn">Pendiente</th>
				<th class="CoberturaColumn">Cobertura</th>
				<th class="OpcionColumn">Opción</th>
				<th class="ObservacionColumn">Observación</th>
				<th class="CheckColumn"></th>
			 </tr>
			</thead>
		 </table>
			<table width="1311" border="1" bordercolor="#000000" align="center" bgcolor="#FFFFFF" class="style36" id="tableBody" onMouseover="changeto(event, 'lightblue')" onMouseout="changeback(event, '')">
			 <tbody>
 
			 </tbody>
			</table>
		 </div>
		</div>
	 </center>
	 <table width="642" border="0" align="center">
		<tr bgcolor="#006600">
		 <td width="136"><div align="center" class="style16 style31 style4 style28 style33">
			 <div align="center">Hora cita</div>
		 </div></td>
		 <td width="118"><div align="center" class="style16 style31 style4 style28 style33">
			 <div align="center">Hora llegada</div>
		 </div></td>
		 <td width="132"><div align="center" class="style15 style31 style4 style28 style33">
			 <div align="center"><span class="style3"><span class="style9"><span #invalid_attr_id="middle">Protocolo</span></span></span></div>
		 </div></td>
		 <td width="70"><div align="center" class="style16 style4 style28 style33"><strong>Opción</strong></div></td>
		 <td width="144"><div align="center" class="style35"><span class="style16">Observación</span></div></td>
		</tr>
		<tr bgcolor="#006600">
		 <td><div align="center" class="style35">
		 </div>
			<div align="center">
</body>
</html>
Reply With Quote
  #10  
Old April 15th, 2005, 09:37 AM
juanmanuelsanch juanmanuelsanch is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Mar 2005
Posts: 25 juanmanuelsanch User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 31 m 27 sec
Reputation Power: 0
is this what you wanted ? PLease help me out...
Reply With Quote
Reply

Viewing: Dev Articles Community Forums > Programming > JavaScript Development > Question about highlight script

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support |