...

View Full Version : ie 7 error, narrowed down to a small bit of javascript



adelai
09-01-2008, 04:40 AM
So I have tried just about everything... I've tried repositions with the css and reformatting the html and I think I've narrowed the problem down to a bit of javascript.

The problem is that in IE, I have these divs that, when the page initially opens are way off to the side of the page, but once you click on one of the imgs in the box, it shoots back over to where it belongs and then is fine. The reason I think it's the javascript is because when I tried to remove it from the top of the page and change it to an external js page, it just stayed off to the side all the time (whereas it used to fix itself after one click)

The page is "http://justinwirtalla.com/gallerywesternstates.php" and the code I think is bugging things up is this:



<script type="text/javascript">
function swap(what)
{
var theDivs = document.getElementsByTagName('div');
for(var i = 0; i < theDivs.length; i++)
{
if(theDivs[i].id.search('swap') == 0)
{
theDivs[i].style.display = 'none';
}
}
document.getElementById('swap'+what).style.display = 'block';
}
window.onload = function()
{
var theDivs2 = document.getElementsByTagName('div');
for(var j = 0; j < theDivs2.length; j++)
{
if(theDivs2[j].id.search('swap') != -1)
{
theDivs2[j].style.display = 'none';
}
}
}
</script>


mind you, I don't write javascript but the idea here was to be able to swap out the descriptions under the large images when you click that picture (without having separate pages for everything) and also I could mention that ie does say there is an error that is "Error: 'document.getElementById(...)' is null or not an object" which probably means more to the people on this board than it does to me unfortunately...

any suggestions? :confused:

abduraooft
09-01-2008, 06:53 AM
The first thing to expect a cross browser support is to supply a valid markup, see the errors in your markup (http://validator.w3.org/check?uri=http&#37;3A%2F%2Fjustinwirtalla.com%2Fgallerywesternstates.php&charset=%28detect+automatically%29&doctype=Inline&group=0)
See how to comment javascript in xHTML

<script type="text/javascript">
//<![CDATA[
// all script goes here
//]]>
</script>

PS: welcome to CF :)

Mikebert4
09-01-2008, 06:12 PM
This Function:



<script type="text/javascript">
function swap(what)
{
var theDivs = document.getElementsByTagName('div');
for(var i = 0; i < theDivs.length; i++)
{
if(theDivs[i].id.search('swap') == 0)
{
theDivs[i].style.display = 'none';
}
}
document.getElementById('swap'+what).style.display = 'block';
}
window.onload = function()
{
var theDivs2 = document.getElementsByTagName('div');
for(var j = 0; j < theDivs2.length; j++)
{
if(theDivs2[j].id.search('swap') != -1)
{
theDivs2[j].style.display = 'none';
}
}
}
</script>


Has a variable passed to it - can you give us the HTML code of the pictures that you click to swap images? Also, can you give us the HTML of the text-boxes you want to swap around.

The problem could well be in there

<<techy bit>>

You say that a "document.getElementById(...) is null" error gets thrown. If the id supplied between the () doesn't exist in the HTML on the page, it will return null (and hence your error).

My suspicions are that the strings you're passing to the function are at fault - or you've got duplicate ID's in the HTML or somthing of that order.

adelai
09-02-2008, 11:28 PM
I think this is what you asked for. The first img is the one that gets swapped out, it's just the placeholder essentially.

Below that are the descriptions that get swapped out when you click each of the pictures (of which the html is down below the descriptions...) sorry if this is really long... thanks so much for helping me out both of you.. I'm looking into all of those errors... I'd be surprised that there are so many but I'm not used to using this many rollovers and swappers so I'm not surprised that I've screwed it up somewhere along the line..



<div id="bigimg" class="img-shadow"><img src="imgs/images/redfish_lake.jpg" name="blank" alt="redfish lake"/></div>


<div id="swap0" class="bigimgdesc">Redfish Lake, Idaho 2008</div>

<div id="swap1" class="bigimgdesc">Beverly Beach, Oregon 2008</div>

<div id="swap2" class="bigimgdesc">Cannon Beach, Oregon 2008</div>

<div id="swap3" class="bigimgdesc">Cascade Canyon, Wyoming 2008</div>

<div id="swap4" class="bigimgdesc">Reflection, Colorado 2008</div>

<div id="swap5" class="bigimgdesc">Courthouses, Utah 2008</div>

<div id="swap6" class="bigimgdesc">Dawn over Badlands, South Dakota 2008</div>

<div id="swap7" class="bigimgdesc">Delicate Arch, Utah 2008</div>

<div id="swap8" class="bigimgdesc">Devil's Garden, Utah 2008</div>

<div id="swap9" class="bigimgdesc">Dillon Lake, Colorado 2008</div>

<div id="swap10" class="bigimgdesc">Grand Tetons, Wyoming 2008</div>

<div id="swap11" class="bigimgdesc">Moon over Sierra, California 2008</div>

<div id="swap12" class="bigimgdesc">Mount Moran, Wyoming 2008</div>

<div id="swap13" class="bigimgdesc">Tenth Street, Nebraska 2008</div>

<div id="swap14" class="bigimgdesc">Pond, California 2008</div>

<div id="swap15" class="bigimgdesc">Redfish Lake, Idaho 2008</div>

<div id="swap16" class="bigimgdesc">Sawtooth, Idaho 2008</div>

<div id="swap17" class="bigimgdesc">Jenny Lake, Wyoming 2008</div>

<div id="swap18" class="bigimgdesc">Stump, California 2008</div>

<div id="swap19" class="bigimgdesc">Wright's Beach, California 2008</div>

<div id="swap20" class="bigimgdesc">Yosemite, California 2008</div>

<div id="swap21" class="bigimgdesc">Arches, Utah 2008</div>

<div id="swap22" class="bigimgdesc">Frisco, Colorado 2008</div>

<div id="swap23" class="bigimgdesc">Redwood, California 2008</div>

<div id="swap24" class="bigimgdesc">Mounds, California 2008</div>




<div id="thumbboxtitle">Western States</div>
<div id="thumbbox">
<span onclick="swap(1)"><a href="#" onmouseout="MM_swapImage('beverly_beach','','imgs/thumbs/roll_beverly_beach.jpg',1)" onmouseover="MM_swapImage('beverly_beach','','imgs/thumbs/beverly_beach.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/beverly_beach.jpg',1)"><img src="imgs/thumbs/roll_beverly_beach.jpg" name="beverly_beach" width="90" height="90" border="0" id="beverly_beach" /></a></span>

<span onclick="swap(2)"><a href="#" onmouseout="MM_swapImage('cannon_beach1','','imgs/thumbs/roll_cannon_beach1.jpg',1)" onmouseover="MM_swapImage('cannon_beach1','','imgs/thumbs/cannon_beach1.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/cannon_beach1.jpg',1)"><img src="imgs/thumbs/roll_cannon_beach1.jpg" name="cannon_beach1" width="90" height="90" border="0" id="cannon_beach1" /></a></span>

<span onclick="swap(3)"><a href="#" onmouseout="MM_swapImage('cascade_canyon','','imgs/thumbs/roll_cascade_canyon.jpg',1)" onmouseover="MM_swapImage('cascade_canyon','','imgs/thumbs/cascade_canyon.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/cascade_canyon.jpg',1)"><img src="imgs/thumbs/roll_cascade_canyon.jpg" name="cascade_canyon" width="90" height="90" border="0" id="cascade_canyon" /></a></span>

<span onclick="swap(4)"><a href="#" onmouseout="MM_swapImage('colorado','','imgs/thumbs/roll_colorado.jpg',1)" onmouseover="MM_swapImage('colorado','','imgs/thumbs/colorado.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/colorado.jpg',1)"><img src="imgs/thumbs/roll_colorado.jpg" name="colorado" width="90" height="90" border="0" id="colorado" /></a></span>

<span onclick="swap(5)"><a href="#" onmouseout="MM_swapImage('courthouses','','imgs/thumbs/roll_courthouses.jpg',1)" onmouseover="MM_swapImage('courthouses','','imgs/thumbs/courthouses.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/courthouses.jpg',1)"><img src="imgs/thumbs/roll_courthouses.jpg" name="courthouses" width="90" height="90" border="0" id="courthouses" /></a></span>

<span onclick="swap(6)"><a href="#" onmouseout="MM_swapImage('dawn_over_badlands','','imgs/thumbs/roll_dawn_over_badlands.jpg',1)" onmouseover="MM_swapImage('dawn_over_badlands','','imgs/thumbs/dawn_over_badlands.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/dawn_over_badlands.jpg',1)"><img src="imgs/thumbs/roll_dawn_over_badlands.jpg" name="dawn_over_badlands" width="90" height="90" border="0" id="dawn_over_badlands" /></a></span>

