|
JavaScript - Javascript Stopped Working In Chrome/safari, Still Works In Ie
I am using javascript to change the buttons on my website so that they load up a different image when hot spots on the buttons are hovered over.
Everything has been working great, but this morning I tried checking out my site and for some reason the javascript wasn't working in Chrome, or on my iphone using Safari. I tried it in IE and everything still works. Any ideas on why it would stop working for those two browsers? Here is the javascript: Code:
function init(){
document.getElementsByTagName('area')[0].onmouseover=function(){
document.getElementById('crocodileImg').src='Images/crocodileHover.png';
this.onmouseout=function() {
document.getElementById('crocodileImg').src='Images/crocodile.png';
}
}
document.getElementsByTagName('area')[1].onmouseover=function(){
document.getElementById('historyImg').src='Images/historyHover.jpg';
this.onmouseout=function() {
document.getElementById('historyImg').src='Images/history.jpg';
}
}
document.getElementsByTagName('area')[2].onmouseover=function(){
document.getElementById('applyImg').src='Images/applyHover.jpg';
this.onmouseout=function() {
document.getElementById('applyImg').src='Images/apply.jpg';
}
}
document.getElementsByTagName('area')[3].onmouseover=function(){
document.getElementById('applyImg').src='Images/membersHover.jpg';
this.onmouseout=function() {
document.getElementById('applyImg').src='Images/apply.jpg';
}
}
document.getElementsByTagName('area')[4].onmouseover=function(){
document.getElementById('mediaImg').src='Images/mediaHover.jpg';
this.onmouseout=function() {
document.getElementById('mediaImg').src='Images/media.jpg';
}
}
}
if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
I'm not sure if seeing the html the js is referencing will help at all, but here it is just in case: Code: <div id="crocodile">
<img id="crocodileImg" src="Images/crocodile.png" usemap="#crocodileImg" border="0" width="436" height="147" alt="Home" />
<map id="crocodileImg" name="crocodileImg">
<area id="crocArea" shape="poly" coords="41,9,23,21,20,58,40,78,72,78,82,86,88,112,117,129,140,126,257,126,274,107,274,79,401,78,420,66,419,26,404,6,369,7,366,0,294,0,291,7," href="index.html" alt="Home" title="Home" />
</map>
</div>
<div id="history">
<img id="historyImg" src="Images/history.jpg" usemap="#historyImg" border="0" width="350" height="256" alt="Home" />
<map id="historyImg" name="historyImg">
<area id="historyArea" shape="poly" coords="18,77,18,167,48,170,79,208,124,233,174,238,228,218,257,188,266,176,280,184,306,182,338,102,331,93,271,92,254,54,226,27,196,11,169,4,137,7,109,17,82,33,65,51,52,74," href="history2.html" alt="History" title="History" />
</map>
</div>
<div id="apply">
<img id="applyImg" src="Images/apply.jpg" usemap="#applyImg" border="0" width="280" height="223" alt="Apply" />
<map id="applyImg" name="applyImg">
<area id="applyArea" shape="poly" coords="17,43,17,57,15,72,20,84,39,83,43,79,56,76,62,62,65,49,77,42,76,36,70,22,65,14,52,14,45,21,38,24,31,32," href="apply.html" alt="Apply" title="Apply" />
<area id="membersImg" shape="poly" coords="112,49,97,55,77,71,64,89,61,99,47,104,44,123,44,149,46,164,57,168,70,172,82,186,102,197,125,206,146,208,168,201,188,189,201,177,208,166,231,165,254,165,260,150,262,133,262,113,254,97,238,95,221,97,213,97,205,85,197,74,183,63,172,55,159,51,145,48,134,47,"href="members.html" alt="Members" title="Members" />
</map>
</div>
<div id="media">
<img id="mediaImg" src="Images/media.jpg" usemap="#mediaImg" border="0" width="182" height="149" alt="Media" />
<map id="mediaImg" name="mediaImg">
<area id="mediaArea" shape="poly" coords="0,102,16,103,26,117,44,129,67,133,92,128,108,115,118,102,165,102,170,88,173,65,172,52,161,49,141,49,132,42,121,42,110,30,96,22,76,16,60,14,44,18,30,29,19,36,13,48,0,51," href="media.html" alt="Media" title="Media" />
</map>
</div>
Thank you for any replies. Similar Tutorialshi everyone, this is my 1st post here in this community forum, just would like to say "HI" to everyone. i would like to share with you my experience in developing multiple dependency selection form developed in java script, how this script works is that when 1st selection is selected, based on the value the user select, a second level selection will appear and so on. below is the Java-script code along with my form code too Javascript: <script type="text/javascript"> function nextSelect(o) { if (o.value == '0') { var next = o.nextSibling; while (next && next.nodeName != 'SELECT') { next = next.nextSibling; } next.length = 0; return; } var d = document; var useSelect = d.getElementById(o.name + '_' + o.value); if (!useSelect) { alert('Unknown id: ' + o.name + '_' + o.value); return; } var copy = useSelect.cloneNode(true); copy.style.display = 'inline'; var next = o.nextSibling; while (next && next.nodeName != 'SELECT') { next = next.nextSibling; } next.parentNode.insertBefore(copy, next); next.parentNode.removeChild(next); } </script> my form: <div style="display: none;"> <!-- ##### First Selection ####### --> <select name="second" id="first_dp" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="dp_2_38">2 3/8'</option> <option value="dp_4">4'</option> </select> <select name="second" id="first_hw" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="hw_3_12">3 1/2'</option> <option value="hw_4">4'</option> </select> <!-- ####### 2nd Selection ####### --> <select name="third" id="second_dp_2_38" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="dp_2_38_4.85">4.85 lbs/ft</option> <option value="dp_2_38_6.65">6.65 lbs/ft</option> </select> <select name="third" id="second_dp_2_78" onchange="nextSelect(this);"> <option value="0">Choose</option> <option value="dp_2_78_6.85">6.85 lbs/ft</option> <option value="dp_2_78_10.4">10.4 lbs/ft</option> </select> >>>>>>and so on till 3rd selection<<<<<<<<< </div> <form action="pdfHandle.php" method="post" id="pdfsearch"> <fieldset> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="142" height="146"> <p> Type:<br /> Size:<br /> Weight:<br /> </td> <td width="266"><select name="first" onclick="nextSelect(this);"> <option value="0">Choose</option> <option value="dp">Drill Pipe</option> <option value="hw">Heavy Weight</option> </select><br/> <select name="select"> </select> <br/> <select name="select"> </select> <br/> <select name="select"> </select> </td> </tr> </table> <p> <input type="submit" name="submit" id="submit" value="Create PDF" /> <input type="reset" value="Reset Selection" /> </p> </fieldset> </form> ----------------------------------------------------------------------- i would like to know what i am missing here and what is making Safari n chrome not to run this page properly, when u execute this code, only the 1st selection will appear while the rest of the selections are Null, i hope someone will guide me through this or direct me to solution or any other way of doing this perhaps i thank you for viewing this post. I have an "animated slideshow" of 29 jpeg images on a page created using Javascript. It works fine in Internet Explorer and Firefox but not Safari or Chrome. The jpeg files names are 01.jpg through to 29.jpg. Here below is the code in the header and the body. There is an error in there somewhe <html> <head> <title>My webpage</title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <SCRIPT language="JavaScript" type="text/JavaScript"> <!-- var speed=1333; var counter = 1; function rollPics() { document.display.src=counter+".jpg"; //Display image "counter".jpg counter ++; // Add 1 to counter if (counter>29) { // If counter is greater than 29 images then reset it counter=1 } } <!-- END --> </SCRIPT> </head> <body> <center> <table> <tr><td> <IMG NAME="display" SRC="1.jpg" onLoad="setTimeout('rollPics()',1333)"> </td></tr> </table> </center> </body> </html> Hey Everyone, I have a simple Java Script function I setup for a pop up that requests a discount code. Works awesome in Chrome, FF and on smart phones... but IE and Safari don't work at all. Here is the code.. This is in my header <script> function passWord1018() { var testV = 1; var pass1 = prompt('Please Enter The Discount Code',' '); while (testV < 3) { if (!pass1) history.go(-1); if (pass1.toLowerCase() == "ultra") { alert('Code Accepted! Press Ok To Be Redirected To The Discounted Price Page'); window.open('discounted101018.aspx'); break; } if (pass1.toLowerCase() == "sexydiscount") { alert('Code Accepted! Press Ok To Be Redirected To The Discounted Price Page'); window.open('discounted201018.aspx'); break; } testV+=1; var pass1 = prompt('Code Denied - Code Incorrect, Please Try Again.','Code'); } if (pass1.toLowerCase()!="password" & testV ==3) history.go(-1); return " "; } </script> This is in the body <center> <form> <br /> <input type="button" value="Enter Discount Code" onclick="passWord1018()" /> </form> </center> I found on another site where someone mentioned the <center> tags are not used anymore, but i tried removing those and still nothing... Any insight would be helpful...Thanks Jason Can anyone tell me why the following works in IE but not the other browsers? It's the "Select category..." jump menu at this URL: www.savasbeatie.com/books.htm Code:
<TD>
<form name="whichCat" style="margin-bottom:0" method="get">
<select name="catChoice" onChange="sendValue(this);">
<option class="news4" value="javascript:location.reload(true)" selected>Select Category...</option>
<option class="news4" value="php/IraqWars.php?q=Iraq%20Wars">Iraq Wars/Current Affairs</option>
<option class="news4" value="php/AncientHistory.php?q=Ancient%20History">Ancient History</option>
<option class="news4" value="php/AmericanRevolution.php?q=American%20Revolution">American Revolution</option>
<option class="news4" value="php/NapoleonicWar.php?q=Napoleonic%20War">Napoleonic War</option>
<option class="news4" value="php/AmericanCivilWar.php?q=American%20Civil%20War">American Civil War</option>
<option class="news4" value="php/IndianWars.php?q=Indian%20Wars">Indian Wars</option>
<option class="news4" value="php/WorldWars.php?q=World%20Wars">World Wars</option>
<option class="news4" value="php/Naval.php?q=Naval">Naval</option>
<option class="news4" value="php/MilitaryScience.php?q=Military%20Science">Military Science</option>
<option class="news4" value="php/SportsHistory.php?q=Sports%20History">Sports History</option>
<option class="news4" value="php/Other.php?q=Other">Other</option>
</select>
</form>
</TD>
I've been called in to help with this, but did not build the site. There's a frame that's supposed to display the link contents, and it's returning the error: Error: document.getElementById("SB_Frame") is null Source File: http://savasbeatie.com/jscripts/SB_util.js Line: 11 I think it has something to do with the ID of the frame, (from Googling the error and reading some other posts,) but can't figure out where to put the tag. Thanks for any help. - David ok so ive nearly finished the animated javascript in my site. http://calumk.com/ to see the effect launch in chrome or safari, it works fine.. but its not working in Firefox (and i havent tested IE.. if someone could, i would appreciate it) i have no-idea why.. . im using the http://berniecode.com/writing/animator.html library which works fine in all browsers.. Any help would be apreciated... I would post the code, but its probably easier if you just view source Hi, I'm new to this forum so please forgive me on any errors I may have made. I am working on a simple site for the company that I work for that allows a customer to input a 5 digit code in and returns what prize they have won. I found some code on a website which done the trick but it doesn't work in Chrome and Safari. My Javascript knowledge is extremely limited but I think I've narrowed it down to the "document.implentation.createDocument" line although the few fixes I've found, I can't get to work. Here is the code I have at the moment before I applied the fixes (this works in FF and IE). Code: <script type="text/javascript">
window.onload = loadIndex;
function loadIndex() { // load indexfile
// most current browsers support document.implementation
if (document.implementation && document.implementation.createDocument) {
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.load("results.xml");
}
// MSIE uses ActiveX
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.load("results.xml");
}
}
function searchIndex() { // search the index (duh!)
if (!xmlDoc) {
loadIndex();
}
// get the search term from a form field with id 'searchme'
var searchterm = document.getElementById("searchme").value;
var allitems = xmlDoc.getElementsByTagName('item');
results = new Array;
if (searchterm.length < 4) {
alert("Please re-check and enter your 5 digit code");
} else {
for (var i=0;i<allitems.length;i++) {
// see if the XML entry matches the search term,
// and (if so) store it in an array
var name = allitems[i].lastChild.nodeValue;
var exp = new RegExp(searchterm,"i");
if ( name.match(exp) != null) {
results.push(allitems[i]);
}
}
// send the results to another function that displays them to the user
showResults(results, searchterm);
}
}
// Write search results to a table
function showResults(results, searchterm) {
if (results.length > 0) {
// if there are any results, write them to a table
document.write('<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><link href="cno-competition.css" rel="stylesheet" type="text/css" /></head><body>');
document.write('<div id="container"><div id="logo"></div><div id="prizeContent"><img src="media/new-york.jpg" width="750" height="500" alt="New York" />');
for(var i=0; i<results.length; i++) {
document.write('<h1>Congratulations</h1><p>You entered prize code <b><i>'+searchterm+'</i></b> and have won a <span style="font-weight:bold; color:#75ACC1">' + results[i].getAttribute("prize") + '</span>.</p>');
}
document.write('<p>To claim your prize please contact the Complete Night Out team on 01908 544445.</p>');
document.write('</div></div></body></html>');
document.close();
} else {
// else tell the user no matches were found
var notfound = alert('No results found for '+searchterm+'! Please re-check and enter your 5 digit code');
}
}
</script>
The fix I found added the below into the code but I couldn't get it to work using this. Link here. Code: var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET","results.xml",false);
xmlhttp.send(null);
xmlDoc = xmlhttp.responseXML.documentElement;
Any help would be much appreciated. If you would like to see the site live please click here Thank you. Kishan Firefox works a dream, but in IE, Google Chrome, Safari and Avant javascript does not run at all. Looking at the code it may be the body 'onload' that is not firing? Has anyone got any advise on this on how I might be able to fix it. the javascript Code: /* Script by FPMC at http://jsarchive.8m.com Submitted to JavaScript Kit (http://javascriptkit.com) For this and 400+ free scripts, visit http://javascriptkit.com */
src = ['../images/Intro_01.png', '../images/Intro_02.png', '../images/Intro_03.png', '../images/Intro_04.png', '../images/Intro_05.png', '../images/Intro_06.png']; //set image paths
// url = ['http://freewarejava.com', 'http://javascriptkit.com', 'http://dynamicdrive.com', 'http://www.geocities.com']; //set corresponding urls
duration = 3; //set duration for each image
//Please do not edit below
ads=[]; ct=0;
function switchAd() {
var n=(ct+1)%src.length;
if (ads[n] && (ads[n].complete || ads[n].complete==null)) {
document['Intro_Image'].src = ads[ct=n].src;
}
ads[n=(ct+1)%src.length] = new Image;
ads[n].src = src[n];
setTimeout('switchAd()',duration*1000);
}
the body tag Code: <body onload="switchAd(this);"> the img tag Code: <img id="Intro_Image" src="images/Intro_01.png" alt="slideshow" style="width: 230px; border: 0;"> Title explains it really. The button I am using working perfecting in FireFox and Chrome but not in Internet explorer. (Yes I know someone that actually uses IE that pointed this out to me) The rest of the code works fine but just not the reset button I have. Something I have been needing to do is make the code call my images differently by putting them in an array so I don't mess this the sources of my images like I sloppily am here, but I am not sure if that will actually fix the problem I am have. The checkbox should both uncheck the box(if checked) AND change the picture but it only unchecks the box. Here is the relevant code let me know if you want me to post the whole thing. Code: function reset(){
cb1.checked=false;
document.goodAfternoon.src=goodAfternoonFinal.src;
}
Code: "Check" me out;) <input type="checkbox" id="cb1" onClick="validate()" /> <img src="Good Afternoon.gif" name="goodAfternoon"> <input type="button" id="cb2" value="RESET" onClick="reset()"/> Hi everyone, My page with my slideshow (with lightbox integrated) is up and running fine on browsers like Firefox, IE, and Google Chrome... But Safari doesn't even show the slideshow. www.bobbivanstudio.com/work.php Any ideas why? Thanks in advance! Hello all, my second post! I finally got the below script working in Firefox and was really pumped about it until I realized it didn't load in Google chrome or Safari. What this script does is its a dual onclick event which makes a hidden div appear and loads an iframe within the now visible div. Here is the code, I would love any input on how to make this work in other browsers. Here is the header code: Code: <SCRIPT type="text/javascript">
<!--
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>
<SCRIPT type="text/javascript">
function loadIframe(iframeName, url) {
if ( window.frames[iframeName] ) {
window.frames[iframeName].location = url;
return false;
}
else return true;
}
</script>
Here is the code on the page where a link click shows the hidden div and loads the iframe contained. Code: <p><a href="#" onclick="showhide('div1');return loadIframe('ifrm1', 'http://www.google.com');">show/hide me</a></p>
</td></tr>
<div id="div1" style="display: none; position: fixed; z-index:4; width: 1010px; height: 500px; left: 5%; top: 15%; background-color: #f0f0f0; border: 1px solid #000; padding: 10px;"><iframe name="ifrm1" id="ifrm1" width="100%" height="90%" scrolling="yes" frameborder="0">Sorry, your browser doesnt support iframes.</iframe><p><a href="#" onclick="showhide('div1')">close</a></div>';
As always, any input is greatly appreciated! Hi, Well I had lots of scripts so what I did is that I combined all of them into one script file, which contains files like Jquery library too. But now the problem is that it has stopped working, I don't know why did this happen. What I did is that I took every script copied and pasted it and then I gave some space under it by pressing enter a few times and then I used to paste other script, I was told this was the method to combine scripts but now the scripts don't work. Here is the link to combined scripts http://files.cryoffalcon.com/bloghut...NCOMPRESSED.js And the link to a live example is http://bloghutsbeta.blogspot.com/ I hate javascript.... OK, here's my latest challenge with Javascript. I recently went into twp php files and made a few very minor changes to some outdated $date functions. Now, I have three small icons for 'copy', 'paste','delete' using the javascript 'onclick' function that have stopped working. In fact, when I replace the two recently revised files with the originals, these icons no longer work there either. Any help would be appreciated. I'm simply at a total loss for ideas here. From the primary php file is the relevant lines of source code....As far as I can tell, the second paragraph in each area is returning a 'null' value; i.e. o1a.options.selectedIndex is null. Code:
function aCopy(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);
avail_1a = o1a.options.selectedIndex;
avail_1b = o1b.options.selectedIndex;
avail_2a = o2a.options.selectedIndex;
avail_2b = o2b.options.selectedIndex;
avail_3a = o3a.options.selectedIndex;
avail_3b = o3b.options.selectedIndex;
}
function aPaste(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);
o1a.options.selectedIndex = avail_1a;
o1b.options.selectedIndex = avail_1b;
o2a.options.selectedIndex = avail_2a;
o2b.options.selectedIndex = avail_2b;
o3a.options.selectedIndex = avail_3a;
o3b.options.selectedIndex = avail_3b;
}
function aDelete(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);
o1a.options.selectedIndex = 0;
o1b.options.selectedIndex = 0;
o2a.options.selectedIndex = 0;
o2b.options.selectedIndex = 0;
o3a.options.selectedIndex = 0;
o3b.options.selectedIndex = 0;
From the supporting php file are the following lines of code.... Code: $s .= "<td nowrap=nowrap class=calendar style='border-left:1px dashed #000;'>";
$s .= "<a href='javascript:void(0);' onclick=\"aCopy('$year-$month-$d');\"><img src='../admin/_calendar/Copy.gif' alt='Copy Availability' width='16' height='16' border='0' /></a>";
$s .= " <a href='javascript:void(0);' onclick=\"aPaste('$year-$month-$d');\"><img src='../admin/_calendar/Paste.gif' alt='Paste Availability' width='16' height='16' border='0' /></a>";
$s .= " <a href='javascript:void(0);' onclick=\"aDelete('$year-$month-$d');\"><img src='../admin/_calendar/Delete.gif' alt='Delete/No Availability' width='16' height='16' border='0' /></a>";
$s .= "</td>";
None of these lines of code were changed or altered when I was updating the code. Any thoughts or suggestions would be deeply appreciated? Talltom hi, i got this javascript function which run perfectly in IE but does not work in Mozilla. Any idea ? function Changed() { var theGridView = document.getElementById('MainContent_GridViewRDR1_Hidden'); var sum = 0; var total = 0; var totalFinal = 0; for (var i = 0; i < theGridView.rows.length; i++) { var csValue = document.getElementById('MainContent_GridViewRDR1_Hidden_CaseTxt_' + i + ''); var pcsValue = document.getElementById('MainContent_GridViewRDR1_Hidden_PCSTxt_' + i + ''); if (csValue.value != '') { if (pcsValue.value != '') { alert('Pcs already have value') document.getElementById('MainContent_GridViewRDR1_Hidden_CaseTxt_' + i + '').innerText = ''; break; } if (isNaN(csValue.value)) { alert('Please enter number') document.getElementById('MainContent_GridViewRDR1_Hidden_TotalPriceTxt_' + i + '').innerText = 0; document.getElementById('MainContent_TextBox1').innerText = 0; document.getElementById('MainContent_GridViewRDR1_Hidden_CaseTxt_' + i + '').innerText = 0; break; } var unitPriceValue = theGridView.rows(i + 1).cells(7).innerText; var unitUOM = theGridView.rows(i + 1).cells(5).innerText; sum = (parseFloat(csValue.value) * parseFloat(unitPriceValue) * parseFloat(unitUOM)).toString(); sum = roundVal(sum); document.getElementById('MainContent_GridViewRDR1_Hidden_TotalPriceTxt_' + i + '').innerText = sum; total += sum; total = roundVal(total); document.getElementById('MainContent_TextBox1').innerText = total; } else { sum = 0; } } total = roundVal(total); totalFinal += total document.getElementById('MainContent_TextBox1').innerText = totalFinal; } Code:
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=200
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-150;//150 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
I have know much about javascript, but the code above works fine in safari and firefox but not IE. it's for a popup, when you click a link it blankets the page and theres a popup window. here's other parts of supporting css/php Code:
<?php
if(!$_POST['submit'] == 'login'){
echo "<div id=\"blanket\" style=\"display:none;\"></div>\n";
echo "<div id=\"popUpDiv\" style=\"display:none;\">\n";
echo "<div id=\"loginform\">\n";
echo '<div id="close">';
echo "<a href=\"#\" onclick=\"popup('popUpDiv')\">\n";
echo '<img src="images/login/close.png" border="0">';
echo "</a>\n";
echo '</div>';
echo '<div class="clear"></div>';
echo "<form name=\"login\" method=\"post\" action=\"#\">\n";
echo "<div id=\"usernametext\">Username</div>\n";
echo "<input name=\"username\" type=\"text\" id=\"usernameinput\">\n";
echo '<div class="clear"></div>';
echo "<div id=\"passwordtext\">Password</div>\n";
echo "<input name=\"password\" type=\"password\" id=\"passwordinput\">\n";
echo '<div class="clear"></div>';
echo '<div id="loginsubmit"><input type="submit" name="submit" value="Submit"></div>';
echo "</form>\n";
echo "</div>\n";
echo "</div>\n";
echo "<span class=\"login_text\"><a href=\"#\" onclick=\"popup('popUpDiv')\">LOG IN</a></span>\n";
?>
Code:
#blanket {
background-color:#000000;
opacity: 0.40;
filter:alpha(opacity=40);
position:absolute;
z-index: 10;
padding:0;
top:0;
right:0;
left:0;
bottom:0;
width:100%;
height:100%;
margin:0 0 0 0;
}
#popUpDiv {
position:absolute;
background-color:#FFFFFF;
width:280px;
height:135px;
z-index: 10;
}
any help would be VERY much appreciated. thanks Hey all, 1) When clicking on a list in an accordion, it should change the quicktime movie playing in a main window area. It works in firefox but not in safari. The variable imgTitle holds the expected output (e.g. '../images/Intro-1.mov'). It changes the src attribute of the embed tag. This change works in Firefox where the new movie plays on click. However, when clicking the list item in safari, nothing happens. 2) There is a problem in firefox as well in that the movie overlays everything else on page, even though it should be behind the text. Positioning would be tedious given that there's many nested elements and I would have to set relative positioning to the entire page. Any reason for this behavior of embed tags? Code: $(".image_thumb ul li ul li").click(function(){
var imgTitle = $(this).find('a').attr("href");
var imgDesc = $(this).find('.block').html();
var imgDescHeight = $(".main_image").find('.block').height();
if ($(this).is(".active")) {
return false;
} else {
console.log(imgTitle);
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image embed").attr({ src: imgTitle});
});
}
$(".image_thumb ul li ul li").removeClass('active');
$(this).addClass('active');
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
Thanks for response. Hello, I have used a free javascript from javascriptkit.com for a "highlighter scroller" in my site. But the programe is only working in Internet explorer. When i use Mozila or google chrome, it is not appearing/working. Can anyone suggest me that how it will work in other browser also. here is the code that i used: Code: <div style="position:relative;left:0px;top:0px"> <span id="highlighter" style="position:absolute;left:0;top:0;font-size:15px;font-family:Calibri;background-color:lime;clip:rect(0px 0px auto 0px)"></span> </div>
<script type="text/javascript">
/*
Highligher Scroller script- By JavaScript Kit
For this and over 400+ free scripts, visit http://www.javascriptkit.com/
This notice must stay intact
*/
var tickercontents=new Array()
tickercontents[0]='<a href="ln.htm">IJSG Welcomes the Kingdom of Morocco as its new Member</a>'
var tickdelay=3000 //delay btw messages
var highlightspeed=10 //10 pixels at a time.
////Do not edit pass this line////////////////
var currentmessage=0
var clipwidth=0
function changetickercontent(){
crosstick.style.clip="rect(0px 0px auto 0px)"
crosstick.innerHTML=tickercontents[currentmessage]
highlightmsg()
}
function highlightmsg(){
var msgwidth=crosstick.offsetWidth
if (clipwidth<msgwidth){
clipwidth+=highlightspeed
crosstick.style.clip="rect(0px "+clipwidth+"px auto 0px)"
beginclip=setTimeout("highlightmsg()",20)
}
else{
clipwidth=0
clearTimeout(beginclip)
if (currentmessage==tickercontents.length-1) currentmessage=0
else currentmessage++
setTimeout("changetickercontent()",tickdelay)
}
}
function start_ticking(){
crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter
crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement
if (parseInt(crosstick.offsetHeight)>0)
crosstickParent.style.height=crosstick.offsetHeight+'px'
else
setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake
changetickercontent()
}
if (document.all || document.getElementById)
</script></td>
Inside body I have used <body onload="populate();start_ticking()"> for multiple script in a page. Thank you in advance. Regards, Nazmul Karim Khan Hi Guys, This is my first post, apologies in advance. I'm new to javascript and working on a form, for some reason the checkboxes work fine in Google Chrome but ar enot working corectly when using IE. Can anyone put me out of my misery? I've attached the code below Thanks in advance Code: //The Javascript
// Functional Code - NO NEED to Change
function f40_Disable(f40_par,f40_obj,f40_state){
if (f40_par){f40_clds=f40_AllElements(document.getElementById(f40_par)); }
else { f40_clds=f40_AllElements(f40_obj.parentNode); }
if (!f40_obj.ary){
f40_obj.ary=new Array();
for (f40_0=0;f40_0<f40_clds.length;f40_0++){
if (f40_clds[f40_0].tagName=='INPUT'||f40_clds[f40_0].tagName=='SELECT'||f40_clds[f40_0].tagName=='TEXTAREA'){
f40_obj.ary[f40_obj.ary.length]=f40_clds[f40_0];
}
}
}
for (f40_1=0;f40_1<f40_obj.ary.length;f40_1++){
f40_obj.ary[f40_1].removeAttribute('disabled');
}
if (f40_obj.checked==f40_state){
for (f40_2=0;f40_2<f40_obj.ary.length;f40_2++){
f40_obj.ary[f40_2].setAttribute('disabled','disabled');
}
}
f40_obj.removeAttribute('disabled');
}
function f40_AllElements(f40_){
if (f40_.all){ return f40_.all; }
return f40_.getElementsByTagName('*');
}
Code: <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[0]' value='BW' onclick="f40_Disable(null,this,false);">BW <input type="text" size="15" maxlength="30" disabled="disabled" name="ShipFirst"> <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[1]' value='Advantage' onclick="f40_Disable(null,this,false);">Advantage <input type="text" size="15" maxlength="30" disabled="disabled" name="ShipLast"> <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[2]' value='MS' onclick="f40_Disable(null,this,false);">MS <input type="text" size="15" disabled="disabled" name="ShipEmail"> <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[3]' value='MOC' onclick="f40_Disable(null,this,false);">MOC <input type="text" size="15" maxlength="30" disabled="disabled" name="ShipCompany"> <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[4]' value='Lk' onclick="f40_Disable(null,this,false);">Lk <input type="text" size="15" maxlength="30" disabled="disabled" name="ShipAddress1"> <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[5]' value='CM' onclick="f40_Disable(null,this,false);">CM <input type="text" size="15" maxlength="30" disabled="disabled" name="ShipAddress2"> <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[6]' value='Ga' onclick="f40_Disable(null,this,false);">Ga <input type="text" size="15" maxlength="30" disabled="disabled" name="ShipCity"> <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[7]' value='Ol' onclick="f40_Disable(null,this,false);">Ol <input type="text" size="15" maxlength="30" disabled="disabled" name="ShipZip"> <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[8]' value='Iy' onclick="f40_Disable(null,this,false);">Iy <input type="text" size="15" maxlength="30" disabled="disabled" name="ShipZip1"> <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[9]' value='TPA' onclick="f40_Disable(null,this,false);">TA <input type="text" size="15" maxlength="30" disabled="disabled" name="ShipZip2"> <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[10]' value='CT' onclick="f40_Disable(null,this,false);">CT <input type="text" size="15" maxlength="30" disabled="disabled" name="ShipZip3"> I havent included the whole script as it's quite long, I'm assuming the problem is somewhere within this section. Thanks. Hi, I've made a web based tool that times how long a web page takes to load in an iframe and today I redesigned it but now it has issues. When I load it in Chrome and Opera the new version works fine but in FF 3.6 and IE 8 only the footer area is displayed. I have added the links below - You'll be able to access the code via your browser's "View page Source" option. URLs: New test (With problem): http://browserspeedtest.camerongray....net/version31/ Old test (Works perfectly): http://browserspeedtest.co.cc Any help is greatly appreciated! Cameron Gray It works in Google Chrome but not Firefox and Internet Explorer. My computer has blocked Opera and I don't know how to change that. Too much energy to investigate now, I'll do so later. Are there any pros that can tell me why this is happening? I'm assuming GoogleChrome is fixing a syntax error that FF and IE don't. Code: var request;
request=false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
function isAlNum(str){
return /^[a-z0-9]+$/i.test(str);
}
var preUsername;
var same;
function updatePage() {
if (username.value.length>0){
if ( request.responseText.indexOf("0") == -1 )
{userNameErrorBox.innerHTML=username.value + " has already been taken";
usernameSuccessBox.innerHTML="";}
else
{userNameErrorBox.innerHTML="";
usernameSuccessBox.innerHTML=username.value + " is available";}}
}
function nameTest()
{
if (username.value==preUsername)
{same=1;}
else
{same=0;}
if (!isAlNum(username.value))
{if (username.value.length>0)
{username.value=preUsername;}}
else
{preUsername=username.value;}
if (username.value.length>0 && username.focus && same===0)
{
userNameErrorBox.innerHTML="";usernameSuccessBox.innerHTML="";
request.abort();
var url = "/unseen/checkIfUserNameExist.php?name=" + username.value;
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
if (username.value.length===0)
{ userNameErrorBox.innerHTML="";usernameSuccessBox.innerHTML="";preUsername=""; }
}
I back tracked what i did and it appears that this code Code: var url = "/unseen/checkIfUserNameExist.php?name=" + username.value;
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
has the problem. When I set up alerts to see what works and what doesn't, this code seems to be causing the FF and IE to not work, but I can't tell what it is that's causing them to fail. This is javascript that is suppose to check if a name has been taken by another user. I'm working on a fairly large project that I wish to be the new formspring, (size wise) I procrastinated for 2 weeks of my 12 week break and now that I'm just getting started on it I'm running into an ishness load of problems... Very de-motivating |
|||||||