Table with Fixed Header not working after adding an onmouseover event

MrCode2k

Hello,
Trying to do: I just want a table that I can scroll and that has fixed

headers.
Problem: I got it to work but when I added the onmouseover event it
didn't work anymore.
Replicate-Problem: Scrolldown the textbox and put the mouse over a row.

The headers will move up.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Testin g</title>
<style>
.Header_Row
{
position:relati ve;
}
tr.Header_Row th
{
background-color:#6495c2;
height:15px;
font-size: 11px;
color: white;
font-family: Verdana;
font-weight:bold;
border-right: black 1px solid;
border-top: white 1px solid;
border-left: white 1px solid;
border-bottom: black 1px solid;
}
.Primary_Data_R ow {}
tr.Primary_Data _Row td
{
height:10px;
border-bottom:black 1px solid;
background-color:white;
font-size: 11px;
color: black;
font-family: Verdana;
border-right: black 1px dashed;
}
.Secondary_Data _Row {}
tr.Secondary_Da ta_Row td
{
height:10px;
border-bottom:black 1px solid;
background-color:whitesmok e;
font-size: 11px;
color: black;
font-family: Verdana;
border-right: black 1px dashed;
}
tr.Mouse_Over_D ata_Row td
{
cursor:hand;
background-color:orange;
font-size: 11px;
color: blue;
text-decoration: underline;
font-family: Verdana;
border-right: black 1px dashed;
}
</style>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<div style="border: 1px solid black;height:10 0px;overflow:
auto;width: 270px">
<table cellspacing="0" cellpadding="2" rules="all" border="1"
id="ctl00_msp_C ontent_Holder_h dr_Test"
style="border-collapse:collap se;">
<tr class="Header_R ow">
<th scope="col">Tap e Date</th><th
scope="col">Dea l Name</th>
</tr>
<tr class="Primary_ Data_Row"
onmouseover="th is.className='M ouse_Over_Data_ Row'"
onmouseout="thi s.className='Pr imary_Data_Row' ">
<td style="width:10 0px;">2006-02-02</td><td
style="width:15 0px;">TESTING0</td>
</tr><tr class="Secondar y_Data_Row"
onmouseover="th is.className='M ouse_Over_Data_ Row'"
onmouseout="thi s.className='Se condary_Data_Ro w'">
<td style="width:10 0px;">2006-02-03</td><td
style="width:15 0px;">TESTING1</td>
</tr><tr class="Primary_ Data_Row"
onmouseover="th is.className='M ouse_Over_Data_ Row'"
onmouseout="thi s.className='Pr imary_Data_Row' ">
<td style="width:10 0px;">2006-02-04</td><td
style="width:15 0px;">TESTING2</td>
</tr><tr class="Secondar y_Data_Row"
onmouseover="th is.className='M ouse_Over_Data_ Row'"
onmouseout="thi s.className='Se condary_Data_Ro w'">
<td style="width:10 0px;">2006-02-05</td><td
style="width:15 0px;">TESTING3</td>
</tr><tr class="Primary_ Data_Row"
onmouseover="th is.className='M ouse_Over_Data_ Row'"
onmouseout="thi s.className='Pr imary_Data_Row' ">
<td style="width:10 0px;">2006-02-06</td><td
style="width:15 0px;">TESTING4</td>
</tr><tr class="Secondar y_Data_Row"
onmouseover="th is.className='M ouse_Over_Data_ Row'"
onmouseout="thi s.className='Se condary_Data_Ro w'">
<td style="width:10 0px;">2006-02-07</td><td
style="width:15 0px;">TESTING5</td>
</tr><tr class="Primary_ Data_Row"
onmouseover="th is.className='M ouse_Over_Data_ Row'"
onmouseout="thi s.className='Pr imary_Data_Row' ">
<td style="width:10 0px;">2006-02-08</td><td
style="width:15 0px;">TESTING6</td>
</tr><tr class="Secondar y_Data_Row"
onmouseover="th is.className='M ouse_Over_Data_ Row'"
onmouseout="thi s.className='Se condary_Data_Ro w'">
<td style="width:10 0px;">2006-02-09</td><td
style="width:15 0px;">TESTING7</td>
</tr><tr class="Primary_ Data_Row"
onmouseover="th is.className='M ouse_Over_Data_ Row'"
onmouseout="thi s.className='Pr imary_Data_Row' ">
<td style="width:10 0px;">2006-02-10</td><td
style="width:15 0px;">TESTING8</td>
</tr><tr class="Secondar y_Data_Row"
onmouseover="th is.className='M ouse_Over_Data_ Row'"
onmouseout="thi s.className='Se condary_Data_Ro w'">
<td style="width:10 0px;">2006-02-11</td><td
style="width:15 0px;">TESTING9</td>
</tr><tr class="Primary_ Data_Row"
onmouseover="th is.className='M ouse_Over_Data_ Row'"
onmouseout="thi s.className='Pr imary_Data_Row' ">
<td style="width:10 0px;">2006-02-12</td><td
style="width:15 0px;">TESTING10 </td>
</tr><tr class="Secondar y_Data_Row"
onmouseover="th is.className='M ouse_Over_Data_ Row'"
onmouseout="thi s.className='Se condary_Data_Ro w'">
<td style="width:10 0px;">2006-02-13</td><td
style="width:15 0px;">TESTING11 </td>
</tr><tr class="Primary_ Data_Row"
onmouseover="th is.className='M ouse_Over_Data_ Row'"
onmouseout="thi s.className='Pr imary_Data_Row' ">
<td style="width:10 0px;">2006-02-14</td><td
style="width:15 0px;">TESTING12 </td>
</tr><tr class="Secondar y_Data_Row"
onmouseover="th is.className='M ouse_Over_Data_ Row'"
onmouseout="thi s.className='Se condary_Data_Ro w'">
<td style="width:10 0px;">2006-02-15</td><td
style="width:15 0px;">TESTING13 </td>
</tr><tr class="Primary_ Data_Row"
onmouseover="th is.className='M ouse_Over_Data_ Row'"
onmouseout="thi s.className='Pr imary_Data_Row' ">
<td style="width:10 0px;">2006-02-16</td><td
style="width:15 0px;">TESTING14 </td>
</tr><tr class="Secondar y_Data_Row"
onmouseover="th is.className='M ouse_Over_Data_ Row'"
onmouseout="thi s.className='Se condary_Data_Ro w'">
<td style="width:10 0px;">2006-02-17</td><td
style="width:15 0px;">TESTING15 </td>
</tr><tr class="Primary_ Data_Row"
onmouseover="th is.className='M ouse_Over_Data_ Row'"
onmouseout="thi s.className='Pr imary_Data_Row' ">
<td style="width:10 0px;">2006-02-18</td><td
style="width:15 0px;">TESTING16 </td>
</tr><tr class="Secondar y_Data_Row"
onmouseover="th is.className='M ouse_Over_Data_ Row'"
onmouseout="thi s.className='Se condary_Data_Ro w'">
<td style="width:10 0px;">2006-02-19</td><td
style="width:15 0px;">TESTING17 </td>
</tr><tr class="Primary_ Data_Row"
onmouseover="th is.className='M ouse_Over_Data_ Row'"
onmouseout="thi s.className='Pr imary_Data_Row' ">
<td style="width:10 0px;">2006-02-20</td><td
style="width:15 0px;">TESTING18 </td>
</tr><tr class="Secondar y_Data_Row"
onmouseover="th is.className='M ouse_Over_Data_ Row'"
onmouseout="thi s.className='Se condary_Data_Ro w'">
<td style="width:10 0px;">2006-02-21</td><td
style="width:15 0px;">TESTING19 </td>
</tr>
</table>
</div>
</body>
</html>
Thank you in advance,
H