<span onclick="swap(7)"><a href="#" onmouseout="MM_swapImage('delicate_arch','','imgs/thumbs/roll_delicate_arch.jpg',1)" onmouseover="MM_swapImage('delicate_arch','','imgs/thumbs/delicate_arch.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/delicate_arch.jpg',1)"><img src="imgs/thumbs/roll_delicate_arch.jpg" name="delicate_arch" width="90" height="90" border="0" id="delicate_arch" /></a></span>

<span onclick="swap(8)"><a href="#" onmouseout="MM_swapImage('devils_garden','','imgs/thumbs/roll_devils_garden.jpg',1)" onmouseover="MM_swapImage('devils_garden','','imgs/thumbs/devils_garden.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/devils_garden.jpg',1)"><img src="imgs/thumbs/roll_devils_garden.jpg" name="devils_garden" width="90" height="90" border="0" id="devils_garden" /></a></span>

<span onclick="swap(9)"><a href="#" onmouseout="MM_swapImage('dillon_lake','','imgs/thumbs/roll_dillon_lake.jpg',1)" onmouseover="MM_swapImage('dillon_lake','','imgs/thumbs/dillon_lake.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/dillon_lake.jpg',1)"><img src="imgs/thumbs/roll_dillon_lake.jpg" name="dillon_lake" width="90" height="90" border="0" id="dillon_lake" /></a></span>

<span onclick="swap(10)"><a href="#" onmouseout="MM_swapImage('grand_tetons','','imgs/thumbs/roll_grand_tetons.jpg',1)" onmouseover="MM_swapImage('grand_tetons','','imgs/thumbs/grand_tetons.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/grand_tetons.jpg',1)"><img src="imgs/thumbs/roll_grand_tetons.jpg" name="grand_tetons" width="90" height="90" border="0" id="grand_tetons" /></a></span>

<span onclick="swap(11)"><a href="#" onmouseout="MM_swapImage('moon_over_sierra','','imgs/thumbs/roll_moon_over_sierra.jpg',1)" onmouseover="MM_swapImage('moon_over_sierra','','imgs/thumbs/moon_over_sierra.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/moon_over_sierra.jpg',1)"><img src="imgs/thumbs/roll_moon_over_sierra.jpg" name="moon_over_sierra" width="90" height="90" border="0" id="moon_over_sierra" /></a></span>

<span onclick="swap(12)"><a href="#" onmouseout="MM_swapImage('mt_moran_over_jenny_lake','','imgs/thumbs/roll_mt_moran_over_jenny_lake.jpg',1)" onmouseover="MM_swapImage('mt_moran_over_jenny_lake','','imgs/thumbs/mt_moran_over_jenny_lake.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/mt_moran_over_jenny_lake.jpg',1)"><img src="imgs/thumbs/roll_mt_moran_over_jenny_lake.jpg" name="mt_moran_over_jenny_lake" width="90" height="90" border="0" id="mt_moran_over_jenny_lake" /></a></span>

<span onclick="swap(13)"><a href="#" onmouseout="MM_swapImage('nebraska','','imgs/thumbs/roll_nebraska.jpg',1)" onmouseover="MM_swapImage('nebraska','','imgs/thumbs/nebraska.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/nebraska.jpg',1)"><img src="imgs/thumbs/roll_nebraska.jpg" name="nebraska" width="90" height="90" border="0" id="nebraska" /></a></span>

<span onclick="swap(14)"><a href="#" onmouseout="MM_swapImage('pond','','imgs/thumbs/roll_pond.jpg',1)" onmouseover="MM_swapImage('pond','','imgs/thumbs/pond.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/pond.jpg',1)"><img src="imgs/thumbs/roll_pond.jpg" name="pond" width="90" height="90" border="0" id="pond" /></a></span>

<span onclick="swap(15)"><a href="#" onmouseout="MM_swapImage('redfish_lake','','imgs/thumbs/roll_redfish_lake.jpg',1)" onmouseover="MM_swapImage('redfish_lake','','imgs/thumbs/redfish_lake.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/redfish_lake.jpg',1)"><img src="imgs/thumbs/roll_redfish_lake.jpg" name="redfish_lake" width="90" height="90" border="0" id="redfish_lake" /></a></span>

