JavaScript - Code Is Working, But Page Is One Big Link
Hey guys,
On my personal website, I just created a rollover image gallery using Javascript. Each time you roll over a thumbnail, the image above changes to the corresponding thumbnail image. http://www.thelittlelizzard.com/Bahamas.html After spending hours getting that to work properly, my footer is now showing as one huge blue link. I believe I'm forgetting to close a tag somewhere? Being new to Javascript, I don't have a clue what I am forgetting to close to cause my footer to become a huge blue link like that. Does anyone have any ideas? Here is a copy of the code of my body section where I believe the problem may be... Code: <p>Where we stayed: <a href="http://www.starwoodhotels.com/sheraton/property/overview/index.html?propertyID=3067" onclick="window.open(this.href);return false;">Radisson Cable Beach Resort</a> (Now called Sheraton Nassau Cable Beach): </p> <p>Dates we travelled: March 2004, 2005 and 2006</p> <p>Flight Time from New York: 2.5 hours</p> <br /><br /> <div id="divcenter"> <p><img align="center" border="0" src="Bahamas/bahamas.jpg" style="border-right: 1 solid #006666" name="altimg" width="548" height="316" /> </p> <p> <a onmouseover="on('image1');" onmouseout="off('image1')"> <img src="Bahamas/bahamas.jpg" width="45" height="45"></a> <a onmouseover="on('image2');" onmouseout="off('image2')"> <img src="Bahamas/bahamas-1.jpg" width="45" height="45"></a> <a onmouseover="on('image3');" onmouseout="off('image3')"> <img src="Bahamas/bahamas-2.jpg" width="45" height="45"></a> <a onmouseover="on('image4');" onmouseout="off('image4')"> <img src="Bahamas/bahamas-3.jpg" width="45" height="45"></a> <a onmouseover="on('image5');" onmouseout="off('image5')"> <img src="Bahamas/bahamas-4.jpg" width="45" height="45"></a> <a onmouseover="on('image6');" onmouseout="off('image6')"> <img src="Bahamas/bahamas-5.jpg" width="45" height="45"></a> <a onmouseover="on('image7');" onmouseout="off('image7')"> <img src="Bahamas/bahamas-6.jpg" width="45" height="45"></a> <a onmouseover="on('image8');" onmouseout="off('image8')"> <img src="Bahamas/bahamas-7.jpg" width="45" height="45"></a> <a onmouseover="on('image9');" onmouseout="off('image9')"> <img src="Bahamas/bahamas-8.jpg" width="45" height="45"></a> <a onmouseover="on('image10');" onmouseout="off('image10')"> <img src="Bahamas/bahamas-9.jpg" width="45" height="45"></a> <a onmouseover="on('image11');" onmouseout="off('image11')"> <img src="Bahamas/bahamas-10.jpg" width="45" height="45"></a> <a onmouseover="on('image12');" onmouseout="off('image12')"> <img src="Bahamas/bahamas-11.jpg" width="45" height="45"></a> <a onmouseover="on('image13');" onmouseout="off('image13')"> <img src="Bahamas/bahamas-12.jpg" width="45" height="45"></a> <a onmouseover="on('image14');" onmouseout="off('image14')"> <img src="Bahamas/bahamas-13.jpg" width="45" height="45"></a> <a onmouseover="on('image15');" onmouseout="off('image15')"> <img src="Bahamas/bahamas-14.jpg" width="45" height="45"></a> <a onmouseover="on('image16');" onmouseout="off('image16')"> <img src="Bahamas/bahamas-15.jpg" width="45" height="45"></a> <a onmouseover="on('image17');" onmouseout="off('image17')"> <img src="Bahamas/bahamas-16.jpg" width="45" height="45"></a> <a onmouseover="on('image18');" onmouseout="off('image18')"> <img src="Bahamas/bahamas-17.jpg" width="45" height="45"></a> <a onmouseover="on('image19');" onmouseout="off('image19')"> <img src="Bahamas/bahamas-18.jpg" width="45" height="45"></a> <a onmouseover="on('image20');" onmouseout="off('image20')"> <img src="Bahamas/bahamas-19.jpg" width="45" height="45"></a> <a onmouseover="on('image21');" onmouseout="off('image21')"> </div> </div> <div id="footer"> <p>© 2009 TheLittleLizzard.com<br> All images and content on this website are owned by The Little Lizzard.</br> </p> <p>All rights reserved. </p> <p><a href="http://www.TheLittleLizzard.com">Home</a> <a href="http://www.ScreamingLizzardProductions.com" onclick="window.open(this.href);return false;">Site Design</a></p> </div> </div> </body> Thanks again for any help. This is one of the only places I get real answers that solve my problems! Similar TutorialsHey everyone here is my code for looking up a city, and state by zip code. I am getting no errors and i believe it should work, but the code does not seem to want to function. Any ideas? Here is my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>City and State Lookup</title> <style type="text/css"> h1 { font-family:Arial; color:navy; } p, td { font-family:arial; font-size:11px; } </style> <script type="text/javascript"> /* <![CDATA[ */ var httpRequest = false; function getRequestObject() { try { httpRequest = new XMLHttpRequest(); } catch (requestError) { try { httpRequest = new ActiveXObject ("Msxm12.XMLHTTP"); } catch (requestError) { try { httpRequest = new ActiveXObject ("Microsoft.XMLHTTP"); } catch (requestError) { window.alert("Your browser does not support AJAX!"); return false; } } } return httpRequest; } function updateCityState() { if (!httpRequest) httpRequest = getRequestObject(); httpRequest.abort(); httpRequest.open("get","zip.xml"); httpRequest.send(null); httpRequest.onreadystatechange=getZipInfo; } function getZipInfo() { if (httpRequest.readyState==4 && httpRequest.status == 200) { var zips = httpRequest.responseXML; var locations = zips.getElementsByTagName("Row"); var notFound = true; for (var i=0; i<locations.length; ++i) { if (document.forms[0].zip.value == zips.getElementsByTagName( "ZIP_Code")[i].childNodes[o].nodeValue) { document.forms[0].city.value = zips.getElementsByTagname( "City") [i].childNodes[0].nodeValue; document.forms[0].state.value = zips.getElementByTagName( "State_Abbreviation")[i].childNodes[0].nodeValue; notFound = flase; break; } } if (notFound) { window.alert("Invalid ZIP code!"); document.forms[0].city.value = ""; document.forms[0].state.value = ""; } } } /* ]]> */ </script> </head> <body> <h1>City and State Lookup </h1> <form action=""> <p>Zip code <input type="text" size="5" name="zip" id="zip" onblur="updateCityState()" /></p> <p>City <input type="text" name="city" /> State <input type="text" size="2" name="state" /></p> </form> </body> </html> hi, I have a few links on my website as follows: Code: <a href="javascript:switchid('a6');">Link 6</a> but when I view source it comes out like this: Code: <a href='javascript:switchid('>Link 6</a> Can someone please help? Hi there, I recently used a random link generator found at http://javascriptkit.com in my webpage: http://random-casino.com The code works in both Firefox and Google Chrome, but not in IE. Any ideas? Hey guys, I have this JS. Code: function funcBut(){ document.getElementById('ref_button').innerHTML = 'pressed'; } Now, this button activates the function with no problem: Code: <input type='button' onclick='funcBut();' value='Change Text'/><br /> But this link won't work and I don't understand why Code: <a href="#" onclick="funcBut(); return false;">test</a><br /> Can anyone help? Hello Again, After much help and support i have decided that the best way to do what i want (if i can get it working is like the below). The idea is to click a link and content will load into a div from another div on another page in the same webspace. I can make a test page as directed by the guidance i recieved but there are some features that wont work properly or are not what i am after. For example in the test case the link to load the div is inside the div i want to update. In my case i want to click on the algebra link in the blue horizontal menu and then the main menu updates. I wont lie i have not got the skills to adapt this script on my own. here is the test page http://www.bushcottages.co.uk/loaddata.htm the main page i would like it to work on as its not working correctly is http://www.bushcottages.co.uk/new.htm test code is Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Click This Link To Load My Favor</title> <script type="text/javascript" src="java/jquery-1.5.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#loadData").click(function() { $(this).text("...One Moment Please..."); $("#container").append('<div id="favoriteMovies"></div>') .children("#favoriteMovies").hide() .load("theOtherPage.htm ul#favoriteMovies", function() { $("#loadData").remove(); $("#favoriteMovies").slideDown("slow"); }); return false; }); }); </script> <style type="text/css"> #container { width: 300px; height: 200px; font-family: georgia; font-weight: bold; border-style: solid; border-width: 2px; border-color: #000066; } </style> </head> <body> <div id="container"> <li><a href="#" id="loadData">Click This Link To Load My Favorite Movies</a></li> </div> </body> </html> code for main page is Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Language" content="en-gb"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Mathematics Learning Zone</title> <meta name="description" content="Learn Key Stage 4 Mathematics and Achieve a Grade C."> <meta name="keywords" content="Maths, Mathematics, Key Stage 4, Key Stage 4 Maths, GCSE Maths, Maths Grade C"> <meta name="author" content="Peter Devlin"> <script type="text/javascript" src="java/jquery-1.5.min.js"></script> <script type="text/javascript" src="http://www.bushcottages.co.uk/java/jquery.newsTicker-1.2.2.js"></script> <script type="text/javascript"> <!-- $(document).ready(function() { if (document.getElementById('news')) { var options = { newsList: "#news", tickerRate: 20, loopDelay: 6000, startDelay: 10, placeHolder1: "_" } $().newsTicker(options); } }); --> </script> <script type="text/javascript"> $(document).ready(function() { //Default Action $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active content return false; }); }); </script> <script type="text/javascript"> var newwindow; function poptastic(url) { newwindow=window.open(url,'brainteasersolution.htm','height=400,width=400,left=40%,top=20%'); if (window.focus) {newwindow.focus()} } </script> <script type="text/javascript"> $(document).ready(function() { $("#number").click(function() { $(this).text("...One Moment Please..."); $("#container").append('<div id="Algebra"></div>') .children("#Algebra").hide() .load("Algebra.htm ul#algebra", function() { $("#number").remove(); $("#Algebra").slideDown("slow"); }); return false; }); }); </script> <style type="text/css"> * { border: 0; margin: 0; padding-top:0; } #topmargin { width:900px; height:5px; margin:auto; } #banner { width: 900px; height: 70px; background-image: url('banner.png'); margin: auto; margin-bottom: 5px; background-color: #000066; } #horizontalmenu { width: 900px; height: 25px; margin: auto; margin-bottom: 5px; background-color: #000066; } #horizontalmenu ul { list-style-type: none; margin: 0px; padding: 2px 0px 0px 0px; } #horizontalmenu ul li { float: left; display: block; text-align: center; width: 300px; } #horizontalmenu ul li a { text-decoration: none; font-family: georgia; font-size: 1em; color: #fafafa; } #horizontalmenu ul li a:hover { font-family: georgia; font-size: 1em; padding: 5px 40px 5px; color: #000000; background-color: #ffffff; } #mainpage { width: 900px; margin: auto; } #one { float: left; width: 150px; margin-right: 5px; } #two { float: left; width: 590px; margin-right: 5px; } #three { float: left; width: 150px } #verticalmenu { float: left; width: 150px; } #verticaltopmenu { float: left; width: 150px; height: 23px; background-color: #000066; } #verticalmainmenu { float: left; width: 146px; height: 372px; text-decoration: none; border-style: solid; border-width: 2px; border-color: #000066; padding-top: 2px; padding-bottom: 2px; } #verticalmainmenu ul { text-decoration: none; list-style: none; padding: 0px; margin: 0px; color: black; } #verticalmainmenu ul li { list-style: none; text-decoration: none; display: block; padding: 0px; text-align: left; font-family: georgia; font-size: .8em; color: black; } #verticalmainmenu ul li a { padding: 0px 0px 0px 5px; text-decoration: none; text-align: left; color: black; } #verticalmainmenu a:hover { background-color: white; color: #000066; } #tickercontainer { float: left; width: 586px; height: 21px; margin-bottom: 5px; border-color: #000066; border-style: solid; border-width: 2px; } #tickersidetitle { float: left; width: 125px; height: 21px; background-color: #000066; } #tickercontent { float: left; width: 461px; height: 21px; padding: 0px; } ul#news { margin: 0px; height: 21px; padding: 0px 0px 0px 0px; } ul#news li { list-style: none; font-family: georgia; font-size: 14px; font-weight: bold; color: #004400; margin: 0px; padding: 0px 0px 0px 10px; } ul#news li a:link, ul#news li a:hover { color: #004400; text-decoration: none; } #contentwindow { float: left; width: 590px; } ul.tabs { width: 590px; /*--Set width of container--*/ height: 23px; /*--Set height of tabs--*/ margin: 0px; padding: 0px; float: left; list-style: none; border-bottom: 2px solid #000066; /*--Set line at bottom of ul--*/ } ul.tabs li { float: left; margin-right: 1px; /*adjusts gap between tabs*/ height: 23px; /*--Subtract 1px from the height of the unordered list--*/ line-height: 23px; /*--Vertically aligns the text within the tab--*/ margin-bottom: -2px; background: #000066; border-color: #000066; border-style: solid; border: 2px; } ul.tabs li a { text-decoration: none; color: #FFFFFF; font-family: georgia; font-size: 14px; display: block; padding: 0 20px; } ul.tabs li.active a { color:#000000; border-color: #000066; border-style: solid; border: 2px; } ul.tabs li a:hover { background-color: #330099; border: 0px; } ul.tabs li.active, ul.tabs li.active a:hover /*--Makes sure that the active tab does not listen to the hover properties--*/ { color: #000000; background: #FFFFFF; border-color: #000066; border-style: solid; border: 2px 2px 2px 0px; border-bottom: 2px solid #FFFFFF; /*--Makes the active tab look like it's connected with its content--*/ } .tab_container { border: 2px solid #000066; border-top: none; overflow: hidden; clear: both; float: left; width: 586px; height: 346px; background: #FFFFFF; } .tab_content { padding: 20px; font-size: 1.2em; } #testsmenu { float: left; width: 150px; margin-bottom: 5px; } #teststopmenu { width: 150px; height: 23px; background-color: #000066; } #testsmainmenu { float: left; width: 146px; height: 70px; border-style: solid; border-width: 2px; border-color: #000066; } #testsmainmenu ul { float: left; margin-top: 2px; margin-bottom: 2px; width: 146px; padding: 0px; } #testsmainmenu ul li { font-family: georgia; font-size: 0.8em; list-style-image: url('test.png'); margin-left: 30px; padding: 0px; text-align: left; } #testsmainmenu ul li a { padding: 0px; text-decoration: none; text-align: left; color: black; } #testsmainmenu ul li a:hover { background-color: white; color: #000066; } #downloadsmenu { float: left; width: 150px; margin-bottom: 5px; } #downloadstopmenu { width: 150px; height: 23px; background-color: #000066; } #downloadsmainmenu { float: left; width: 146px; height: 70px; border-style: solid; border-width: 2px; border-color: #000066; } #downloadsmainmenu ul { float: left; margin-top: 2px; margin-bottom: 2px; width: 146px; padding: 0px; } #downloadsmainmenu ul li { font-family: georgia; font-size: 0.8em; list-style-image: url('download.png'); margin-left: 30px; padding: 0px; text-align: left; } #downloadsmainmenu ul li a { padding: 0px 0px 0px 5px; text-decoration: none; text-align: left; color: black; } #downloadsmainmenu ul li a:hover { background-color: white; color: #000066; } #worksheetsmenu { float: left; width: 150px; margin-bottom: 5px; } #worksheetstopmenu { width: 150px; height: 23px; background-color: #000066; } #worksheetsmainmenu { float: left; width: 146px; height: 70px; border-style: solid; border-width: 2px; border-color: #000066; } #worksheetsmainmenu ul { float: left; margin-top: 2px; margin-bottom: 2px; width: 146px; padding: 0px; } #worksheetsmainmenu ul li { font-family: georgia; font-size: 0.8em; list-style-image: url('worksheet.png'); margin-left: 30px; padding: 0px; text-align: left; } #worksheetsmainmenu ul li a { padding: 0px 0px 0px 5px; text-decoration: none; text-align: left; color: black; } #worksheetsmainmenu ul li a:hover { background-color: white; color: #000066; } #weblinksmenu { float: left; width: 150px; margin-bottom: 5px; } #weblinkstopmenu { width: 150px; height: 23px; background-color: #000066; } #weblinksmainmenu { float: left; width: 146px; height: 70px; border-style: solid; border-width: 2px; border-color: #000066; } #weblinksmainmenu ul { float: left; margin-top: 2px; margin-bottom: 2px; width: 146px; padding: 0px; } #weblinksmainmenu ul li { font-family: georgia; font-size: 0.8em; list-style-image: url('links.png'); margin-left: 30px; padding: 0px; text-align: left; } #weblinksmainmenu ul li a { padding: 0px 0px 0px 5px; text-decoration: none; text-align: left; color: black; } #weblinksmainmenu ul li a:hover { background-color: white; color: #000066; } p { text-align: center; font-family: georgia; font-size: 1em; color: #FFFFFF; padding-top: 2px; } p.a { text-align: center; font-family: georgia; font-size: 1em; color: #FFFFFF; padding-top: 0px; } p.b { text-align: center; font-family: georgia; font-size: 1em; color: #000000; padding-top: 0px; } p.c { text-align: center; font-family: georgia; font-size: 8px; color: #000000; padding-top: 0px; } </style> </head> <body> <div id="topmargin"></div> <div id="banner"></div> <div id="horizontalmenu"> <ul> <li> <a href="#" id="number">Number and Algebra</a></li> <li><a href="url">Geometry and Measures</a></li> <li><a href="url">Statistics - Data Handling</a></li> </ul> </div> <div id="mainpage"> <div id="one"> <div id="verticalmenu"> <div id="verticaltopmenu"><p>Main Menu</p></div> <div id="verticalmainmenu"> <ul> <li><a href="url">Angles</a></li> <li><a href="url">Properties of Shapes</a></li> <li><a href="url">Circle Theorems</a></li> <li><a href="url">Geometry of Cuboids</a></li> <li><a href="url">2d and 3d Shapes</a></li> <li><a href="url">Area</a></li> <li><a href="url">Perimeter</a></li> <li><a href="url">Prisms</a></li> <li><a href="url">Surface Area</a></li> <li><a href="url">Using Pi</a></li> <li><a href="url">Volumes</a></li> <li><a href="url">Transformations</a></li> <li><a href="url">Scale</a></li> <li><a href="url">Coordinates</a></li> <li><a href="url">Vectors</a></li> <li><a href="url">Bearings</a></li> </ul> </div> </div> </div> <div id="two"> <div id="tickercontainer"> <div id="tickersidetitle"><p class="a">Brainteasers</p></div> <div id="tickercontent"> <ul id="news"> <li>How many Degrees in a Triangle?</li> <li><a href="javascript:poptastic('brainteasersolution.htm');">Algebra - What is 4x = 20 - X? Click for answer</a></li> <li><a href="http://www.bushcottages.co.uk/1.htm">What is the most common class Called?</a></li> </ul> </div> </div> <div id="contentwindow"> <ul class="tabs"> <li><a href="#tab1">Acute</a></li> <li><a href="#tab2">Obtuse</a></li> <li><a href="#tab1">Reflex</a></li> <li><a href="#tab2">Vertex</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <p class="b">hello</p> <p class="c">Page Created by P.Devlin</p> </div> <div id="tab2" class="tab_content"> <p class="b">well done</p> <p class="c">Page Created by P.Devlin</p> </div> </div></div> </div> <div id="three"> <div id="testsmenu"> <div id="teststopmenu"><p>Online Tests</p></div> <div id="testsmainmenu"> <ul> <li><a href="url">Linear Graphs</a></li> <li><a href="url">Equations</a></li> <li><a href="url">Averages</a></li> <li><a href="url">Algebra</a></li> </ul> </div> </div> <div id="downloadsmenu"> <div id="downloadstopmenu"><p>Downloads</p></div> <div id="downloadsmainmenu"> <ul> <li><a href="url">Linear Graphs</a></li> <li><a href="url">Equations</a></li> <li><a href="url">Algebra</a></li> <li><a href="url">Tests</a></li> </ul> </div> </div> <div id="worksheetsmenu"> <div id="worksheetstopmenu"><p>Worksheets</p></div> <div id="worksheetsmainmenu"> <ul> <li><a href="url">Linear Graphs</a></li> <li><a href="url">Equations</a></li> <li><a href="url">Algebra</a></li> <li><a href="url">Tests</a></li> </ul> </div> </div> <div id="weblinksmenu"> <div id="weblinkstopmenu"><p>Web Links</p></div> <div id="weblinksmainmenu"> <ul> <li><a href="url">Linear Graphs</a></li> <li><a href="url">Equations</a></li> <li><a href="url">Algebra</a></li> <li><a href="url">Tests</a></li> </ul> </div> </div> </div> </div> </body> </html> Many thank to you all for your help so far. Peter I am using JavaScript for popups in my OpenLayers map. All the html tags like <br> work in the popup window except for the link href tag. Everytime I put in a link in my popup window it doesnt work: Code: var mystring = "here is link:<br> <a href=\"www.sun.com\">link</a>"; popup = New OpenLayers.Popup.FramedCloud("chck", feature.coord, null, mystring, null, true, onPopupClose); Also tried link without quotes and with ticks and nothing seems to work with the link not taking me anywhere. Please advise. I was advised by a community member this post would be better suited for the JavaScript section (hope someone can help): The exit pop-up script I have is working fine, other than the fact that it engages on any internal links as well. Below I have the original script I was using along with a modified script sent back to me from someone in another forum. They also advised me to add rel="external" to all of my external links. I'm not sure if a different condition would apply whether the link stayed within my site or went elsewhere. In any event, it's still not working. The changes get me to my desired page on internal links, but the pop-up still engages and I have to click "OK" before it takes me there. I'm obviously looking to get this to work so that all internal links go straight to the page they're defined to, without the pop-up engaging at all. Both script versions are below: My original: Code: <script type="text/javascript"> var internal = 0; function bunload() { if (internal != 1) { window.onbeforeunload = null; alert("******************************************************\n WAIT! WAIT! WAIT! WAIT! WAIT! WAIT!! WAIT!!\n******************************************************\n\nMy partner will probably KICK MY *** for this...\n\nI am secretly giving away a LIMITED number of $20\ncoupons just for Tweeting about us.\n\nIf you act right now, you can grab our Manuscript\nplus ALL Bonuses for just $27!\n\nJust click *CANCEL* on the next window to get your\nV.I.P. discount link!\n\n******************************************************"); window.location = "gift page"; return "******************************************************\n Click CANCEL - Click CANCEL - Click CANCEL \n******************************************************\n\n Click *CANCEL* Now to get your V.I.P. discount!\n\n"; } else { internal = 0; } } if (internal != 1) { window.onbeforeunload = bunload; } else { internal = 0; } </script> And the modified script another community member replied back to use: Code: <script type="text/javascript"> var internal = 0; function bunload() { if (internal != 1) { window.onbeforeunload = null; alert("******************************************************\n WAIT! WAIT! WAIT! WAIT! WAIT! WAIT!! WAIT!!\n******************************************************\n\nMy partner will probably KICK MY *** for this...\n\nI am secretly giving away a LIMITED number of $20\ncoupons just for Tweeting about us.\n\nIf you act right now, you can grab our Manuscript\nplus ALL Bonuses for just $27!\n\nJust click *CANCEL* on the next window to get your\nV.I.P. discount link!\n\n******************************************************"); window.location = "gift page"; return "******************************************************\n Click CANCEL - Click CANCEL - Click CANCEL \n******************************************************\n\n Click *CANCEL* Now to get your V.I.P. discount!\n\n"; } else { internal = 0; } } if (internal != 1) { window.onbeforeunload = bunload; } else { internal = 0; } window.onload = function() { var links = document.getElementsByTagName('a'); for(i = 0 ; i < links.length; i++) { if(links[i].getAttribute('rel') == 'external') { links[i].onclick = function() { bunload(); } } } } </script> Any suggestions on what I'm doing wrong here? My apologies, but my coding isn't very strong and I'm just picking this stuff up as I go. Thanks thinking about implementing some accordion menus. Want to use the latest code. Is this modern code on this site? also, anyone have a link to any modern code for onmouseover instead of onclick navigation through accordion menus? Hi I'm pretty new to javascript.. infact very new, only 4 days old , and I'm like this --> Anyway, I want to add a link in this menu . I want the link to be where the text " Go to the front page, Want to know more about us?, Keep in touch with us, call any time you want " How do I do that? cheers! here's the page : http://www.mts-photo.com/fotter_nav.html 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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Jquery Tutorial : Horizontal animated menu</title> <link type="text/css" href="css/menu.css" rel="stylesheet" media="screen" /> <script type="text/javascript" src="inc/jquery.js"></script> <script type="text/javascript" src="inc/menu.js"></script> </head> <body> <div id="wrapper"> <ul id="menu"> <li><a href="test.html" title="Go to the front page", >Home</a> </li> <li><a href="#" title="Want to know more about us?">About Us</a></li> <li><a href="#" title="Keep in touch with us, call any time you want">Contact Us</a></li> <li><a href="#" title="Ny link">Nylink 1</a></li> </ul> </div> </body> </html> Ok guys if you look at this page www.runningprofiles.com/members/shout/view.php my code works great.... But when i add it to the rest of the script the code wont work shows he http://www.runningprofiles.com/membe...ll_Script.php# Below is view.php (the one that works) and the one added to the code scirpt is the one the does not. PHP Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { $(".view_comments").click(function() { var ID = $(this).attr("id"); $.ajax({ type: "POST", url: "viewajax.php", data: "msg_id="+ ID, cache: false, success: function(html){ $("#view_comments"+ID).prepend(html); $("#view"+ID).remove(); $("#two_comments"+ID).remove(); } }); return false; }); }); </script> <ol> <?php //Here $id is main message msg_id value. $csql=mysql_query("select * from comments where msg_id_fk='130' order by com_id "); $comment_count=mysql_num_rows($csql); if($comment_count>2) { $second_count=$comment_count-2; ?> <div class="comment_ui" id="view130"> <a href="#" class="view_comments" id="130">View all <?php echo $comment_count; ?> comments</a> </div> <?php } else { $second_count=0; } ?> <div id="view_comments130"></div> <div id="two_comments130"> <table width="30%"> <?php $small=mysql_query("select * from comments where msg_id_fk='130' order by com_id limit $second_count,2 "); while($rowsmall=mysql_fetch_array($small)) { $c_id=$rowsmall['com_id']; $comment=$rowsmall['comment']; ?> <div class="comment_actual_text"> <tr> <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top"> <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left"> <tr> <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td> <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left"> <strong>Jarratt</strong> <?php echo $comment; ?> <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id;?> </span></td> </tr> </table><br /> </td> </tr> </div> <?php } ?> </table> </div> </ol> Facebook_Wall_Script.php PHP 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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>9lessons Applicatio Demo</title> <link href="frame.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript" src="jquery.oembed.js"></script> <script type="text/javascript"> <script type="text/javascript"> $(function() { $(".view_comments").click(function() { var ID = $(this).attr("id"); $.ajax({ type: "POST", url: "../viewajax.php", data: "msg_id="+ ID, cache: false, success: function(html){ $("#view_comments"+ID).prepend(html); $("#view"+ID).remove(); $("#two_comments"+ID).remove(); } }); return false; }); }); $(function() { $(".comment_button").click(function() { var element = $(this); var boxval = $("#content").val(); var dataString = 'content='+ boxval; if(boxval=='') { alert("Please Enter Some Text"); } else { $("#flash").show(); $("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">Loading Update...</span>'); $.ajax({ type: "POST", url: "update_ajax.php", data: dataString, cache: false, success: function(html){ $("ol#update").prepend(html); $("ol#update li:first").slideDown("slow"); document.getElementById('content').value=''; $('#content').value=''; $('#content').focus(); $("#flash").hide(); $("#expand_url").oembed(boxval); } }); } return false; }); / Delete Wall Update $('.delete_update').live("click",function() { var ID = $(this).attr("id"); var dataString = 'msg_id='+ ID; var parent=$("#bar"+ID); jConfirm('Are you sure you want to delete this message?', 'Confirmation Dialog', function(r) { if(r==true) { $.ajax({ type: "POST", url: "delete_update.php", data: dataString, cache: false, success: function(html){ parent.slideUp(300,function() { parent.remove(); }); } }); } }); return false; });//comment slide $('.comment').live("click",function() { var ID = $(this).attr("id"); $(".fullbox"+ID).show(); $("#c"+ID).slideToggle(300); return false; }); //commment Submint $('.comment_submit').live("click",function() { var ID = $(this).attr("id"); var comment_content = $("#textarea"+ID).val(); var dataString = 'comment_content='+ comment_content + '&msg_id=' + ID; if(comment_content=='') { alert("Please Enter Comment Text"); } else { $.ajax({ type: "POST", url: "comment_ajax.php", data: dataString, cache: false, success: function(html){ $("#commentload"+ID).append(html); document.getElementById("textarea"+ID).value=''; $("#textarea"+ID).focus(); } }); } return false; }); // Delete Wall Update $('.delete_update').live("click",function() { var ID = $(this).attr("id"); var dataString = 'msg_id='+ ID; var parent=$("#bar"+ID); jConfirm('Are you sure you want to delete this message?', 'Confirmation Dialog', function(r) { if(r==true) { $.ajax({ type: "POST", url: "delete_comment.php", data: dataString, cache: false, success: function(html){ $("#comment"+ID).slideUp(); } }); } return false; }); return false; }); </script> <style type="text/css"> body { font-family:Arial, Helvetica, sans-serif; font-size:12px; } .update_box { background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px } a { text-decoration:none; color:#d02b55; } a:hover { text-decoration:underline; color:#d02b55; } *{margin:0;padding:0;} ol.timeline {list-style:none;font-size:1.2em;}ol.timeline li{ display:none;position:relative; }ol.timeline li:first-child{border-top:1px dashed #006699;} .delete_button { float:right; margin-right:10px; width:20px; height:20px } .cdelete_button { float:right; margin-right:10px; width:20px; height:20px } .feed_link { font-style:inherit; font-family:Georgia; font-size:13px;padding:10px; float:left; width:350px } .comment { color:#0000CC; text-decoration:underline } .delete_update { font-weight:bold; } .cdelete_update { font-weight:bold; } .post_box { height:55px;border-bottom:1px dashed #006699;background-color:#F3F3F3; width:499px;padding:.7em 0 .6em 0;line-height:1.1em; } #fullbox { margin-top:6px;margin-bottom:6px; display:none; } .comment_box { display:none;margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:50px; } .comment_load { margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:30px; font-size:12px; border-bottom:solid 1px #FFFFFF; } .text_area { width:290px; font-size:12px; height:30px; } #expand_box { margin-left:90px; margin-top:5px; margin-bottom:5px; } embed { width:200px; height:150px; } </style> </head> <body> <?php include '../../../settings.php'; ?> <div align="center"> <table cellpadding="0" cellspacing="0" width="500px"> <tr> <td> <div align="left"> <form method="post" name="form" action=""> <table cellpadding="0" cellspacing="0" width="500px"> <tr><td align="left"><div align="left"> <h3>What are you doing?</h3></div></td></tr> <tr> <td style="padding:4px; padding-left:10px;" class="update_box"> <textarea cols="30" rows="2" style="width:480px;font-size:14px; font-weight:bold" name="content" id="content" maxlength="145" ></textarea><br /> <input type="submit" value="Update" id="v" name="submit" class="comment_button"/> </td> </tr> </table> </form> </div> <div style="height:7px"></div> <div id="flash" align="left" ></div> <ol id="update" class="timeline"> </ol> <div id='old_updates'> <?php $small=mysql_query("select * from messages2 order by msg_id desc LIMIT 5"); while($r=mysql_fetch_array($small)) { $id=$r['msg_id']; $msg=$r['message']; ?> <div align="left" class="post_box"> <span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span> </div> <ol> <?php //Here $id is main message msg_id value. $csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id "); $array = mysql_fetch_assoc($csql); $comment_count=mysql_num_rows($csql); if($comment_count>2) { $second_count=$comment_count-2; ?> <div class="comment_ui" id="view<?php echo $id; ?>"> <a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a> </div> <?php } ?> <div id="view_comments<?php echo $id; ?>"></div> <div id="two_comments<?php echo $id; ?>"> <table width="50%"> <?php $small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 "); while($rowsmall22=mysql_fetch_array($small2)) { $c_id=$rowsmall22['com_id']; $comments=$rowsmall22['comment']; ?> <div class="comment_actual_text"> <tr> <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top"> <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left"> <tr> <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td> <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left"> <strong>Jarratt</strong> <?php echo $comments; ?> <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td> </tr> </table><br /> </td> </tr> </div> <?php } ?> </table> </div> </ol> <?php } ?> </div> </td> </tr> </table> </div> </body> </html> Hey guys, I am not sure why this JavaScript is not working. Can you check it out please? Thanks. --Start-- <html> <head> <title>Guess it up! </title> </head> <body> <center> <b><font size="5" ><u><b>Guess it up!<br></b></u> <br > <font size="3" > This is out of five! <br > Type in your guess: <p> </p> </font> <input name="HisGuess" type="text" size=1 value=1> <p> <input name="StartButton" type="button" value="Guess" onclick="StartGame()"> </p> <p> <script> var TheRightNumber = Math.round(Math.random * 5); function StartGame() { if (TheRightGuess == HisGuess){ alert("You got it! Nice!") else{ alert("Guess again!") } } </script> --END-- Can anyone tell my why this is not working? All answers are appreciated. Hey all, I have a javascript object which I have created and it works fine until I remove the second message box from the program steps. The alert box was only ever meant to be there for error debugging to steop me through the code. Any ideas? Code: function hyper() { this.test = ""; this.load = function(lib, ver) { alert("Starting API Library Load"); var oHead = document.getElementsByTagName('HEAD').item(0); var oScript= document.createElement("script"); oScript.type = "text/javascript"; oScript.src=lib + "/" + ver + "/api.js"; oHead.appendChild( oScript); alert("Finished Loading Library"); switch(lib) { case "test": this.test = new test(); break; case "ads": this.ads = new HAds(); break; case "chat": this.chat = new HChat(); break; case "survey": this.survey = new HSurvey(); break; default: alert("No Library"); }; } } I wrote a script that should loop through the list of countries, and if the entry's width exceeds 70px, it should cut the extra letters and insert "..." at the end of the entry; My codes produces unexpected results. The script only modifies the entry"United States", by replacing it with "Cook Isla...". I suspect I don't use the while loop properly. Plus the script does not work at all in IE. Could someone have a look and give me a hint what went wrong. Thank you very much!!! Code: <html> <head> <title> Ellipse Practice </title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <style type="text/css"> ul { width: 200px; margin-left: 100px; } span { white-space: nowrap; } </style> <script type="text/javascript"> function trancateAll() { var list=document.getElementsByTagName("li"); count=0; while (count<list.length) { var text=String(list[count].innerHTML); list[count].innerHTML='<span id="mySpan">'+text+'</span>'; mySpan=document.getElementById("mySpan"); mySpan.innerHTML=''; var charac=1; while( (mySpan.offsetWidth<70) && (charac<text.length)) { mySpan.innerHTML=text.substr(0,charac)+"..."; charac++; } count++; } } </script> </head> <body > <ul> <li> United States</li> <li> Australia</li> <li> New Zealand</li> <li> Democratic Republic of Congo</li> <li> Russian Federation</li> <li> Cook Islands</li> </ul> <input type="button" value="Truncate" onclick="trancateAll()"/> </body> </html> Hey, I've searched around on other forums for an answer to this but I still haven't come across an answer that works. What I want to do is go from page1 (which does not have an Iframe) to page2 (which does have an Iframe) and change the content of that Iframe based on the links clicked on page1. So say I click link1 on page1, I want page2 to show up and for the Iframe to show link1 content. If I click link2 on page1, I want page2 to show up and in the Iframe I want to see link2 content. If there's a javascript code for this that works, I would really appreciate the help. Thanks. Any idea why this doesn't work? I'm trying to hide the li with ID of facebook1 if the innerHTML is one of two things. But if both return false and there is more code in there (e.g. a full url), I want to show the li with ID of facebook1 and also add the text 'Facebook Profile' to the span with ID of fbook-add. Code: <ul> <li id="facebook1"><a href="http://facebook.com"><span id="fbook-add"></span></a></li> </ul> <script type="text/javascript"> if(document.getElementById('facebook1').innerHTML.toLowerCase()=='<a href="http://"><span id="fbook-add"></span></a>') { document.getElementById('facebook1').style.display='none'; } else if(document.getElementById('facebook1').innerHTML.toLowerCase()=='<a href=""><span id="fbook-add"></span></a>') { document.getElementById('facebook1').style.display='none'; } else { document.getElementById('fbook-add').innerHTML=='Facebook Profile'; } </script> I am trying to insert a new paragraph with javascript, however my code is not working, even though i pretty much copied my code from the book. Could someone please tell me why i have a problem with a script below? Thank you very much. <script type="text/javascript"> function newtext() { var myPara=document.createElement("p"); var text="We sincerely hope that you are enjoying learning Javascript"; var paratext=document.createTextNode(text); myPara.appendChild(paratext); } </script> <p> <a href="#" onclick="newtext()"; return: true;> Insert new text </a> </p> Code: function addEvent(elem,type,func) { var obj = document.getElementById(elem); if(window.addEventListener) { obj.addEventListener(type,func,false); } if(window.attachEvent) { obj.attachEvent('on'+type,func); } } function $e(obj) { if(obj) obj = document.getElementById(obj); if(!obj) return; return obj; } function homeFunc() { $e('home-wrapper').innerHTML = "<div id=\"choose-container\"><span class=\"choose-buttons\" onclick=\"loginFunc()\">Login Exisiting Account</span><span class=\"choose-buttons\" id=\"createAcct\">Create An New Account</span><span class=\"choose-buttons-highscores\" id=\"createAcct\">Highscores Table</span>"; } function loginFunc() { $e('home-wrapper').innerHTML = "<div id=\"login-container\"><div id=\"error-field\"></div><form method=\"post\" onsubmit=\"return validate_login()\" action=\"./index.php\"><label for=\"username\">Username</label><input name=\"username\" id=\"username\" class=\"input\" type=\"text\" /> <label for=\"password\">Password</label><input name=\"password\" id=\"password\" class=\"input\" type=\"password\" /><input name=\"login\" type=\"submit\" value=\"Login\" class=\"loginButtonClass\" /><div id=\"loginQuickLinks\"><span class=\"loginQuickLinks\" onclick=\"homeFunc()\">Register</span> - <span class=\"loginQuickLinks\">Forgot password?</span></form></div></div>"; } function createAcct() { alert("Create An Account"); } function validate_usr() { var usr = $e('username'); var pwd = $e('password'); if(usr.value.length <= 0 && pwd.value.length <= 0) { loginErrorMsg('Please supply a username and password.'); return false; } if(usr.value.length >= 1 && pwd.value.length <= 0) { loginErrorMsg('Please supply a password.'); return false; } if(pwd.value.length >= 5 && usr.value.length <= 0) { loginErrorMsg('Please supply a username.'); return false; } if(pwd.value.length < 5) { loginErrorMsg('Invalid username or password.'); return false; } if(usr.value.length >= 1 && pwd.value.length >= 5) { $e('error-field').style.cssText='display:block;'; $e('error-field').innerHTML = "<img src=\"/images/ajax-loader.gif\" /> <span style=\"color:#ffffff\">Loading...</span>"; var req; var params = 'user='+encodeURIComponent(usr.value.toLowerCase())+'&pass='+encodeURIComponent(pwd.value.toLowerCase()); if(window.XMLHttpRequest) { req = new XMLHttpRequest(); } if(window.ActiveXObject) { req = new ActiveXObject("Msxml2.XMLHTTP" || "Microsoft.XMLHTTP"); } req.open('POST','server/userChck.php',true); req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); req.send(params); req.onreadystatechange = req; if(req.readyState == 4 && req.status == 200) { if(req.responseText == 0) { window.scrollTo(0,1); setTimeout(function(){loginErrorMsg('Invalid username or password');},1000); return false; } } } return true; } function loginErrorMsg(msg) { window.scrollTo(0,1); $e('error-field').innerHTML = msg; $e('error-field').style.cssText='display:block'; } function validate_login() { var isTurn = (!validate_usr()) ? false : true; return isTurn; } window.onload = function() { setTimeout(function(){window.scrollTo(0,1);},100); addEvent('loginButton','click',loginFunc); addEvent('createAcct','click',homeFunc); } This code works fine when I set this line to false Code: req.open('POST','server/userChck.php',false); but as soon as I set this to true. I doesn't work.... What am I doing wrong here? Code: <html> <head> <title>Click the button</title> <script type="text/javascript"> function x() { window.alert('1'); window.alert('2'); window.alert('3'); } document.getElementById("y").onclick = x; </script> </head> <body> <form> <input type="button" value="Click the button" id="y" /> </form> </body> </html> By the way... Are there any good websites / validators that can be helpful in situations like that? I've been looking at this one so far: http://www.jslint.com/ Thanks. This is suppose to execute "avalon" and it should move down the page once and "Books" should move with it, hidden behind it. I have read the code over and over and over and do not see any mistakes. HELP! Code: <title>Avalon Books</title> <link href="styles.css" rel="stylesheet" type="text/css" /> <script src="scripts.js" type="text/javascript"></script> <script type="text/javascript"> function placeObjects() { placeIt("avalon",175,10); placeIt("books", 175,10); placeIt("ab",230,40); placeIt("fiction",5,5); placeIt("nfiction",475,5); hideIt("ab"); hideIt("fiction"); hideIt("nfiction"); moveAvalon(); } function moveAvalon() { var y=yCoord("avalon"); if (y <= 260) { shiftIt("avalon",0,10); shiftIt("books",0,10); setTimeout("moveAvalon()",30); } else { moveBooks(); } } function moveBooks() { var x=xCoord("books"); if (x <= 320) { shiftIt("books",10,0); setTimeout("moveBooks()",50); } else { //display the hidden images; } } </script> </head> <body onload="placeObjects()"> <div id="avalon"> AVALON </div> <div id="books"> BOOKS </div> <div id="ab"> <a href="#"> <img src="ab.jpg" alt="Click to enter store" /> </a> </div> <div id="fiction"> <img src="fiction.jpg" alt="" /><br /> <b>AB Sales Rank: #1<br /> Fiction</b><br /> <i>Before the Fall</i><br />Jeffrey Unwin </div> <div id="nfiction"> <img src="nfiction.jpg" alt="" /><br /> <b>AB Sales Rank: #1<br /> Nonfiction</b><br /> <i>Vietnam Memoirs</i><br />Gen. John Hartford </div> </body> </html> This code works in all browsers, Safari, Chrome, Firefox, but not IE 8 in which I'm testing right now for version. The code is below: Code: <script type="text/javascript"> $(document).ready(function() { $('#form_{picture_id}').ajaxForm(function() { $(function() { setTimeout(function() { $("#picture_description").show('blind', {}, 800) }, 1000); setTimeout(function() { $("#picture_description").hide('blind', {}, 800) }, 11000); }); }); }); </script> What am I doing wrong. The code simply calls the form, then shows a DIV via BLIND then hides it using the same effect. The picture_id in {} is simply smarty PHP. Any help is much much appreciated! |