Overlap viewer and Lightbox

New here, and still pretty new to javascript.

I have a page that I'm trying to run a number of different javascripts on.jquery-1.2.2.pack.js
overlapviewer.js
prototype.js
scriptaculous.js
lightbox.js and
vnu_datestamp.js

I have no problem with the datestamp. It runs pretty well anywhere because it's a link/rel to the actual js file.

Prototype, Scriptalicious and Lightbox all work too.

I can't get jquery and the overlapviewer to function.

This is a pretty basic script. It allows a jpg or gif to "pop into" the page when hovering over a selected linked portion of text.

I've used it on dozens of other pages and never had a problem except img src errors in my tagging, but I've never tried to put it on the same page with the lightbox.

Everything loads in the and I've been over the scripts themselves trying ot find conflicting code, but unsuccessfully.

Anyone got ideas?

cowboyonamac

Newbie Poster

4 posts since May 2009

Reputation Points: 10

Solved Threads: 0

3 Years Ago

Could you paste your <head> tag and the portion of <body> that is affected? That way, we can see exactly what is going wrong.

Also, if you are able to, try viewing your Error Console to see if any JavaScript errors are showing up (function duplicate?)

itsjareds

Junior Poster

103 posts since May 2009

Reputation Points: 39

Solved Threads: 13

3 Years Ago

OK, so the looks like this:

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="mysite"/>
<meta name="keywords" content="Sites, Web design, Graphics"/> 
<meta name="author" content="me"/> 
<link rel="stylesheet" type="text/css" href="default.css" media="screen"/>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<title>Sites</title>
<script type="text/javascript" src="js/jquery-1.2.2.pack.js"></script>

<style type="text/css">

#overlappopup{ /*don't change id name */
position: absolute; /*don't change position property */
z-index: 1000;
background: #006633;
border: 6px solid #006633;
padding: 5px;
left: 0;
top: 0;
visibility: hidden;
}

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

/***********************************************
* Overlap Image Viewer script- by JavaScript Kit ( <a href="http://www.javascriptkit.com">www.javascriptkit.com</a> )
* This notice must stay intact for usage
* Visit JavaScript Kit at  <a href="http://www.javascriptkit.com/">http://www.javascriptkit.com/</a>  for this script and 100s more
***********************************************/

</script>
</head>

And here's the particular tag from the :

<li>Mouseover graphics (Pictures that pop up when the mouse is over a <a href="img/overlap.gif" class="jkimagelarge" title="img/overlap.gif">certain portion</a> of text.)</li>

I also attached the js files.

My best guess is it;s a syntax error between the two files (lightbox.js and overlapviewer.js) either they cancel each other out or there's a redundancy issue.

I do appreciate any help. It's not an urgent issue.

Attachments jquery-1.2_.2_.pack_.js (28.63KB) overlapviewer.js (2.86KB) lightbox.js (22.83KB) scriptaculous.js (2.1KB) prototype.js (46.49KB) effects.js (31.22KB)

cowboyonamac

Newbie Poster

4 posts since May 2009

Reputation Points: 10

Solved Threads: 0

3 Years Ago

Error console shows line 45 of the overlapviewer.js:

config.$popupdiv=$('<div id="overlappopup"></div>').prependTo('body')

is null

other than that, it's a bunch of redundancy warnings.

cowboyonamac

Newbie Poster

4 posts since May 2009

Reputation Points: 10

Solved Threads: 0

3 Years Ago

Sometimes it deals on the issue of loading order.

Try using this demo and see how it worked:
tested in IE6, FF3, OP9-
Please read all instructions from the code lines.

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<script type="text/javascript">
// <![CDATA[

// NOTE: Don't put any script block asside from this one.
 
var normalized;
var sPath;
var head, script, myScript;
var viaTN = Boolean( document.getElementsByTagName );

   normalized = function() {
   // If you need more external script, then simply specify its path in the sPath array.

   sPath = [ // You must provide valid path to your .js

   "path/prototype.js",
   "path/jquery-1.2.2.pack.js",
   "path/scriptaculous.js",
   "path/overlapviewer.js",
   "path/lightbox.js",
   "path/vnu_datestamp.js" 
    ];
      head = (( viaTN ) ? document.getElementsByTagName("head")[ 0 ] : document.all.tags("head")[ 0 ] );
      myScript = (( viaTN ) ?  document.getElementsByTagName("script") : document.all.tags("script"));
      for ( var x = 0; x <= sPath.length; x++ ) {
      script = document.createElement("script");
      script.type = "text/javascript";
      head.appendChild( script );
      myScript[(( x ) + 1 )].src = sPath[ x ];
      } // If you have other onload events', then you must declare it inside this function. e.g.
   alert("Hello Universe!"); // You can remove this alert after test run.

   // You may now use all function's, classes, and objects from your framework's collection.  

   }; window.onload = normalized;
// ]]>
</script>
</head>
<body>

</body>
</html>

essential

Posting Shark

974 posts since Aug 2008

Reputation Points: 114

Solved Threads: 138

3 Years Ago

Nope. It goes deeper than that apparently. I amended the page with the provided code and the link still works to display the image in a new parent window, but the popup script won't activate just on a mouseover.

I'm probably just trying to load too much into one simple page. It's no big deal.

Javascript is next semester and I'll be able to fix it by then.

Thanks anyway though.

Here's the url:

http://www.dt-wear.com/sites.html

if you want to check the source code.

cowboyonamac

Newbie Poster

4 posts since May 2009

Reputation Points: 10

Solved Threads: 0

3 Years Ago

Try to rearrange the path that you've currently provided in th sPath["js1.js", "js2.js"]; , array. As you've seen in this type of path arrangement, onlyjs2.js can access properties, objects, and functions from js1.js, while js1.js is not allowed to gain access from all of the properties and objects in js2.js collections.

If you want some proof, just let me know and i'll provide you one working example regarding about the loading order.

essential

Posting Shark

974 posts since Aug 2008

Reputation Points: 114

Solved Threads: 138

1 Year Ago

can i use with call imgse from database
how can i write code in tilte

maysoon

Newbie Poster

1 post since Oct 2010

Reputation Points: 10

Solved Threads: 0

This article has been dead for over three months

You