Search Results

Search found 133 results on 6 pages for 'onmouseout'.

Page 1/6 | 1 2 3 4 5 6  | Next Page >

• How to save text to a div using JavaScript onmouseout

  - by Adam

  Good morning all. I have a div that I'm able to save text to when I click a save button but what I would like is if the text would just automatically save on an onmouseout event. For example: I have a div and two buttons (Save and Cancel). The user is currently able to mouse over the current text data inside the div, click on the text and they can then edit said text. The only way they can save this text is by clicking the save button. Is there a way to use onmouseout to save the text so that the user simply has to click and edit the text, then click away and have it saved? Thanks!

  Read the article

• jQuery onmouseover + onmouseout / hover on two different divs

  - by ahmet2106

  Hello everybody, I've got a Problem: Here a part of my HTML: <div id="div_1"> Here Hover </div> <div id="div_2"> Here content to show </div> And here a part of my jQuery Script: jQuery('#div_2').hide(); jQuery('#div_1').onmouseover(function() { jQuery('#div_2').fadeIn(); }).onmouseout(function(){ jQuery('#div_2').fadeOut(); }); The Problem: If i hover on the div_1, the div_2 is shown, if i hover out, the div_2 is hidden, but: If i hover first on div_1 and then go over div_2, the div_2 is hidden fast. I've tried this with jQuery.addClass(); after mouseout in div_1, but nothing is changing. I dont want do make the second div in the first div... Is there another way with jQuery? Thx Ahmet

  Read the article

• prevent onmouseout when hovering child element of the parent absolute div

  - by John

  Hi I am having trouble with the onmouseout function in a absolute positoned div. When the mouse hits a child element in the div, the mouseout event fires, but I do not want it to fire until the mouse is out of the parent, absolute div. How can I prevent the mouseout event from firing when it hits a child element WITHOUT jquery. I know this has something to do with event bubbling, but I am having no luck on finding out how to work this out. A similar post I found here: How to disable mouseout events triggered by child elements? How ever that solution uses jquery.

  Read the article

• Internet Explorer and onMouseOver/onMouseOut

  - by Thorbjørn Reimann-Andersen

  Hi all, I have tried looking a similar question on here but couldnt find one so here it comes: I have this html (ignore the "+whatever+@", its in a codebehind file so im putting some variables that im getting from there): <div id='ReferenceContainer"+UniqueID+@"' style='background-color:"+BackcolourOFF+@"; width:"+CompWidth+@"; height:"+CompHeight+@";'> <div id='Reference"+UniqueID+@"' style='width:"+CompWidth+@"; height:"+CompHeight+@"; '> <div id='RefTextContainer"+UniqueID+@"' style='float:left; width:"+CompWidth+@"; height:"+CompHeight+@"; ' > <div id='RefTitleCon' style='margin-top:"+RefTitleMargin+@"px; color:"+RefTitleColor+@"; z-index:-1;' ><p><b>"+RefTitle+@"</b></p> </div> <div id='RefTextCon'><p>"+RefText+@"</p></div> </div> <div id='RefPicContainer"+UniqueID+@"' style='float:right;'> <img id='RefImg"+UniqueID+@"first' class='first' name='RefImg"+UniqueID+@"' src=" + StartImg + @" style='position:absolute;' ></img> <img id='RefImg"+UniqueID+@"second' class='second' name='RefImg"+UniqueID+@"' src=" + AltImg + @" style='display:none;' ></img> </div> </div> <div id='ScriptContainer"+UniqueID+@"' style='width:"+CompWidth+@"; height:"+CompHeight+@"; position:relative; top:-"+CompHeight+@"px; left:0px;' onMouseOver='ChangeBackcolourON"+UniqueID+@"()' onMouseOut='ChangeBackcolourOFF"+UniqueID+@"()'></div> </div> Now in firefox, everything works just perfect. The div "ScriptContainer" sits in front of the whole thing and when the mouse enters or leaves the functions work exactly as they should. But IE8 places the text in front of everything and then the functions do not work as i would like them to. "ChangeBackcolourOFF" gets called every time the mouse enters the text, which sits in front of everything and "ChangeBackcolourON" gets called every time the mouse enters the "Scriptcontainer" from the text. So i either need to figure out how to force the text to be placed behind the "Scriptcontainer" or some other solutions. I appreciate you answers

  Read the article

• sub menu border calls onmouseout event

  - by insanepaul

  I've created a simple menu and submenu with tags(not allowed to use ul elements). To access the submenu the user hovers their mouse over the menu item. I use the onmouseover and onmouseout events to either show or hide the sub menu depending on which item is selected. A pipe (|) is used to seperate each submenu item and this is what is causing me problems. When a user hovers their mouse above the pipe character the subMenu div calls the onmouseout event which is not what I want. So I added padding around the pipe character and a minus margin so that there were no gaps between the pipe character and the other elements. This worked for all browsers including IE8. But in IE7 (I haven't tested IE6 yet) the submenu div calls the onmouseout event when I touch the top bit of either the left or right border of the pipe character span element. <div id="subMenu" onmouseout="hideSubMenu()" > <div id="opinionSubMenu" onmouseover="showOpinionSubMenu()"> <a id="Blogs" href="HTMLNew.htm">BLOGS</a> <span class="SubMenuDelimiter">|</span> <a id="Comments" href="HTMLNew.htm">COMMENTS</a> <span class="SubMenuDelimiter">|</span> <a id="Views" href="HTMLNew.htm">VIEWS</a> </div> <div id="learningSubMenu" onmouseover="showLearningSubMenu()"> <a id="Articles" href="HTMLNew.htm">ARTICLES</a> <span class="SubMenuDelimiter">|</span> <a id="CoursesCases" href="HTMLNew.htm">COURSES & CASES</a> <span class="SubMenuDelimiter">|</span> <a id="PracticeImpact" href="HTMLNew.htm">PRACTICE IMPACT</a> </div> </div> This is my css class #subMenu{ padding:10px 0px; background-color:#F58F2D; font-weight:normal; text-decoration:none; font-family:Lucida Sans Unicode; font-size:14px; float:left; width:100%; display:none;} #Blogs, #Comments, #Views, #Articles { padding:10px 5px; background:none repeat scroll 0 0 transparent; color:#000000; font-weight:normal; text-decoration:none; border:solid 1px black;} #Blogs:hover, #Comments:hover, #Views:hover, #Articles:hover{ color:#ffffff; text-decoration:none;} .SubMenuDelimiter{ padding:10px 5px; margin:10px -5px;}

  Read the article

• Guaranteeing the onmouseout event to fire

  - by n3rd

  Hello everybody, I'm currently developing a web application and have run into a little problem. I'm using ExtJS, but I believe this to be a general JS question. When the cursor enters an HTML element, the onmouseover event is fired, when the cursor leaves that element, onmouseout is triggered. So far, so good. Unfortunately, it seems one can't fully rely on this behaviour. Very quick mouse movements can cause the event not to fire (as does repositioning the cursor with a pen tablet, for example). What are the best practices to handle these issues? Do I need to monitor all onmousemove events and manually keep track of where the cursor was last and fire the appropriate onmouseout event myself?

  Read the article

• about onmouseout event.

  - by lazyanno

  as follow codes: <div id="outerBox" style="border:1px solid red;width:300;height:300" onmouseout="alert('out')"> <div id="innerBox" style="border:1px solid blue;width:50;height:50">inner</div> </div> why when i move mouse on the "innerBox", it was trigger alert('out') ? i want mouse out "outerBox" trigger alert('out') only, mouse on "innerBox" don't trigger alert. hot to do this? thanks all :)

  Read the article

• about onmouseout event.please help.

  - by lazyanno

  as follow codes: <div id="outerBox" style="border:1px solid red;width:300;height:300" onmouseout="alert('out')"> <div id="innerBox" style="border:1px solid blue;width:50;height:50">inner</div> </div> why when i move mouse on the "innerBox", it was trigger alert('out') ? i want mouse out "outerBox" trigger alert('out') only, mouse on "innerBox" don't trigger alert. hot to do this? thanks all :)

  Read the article