<span onclick="swap(16)"><a href="#" onmouseout="MM_swapImage('sawtooth','','imgs/thumbs/roll_sawtooth.jpg',1)" onmouseover="MM_swapImage('sawtooth','','imgs/thumbs/sawtooth.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/sawtooth.jpg',1)"><img src="imgs/thumbs/roll_sawtooth.jpg" name="sawtooth" width="90" height="90" border="0" id="sawtooth" /></a></span>

<span onclick="swap(17)"><a href="#" onmouseout="MM_swapImage('teewinot','','imgs/thumbs/roll_teewinot.jpg',1)" onmouseover="MM_swapImage('teewinot','','imgs/thumbs/teewinot.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/teewinot.jpg',1)"><img src="imgs/thumbs/roll_teewinot.jpg" name="teewinot" width="90" height="90" border="0" id="teewinot" /></a></span>

<span onclick="swap(18)"><a href="#" onmouseout="MM_swapImage('tree_stump','','imgs/thumbs/roll_tree_stump.jpg',1)" onmouseover="MM_swapImage('tree_stump','','imgs/thumbs/tree_stump.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/tree_stump.jpg',1)"><img src="imgs/thumbs/roll_tree_stump.jpg" name="tree_stump" width="90" height="90" border="0" id="tree_stump" /></a></span>

<span onclick="swap(19)"><a href="#" onmouseout="MM_swapImage('wrights_beach','','imgs/thumbs/roll_wrights_beach.jpg',1)" onmouseover="MM_swapImage('wrights_beach','','imgs/thumbs/wrights_beach.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/wrights_beach.jpg',1)"><img src="imgs/thumbs/roll_wrights_beach.jpg" name="wrights_beach" width="90" height="90" border="0" id="wrights_beach" /></a></span>

<span onclick="swap(20)"><a href="#" onmouseout="MM_swapImage('yosemite','','imgs/thumbs/roll_yosemite.jpg',1)" onmouseover="MM_swapImage('yosemite','','imgs/thumbs/yosemite.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/yosemite.jpg',1)"><img src="imgs/thumbs/roll_yosemite.jpg" name="yosemite" width="90" height="90" border="0" id="yosemite" /></a></span>

<span onclick="swap(21)"><a href="#" onmouseout="MM_swapImage('arches','','imgs/thumbs/roll_arches.jpg',1)" onmouseover="MM_swapImage('arches','','imgs/thumbs/arches.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/arches.jpg',1)"><img src="imgs/thumbs/roll_arches.jpg" name="arches" width="90" height="90" border="0" id="arches" /></a></span>

<span onclick="swap(22)"><a href="#" onmouseout="MM_swapImage('frisco','','imgs/thumbs/roll_frisco.jpg',1)" onmouseover="MM_swapImage('frisco','','imgs/thumbs/frisco.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/frisco.jpg',1)"><img src="imgs/thumbs/roll_frisco.jpg" name="frisco" width="90" height="90" border="0" id="frisco" /></a></span>

<span onclick="swap(23)"><a href="#" onmouseout="MM_swapImage('redwood','','imgs/thumbs/roll_redwood.jpg',1)" onmouseover="MM_swapImage('redwood','','imgs/thumbs/redwood.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/redwood.jpg',1)"><img src="imgs/thumbs/roll_redwood.jpg" name="redwood" width="90" height="90" border="0" id="redwood" /></a></span>

<span onclick="swap(24)"><a href="#" onmouseout="MM_swapImage('mounds','','imgs/thumbs/roll_mounds.jpg',1)" onmouseover="MM_swapImage('mounds','','imgs/thumbs/mounds.jpg',1)" onclick="MM_swapImage('blank','','imgs/images/mounds.jpg',1)"><img src="imgs/thumbs/roll_mounds.jpg" name="mounds" width="90" height="90" border="0" id="mounds" /></a></span></div>

adelai
09-03-2008, 07:53 PM
Hi again, it turned out it was a positioning problem, instead of using margin-left or padding-left for the picture div, I changed it so I would be positioning absolutely within the larger div and it fixed the problem.. Whether or not the javascript is full of errors, it works anyways finally. I really appreciate your help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum