JavaScript - Mouse Over Text Doesn't Appear In Firefox
I put in a code, so that when you hover over a link, text appears at the bottom of the page. My code works fine in IE 8, but the text doesn't appear in Firefox. I ran Firebug, and it gave me a "detailsbox is not defined" error. I'm still trying to figure javascript out, and could really use your help!
Thanks Code: <script type="text/javascript"> function menu (whichMenu,whatState){ if (document.getElementById) {document.getElementById(whichMenu).style.visibility = whatState;} else {document[whichMenu].visibility = whatState;} } function details(what){ myInfo={"Threat":"text.", "Compliance":"text.", "Virtualization":"text.", "Convergence":"text."} detailsBox.innerHTML=myInfo[what] } </script> <LINK href="main.css" rel="stylesheet" type="text/css"> <style type="text/css"> <!-- a.black:link {color: #000000;} a.black:active {color: #000000;} a.black:visited {color: #000000;} a.black:hover {color: #000000;} a.red:link {color: #ff0000;} a.red:active {color: #ff0000;} a.red:visited {color: #ff0000;} a.red:hover {color: #ff0000;} --> </style> <script type="text/javascript"> function newPopup(url) {popupWindow = window.open(url,'popUpWindow','dependent=yes,height=570,width=750,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no')} </script> <script type="text/javascript"> function newPopup2(url) {popupWindow = window.open(url,'popUpWindow','dependent=yes,height=570,width=750,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no')} </script> </head> <body bgcolor="#c1c2c2"> <table width="1065" cellpadding="0" cellspacing="0" border="0"> <tr><td colspan="6"><img src="images/White_Rectangle.jpg" width="1065" height="24"></td></tr> </table> <table width="1065" bgcolor="white" cellpadding="0" cellspacing="0" border="0"> <tr><td><img src="images/White_Rectangle.jpg" width="17" height="55"></td><td colspan="5"><a href="index.html"><img src="images/Trend_Micro_Securing_Your_Web_World_Logo.gif" border="0"></a></td> <td><img src="images/White_Rectangle.jpg" width="100" height="55"></td> <td align="right"><font size="2" face="Interstate-Regular"><a href="JavaScript:newPopup('help.html');" style="text-decoration:none" class="red">Help</a></font> <font size="2" face="Interstate-Regular" color="gray"> | </font> <font size="2" face="Interstate-Regular"><a href="JavaScript:newPopup2('quiz.html');" style="text-decoration:none" class="red">Feedback</a></font> <br> <br> <font size="2" face="Interstate-Regular"><a href="http://www.trendmicro.com" style="text-decoration:none" class="black" rel="nofollow" target="blank">www.trendmicro.com</a></font> </td> <td><img src="images/White_Rectangle.jpg" width="25" height="55"></td> </tr> </table> <table width="1065" cellpadding="0" cellspacing="0" border="0"> <tr><td colspan="6"><img src="images/White_Rectangle.jpg" width="1065" height="18"></td></tr> </table> <table width="1065" cellpadding="0" cellspacing="0" border="0"> <tr><td><A HREF="products.html" onmouseover="document.but.src='images/Upsell_Reference_Gradient.jpg'"onmouseout="document.but.src='images/Upsell_Reference_Tab.jpg'"><IMG SRC="images/Upsell_Reference_Tab.jpg" NAME="but" width="178" height="38" BORDER="0"></A></td><td><A HREF="competitor_products.html" onmouseover="document.but2.src='images/Competitor_Products_Gradient.jpg'"onmouseout="document.but2.src='images/Competitor_Products_Tab.jpg'"><IMG SRC="images/Competitor_Products_Tab.jpg" NAME="but2" width="178" height="38" BORDER="0"></A></td><td><img src="images/Red_Bar.jpg" width="178" height="38"></td><td><img src="images/Red_Bar.jpg" width="177" height="38"></td><td><img src="images/Red_Bar.jpg" width="177" height="38"></td><td><img src="images/Red_Bar.jpg" width="177" height="38"></td></tr> <tr><td colspan="6"><img src="images/White_Rectangle.jpg" width="1065"></td></tr> </table> <table width="1024" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top"> <table cellpadding="0" cellspacing="0" border="0" > <tr> <td valign="top" bgcolor="#FFFFFF"> <div style="overflow:auto; width:300px; height:820px; background-color:#ebebe9; text-align:right; padding-right:1px;"> <div style="text-align:left;"> <a href="index.html"><img src="images/home_btn.jpg" border="0" /></a> <div class="glossymenu" > <a class="menuitem submenuheader" href="" ><div style="margin-top:4px;">Client/Server Suite</div></a> <div class="submenu"> <ul> <li><a onmouseover="details('Threat')" href="products_css_detail1.html" rel="nofollow" target="mainBody" class="menulink">Threat Landscape</a></li> <li><a onmouseover="details('Compliance')" href="products_css_detail2.html" rel="nofollow" target="mainBody" class="menulink">Security Compliance</a></li> <li><a onmouseover="details('Convergence')" href="products_css_detail4.html" rel="nofollow" target="mainBody" class="menulink">Convergence and Cost Reduction</a></li> </ul> </div> Similar TutorialsHello, I've made a scrollable image gallery. I need the big image to pop up when the thumbnails are hovered over. It works fine in Firefox but in IE the big image fails to disappear when you take the mouse off the thumbnail. Please could someone look at this jquery code for me I am new to this someone made this for me but it really needs to work in IE too. Many thanks for your time emmamargaret <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".scrollable").scrollable({ vertical: true, mousewheel: true }); var container = $("#imagewrap"), content = $("#centrecontainer"); $(".items img").bind("mouseenter mouseleave", function(e) { var thumb = $(this); if (e.type == 'mouseenter') { container.css({backgroundImage: "url(http://www.emmagallagher.co.uk/" + thumb.attr("src") + ")"}); } else { container.css({backgroundImage: none }); } content.toggle(e.type == 'mouseleave'); }); }); var MM_swapImage = MM_swapImgRestore = function() {}; </script> Hi I have a control on the left side of the page which sits inside a div. The control reacts to where the mouse is positioned within the div. This works fine in IE but I cant get it working in Firefox. Heres what I have: Code: <div id="divcon" class="boxContentLeft" OnMouseMove="SetValues(event);"> function SetValues(event) { var ev=(!event)?window.event:event; //Moz:IE if (ev.pageX) { //Mozilla or compatible /* The absolute position of the control */ var MarqPos = GetAbsPosition(divcon); alert('MarqPos x = '+MarqPos.x+'\nMarqPos y = '+MarqPos.y); /* Relative to this div */ MousePointerDivX = ev.pageX-MarqPos.x; MousePointerDivY = ev.pageY-MarqPos.y; alert('MousePointerDivX = '+MousePointerDivX+'\nMousePointerDivY = '+MousePointerDivY); /* Relative to the top left of the viewable area */ MousePointerClientX = ev.pageX; MousePointerClientY = ev.pageY; alert('MousePointerClientX = '+MousePointerClientX+'\nMousePointerClientY = '+MousePointerClientY); } else if(ev.clientX) { //IE or compatible /* Relative to this div */ MousePointerDivX = window.event.x; MousePointerDivY = window.event.y; alert('MousePointerDivX = '+MousePointerDivX+'\nMousePointerDivY = '+MousePointerDivY); /* Relative to the top left of the viewable area */ //MousePointerClientX = window.event.clientX; //MousePointerClientY = window.event.clientY; //alert('MousePointerClientX = '+MousePointerClientX+'\nMousePointerClientY = '+MousePointerClientY); /* The absolute position of the control */ var MarqPos = GetAbsPosition(divcon); alert('MarqPos x = '+MarqPos.x+'\nMarqPos y = '+MarqPos.y); /* The mouse position relative to top left of page */ //MousePointerX = mouseX(window.event); //MousePointerY = mouseY(window.event); //alert('MousePointerX = '+MousePointerX+'\nMousePointerY = '+MousePointerY); /* The control relative to the top left of the parent control */ //var OffsetLeft = marquees.offsetLeft; //var OffsetTop = marquees.offsetTop; //alert('OffsetLeft = '+OffsetLeft+'\nOffsetTop = '+OffsetTop); } else { //old browsers return false; } setInterval("",20); } // Calculates the object's absolute position, and width and height function GetAbsPosition(object) { var position = new Object; position.x = 0; position.y = 0; if( object ) { position.x = object.offsetLeft; position.y = object.offsetTop; if( object.offsetParent ) { var parentpos = GetAbsPosition(object.offsetParent); position.x += parentpos.x; position.y += parentpos.y; } } position.cx = object.offsetWidth; position.cy = object.offsetHeight; return position; } Using IE only I didnt need to find out the position of the DIV within the page as I could just use 'window.event.x' which would return the x coordinate within the DIV. I dont think you can do that with Firefox so you have to get the coordinate of the mouse and then subtract the coordinates of the DIV. But when Im calling GetAbsPosition(divcon) I get Error: divcon is not defined. Can somebody please tell me why I can call GetAbsPosition from IE and it works but I get an error calling the same thing in Firefox. Thanks it works great in chrome and strangely enough internet explorer 8 but doesn't work in firefox Code: // Detect if the browser is IE or not. // If it is not IE, we assume that the browser is NS. var IE = document.all?true:false; // If NS -- that is, !IE -- then set up for mouse capture if (!IE) document.captureEvents(Event.MOUSEMOVE) // Set-up to use getMouseXY function onMouseMove document.onmousemove = DRAG; // Temporary variables to hold mouse x-y pos.s // Main function to retrieve mouse x-y pos.s var tempX = 0; var tempY = 0; function DRAG(e) { if (!IE) { // grab the x-y pos.s if browser is NS tempX = e.pageX; tempY = e.pageY; } else { // grab the x-y pos.s if browser is IE tempX = event.clientX + document.body.scrollLeft tempY = event.clientY + document.body.scrollTop } // catch possible negative values in NS4 if (tempX < 0){ tempX = 0; } if (tempY < 0){ tempY = 0; } // show the position values in the form named Show // in the text fields named MouseX and MouseY var w = getW(); var h = getH(); if(tempX > (w-32)){tempX = w-32;} if(tempY > (h - 32)){tempY = h-32; } var newX = tempX-id.offsetWidth; var newY = tempY-header.offsetHeight-id.offsetHeight; if(newX < 0){newX = 0; } if(newY < 0){newY = 0; } document.getElementById('myx').innerHTML = newX; document.getElementById('myy').innerHTML = newY; id.style.left = newX+"px"; id.style.top = newY+"px"; Hi Exprts, I am using a (anylink)javascript menu from dynamic drive. Basically I am having a design issue but posting the problem here because I think this can be fixed through JS. Please download the attached files. You will see the menu & the sub menu on mouse over. Problem is that.... when the submenu appears & I take my mouse to the sub menu, the parent item hover style disappears. I mean, it doesn't look active. I just want the parent item active when users moves his/her mouse to sub menu. Thats all. Please suggest me any solutions for this. Thank you in advance. http://bowser.effectgames.com/~jhuck.../multiple.html is there a way to add a tipbox when the mouse hover on the copied text by jquery.the tip box say"the text has been copied" thank you. want to get selected text and image values .Since there is an randomly changed text and image on my page.I used window.getSelection() but this will return only selected text values not images ..so please guide me to solve this problem.
Heya, I wrote the following page in a day or two (please don't mind the layout). Everything seems to work excellent, apart from in Firefox (FF) in which it doesn't seem to work at all. None of the other browsers have any trouble with it. I'm pretty new to Javascript (everything you see in the source code is pretty much all I know) and I have absolutely no idea why it doesn't work in Firefox. The page in question could be found [link has been removed]. It's all there is to it. So yeah, how to actually make this work in FF? Thanks a whole bunch in advance! Much appreciated. i am using the following code to set the height of the div based on its contents. it works fine in IE but not in mozilla. Do anybody help me to solve this? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> function fnCheckScroll() { document.getElementById('btnCheck').innerHTML = "The value of scrollHeight is: " + oID_1.scrollHeight + "px"; } function fnSetHeight() { oID_1.style.height = oID_1.scrollHeight; return false; } </script> </head> <body> <form id="form1" runat="server"> <div> <h1>scrollHeight Property Sample</h1> <p>This sample demonstrates the use of the <b>scrollHeight</b> property to retrieve the height of the viewable content.</p> <div id="oID_1" style="overflow: scroll; height: 200px; width: 150px; text-align: left"> The <b>scrollHeight</b> property is read-only, allowing you to obtain the actual height of the scrollable content. Even though the height of this <b>div</b> is 200 pixels, the height inside the scrolling text box might be less, since the wrapped text may not use the entire area within the object. The <b>scrollHeight</b> dimension may be useful for a variety of reasons; for example, the height of the <b>div</b> could be set to the <b>scrollHeight</b> to conserve horizontal space while respecting the set width as a maximum. </div> <p><button id="btnCheck" onclick="fnCheckScroll()">Check scrollHeight </button></p> <p><button id="btnSetIt" onclick="return(fnSetHeight());">Set DIV height to scrollHeight </button></p> <!-- START_PAGE_FOOTER --><br> <br> <br> </div> </form> </body> </html> i am using the following code to set the height of the div based on its contents. it works fine in IE but not in mozilla. Do anybody help me to solve this? <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> function fnCheckScroll() { document.getElementById('btnCheck').innerHTML = "The value of scrollHeight is: " + oID_1.scrollHeight + "px"; } function fnSetHeight() { oID_1.style.height = oID_1.scrollHeight; return false; } </script> </head> <body> <form id="form1" runat="server"> <div> <h1>scrollHeight Property Sample</h1> <p>This sample demonstrates the use of the <b>scrollHeight</b> property to retrieve the height of the viewable content.</p> <div id="oID_1" style="overflow: scroll; height: 200px; width: 150px; text-align: left"> The <b>scrollHeight</b> property is read-only, allowing you to obtain the actual height of the scrollable content. Even though the height of this <b>div</b> is 200 pixels, the height inside the scrolling text box might be less, since the wrapped text may not use the entire area within the object. The <b>scrollHeight</b> dimension may be useful for a variety of reasons; for example, the height of the <b>div</b> could be set to the <b>scrollHeight</b> to conserve horizontal space while respecting the set width as a maximum. </div> <p><button id="btnCheck" onclick="fnCheckScroll()">Check scrollHeight </button></p> <p><button id="btnSetIt" onclick="return(fnSetHeight());">Set DIV height to scrollHeight </button></p> <!-- START_PAGE_FOOTER --><br> <br> <br> </div> </form> </body> </html> Hey guys, noobie here. I created a page with a thumbnail viewer. Click on a thumbnail and a larger version appears on the same page, NOT a pop up or Lightbox. It previews and validates fine. Even runs in IE. But not in FF(V. 3.6.18). Ideas? Code below with JS highlighted. [code] <?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>603 products page</title> <link rel="stylesheet" type="text/css" href="css/603.css" /> <script type="text/javascript"> <!-- <![CDATA[ function changeImage(filename) { mainimage.src = filename; } // ]]> --> </script> </head> <body> <div id="frame"> <div id="logoheader"> </div> <div id="navigation"> <table align="center" cellpadding="0" cellspacing="0"border="0"> <tr> <th><a href="index.html"><img src="images/buttons/homeup.png" border="0" alt="home"/></a></th> <th><img src="images/buttons/productsup.png" border="0" alt="products"/></th> <th><a href="web.html"><img src="images/buttons/webup.png" border="0" alt="web"/></a></th> <!--<th><a href="resume.html"><img src="images/buttons/resumeup.png" border="0" /></a></th>--> <th><a href="contact.html"><img src="images/buttons/contactup.png" border="0" alt="contact"/></a></th> </tr> </table> <!--home<a href="products.html"> | products | </a><a href="web.html">web / interface | </a><a href="resume.html">resume | </a><a href="contact.html">contact</a>--> </div> <div id="contentproducts"> <div id="tablediv"> <table align="center" cellpadding="0" border="0"> <tr> <th><a href="javascript:changeImage('images/imageslarge/lumbarlarge.jpg')"><img src="images/slices/images/lumbarslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/shaverlarge.jpg')"><img src="images/slices/images/shaverslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/laptoplarge.jpg')"><img src="images/slices/images/laptopslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/bodyformlarge.jpg')"><img src="images/slices/images/bodyformslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/footlarge.jpg')"><img src="images/slices/images/footslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/boomboxlarge.jpg')"><img src="images/slices/images/boomboxslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/hhlarge.jpg')"><img src="images/slices/images/hhslice.jpg" border="0" alt="hh"/></a></th> <th><a href="javascript:changeImage('images/imageslarge/wandlarge.jpg')"><img src="images/slices/images/wandslice.jpg" border="0" alt="wand"/></a></th> </tr> </table> <!--START--> <div id="largeimage"> <img name="mainimage" src="images/blank.jpg" alt="main image"/> </div> <!--END--> </div> </div> <div id="footer"> <img src="images/copyright.png" border="0" alt="footer logo"/> </div> </div> </body> </html> [code] Hi all, firstly i'm not a coder but i am capable of doing as instructed. I have some script that when used in conjunction with a button highlights all the text between 2 tags to make it easier for copying, it works great in IE but doesn't work in firefox, could someone help please? Here's the script and the button is below. Code: <script type="text/javascript"> function selectCode(a) { // Get ID of code block var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0]; // Not IE if (window.getSelection) { var s = window.getSelection(); // Safari if (s.setBaseAndExtent) { s.setBaseAndExtent(e, 0, e, e.innerText.length - 1); } // Firefox and Opera else { var r = document.createRange(); r.selectNodeContents(e); s.removeAllRanges(); s.addRange(r); } } // Some older browsers else if (document.getSelection) { var s = document.getSelection(); var r = document.createRange(); r.selectNodeContents(e); s.removeAllRanges(); s.addRange(r); } // IE else if (document.selection) { var r = document.body.createTextRange(); r.moveToElementText(e); r.select(); } } </script> Html button Code: <input type="button" value="Highlight Code" onclick="selectCode(this); return false;"> hi -- someone wrote a script for me to simulate an image map on a background header in wordpress. it works great in chrome and ie, but not firefox. can someone pls. help? thx. <code> <script type="text/javascript"> function geturl() { myMouseX=event.clientX if(myMouseX < 400) { return "http://www.alexandrazissu.com/az-blog/books/"; } else { return "http://www.alexandrazissu.com/az-blog/"; } } </script> </code> and then the call: <code> <div id="header-image" onclick="location.href = geturl();" style="cursor: pointer;"> </code> I've got to have a typo somewhere, but i can't seem to find it. I need a new pair of eyes to point it out for me. background: trying to code a mouseover link for a nav bar. everything is working( hyperlink, normal image shows up) but when i mouse over the image swap doesn't happen. I have 2 parts of code. 1st preloads images and does the swap function. loads in <head> See below: Code: <SCRIPT language="javascript" type="text/javascript"> if (document.images) { /* preload images */ var subcontractorsOn = new Image (); subcontractorsOn.scr = "subcontractorsOn.gif"; var subcontractorsOff = new Image (); subcontractorsOff.scr = "subcontractorsOff.gif"; } function mouseOn (imgName) { if (document.images) document [imgName].scr = eval (imgName + "On.scr"); } function mouseOff (imgName) { if (document.images) document [imgName].scr = eval (imgName + "Off.scr"); } </SCRIPT> 2nd just calls the functions to preform the swap. this is in the <body> see code below Code: <a href="subcontractors.htm" onMouseOut="mouseOn('subcontractors')" onMouseOver="mouseOff('subcontractors')"> <img src="subcontractorsOff.gif" height="40" width="133" name="subcontractors" id="subcontractors" border="0" alt="subcontractors"></a> any insight would be great. regards, Fatmann66 The photo html files on the Fanac Fan History project's website are setup to be displayed properly when JavaScript is disabled and reformatted by a php script when JavaScript is enabled. The reformatting adds some features and positions each photo's caption and credits based on the width of the photo and the browser's page width. This worked well except that, when a photo page was accessed the browser's back button wouldn't work properly. This was because I had failed to include the replace option in my windows.open statement. The statement now reads fileWindow = window.open(fileURL, "_self", "", true); and this has cured the problem with IE but it still doesn't work with FireFox. Oddly enough it worked correctly with Google's Chrome with/without the replace and with Opera and Safari it also sort of worked without the replace. With replace Opera works correctly but Safari stll needs a double click. Any suggestions? hi dears, I'm trying to do simple form validation. But the form submits right after validated! at FireFox only. as i tried it at IE it works fine. condition: if return false the event must be stop, killed submitting the form value's. my form is: Code: <form action="index.php" id="cat_form" method="post" name="cat_form" onsubmit="return cats();"> my js is: Code: function cats() { if (document.cat_form.txttitle.value=="") { alert ("Sorry, Don't keep it blank!!") cat_form.txttitle.focus(); return false; } else if (document.farticle.txtperpg.value==0) { alert("Sorry, Value must be grater than Zero"); cat_form.txtperpg.focus(); return false; } else { return true; } } Any Idea ? ... like if you input text, you can't select it by sweeping it with the mouse, or shift-left arrow. Which I thought were out of the box features. You can see it in the bottom right corner of the map here. I don't think the autocomplete has anything to do with it (I disconnected that and nothing changed) but maybe because it gets made by innerhtml? any suggestions welcome. So I am working on a project to take an integer that the user gives, and then get all the squares and cubes of all the numbers before that to the number given. It displays it in a text area. Maybe I am just lost for the moment, but It just prints the number that I give with the square root and cube instead of starting from 1, and ended on the integer I give. Code: var square_cube = function (){//This f var number = parseInt($("maxbase").value); for (var i=1;i <= number;i++) { var squ = Math.pow(i,2); } var j; for (j=1;j<=number;j++) { var cub = Math.pow(j,3); } var message = i-1 + " " +squ+ " " +cub; $("powers").value = message; } Hey everyone, this is my first post on this forum (i read rules etc.) so please welcome me and help me if you can, I will do same for others if my knowledgle allows to. Well, let's get to the point. I am building extension for Firefox (only) and I am stuck. I am trying to retrive text and text only from a web document. I am to use javascript and here is what I got so far. (example) Code: <p id="essay">This is <span> just </span> <b>a test text !!!</b></p> <table><tr><td>random test elements</td></tr></table> Random text on the website <br /> <a href="randomaddress.html">Web Address</a> <br /> <script type="text/javascript"> function getWholeText() { var rootnode=document; var walker=document.createTreeWalker(rootnode, NodeFilter.SHOW_TEXT, null, false) walker.firstChild() var paratext=walker.currentNode.textContent; while (walker.nextNode()) paratext+=walker.currentNode.textContent; alert(paratext) } getWholeText(); </script> The problem is that function that I made returns all text and all Javascript and CSS as they are treated in DOM as text_nodes. What I wanna get is only text that is displayed on screen without any formating. From given code I would like to retrive something like that: Quote: This is just a test text !!! random test elements Random text on the website Web Address Any advice ? well the jquery is working fine for twitter and other stuff but its not working for facebook, when i highlight the text and select fb to share at then the facebook share just show the meta description of site and not the selected area. I am not able to understand where am i going wrong, any assistance provided is highly appreciated. Go to this link http://www.blobh.com/2011/09/testing-1.html there select some text then a tooltip kind of thing will appear first share at twitter then at facebook you will understand the matter. the script i am using is this Code: <script type='text/javascript'> $('.demo1').selectedTextSharer({ lists:"Twitter,http://twitter.com/home?status=%ts ,favicon|Facebook,http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.blobh.com%2F&t=%s,favicon|Wikipedia (en),http://en.wikipedia.org/w/index.php?title=Special:Search&search=%s,favicon|Google Maps,http://maps.google.com/?q=%s,favicon", extraClass: 'dark', title: 'Share this text ...', borderColor: '#7F241C', background : '#4F663A', titleColor : '#7F241C', textColor : '#FFFFFF', hoverColor: '#7F241C' }); </script> and the other script is this one http://bloghuts.googlecode.com/files...-sharer.min.js and the html is like this Code: <!-- Just wrap a text with a div and add a class, thats all ! --> <div class="demo1"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</div> <textarea class="demo4"></textarea> <input class="demo4" type="text" /> Hi, I have a form that when you click submit gives a warning box asking if to continue code below Now when I type in the text field and press enter it doesn't submit nor does it pop up the warning box, how would I do this Code for submit button Code: <script LANGUAGE="JavaScript"> <!-- function submitMyForm() { var agree=confirm("ARE YOU SURE ?"); if (agree) return true ; else return false ; } // --> </script> Code: <form action="admin-delete.php" method="post" name="cp_delete" id="cp_delete"> <input type="text" name="cp_delete_bg" id="cp_delete_bg"> <input type="submit" name="submit" value="submit" onclick="return submitMyForm()"/> </form> |