HTML - Javascript Not Working
I have the following code, and it only works in Internet Explorer and Netscape, but I need it to work with those and firefox and opera.
HTML Code: <style> body {background: #555555; font-family: arial; margin: 20;} table.body {width: 85%; height: 100%;} td.body {background: #fcfcfc;} table.nav {width: 200; border-top: 1px solid black; border-right: 1px solid black; border-left: 1px solid black;} td.navbuttonhead {background: url(assets/images/structure/fadebar.png); border-bottom: 1px solid #191919; color: white;} td.navbuttonoff {background: #6a6a6a; border-bottom: 1px solid #191919; border-top: 1px solid #8A8A8A;} td.navbuttonon {background: #8C8C8C; border-bottom: 1px solid #191919; border-top: 1px solid #8A8A8A;} td.navbuttonofftop {background: #6a6a6a; border-bottom: 1px solid #191919;} td.navbuttonontop {background: #8C8C8C; border-bottom: 1px solid #191919;} td.bodyleft {width: 12; background: url(assets/images/structure/bodybgleft.png); border-right: 1px solid black;} td.bodyright {width: 12; background: url(assets/images/structure/bodybgright.png); border-left: 1px solid black;} a.navbutton {text-decoration: none; color: white;} img {border: none;} a.link {color: #404040; text-decoration: none;} a.link:hover {color: #404040; text-decoration: underline;} </style> <table class="nav" cellspacing="0" cellpadding="2" style="margin-bottom: 4;" id="tableCollapsed1" style="display: none;"> <tr> <td class="navbuttonhead"> <a href="#" class="navbutton" onclick="collapse(1)"><div>Test</div></a> </td> </tr> </table> <table class="nav" cellspacing="0" cellpadding="2" style="margin-bottom: 4;" id="tableExpanded1"> <tr> <td class="navbuttonhead"> <a href="#" class="navbutton" onclick="expand(1)"><div>Test</div></a> </td> </tr> <tr> <td class="navbuttonofftop" onmouseover="className='navbuttonontop'" onmouseout="className='navbuttonofftop'"> <a href="#" class="navbutton"><div style="padding-left: 2;">Text</div></a> </td> </tr> <tr> <td class="navbuttonoff" onmouseover="className='navbuttonon'" onmouseout="className='navbuttonoff'"> <a href="#" class="navbutton"><div style="padding-left: 2;">Text</div></a> </td> </tr> <tr> <td class="navbuttonoff" onmouseover="className='navbuttonon'" onmouseout="className='navbuttonoff'"> <a href="#" class="navbutton"><div style="padding-left: 2;">Text</div></a> </td> </tr> </table> <script type="text/javascript"> function expand(id) { document.getElementById("tableCollapsed" + id).style.display="none"; document.getElementById("tableExpanded" + id).style.display="block"; } function collapse(id) { document.getElementById("tableExpanded" + id).style.display="none"; document.getElementById("tableCollapsed" + id).style.display="block"; } </script> Any help would be nice. Similar Tutorialshi, i have a problem with my javascript---i have an image changer, and when you click on the name of the image it changes the image and the link to view the full size image. in firefox and chrome, this works fine, but in IE it displays only the URL for the image on click. the website is http://sc-lee.com/art.html , to view/test, and the code is: 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=utf-8" /> <title>Untitled Document</title> <link href="branch2.css" rel="stylesheet" type="text/css" /> <script> var thelink = 'http://sc-lee.com/art/2l.jpg'; </script> </head> <body> <div id="navss"><B>OTHER WORK</B> <a href="art.html">paintings & drawings</a> / <a href="collage.html">collage</a> / <a href="graphics.html">graphics</a> </div> <div id="back"><a href="javascript: history.go(-1)">< back</a></div> <div id="contenta"> <img src=art.gif /> <br> <br><a href="javascript: document.getElementById('img1').src='http://sc-lee.com/art/2.jpg'; var thelink = 'http://sc-lee.com/art/2l.jpg'">ONE</a> <br><a href="javascript: document.getElementById('img1').src='http://sc-lee.com/art/1.jpg'; var thelink = 'http://sc-lee.com/art/1l.jpg'">TWO</a> <br><a href="javascript: document.getElementById('img1').src='http://sc-lee.com/art/3.jpg'; var thelink = 'http://sc-lee.com/art/3l.jpg'">THREE</a> <br><a href="javascript: document.getElementById('img1').src='http://sc-lee.com/art/4.JPG'; var thelink = 'http://sc-lee.com/art/4l.jpg'">FOUR</a> <br><a href="javascript: document.getElementById('img1').src='http://sc-lee.com/art/5.jpg'; var thelink = 'http://sc-lee.com/art/5l.jpg'">FIVE</a> <br><a href="javascript: document.getElementById('img1').src='http://sc-lee.com/art/6.jpg'; var thelink = 'http://sc-lee.com/art/6l.jpg'">SIX</a> <br><a href="javascript: document.getElementById('img1').src='http://sc-lee.com/art/7.jpg'; var thelink = 'http://sc-lee.com/art/7l.jpg'">SEVEN</a> <br><a href="javascript: document.getElementById('img1').src='http://sc-lee.com/art/9.jpg'; var thelink = 'http://sc-lee.com/art/9l.jpg'">EIGHT</a> <br><a href="javascript: document.getElementById('img1').src='http://sc-lee.com/art/11.jpg'; var thelink = 'http://sc-lee.com/art/11l.JPG'">NINE</a> </div> <div id="contentb"> <img id="img1" name="mainimage" src="http://sc-lee.com/art/2.jpg"> <br /> <a href="#" onclick="javascript: window.open(thelink); "> + fullsize</a> </div> </body> </html> i'm afraid i just don't know enough about the differences between IE and firefox javascript compatability to fix this. please help! thanks, stephanie So I am using internal javascript in my html doc. to make my cursor "sparkle". The script works fine because it shows no problem if I do not declare a doctype at all, but once I declare a doctype the cursor effect no longer works...why?? As of now I use doctype html4 frameset on "index.html" and html5 for all other pages (but I have tried several combinations both on my localhost and on my global server. Anyone know why this is occurring? Thanks hello i am new to javascript and i can't figure out why this code will not sort the user's line of text into alphabetical order. any help would be great thank you Code: <html> <head> <title> JavaScript array sort() alphabetically </title> <script type="text/javascript"> var arr = new Array(1); arr[1]=prompt("enter a line of text") document.write("Original Array is: "+arr+"<br>"); document.write("Sorted array is: "+arr.sort()+"<br> "); </script> </head> </body> </html> Hi, I have a final project due in 3 hours for javascript class. I need to use cookies to change a stylesheet on a page and keep it consistent on every page until the user changes it. The link is http://www-scf.usc.edu/~javery/itp204/finalproject.html Its a dumb page about my cat. Anyway if you view the source, a lot of the javascript is for the style switch. The user is supposed to switch styles and click Save Style and then it sets that style for every other page. The code is in the other pages too. The style switches but it doesnt save. If anyone can help me it'd be much appreciated! Joel I'm new to this forum and was not quite sure where to post this but I am having some trouble putting this code I made into my myspace and making it work. It shows up correctly on the normal browser but when I go to add it to my page it doesn't work. Any help would be appreciated. HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> <html> <head> <style type="text/css"> #picturebox { background: #transparent; background-image:url('http://img231.imageshack.us/img231/6485/tvphotosmallergs4.jpg'); background-repeat: no-repeat; position: absolute; top: 0px; left: 0px; width: 800px; height: 631px; } #moviebox { background: #FFFFFF; background-repeat: no-repeat; position: absolute; top: 120px; left: 168px; width: 400px; height: 300px; } </style> </head> <body> <div id="picturebox"> <div id="moviebox"> <object type="application/x-shockwave-flash" width="400" height="300" data="http://www.vimeo.com/moogaloop.swf?clip_id=721534&server=www.vimeo.com&fullscreen=1&show_title=1&show_byline=1&show_portrait=0&color="> <param name="quality" value="best" /> <param name="allowfullscreen" value="true" /> <param name="scale" value="showAll" /> <param name="movie" value="http://www.vimeo.com/moogaloop.swf?clip_id=721534&server=www.vimeo.com&fullscreen=1&show_title=1&show_byline=1&show_portrait=0&color=" /></object> </div> </div> </body> </html> Thank you! I have a code for div and the strange thing is that it is working in empty html code but if i put it in an existing html code then it will not work! please help!!! Hi guys, For some reason, in IE8, on product pages (Example) of my ecommerce site, the 'Size Chart' and 'Email to a Friend' popups don't work, and the product image lightbox won't work either. I have turned pop-up blocker off but they still don't work. These popups work in every other browser I have tested in, including IE7. It seems to only be IE8 that is having this problem. Upon looking at the page source, one thing I have noticed that both the 'Size Chart' and 'Email to a Friend' buttons have in common, is that the popups seem (I'm far from an expert) to be 'triggered' by a span element (class="more") within the HTML. For example: Code: <div class="row "> <label >Size: </label> <strong class="fl"><select name="size" id="size" onchange="checkstock(this.value)"><option value="">Select Size</option><option value="S">S</option><option value="M">M</option><option value="L">L</option><option value="XL">XL</option><option value="XXL">XXL</option></select></strong> <span style="text-decoration: underline;" class="size_chart more" title="size_chart1">+ Size Chart</span> <div style="display: none;" class="size_chart1 hide" > <div class="close"></div> <img src="http://www.projectdisobey.com/disobeyclothing/wp-content/themes/eCommerce3/images/size_chart.jpg" alt="" /> </div> <!-- size chart --> </div> Code: <ul class="fav_link"> <li class="print"><a href="#" onclick="window.print();return false;">Print</a> </li> <li class="rss"><a href="http://feeds.feedburner.com/DisobeyClothing">RSS</a> </li> <li class="emailtofriend"><span style="text-decoration: underline;" class="more" title="tellafrnd_div">Email to a Friend</span> </li> <li class="blank"><span id="tellafrnd_success_msg_span"></span></li> <li class="blank"><div style="display: none;" id="tellfrnddiv" class="tellafrnd_div hide"> <iframe src="http://www.projectdisobey.com/disobeyclothing/?page=tellafriend_form&pid=402" style="border: medium none ; width: 547px; height: 558px;" frameborder="0" ></iframe> </div> </li> <li class="share"> <div class="a2a_kit addtoany_list"><a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://www.projectdisobey.com/disobeyclothing/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share"/></a></div> <script type="text/javascript"><!-- var a2a_config = a2a_config || {}; a2a_config.linkname="Know Your Enemy"; a2a_config.linkurl="http://www.projectdisobey.com/disobeyclothing/?p=402"; a2a_config.color_main = "f3f3e7";a2a_config.color_border = "C0C88A";a2a_config.color_link_text = "332402";a2a_config.color_link_text_hover = "332402";a2a_config.color_bg = "7f6f2"; a2a_config.num_services = 14; //--></script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script> </li> </ul> I have no idea what could be stopping the lightbox from working. Anybody have any suggestions as to what the problem might be (and how I can rectify it)? If you need more info, let me know... Thanks! Hi, I'm a self-taught web designer with not a lot of experience and need some help please! This website shows up perfectly in Chrome + Firefox, but it completely fails in IE. http://fparchitectural.ca/beta/ I'm guessing it's a css/div issue. Hopefully it is a simple fix. Please Help. I've found a website that shows my Steam status every amount of time, just like the rest of other websites. This banner or gamecard should show if i'm online, what i'm playing and other stuff that is in the gamecard. The website has an option for yourself to put your own PNG image as the card's background. I entered the link correctly of the image and after that it gave me the codes to put them wherever i want. The problem is that when i submit the code wherever i want (Forums) the image doesnt show but the code in text itself. The PNG had transparent parts so i tried on a pure black background, didnt work either. Then i noticed the code has some different values/elements from the included images that the website comes with. This is the code of my custom PNG image: Code: http://steamsigs.com/steam.php?id=ik....png&tborder=1 And this is with the default image of the website: Code: http://steamsigs.com/steam.php?id=ik...rmal&tborder=1 I also tried different text borders and options. You can try yourself doing the gamecard he www.steamsigs.com You will need a custom Steam ID url, but you can use mine: ikamikaze15 And if it could be something wrong with the image, here it is: http://i1000.photobucket.com/albums/...ndoGR15/ua.png Thanks for helping. Hey all I have just joined these forums as I am learning HTML and CSS. However the book that I am following does not appear to be working. I have created a custom class in css called "Stewart" and a test page to test it however it does not appear as I have defined. Below is the code for the CSS page Quote: <!-- A CSS style sheet --> body { font-size: 10pt; font-family: Arial; color: black; line-height: 14pt; padding-left: 5pt; padding-right: 5pt; padding-top: 5pt; } h1 { <!-- ALso possible to define different classes see SAM's teach yourself HTML and CSS p59 --> background-color: pink; font-size: 14pt; font-family: Arial; font-weight: 20pt; color: red; } h2 { font-size: 12pt; font-family: Arial; font-weight: 20pt; color: red; } h3.silly {font: 36pt Comic Sans; } h3.serious {font: 8pt Arial; } p.subheader { font-weight: bold; color: green; } <!-- Custom Class, use the div heading to create a custom class --> DIV.stewart {font-size: 30pt; color: red; font-style: italic; } And here is the code for the test page Quote: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <!--The above is a link to the css file in this directory --> <title>CSS Test sheet</title> </head> <body> <h1> This is a test sheet for my css, it might possibly look different every time. </h1> <h3 class="silly"> Silly</h3> <p> The above text is silly class of heading 3</p> <h3 class="serious">serious</h3> <p> The above text is serious class of heading 3 </P> <p> <div class="stewart">This is my own custom style</div> </p> </body> </html> Can someone please explain where I am going wrong. I am using IE on WIndows 7. Hi Guys, I have this link: <a href="programs/XMLPoster.exe">programs/XMLPoster.exe</a> It works when i view it in Firefox, but gives me an error when i click it in i.e? Do you know why this is happening? Ideally i want to be able to launch the .exe file and not just ask the user if they want to save it? Thanks, Chloe ~X~ i have installed IIS 5.1 in my XP machine but when i type http://localhost it shows a blank page. Even though i have 122 post html is a maze to me HTML Code: <STYLE type="text/css"> <!-- BODY { scrollbar-face-color: #000000; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #000000; } --> </STYLE> <p> </p> <p> </p> </body> </html> I have been having a problem with the site I am trying to build. The links won't work when the text I have in the content goes past it. Here is a link to the site as an example. http://nate.augspot.com/news.php I want to make a few hotspots on my home page for a little unique navigation of the site. You can see the page at http://www.collegeisboring.com/hjb/design/index.htm. I want hotspots on the street signs. The code I am trying to use is: <div id="categorymenu"> <img src="images/streetsign2.gif" /> <area shape="poly" coords="336,226,386,106,244,98" href="index.htm" alt="Home" /> </div> I am using Dreamweaver, but it just doesn't recognize that hotspot at all and the hotspot tool isn't working. Any tips? Hello! I faced up with a problem using image maps. On index page i use image slider js easyslide. and the idea was to make 2 rows of images, so i decided to make them using Image Map like apossible solution. When i made 1st image i test it in ie6, and everything was ok, so i started to do next image. And here it is In all browesers it works properly (crome, firefox, opera and IE8), but IE6 doent see 2nd image as a map. it only shows image alt when arrow hovers areas (not the area title). I supose this problem also exists in IE7. Maybe im doing smth wrong, or theres some missunderstanding between script and maps in IE. Could you pls help me with some suggestions! Here is live ver: http://inbalt.ru/ and here`s code of image maps: HTML Code: <div id="slider"> <ul> <li><img src="images/partners1.jpg" alt="Партнеры ИнБалт электро" usemap="#row1" width="620"/> <map name="row1"> <area shape="rect" coords="20,6,155,48" href="druseidt.html" title="Druseidt"/> <area shape="rect" coords="176,6,305,48" href="electro-pjp.html" title="Electro-PJP"/> <area shape="rect" coords="330,6,482,48" href="telegaertner.html" title="Telegaertner"/> <area shape="rect" coords="502,6,586,48" href="itt.html" title="ITT"/> <area shape="rect" coords="25,53,140,94" href="isv.html" title="ISV"/> <area shape="rect" coords="176,63,305,94" href="amphenol.html" title="Amphenol"/> <area shape="rect" coords="330,63,482,94" href="sks-hirschmann.html" title="SKS-Kontakttechnik"/> <area shape="rect" coords="502,63,586,94" href="pce.html" title="PCE"/> </map> </li> <li><img src="images/partners2.jpg" alt="InBalt electro partners" usemap="#test" width="620"/> <map name="test"> <area shape="rect" coords="40,6,144,48" href="#" title="Glenair"/> <area shape="rect" coords="176,13,305,50" href="multi-contact.html" title="Multi-Contact"/> <area shape="rect" coords="330,13,482,50" href="#" title="LEMO"/> <area shape="rect" coords="525,4,590,54" href="#" title="Sure Seal"/> <area shape="rect" coords="26,66,164,94" href="mennekes.html" title="Mennekes"/> <area shape="rect" coords="200,58,280,94" href="#" title="Anderson Power Products"/> <area shape="rect" coords="330,58,482,94" href="icore.html" title="Icore"/> <area shape="rect" coords="495,61,601,94" href="#" title="Deutsch"/> </map> </li> </ul> </div> UPD: now i added 3rd image, and it started to see 2nd, but not hte 1st and 3rd((( what could be the reason of it? HTML Code: <html> <head> <title> My First Script </title> <style type="text/css"> .highlight { color: red } </style> <script type="text/JavaScript"> function showBrowserType() { document.getElementById("readout").innerHtml = "your browser says it is: " + "<span class='highlight'>" + navigator.userAgent + "</span>.hr />"; } window.onloadd = showBrowserType; </script> </head> <body> <h1> Let's Script. . . </h1> <hr> <h1> Let's Script. . . </h1> <hr /> <div id="readout"></div> </body> </html> I'm stumped on this one. I've got code that runs fine in all browsers other than IE7. Here's the kicker, the page displays DIFFERENTLY every time I load it up in IE7. Sometimes it shows up correctly, sometimes the elements appear stacked. I've never heard of this happening, and the only variable I can think of was the order in which the elements loaded, so I built a pre-loader in to the index page, but still no luck. Elements load differently sometimes. Any help?? The page is live at: http://milesmediation.com/mediators_main.html The part that is appearing differently is in an i-frame, the html for that is http://milesmediation.com/mediators_home.html Thank you for any help, I'm stumped on this one!! |