• #include file vs iframe or is there a better way

  - by Laurence Burke

  ok simple question about including large mostly static html and asp.net code I am using as of right now #include and I was wondering if iframes would be a better way of handling what I wish to do or is there a better way to do it. here is the current way i'm handling the includes default.aspx <head id="YafHead" runat="server"> <meta id="YafMetaDescription" runat="server" name="description" content="Yet Another Forum.NET -- A bulletin board system written in ASP.NET" /> <meta id="YafMetaKeywords" runat="server" name="keywords" content="Yet Another Forum.net, Forum, ASP.NET, BB, Bulletin Board, opensource" /> <title>Forums</title> <style type="text/css"> .sbutton { background-color:#361800; border:medium none; border-collapse:collapse; color:#FFFFFF; font-family:Tahoma,Arial,Helvetica; font-size:10px; font-weight:bold; vertical-align:middle; } </style> <link href="images/favicon.ico" type="image/ico" rel="shortcut icon" /> <link rel="stylesheet" href="navTopStyle.css" type="text/css" media="screen" /> </head> <body style="margin: 0"> <form id="form1" runat="server" enctype="multipart/form-data"> <table align="center" style="background-color: #ffffff" cellpadding="0" cellspacing="0" width="790px"> <tr> <td> <!--#include file="CComHeader.html"--> </td> </tr> <tr> <td> <YAF:Forum runat="server" ID="forum"></YAF:Forum> </td> </tr> </table> </form> </body> </html> CComHeader.html <table cellpadding="0" cellspacing="0" width="790px"> <tr> <td align="left"> <img src="images/smokechair.jpg" alt="Cigar.com" /><img src="images/cigarcomTitle.gif" alt="Cigar.com" /> </td> <td align="right"> <table width="310px" height="73px" cellpadding="0" cellspacing="0" style="padding-right: 6px"> <tr> <td width="109px" class="welcome" align="left"> Welcome to Cigar.com </td> <td width="195px" class="welcome" align="left"> <div runat="server" id="divUser"> <table cellpadding="0" cellspacing="0" align="right"> <tr> <td width="126px" align="left"> <asp:Label ID="lblUserName" CssClass="welcome" runat="server"></asp:Label></td> <td width="65px" align="left"> <a href="http://www.cigar.com/cs/languages/en-US/docs/faq.aspx">Help</a></td> </tr> </table> </div> <div runat="server" id="divGuest"> <a href="OutsideLogin.aspx">Sign In</a> | <a href="OutsideLogin.aspx">Join</a> | <a href="http://www.cigar.com/cs/languages/en-US/docs/faq.aspx">Help</a> </div> </td> </tr> <tr> <td colspan="2"> <table cellpadding="0" cellspacing="0" > <tr> <td width="234px" align="right"> <asp:DropDownList ID="ddlCriteria" runat="server"> <asp:ListItem>Posts</asp:ListItem> <asp:ListItem>Posted By</asp:ListItem> </asp:DropDownList> <asp:TextBox Width="120px" ID="txtSearch" runat="server"></asp:TextBox> </td> <td width="70px" align="center"> <asp:Button ID="btnSearch" runat="server" Text="Search" CssClass="sbutton" OnClick="btnSearch_Click" /> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td colspan="2"> <!--#include file="commonTabBar.html" --> </td> </tr> </table> commonTabBar.html <%-- CommonTabBar firebugged from Cigar.com--%> <div class="CommonTabBar"> <script language="javascript"> function tabOver(e) { if (e.className != 'CommonSimpleTabStripSelectedTab') e.className = 'CommonSimpleTabStripTabHover'; } function tabOut(e) { if (e.className != 'CommonSimpleTabStripSelectedTab') e.className = 'CommonSimpleTabStripTab'; } function tabOverSub(e) { if (e.className != 'CommonSimpleTabStripSelectedTabSub') e.className = 'CommonSimpleTabStripTabHoverSub'; } function tabOutSub(e) { if (e.className != 'CommonSimpleTabStripSelectedTabSub') e.className = 'CommonSimpleTabStripTabSub'; } </script> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr valign="middle"> <td class="CommonSimpleTabStripTab" style="padding: 0px"> &nbsp; </td> <td class="CommonSimpleTabStripTab" onmouseover="tabOver(this);" onmouseout="tabOut(this);" onclick="window.location = 'http://www.cigar.com/index.asp'"> <a style="float: right; display: block; height: 30px; line-height: 30px; padding-left: 12px; padding-right: 12px; vertical-align: middle;" href="http://www.cigar.com/index.asp"> Home</a> </td> <td class="CommonSimpleTabStripTab" onmouseover="tabOver(this); document.getElementById('ComDropDown2').style.display = 'inline';" onmouseout="tabOut(this); document.getElementById('ComDropDown2').style.display = 'none';"> <a style="float: right; display: block; height: 30px; line-height: 30px; padding-left: 12px; padding-right: 12px; vertical-align: middle;" href="http://www.cigar.com/cigars/index.asp"> Cigars</a> <div id="ComDropDown2" style="border: 1px solid rgb(71, 42, 24); margin: 28px 0px 0px; display: none; background-color: rgb(235, 230, 208); color: rgb(71, 42, 24); position: absolute; float: left; z-index: 200;" onmouseover="document.getElementById('ComDropDown2').style.display = 'inline';" onmouseout="document.getElementById('ComDropDown2').style.display = 'none';"> <ul style="margin: 0px; padding: 0px; width: 100px;"> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/cigars/index.asp'"><a href="http://www.cigar.com/cigars/index.asp" style="line-height: 25px; color: rgb(71, 42, 24);" id="BrandsLink">Brands </a> </li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/cigars/privatelabel.asp?brand=419'"> <a href="http://www.cigar.com/cigars/privatelabel.asp?brand=419" style="line-height: 25px; color: rgb(71, 42, 24);" id="SamplersLink">Aging Room </a></li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/cigars/samplers.asp'"><a href="http://www.cigar.com/cigars/samplers.asp" style="line-height: 25px; color: rgb(71, 42, 24);" id="SamplersLink">Samplers </a></li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/cigars/suggestions.asp'"><a href="http://www.cigar.com/cigars/suggestions.asp" style="line-height: 25px; color: rgb(71, 42, 24);" id="SuggestionsLink">Suggestions </a></li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/DailyDeal/ccCigarDeals.asp'"><a href="http://www.cigar.com/DailyDeal/ccCigarDeals.asp" style="line-height: 25px; color: rgb(71, 42, 24);" id="SuggestionsLink">Suggestions </a></li> </ul> </div> </td> <td class="CommonSimpleTabStripTab" onmouseover="tabOver(this); document.getElementById('ComDropDown3').style.display = 'inline';" onmouseout="tabOut(this); document.getElementById('ComDropDown3').style.display = 'none';"> <a style="float: right; display: block; height: 30px; line-height: 30px; padding-left: 12px; padding-right: 12px; vertical-align: middle;" href="http://www.cigar.com/cigars/samplers.asp"> Samplers</a> <div id="ComDropDown3" style="border: 1px solid rgb(71, 42, 24); margin: 28px 0px 0px; display: none; background-color: rgb(235, 230, 208); color: rgb(71, 42, 24); position: absolute; float: left; z-index: 200;" onmouseover="document.getElementById('ComDropDown3').style.display = 'inline';" onmouseout="document.getElementById('ComDropDown3').style.display = 'none';"> <ul style="margin: 0px; padding: 0px; width: 100px;"> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/cigars/viewsamplers.asp?subcatid=samp_var'"> <a href="http://www.cigar.com/cigars/viewsamplers.asp?subcatid=samp_var" style="line-height: 25px; color: rgb(71, 42, 24);" id="Variety SamplersLink">Variety Samplers </a> </li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/cigars/viewsamplers.asp?subcatid=gift_samp'"> <a href="http://www.cigar.com/cigars/viewsamplers.asp?subcatid=gift_samp" style="line-height: 25px; color: rgb(71, 42, 24);" id="Gift SamplersLink">Gift Samplers </a></li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/cigars/createSampler.asp'"><a href="http://www.cigar.com/cigars/createSampler.asp" style="line-height: 25px; color: rgb(71, 42, 24);" id="Custom SamplerLink">Custom Sampler </a></li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/cigars/viewsamplers.asp?subcatid=Feat%20Samp'"> <a href="http://www.cigar.com/cigars/viewsamplers.asp?subcatid=Feat%20Samp" style="line-height: 25px; color: rgb(71, 42, 24);" id="Featured SamplersLink">Featured Samplers </a> </li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/cigars/YouPickOffer.asp'"><a href="http://www.cigar.com/cigars/YouPickOffer.asp" style="line-height: 25px; color: rgb(71, 42, 24);" id="Brand SamplersLink">U Pick 2 Offer </a></li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/cigars/exclusiveCustomSampler.asp'"> <a href="http://www.cigar.com/cigars/exclusiveCustomSampler.asp" style="line-height: 25px; color: rgb(71, 42, 24);" id="Brand SamplersLink">Gurkha Sampler </a></li> </ul> </div> </td> <td class="CommonSimpleTabStripTab" onmouseover="tabOver(this); document.getElementById('ComDropDown4').style.display = 'inline';" onmouseout="tabOut(this); document.getElementById('ComDropDown4').style.display = 'none';"> <a style="float: right; display: block; height: 30px; line-height: 30px; padding-left: 12px; padding-right: 12px; vertical-align: middle;" href="http://www.cigar.com/gifts/index.asp"> Gifts</a> <div id="ComDropDown4" style="border: 1px solid rgb(71, 42, 24); margin: 28px 0px 0px; display: none; background-color: rgb(235, 230, 208); color: rgb(71, 42, 24); position: absolute; float: left; z-index: 200;" onmouseover="document.getElementById('ComDropDown4').style.display = 'inline';" onmouseout="document.getElementById('ComDropDown4').style.display = 'none';"> <ul style="margin: 0px; padding: 0px; width: 100px;"> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/gifts/viewgifts.asp?subcatid=gift_sets'"> <a href="http://www.cigar.com/gifts/viewgifts.asp?subcatid=gift_sets" style="line-height: 25px; color: rgb(71, 42, 24);" id="Gift SetsLink">Best Sellers </a></li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/cigars/viewsamplers.asp?subcatid=gift_samp'"> <a href="http://www.cigar.com/cigars/viewsamplers.asp?subcatid=gift_samp" style="line-height: 25px; color: rgb(71, 42, 24);" id="Gift SamplersLink">Gift Samplers </a></li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/accessories/index.asp'"><a href="http://www.cigar.com/accessories/index.asp" style="line-height: 25px; color: rgb(71, 42, 24);" id="AccesoriesLink">Accesories </a></li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/club/index.asp'"><a href="http://www.cigar.com/club/index.asp" style="line-height: 25px; color: rgb(71, 42, 24);" id="Cigar of the MonthLink">Cigar of the Month </a></li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/gifts/certificates.asp'"><a href="http://www.cigar.com/gifts/certificates.asp" style="line-height: 25px; color: rgb(71, 42, 24);" id="Cigar of the MonthLink">Gift Certificates </a></li> </ul> </div> </td> <td class="CommonSimpleTabStripTab" onmouseover="tabOver(this); document.getElementById('ComDropDown5').style.display = 'inline';" onmouseout="tabOut(this); document.getElementById('ComDropDown5').style.display = 'none';"> <a style="float: right; display: block; height: 30px; line-height: 30px; padding-left: 12px; padding-right: 12px; vertical-align: middle;" href="http://www.cigar.com/accessories/index.asp"> Accessories</a> <div id="ComDropDown5" style="border: 1px solid rgb(71, 42, 24); margin: 28px 0px 0px; display: none; background-color: rgb(235, 230, 208); color: rgb(71, 42, 24); position: absolute; float: left; z-index: 200;" onmouseover="document.getElementById('ComDropDown5').style.display = 'inline';" onmouseout="document.getElementById('ComDropDown5').style.display = 'none';"> <ul style="margin: 0px; padding: 0px; width: 100px;"> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/accessories/viewaccessories.asp?subcatid=acc_hum'"> <a href="http://www.cigar.com/accessories/viewaccessories.asp?subcatid=acc_hum" style="line-height: 25px; color: rgb(71, 42, 24);" id="HumidorsLink">Humidors </a></li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/accessories/viewaccessories.asp?subcatid=acc_cutt'"> <a href="http://www.cigar.com/accessories/viewaccessories.asp?subcatid=acc_cutt" style="line-height: 25px; color: rgb(71, 42, 24);" id="CuttersLink">Cutters </a></li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/accessories/viewaccessories.asp?subcatid=acc_lite'"> <a href="http://www.cigar.com/accessories/viewaccessories.asp?subcatid=acc_lite" style="line-height: 25px; color: rgb(71, 42, 24);" id="LightersLink">Lighters </a></li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/accessories/viewaccessories.asp?subcatid=acc_case'"> <a href="http://www.cigar.com/accessories/viewaccessories.asp?subcatid=acc_case" style="line-height: 25px; color: rgb(71, 42, 24);" id="CasesLink">Cases </a> </li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/accessories/viewaccessories.asp?subcatid=acc_humf'"> <a href="http://www.cigar.com/accessories/viewaccessories.asp?subcatid=acc_humf" style="line-height: 25px; color: rgb(71, 42, 24);" id="HumidificationLink">Humidification </a></li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/accessories/viewaccessories.asp?subcatid=acc_book'"> <a href="http://www.cigar.com/accessories/viewaccessories.asp?subcatid=acc_book" style="line-height: 25px; color: rgb(71, 42, 24);" id="BooksLink">Books </a> </li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/accessories/viewaccessories.asp?subcatid=acc_ash'"> <a href="http://www.cigar.com/accessories/viewaccessories.asp?subcatid=acc_ash" style="line-height: 25px; color: rgb(71, 42, 24);" id="AshtraysLink">Ashtrays </a></li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/accessories/viewaccessories.asp?subcatid=acc_misc'"> <a href="http://www.cigar.com/accessories/viewaccessories.asp?subcatid=acc_misc" style="line-height: 25px; color: rgb(71, 42, 24);" id="OtherLink">Other </a> </li> </ul> </div> </td> <td class="CommonSimpleTabStripTab" onmouseover="tabOver(this);" onmouseout="tabOut(this);" onclick="window.location = 'http://www.cigar.com/sales/index.asp'"> <a style="float: right; display: block; height: 30px; line-height: 30px; padding-left: 12px; padding-right: 12px; vertical-align: middle;" href="http://www.cigar.com/sales/index.asp"> Sales</a> </td> <td class="CommonSimpleTabStripTab" onmouseover="tabOver(this); document.getElementById('ComDropDown8').style.display = 'inline';" onmouseout="tabOut(this); document.getElementById('ComDropDown8').style.display = 'none';"> <a style="float: right; display: block; height: 30px; line-height: 30px; padding-left: 12px; padding-right: 12px; vertical-align: middle;" href="http://www.cigar.com/cs/">Community</a> <div id="ComDropDown8" style="border: 1px solid rgb(71, 42, 24); margin: 28px 0px 0px; display: none; background-color: rgb(235, 230, 208); color: rgb(71, 42, 24); position: absolute; float: left; z-index: 200;" onmouseover="document.getElementById('ComDropDown8').style.display = 'inline';" onmouseout="document.getElementById('ComDropDown8').style.display = 'none';"> <ul style="margin: 0px; padding: 0px; width: 100px;"> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/cs/forums/'"><a href="http://www.cigar.com/cs/forums/" style="line-height: 25px; color: rgb(71, 42, 24);" id="ForumsLink">Forums </a> </li> <li class="CommonSimpleTabStripTabSub" style="margin: 0px; padding: 3px; text-align: left; list-style: none outside none;" onmouseover="tabOverSub(this); " onmouseout="tabOutSub(this); " onclick="window.location = 'http://www.cigar.com/cs/blogs/'"><a href="http://w

  Read the article

