JavaScript - Mouseover Producing Multiple Images Works In Firefox, But Not I.e.

Hi, thanks for looking. I'm new to JS and am trying to use an image several times on the same page, having each image show rollover behavior. The rollover code works for the first image on the page, but when I hover over subsequent images it only changes the rollover state of the first image on the page, not the image I'm hovering over. Any help would be appreciated. I'm using the following functions to change rollover state:

Code:

gallery_on = new Image ( );
gallery_off = new Image ( );
gallery_on.src = "gallery_on.png";
gallery_off.src = "gallery_off.png";

function button_on ( imgId )
{
  if ( document.images )
  {
    butOn = eval ( imgId + "_on.src" );
    document.getElementById(imgId).src = butOn;
  }
}

function button_off ( imgId )
{
  if ( document.images )
  {
    butOff = eval ( imgId + "_off.src" );
    document.getElementById(imgId).src = butOff;
  }
}

I'm using the classic theme for galleria to create a basic image gallery. http://galleria.io/themes/classic/

The gallery is for a photo retoucher who has some before/after photos that I want to switch in and out with a mouseover. Basically when the user hovers over the main image an unedited version of the image will show, when they mouse out the image will revert back to the original.

I'm not sure how to achieve this with galleria. I thought I could target the img tags but that doesn't seem to be working.

I'm relevantly inexperienced with javascript so I'm not sure how to target the imgs through galleria or if this can be accomplished in an effective way. (maybe changing the src?)

I'm not sure if there is anyone familiar enough with galleria to help me out, but i figured asking can't hurt. Any sort assistance would be greatly appreciated.

I currently have an image and underneath it there are 6 thumbnails. When I run the cursor over them the big image changes. This works fine. However, I would like to have text beside the big picture that also changes depending on the thumbnail over which I am hovering.

I have tried to work it out myself but failed miserably. I have tried forums, but can't find what I need. My code as it stands at the moment is:

<script type="text/javascript">
if (document.images) {image0 = new Image;
image0.src = "i/p0.png";
image1 = new Image;
image1.src = "i/p1.png";
image2 = new Image;
image2.src = "i/p2.png";
image3 = new Image;
image3.src = "i/p3.png";
image4 = new Image;
image4.src = "i/p4.png";
image5 = new Image;
image5.src = "i/p5.png";
image6 = new Image;
image6.src = "i/p6.png";
}</script>

and

<img class="img" src="i/p0.png" align="left" width="300" name="rollimg" title='blah' alt="blah"/>
<span class="inverse-text"><this is where I want changing text to appear as I roll over thumbnails.</span>
<br clear="all"/>

<span onmouseover="document.rollimg.src=image0.src;"><img src="i/tb/t0.jpg" class="img" width="70" alt="blah" title="blah"/></span>

<span onmouseover="document.rollimg.src=image1.src;"><img src="i/tb/t1.gif" class="img" width="70" alt="blah" title="blah"/></span>

<span onmouseover="document.rollimg.src=image2.src;"><img src="i/tb/t2.gif" class="img" width="70" alt="blah" title="blah"/></span>

<span onmouseover="document.rollimg.src=image3.src;"><img src="i/tb/t3.gif" class="img" width="70" alt="blah" title="blah"/></span>

<span onmouseover="document.rollimg.src=image4.src;"><img src="i/tb/t4.gif" class="img" width="70" alt="blah" title="blah"/>

<span onmouseover="document.rollimg.src=image5.src;"><img src="i/tb/t5.gif" class="img" width="70" alt="blah" title="blah"/>

<span onmouseover="document.rollimg.src=image6.src;"><img src="i/tb/t6.gif" class="img" width="70" alt="blah" title="blah"/>

Ideally if you could tell me how to update the above script and code, so that it works, I would be very grateful.

Hi Coders,

I have been trying to achieve a multiple mouseover effect on some of my pictures within my web page.

