I have a table on which I need to implement draggable header columns. I implemented it using Chrome as my browser, and everything worked fine. When I tested it in Firefox (17.0.1), I noticed that the drag event doesn't fire. dragstart does, though. I simplified the problem in the markup below. When loaded in Chrome, the top label updates each time the mouse moves while dragging. In Firefox it remains 0.
<!DOCTYPE html>
<html>
<head>
<title>TH Drag Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
table,td,th {
border: solid thin black;
}
</style>
<script>
$(document).ready(function() {
$("th").bind("drag", function(event) {
$("#lbl").html(event.originalEvent.offsetX);
});
});
</script>
</head>
<body>
<span id="lbl">0</span>
<table>
<thead>
<tr>
<th draggable="true">Column A</th>
<th draggable="true">Column B</th>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</tbody>
</table>
</body>
</html>
I had nightmares fixing this issue for Firefox. I needed to drag a div onto a diary and detect the coordinates of the drop so I knew which date and time the user had selected.
To get the drag event to fire I added the below line to the dragstart event handler:
event.dataTransfer.setData('Text', this.id);
However, the hardest thing to work out was how to get the x and y coordinates when the drag ended, as these are not returned in the dragend event handler in Firefox. I tried using mouse events as mentioned above, but I found that these did not work while the drag is in progress and are only called after the dragend event handler has been called. So, I only used the dragend event to detect when the user had released the div, and then used the next mouse moved event to get the coordinates and do any other work that is required. I found this works in IE, Firefox and Chrome.
Here is the html / javascript of a demo:
<div>
<div id = "todrag" class = "testdiv" draggable="true"><p>Please drag me</p></div>
<div id = "destination" class = "testdiv"><p>To here</p></div>
<p id = "coords"></p>
<p id = "compareords"></p>
</div>
<script>
var down = true;
var m_xcoordDrag = 0;
var m_ycoordDrag = 0;
var m_xcoordMove = 0;
var m_ycoordMove = 0;
var m_dragReleased = false;
var m_coordselement = document.getElementById("coords");
var m_compareordselement = document.getElementById("compareords");
function OnMouseMove(e) {
m_xcoordMove = e.x;
m_ycoordMove = e.y;
m_coordselement.innerHTML = e.x + "," + e.y;
if (m_dragReleased) {
m_compareordselement.innerHTML = "X:" + m_xcoordDrag + ", " + m_xcoordMove + " Y:" + m_ycoordDrag + ", " + m_ycoordMove;
m_dragReleased = false;
}
}
dragstart = function (event) {
event.dataTransfer.setData('Text', this.id);
stop = false;
}
dragend = function (event) {
m_dragReleased = true;
m_xcoordDrag = event.x;
m_ycoordDrag = event.y;
}
document.onmousemove = OnMouseMove;
var toDrag = document.getElementById("todrag");
toDrag.addEventListener('dragstart', dragstart);
toDrag.addEventListener('dragend', dragend);
</script>
I hope this helps!
The bit that has been cut out http://pastebin.com/bD2g3SqL
EDIT:
This does work, however I'm yet to find a way to access the offsetX and offsetY properties, for some reason FF version of the event does not contain them.
<!DOCTYPE html>
<html>
<head>
<title>TH Drag Test</title>
<style>
table,td,th {
border: solid thin black;
}
</style>
<script>
function Init(){
var n= document.getElementsByTagName("th");
var j=0;
for (var i=0; i<n.length; i++){
n[i].addEventListener('drag', function (e){
document.getElementById("lbl").textContent= j++;
}, false);
}
for (var i=0; i<n.length; i++){
n[i].addEventListener('dragstart', function (e){
e.dataTransfer.setData('text/plain', 'node');
}, false);
}
}
</script>
</head>
<body onload="Init();">
<span id="lbl"></span>
<table>
<thead>
<tr>
<th draggable="true">Column A</th>
<th draggable="true">Column B</th>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</tbody>
</table>
</body>
</html>
Apparently, what you need to do is to "initialize" the drag (source.)
EDIT2:
Apparently, there's a bug in the drag event (go figure) which does not update the clientX and clientY properties (source.) They are updated on some other events, like the dragover event, however that event will fire only while the object is being dragged over a plausible drop target. A way out of such a silly situation would be something as crude as this:
<!DOCTYPE html>
<html>
<head>
<title>TH Drag Test</title>
<style>
table,td,th {
border: solid thin black;
}
</style>
<script>
var down= false;
document.onmousemove= OnMouseMove;
function Init(){
var n= document.getElementsByTagName('th');
for (var i=0; i<n.length; i++){
n[i].onmousedown= OnMouseDown;
}
document.onmouseup= OnMouseUp;
}
function OnMouseDown(e){
down= true;
}
function OnMouseUp(e){
down= false;
}
function OnMouseMove(e){
if (!down) return;
document.getElementById('lbl').textContent= e.pageX ? ('x: ' + e.pageX + ' y: ' + e.pageY) : ('x: ' + (e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft) + ' y: ' + (e.clientY + document.documentElement.scrollTop + document.body.scrollTop));
}
</script>
</head>
<body onload="Init();">
<span id="lbl"></span>
<table>
<thead>
<tr>
<th draggable="true">Column A</th>
<th draggable="true">Column B</th>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</tbody>
</table>
</body>
</html>
Firefox requires 'something' (that we call 'init' here) to be set in dragstart event to initialize the rest of drag events to occur.
This is probably because all of the DOM elements are draggable="true" by default in XUL. (reference: https://bugzilla.mozilla.org/show_bug.cgi?id=646823#c4)
Example:
<div id="something" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'node');">Drag me</div>
Chrome doesn't require such 'initialization'.
Related
I am trying to find a way to easily flip (transpose, rotate) a HTML table including moving the attributes to tags. According to http://quirksmode.org/css/css2/columns.html I can only use border, background, width and visibilty in ... is this still valid? And what about class names and event handlers that I have on the table rows?
There are also draggable columns (using jQuery-UI). Will I have to reinitialize them after flipping?
Is there any jQuery-UI plugin that takes care of all the stuff?
It looks to me as if this stack overflow question might scratch your same itch.
Here's the js fiddle mentioned in that question's answer: http://jsfiddle.net/CsgK9/2/ - I did not write this, the credit goes to: svinto
Copied the contents of that jsfiddle to this code snippet.
Hope this helps.
$("a").click(function(){
$("table").each(function() {
var $this = $(this);
var newrows = [];
$this.find("tr").each(function(){
var i = 0;
$(this).find("td").each(function(){
i++;
if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
newrows[i].append($(this));
});
});
$this.find("tr").remove();
$.each(newrows, function(){
$this.append(this);
});
});
return false;
});
td { padding:5px; border:1px solid #ccc;}
.red { color: red; }
.border td { border: 1px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="red">1</td>
<td class="red">4</td>
<td class="red">7</td>
</tr>
<tr class="border">
<td>2</td>
<td>5</td>
<td>8</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
<td>9</td>
</tr>
</table>
<p>Do it.</p>
Notice that classes put on the <tr> do get pulled off. So there is room for improvement on this answer.
This method might be closer to what you're looking for - it is another approach worth mentioning. Credit goes to Stefan Kendall
function swap( cells, x, y ){
if( x != y ){
var $cell1 = cells[y][x];
var $cell2 = cells[x][y];
$cell1.replaceWith( $cell2.clone() );
$cell2.replaceWith( $cell1.clone() );
}
}
var cells = [];
$('table').find('tr').each(function(){
var row = [];
$(this).find('td').each(function(){
row.push( $(this) );
});
cells.push( row );
});
for( var y = 0; y <= cells.length/2; y++ ){
for( var x = 0; x < cells[y].length; x++ ){
swap( cells, x, y );
}
}
.red { color: red; }
.border { border: 2px solid black; }
.blue { color: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="red">01</td><td class="red">02</td><td class="red">03</td><td>04</td>
</tr>
<tr class="blue">
<td class="border">05</td><td class="border">06</td><td class="border">07</td><td class="border">08</td>
</tr>
<tr>
<td>09</td><td>10</td><td>11</td><td>12</td>
</tr>
<tr>
<td>13</td><td>14</td><td>15</td><td>16</td>
</tr>
</tbody>
</table>
In both of these examples, so long as you keep the css classes on the <td> it will move over without a problem. I've noticed the <tr> are losing their attributes. With some small modification, I'm pretty sure you could move those also.
Hopefully this gets you closer to your goal.
I have written an html code which show a table. Now what i want to do is like that, clicking or hovering mouse over the table then the tag name will show. As i am new in jquery i am unable to organize the logic in jquery.
The following html code generate a simple table
<div class="css">
<table>
<thead>
<tr>
<th>User</th>
<th>Country</th>
<th>City</th>
<th>BithDate</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td>abc</td>
<td>abc</td>
<td>abc</td>
</tr>
<tr>
<td>cdf</td>
<td>cdf</td>
<td>cdf</td>
<td>cdf</td>
</tr>
</tbody>
</table>
</div>
the out put
Now what i want to do is like that when i click on user/country it will show: "thead: th" and when i point mouse on abc or cdf it will show: "tr: td".
what i thought to do is using click event for each tr td . but is there any other way to do that. Thanks in advance!!
Try following,
$('table').click(function(event){
// The event.target property returns which DOM element triggered the event.
//
var elem = event.target.nodeName;
// use this value to display in your way.
})
Demo
Something like this?
var $display = $('<div>TEST</div>');
$display
.css({
position: 'absolute',
background: '#fff',
border: '1px solid #000',
padding: '2px 8px'
})
.appendTo('body');
$(document).mousemove(function(e){
var offset = $display.width() / 2;
$display.css({
top: e.pageY + 20,
left: e.pageX - offset
});
});
$('*').not($display).mouseenter(function(e){
var tags = $(this).parents().map(function(){
return this.tagName;
}).get().reverse().join(': ');
$display.html(tags);
});
Fellow Gurus and Experts, I am seeking your help in attempting to move the div scroll position in the center position relative to the target Nth row (using the index) in an HTML table.
At the request of a user on this site, I have reformed my existing code to match the javascript function in question that requires further modification below.
How can I add on functionality to my existing jQuery javascript code using the function highlight() to not only highlight the specified target row, but to also move the div container scroll position in sync to the center position, relative to the target Nth row in an HTML table?
For ease of reference, I have created a fiddle as well: http://jsfiddle.net/3YbSe/1/
I am jQuery friendly :)
function highlight(tableIndex) {
// Just a simple check. If .highlight has reached the last, start again
if( (tableIndex+1) > rowCount) {
tableIndex = 0;
}
// Element exists?
if($('#data tbody tr:eq('+tableIndex+')').length > 0) {
// Remove other highlights
$('#data tbody tr').removeClass('highlight');
// Highlight your target
$('#data tbody tr:eq('+tableIndex+')').addClass('highlight');
$("#rownum").val(tableIndex+1)
}
else {
$("#rownum").val(0)
}
}
HTML Markup:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
#data_container {
height: 100px;
border: 1px solid red;
width: auto;
overflow: scroll;
}
.highlight {
background-color: rgb(255,0,0);
}
</style>
<script type="text/javascript">
window.onload = function() {
var rowCount = $('#data tbody tr').length
$("#maxrows").val(rowCount)
function highlight(tableIndex) {
// Just a simple check. If .highlight has reached the last, start again
if( (tableIndex+1) > rowCount) {
tableIndex = 0;
}
// Element exists?
if($('#data tbody tr:eq('+tableIndex+')').length > 0) {
// Remove other highlights
$('#data tbody tr').removeClass('highlight');
// Highlight your target
$('#data tbody tr:eq('+tableIndex+')').addClass('highlight');
$("#rownum").val(tableIndex+1)
}
else {
$("#rownum").val(0)
}
}
$( "#data tbody tr" ).click(function() {
highlight($(this).index());
});
}
</script>
</head>
<body>
<div id="data_container">
<table id="data" border="1" cellspacing="1" cellpadding="1">
<thead>
<tr>
<th>#</th>
<th>Color</th>
<th>Fruit</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>red</td>
<td>kiwi</td>
<td>Lindsay</td>
<td>closed</td>
</tr>
<tr>
<td>2</td>
<td>blue</td>
<td>mangos</td>
<td>Sarah</td>
<td>open</td>
</tr>
<tr>
<td>3</td>
<td>green</td>
<td>oranges</td>
<td>Joseph</td>
<td>hold</td>
</tr>
<tr>
<td>4</td>
<td>yellow</td>
<td>pears</td>
<td>Jenny</td>
<td>open</td>
</tr>
<tr>
<td>5</td>
<td>orange</td>
<td>bananas</td>
<td>Mike</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>purple</td>
<td>lemon</td>
<td>Jerry</td>
<td>open</td>
</tr>
<tr>
<td>7</td>
<td>teal</td>
<td>apples</td>
<td>Larry</td>
<td>hold</td>
</tr>
</tbody>
</table>
</div>
Row Number:
<br>
<input type="text" id="rownum"><br>
of
<br>
<input type="text" id="maxrows" readonly>
</body>
</html>
Ok, I think I figured out what you are trying to accomplish. You can use the position() function for this, and then a little bit of simple math. You will also need to give your table a position so that you can check the position of the highlighted <tr> to the table it's in instead of the container. Here's some codez:
//Scroll to cntr position
var trPos = $("tr.highlight").position();
var trCtr = ($("tr.highlight").height()) / 2;
var dataTblctr = ($("#data_container").height()) / 2;
$("#data_container").scrollTop(trPos.top - dataTblctr + trCtr);
DEMO
I try to put 2 tables in a same page using jquery plugin tablesorter ..
But if do it, my second table does not work correctly..
In my second table, i have not the header name of my second table,
You can see it here :http://jsfiddle.net/9hHx5/
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.scroller.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('table.tablesorter').tablesorter({
scrollHeight: 150,
widgets: ['zebra','scroller']
});
//Setup window.resizeEnd event
$(window).bind('resize', window_resize);
$(window).bind('resizeEnd', function (e) {
/*
IE calls resize when you modify content, so we have to unbind the resize event
so we don't end up with an infinite loop. we can rebind after we're done.
*/
$(window).unbind('resize', window_resize);
$('table.tablesorter').each(function(n, t) {
if (typeof t.resizeWidth === 'function') t.resizeWidth();
});
$(window).bind('resize', window_resize);
});
});
function window_resize() {
if (this.resize_timer) clearTimeout(this.resize_timer);
this.resize_timer = setTimeout(function () {
$(this).trigger('resizeEnd');
}
, 250
);
}
</script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="inner-header">Demo</div>
<table id="table1" cellspacing="0" cellpadding="0" class="tablesorter">
<thead>
<tr>
<th class="yr">Year</th>
<th>Artist</th>
<th>Single</th>
<th>Album</th></tr>
</thead>
<tbody>
<tr><td class="yr">1979</td><td>Specials</td><td>Gangsters</td><td>Non-album single</td></tr>
<tr><td class="yr">1979</td><td>Specials</td><td>A Message to You, Rudy</td><td>Specials </td></tr>
<tr><td class="yr">1980</td><td>Specials</td><td>Too Much Too Young</td><td>Specials</td></tr>
<tr><td class="yr">1980</td><td>Specials</td><td>Rat Race</td><td>Non-album single</td></tr>
<tr><td class="yr">1980</td><td>Specials</td><td>Stereotype</td><td>More Specials</td></tr>
<tr><td class="yr">1980</td><td>Specials</td><td>Do Nothing</td><td>More Specials</td></tr>
</tbody>
</table>
<table id="table2" cellspacing="0" cellpadding="0" class="tablesorter">
<thead>
<tr>
<th>People</th><th>Age</th><th>Birthday</th>
</thead>
<tbody>
<tr>
<td class="yr">XYZ</td><td>12</td><td>12/15/2012</td></tr>
<tr>
<td class="yr">RZE</td><td>36</td><td>12/12/1985</td></tr>
<tr>
<td class="yr">HFF</td> <td>36</td><td>01/02/1985</td>
</tr>
</tbody>
</table>
</body>
</html>
Please if someone can help me
The problem appears to be a bug in the scroller widget code:
Change this line:
var $hdr = $('<table class="' + $tbl.attr('class') + '" cellpadding=0 cellspacing=0><thead>' + $('thead', table[0]).html() + '<thead></table>');
to this (it's just this part $('thead', $tbl).html() that changed)
var $hdr = $('<table class="' + $tbl.attr('class') + '" cellpadding=0 cellspacing=0><thead>' + $('thead', $tbl).html() + '<thead></table>');
and it fixes the problem.
I've included that correction in this updated demo.
I would also like to suggest you try out my fork of tablesorter which includes lots of improvements, as well as this updated scroller widget (which still has some problems that needs fixing).
When I mouseover one TD in a row I want all the TDs to change background color at the same time, then reverse on mouseout.
How do I do this?
In CSS you could do
tr td { background-color: white }
tr:hover td { background-color: black };
or just
tr { background-color: white }
tr:hover { background-color: black };
if the tds don't have their own background color.
Both should make the row black on mouseover, and white otherwise.
You could also do it in Javascript of course, but that isn't necessary (except for IE6, which doesn't understand the :hover pseudo-class on anything but <a> tags)
var tds = document.getElementsByTagName("td");
for(var i = 0; i < tds.length; i++) {
tds[i].onmouseover = function() {
this.parentNode.style.backgroundColor = "#ff0000";
}
tds[i].onmouseout = function() {
this.parentNode.style.backgroundColor = "#fff";
}
}
This actually changes the background colour of the parent tr, not each td, but it could be easily modified to do so. You could also attach the events to the tr elements instead of the td elements, and then you wouldn't have to use parentNode, but I don't know whether you need to do other stuff in the event handler specifically related to the td.
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th></th>
<th>Water</th>
<th>Air</th>
<th>Fire</th>
<th>Earth</th>
</tr>
<tr onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)">
<td>Spring thunderclouds</td>
<td>Yes</td>
<td>Yes</td>
<td>No</td>
<td>No</td>
</tr>
<tr onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)">
<td>Roasting chestnuts</td>
<td>No</td>
<td>No</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)">
<td>Winter snowbanks</td>
<td>Yes</td>
<td>Yes</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)">
<td>Ice cream on a hot summer day</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</table>
<script type="text/javascript">
// Specify the normal table row background color
// and the background color for when the mouse
// hovers over the table row.
var TableBackgroundNormalColor = "#ffffff";
var TableBackgroundMouseoverColor = "#9999ff";
// These two functions need no customization.
function ChangeBackgroundColor(row) {
row.style.backgroundColor = TableBackgroundMouseoverColor;
}
function RestoreBackgroundColor(row) {
row.style.backgroundColor = TableBackgroundNormalColor;
}
</script>
I don't know what your exact use-case is, but for such tasks I would stick to CSS only:
td {
background: #f00; }
tr:hover td {
background: #fc0; }
http://jsfiddle.net/feeela/53JBV/
<td onmouseover="changeColorTo(this.parentNode, put color here)" onmouseout="changeColorTo(this.parentNode, put color here)">
...
<script>
function changeColorTo(parent, color)
{
var i, tdArray = parent.getElementsByTagName('td');
for(i in tdArray)
{
tdArray[i].style.backgroundColor = color;
}
}
</script>
This is faster than using jQuery, also, not everybody uses jQuery.
This jsFiddle I created shows you how to do it with jQuery.
I am using jQuery's hover event to handle what you are trying to do.
If you want a framework-agnostic solution, you can try this:
function highlightCells(tableRow) {
for (var index = 0; index < tableRow.childNodes.length; index++) {
var row = tableRow.childNodes[index];
if (row.style) {
row.style.backgroundColor = "red";
}
}
}
function unhighlightCells(tableRow) {
for (var index = 0; index < tableRow.childNodes.length; index++) {
var row = tableRow.childNodes[index];
if (row.style) {
row.style.backgroundColor = "white";
}
}
}
Example: http://jsfiddle.net/9nh9a/
Though practically speaking, wouldn't it be simpler to just bind your listener to the <tr> elements instead of the <td> elements? Is there some reason you want to listen only on the <td> elements?
<style type="text/css">
.table1 tr:hover td{
background-color:#ccc;
}
</style>
<table class="table1">
<tr>
<td>cell 1-1</td>
<td>cell 1-2</td>
<td>cell 1-3</td>
<td>cell 1-4</td>
</tr>
<tr>
<td>cell 2-1</td>
<td>cell 2-2</td>
<td>cell 2-3</td>
<td>cell 2-4</td>
</tr>
<tr>
<td>cell 2-1</td>
<td>cell 2-2</td>
<td>cell 2-3</td>
<td>cell 2-4</td>
</tr>
</table>
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
You can use code like this:
HTML
<table>
<tr>
<td>cell1,1</td>
<td>cell1,2</td>
<td>cell1,3</td>
</tr>
<tr>
<td>cell2,1</td>
<td>cell2,2</td>
<td>cell2,3</td>
</tr>
</table>
Style sheet
.hover {
background-color: silver;
}
JavaScript
$("td").hover(
function () {
$(this).parent("tr").addClass("hover");
},
function () {
$(this).parent("tr").removeClass("hover");
}
);
The .hover class obviously can be styled as you like.
Regards and happy coding!
In jQuery:
$('td').mouseover(function( obj ) {
$(obj).parent().children().css("background-color","green");
});
$('td').mouseout(function( obj ) {
$(obj).parent().children().css("background-color","red");
});
Or in Javascript:
var tds = document.getElementsByTagName( "td" );
for( var i = 0; i < tds.length; i++ ) {
tds[i].addEventListener("mouseover",function(){
var children = this.parentNode.getElementsByTagName("td");
for( var j = 0; j < children.length; j++ )
children[j].style.background-color = "green";
});
tds[i].addEventListener("mouseout",function(){
var children = this.parentNode.getElementsByTagName("td");
for( var j = 0; j < children.length; j++ )
children[j].style.background-color = "red";
});
}
When I did it in all java script I did it like this
<!DOCTYPE html>
<html>
<head>
<title>Chapter 11 Problem 1</title>
<script>
function blueText()
{
var paragraphObject = document.
getElementById("Paragraph");
paragraphObject.style.color = 'blue',
paragraphObject.style.background= 'white';
}
function whiteText()
{
var paragraphObject = document.
getElementById("Paragraph");
paragraphObject.style.color = 'white',
paragraphObject.style.background = 'blue';
}
</script>
</head>
<body>
<p id="Paragraph" style = "color:white; background-color:blue";
onmouseover="blueText()" onmouseout="whiteText()">
Paragraph Text
</p>
</body>
</html>
I really hope this doesn't garble it all up