• jquery js how to avoid massive onmouseover onmouseout firing

  - by stephan

  i have a table with some columns. in each of them is a picture where i have a onmouseover onmouseout event on it, which show a message in a div and hide the msg. my problem is - after a user goes quick from left to right (and moving) over a lot o images. all mouseover/out events of the images where executed, which looks stupid... is it possible to rearrange the internal event stack to avoid this? so that he executes only the current (mostly the first event) - and than the last one, if it is not same type eg. if mouseover over first image is executed and mouse moving position stops over an image 3times next the first one. i can avoid all other events firing, because the mouse stopped over an image and the mouseover is like the one where i stopped with the mouse. how can i avoid this multiple event firing?!

  Read the article

• Problem with onMouseOut event with select box options (IE)

  - by nik

  Hello All, The problem I am facing with below code is that whenever I try to select any option from the select box, the mouseout event executed (in IE, Mozilla doing gr8) and option disappear. How can one get over this bug. <select name="ed" id="ed" dir="ltr" style="width:200px;overflow:hidden;" onMouseOver="this.style.width='auto'" onMouseOut="this.style.width='200px';"> <option value="1" selected="selected">click here</option> <option value="1">Samuel Jackson</option> <option value="2">David Nalog</option> <option value="3">This one is a real real big name</option> </select>

  Read the article

• Remove Attributes onmouseover and onmouseout

  - by Abs

  Hello all, I am trying to make use of JQuery's remove attribute like this: $('#rom-img_1').removeAttr('mouseover'); $('#rom-img_2').removeAttr('mouseout'); However, it does not remove the effects of the events as the events are still triggered on mouseover and on mouseout. I have tried adding "on" before the events names too but JQuery doesn't use it like that. Why isn't this working and how can I remove those attributes. This is a bit of the HTML: <div onmouseout="$('#heart_401').css({'display':'none'});" onmouseover="$('#heart_401').css({'display':'block'});" id="row-img_11"></div> Thanks all for any help

  Read the article