The first effect changes the picture within a table - works fine
The second effect should change the text within another table. - does not work.

I am receiving the error message:
'document.text' is null or not an object.

Here is the code which lies on my image:

Code:

<td style="height: 101px; width: 20%" valign="top">
<img onMouseover="changeimage(myimages[1],this.href); newchange();" alt="loading" height="86" src="images/marsrover_sml.jpg" width="104" /></td>

Here is the newchange() script:

Code:

<script language="JavaScript1.1">
function newchange()
{
document.text.innerHTML='<b>hello world</b>'
}
</script>

And I am sure that the table in which the text should appear has its Id and Name defined as "text"

Here is it:

Code:

<td class="style5" Id="text" name="text" style="height: 29px; width: 525px" valign="top">
<strong class="style10">Endavour has launched</strong></td>

But could not make it work error free.
Thanks for any comments.

I need help with the script for multiple mouseOver Effects for my Menu Bar.

The script I have is:

<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="home1.jpg";
}
function mouseOut()
{
document.getElementById("b1").src ="home.jpg";
}
</script>
<A HREF="Index.html" rel="nofollow" target="_blank"><img src="home.jpg" id="b1" width="167" height="60" onmouseover="mouseOver()" onmouseout="mouseOut()"/></A>

However, that only does one mouseover effect. Can someone help me with this?

Hello everyone, right now I have this in my site: Code:

<html>
<head>
<script type="text/javascript">
function open_win() {
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
window.open("http://www.google.com/")
}
</script>
</head>
<body>
<form>
<input type=button value="Open Windows" onclick="open_win()">
</form>
</body>
</html>

And I was wondering if there's a way to get rid of the button, and make it so when the user opens the webpage, it automatically opens the multiple webpages.


--
If that's not possible, I was also wondering if there's a way to make the button "click" on a mouseover, so when they move their mouse across the button, it opens the pages.

I would rather have the 1st option, if possible.
Thanks.

hi

i have the following code which works fine in IE but nothing happens in firefox.

Code:

<html>
<bgsound id="sound">
<script>
function PlaySound(url) {
document.all.sound.src = url;
}
</script>

<body>

<a href="#"><img src="images/butters.jpg" onMouseOver="PlaySound('http://www.pacdv.com/sounds/sounds/sound38.mp3')" /></a>
</body>
</html>

Any one know of any good ways to make sound work in firefox?

ta

I have a problem when changing images and image maps with mouseover and click events in IE. Firefox, Chrome and Safari all work well but IE does not. It's hard to describe but when I mouse over a hot spot the image changes and then right away changes back. you can see it here: here is the Javascript code:
Code:

var current_overID = "";
var last_overID = "";
 
function item (img_name,width,height)
{
        img_prefix = img_name;
        this.slide_img = new Image (width,height);
        this.slide_img.src = "http://www.dsisyr.com/images/stories/DeltaV/" + img_prefix + ".jpg";
}
 
function new_item (img_name,width,height) 
{
        item [img_name] = new item (img_name,width,height);
}
 
function mouseover (itemID, mapID)
{
        current_overID = itemID;
        if (current_overID != last_overID) {
                          document.deltavmap.src = item [current_overID].slide_img.src;
						  document.deltavmap.useMap=mapID;
        }
}

 
new_item ("DSI-DeltaV1",700,300);
new_item ("DSI-DeltaV1-2-1",700,300);
new_item ("DSI-DeltaV1-2-2",700,300);
.....many more


<MAP NAME="deltav"> 
<AREA SHAPE="RECT" COORDS="27,27,219,53" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-1', '#eng')"  window.defaultStatus='' window.status='Engineering' return true > 
<AREA SHAPE="RECT" COORDS="27,74,171,97" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-3-1', '#sw')" window.defaultStatus='' window.status='Software'; return true > 
<AREA SHAPE="RECT" COORDS="27,122,270,145" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-4-1', '#doc')" window.defaultStatus='' window.status='Documentation'; return true > 
<AREA SHAPE="RECT" COORDS="27,167,156,195" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-5-1', '#sup')" window.defaultStatus='' window.status='Support'; return true > 
<AREA SHAPE="DEFAULT" NOHREF> 
 
