|
JavaScript - Image Crossfade Not Working Correctly
Code:
I am trying to get the following image fade code to work but can't seem to figure out what the problem is. The images appear quickly (don't fade one to the other) in Firefox and Google and in IE8 when the image fades, even though the images are the same size, the new image starts out smaller and grows to the final size. Any suggestions are greatly appreciated.
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 2500;
// Specify the image files
var Pic = new Array();
Pic[0] = 'images/Monsanto.gif'
Pic[1] = 'images/Test2.jpg'
Pic[2] = 'images/Test3.jpg'
Pic[3] = 'images/Test4.jpg'
Pic[4] = 'images/Test5.jpg'
Pic[5] = 'images/Test1.jpg'
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
preLoad.sort(function() {return 0.5 - Math.random()});
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>
Similar TutorialsThis is a image background slideshow im trying to incorp into a DIV instead of the <body>. Ive tried getElementById. But im still having trouble getting it to work. Also the crossfade only works in Internet explorer, i looked up the code to try and fix it for Firefox but i think it only works with CSS3. Any input would be great, i dont know a lot about Javascript most of this is self taut with a little experience using C++. Code: <script language="JavaScript">
<!----------------------------------------------------------------------------
var speed = 3000;
var crossFadeDuration = 3;
var Pic = new Array();
Pic[0] = 'drawing1.jpg';
Pic[1] = 'drawing2.jpg';
Pic[2] = 'drawing1.jpg';
Pic[3] = 'drawing2.jpg';
Pic[4] = 'drawing1.jpg';
Pic[5] = 'drawing2.jpg';
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++)
{
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow()
{
if (document.MozOpacity!=null)
{
/*trying to fix crossfade for Firefox*/
obj.style.MozOpacity = (opacity/100) - .001;
}
else if (document.all)
{
document.body.style.filter="blendTrans(duration=crossFadeDuration)";
document.body.filters.blendTrans.Apply();
document.body.filters.blendTrans.Play();
}
if (document.body)
{
document.body.background = Pic[j];
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', speed)
}
}
//--------------------------------------------------------------------------------
</script>
</head>
<body onload="runSlideShow()" bgcolor="#000000">
I am working on a simple image crossfade for my website, and i downloaded a good file folder with a javascript code that works well. it's exactly what i'm trying to achieve. yet, when i put in the code into my webpage index it doesn't fade like it should. the images fade out but don't cross-fade into each other. I tried testing the original file/script with alternate images/jpgs to see if my images were messing things up but it was fine, yet when i use MY webpage in MY root folder it doesn't work. so is there something wrong with my rootfolder that is messing up the javascript? i'm pulling my hair out because the code looks fine to me. please help! thanks!! jason I am trying to persuade the javascript to fade from one image into the next, but I'm only succeeding at fading into nothing, and then making the next image appear. The effect can be seen he http://userpages.bright.net/~toddw/orbit/aheader0.html The effect that I am trying to achieve is he http://userpages.bright.net/~toddw/orbit/aheader9.html the problem with the second example is that I can't figure out how to add the navigation controls,… so I thought it would be easier to address the crossfade with the first example. Code: var openBtn2 = "images/Button_open.gif";
var solidBtn2 = "images/Button_solid.gif";
var intervalID2;
var showing2 = 1;
var truckArray = new Array("","truck1","truck2","truck3","truck4");
var truckbtnArray = new Array("","truckBtn1","truckBtn2","truckBtn3","truckBtn4");
var inProgress2 = false;
function swapTruck(next) {
if (inProgress2) return;
inProgress2 = true;
if (next == 0) { next = showing2 + 1; } //if swapTruck is not called from a button
if (next == 5) { next = 1; } ***//if its the last news item
new Effect.Fade(truckArray[showing2], { duration: 0.3});
setTimeout(function() {
$(truckbtnArray[showing2]).src = openBtn2
$(truckbtnArray[showing2]).style.cursor = "pointer"
$(truckbtnArray[next]).src = solidBtn2
$(truckbtnArray[next]).style.cursor = "default"
new Effect.Appear(truckArray[next], { duration: 0.3})
showing2 = next
inProgress2 = false
}, 300);
clearInterval(intervalID2);
intervalID2 = setInterval("swapTruck(0)", 25000);
}
Event.observe(window, 'load', function() { //this binds the function() to the event window.onload
intervalID2 = setInterval("swapTruck(0)", 25000);
$("truckBtn1").src = solidBtn2;
$("truckBtn2").src = openBtn2;
$("truckBtn2").style.cursor = "pointer";
$("truckBtn3").src = openBtn2;
$("truckBtn3").style.cursor = "pointer";
$("truckBtn4").src = openBtn2;
$("truckBtn4").style.cursor = "pointer";
});
My html looks like this: <!-- define images for fading into each other --> <div id="slider"> <div id="truck1"><img src="c5_app_2.jpg" title="" /></div> <div id="truck2" style="display:none;"><img src="infolink_main.jpg" title="" /></div> <div id="truck3" style="display:none;"><img src="rr5700_app_2.jpg" title="" /></div> <div id="truck4" style="display:none;"><img src="c5_app_1.jpg" title="" /></div> </div> <!-- navigational buttons for image fade --> <div class="truck_buttons"> <img src="(EmptyReference!)" onClick="swapTruck(1)" id="truckBtn1"> <img src="(EmptyReference!)" onClick="swapTruck(2)" id="truckBtn2"> <img src="(EmptyReference!)" onClick="swapTruck(3)" id="truckBtn3"> <img src="(EmptyReference!)" onClick="swapTruck(4)" id="truckBtn4"> </div> Hi there, for a site I'm working on I needed an interactive crossfading slideshow (one that doesn't just run automatically, but with 'previous' and 'next' links) and noticed that all the solutions I stumbled upon fall into one of two categories: 1.) the ones that in some way or other break if the user clicks too fast through the images (i.e. fast enough that the previous crossfade is not completely finished when triggering the next one) 2.) the ones that block any user interactions until the last crossfade is finished Obviously neither is very useful, so I wrote my own. I'm just wondering now, does anyone of you know of any good reusable crossfading slideshow that not only works as it should, but does so without blocking user interaction while fading? As a user, I don't have the patience for those time wasters any more. If there's nothing good out there, I'm tempted to make it a jQuery plugin, but I wouldn't much like to find out later that there has been a perfectly good plugin out there all along. So, if you know of one or have any other helpful suggestions, please tell me. Hi Guys, I'm trying to do up a contact form that after a user submits the information, the drop down contact box will slide back up instead of redirecting to another page. The script works fine in Chrome and Safari, but Firefox and IE keeps redirecting to the php page. Hope someone can shed some light here, thanks! Html form: Code: <div class="left">
<!-- Login Form -->
<form class="clearfix" action="contactengine.php" name="cform" method="post">
<h4>Drop us a mail</h4>
<label class="grey" for="emailName">Name:</label>
<input class="field" type="text" name="emailName" id="emailName" value="" size="23" />
<label class="grey" for="emailFrom">Email Address:</label>
<input class="field" type="text" name="emailFrom" id="emailFrom" value="" size="23" />
<label class="grey" for="message">Message:</label>
<textarea type="text" name="message" id="message" size="23"></textarea>
<div class="clear"></div>
<input type="submit" rows="" cols="" name="submit" value="Submit" class="bt_register" />
<span id="messageSent">Message sent successfully!</span>
</form>
<script language="JavaScript" type="text/javascript">
//You should create the validator only after the definition of the HTML form
var frmvalidator = new Validator("cform");
frmvalidator.addValidation("emailName","req","Please enter your Name");
frmvalidator.addValidation("emailName","maxlen=20", "Max length for Name is 20");
frmvalidator.addValidation("emailFrom","maxlen=50", "Max length for email is 50");
frmvalidator.addValidation("emailFrom","req","Please enter your Email");
frmvalidator.addValidation("emailFrom","email","Please enter a valid email");
</script>
</div>
<div class="left right">
<!-- Register Form -->
<h4>Contact Details</h4>
<p class="grey"><b>XXX<br /></b>XXX<br />XXX<br />XXX</p>
<p class="grey">T: 999<br />F: 999</p>
<h5>Stalk Us</h5>
<a href="index.html"><img src="misc/fb.png" border="0" alt="Facebook" /></a> <a href="index.html"><img src="misc/twit.png" border="0" alt="Twitter" /></a>
</div>
</div>
</div>
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li>Hello there</li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#">Contact Us</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
The Slider JS: Code: $(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Hey There | Contact us" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
//submission scripts
$('div#panel').submit( function(){
//statements to validate the form
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var email = document.getElementById('emailFrom');
if (!filter.test(emailFrom.value)) {
$('.email-missing').show();
} else {$('.email-missing').hide();}
if (document.cform.emailName.value == "") {
$('.name-missing').show();
} else {$('.name-missing').hide();}
if (document.cform.message.value == "") {
$('.message-missing').show();
} else {$('.message-missing').hide();}
if ((document.cform.emailName.value == "") || (!filter.test(email.value)) || (document.cform.message.value == "")){
return false;
}
if ((document.cform.emailName.value != "") && (filter.test(email.value)) && (document.cform.message.value != "")) {
//hide the form
$('.div#panel').hide();
//show the loading bar
$('.loader').append($('.bar'));
$('.bar').css({display:'block'});
//send the ajax request
$.post('contactengine.php',{emailName:$('#emailName').val(),
emailFrom:$('#emailFrom').val(),
message:$('#message').val()},
//return the data
function(data){
//hide the graphic
$('.bar').css({display:'none'});
$('.loader').append(data);
});
//waits 2000, then closes the form and fades out
$("#messageSent").show("slow");
setTimeout('$("#toggle a").toggle(); $("div#panel").slideUp("slow")', 2000);
//stay on the page
return false;
}
});
});
The PHP Code: PHP Code: <?php $EmailFrom = "xxx@xxx.com"; $EmailTo = "xxx@xxx.com"; $Subject = Trim(stripslashes($_POST['Webmail'])); $Name = Trim(stripslashes($_POST['emailName'])); $Email = Trim(stripslashes($_POST['emailFrom'])); $Message = Trim(stripslashes($_POST['message'])); // validation $validationOK=true; if (!$validationOK) { print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">"; exit; } // prepare email body text $Body = ""; $Body .= "Name: "; $Body .= $Name; $Body .= "\n"; $Body .= "Email Adress: "; $Body .= $Email; $Body .= "\n"; $Body .= "Message: "; $Body .= $Message; $Body .= "\n"; // send email $success = mail($EmailTo, Webmail, $Body, "From: <$EmailFrom>"); // redirect to success page if ($success){ print "<meta http-equiv=\"refresh\" content=\"0;URL=success.html\">"; } else{ print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">"; } ?> I have some javascript code: first it gets string of the url in the address bar then it splits the string at the ? and grabs the right half it then makes an IFrame go to that string(which is yet another url I would manually insert) here is the code: Code: function redirect(){
var raw=window.document.location.href;
if(content_address_start=raw.indexOf("?")!=-1){
var content_address=raw.split("frame.html?")[1];
window.document.getElementById('content').src=content_address;
}
}
'content' is the id of the IFrame, and frame.html is the html file this code is inside. Ok, so everything works perfectly when I test this code offline, but as soon as I load it to my website, and the .src line occurs, it just loads a blank page in the IFrame. What could be causing this? Perhaps certain sites will not allow themselves to be inside iframes? Much thanks in advance. I hope I gave enough information and relayed my problem clearly. EDIT: It seems that the code works on other sites, just not youtube. Why would it do this and are there any ways around it? Hey guys, My code works perfectly fine in internet explorer and google chrome, however, in firefox it does not. I have created an online form, but nothing happens when pressing the "submit" button firefox, whereas in other browsers, it works correctly. Also, the centering of the form is different. Please help me if possible. Thanks <!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> <title>Airduct Cleaning</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <link href="text.css" rel="stylesheet" type="text/css"> <script type="text/JavaScript"> function gosubmit(){ musimw.submit(); } </script> <style type="text/css"> #text { width: 250px; position: relative; margin-left: 200px; } </style> </head> <body leftmargin="0" topmargin="0"> <table width="998" heigt="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="147" valign="top"> <!----LEFT MENU---------> <? include "left_menu.php"; ?> </td> <td width="591" valign="top" colspan="1"> <!----TOP---------> <? include "top.php"; ?> <!----TITLE---------> <table width="100%" heigt="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="590" height="33" background="images/top_bg2.gif" valign="bottom"><img src="images/title_sub09_01.gif" /></td> <td width="1" bgcolor="#d3dfe6"></td> </tr> </table> <!----CONTENT---------> <!----story------> <form action=sendmail2.php method=post name=musimw enctype=multipart/form-data onSubmit="return musimm_check(this);"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr style=" position: relative; margin-left: 28px;"> <td width="50"></td> <td><p><span class="stxt2">Call for a Free Estimate</span><br> <br> <img src="images/img25.gif" align="left"><strong>For a free estimate, call: </strong></p> <div id="text"> Office: Insert Office #<br /> Toll-Free: Insert Toll Free # <br /> Email: Insert Email<br /> <br><em>Or, submit the online form below.</em> </div> </td> </tr> <tr> <td width="50"></td> <td> <table width="530" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="#EFEFEF"> <tr> <td width="10"></td> <td width="180" height="25">*First name</td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='fname'/></td> </tr> <tr> <td width="10"></td> <td width="180" height="25">*Last name</td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='lname'/></td> </tr> <tr> <td></td> <td >Phone Number<br /></td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='ptel'/> <select name='pteltype'> <option value='Home'>Home</option> <option value='Work'>Work</option> </select></td> </tr> <tr> <td></td> <td >Cell Phone Number<br /></td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='ctel'/></td> </select></td> </tr> <tr> <td></td> <td height="25">*Email Address</td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='email'/></td> </tr> <tr> <td></td> </tr> <tr> <td colspan="3"height="1" background="images/point.gif"></td> </tr> <tr> <td width="10"></td> <td width="180" height="25">*Type of Service</td> <td style="padding:10px 5px 5px 5px"><select name='bnametype'> <option value='Air Duct Cleaning'>Air Duct Cleaning</option> <option value='Dryer Vent Cleaning'>Dryer Vent Cleaning</option> <option value='Chimney Cleaning'>Chimney Cleaning</option> </select></td> </tr> <tr> <td></td> <td height="25">Square Footage<br /></td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='feet'/></td> </tr> <tr> <td></td> <td height="25">Approximate # of Ducts<br /></td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20"name='vent' /></td> </tr> <tr> <td></td> <td height="25">Number of furnaces</td> <td style="padding:10px 5px 5px 5px"><select name='furnaces'> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> </select></td> </tr> <tr> <td colspan="3"height="1" background="images/point.gif"></td> </tr> <tr> <td></td> <td valign="top" style="padding-top:5px">*Address</td> <td style="padding:10px 5px 5px 5px"><input type="text" class="inputPlain004" size="30" name='address'></td> <tr> <td></td> <td height="25">*City<br /></td> <td style="padding:10px 5px 5px 5px"><input name="city" type="text" class="inputPlain004" value="" size="12"></td> </tr> <tr> <td></td> <td height="25">*State </td> <td style="padding:10px 5px 5px 5px"><select name='statetype'> <option value='State'>IL</option></td> </tr> <tr> <td></td> <td height="25">*Zip Code</td> <td style="padding:10px 5px 5px 5px"><input name="zip" type="text" class="inputPlain004" value="" size="12"></td> </tr> <tr> <td colspan="3"height="1" background="images/point.gif"></td> </tr> <tr> <td></td> <td valign="top" style="padding-top:5px">Comments or Questions</td> <td style="padding:10px 5px 5px 5px"><textarea name='Comment' cols="45" rows="8"></textarea></td> </tr> <tr> <td colspan="3"height="1" background="images/point.gif"></td> </tr> </table> <!---BUTTON---> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="50" align="center"><a href="javascript:gosubmit()"><img src="images/bt_submit.gif"></a> <a href="#"><img src="images/bt_cancel.gif"></a></td> </tr> </table> </form> </td> <td width="1" bgcolor="#d3dfe6"></td> </tr> </table> </td> <td width="260" valign="top"> <!----RIGHT--------> <? include "right_menu.php"; ?> </td> </tr> </table> <!------BOTTOM----------> <? include "foot.php"; ?> </body> </html> I read that you don't allow homework assignments to be posted, but this is only one small section of the assignment (1 page of 5), and I have a migraine, and I am utterly hopeless and lost (ha)... I was wondering if there was any errors you could point out to me that would explain why the button isn't doing ANYTHING (i.e. not calculating the sum, average, or grade) when i click it. I'm new to js so I'm sure it could be pretty much any n00b error in the function code. But like I said any help would be greatly appreciated... Code: <?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 href="5A.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript">
function DisplayGrades()
{ var aNum= 1* document.getElementById("txtaNum").value;
var bNum= 1* document.getElementById("txtbNum").value;
var Avg = (aNum+bNum)/2; document.getElementById("txtAvg").value=Avg;
var Sum= aNum+bNum; document.getElementById("txtSum").value=Sum;
var alphaGr= document.getElementbyID("txtalphaGr").value=alphaGr;
if (Avg <= 60)
alphaGr="F";
if (Avg>60 && Avg <= 70)
alphaGr="D";
if (Avg>70 && Avg <= 80)
alphaGr="C";
if (Avg>80 && Avg <=90)
alphaGr="B";
if (Avg>90 && Avg <=100)
alphaGr="A";}
</script>
</head>
<body>
<div id="wrapper">
<div id="interact">
Enter your grade for Test 1: <input type="text" id=txtaNum" class="controls" size="10" /> <br />
Enter your grade for Test 2: <input type="text" id=txtbNum" class="controls" size="10" /> <br />
<input type="button" id="btnDisplayGrades" value="Display Grades" onclick="DisplayGrades();" />
<hr/>
Sum of Your Grades: <input type="text" id="txtSum" class="controls" size="10" readonly="readonly" /> <br/>
Average Grade: <input type="text" id="textAvg" class="controls" size="10" readonly="readonly" /> <br />
Alpha Grade: <input type="text" id="txtalphaGr" class="controls" size="10" readonly="readonly" />
</div>
</div>
</body>
</html>
Hi, I wonder if someone can help! I am not a JavaScript programmer at all, so I cant really see what I am doing wrong with the following code... Just to explain I have 2 fields on a form that retrieve monetary data from a mysql database. The data is a monetary value e.g. 12.59. Which works fine as normal. I have been asked to hide this value depending on what the customers preferences are set to i.e Show Price = Yes or Show Price = No. Hopefully that makes sense. After lots of deliberation I realised that I couldnt hide the fields because the database called an error saying the price data was missing. So I thought change the field type to a 'password field' and the price data would still be accepted by the database. This thankfully worked and didnt break the php code. So I found some javascript code, chopped and pasted it and came up with the following script. This is called with an onclick event through a link. <script language="JavaScript"> function changetype(){ var myTextField = document.getElementById('hf_showmobprices'); if(myTextField.value == "Yes") document.getElementById('price1jd').type='password'; document.getElementById('price2jd').type='password'; else return false; } I thought the above would work but it doesn't. If I take out one of the lines "document.getElementById('price2jd').type='password';", then it does work. After more playing around I thought, create a function caller as shown below but again that doesnt work. The first function works but the second function doesnt seem to work. I shoved in an alert just to check that the second function was being called and it is. So what I gather is It seems to convert the first price field to a password type field but not the second field. Does anyone know why? is it some thing to do with the getElement and can only run once? I am using FireFox 3.6 if that will help <script type="text/javascript"> function checkprefs() { price1(); price2(); } </script> <script language="JavaScript"> function price1(){ var myTextField = document.getElementById('hf_showmobprices'); if(myTextField.value == "Yes") document.getElementById('price1jd').type='password'; else return true; } </script> <script language="JavaScript"> function price2(){ var mynewtestField2 = document.getElementById('hf_showmobprices'); if(mynewtestField2.value == "Yes") document.getElementById('price2jd').type='password'; else alert("alert2") } </script> Any guidance would be much appreciated john Hi There, I have recently completed making a website for my sister's wedding. I am quite new to the web design world, and have only taken 2 classes on the subject. I used a Javascript function that was provided to us in one of my HTML coding classes in order to automatically resize the (nesting?) div's according to how long the content in them is. This all seems to work perfectly fine in Google Chrome, as well as most versions of Internet Explorer - however, in some versions of internet explorer, and ALL versions of Firefox, this resize function does not seem to work. Since this coding was provided to me by a teacher (who is unfortunately in another country), I'm not sure what kinda of edit would make it so it would function in Firefox, or if there is a way to make in function in Firefox at all. I would appreciate if some of you could take a look at it, and let me know if you have any ideas/suggestions/advice, as to what is happening with the code/why it does not work in Firefox/some versions of Internet Explorer. The specific javascript code (which i assume is the issue here - please let me know if I'm wrong about it being the javascript that isn't working) is he PHP Code: function fnReset(){ document.getElementById('dTorso').style.height="380px"; document.getElementById('dMiddle').style.height="auto"; var middleHt=document.getElementById('dMiddle').scrollHeight; var maxHt=Math.max(380,middleHt); document.getElementById('dTorso').style.height=maxHt + "px"; document.getElementById('dMiddle').style.height=maxHt + "px"; } Which is then called to action he Code: <body onLoad="fnReset();> Also, in some versions of Firefox, the background image for the whole page isn't showing up either - any tips on why that is happening would also be amazing. Thank you so much for any help you may provide. This is a gift to my sister and her fiance, and I really want it to work well for them, and all their guests. Thanks! Hi everyone. Here is the code I am using to flip an image 3 times (Blank -> X, X-> O and O back to blank) Code: function flipBox(img) {
var tmpname;
if(img.src=="http://www.riddlesforall.com/logic/n.gif") {
img.src = "http://www.riddlesforall.com/logic/x.gif";
tmpname = img.name;
document.mainform.elements[tmpname].value = 1;
document.getElementById(img.name).value = 1;
} else if(img.src=="http://www.riddlesforall.com/logic/x.gif") {
var finaltest = checkDoubles(img.name);
if(finaltest=="false") {
img.src = "http://www.riddlesforall.com/logic/o.gif";
tmpname = img.name;
document.mainform.elements[tmpname].value = 3;
document.getElementById(img.name).value = 3;
} else {
img.src = "http://www.riddlesforall.com/logic/n.gif";
}
} else if(img.src=="http://www.riddlesforall.com/logic/o.gif") {
img.src = "http://www.riddlesforall.com/logic/n.gif";
tmpname = img.name;
document.mainform.elements[tmpname].value = 0;
document.getElementById(img.name).value = 0;
}
showVals();
}
I had it working, previously, and everything was fine, but now, for some odd reason I cannot figure out, it is changing the names of the image files to absurdly long gibberish, and I cannot flip any images at all, clicking does nothing. Here is an example of what it changes the names to: Code: <img src="data:image/gif;base64,R0lGODlhGQAZAIAAAP///wAAACH5BAEAAAAALAAAAAAZABkAAAIXhI+py+0Po5y02ouz3rz7D4biSJamWAAAOw==" height=20 width=20 id=1-0-0 name=A1B1 onclick="flipBox(this);" class=gridbox> There are 3 images - N.gif (blank) X.gif (An X) and O.gif I do not understand why it is changing the names like this? As I said, it was working fine before, and now this. Having trouble getting this plugin to work.. jparallax - see here for more info - http://webdev.stephband.info/parallax.html Now I have this plugin working separately, on its own page, just fine. see here - http://bit.ly/hPpSAC But when I went back, to my own page, and tried to incorporate it into the background of my site, I was able to get the look fine, but the movement isn't working. see here - http://bit.ly/ee52Iv I've tried everything I could to get it working.. Maybe someone here could troubleshoot? It would be a huge help, seriously. Thanks. Hello all, I've got a problem with a JS dropdown menu that I'm using. It's an unordered HTML list that is driven by a JS file. The menu is at Watt You Need Electrical - Offering Electrical Services For Geelong, Bellarine Peninsula & The Surf Coast Initially when I got the menu template all the top level items and all the list items were coded as links. What I've done is make the Electrical heading just text and the two dropdown list items below it are still links. The menu works both on a desktop with a pointer and also on a mobile device by touch. The problem is that on a mobile device when I touch the Electrical heading the dropdown doesn't appear. The Solar heading and the dropdown below it work fine because the Solar heading is still a link. Obviously I've created the problem by changing the Electrical heading to text from a link but I'd like to be able to have it that way. I've tested using some online mobile device emulators and it works OK there but when I physically test on an Iphone 5 the bug is there. I haven't been able to get my hands on any other phones or devices to test yet so don't know if it's a problem just with Iphones or Ipads. I've had a look through the Dropdown.src.js file but it's way beyond me, I've listed both the HTML and JS file below. Code: <!DOCTYPE html>
<html>
<head>
<title>Watt You Need Electrical - Offering Electrical Services For Geelong, Bellarine
Peninsula & The Surf Coast</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="Watt You Need Electrical is your one stop shop for all types of electrical services. Whether you need some domestic, commercial, or even industrial electrical work done we can
help. We also can advise on and install solar power systems and split air conditioners." />
<meta name="keywords" content="electrical services" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="css/styles.css" media="Screen" />
<link rel="stylesheet" type="text/css" href="css/mobile.css" media="handheld" />
<link media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" rel="stylesheet" />
<script>
// initialise the drop-down menus
runOnLoad(Dropdown.initialise);
</script>
</head>
<body>
<div id="wrapper">
<a href="tel://+61425859742"><div id="mobile_header"></div></a>
<a href="tel://+61425859742"><div id="phoneBlock"></div></a>
<div id="header"></div>
<div id="nav">
<ul class="dropdown">
<li>
<a href="index.html">Home</a>
</li>
<li>Electrical
<ul>
<li>
<a href="domestic_electrician.html">Domestic</a>
</li>
<li>
<a href="electrical_contractors.html">Commercial/Industrial</a>
</li>
</ul>
</li> <li>
<a href="air_conditioner_installation.html">Air Conditioners</a>
</li> <li>
<a href="solar_power_systems.html">Solar</a>
<ul>
<li><a href="solar_system_maintenance.html">Maintenance</a>
</li>
<li><a href="solar_energy_facts.html">About Solar</a>
</li>
</ul>
</li> <li>
<a href="b_type_gas_service.html">Type B Gas</a>
</li> <li>
<a href="formgenerator/forms/contact.html">Contact Us</a>
</li>
</ul>
</div>
<div id="content-2">
<div class="clear"> </div>
<div id="top_border"></div>
<div id="content-2-1">
<span class="blackheading">Watt You Need Electrical -
Offering Electrical Services For Geelong, Bellarine Peninsula & The Surf Coast</span>
<p>Watt You Need Electrical Services can help you with all your electrical needs. We're not one of the big franchise electrical contractors so we can
take that extra bit of time and effort to make sure you get the best service and advice.
<br /><br />
If it's just an extra power point you need all the way to a complete house rewire, thinking about making the switch to solar power, or if you want a
split airconditioner to keep your house or business cool and comfortable, our focus is on exceeding our customer's expectations and providing the best
quality job at a competitive price.
<br /><br />
Our service doesn't just stop at <a href="domestic_electrician.html">domestic electrical</a> and <a href="solar_power_systems.html">solar power</a>,
we can also attend to your <a href="electrical_contractors.html">commercial and industrial electrical</a> needs and we specialise in <a href="b_type_gas_service.html">B
Class gas appliance</a> repair and maintenance. Our range of services and quality workmanship are what sets us apart from other electrical contractors.
<br /><br />
<a href="formgenerator/forms/contact.html">Contact us</a> today and let Watt You Need Electrical take care of your domestic, solar, air conditioning and commercial and industrial electrical services.
</p>
</div>
<div id="bottom_border"></div>
</div>
<div id="footer">
<table class="tableFooter">
<tr><td>Watt You Need Electrical Pty. Ltd. © 2014</td></tr>
</table>
</div>
</div>
</body>
</html>
Code: /*
Dropdown.js
Creates touch-friendly drop-down menus
Created by Stephen Morley - http://code.stephenmorley.org/ - and released under
the terms of the CC0 1.0 Universal legal code:
http://creativecommons.org/publicdomain/zero/1.0/legalcode
*/
// create the Dropdown object
var Dropdown = (function(){
// the delay, in milliseconds
var DELAY = 250;
// the list of menus
var menus = [];
// Initialises the drop-down menus.
function initialise(){
// listen for touch events on the document if appropriate
if ('createTouch' in document){
document.body.addEventListener('touchstart', handleTouchStart, false);
}
// loop over the menus, converting them
var menus = document.querySelectorAll('ul.dropdown');
for (var i = 0; i < menus.length; i ++) applyTo(menus[i]);
}
/* Handles a touch start event. The parameter is:
*
* e - the event
*/
function handleTouchStart(e){
// determine whether any menu is open
var isOpen = false;
for (var i = 0; i < menus.length; i ++){
if (menus[i].isOpen) isOpen = true;
}
// return immediately if all menus are closed
if (!isOpen) return;
// move up the document tree until we reach the root node
var node = e.target;
while (node != null){
// return immediately if we are inside a drop-down menu
if (/\bdropdown\b/.test(node.className)) return;
// move onto the parent node
node = node.parentNode;
}
// close all menus
close();
}
/* Closes all menus except the specified menu. The parameter is:
*
* menu - a menu not to close; this parameter is optional
*/
function close(menu){
// loop over the menus, closing them
for (var i = 0; i < menus.length; i ++){
if (menus[i] != menu) menus[i].close();
}
}
/* Creates a drop-down menu. The parameter is:
*
* node - either the DOM node of the menu or the ID of the node
*/
function applyTo(node){
// fetch the DOM node if a string was supplied
if (typeof node == 'string') node = document.getElementById(node);
// create and store the new menu
menus.push(new Menu(node));
}
/* Creates a drop-down menu. The parameter is:
*
* node - the DOM node of the menu
*/
function Menu(node){
// store the node
this.node = node;
// update the class name
node.className += ' dropdownJavaScript';
// listen for mouse events
if ('addEventListener' in node){
node.addEventListener(
'mouseover', this.bind(this.handleMouseOver), false);
node.addEventListener('mouseout', this.bind(this.handleMouseOut), false);
node.addEventListener('click', this.bind(this.handleClick), false);
}else{
node.attachEvent('onmouseover', this.bind(this.handleMouseOver));
node.attachEvent('onmouseout', this.bind(this.handleMouseOut));
node.attachEvent('onclick', this.bind(this.handleClick));
}
// listen for touch events if appropriate
if ('createTouch' in document){
node.addEventListener('touchstart', this.bind(this.handleClick), false);
}
}
// whether the menu is open
Menu.prototype.isOpen = false;
// the timeout
Menu.prototype.timeout = null;
/* Binds the specified function to the current object. The parameter is:
*
* f - the function
*/
Menu.prototype.bind = function(f){
// return the bound function
var thisObject = this;
return function(){ f.apply(thisObject, arguments); }
}
/* Handles a mouse over event. The parameters a
*
* e - the event
* immediate - true to open the menu without a delay
*/
Menu.prototype.handleMouseOver = function(e, immediate){
// clear the timeout
this.clearTimeout();
// find the parent list item
var item = ('target' in e ? e.target : e.srcElement);
while (item.nodeName != 'LI' && item != this.node) item = item.parentNode;
// if the target is within a list item, set the timeout
if (item.nodeName == 'LI'){
this.toOpen = item;
this.timeout =
window.setTimeout(this.bind(this.open), (immediate ? 0 : DELAY));
}
}
// Handles a mouse out event.
Menu.prototype.handleMouseOut = function(){
// clear the timeout
this.clearTimeout();
// set the timeout
this.timeout = window.setTimeout(this.bind(this.close), DELAY);
}
/* Handles a click event. The parameter is:
*
* e - the event
*/
Menu.prototype.handleClick = function(e){
// close any other menus
close(this);
// find the parent list item
var item = ('target' in e ? e.target : e.srcElement);
while (item.nodeName != 'LI' && item != this.node) item = item.parentNode;
// check that the target is within a list item
if (item.nodeName == 'LI'){
// check whether the item has a closed submenu
var submenu = this.getChildrenByTagName(item, 'UL');
if (submenu.length > 0 && !/\bdropdownOpen\b/.test(item.className)){
// open the submenu
this.handleMouseOver(e, true);
// prevent the default action
if ('preventDefault' in e){
e.preventDefault();
}else{
e.returnValue = false;
}
}
}
}
// Clears the timeout.
Menu.prototype.clearTimeout = function(){
// clear the timeout
if (this.timeout){
window.clearTimeout(this.timeout);
this.timeout = null;
}
}
// Opens the last item hovered over.
Menu.prototype.open = function(){
// store that the menu is open
this.isOpen = true;
// loop over the list items with the same parent
var items = this.getChildrenByTagName(this.toOpen.parentNode, 'LI');
for (var i = 0; i < items.length; i ++){
// check whether there is a submenu
var submenu = this.getChildrenByTagName(items[i], 'UL');
if (submenu.length > 0){
// check whether the submenu should be opened or closed
if (items[i] != this.toOpen){
// close the submenu
items[i].className =
items[i].className.replace(/\bdropdownOpen\b/g, '');
this.close(items[i]);
}else if (!/\bdropdownOpen\b/.test(items[i].className)){
// open the submenu
items[i].className += ' dropdownOpen';
// determine the location of the edges of the submenu
var left = 0;
var node = submenu[0];
while (node){
left += node.offsetLeft;
node = node.offsetParent;
}
right = left + submenu[0].offsetWidth;
// move the submenu to the right of the item if appropriate
if (left < 0) items[i].className += ' dropdownLeftToRight';
// move the submenu to the left of the item if appropriate
if (right > document.body.clientWidth){
items[i].className += ' dropdownRightToLeft';
}
}
}
}
}
/* Closes the menus within the specified node. The parameter is:
*
* node - the node; if omitted, all menus are closed
*/
Menu.prototype.close = function(node){
// if no node was specified, close all menus
if (!node){
this.isOpen = false;
node = this.node;
}
// loop over the items, closing their submenus
var items = node.getElementsByTagName('li');
for (var i = 0; i < items.length; i ++){
items[i].className = items[i].className.replace(/\bdropdownOpen\b/g, '');
}
}
/* Returns an array containing the children of the specified node with the
* specified tag name. The parameters a
*
* node - the node
* tagName - the tag name
*/
Menu.prototype.getChildrenByTagName = function(node, tagName){
// initialise the list of children
var result = [];
// loop over the children, adding those with the right tag name to the list
for (var i = 0; i < node.childNodes.length; i ++){
if (node.childNodes[i].nodeName == tagName){
result.push(node.childNodes[i]);
}
}
// return the children
return result;
}
// return the public API
return {
initialise : initialise,
applyTo : applyTo
};
})();
Any help is appreciated. Hey guys..... I've built a tool where users can search for something & the results show up in a select list as selectable options..... sometimes the results can take a few seconds to load depending on how many results there are... so I was attempting to show some "Results are loading" text when they search, & then hide it when they are displayed. However for some reason it's not working correctly...... both commands don't appear to work until the select list options have loaded & hence rendering them redundant.... I have tried putting them inside separate functions but no change in the behavior. What basically happens is I press the button to search & it searches & once the results show up so does the loading text.... however if I include the hide text command then the text doesn't show at all as it's hidden as soon as it's shown. Here is the code I am using.. PHP Code: function searchCats(text) { // Set URL for ajax request var url = 'search_cats.php?search_text='+text; // Set up element we're modifying var results = document.getElementById('cat_list'); // Trim string text.replace(/^ss*/, '').replace(/ss*$/, ''); if (text.length < 3) { alert('Please enter a search string more than 2 characters.'); return; } // Send the request, giving it an anonymous function that acts as the oncomplete event ajaxRequest(url, (function(ajaxResponse) { /* Deal with results */ // First we remove all current childs while(results.hasChildNodes()) { while (results.childNodes.length >= 1) { results.removeChild(results.firstChild); } } if (ajaxResponse == '') { // Display no results text document.getElementById('no_results').style.display='block'; } else { // Hide no results text document.getElementById('no_results').style.display='none'; // Display loading text document.getElementById('loading_results').style.display='block'; // Check for occurence of cat seperator (if not there then we know we only have one results) var sep_found = ajaxResponse.indexOf('!@!'); if (sep_found === -1) { // One result only // Seperate ID & cat name var parts = ajaxResponse.split('^@^'); // Create option element var option = document.createElement('option'); // Add attribute option.setAttribute('value', parts[0]); // Create text node var textNode = document.createTextNode(parts[1]); // Append text node to option element option.appendChild(textNode); // Now append option element to select list results.appendChild(option); } else { // Seperate cat data var cats = ajaxResponse.split('!@!'); // Loop through cat data for(i = 0; i < cats.length; i++) { // Seperate ID & cat name var parts = cats[i].split('^@^'); // Create option element var option = document.createElement('option'); // Add attribute option.setAttribute('value', parts[0]); // Create text node var textNode = document.createTextNode(parts[1]); // Append text node to option element option.appendChild(textNode); // Now append option element to select list results.appendChild(option); } } } })); // Hide loading text document.getElementById('loading_results').style.display='none'; } Thanks guys! Hello, can you operate correctly this cropper with IE6? http://www.defusion.org.uk/demos/060519/cropper.php On the web says it works correctly with IE6. I've just installed Windows XP and IE6, and maybe I should install or activate something more... Regards Javi Hello and thanks for the help. I'm no expert by any means, and I have no idea what the problem could be. Internet Explorer crops my images on my image fade, but Chrome and Safari view it just fine. the website is www.pisanchynproductions.com If you open it in IE and Chrome you can see Chrome shows image fadeshow fine, and IE crops the images. For the record, I don't want the images cropped. The problem must be in here somewhere. Code: var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["images/SSPP1.JPG", "", ""] //plain image syntax
fadeimages[1]=["images/SSPP2.JPG", "", ""] //plain image syntax
fadeimages[2]=["images/SSPP3.JPG", "", ""] //plain image syntax
fadeimages[3]=["images/SSPP4.JPG", "", ""] //plain image syntax
fadeimages[4]=["images/SSPP5.JPG", "", ""] //plain image syntax
fadeimages[5]=["images/SSPP6.JPG", "", ""] //plain image syntax
fadeimages[6]=["images/SSPP7.JPG", "", ""] //plain image syntax
fadeimages[7]=["images/SSPP11.JPG", "", ""] //plain image syntax
fadeimages[8]=["images/SSPP12.JPG", "", ""] //plain image syntax
fadeimages[9]=["images/SSPP13.JPG", "", ""] //plain image syntax
fadeimages[10]=["images/SSPP14.JPG", "", ""] //plain image syntax
var fadebgcolor="white"
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();})
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (var p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}
function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
try{
@end @*/
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
}
catch(e){}
@end @*/
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="gallery") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" rel="nofollow" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="gallery") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
if(document.getElementById('content'))
document.getElementById('content').style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
try{
@end @*/
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
}catch(e){}
@end @*/
}
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
I wish i knew more so I could realized how dumb this question was. Code: <img id="who" class="who" src="who.jpg" alt="Warriors Chosen For Battle" title="Warriors Chosen For Battle"> <img id="chosen" class="selector" src="selector.jpg" alt="Click for next image" title="Click for next image" onclick="chosen()"> <img id="ambassador" class="selector" src="selector.jpg" alt="Click for next image" title="Click for next image"onclick="ambassador()"> Code: function chosen()
{
document.getElementById("who").src="chosen_for_christ.jpg";
}
function ambassador()
{
document.getElementById("who").src="ambassador.jpg";
}
Yeah so basically when I click on one of the selector images I want it to change the value "who" images src value. I'm making an image selector, it works fine in IE, but every other browser it refuses to do anything. I placed this code in an external js file. Nothing happens. What do I need to change? Code: var randomPic = new Array();
randomPic[0] = "images/home/binoculars.jpg";
randomPic[1] = "images/home/conductor.jpg";
randomPic[2] = "images/home/dandelion.jpg";
randomPic[3] = "images/home/dog.jpg";
var whichPic = Math.floor((Math.random() * randomPic.length));
document.getElementById('tag').style.backgroundImage = randomPic[whichPic];
Hello everyone. I am trying to add the functionality of having a mouseover popup image with multiple different popup images. I have found the code seen below and altered it for my uses and was hoping to find out if someone can tell me why I am seeing the same image with each mouseover. Thanks. <script type="text/javascript"> function ShowPopup(hoveritem) { hp = document.getElementById("hoverpopup"); // Set position of hover-over popup hp.style.top = hoveritem.offsetTop + 18; hp.style.left = hoveritem.offsetLeft + 20; // Set popup to visible hp.style.visibility = "Visible"; } function HidePopup() { hp = document.getElementById("hoverpopup"); hp.style.visibility = "Hidden"; } </script> <table> <tbody> <tr> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867796.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851557.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867803.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851637.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867802.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851627.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867799.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851597.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867797.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851567.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867798.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851577.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867800.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851607.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867801.jpg" /></a> <a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"> </a> <div id="hoverpopup" style="visibility: hidden; position: absolute; top: 245pt; left: 290pt;"><img width="214" height="300" alt="" src="http://entrixsports.com//ir/oi/1000954/1851617.jpg" /></div> </td> <td><a id="hoverover" style="cursor: default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();"><img width="20" height="20" alt="" src="http://entrixsports.com//ir/oi/1000954/1867804.jpg" /></a></td> </tr> </tbody> </table> <table width="270" cellspacing="1" cellpadding="1" border="0"> <tbody> <tr> <td><a href="javascriptopImage('http://entrixsports.com//ir/oi/1000954/1856598.jpg');"><img width="96" height="100" border="0" align="middle" alt="" src="http://entrixsports.com//ir/oi/1000954/1856097.jpg" /></a></td> <td style="text-align: center;"><a href="javascriptopImage('http://entrixsports.com//ir/oi/1000954/1856227.jpg');"><img width="65" height="100" border="0" align="middle" src="http://entrixsports.com//ir/oi/1000954/1856098.jpg" alt="" /></a></td> <td style="text-align: right;"><a href="http://entrixsports.com/linkTo/1304219/1000954" rel="nofollow" target="_blank"><img width="60" height="102" border="0" align="middle" alt="" src="http://entrixsports.com//ir/oi/1000954/1856099.JPG" /></a></td> </tr> </tbody> </table> I've used the Backbox Image Viewer from http://www.javascriptkit.com/script/script2/backbox/ on this website for over 3 years and this problem just arose with the update of IE to version 9. When you click the link to open the gallery, instead of backbox opening normally, a small all white box appears in it's place. No navigation images or gallery images or anything. You can view the issue here at http://www.joewheelerknifemaker.com and by clicking on "Knives by Joe, Photo Gallery". I know that this happens on multiple computers using IE9, but works perfectly in Firefox, Safari and Chrome from what I can tell. Anyone have any ideas or know what IE changed in this version that could be causing this? Thanks in advance. |
|||||||