|
JavaScript - Site Works In Chrome,safari.. But Not In Firefox
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 Similar TutorialsCan 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 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 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. hi 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. The following script grabs a string (*.abc.org, e.g. from &sid=xyz.abc.org) from the current URL and changes it (to ABC:abc.org). Everything works perfectly in IE, but Firefox and Chrome appear to get themselves into an endless loop. When I check the URL, xyz.abc.org has successfully been changed to ABC:abc.org, but the page just seems to keep refreshing over and over. Code: var tomatch = /abc.org/i;
var usrString = document.referrer;
var is_a_match = tomatch.test(usrString);
var newString = document.URL.replace(/[a-z]*\.abc\.org/, "ABC:abc.org"); if (is_a_match) {
window.location.replace(newString);
}
Any suggestions much appreciated. I had to develop a word game for a class project. The final is revolving around this class project but I was marked down some points for this project. I need to find out what I did wrong so I can pass my Final Exam. The program passed Google Chrome and Safari, but the teacher said it didn't pass Firefox Error Console. Any pointers will help. <html> <head> <title> Project </title> <script type="text/javascript" src="http://balance3e.com/random.js"></script> <script type="text/javascript"> function GetLetter() // Assumes: There are 5 letters // Results: Returns a single letter { var letter letter = RandomOneOf(['a', 'e', 'l', 'm', 'n']); return letter; } </script> <script type="text/javascript"> function GetWord(lastLetter) // Assumes: There is a letter the user has selected // Results: Returns a four letter word ending with the letter the user has selected { var word lastLetter = document.getElementById('lastLetter').value word = ''; l = 0; while (l < 3) { word = word + GetLetter(); l = l + 1; } return word + lastLetter; } </script> <script type="text/javascript" src="http://balance3e.com/random.js"></script> <script type="text/javascript"> function CheckWord(word) // Assumes: The user entered a word // Results: Will check to see if the word matched the winning word { var cWord cWord = false; if (word=="lane" || word=="lean" || word=="mama" || word=="meal" || word=="name") { cWord = true; } return cWord } </script> <script type="text/javascript"> function trytowin() // Assumes: The user returned a true or false answer // Results: Will Check to see if the user has won or lost { var word, t = 0; document.getElementById('winningWord').value = ""; document.getElementById('winLoss').value = 'Lose'; document.getElementById('lowords').innerHTML = ''; valid = false; while (t < 20 && valid == false) { word = GetWord(lastLetter); valid = CheckWord(word); document.getElementById('lowords').innerHTML = document.getElementById('lowords').innerHTML + word + '<br>'; t = t + 1; if (valid == true) { document.getElementById('winningWord').value = word; document.getElementById('winLoss').value = 'Won after ' + t + ' times!'; } } } </script> </head> <body> <p> Your word is: <input type="text" id="winningWord" size=10><br> You: <input type="text" id="winLoss" size=20><br> Type in a letter chosen from a,e,l,m,n <input type="text" id="lastLetter" size=2 value=""> Press the button to get a word ending with that letter and see if you won<input type="button" value="Try to Win!" onclick="trytowin();"> <hr> <div id="lowords"></div> </body> </html> Hello. When a user visits index.html on my site, they input their email address. The form redirects them to "confirmed.html", the form also writes a cookie with their email address. When the user gets to confirmed.html, I use an "if/else" statement. If there is a cookie (email address), I append ("#"+user_email) to the window location. I do this so that when the user shares with "addthis" tool, I will know who is sharing. Unfortunately addthis only shares the current page, so I want new users to the site to be redirected to index.html My code works in firefox, but not safari. In safari it just seems to redirect to index nomatter what. The user never even sees confirmed.html. Code: var user_email = unescape(document.cookie);
if (document.cookie)
{
window.location.replace("#"+user_email);
}
else {
window.location.replace("index.html");
}
})();
</script>
The website is www.saverally.com Hi, can anyone help me with this? The following html is to upload an image, it works ok on firefox, but while using google chrome, nothing happened when I clicked "upload LOGO" button. .................................................................................................... .... <html> <body> <form method="post" action="action_start_initial_registration.php" name="initial_registration" id="initial_registration" enctype="multipart/form-data"> <input type="file" style="display:none" onchange="checkLogo()" name="input_logo_file" id="input_logo_file" value="input_logo_file"> <input type="text" name="logo_flag" id="logo_flag" value="0" style="display:none;"/> <a href="javascript:void(0);" onclick="input_logo_file.click()"><em>upload LOGO</em></a><br /> </form> <script type="text/javascript"> function checkLogo(){ document.getElementById("logo_flag").value="1"; document.getElementById("initial_registration").submit(); } </script> </body> </html> ............................................................................................. Hi, This code uses the getElementById to change the background of certain <tr>'s. In a nutshell there are two buttons, the code checks which one has been clicked, then checks the background colour of a relevant <tr> and depending what it finds changes the colours of the cells. Works fine in Chrome and Firefox but not in IE and I'm now sorely vexed by it. Can anyone shed light on the solution please? Code: <script language="javascript" type="text/javascript">
function changeBackgroundColor(objDivID)
{
var backColor = new String();
if ( objDivID == "lifesciences" )
{
backColor = document.getElementById('claire').style.backgroundColor;
}
if ( objDivID == "healthcare" )
{
backColor = document.getElementById('adrienne').style.backgroundColor;
}
if(backColor.toLowerCase()=='#ffffff' || backColor.toLowerCase()=='rgb(255, 255, 255)')
// IE works with hex code of color e.g.: #eeeeee
// Firefox works with rgb color code e.g.: rgb(238, 238, 238)
// Thats why both types are used in If-condition below
{
if ( objDivID == "lifesciences" )
{
document.getElementById('david').style.backgroundColor = '#c0c0c0';
document.getElementById('claire').style.backgroundColor = '#c0c0c0';
document.getElementById('adrienne').style.backgroundColor = '#ffffff';
document.getElementById('karen').style.backgroundColor = '#c0c0c0';
document.getElementById('alice').style.backgroundColor = '#c0c0c0';
document.getElementById('kelly').style.backgroundColor = '#ffffff';
document.getElementById('sarah').style.backgroundColor = '#c0c0c0';
document.getElementById('carolyn').style.backgroundColor = '#c0c0c0';
document.getElementById('paul').style.backgroundColor = '#c0c0c0';
document.getElementById('kayleigh').style.backgroundColor = '#c0c0c0';
document.getElementById('tim').style.backgroundColor = '#c0c0c0';
document.getElementById('chantal').style.backgroundColor = '#c0c0c0';
document.getElementById('lee').style.backgroundColor = '#c0c0c0';
document.getElementById('lisa').style.backgroundColor = '#c0c0c0';
}
else
{
document.getElementById('david').style.backgroundColor = '#c0c0c0';
document.getElementById('claire').style.backgroundColor = '#ffffff';
document.getElementById('adrienne').style.backgroundColor = '#c0c0c0';
document.getElementById('karen').style.backgroundColor = '#c0c0c0';
document.getElementById('alice').style.backgroundColor = '#c0c0c0';
document.getElementById('kelly').style.backgroundColor = '#c0c0c0';
document.getElementById('sarah').style.backgroundColor = '#c0c0c0';
document.getElementById('carolyn').style.backgroundColor = '#ffffff';
document.getElementById('paul').style.backgroundColor = '#ffffff';
document.getElementById('kayleigh').style.backgroundColor = '#ffffff';
document.getElementById('tim').style.backgroundColor = '#c0c0c0';
document.getElementById('chantal').style.backgroundColor = '#c0c0c0';
document.getElementById('lee').style.backgroundColor = '#c0c0c0';
document.getElementById('lisa').style.backgroundColor = '#c0c0c0';
}
}
else
{
document.getElementById('david').style.backgroundColor = '#ffffff';
document.getElementById('claire').style.backgroundColor = '#ffffff';
document.getElementById('adrienne').style.backgroundColor = '#ffffff';
document.getElementById('karen').style.backgroundColor = '#ffffff';
document.getElementById('alice').style.backgroundColor = '#ffffff';
document.getElementById('kelly').style.backgroundColor = '#ffffff';
document.getElementById('sarah').style.backgroundColor = '#ffffff';
document.getElementById('carolyn').style.backgroundColor = '#ffffff';
document.getElementById('paul').style.backgroundColor = '#ffffff';
document.getElementById('kayleigh').style.backgroundColor = '#ffffff';
document.getElementById('tim').style.backgroundColor = '#ffffff';
document.getElementById('chantal').style.backgroundColor = '#ffffff';
document.getElementById('lee').style.backgroundColor = '#ffffff';
document.getElementById('lisa').style.backgroundColor = '#ffffff';
}
}
</script>
this code works in google chrome, but not in firefox. Code: function merge(obj1, obj2) {
var a ={};
for (var p in obj1) {
try {
// Property in destination object set; update its value.
if ( obj1[p].constructor==Object ) {
a[p] = merge(a[p], obj1[p]);
} else {
a[p] = obj1[p];
}
} catch(e) {
// Property in destination object not set; create it and set its value.
a[p] = obj1[p];
}
}
for (var p in obj2) {
try {
// Property in destination object set; update its value.
if ( obj2[p].constructor==Object ) {
a[p] = merge(a[p], obj2[p]);
} else {
a[p] = obj2[p];
}
} catch(e) {
// Property in destination object not set; create it and set its value.
a[p] = obj2[p];
}
}
return a;
}
var d=function(){'c';}
var a ={a:{b:'c'},b:'c'}
var b ={c:a,d:d};
var c = merge(window,b);
WHY?!?!?!?!?!?!?!?!?!?!?!?!??!?!?!?! 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()"/> 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 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! I can't figure it out hoping for some help. The calendar pops up in IE but will not work in Firefox or safari. The page can be viewed at http://www.lackawanna.edu/lib-form/e...nt-request.asp 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. I'm using the Javascript Tabifier (found he http://www.barelyfitz.com/projects/tabber/) on a new website I'm building. Here is the test page I've been trying it out on: http://www.myohmomma.com/test-2 It seems to be working well in IE, but doesn't even appear in Firefox. Any idea why? Additionally, there seem to be some positioning issues when I view it in Firefox, which I'm thinking is a topic for the CSS forums, but I thought could be relevant to my issue, somehow. I don't want to overwhelm anyone williing to help with code, so please let me know if there is more you need to see. This is what applies to the tabifier: In the head of my php document: [CODE]<script type="text/javascript" src="http://www.myohmomma.com/wp-includes/js/tabber-minimized.js"></script>[CODE] In the sidebar of my php document: [CODE] <div class="sidebar"> <div class="tabber"> <div class="tabbertab"> <h2>Welcome</h2> <img src="images/Welcome.png" alt="" /> <div id="Connect"> <div id="Connect-01"> <img src="images/Connect_01.png" width="315" height="48" alt="" /> </div> <div id="Connect-02"> <img src="images/Connect_02.png" width="27" height="87" alt="" /> </div> <div id="Facebook"> <img src="images/Facebook.png" width="76" height="82" alt="" /> </div> <div id="Connect-04"> <img src="images/Connect_04.png" width="21" height="87" alt="" /> </div> <div id="Newsletter"> <img src="images/Newsletter.png" width="77" height="82" alt="" /> </div> <div id="Connect-06"> <img src="images/Connect_06.png" width="21" height="87" alt="" /> </div> <div id="Twiiter"> <img src="images/Twiiter.png" width="75" height="82" alt="" /> </div> <div id="Connect-08"> <img src="images/Connect_08.png" width="18" height="87" alt="" /> </div> <div id="Connect-09"> <img src="images/Connect_09.png" width="76" height="5" alt="" /> </div> <div id="Connect-10"> <img src="images/Connect_10.png" width="77" height="5" alt="" /> </div> <div id="Connect-11"> <img src="images/Connect_11.png" width="75" height="5" alt="" /> </div> </div> </div> <div class="tabbertab"> <h2>Features</h2> <p>Tab 2 content.</p> </div> <div class="tabbertab"> <h2>Categories</h2> <p>Tab 3 content.</p> </div> <div class="tabbertab"> <h2>Search</h2> <p>Tab 4 content.</p> </div> </div> </div>[CODE] From my CSS stylesheet: [CODE].sidebar{ position: relative; top:0px; padding-top:20px; padding-right:10px; padding-left:10px; padding-bottom:0px; float:right; width:350px; } .sidebar ul{ list-style-type: none; margin: 0; padding: 0 10px 0 10px; background:#ffffff; } .sidebar ul li{ padding: 10px 0 10px 0; background:#ffffff; } .sidebar ul li h2{ font-family: Verdana, Geneva, sans-serif; font-size: 16px; color: #2d0a0b; border-top: 1px solid #2d0a0b; border-bottom: 1px solid #2d0a0b; padding: 5px 0px 5px 0px; background:#ffffff; } .sidebar ul ul li{ padding: 0; background:#ffffff; } /* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */ /*-------------------------------------------------- REQUIRED to hide the non-active tab content. But do not hide them in the print stylesheet! --------------------------------------------------*/ .tabberlive .tabbertabhide { display:none; } /*-------------------------------------------------- .tabber = before the tabber interface is set up .tabberlive = after the tabber interface is set up --------------------------------------------------*/ .tabber { } .tabberlive { margin-top:1em; } /*-------------------------------------------------- ul.tabbernav = the tab navigation list li.tabberactive = the active tab --------------------------------------------------*/ ul.tabbernav { margin:0; padding: 3px 0; border-bottom: 0px solid #778; font: bold 12px Verdana, sans-serif; } ul.tabbernav li { list-style: none; margin: 0; display: inline; } ul.tabbernav li a { padding: 3px 0.5em; margin-left: 0px; margin-right: 3px; border: 1px solid white; background: white; text-decoration: none; } ul.tabbernav li a:link { color: #2d0a0b; } ul.tabbernav li a:visited { color: #2d0a0b; } ul.tabbernav li a:hover { color: #2d0a0b; text-decoration:underline; background: white; border-color: white; } ul.tabbernav li.tabberactive a { color: #fbb1c0; background-color: #2d0a0b; border: 1px solid #2d0a0b; } ul.tabbernav li.tabberactive a:hover { color: #fbb1c0; text-decoration:underline; background: #2d0a0b; border-bottom: 1px solid white; } /*-------------------------------------------------- .tabbertab = the tab content Add style only after the tabber interface is set up (.tabberlive) --------------------------------------------------*/ .tabberlive .tabbertab { padding:5px; border:10px solid #2d0a0b; /* If you don't want the tab size changing whenever a tab is changed you can set a fixed height */ height:285px; /* If you set a fix height set overflow to auto and you will get a scrollbar when necessary */ overflow:auto; } /* If desired, hide the heading since a heading is provided by the tab */ .tabberlive .tabbertab h2 { display:none; } .tabberlive .tabbertab h3 { display:none; } /* Example of using an ID to set different styles for the tabs on the page */ .tabberlive#tab1 { } .tabberlive#tab2 { } .tabberlive#tab2 .tabbertab { height:200px; overflow:auto; } #Connect { position:absolute; left:30px; top:200px; width:315px; height:135px; } #Connect-01 { position:absolute; left:0px; top:0px; width:315px; height:48px; } #Connect-02 { position:absolute; left:0px; top:48px; width:27px; height:87px; } #Facebook { position:absolute; left:27px; top:48px; width:76px; height:82px; } #Connect-04 { position:absolute; left:103px; top:48px; width:21px; height:87px; } #Newsletter { position:absolute; left:124px; top:48px; width:77px; height:82px; } #Connect-06 { position:absolute; left:201px; top:48px; width:21px; height:87px; } #Twiiter { position:absolute; left:222px; top:48px; width:75px; height:82px; } #Connect-08 { position:absolute; left:297px; top:48px; width:18px; height:87px; } #Connect-09 { position:absolute; left:27px; top:130px; width:76px; height:5px; } #Connect-10 { position:absolute; left:124px; top:130px; width:77px; height:5px; } #Connect-11 { position:absolute; left:222px; top:130px; width:75px; height:5px; }[CODE] I've visited the forums so many times as a reader and usually find solutions here. I'm usually good at figuring it out on my own, but I'm really stumped. I am new at this and I think I'm in over my head. I'd reallly appreciate some help. Hello all, I'm back with more silly newbie questions. I'm building a website that includes 3 javascript codes: 1. Onmouseover image switch for the nav bar. 2. On a specific page, onmouseover display of hidden divs. 3. Particletree's Dynamic Resolution Dependent Layout script (http://particletree.com/features/dyn...ndent-layouts/) All three scripts work fine in firefox, but the 2nd script doesn't work in safari and chrome, and the 3rd one doesn't work in safari, chrome and IE(8). Since the 1st one works fine in all browsers, I'm guessing this isn't a problem with my javascript link or anything like that. The website is: www.sheket.co.il/index4.html The specific page that runs the 2nd code is: www.sheket.co.il/services.html My javascript is: http://www.sheket.co.il/javascript.js And my default stylesheet is: http://www.sheket.co.il/style.css (I apologize for possible jibrish- the website is in Hebrew...) Any help with these two problems would be greatly appreciated! My page is working as I want it to in firefox and IE. well almost fully in IE... Anyways at the top of my page I am using an fx.slide that does not work at all in safari or chrome and was wondering if anyone here could shed some light as to why? here is the page in question Any help would be great. Thanks so much. Go figure huh??? Anyways I have a script a co-worker wrote and it works in FF and Chrome but IE will not work. Get's a 'activeTab' is null or not an object error, I checked for commas and fixed a semi-colon that was missing in two spots but not change in IE. Anyone willing to throw me a bone? code below: Code: <table class="tan-header rounded-box" style="padding:0px;border:0px;width:560px" cellspacing=0 cellpadding=0>
<tr class="headerrow">
<td class="main">
<div style="font-weight:bold;padding-top:4px;">
<span ID="Sample Pricing _show" class="arrow-box" style="display:none;"><a href="javascript:Expand('Sample Pricing ');">
<img alt="Click arrow to expand this panel" src="images/right.png" border=0 align="absmiddle"></a></span>
<span ID="Sample Pricing _hide" class="arrow-box"><a href="javascript:Contract('Sample Pricing ');">
<img alt="Click arrow to collapse this panel" src="images/down.png" border=0 align="absmiddle"></a></span>
Sample Pricing
</div>
</td>
<td class="end"></td>
</tr>
<tr class="contentrow">
<td class="main">
<div id="Sample Pricing ">
<p><em>Based on the following spec's: </em></p>
<ul>
<li>8.5 x 11 </li>
<li>70# high quality opaque paper</li>
</ul>
<p align="center"> </p>
<div align="center">
<table id="pricing_table_tabs">
<th>
<td id="option1" class="active_pricing_table_tab">Option 1</td>
<td id="option2" class="">Option 2</td>
</th>
</table>
<table width="494" border="1" id="pricing_table1" class="active_table">
<tr>
<th width="80" height="30" scope="col">Quantity</th>
<th width="95" scope="col">1 Color </th>
<th width="95" scope="col">2 Colors</th>
<th width="95" scope="col">4 Colors</th>
<th width="95" scope="col"> </th>
</tr>
<tr>
<td><div align="center">250</div></td>
<td><div align="center">$197.69</div></td>
<td><div align="center">$221.58</div></td>
<td><div align="center">$420.26</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
<tr>
<td><div align="center">500</div></td>
<td><div align="center">$210.78</div></td>
<td><div align="center">$233.79</div></td>
<td><div align="center">$434.75</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
<tr>
<td><div align="center">1000</div></td>
<td><div align="center">$238.92</div></td>
<td><div align="center">$262.30</div></td>
<td><div align="center">$446.18</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
<tr>
<td><div align="center">2000</div></td>
<td><div align="center">$298.84</div></td>
<td><div align="center">$316.78</div></td>
<td><div align="center">$481.68</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
<tr>
<td><div align="center">2500</div></td>
<td><div align="center">$328.26</div></td>
<td><div align="center">$345.55</div></td>
<td><div align="center">$499.10</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
<tr>
<td><div align="center">3000</div></td>
<td><div align="center">$358.50</div></td>
<td><div align="center">$373.05</div></td>
<td><div align="center">$513.08</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
<tr>
<td><div align="center">4000</div></td>
<td><div align="center">$416.68</div></td>
<td><div align="center">$430.29</div></td>
<td><div align="center">$548.58</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
<tr>
<td><div align="center">5000</div></td>
<td><div align="center">$476.63</div></td>
<td><div align="center">$485.45</div></td>
<td><div align="center">$585.15</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
<tr>
<td><div align="center">10000</div></td>
<td><div align="center">$713.26</div></td>
<td><div align="center">$758.94</div></td>
<td><div align="center">$751.91</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
<tr>
<td><div align="center">15000</div></td>
<td><div align="center">$879.51</div></td>
<td><div align="center">$925.01</div></td>
<td><div align="center">$919.47</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
<tr>
<td><div align="center">20000</div></td>
<td><div align="center">$1041.92</div></td>
<td><div align="center">$1092.30</div></td>
<td><div align="center">$1085.25</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
</table>
<table width="494" border="1" id="pricing_table2" class="inactive_table">
<tr>
<th width="80" height="30" scope="col">Quantity</th>
<th width="95" scope="col">1 Color </th>
<th width="95" scope="col">2 Colors</th>
<th width="95" scope="col">4 Colors</th>
<th width="95" scope="col"> </th>
</tr>
<tr>
<td><div align="center">250</div></td>
<td><div align="center">$1</div></td>
<td><div align="center">$2</div></td>
<td><div align="center">$4</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
<tr>
<td><div align="center">500</div></td>
<td><div align="center">$2</div></td>
<td><div align="center">$2</div></td>
<td><div align="center">$4</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
<tr>
<td><div align="center">1000</div></td>
<td><div align="center">$238.92</div></td>
<td><div align="center">$262.30</div></td>
<td><div align="center">$446.18</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
<tr>
<td><div align="center">2000</div></td>
<td><div align="center">$298.84</div></td>
<td><div align="center">$316.78</div></td>
<td><div align="center">$481.68</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
<tr>
<td><div align="center">2500</div></td>
<td><div align="center">$328.26</div></td>
<td><div align="center">$345.55</div></td>
<td><div align="center">$499.10</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
<tr>
<td><div align="center">3000</div></td>
<td><div align="center">$358.50</div></td>
<td><div align="center">$373.05</div></td>
<td><div align="center">$513.08</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
<tr>
<td><div align="center">4000</div></td>
<td><div align="center">$416.68</div></td>
<td><div align="center">$430.29</div></td>
<td><div align="center">$548.58</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
<tr>
<td><div align="center">5000</div></td>
<td><div align="center">$476.63</div></td>
<td><div align="center">$485.45</div></td>
<td><div align="center">$585.15</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
<tr>
<td><div align="center">10000</div></td>
<td><div align="center">$713.26</div></td>
<td><div align="center">$758.94</div></td>
<td><div align="center">$751.91</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
<tr>
<td><div align="center">15000</div></td>
<td><div align="center">$879.51</div></td>
<td><div align="center">$925.01</div></td>
<td><div align="center">$919.47</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
<tr>
<td><div align="center">20000</div></td>
<td><div align="center">$1041.92</div></td>
<td><div align="center">$1092.30</div></td>
<td><div align="center">$1085.25</div></td>
<td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
</tr>
</table>
</div>
<p align="center"> </p>
<p align="center"><strong>Can't find what you are looking for - <a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Request_Estimate/form.mdl&FORM_Form_ID=42195">click here</a> to request a custom quote. </strong></p>
</body>
</html>
</div>
<div ID="Sample Pricing _instr" class="detail" style="display:none">
(Click the triangle above to expand this panel.)
</div>
</td>
<td class="end"></td>
</tr>
<tr class="footerrow">
<td class="main"></td>
<td class="end"></td>
</tr>
</table>
<br>
<style>
#pricing_table_tabs{
border-collapse: collapse;
}
#pricing_table_tabs td{
border: 2px solid #ccc;
padding: 5px;
font-size:1.2em;
font-weight:bold;
}
#pricing_table_tabs td:hover{
cursor: pointer;
}
.active_pricing_table_tab{
background-color: black;
border-style: inset;
color:white;
}
.active_table{display:block;}
.inactive_table{display:none;}
</style>
<script language="javascript" type="text/javascript">
var activeTab = document.getElementById("option1");
var activePricingTable = document.getElementById("pricing_table1");
function activateTab()
{
if(activeTab)
{
activeTab.className = "";
activeTab = document.getElementById(this.id);
activeTab.className = "active_pricing_table_tab";
activatePricingTable(activeTab.id);
}
else
{
activeTab = document.getElementById(this.id);
activeTab.className = "active_pricing_table_tab";
activatePricingTable(activeTab.id);
}
}
function activatePricingTable(activeTabId)
{
if(activePricingTable)
{
activePricingTable.className = "inactive_table";
activePricingTable = document.getElementById("pricing_table" + activeTabId.charAt(activeTabId.length - 1));
activePricingTable.className = "active_table";
}
else
{
activePricingTable = document.getElementById("pricing_table" + activeTabId.charAt(activeTabId.length - 1));
activePricingTable.className = "active_table";
}
}
for(i=1; i<=2; i++){
if (window.addEventListener){
document.getElementById("option" + i).addEventListener("click", activateTab, false);
}
else{
document.getElementById("option" + i).attachEvent("onclick", activateTab);
}
}
</script>
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> |
|||||||