• calling and killing a parent function with onmouseover and onmouseout events

  - by Zoolu

  I want to call the function upon the onmouseover="ParentFunction();" then kill it onmouseout="killParent();". Note: in my code the parent function is called initiate(); and the killer function is called reset(); which lies outside the parent function at the bottom of the script. I don't know how to kill the intitiate() function my first guess was: var reset = function(){ return initiate(); }; here's my source code: any suggestions and help appreciated. <!doctype html> <html> <head> <title> function/event prototype </title> <link rel="stylesheet" type="text/css" href="styling.css" /> </head> <body> <h2> <em>Fantastical place<br/>prototype</em> </h2> <div id="button-container"> <div id="button-box"> <button id="activate" onmouseover="initiate()" onmouseout="reset();" width="50px" height="50px" title="Activate"> </button> </div> <div id="text-box"> </div> </div> <div id="container"> <canvas id="playground" width="200px" height="250px"> </canvas> <canvas id="face" width="400px" height="200px"> </canvas> <!-- <div id="clear"> </div> --> </div> <script> alert("Welcome, there are x entries as of" +""+new Date().getHours()); //global scope var i=0; var c1 = []; //c is short for collect var c2 = []; var c3 = []; var c4 = []; var c5 = []; var c6 = []; var initiate = function(){ //the button that triggers the program var timer = setInterval(function(){clock()},90); //copy this block for ref. function clock(){ i+=1; var a = Math.round(Math.random()*200); var b = Math.round(Math.random()*250); var c = Math.round(Math.random()*200); var d = Math.round(Math.random()*250); var e = Math.round(Math.random()*200); var f = Math.round(Math.random()*250); c1.push(a); c2.push(b); c3.push(c); c4.push(d); c5.push(e); c6.push(f); // document.write(i); var c = document.getElementById("playground"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(c3[i-2], c4[i-2]); ctx.bezierCurveTo(c1[i-2],c2[i-2],c5[i-2],c6[i-2],c3[i-1], c4[i-1]); // ctx.lineTo(c3[i-1], c4[i-1]); if(a<200){ ctx.strokeStyle="#FF33CC"; } else if(a<400){ ctx.strokeStyle="#FF33aa"; } else{ ctx.strokeStyle="#FF3388"; } ctx.stroke(); document.getElementById("text-box").innerHTML=i+"<p>Thoughts.</p>"; if(i===20){ //alert("15 reached"); clearInterval(timer);//to clearInterval must be using a global scoped variable. return; } }; //end of clock //setInterval(clock,150); var targetFace = document.getElementById("face"); var face = targetFace.getContext("2d"); var faceTimer = setInterval(function(){faceAnim()},80); //copy this block for ref. global scoped. function faceAnim(){ face.beginPath(); face.strokeStyle="#FF33CC"; face.moveTo(100,104); //eye line face.bezierCurveTo(150,125,250,125,300,104); face.moveTo(200,1); //centre line face.lineTo(200,400); face.moveTo(125,111);//left eye lid face.bezierCurveTo(160,135,170,130,185,120); face.moveTo(150,116);//left eye face.bezierCurveTo(155,125,165,125,170,118); face.moveTo(275,111);//right eye lid face.bezierCurveTo(240,135,230,130,215,120); face.moveTo(250,116);//right eye face.bezierCurveTo(245,125,235,125,230,118); face.moveTo(195, 118); //left nose face.lineTo(190, 160); face.lineTo(200,170); face.moveTo(190,160); //left nostroll face.lineTo(180,160); face.lineTo(191,154); face.moveTo(180,160); //left lower nostrol face.lineTo(200,170); face.moveTo(205, 118); //right nose face.lineTo(210, 160); face.lineTo(200,170); face.moveTo(210,160); //right nostroll face.lineTo(220,160); face.lineTo(209,154); face.moveTo(220,160); //right lower nostrol face.lineTo(200,170); face.moveTo(200,140); //outer triad face.lineTo(170, 100); face.lineTo(230, 100); face.lineTo(200, 140); face.moveTo(200,145); //outer triad drop shadow face.lineTo(170, 100); face.lineTo(230, 100); face.lineTo(200, 145); face.moveTo(200,130); //inner triad face.lineTo(180, 105); face.lineTo(220, 105); face.lineTo(200, 130); //face.lineWidth =0.6; face.moveTo(280,111);//outer right eye lid face.bezierCurveTo(240,140,230,135,210,120); face.moveTo(120,111);//outer left eye lid face.bezierCurveTo(160,140,170,135,190,120); face.moveTo(162,174); //upper mouth line face.bezierCurveTo(170,180,230,180,238,174); face.moveTo(165,175); //mouth line bottom face.bezierCurveTo(190,Math.floor(Math.random()*25+180),210,Math.floor(Math.random()*25+180),235,175); face.moveTo(232,204); //head shape face.lineTo(340, 20); face.moveTo(168,204); //head shape face.lineTo(60, 20); face.stroke(); //exicute all co-ords. }; //end of face anim var clearFace = function(){ document.getElementById('face').getContext('2d').clearRect(0, 0, 700, 750); }; setInterval(clearFace,90); }; //end of parent function var reset = function(){ document.getElementById('playground').getContext('2d').clearRect(0, 0, 700, 750); //clearInterval(faceTimer); //delete initiate(); }; </script> </body> </html>

  Read the article

• How to improve performance of map that loads new overlay images

  - by anthonysomerset

  I have inherited a website to maintain that uses a html map overlaying a real map to link specific countries to specific pages. previously it loaded the default map image, then with some javascript it would change the image src to an image with that particular country in a different colour on mouseover and reset the image source back to the original image on mouse out to make maintenance (adding new countries) easier i made the initial map a background image by utilising some CSS for the div tag, and then created new images for each country which only had that countries hightlight so that the images remain fairly small. this works great but theres one issue which is particularly noticeable on slower internet connections when you hover over a country if you dont have the image file in your browser cache or downloaded it wont load the image unless you hover over another country and then back onto the first country - i guess this is due to the image having to manually be downloaded on first hover. My question: is it possible to force the load of these extra images AFTER the page and all the other assets have finished loading so that this behaviour is all but eliminated? the html code for the MAP is as follows: <div class="gtmap"><img id="Image-Maps_6200909211657061" src="<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png" usemap="#Image-Maps_6200909211657061" alt="We offer Guided Motorcycle Tours all around the world" width="615" height="296" /> <map id="_Image-Maps_6200909211657061" name="Image-Maps_6200909211657061"> <area shape="poly" coords="511,134,532,107,542,113,520,141" href="/guided-motorcycle-tours-japan/" alt="Guided Japan Motorcycle Tours" title="Japan" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-japan.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="252,61,266,58,275,64,262,68" href="/guided-motorcycle-tour.php?iceland-motorcycle-adventure-39" alt="Guided Iceland Motorcycle Tours" title="Iceland" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-iceland.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="587,246,597,256,577,279,568,270" href="/guided-motorcycle-tour.php?new-zealand-south-island-adventure-10" alt="New Zealand Guided Motorcycle Tours" title="New Zealand" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-nz.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="418,133,412,145,412,154,421,178,430,180,430,166,443,154,443,145,438,144,433,142,430,138,431,130,430,129,425,128" href="/guided-motorcycle-tours-india/" alt="India Guided Motorcycle Tours" title="India" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-india.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="460,152,466,149,474,165,470,171,466,161" href="/guided-motorcycle-tours-laos/" alt="Laos Guided Motorcycle Tours" title="Laos" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-laos.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="468,179,475,166,468,152,475,152,482,169" href="/guided-motorcycle-tour.php?indochina-motorcycle-adventure-tour-32" onClick="javascript: pageTracker._trackPageview('/internal-links/guided-tours/map/vietnam');" alt="Vietnam Guided Motorcycle Tours" title="Vietnam" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-viet.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="330,239,337,235,347,226,352,233,351,243,344,250,335,253,327,255,323,249,322,242,323,241" href="/guided-motorcycle-tours-southafrica/" alt="South Africa Guided Motorcycle Tours" title="South Africa" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-sa.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="290,77,293,86,298,96,286,102,285,97,285,89,282,84,282,79" href="/guided-motorcycle-tour.php?great-britain-isle-of-man-scotland-wales-uk-18" alt="United Kingdom" title="United Kingdom Guided Motorcycle Tours" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-uk.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="357,118,368,118,369,126,345,129,338,125,338,117,342,115,348,116" href="/guided-motorcycle-tour.php?explore-turkey-adventure-45" alt="Turkey" title="Turkey Guided Motorcycle Tours" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-turkey.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="206,95,193,101,185,101,178,106,165,111,157,109,147,105,134,103,121,103,107,103,96,103,86,104,81,99,77,91,70,83,62,79,60,72,61,64,59,57,60,51,71,50,83,49,95,50,107,54,117,53,129,47,137,36,148,37,163,38,177,44,187,54,195,60,184,72,191,80,200,87" href="/guided-motorcycle-tours-canada/" alt="Guided Canada Motorcycle Tours" title="Canada" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-canada.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="61,75,60,62,60,55,59,44,51,44,43,43,36,42,28,43,23,48,17,51,15,62,19,74,27,79,19,83,16,93,35,83,43,77,50,75,55,75" href="/guided-motorcycle-tours-alaska/" alt="Guided Alaska Motorcycle Tours" title="Alaska" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-alaska.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="82,101,99,101,133,101,148,105,161,110,172,106,187,100,180,113,171,122,165,131,159,149,147,141,137,140,129,147,120,141,112,138,103,137,93,132,86,122,86,112,86,106" href="/guided-motorcycle-tours-usa/" alt="USA Guided Motorcycle Tours" title="USA" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-usa.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="178,225,180,214,175,208,174,204,178,198,174,193,167,192,157,199,158,204,164,211,167,218" href="/guided-motorcycle-tour.php?peru-machu-picchu-adventure-25" alt="Peru Guided Motorcycle Tours" title="Peru" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-peru.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="172,226,169,239,166,256,166,267,164,279,171,277,174,262,175,250,179,234,180,225,176,224" href="/guided-motorcycle-tours-chile/" alt="Guided Chile Motorcycle Tours" title="Chile" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-chile.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="199,260,194,261,187,265,184,276,183,296,170,292,168,282,174,270,174,257,177,245,180,230,190,228,205,237,199,245" href="/guided-motorcycle-tours-argentina/" alt="Guided Argentina Motorcycle Tours" title="Argentina" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-arg.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> </map> </div> The <?php echo cdnhttpsCheck(); ?> is just a site specific function that gets the correct web domain/url from a config file to load resources from CDN where possible (eg all non HTTPS requests) We are loading Jquery at the bottom of the HTML if anybody wonders why it is missing from the code snippet for reference, the page with the map in question is found here: http://www.motoquest.com/guided-motorcycle-tours/

  Read the article