</MAP> 

<MAP NAME="eng"> 
<AREA SHAPE="RECT" COORDS="38,52,244,75"
	HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-1', '#eng') "
    window.defaultStatus='' 
    window.status='Batch Processing' return true 
    > 
<AREA SHAPE="RECT" COORDS="40,82,230,103"
	HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-2', '#eng')"
    window.defaultStatus='' 
    window.status='Control Modules' return true 
    > 
<AREA SHAPE="RECT" COORDS="40,112,143,136"
	HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-3', '#eng')"
    window.defaultStatus='' 
    window.status='Graphics'  return true
	>
    <AREA SHAPE="RECT" COORDS="40,141,176,168" 	
		HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-4', '#eng')"
		window.defaultStatus=''
		window.status='ProtoTyping' return true
	>
<AREA SHAPE="RECT" COORDS="24,224,84,234" 
	HREF="#" OnClick="mouseover('DSI-DeltaV1-3-1', '#sw')"
    window.defaultStatus='' 
    window.status='Software' return true 
    > 
<AREA SHAPE="RECT" COORDS="24,236,124,247" 
	HREF="#" OnClick="mouseover('DSI-DeltaV1-4-1', '#doc')"
    window.defaultStatus=''
    window.status='Documentation' return true 
    > 
<AREA SHAPE="RECT" COORDS="25,248,76,261" 
	HREF="#" OnClick="mouseover('DSI-DeltaV1-5-1', '#sup')"
    window.defaultStatus='' 
    window.status='Support' return true 
    > 
<AREA SHAPE="RECT" COORDS="620,240,699,399" HREF="#" OnClick="mouseover('DSI-DeltaV1', '#deltav')" window.defaultStatus='' window.status='deltav'; return true > 
<AREA SHAPE="DEFAULT" NOHREF> 
 
</MAP> 
... many others

Can any one tell me what i need to do to fix this in IE? Thanks!
Fayette

Hi all, I've been trying to teach myself Javascript to figure out this problem, but I'm apparently not learning what I need to.

The objective is this:
I want to have a div appear below my mouse when mousing over different parts of my website.

I know how to swap out the background images, I know how to change the div's sizes... It's just that I'm using one div, and in order to get this right, I need it to be positioned in different places under the mouse each time the image changes.

I've got a cross-browser mouse-follow worked out, I just don't know how to edit the "divvx" and "divvy" variables when I mouse over the "boxtest" div.

Here is the code I'm working on, maybe I'm just missing something obvious?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var divvx=22, divvy=22;
function doMouseMove(e){
var posx=0;var posy=0;
var e=(!e)?window.event:e;//IE:Moz
if (e.pageX){//Moz
posx=e.pageX+window.pageXOffset;
posy=e.pageY+window.pageYOffset;
}
else if(e.clientX){//IE
if(document.documentElement){//IE 6+ strict mode
posx=e.clientX+document.documentElement.scrollLeft;
posy=e.clientY+document.documentElement.scrollTop;
}
else if(document.body){//Other IE
posx=e.clientX+document.body.scrollLeft;
posy=e.clientY+document.body.scrollTop;
}
}
else{return false}//old browsers
var mydiv=document.getElementById('curicon');
mydiv.style.left=(posx-divvx)+'px';
mydiv.style.top=(posy-22)+'px';
}
document.onmousemove=doMouseMove
function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}
</script>
<style type="text/css">
<!--
#curicon {
	background-image: url(resources/cursors/Inactive_Halo.png);
	height: 44px;
	width: 44px;
	position: absolute;
	top: -80px;
	left: -80px;
}
#boxtest {
	position: absolute;
	height: 100px;
	width: 400px;
	background-color: #0F0;
	left: 149px;
	top: 213px;
}
-->
</style>
</head>
<body>
<div id="curicon" name="curicon" style="position:absolute; left:-250px; z-index:2"></div>
<div id="boxtest" onMouseOver="MM_callJS('divvx=68')"></div>
</body>
</html>

