Simple controls gallery error message problem

**oreoero** · 12-28-2010, 09:08 PM

I am trying to use the Simple Controls gallery located here on a web site I am designing.

When I go to test it from Dreamweaver, I get a pop-up error: Error: DIV with ID "barry" not found on page.

On the actual page behind the pop-up, the gallery frame is showing.

When I click "OK" on the pop-up, the gallery then plays like it should.

Problem is, the div IS on the page, as evidenced by the gallery script playing as it should after the pop-up is dismissed.

Any help would be greatly appreciated.

**Nile** · 12-28-2010, 09:48 PM

Please post a link to the page on your site that contains the problematic script so we can check it out.

Please include your code so that we can take a look at it, we can't do much without it. When you do post your code remember to use [code] tags. That includes [ html ], [ code ], and [ php ].

**oreoero** · 01-02-2011, 03:03 AM

OK... will do.

Couple of new observations.

This also happens when viewing on the web with Firefox, and only on first load. As long as it is cached, it works fine. Also, no problems with IE and Chrome. And, too, on the page where I got the script, the sample galleries work just fine all the time.

Here is the link to the page:

http://gbarrytaylor.com/lb/

And here is the page source:

HTML Code:

<!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>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

<style type="text/css">

/*Make sure your page contains a valid doctype at the top*/
#barry{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
	visibility: hidden; /*keep this intact*/
	border: 1px solid black;
	position: relative;
	left: 7px;
	z-index: 1;
}

#barry .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
}

body {
	background-color: #800000;
}
</style>

<script type="text/javascript" src="simplegallery.js">

/***********************************************
* Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new simpleGallery({
	wrapperid: "barry", //ID of main gallery container,
	dimensions: [1000, 350], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
	imagearray: [
		["images/homess01.jpg", "", "", "Copy for image needed."],
		["images/homess02.jpg", "", "", "Copy for image needed."],
		["images/homess03.jpg", "", "", "Copy for image needed."],
		["images/homess04.jpg", "", "", "Copy for image needed."],
		["images/homess05.jpg", "", "", "Copy for image needed."],
		["images/homess06.jpg", "", "", "Copy for image needed."],
		["images/homess07.jpg", "", "", "Copy for image needed."],
		["images/homess08.jpg", "", "", "Copy for image needed."],
		["images/homess09.jpg", "", "", "Copy for image needed."],
	],
	autoplay: [true, 2500, 6], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	oninit:function(){ //event that fires when gallery has initialized/ ready to run
		//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
	},
	onslide:function(curslide, i){ //event that fires after each slide is shown
		//Keyword "this": references current gallery instance
		//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
		//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
	}
})

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link href="lof.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div align="center"><img src="images/top.jpg" width="1270" height="150" alt="Landmarks of the Faith Christian Tours" />
  <table id="Table_01" width="1270" height="38" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><img src="images/nav_01.jpg" width="120" height="38" alt="" /></td>
      <td><img src="images/nav_02.jpg" width="5" height="38" alt="" /></td>
      <td width="1016" height="38" bgcolor="#000000"><div align="right" class="nav"><a href="about.php">ABOUT US</a>     &nbsp;&nbsp;&nbsp;&nbsp;<a href="destinations.php">DESTINATIONS</a>     &nbsp;&nbsp;&nbsp;&nbsp;<a href="testimonials.php">TESTIMONIALS</a>     &nbsp;&nbsp;&nbsp;&nbsp;<a href="contact.php">CONTACT US</a>     &nbsp;&nbsp;&nbsp;&nbsp;<a href="mail.php">JOIN OUR MAILING LIST</a>     &nbsp;&nbsp;&nbsp;&nbsp;<a href="podcasts.php">PODCASTS</a>     &nbsp;&nbsp;&nbsp;&nbsp;<a href="videos.php">VIDEOS&nbsp;&nbsp;</a></div></td>

      <td><img src="images/nav_04.jpg" width="4" height="38" alt="" /></td>
      <td><img src="images/nav_05.jpg" width="125" height="38" alt="" /></td>
    </tr>
  </table>
  <table id="Table_" width="1270" height="366" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><img src="images/sshow_01.jpg" width="120" height="366" alt="" /></td>
      <td><img src="images/sshow_02.jpg" width="5" height="366" alt="" /></td>
      <td width="1016" height="366" bgcolor="#FFFFFF"><!--webbot bot="HTMLMarkup" startspan --><span class="nav"><a href="about.php"><a href="about.php"></a></a></span>

        <div id="barry"></div>
      <!--webbot bot="HTMLMarkup" endspan i-checksum="5951" --></td>
      <td><img src="images/sshow_04.jpg" width="4" height="366" alt="" /></td>
      <td><img src="images/sshow_05.jpg" width="125" height="366" alt="" /></td>
    </tr>
  </table>
  <table id="Table_2" width="1270" height="146" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><img src="images/undershowcopy_01.jpg" width="120" height="11" alt="" /></td>

      <td><img src="images/undershowcopy_02.jpg" width="12" height="11" alt="" /></td>
      <td><img src="images/undershowcopy_03.jpg" width="503" height="11" alt="" /></td>
      <td><img src="images/undershowcopy_04.jpg" width="497" height="11" alt="" /></td>
      <td><img src="images/undershowcopy_05.jpg" width="13" height="11" alt="" /></td>
      <td><img src="images/undershowcopy_06.jpg" width="125" height="11" alt="" /></td>
    </tr>
    <tr>
      <td><img src="images/undershowcopy_07.jpg" width="120" height="121" alt="" /></td>
      <td><img src="images/undershowcopy_08.jpg" width="12" height="121" alt="" /></td>

      <td width="503" height="121" background="images/undershowcopy_09.jpg" class="treb1216"><p>At Landmarks of the Faith we make history come alive rather than just tell the story. Our tours and historical presentations have been designed with the entire family in mind. They offer excitement, a deeper understanding of history, and spiritual enrichment. </p>
      <p>Whether it is through an exciting tour to a foreign country or a speaking engagement in full costume, our aim is to show the power of God through the events of history.</p></td>
      <td><img src="images/undershowcopy_10.jpg" width="497" height="121" alt="" /></td>
      <td><img src="images/undershowcopy_11.jpg" width="13" height="121" alt="" /></td>
      <td><img src="images/undershowcopy_12.jpg" width="125" height="121" alt="" /></td>
    </tr>
    <tr>
      <td><img src="images/undershowcopy_13.jpg" width="120" height="14" alt="" /></td>

      <td><img src="images/undershowcopy_14.jpg" width="12" height="14" alt="" /></td>
      <td><img src="images/undershowcopy_15.jpg" width="503" height="14" alt="" /></td>
      <td><img src="images/undershowcopy_16.jpg" width="497" height="14" alt="" /></td>
      <td><img src="images/undershowcopy_17.jpg" width="13" height="14" alt="" /></td>
      <td><img src="images/undershowcopy_18.jpg" width="125" height="14" alt="" /></td>
    </tr>
  </table>
  <table id="Table_3" width="1270" height="26" border="0" cellpadding="0" cellspacing="0">
    <tr>

      <td width="1270" height="26" bgcolor="#800000"><div  class="treb1115" align="center">© 2010 Landmarks of the Faith   |   210.410.6433   |<a href="mailto:eric.leach@gmail.com" class="style1">email us</a>   |   <a href="mailto:barry@gbarrytaylor.com">webmaster</a></div></td>
    </tr>
  </table>
  <br />
  <br />
</div>
<div id="logo"><img src="Images/logo.png" width="148" height="278" /></div>

</body>
</html>

Thanks for any help!

PS: refer to original post for link to the original script page here on DD.

**Nile** · 01-02-2011, 03:39 AM

Hmm, as long as it's actually working, you can comment out lines 42-45

**jscheuer1** · 01-02-2011, 05:40 AM

That should work, but could cause problems should the altered script then get used on a page without that division. In certain CMS setups commenting out line #43 in the script is required. That won't harm pages without the division, but probably won't help here.

In local testing the problem appears to be in the incorrect placement of the the meta tag:

Code:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Generally considered a fine point, meta data and title should come before other elements in the head of a valid page. So if you move this (highlighted):

Code:

 . . . lay: [true, 2500, 6], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	oninit:function(){ //event that fires when gallery has initialized/ ready to run
		//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
	},
	onslide:function(curslide, i){ //event that fires after each slide is shown
		//Keyword "this": references current gallery instance
		//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
		//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
	}
})

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link href="lof.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div align="center"><img src="images/ . . .

to here:

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

<style type="text/css">

/*Make sure your page contains a valid doctype at the top*/
#barry{ //CSS for Simple Gallery Example 1
position: relati . . .

That will take care of the problem, or it does in a local test.

You may need to clear the browser's cache and/or refresh the page to see the result.