New here, and still pretty new to javascript.

I have a page that I'm trying to run a number of different javascripts on.

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 <head> and I've been over the scripts themselves trying ot find conflicting code, but unsuccessfully.

Anyone got ideas?

Recommended Answers

All 7 Replies

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?)

OK, so the <head> 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 ([url]www.javascriptkit.com[/url])
* This notice must stay intact for usage
* Visit JavaScript Kit at [url]http://www.javascriptkit.com/[/url] for this script and 100s more
***********************************************/

</script>
</head>

And here's the particular tag from the <body>:

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

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.

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>

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.

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, only js2.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.

<asp:TableCell ColumnSpan="20" HorizontalAlign="Center" >
<div class="jkimagelarge" title='<%#"~/test(iframe).aspx?show=1&item_id=" & Eval("item_id")%>' >
<asp:ImageButton ID="ImageButtonImageAlbum" runat="server"
CausesValidation="false"
Width="100px"
Height="70px"

DescriptionUrl='<%#"~/test(iframe).aspx?show=1&item_id=" & Eval("item_id")%>'
CommandArgument='<%#Eval("item_id") %>'
ImageUrl='<%#"~/test(iframe).aspx?show=1&item_id=" & Eval("item_id")%>' />
</div> </asp:TableCell>
can i use with call imgse from database
how can i write code in tilte

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.