Thanks, everyone. This has been driving me nuts for an entire week.

Since I like to minimize on graphics to keep bandwidth low, I have been using a script to simulate buttons. When you mouseover, you get some color changes which revert back when you move the mouse off. Simple, right?

The problem is that firefox totally ignores the script. Even worse, safari changes on mouseover, but doesn't revert on mouseout.

I have this in the heading:

Code:

<script LANGUAGE="JavaScript">

function ColorBlock(oRegion,sLinkID) 
{	
	if (document.readyState != "complete") return;
	window.event.cancelBubble = true;
	oRegion.className = "MenuSelected";	
	oRegion.style.cursor="hand";
	sLinkID.style.color = "black";
}

function UncolorBlock(oRegion,sLinkID) 
{
	if (document.readyState != "complete") return;
	window.event.cancelBubble = true;
	var oToEl = window.event.toElement;
	if ((oToEl && !oRegion.contains(oToEl))||!oToEl) 
	{
	sLinkID.style.color = "white";
	oRegion.className = "MenuUnSelected";
	}
}
</script>

And this is in the body.

Code:

<table class=MenuTable>
   <tr><td  OnMouseover="ColorBlock(this, Link4);"
            OnMouseout="UncolorBlock(this, Link4);"
            CLASS="MenuUnSelected" nowrap>
      <a STYLE="color:white" ID="Link4"
         OnMouseover="this.style.textDecorationNone=true;" href="javascript:createWindow('edu.htm','edu','toolbar=1,location=1,directories=1,status=1,menubar=1,scrollbars=1,resizable=1,width=825,height=725')">
      <div style="width:144; cursor=hand; font-weight:bold;">
      Education
      </a></div></td>
    </tr>
</table>

I have a bunch of these "buttons" ... firefox ignoring the code is annoying but safari only using half the code makes it look really bad. Anyone have any ideas?

I've done a lot of work over time on the site, there are just a few bugs that have been avoiding me and I am trying to hunt them all down and kill them.

The page is at www.adam-k-watts.com

I am working with the quiz found below (Multiple Choice Quiz that is instantly graded/checked), and would like to add pictures to the questions and rollover sound effects.

I have figured how to add the picture, but not the sound. Sound effects are played when added to the html section, but not when added to the javascript coding. I am alright with html and css, but not with javascript. Any help from the javascript experts would be appreciated.


********* Coding Example *********

<HTML>
<HEAD>
<TITLE>The JavaScript Source: Miscellaneous : Multiple Choice Quiz</TITLE>
<META HTTP-EQUIV="The JavaScript Source" CONTENT = "no-cache">
<META NAME="description" CONTENT="Add a quiz to your Web page without using a server-side script. Easy to set-up. Questions and answers are stored in a multi-dimensional array format in an external file. The quiz is marked in real time, and once answered, questions are set to read-only. A summary of the users score is alerted at the end.">
<META NAME="date" CONTENT="2005-12-27">
<META NAME="channel" CONTENT="Developer">
<META NAME="author" CONTENT="James Crooke">
<META NAME="section" CONTENT="Miscellaneous">
<style type="text/css">
<!--
.question {
color:darkblue;
font-size:14px;
font-weight:bold;
}
-->
</style>

<script type="text/javascript">
<!--
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: James Crooke :: http://www.cj-design.com */

var useranswers = new Array();
var answered = 0;

function renderQuiz() {
for(i=0;i<questions.length;i++) {
document.writeln('<p class="question">' + questions[i] + ' <span id="result_' + i + '"><img src="blank.gif" style="border:0" alt="" /></span></p>');
for(j=0;j<choices[i].length;j++) {
document.writeln('<input type="radio" name="answer_' + i + '" value="' + choices[i][j] + '" id="answer_' + i + '_' + j + '" class="question_' + i + '" onclick="submitAnswer(' + i + ', this, \'question_' + i + '\', \'label_' + i + '_' + j + '\')" /><label id="label_' + i + '_' + j + '" for="answer_' + i + '_' + j + '"> ' + choices[i][j] + '</label><br />');
}
}
document.writeln('<p><input type="submit" value="Show Score" onclick="showScore()" /> <input type="submit" value="Reset Quiz" onclick="resetQuiz(true)" /></p><p style="display:none"><img src="correct.gif" style="border:0" alt="Correct!" /><img src="incorrect.gif" style="border:0" alt="Incorrect!" /></p>');
}
function resetQuiz(showConfirm) {
if(showConfirm)
if(!confirm("Are you sure you want to reset your answers and start from the beginning?"))
return false;
document.location = document.location;
}
function submitAnswer(questionId, obj, classId, labelId) {
useranswers[questionId] = obj.value;
document.getElementById(labelId).style.color = "grey";
//disableQuestion(classId);
showResult(questionId);
answered++;
}
function showResult(questionId) {
if(answers[questionId] == useranswers[questionId]) {
document.getElementById('result_' + questionId).innerHTML = '<img src="correct.gif" style="border:0" alt="Correct!" />'; // I tried to make the background a different colour for the answer document.getElementById(questionId).style.border ='1px';
} else {
document.getElementById('result_' + questionId).innerHTML = '<img src="incorrect.gif" style="border:0" alt="Incorrect!" />';
}
}
function showScore() {
if(answered != answers.length) {
alert("You have not answered all of the questions yet!");
return false;
}
questionCount = answers.length;
correct = 0;
incorrect = 0;
for(i=0;i<questionCount;i++) {
if(useranswers[i] == answers[i])
correct++;
else
incorrect++;
}
pc = Math.round((correct / questionCount) * 100);
alertMsg = "You scored " + correct + " out of " + questionCount + "\n\n";
alertMsg += "You correctly answered " + pc + "% of the questions! \n\n";
if(pc == 100)
alertMsg += response[0];
else if(pc >= 90)
alertMsg += response[1];
else if(pc >= 70)
alertMsg += response[2];
else if(pc > 50)
alertMsg += response[3];
else if(pc >= 40)
alertMsg += response[4];
else if(pc >= 20)
alertMsg += response[5];
else if(pc >= 10)
alertMsg += response[6];
else
alertMsg += response[7];
if(pc < 100) {
if(confirm(alertMsg))
resetQuiz(false);
else
return false;
} else {
alert(alertMsg);
}
}
function disableQuestion(classId) {
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++) {
if (alltags[i].className == classId) {
alltags[i].disabled = true;
}
}
}

var questions = new Array();
var choices = new Array();
var answers = new Array();
var response = new Array();

// To add more questions, just follow the format below.

questions[0] = "1) JavaScript is ..." ;
choices[0] = new Array();
choices[0][0] = "the same as Java";
choices[0][1] = "kind of like Java";
choices[0][2] = "different than Java";
choices[0][3] = "ther written part of Java";
answers[0] = choices[0][2];



///////// THIS IS THE SECTION THAT I'M TRYING TO WORK ON /////////
// image works, but sound doesn't //

questions[1] = "<a href='javascriptHTMLSound' id='dummyspan' // the smiley is actually a colon followed by a D as in "DHTML"
onMouseOver='DHTMLSound('success.wav')'><img src='some_image.gif'></a>";
choices[1] = new Array();
choices[1][0] = "Play This" + "<a href='javascriptlaySound('success.wav')'>Play This</a>";
choices[1][1] = "objective";
choices[1][2] = "evil";
choices[1][3] = "object based";
answers[1] = choices[1][3];

/////////////////////////////////////////////////////////////////



questions[2] = "3) To comment out a line in JavaScript ...";
choices[2] = new Array();
choices[2][0] = "Precede it with two forward slashes, i.e. '//'";
choices[2][1] = "Precede it with an asterisk and a forward slash, i.e. '*/'";
choices[2][2] = "Precede it with an asterisk, i.e. '*'";
choices[2][3] = "Precede it with a forward slash and an asterisk, i.e. '/*'";
answers[2] = choices[2][0];

questions[3] = "4) JavaScript can only run on Windows";
choices[3] = new Array();
choices[3][0] = "True";
choices[3][1] = "False";
answers[3] = choices[3][1];

questions[4] = "5) Semicolons are optional at the end of a JavaScript statement.";
choices[4] = new Array();
choices[4][0] = "True";
choices[4][1] = "False";
answers[4] = choices[4][0];

questions[5] = "strings are...";
choices[5] = new Array();
choices[5][0] = "strings, numbers, BooBoos, and nulls";
choices[5][1] = "strings, text, Booleans, and nulls";
choices[5][2] = "strings, numbers, Booleans, and nulls";
choices[5][3] = "strings, numbers, Booleans, and zeros";
answers[5] = choices[5][2];

// response for getting 100%
response[0] = "Excellent, top marks!";
// response for getting 90% or more
response[1] = "Excellent, try again to get 100%!"
// response for getting 70% or more
response[2] = "Well done, that is a good score, can you do better?";
// response for getting over 50%
response[3] = "Nice one, you got more than half of the questions right, can you do better?";
// response for getting 40% or more
response[4] = "You got some questions right, you can do better!";
// response for getting 20% or more
response[5] = "You didn't do too well, why not try again!?";
// response for getting 10% or more
response[6] = "That was pretty poor! Try again to improve!";
// response for getting 9% or less
response[7] = "Oh dear, I think you need to go back to school (or try again)!";

//-->
</script>

</HEAD>
<BODY BGCOLOR=#ffffff vlink=#0000ff >
<script>
function DHTMLSound(surl) {
document.getElementById("dummyspan").innerHTML="<embed src='"+surl+"' hidden=true autostart=true loop=false>";
}
</script>
<script type="text/javascript">
<!--
renderQuiz();
//-->
</script>
</body></html>


*********

I have also tried the following sound ideas, but none work "within" the javascript -- they do work when assigned to a button inside the html however... The trick is, I want to be able to display an image within the question, then mouseover a <span> of text or an image (preferrably NOT a link <a>) and have the sounds played as part of the choices for the question.

For a slightly different purpose, I'm also interested in being able to have the correst answer (for more complicated quizes) appear beside the question, in a <div> if possible, rather than an alert, to give the solution / reasoning for the correct answer.

Any help at all would be really appreciated.

Hi All I have a content slider, but it only seems to work in FF and not any of the other browsers. I am using Wordpress but its not a plugin

This is what I have:
page.php
Code:

<?php if (is_front_page()) { 
	include ("homepage-slider.php");
} ?>

homepage-slider.php
Code:

<!--  Inner content DIVs should always carry "contentdiv" CSS class  -->
<!--  Pagination DIV should always carry "paginate-SLIDERID" CSS class  -->
<div id="slider1" class="sliderwrapper">
 <div class="contentdiv">
  <div class="home-div1">
   <div class="home-div-logo"></div>
  </div>
 </div>
 <div class="contentdiv">
  <div class="home-div2">
   <span></span>
  </div>
 </div>
 <div class="contentdiv">
  <div class="home-div3">
   <span></span>
  </div>
 </div>
</div>
<div id="paginate-slider1" class="pagination" style="display:none;">
</div>

<script type="text/javascript">
featuredcontentslider.init({
	id: "slider1",  //id of main slider DIV
	contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
	toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
	nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
	revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
	enablefade: [true, 0.2],  //[true/false, fadedegree]
	autorotate: [true, 4000],  //[true/false, pausetime]
	onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
		//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
		//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
	}
})
</script>