• How to improve performance of map that loads new overlay images

  - by anthonysomerset

  I have inherited a website to maintain that uses a html map overlaying a real map to link specific countries to specific pages. previously it loaded the default map image, then with some javascript it would change the image src to an image with that particular country in a different colour on mouseover and reset the image source back to the original image on mouse out to make maintenance (adding new countries) easier i made the initial map a background image by utilising some CSS for the div tag, and then created new images for each country which only had that countries hightlight so that the images remain fairly small. this works great but theres one issue which is particularly noticeable on slower internet connections when you hover over a country if you dont have the image file in your browser cache or downloaded it wont load the image unless you hover over another country and then back onto the first country - i guess this is due to the image having to manually be downloaded on first hover. My question: is it possible to force the load of these extra images AFTER the page and all the other assets have finished loading so that this behaviour is all but eliminated? the html code for the MAP is as follows: <div class="gtmap"><img id="Image-Maps_6200909211657061" src="<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png" usemap="#Image-Maps_6200909211657061" alt="We offer Guided Motorcycle Tours all around the world" width="615" height="296" /> <map id="_Image-Maps_6200909211657061" name="Image-Maps_6200909211657061"> <area shape="poly" coords="511,134,532,107,542,113,520,141" href="/guided-motorcycle-tours-japan/" alt="Guided Japan Motorcycle Tours" title="Japan" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-japan.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="252,61,266,58,275,64,262,68" href="/guided-motorcycle-tour.php?iceland-motorcycle-adventure-39" alt="Guided Iceland Motorcycle Tours" title="Iceland" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-iceland.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="587,246,597,256,577,279,568,270" href="/guided-motorcycle-tour.php?new-zealand-south-island-adventure-10" alt="New Zealand Guided Motorcycle Tours" title="New Zealand" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-nz.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="418,133,412,145,412,154,421,178,430,180,430,166,443,154,443,145,438,144,433,142,430,138,431,130,430,129,425,128" href="/guided-motorcycle-tours-india/" alt="India Guided Motorcycle Tours" title="India" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-india.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="460,152,466,149,474,165,470,171,466,161" href="/guided-motorcycle-tours-laos/" alt="Laos Guided Motorcycle Tours" title="Laos" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-laos.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="468,179,475,166,468,152,475,152,482,169" href="/guided-motorcycle-tour.php?indochina-motorcycle-adventure-tour-32" onClick="javascript: pageTracker._trackPageview('/internal-links/guided-tours/map/vietnam');" alt="Vietnam Guided Motorcycle Tours" title="Vietnam" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-viet.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="330,239,337,235,347,226,352,233,351,243,344,250,335,253,327,255,323,249,322,242,323,241" href="/guided-motorcycle-tours-southafrica/" alt="South Africa Guided Motorcycle Tours" title="South Africa" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-sa.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="290,77,293,86,298,96,286,102,285,97,285,89,282,84,282,79" href="/guided-motorcycle-tour.php?great-britain-isle-of-man-scotland-wales-uk-18" alt="United Kingdom" title="United Kingdom Guided Motorcycle Tours" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-uk.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="357,118,368,118,369,126,345,129,338,125,338,117,342,115,348,116" href="/guided-motorcycle-tour.php?explore-turkey-adventure-45" alt="Turkey" title="Turkey Guided Motorcycle Tours" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-turkey.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="206,95,193,101,185,101,178,106,165,111,157,109,147,105,134,103,121,103,107,103,96,103,86,104,81,99,77,91,70,83,62,79,60,72,61,64,59,57,60,51,71,50,83,49,95,50,107,54,117,53,129,47,137,36,148,37,163,38,177,44,187,54,195,60,184,72,191,80,200,87" href="/guided-motorcycle-tours-canada/" alt="Guided Canada Motorcycle Tours" title="Canada" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-canada.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="61,75,60,62,60,55,59,44,51,44,43,43,36,42,28,43,23,48,17,51,15,62,19,74,27,79,19,83,16,93,35,83,43,77,50,75,55,75" href="/guided-motorcycle-tours-alaska/" alt="Guided Alaska Motorcycle Tours" title="Alaska" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-alaska.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="82,101,99,101,133,101,148,105,161,110,172,106,187,100,180,113,171,122,165,131,159,149,147,141,137,140,129,147,120,141,112,138,103,137,93,132,86,122,86,112,86,106" href="/guided-motorcycle-tours-usa/" alt="USA Guided Motorcycle Tours" title="USA" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-usa.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="178,225,180,214,175,208,174,204,178,198,174,193,167,192,157,199,158,204,164,211,167,218" href="/guided-motorcycle-tour.php?peru-machu-picchu-adventure-25" alt="Peru Guided Motorcycle Tours" title="Peru" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-peru.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="172,226,169,239,166,256,166,267,164,279,171,277,174,262,175,250,179,234,180,225,176,224" href="/guided-motorcycle-tours-chile/" alt="Guided Chile Motorcycle Tours" title="Chile" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-chile.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> <area shape="poly" coords="199,260,194,261,187,265,184,276,183,296,170,292,168,282,174,270,174,257,177,245,180,230,190,228,205,237,199,245" href="/guided-motorcycle-tours-argentina/" alt="Guided Argentina Motorcycle Tours" title="Argentina" onmouseover="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-arg.png';" onmouseout="if(document.images) document.getElementById('Image-Maps_6200909211657061').src='<?php echo cdnhttpsCheck(); ?>assets/wmap/a-guided-tours-map-blank.png';" /> </map> </div> The <?php echo cdnhttpsCheck(); ?> is just a site specific function that gets the correct web domain/url from a config file to load resources from CDN where possible (eg all non HTTPS requests) We are loading Jquery at the bottom of the HTML if anybody wonders why it is missing from the code snippet for reference, the page with the map in question is found here: http://www.motoquest.com/guided-motorcycle-tours/

  Read the article