Feb 2 '06 #1

Subscribe Reply

2726

RobG

MrCode2k wrote:

Hello,
Trying to do: I just want a table that I can scroll and that has fixed

headers.
Problem: I got it to work but when I added the onmouseover event it
didn't work anymore.

I don't think the problem has anything to do with the onmouseover - if
it did, the proper place to ask would be comp.lang.javas cript. Even
after removing all the scripting, your 'fixed header' doesn't work for
me in any browser.

More likely your problem is CSS, in which case ask in
comp.infosystem s.www.authoring.stylesheets

In the meantime, the table here seems to be what you are trying to
replicate:

<URL:http://www.imaputz.com/cssStuff/bigFourVersion. html>

[...]
--
Rob

Feb 3 '06 #2

MrCode2k

Rob,

Thanks for your response.
The reason why the fixed header was not working was because the first
line was missing from the code. Sorry.

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

If you copy and paste the HTML from the url you submited and the add an
onmouseover event to a row that you have to scroll to get to, you will
also see the problem that, I'm having.

Thanks,

H

Feb 3 '06 #3

Similar topics

2793

Netscape 7 + div + position:fixed + onmouseover : bug ?

by: Patrice | last post by:

There seems to be a bug with the events mouseOut and mouseOver of divs when their position is fixed : when you enter the div with the mouse, three events are fired in this order : over, out, over. It works as expected with IE6. Is this a known problem ? Is there any workaround ? Patrice

Javascript

2799

Scrolling Table with Fixed Headers not working after adding an onmouseover event

by: MrCode2k | last post by:

HTML / CSS

19560

Mouse over effect, onclick select for alternate row colors table

by: Amy | last post by:

I need some help. I have this table with alternate row colors. Class gray and class white. I have javascript that do highlight when mouseover row ... and onclick to select row and highlight it with another color. Also created a class called "Selected". You can only select a row at a time. My problem is, if a row is preselected, when mouseover the selected row, the selected color is screwed. Until you click on the selected row once, the...

Javascript

4827

Collapsible table sorting problem

by: Kamal | last post by:

Hello all, I have a very simple html table with collapsible rows and sorting capabilities. The collapsible row is hidden with css rule (display:none). When one clicks in the left of the expandable row, the hidden row is made visible with css. The problem is when i sort the rows, the hidden rows get sorted as well which i don't want and want to be moved (while sorting) relative to their parent rows. The following is my complete html code...

Javascript

16974

Resizable, sortable, findable and scrollable HTML table

by: since | last post by:

I figured I would post my solution to the following. Resizable column tables. Search and replace values in a table. (IE only) Scrollable tables. Sortable tables. It is based on a lot examples I found on the web. Works in IE and mozilla. http://www.imaputz.com/cssStuff/bigFourVersion.html

Javascript

7997

Grid table (add, remove, import, edit)

by: Romulo NF | last post by:

Greetings again to everyone, Im back to show this grid componenet i´ve developed. With this grid you can show the data like a normal table, remove the rows that you need, add rows, import data, call determined functions, and edit the data already present What will you need to use the grid? A table with standard markup and an ID to call the script that will turn the table into a grid Parameters: tabelaID => id of the table that will...

Javascript

2410

Header position on Table layout

by: daniel2335 | last post by:

Hello people, I could do with a little help.. I have been piecing some code together to make a table with a fixed header and that has light up rows. I thought id got it but I notice when i scroll down and the put the cursor over and row poof goes the header, also I couldn't seem to get the spacing off the header cells even when deleting all spacings throughout the code. If you could please help that would be great. :) <!DOCTYPE html PUBLIC...

HTML / CSS

13798

Drag & Drop Table Columns (new version, explained)

by: Romulo NF | last post by:

Greetings, I´m back here to show the new version of the drag & drop table columns (original script ). I´ve found some issues with the old script, specially when trying to use 2 tables with drag&drop on the same page (which was not possible). Now i´ve a new concept of the script, more object oriented. I´ve also commented the whole code so you guys can easier understand it engine. What exactly we need when trying to make a column drag &...

Javascript

9489

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9298

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10072

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

8737

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7286

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6562

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5329

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

3829

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3399

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP