Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ie 7 error, narrowed down to a small bit of javascript

    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:

    Code:
    <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?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The first thing to expect a cross browser support is to supply a valid markup, see the errors in your markup
    See how to comment javascript in xHTML
    Code:
    <script type="text/javascript">
    //<![CDATA[
       // all script goes here
     //]]>
    </script>
    PS: welcome to CF
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jul 2008
    Location
    Peterborough - UK
    Posts
    63
    Thanks
    4
    Thanked 9 Times in 9 Posts
    This Function:

    Code:
    <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.

  • #4
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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..

    Code:
    <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>

  • #5
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •