Search Results

Search found 222 results on 9 pages for 'onmouseover'.

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Page 2/9 | < Previous Page | 1 2 3 4 5 6 7 8 9  | Next Page >

  • Menu glitchy on top of slideshow

    - by gnomixa
    I have implemented the following set up (after being requested): slideshow of images changing, after the user mouse over, the menu would appear in the top right corner, it would disappear on mouse out. The problem is that the menu it glitchy in both IE6/7 and FF 3.5. I have tried Jquery hover, mouseenter, mouseleave, all with the same result. http://www.codecookery.com/test/index.html is it possible to make it not glitchy at all?

    Read the article

  • Mouseover style for a button in a form

    - by vinu-arumugam
    Can anyone tell me how to add mouse over style on a button in a form? I have given my form code. Pls help me <input type="button" align="left" border="0px" style="padding:0px" value="Tab1" name="tab1" class="activeTab" onClick="blur();showIt(1);hideIt(2);hideIt(3);this.className='activeTab';this.form.tab2.className='inactiveTab';this.form.tab3.className='inactiveTab'" />

    Read the article

  • Jquery thumbnail popup on link Mouseover

    - by Charles Marsh
    Hello All, I have this peice of coding which simply swaps an image when a link is clicked, I also show some hidden html content which is positioned over the image. <script> if($.browser.msie && parseInt($.browser.version) <= 6){ $('#contentone, #contenttwo, #contentthree, #contentfour, .linksBackground').hide(); } $('#contentone, #contenttwo, #contentthree, #contentfour').hide(); $("#linkone").click(function() { $('#contenttwo, #contentthree, #contentfour').hide("1500"); $("#imageone").attr("src","Resources/Images/TEMP-homeOne.jpg"); $("#contentone").show("1500"); }); $("#linktwo").click(function() { $('#contentone, #contentthree, #contentfour').hide("1500"); $("#imageone").attr("src","Resources/Images/TEMP-homeTwo.jpg"); $("#contenttwo").show("1500"); }); $("#linkthree").click(function() { $('#contentone, #contenttwo, #contentfour').hide("1500"); $("#imageone").attr("src","Resources/Images/TEMP-homeThree.jpg"); $("#contentthree").show("1500"); }); $("#linkfour").click(function() { $('#contentone, #contenttwo, #contentthree').hide("1500"); $("#imageone").attr("src","Resources/Images/TEMP-homeFour.jpg"); $("#contentfour").show("1500"); }); </script> Does anyone know how I can further modify this to show a small thumbnail image when the user rolls over the link? I just need a hint because I'm not sure where to turn to... can I achieve it with mouseover?

    Read the article

  • Menu MouseOver Image & Image Description Dsiplay from SQL Database

    - by Julu
    Hello, I don't know if this is the right place to post this but here I go. I'm working on a project as a student for my internship and I need help. I have a masterPage with horizontal menu items as shown in the attached screen-captured. What I want to achieved is: Have a default image and description from SQL server database When a user mouse-over the menu item, display an image from a SQL server database and it description based on the mouse-over menu item. When user mouse-out, display default image and description from sql database. I have a also created user interface for inserting images to the database. How do I go about displaying the image and its description based on menu item is my main issue. Here is the link to the screen-captured. http://tinyurl.com/y4p3p32 Thanks a million time

    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

  • drag and drop working funny when using variable draggables and droppables

    - by Lina
    Hi, i have some containers that contain some divs like: <div id="container1"> <div id="task1" onMouseOver="DragDrop("+1+");">&nbsp;</div> <div id="task2" onMouseOver="DragDrop("+2+");">&nbsp;</div> <div id="task3" onMouseOver="DragDrop("+3+");">&nbsp;</div> <div id="task4" onMouseOver="DragDrop("+4+");">&nbsp;</div> </div> <div id="container2"> <div id="task5" onMouseOver="DragDrop("+5+");">&nbsp;</div> <div id="task6" onMouseOver="DragDrop("+6+");">&nbsp;</div> </div> <div id="container3"> <div id="task7" onMouseOver="DragDrop("+7+");">&nbsp;</div> <div id="task8" onMouseOver="DragDrop("+8+");">&nbsp;</div> <div id="task9" onMouseOver="DragDrop("+9+");">&nbsp;</div> <div id="task10" onMouseOver="DragDrop("+10+");">&nbsp;</div> </div> i'm trying to drag tasks and drop them in one of the container divs, then reposition the dropped task so that it doesn't affect the other divs nor fall outside one of them and to do that i'm using the event onMouseOver to call the following function: function DragDrop(id) { $("#task" + id).draggable({ revert: 'invalid' }); for (var i = 0; i < nameList.length; i++) { $("#" + nameList[i]).droppable({ drop: function (ev, ui) { var pos = $("#task" + id).position(); if (pos.left <= 0) { $("#task" + id).css("left", "5px"); } else { var day = parseInt(parseInt(pos.left) / 42); var leftPos = (day * 42) + 5; $("#task" + id).css("left", "" + leftPos + "px"); } } }); } } where: nameList = [container1, container2, container3]; the drag is working fine, but the drop is not really, it's just a mess! any help please?? when i hardcode the id and the container, then it works beautifully, but as soon as i use id in drop then it begins to work funny! any suggestions??? thanks a million in advance Lina

    Read the article

  • How to change onmouseover event to onclick instead in javascript?

    - by KT
    I am using this plugin in wordpress http://www.iwebix.de/front-slider-wordpress-plugin-demo/ As you can see in the demo above, the left and right arrow buttons are the controls for scrolling the thumbnails and the event is onmouseover and onmouseout. I don't know how to change this to onclick instead so that the thumbnails will scroll left and right only when the buttons are clicked. Any help or ideas on how to do this? Thanks! Here is the script. http://www.iwebix.de/wp-content/plugins/front-slider/scripts/slider.js

    Read the article

  • Manipulate multiple check boxes by ID using unobtrusive java script?

    - by Dean
    I want to be able to select multiple check boxes onmouseover, but instead of applying onmouseover to every individual box, I've been trying to work out how to do so by manipulating check boxes by ID instead, although I'm not sure where to go from using getElementById,. So instead of what you see below. <html> <head> <script> var Toggle = true; var Highlight=false; function handleKeyPress(evt) { var nbr; if (window.Event) nbr = evt.which; else nbr = event.keyCode; if(nbr==16)Highlight=true; return true; } function MakeFalse(){Highlight=false;} function SelectIt(X){ if(X.checked && Toggle)X.checked=false; else X.checked=true; } function ChangeText() { var test1 = document.getElementById("1"); test1.innerHTML = "onmouseover=SelectIt(this)" } </script> </head> <body> <form name="A"> <input type="checkbox" name="C1" onmouseover="SelectIt(this)" id="1"><br> <input type="checkbox" name="C2" onmouseover="SelectIt(this)" id="2"><br> <input type="checkbox" name="C3" onmouseover="SelectIt(this)" id="3"><br> <input type="checkbox" name="C4" onmouseover="SelectIt(this)" checked="" disabled="disabled" id="4"><br> <input type="checkbox" name="C5" onmouseover="SelectIt(this)" id="5"><br> <input type="checkbox" name="C6" onmouseover="SelectIt(this)" id="6"><br> <input type="checkbox" name="C7" onmouseover="SelectIt(this)" id="7"><br> <input type="checkbox" name="C8" onmouseover="SelectIt(this)" id="8"><br> </form> </body> </html> I want to be able to apply the onmousover effect to an array of check boxes like this <form name="A"> <input type="checkbox" name="C1" id="1"><br> <input type="checkbox" name="C2" id="2"><br> <input type="checkbox" name="C3" id="3"><br> <input type="checkbox" name="C4" checked="" disabled="disabled" id="4"><br> <input type="checkbox" name="C5" id="5"><br> <input type="checkbox" name="C6" id="6"><br> <input type="checkbox" name="C7" id="7"><br> <input type="checkbox" name="C8" id="8"><br> </form> After trying the search feature of stackoverflow.com and looking around on Google I haven't been able to a find a solution that makes sense to me thus far, although I'm still in the process of learning so I fear I might be trying to do something too advanced for my level of knowledge.

    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

  • External Javascript file fails to receive variables from previous javascript block

    - by Franc
    I've been searching the net for several hours and can't find an answer in the whole "external js file"-jungle. I hope you guys can help! In short: My external javascript file doesn't seem to get the variables which I defined in the main.php file.. On main.php I define php variables and "transform" them into javascript variables <head>... <script type="text/javascript"> var phpmain_img = <?php echo json_encode($main_img); ?>; var phpvar1_large = <?php echo json_encode($var1_large); ?>; var phpvar2_large = <?php echo json_encode($var2_large); ?>; var phpvar3_large = <?php echo json_encode($var3_large); ?>; var phpvar4_large = <?php echo json_encode($var4_large); ?>; </script> ... <script language="javascript" type="text/javascript" src="/wshop/ext.js"></script> </head> In my ext.js file I want to process those variables. In the ext.js file I defined a the function swapImage() that will be used back in the main PHP: var imgArray = new Array( phpmain_img, phpvar1_large, phpvar2_large, phpvar3_large ); function swapImage(imgID) { var theImage = document.getElementById('theImage'); var newImg; newImg = imgArray[imgID]; theImage.src = newImg; } function preloadImages() { for(var i = 0; i < imgArray.length; i++) { var tmpImg = new Image; tmpImg.src = imgArray[i]; } } Result: The swapImage() in the main.php... doesnt work <div id="image"> <img id="theImage" src="<?=$main_img; ?>" alt="" /> </div> <div id="thumbs"> <?php echo "<img src=\"<$main_img_small\" alt=\"\" onmouseover=\"swapImage(0);\">"; echo "<img src=\"$var1_small\" alt=\"\" onmouseover=\"swapImage(1);\">"; echo "<img src=\"$var2_small\" alt=\"\" onmouseover=\"swapImage(2);\">"; echo "<img src=\"$var3_small\" alt=\"\" onmouseover=\"swapImage(3);\">"; ?> <br /> </div> Any help is greatly appreciated! UPDATE: I don't get a specific error, the swapImage functions doesn't work at mouseover. However, I tried to output the variables with e.g. document.write(phpimg_main) but nothing appears which makes me believe that there's something wrong with the handing over of the variables... here's the source code browser output `<html> <head> <link href="../demo.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .... </style> <script type="text/javascript"> var phpmain_img = {"0":"http:\/\/path\/to\/main\/image.jpg"}; var phpvar1_large = {"0":"http:\/\/path\/to\/image1.jpg"}; var phpvar2_large = {"0":"http:\/\/path\/to\/image2.jpg"}; var phpvar3_large = null; var phpvar4_large = null; </script> <script language="javascript" type="text/javascript" src="/wshop/ext.js"></script> </head> <body onload="preloadImages()"> <div id="image"> <img id="theImage" src="http://path-to-main-image.jpg" alt="" /> </div> <div id="thumbs"> <img src="http://path-to-main-image.jpg" alt="" onmouseover="swapImage(0);"><img src="http://path-to-image1.jpg" alt="" onmouseover="swapImage(1);"><img src="http://path-to-image2.jpg" alt="" onmouseover="swapImage(2);"> <br /> </div> </body> `

    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

  • How do I stop server control attributes being HTML encoded?

    - by Billious
    I'm trying to alter the onmouseover attribute of a HyperLink server control, but when I do so the JavaScript call I'm entering gets HTML encoded. For example: linkBooks.Attributes("onmouseover") = "changeImages(""books"", ""/images/common/books-dark.png""); return true;" Gets converted to: onmouseover="changeImages(&quot;books&quot;, &quot;/images/common/books-dark.png&quot;); return true;" How do I prevent this? The same code worked fine under VS2005 and .NET 2.0, I'm currently using VS2010RC and .NET 4.0.

    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

  • Variable number of GUI Buttons

    - by Wakaka
    I have a generic HTML5 Canvas GUI Button class and a Scene class. The Scene class has a method called createButton(), which will create a new Button with onclick parameter and store it in a list of buttons. I call createButton() for all UI buttons when initializing the Scene. Because buttons can appear and disappear very often during rendering, Scene would first deactivate all buttons (temporarily remove their onclick, onmouseover etc property) before each render frame. During rendering, the renderer would then activate the required buttons for that frame. The problem is that part of the UI requires a variable number of buttons, and their onclick, onmouseover etc properties change frequently. An example is a buffs system. The UI will list all buffs as square sprites for the current unit selected, and mousing over each square will bring up a tooltip with some information on the buff. But the number of buffs is variable thus I won't know how many buttons to create at the start. What's the best way to solve this problem? P.S. My game is in Javascript, and I know I can use HTML buttons, but would like to make my game purely Canvas-based. Create buttons on-the-fly during rendering. Thus I will only have buttons when I require them. After the render frame these buttons would be useless and removed. Create a fixed set of buttons that I'm going to assume the number of buffs per unit won't exceed. During each render frame activate the buttons accordingly and set their onmouseover property. Assign a button to each Buff instance. This sounds wrong as the buff button is a part of the GUI which can only have one unit selected. Assigning a button to every single Buff in the game seems to be overkill. Also, I would need to change the button's position every render frame since its order in the unit's list of buffs matter. Any other solutions? I'm actually quite for idea (1) but am worried about the memory/time issues of creating a new Button() object every render frame. But this is in Javascript where object creation is oh-so-common ({} mainly) due to automatic garbage collection. What is your take on this? Thanks!

    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

  • handling mouseover/mouseout events for dijit.TitlePane's titleNode

    - by Shailesh Kumar
    I have a lot of dijit.TitlePanes stacked up one after another. I wish to handle the onmouseover and onmouseout events for the tile part of the TitlePane. What is the correct way of doing this? Will something like : dojo.connect(titlePane.titleNode, 'onmouseover', function f() {}); work, where titlePane is a reference to some dijit.TitlePane object? Is there some declarative way of setting up such an event handler using "dojo/mehtod"?

    Read the article

  • Can I declare the same value for two attributes at once

    - by graphicdivine
    For example, for accessibility reasons I want my onfocus and onmouseover to have identical values. For the sake of maintainability I want to declare this once only. What I'd like to be able to do is this: <a onmouseover,onfocus="assist('hello');">linktext</a> But, of course, that would be too easy, and doesn't work. What's the best way I can achieve this DRYing out of my tags?

    Read the article

  • VB6: assign javascript function to a dom element

    - by Fuxi
    hi, i'm using the mshtml library for parsing out html via MSHTML.HTMLDocument. my question: is there a way to assign a javascript function to a dom element? i've tried something like: div.onmouseover = "function(){alert('mouseover')}" and div.setattribute "onmouseover" , "function(){alert('mouseover')}" without success (no error but no effect either). anyone knows if its possible? thx

    Read the article

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

< Previous Page | 1 2 3 4 5 6 7 8 9  | Next Page >