There are 2 other external files :
contentslider.js
contentslider.css

Click Here to see site.

If someone could help I would really appreciate it, been bugging me big time.
Cheers,
Jay

Hi,

I am using googles O3D software and it uses a javascript base, one of there plugins works in Firefox only and not Internet Explorer I was wondering if anyone here could help me find out why it isnt working in IE and even how to fix it, here is the page that works in firefox but not IE

http://o3d.googlecode.com/svn/trunk/...edesigner.html

Many Thanks,
Simon

Hi,

I'm making a Google Map that reads info from a database and pulls Twitter usernames from it to plot points on a map. In the infowindow of these points I have some code that displays the Twitter users latest tweet. There's alot of code for this map so i'll only show you the part i'm working on:

Code:

function readData() {
      var request = GXmlHttp.create();
      request.open("GET", "phpsqlinfo_result.php", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = GXml.parse(request.responseText);
          // obtain the array of markers and loop through it
		  	  i=[0];
			  markers=[0];
			  map.getInfoWindow().hide();
			  gmarkers = [];
			  map.clearOverlays();
			  side_bar_html = "";
			  
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            
            var label = markers[i].getAttribute("name");
			var address = markers[i].getAttribute("address");
			var type = markers[i].getAttribute("type");
			
			
			var html = '<' + 'script src="http://twitter.com/javascripts/blogger.js"><' + '/script><' + 'script type="text/javascript" src="http://twitter.com/statuses/user_timeline/' + label + '.json?callback=twitterCallback2&count=1"><' + '/script><br /><div id="twitter_update_list" style="list-style:none"></div>';
            
            // create the marker
            var marker = createMarker(point,label,html);
            map.addOverlay(marker);
          }
          // put the assembled side_bar_html contents into the side_bar div
          document.getElementById("side_bar").innerHTML = side_bar_html;
        }
      }
      request.send(null);
    }

var html is where it's all happening. I'm using the Twitter script from http://limetouch.com/article/valid-x...vascript-code/ and I have it laid out with all them ' + ' to break it up so it doesn't end the actual javascript used to create the map.

I'm new to Javascript so I don't know too much. I know that this method is a really backwards way of doing it, but it works for Firefox. I'm able to retrieve the users latest tweet when I click on their map marker.

What I want to know is why it doesn't work in any other browser? I've tried IE7+8, Google Chrome, Opera, and Safari and no tweet displays.

Sub-question: While a tweet does display in Firefox, the infowindow doesn't resize with the dynamic content. Any way to fix that?

Hi,

I've been trying to solve this problem for the past few hours and I'm at my wit's end.

I have a script that runs through all the div elements on the page, and then if the div's background is a certain color, it increments a counter by 0.5 and then outputs the result into a separate div tag.

This works flawlessly in IE, however I cannot get it to work in Firefox.

The strange thing is, if I omit the loop and just use the colorToHex on one specific element in the divs array (ie. divs[2]) it works in Firefox.

Any suggestions are greatly appreciated.

Code:

function hrsavailable() {

	var divs = document.getElementsByTagName("div");
	var srdjanhrs = -0.5;
	
	for (var i=0;i<divs.length;i++){ 
		if (colorToHex(divs[i].style.backgroundColor) == "#ffbb6e") {;
			srdjanhrs = srdjanhrs + 0.5;
		}
	}
	
	document.getElementById("srdjanhrs").firstChild.data = srdjanhrs;
}

function colorToHex(color) {

    if (color.substr(0, 1) === '#') {
        return color;
    }
	
    var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
    var red = parseInt(digits[2]);
    var green = parseInt(digits[3]);
    var blue = parseInt(digits[4]);
    var rgb = blue | (green << 8) | (red << 16);
    return digits[1] + '#' + rgb.toString(16);
	
}