• Inserting THEAD element into embedded HTML using jQuery

  - by robalot

  I'm trying to use jQuery to insert HTML into a table element. I've been messing variations of the selector (below) with no luck. Can someone help me? My Selector: $j('#ctl00_body_gridData_dom').children('table:first').append("<thead><tr><td colspan='6'>&nbsp;</td><td align='center' colspan='7'>EM SPECS</td><td align='center' colspan='7'>FISH</td><td colspan='11'>&nbsp;</td></tr></thead>"); Here's what I am trying to do... I want to insert this: <thead> <tr> <td colspan="6"> &nbsp; </td> <td align="center" colspan="7"> EM SPECS </td> <td align="center" colspan="7"> FISH </td> <td colspan="11"> &nbsp; </td> </tr> </thead> The sample below is what I want the end result to look like... So It Looks Like This: Jquery Event Pool <table id="ctl00_body_gridData" style="width: 2000px; -moz-user-select: none;" border="1" cellpadding="0" cellspacing="0"> <tbody> <tr> <td id="ctl00_body_gridData_dom" class="GridData" style="vertical-align: top; height: 245px;" valign="top"> <table style="width: 100%;" border="0" cellpadding="0" cellspacing="0"> <thead> <tr> <td colspan="6"> &nbsp; </td> <td align="center" colspan="7"> EM SPECS </td> <td align="center" colspan="7"> FISH </td> <td colspan="11"> &nbsp; </td> </tr> </thead> <tbody> <tr id="ctl00_body_gridData_top_head" class="headerlineGrid"> <td width="16"> <div style="width: 16px;"></div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,4,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,4,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,0,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,4,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,4,0)" style="width: 89px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 89px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Work<br>Package</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,6,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,6,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,1,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,6,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,6,0)" style="width: 62px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 62px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Work<br>Order</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,9,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,9,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,2,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,9,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,9,0)" style="width: 66px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 66px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> FCR<br>Group</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,12,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,12,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,3,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,12,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,12,0)" style="width: 105px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 105px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">Contractor</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,15,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,15,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,4,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,15,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,15,0)" style="width: 159px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 159px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Capital/Expense<br>Group</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,19,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,19,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,5,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,19,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,19,0)" style="width: 99px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 99px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">Cost Type</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,20,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,20,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,6,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,20,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,20,0)" style="width: 81px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 81px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Commit<br>Dollars</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,21,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,21,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,7,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,21,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,21,0)" style="width: 81px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 81px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Commit<br>Hours</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,22,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,22,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,8,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,22,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,22,0)" style="width: 86px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 86px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Commit<br>Quantity</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,23,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,23,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,9,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,23,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,23,0)" style="width: 76px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 76px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Control<br>Budget</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,24,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,24,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,10,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,24,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,24,0)" style="width: 46px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 46px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">FTC</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,25,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,25,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,11,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,25,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,25,0)" style="width: 88px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 88px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Total<br>Forecast</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,26,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,26,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,12,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,26,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,26,0)" style="width: 50px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 50px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Ctr<br>COB</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,27,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,27,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,13,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,27,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,27,0)" style="width: 49px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 49px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Ctr<br>CCB</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,28,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,28,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,14,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,28,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,28,0)" style="width: 81px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 81px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Ctr<br> Commit<br>$</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,29,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,29,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,15,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,29,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,29,0)" style="width: 81px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 81px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Ctr<br> Commit<br>Hours</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,30,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,30,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,16,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,30,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,30,0)" style="width: 86px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 86px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Ctr<br> Commit<br>Quantity</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,31,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,31,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,17,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,31,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,31,0)" style="width: 95px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 95px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Ctr<br>% Compl.</td> </tr> </tbody> </table> </div> </td> <td onclick="ctl00_body_gridData.ClickHandler(event,this,32,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,32,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,18,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,32,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,32,0)" style="width: 105px;" class="HeadingCell" align="center"> <div style="text-align: center; overflow: hidden; width: 105px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center"> Contractor<br>CFTC</td> </tr> </tbody> </table> </div> </td> </tr> <tr> <td id="ctl00_body_gridData_expcolgrp_0" width="16" align="center"></td> <td class="GroupHeading" colspan="20"> FCR<br>Group: Engineering</td> </tr> <tr> <td id="ctl00_body_gridData_expcolgrp_1" width="16" align="center"></td> <td class="GroupHeading" colspan="20"> FCR<br>Group: Pipe</td> </tr> <tr> <td id="ctl00_body_gridData_expcolgrp_2" width="16" align="center"></td> <td class="GroupHeading" colspan="20"> FCR<br>Group: Concrete</td> </tr> <tr> <td id="ctl00_body_gridData_expcolgrp_3" width="16" align="center"></td> <td class="GroupHeading" colspan="20"> FCR<br>Group: Insulation</td> </tr> <tr> <td id="ctl00_body_gridData_expcolgrp_4" width="16" align="center"></td> <td class="GroupHeading" colspan="20"> FCR<br>Group: Buildings</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </body> </html>

  Read the article

• Ranking - Part II

  - by PointsToShare

  © 2011 By: Dov Trietsch. All rights reserved   Ranking Part II In my introduction to ranking I also introduced the Ranking Game. This is actually a much more sophisticated program than the one we need to simply rate an item, but it introduced you to the sophisticated results that you may achieve by a bit of code and accompanying CSS. In this installment, I am going to handle simple rating with 5 stars. The extra sophistication will come in the form of creating new elements in run time. Why do I need this? I like to be able to extend the SharePoint New and Update forms and put the starts in them simply by using the code shown here. We do not even need to go into SPD. We may achieve this simply by adding a content editor web part; more about this in the next installment. I have created a new page – Rank the Author – in which you may praise me in 5 different ways, but not immediately. The ranking mechanism – the 5 stars – has to be created first. To achieve that, click the “Add Element” button on the screen and then proceed in giving me the appropriate number of stars. Now view the source and see how this extra 5 start element was added. Also see how the ranking is achieved. This, obviously, is not any different in principle than what we did in the Ranking game. We create some sophisticated HTML, Add some style and create the element by: var divString = "<div id="rateMe" title="Rate Me...">    <a onclick="rateIt(this)" id="_1" title="ehh..." onmouseover="rating(this)" onmouseout="off(this)"></a>    <a onclick="rateIt(this)" id="_2" title="So So" onmouseover="rating(this)" onmouseout="off(this)"></a>    <a onclick="rateIt(this)" id="_3" title="Passable" onmouseover="rating(this)" onmouseout="off(this)"></a>    <a onclick="rateIt(this)" id="_4" title="Not too Bad" onmouseover="rating(this)" onmouseout="off(this)"></a>    <a onclick="rateIt(this)" id="_5" title="Not Bad" onmouseover="rating(this)" onmouseout="off(this)"></a></div>";m = document.createElement("p");m.innerHTML = divString;m.className = "blah";function AddElement(){    y = document.getElementById("Rest");    y.parentNode.insertBefore(m, y);} When you look into the full code, you’ll notice that I have added an empty <div id=”Rest”> into the form. A div element, like p, creates a line break, but the main purpose here was to mark the place above which I wanted to add the stars. Now you may hover over the stars, see how they behave and click on one of them to see that the program can react to your selection. That’s all folks!

  Read the article

• JavaScript functions broke my page jumps?

  - by Mark

  Hi everybody, I'm trying to develop a personal website and running into some issues. At the top of my page I had a horizontal table that contained 6 different images (buttons) that linked to different sections of the page. I wanted to spice up the buttons with JavaScript and make the image of the button change onMouseOver and onMouseOut so I found a way to do so online with some JavaScript but the problem now is that the buttons no longer jump to the appropriate section of the page when using Google Chrome or Safari, but in IE 9 they still do work correctly... Here is my old code that worked properly: <html> ... <body> <center> <table border="1" style="color:#D80000;text-align:center"> <tr> <td> <a href="#about"><img src="images/aboutMe.png" alt="About Me"></a> </td> <td> <a href="#courses"><img src="images/courseList.png" alt="Courses"></a> </td> <td> <a href="#work"><img src="images/workHistory.png" alt="Work History"></a> </td> <td> <a href="#places"><img src="images/placesBeen.png" alt="Places I've Been"></a> </td> <td> <a href="#games"><img src="images/gamesPlay.png" alt="Games I Play"></a> </td> <td> <a href="#contact"><img src="images/contactMe.png" alt="Contact"></a> </td> </tr> </table> </center> ... </body> </html> Here is my new code that is now broken: <html> <head> ... <script type="text/javascript"> <!-- if (document.images) { <!-- Preload original Images --> var about_init= new Image(); about_init.src="images/aboutMe.png"; var courses_init= new Image(); courses_init.src="images/courseList.png"; var work_init= new Image(); work_init.src="images/workHistory.png"; var places_init= new Image(); places_init.src="images/placesBeen.png"; var games_init= new Image(); games_init.src="images/gamesPlay.png"; var contact_init= new Image(); contact_init.src="images/contactMe.png"; <!--Preload images for mouseover --> var about_new= new Image(); about_new.src="images/aboutAlt.png"; var courses_new= new Image(); courses_new.src="images/courseAlt.png"; var work_new= new Image(); work_new.src="images/workAlt.png"; var places_new= new Image(); places_new.src="images/placesAlt.png"; var games_new= new Image(); games_new.src="images/gamesAlt.png"; var contact_new= new Image(); contact_new.src="images/contactAlt.png"; } function change_it(the_name) { if (document.images) { document.images[the_name].src= eval(the_name+"_new.src"); } } function change_back(the_name) { if (document.images) { document.images[the_name].src= eval(the_name+"_init.src"); } } //--> </script> </head> <body> ... <center> <table border="1" style="color:#D80000;text-align:center"> <tr> <td> <a href="#about" onMouseOver="change_it('about')" onMouseOut="change_back('about')"><img src="images/aboutMe.png" name="about" id="about" border="0" alt="About Me"></a> </td> <td> <a href="#courses" onMouseOver="change_it('courses')" onMouseOut="change_back('courses')"><img src="images/courseList.png" name="courses" id="courses" border="0" alt="Courses"></a> </td> <td> <a href="#work" onMouseOver="change_it('work')" onMouseOut="change_back('work')"><img src="images/workHistory.png" name="work" id="work" border="0" alt="Work History"></a> </td> <td> <a href="#places" onMouseOver="change_it('places')" onMouseOut="change_back('places')"><img src="images/placesBeen.png" name="places" id="places" border="0" alt="Places I've Been"></a> </td> <td> <a href="#games" onMouseOver="change_it('games')" onMouseOut="change_back('games')"><img src="images/gamesPlay.png" name="games" id="games" border="0" alt="Games I Play"></a> </td> <td> <a href="#contact" onMouseOver="change_it('contact')" onMouseOut="change_back('contact')"><img src="images/contactMe.png" name="contact" id="contact" border="0" alt="Contact"></a> </td> </tr> </table> </center> ... </body> </html> The images properly switch when the mouse is moved over/off them, but the jump to the corresponding page sections seems to be broken, it seems like they're all jumping to the #about section now. Once again, the weirder thing is that this is only the case when I'm using Google Chrome on my laptop running Windows 7 or Safari using my iPhone 4 but when I use the new Internet Explorer 9 on my laptop running Windows 7 all the buttons still link correctly. Any idea what's breaking the links?

  Read the article

• dojo connect mouseover and mouseout

  - by peirix

  When setting up dojo connections to onmouseover and onmouseout, and then adding content on mouseover, dojo fires the onmouseout event at once, since there is new content. Example: dojo.query(".star").parent().connect("onmouseover", function() { dojo.query("span", this).addContent("<img src='star-hover.jpg'>"); }).connect("onmouseout", function() { dojo.destroy(dojo.query("img", this)[0]); }); The parent() is a <td>, and the .star is a span. I want to add the hover image whenever the user hovers the table cell. It works as long as the cursor doesn't hover the image, because that will result in some serious blinking. Is this deliberate? And is there a way around it?

  Read the article

• jQuery Dropdown

  - by Phil

  I've been able to make a jQuery drop down, however, I can't make it stay expanded when one of the child links is rolled over. Code: <li> <a onmouseover="$('.dropdown-1').slideDown('medium');" href="/hosting">Why Veoloo</a> <ul class="dropdown-1"> <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">The Reasons (15)</a></li> <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">Customer Testimonials</a></li> <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">Our Support Scope</a></li> </ul> </li>

  Read the article

• clearTimeout not working as expected

  - by user543314

  Javascript sliding menu stay open. clearTimeout not working as expected -can you help me please <html> <head> <style> #Menu1 {position:absolute; top:-190px; left:150px; font-size:15px;visibility:visible; background-color:#D0BCFE; width:114px;z-index:0;border-style:solid; } #Menu2 {position:absolute; top:-190px; left:580px; font-size:15px;visibility:visible; background-color:#D0BCFE; width:114px;z-index:0;border-style:solid; } #Menu3 {position:absolute; top:-190px; left:1005px; font-size:15px;visibility:visible; background-color:#D0BCFE; width:114px;z-index:0;border-style:solid; } TD.TDHREFMENUS{font-size:20;color:red;position:relative;z-index:0;background-color:#C4ABFE;border-style:solid;width:114px;} </style> <script> var stopUp=null; var stopDown=null; var mov=-143; var on; function down(id){ if (!on){ on=true; clearTimeout(stopUp) stopUp=null; } var obj=document.getElementById(id) obj.style.top=mov +"px"; if (mov <=27){ mov+=2; stopDown=setTimeout(function (){ down(id) }, 20) } } function up(id){ if (on){ on=false; clearTimeout(stopDown) stopDown=null; } var obj=document.getElementById(id) obj.style.top=mov +"px"; if (mov >=-143){ mov-=2; stopUp=setTimeout(function(){ up(id)}, 20); } } </script> </head> <body leftmargin=0 marginwidth=0 topmargin=0 marginheight=0> <div id="Menu1" onmouseover="down('Menu1')" onmouseout="up('Menu1')"> URL 1<br> URL 2<br> URL 3<br> URL 4<br> URL 5<br> URL 6<br> URL 7<br> URL 8<br> </div> </div> <div id="Menu2" onmouseover="down('Menu2')" onmouseout="up('Menu2')"> URL 1<br> URL 2<br> URL 3<br> URL 4<br> URL 5<br> URL 6<br> URL 7<br> URL 8<br> </div> </div> <div id="Menu3" onmouseover="down('Menu3')" onmouseout="up('Menu3')"> URL 1<br> URL 2<br> URL 3<br> URL 4<br> URL 5<br> URL 6<br> URL 7<br> URL 8<br> </div> </div> <TABLE cellSpacing=0 cellPadding=0 BORDER=1 WIDTH=100%> <TBODY> <TR> <TD align=middle CLASS="TDHREFMENUS"><span onmouseover="down('Menu1')" onmouseout="up('Menu1')">MENU 1</span> </TD> <TD align=middle CLASS="TDHREFMENUS"><span onmouseover="down('Menu2')" onmouseout="up('Menu2')">MENU 2</span> </TD> <TD align=middle CLASS="TDHREFMENUS"><span onmouseover="down('Menu3')" onmouseout="up('Menu3')">MENU 3</span> </TD> </TR> </TBODY> </TABLE> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <html> <head>

  Read the article

• Javascript - Text Input Attributes

  - by bobrusha

  I need to create a form element <input disabled type="text" value="smth" /> which is disabled by default. It enables when onmouseover occures. onmouseover="this.disabled=false;" And is disabled by onmouseout onmouseout="this.disabled=true;" What I need is to check the following. If the <input> is focused then it shouldn't be disabled. And if the form element loses focus it disables. Please help me to complete the events. <input disabled type="text" value="smth" onmouseover="this.disabled=false;" onfocus="???" onblur="???" onmouseout="if(???){this.disabled=true;}" />

  Read the article

• ASP.NET make a panel visible on click of hyperlink (whilst also cuasing postback for page navigation

  - by Helen

  I may be asking the impossible but let me set out my problem: I have a menu in a MasterPage which uses images and mouseover mouseout events for design purposes. On one of the menu options I need to display a set of sub menus options on the click of the parent menu item. The menu item itself also needs to navigate to a specified url. I was originally trying to use an AJAX accordion panel but as I only had one accordion panel it was always displaying the sub menu items and was not collapsing. I have also tried putting the options in a div and setting the display via javascript. This worked but then was overwritten once the page navigation postback occurred. Here is the source: <%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@ Register Src="LeadHeader.ascx" TagName="LeadHeader" TagPrefix="uc1" %> <%@ Register Src="~/LeadFooter.ascx" TagName="LeadFooter" TagPrefix="uc2" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var revert = new Array(); var inames = new Array('home', 'whoweare', 'whatwedo','ourapproach', 'ourvalues', 'contact'); // Preload if (document.images) { var flipped = new Array(); for(i=0; i< inames.length; i++) { flipped[i] = new Image(); flipped[i].src = "images/"+inames[i]+"2.jpg"; } } function over(num) { if(document.images) { revert[num] = document.images[inames[num]].src; document.images[inames[num]].src = flipped[num].src; } } function out(num) { if(document.images) document.images[inames[num]].src = revert[num]; } function ShowHide(elementId) { var element = document.getElementById(elementId); if(element.style.display != "block") { element.style.display = "block"; } else { element.style.display = "none"; } } function UpdateText(element) { if(element.innerHTML.indexOf("Show") != -1) { element.innerHTML = "Hide Details"; } else { element.innerHTML = "Show Details"; } } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server"> <uc1:LeadHeader ID="LeadHeader" runat="server" /> </asp:ContentPlaceHolder> <div id="nav"> <div class="menu-item"> <a href="Default.aspx"> <img src="Images/home.jpg" alt="home" id="home" onmouseover="over(0)" onmouseout="out(0)" class="right" /></a> </div> <div class="menu-item"> <a href="AboutUs.aspx"> <img src="Images/whoweare.jpg" alt="who we are" id="whoweare" onmouseover="over(1)" onmouseout="out(1)" class="right" /></a> </div> <%-- <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:Accordion ID="Accordion1" runat="server" AutoSize="None" FadeTransitions="true" TransitionDuration="350" FramesPerSecond="40" RequireOpenedPane="false" > <Panes> <cc1:AccordionPane runat="server"> <Header>--%> <div class="menu-item"> <a href="WhatWeDo.aspx"> <img src="Images/whatwedo.jpg" alt="what we do" id="whatwedo" onmouseover="over(2)" onmouseout="out(2)" class="right" onclick="ShowHide('divDetails');UpdateText(this);" /></a></div> <%--/Header> <Content>--%> <div id="divDetails" style="display:none;"> <a href="management.aspx" title="Management Development">Management Development</a><br /> <a href="leadership.aspx" title="Leadership Development">Leadership Development</a><br /> <a href="personal.aspx" title="Personal Development">Personal Development</a><br /> <a href="realteams.aspx" title="Team Building / Facilitation">Team Building & Facilitation</a><br /> <a href="coaching.aspx" title="Coaching">One to One Coaching</a> </div> <%-- </Content> </cc1:AccordionPane> </Panes> </cc1:Accordion> --%> <div class="menu-item"> <a href="OurApproach.aspx"> <img src="images/ourapproach.jpg" alt="our approach" id="ourapproach" onmouseover="over(3)" onmouseout="out(3)" /></a> </div> <div class="menu-item"> <a href="OurValues.aspx"> <img src="images/ourvalues.jpg" alt="our values" id="ourvalues" onmouseover="over(4)" onmouseout="out(4)" /></a> </div> <div class="menu-item"> <a href="ContactUs.aspx"> <img src="images/ContactUs.jpg" alt="contact us" id="contactus" onmouseover="over(5)" onmouseout="out(5)" /></a> </div> </div> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> <asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server"> <uc2:LeadFooter ID="LeadFooter" runat="server" /> </asp:ContentPlaceHolder> </div> </form> </body> </html>

  Read the article

• Change Image Source using JQuery

  - by Sachin Gaur

  I have few images and their rollover images. I want to show/hide the rollover image when onmousemove/onmouseout event using JQuery. All my images name follow the same pattern, like this: Original Image: Image.gif Rollover Image: Imageover.gif I want to insert and remove the "over" portion of image source in onmouseover and onmouseout event respectively. How can I do it using JQuery?

  Read the article

• Highlight Row in GridView with Colored Columns

  - by Vincent Maverick Durano

  I wrote a blog post a while back before here that demonstrate how to highlight a GridView row on mouseover and as you can see its very easy to highlight rows in GridView. One of my colleague uses the same technique for implemeting gridview row highlighting but the problem is that if a Column has background color on it that cell will not be highlighted anymore. To make it more clear then let's build up a sample application. ASPX:   1: <asp:GridView runat="server" id="GridView1" onrowcreated="GridView1_RowCreated" 2: onrowdatabound="GridView1_RowDataBound"> 3: </asp:GridView>   CODE BEHIND:   1: private DataTable FillData() { 2:   3: DataTable dt = new DataTable(); 4: DataRow dr = null; 5:   6: //Create DataTable columns 7: dt.Columns.Add(new DataColumn("RowNumber", typeof(string))); 8: dt.Columns.Add(new DataColumn("Col1", typeof(string))); 9: dt.Columns.Add(new DataColumn("Col2", typeof(string))); 10: dt.Columns.Add(new DataColumn("Col3", typeof(string))); 11:   12: //Create Row for each columns 13: dr = dt.NewRow(); 14: dr["RowNumber"] = 1; 15: dr["Col1"] = "A"; 16: dr["Col2"] = "B"; 17: dr["Col3"] = "C"; 18: dt.Rows.Add(dr); 19:   20: dr = dt.NewRow(); 21: dr["RowNumber"] = 2; 22: dr["Col1"] = "AA"; 23: dr["Col2"] = "BB"; 24: dr["Col3"] = "CC"; 25: dt.Rows.Add(dr); 26:   27: dr = dt.NewRow(); 28: dr["RowNumber"] = 3; 29: dr["Col1"] = "A"; 30: dr["Col2"] = "B"; 31: dr["Col3"] = "CC"; 32: dt.Rows.Add(dr); 33:   34: dr = dt.NewRow(); 35: dr["RowNumber"] = 4; 36: dr["Col1"] = "A"; 37: dr["Col2"] = "B"; 38: dr["Col3"] = "CC"; 39: dt.Rows.Add(dr); 40:   41: dr = dt.NewRow(); 42: dr["RowNumber"] = 5; 43: dr["Col1"] = "A"; 44: dr["Col2"] = "B"; 45: dr["Col3"] = "CC"; 46: dt.Rows.Add(dr); 47:   48: return dt; 49: } 50:   51: protected void Page_Load(object sender, EventArgs e) { 52: if (!IsPostBack) { 53: GridView1.DataSource = FillData(); 54: GridView1.DataBind(); 55: } 56: }   As you can see there's nothing fancy in the code above. It just contain a method that fills a DataTable with a dummy data on it. Now here's the code for row highlighting:   1: protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { 2: //Set Background Color for Columns 1 and 3 3: e.Row.Cells[1].BackColor = System.Drawing.Color.Beige; 4: e.Row.Cells[3].BackColor = System.Drawing.Color.Red; 5:   6: //Attach onmouseover and onmouseout for row highlighting 7: e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='Blue'"); 8: e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=''"); 9: }   Running the code above will show something like this in the browser: On initial load: On mouseover of GridView row:   Noticed that Col1 and Col3 are not highlighted. Why? the reason is that Col1 and Col3 cells has background color set on it and we only highlight the rows (TR) and not the columns (TD) that's why on mouseover only the rows will be highlighted. To fix the issue we will create a javascript method that would remove the background color of the columns when highlighting a row and on mouseout set back the original color that is set on Col1 and Col3. Here are the codes below: JavaScript   1: <script type="text/javascript"> 2: function HighLightRow(rowIndex, colIndex,colIndex2, flag) { 3: var gv = document.getElementById("<%= GridView1.ClientID %>"); 4: var selRow = gv.rows[rowIndex]; 5: if (rowIndex > 0) { 6: if (flag == "sel") { 7: gv.rows[rowIndex].style.backgroundColor = 'Blue'; 8: gv.rows[rowIndex].style.color = "White"; 9: gv.rows[rowIndex].cells[colIndex].style.backgroundColor = ''; 10: gv.rows[rowIndex].cells[colIndex2].style.backgroundColor = ''; 11: } 12: else { 13: gv.rows[rowIndex].style.backgroundColor = ''; 14: gv.rows[rowIndex].style.color = "Black"; 15: gv.rows[rowIndex].cells[colIndex].style.backgroundColor = 'Beige'; 16: gv.rows[rowIndex].cells[colIndex2].style.backgroundColor = 'Red'; 17: } 18: } 19: } 20: </script>   The HighLightRow method is a javascript function that accepts four (4) parameters which are the rowIndex,colIndex,colIndex2 and the flag. The rowIndex is the current row index of the selected row in GridView. The colIndex is the index of Col1 and colIndex2 is the index of col3. We are passing these index because these columns has background color on it and we need to toggle its backgroundcolor when highlighting the row in GridView. Finally the flag is something that would determine if its selected or not. Now here's the code for calling the JavaScript function above.     1: protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { 2:   3: //Set Background Color for Columns 1 and 3 4: e.Row.Cells[1].BackColor = System.Drawing.Color.Beige; 5: e.Row.Cells[3].BackColor = System.Drawing.Color.Red; 6:   7: //Attach onmouseover and onmouseout for row highlighting 8: //and call the HighLightRow method with the required parameters 9: int index = e.Row.RowIndex + 1; 10: e.Row.Attributes.Add("onmouseover", "HighLightRow(" + index + "," + 1 + "," + 3 + ",'sel')"); 11: e.Row.Attributes.Add("onmouseout", "HighLightRow(" + index + "," + 1 + "," + 3 + ",'dsel')"); 12: 13: }   Running the code above will display something like this: On initial load:   On mouseover of GridView row:   That's it! I hope someone find this post useful!

  Read the article

1 2 3 4 5 6  | Next Page >