Solved

Conflicting javascripts?

Posted on 2007-11-30
17
495 Views
Last Modified: 2008-02-01
Hi experts,

I have an image display JavaScript that is functioning but has a minor issue.

1. The script when working correctly should display thumbnails of images. on rollOver the script should call a larger version for display. Should the image being called require a pre-loader one should display whilst the image loads. Currently this is not working.


Here are the relevant pages.

The page I am working on:

http://www.randomlychallenged.com/TabTest2.php   (click on 'photos' to view the script working)

This is the code that the page references with 'js/loader.js'

var t_id = setInterval(animate,20);
var pos=0;
var dir=2;
var len=0;

function animate()
{
var elem = document.getElementById('progress');
if(elem != null) {
if (pos==0) len += dir;
if (len>32 || pos>79) pos += dir;
if (pos>79) len -= dir;
if (pos>79 && len==0) pos=0;
elem.style.left = pos;
elem.style.width = len;
}
}

function remove_loading() {
this.clearInterval(t_id);
var targelem = document.getElementById('loader_container');
targelem.style.display='none';
targelem.style.visibility='hidden';
var t_id = setInterval(animate,60);
}





This is where I found the script:

http://snippets.dzone.com/posts/show/2754



Thank you for you assistance experts.
<?php

include './infolink.php';
 

//if (isset($_GET['name']) {

//$user = $_GET['name'];

//}

//else {header ("Location: /Home.php");}
 

//if (isset($_GET['chalid']) {

//$challenge = $_GET['chalid'];

//}

//else {header ("Location: /Home.php");}
 

//DELETE THESE NEXT TWO LINES TO MAKE SCRIPT WORK WITH REST OF SITE!!!

$name = aman;

$challenge = 25;
 

$direct = "./users/".$name."/Challenge/".$challenge."/images/";

$handle = opendir($direct);

$x=0;

while (false !== ($file = readdir($handle))) {

        $x=$x+1;

    }

	$x=$x/2;

?>

<!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>Randomly Challenged™ </title>

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

<style type="text/css">

<!--

a:link {

	text-decoration: none;

}

a:visited {

	text-decoration: none;

}

a:hover {

	text-decoration: underline;

}

a:active {

	text-decoration: none;

}

a {

	font-size: 12px;

	color: #99cc66;

}

h1 {

	color: #FFFFFF;

}

body,td,th {

	font-family: Arial, Helvetica, sans-serif;

	color: #666666;

}
 

-->

    </style>

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

<style type="text/css">

<!--
 
 

#Exp_live {

	position:absolute;

	left:134px;

	top:470px;

	width:225px;

	height:21px;

	z-index:6;

}
 
 

-->

    </style>

<script type="text/javascript">

<!--
 

function MM_reloadPage(init) {  //reloads the window if Nav4 resized

  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

//-->

</script>
 

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

/***********************************************

* DOM Image Rollover II- By Adam Smith (http://www.codevendor.com)

* Script featured on and available at Dynamic Drive (http://www.dynamicdrive.com)

* Keep this notice intact for usage please

***********************************************/
 

</script>
 
 

<script src="js/preview_templates.js" language="JavaScript" type="text/javascript"></script>

		<script src="js/loader.js" language="JavaScript" type="text/javascript"></script>

		

		
 
 
 
 
 

 <link rel="stylesheet" type="text/css" href="http://www.randomlychallenged.com/js/tabcontent.css" />
 

<script type="text/javascript" src="http://www.randomlychallenged.com/js/tabcontent.js">
 

/***********************************************

* Tab Content script v2.0- © 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 full source code

***********************************************/
 

</script>
 
 
 
 
 

<script language="JavaScript" type="text/javascript">

function MM_swapImgRestore() { //v3.0

  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}
 

function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}
 

function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}
 

function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

<script type="text/javascript">

<!--

function MM_swapImgRestore() { //v3.0

  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}
 

function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}
 

function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>
 

<script type="text/javascript" src="http://www.randomlychallenged.com/js/collapsableDivTag.js">
 

/***********************************************

* Animated Collapsible DIV- © 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>
 

<style type="text/css">
 

.dockclass{

position:relative;

}
 

.style6 {color: #FFFFFF}

</style>
 
 
 
 
 
 

<script type="text/javascript" src="http://www.randomlychallenged.com/js/swfobjectNEW.js"></script>

<!--this is the JS for the SWFOject that embeddes the flash header and anyother flash content -->

</head>

<body onload= "MM_preloadImages('images/LogoutBtnDOWN.gif','images/NewsHubBtnDOWN.gif','images/ProSearchBtnDOWN.gif','images/MyProfileBtnDOWN.gif',,,'images/InfoBtnDOWN.gif','images/ChronicleHubBtnDOWN.gif','images/FreestyleChallComBtnDOWN.gif','images/ChronicleSearchBtnDOWN.gif',,'images/ChallengeHubBtnDOWN.gif','images/MailHubBtnDOWN.gif','images/TrophyCabBtnDOWN.gif')">
 
 

 
 
 

<!-- *********************************************************

     * You may use this code for free on any web page provided that 

     * these comment lines and the following credit remain in the code.

     * Floating Div from http://www.javascript-fx.com

     ********************************************************  -->

	 

    

<div   id="divNav" style="background-image:url(images/Nav/Navigation.gif); background-repeat:no-repeat; position:absolute; height:439px; width:130px; " > 

<div  align="left" style="margin-top:50px; margin-left:15px; "><a href="../NewsHub.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('NewsHubBtn','','images/NewsHubBtnDOWN.gif',1)"><img src="images/NewsHubBtn.gif" alt="News Hub" title="News Hub" name="NewsHubBtn" width="50" height="55" border="0" id="NewsHubBtn" /></a>
 

  <a href="/ChallengeHub.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ChallengeHubBtn','','images/ChallengeHubBtnDOWN.gif',1)"><img src="images/ChallengeHubBtn.gif" alt="Challenge Hub" name="ChallengeHubBtn" width="50" title="Challenge Hub" height="55" border="0" id="ChallengeHubBtn" /></a>

  

  <a href="http://www.randomlychallenged.com/ChronicleHub.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ChronicleHubBtn','','images/ChronicleHubBtnDOWN.gif',1)"><img src="images/ChronicleHubBtn.gif" alt="Chronicle Hub" name="ChronicleHubBtn" title="Chronicle Hub" width="50" height="55" border="0" id="ChronicleHubBtn" /></a>
 

<a href="http://www.randomlychallenged.com/FreestyleChronicleForm.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FreestyleChallComBtn','','images/FreestyleChallComBtnDOWN.gif',1)"><img src="images/FreestyleChallComBtn.gif" alt="Add a Freestyle Chronicle" title="Add a Freestyle Chronicle" name="FreestyleChallComBtn" width="50" height="55" border="0" id="FreestyleChallComBtn" /></a>
 

<a href="/ProfileSearch.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ProfileSearch','','images/ProSearchBtnDOWN.gif',1)"><img src="images/ProSearchBtn.gif" alt="Profile Search" name="ProfileSearch" title="Profile search" width="50" height="55" border="0" id="ProfileSearch" /></a>
 
 

<a href="http://www.randomlychallenged.com/ChronicleSearch.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ChronicleSearch','','images/ChronicleSearchBtnDOWN.gif',1)"><img src="images/ChronicleSearchBtn.gif" alt="Search for Chronicles" title="Chronicle Search" name="ChronicleSearch" width="50" height="55" border="0" id="ChronicleSearch" /></a>
 

<a href="./MyProfile.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('MyProfile','','images/MyProfileBtnDOWN.gif',1)"><img src="images/MyProfileBtn.gif" alt="My Profile" name="MyProfile" width="50" title="My Profile" height="55" border="0" id="MyProfile" /></a>
 

<a href="/MailHub.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('MailHubBtn','','images/MailHubBtnDOWN.gif',1)"><img src="images/MailHubBtn.gif" alt="My Mail Hub" name="MailHubBtn" width="50" height="55" border="0" id="MailHubBtn" /></a>
 

<a href="TrophyCabinet/TrophyHub.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TrophyCabBtn','','images/TrophyCabBtnDOWN.gif',1)"><img src="images/TrophyCabBtn.gif" alt="My Trophy Cabinet" name="TrophyCabBtn" width="50" height="55" border="0" id="TrophyCabBtn" /></a><a href="javascript:collapse2.slideit()" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('InfoBtn','','images/InfoBtnDOWN.gif',1)"><img src="images/InfoBtn.gif" alt="Do you want to know more?" name="InfoBtn" width="50" title="Would you like to know more?" height="55" border="0" id="InfoBtn" /></a></div>
 

<div align="left"  style="padding-top:10px; padding-left:40px; vertical-align:top;">
 

<a href="./Logout_Script.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('LogoutBtn','','images/LogoutBtnDOWN.gif',1)"><img src="images/LogoutBtn.gif"  style="margin-left:4px; "alt="Logout" name="LogoutBtn" title="Logout" width="40" height="38" border="0" id="LogoutBtn" /></a></div>
 

<div align="center" style="padding-bottom:10px; "><a href="#top"><img src="../images/upArrow.gif" alt="Top" width="20" height="20" border="0" title="Top of page"   /></a>
 

<a href="#bottom"><img src="./images/downArrow.gif" alt="Bottom" width="20" height="20" border="0" title="Bottom of page"  style="margin-left:35px;" /></a></div>
 

<!-- End   - put your content here --->

</div>
 

<div id="divLocation"     style="position:absolute; height:439px; width:130px; ">

 

<img src="images/.jpg" />

<!-- End   - put your content here --->

</div>
 

<script type="text/javascript">

var ns = (navigator.appName.indexOf("Netscape") != -1);

var d = document;

function JSFX_FloatDiv(id, sx, sy)

{

	var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];

	var px = document.layers ? "" : "px";

	window[id + "_obj"] = el;

	if(d.layers)el.style=el;

	el.cx = el.sx = sx;el.cy = el.sy = sy;

	el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};
 

	el.floatIt=function()

	{

		var pX, pY;

		pX = (this.sx >= 0) ? 0 : ns ? innerWidth : 

		document.documentElement && document.documentElement.clientWidth ? 

		document.documentElement.clientWidth : document.body.clientWidth;

		pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ? 

		document.documentElement.scrollTop : document.body.scrollTop;

		if(this.sy<0) 

		pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ? 

		document.documentElement.clientHeight : document.body.clientHeight;

		this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;

		this.sP(this.cx, this.cy);

		setTimeout(this.id + "_obj.floatIt()", 40);

	}

	return el;

}

JSFX_FloatDiv("divNav", 835,30).floatIt();

JSFX_FloatDiv("divLocation", 0,30).floatIt();
 

</script>

<!-- ********************************************************* -->

  
 
 

<table width="952" border="0" cellpadding="0" cellspacing="0" style="background-image:url(images/UniversalBG.gif);" >

  <!--DWLayoutTable-->

  

  <tr>

    <td width="73" rowspan="7" valign="top" ><!--DWLayoutEmptyCell-->&nbsp;</td>

    <td width="34" rowspan="5" valign="top" bgcolor="#FFFFFF"   style=" background-image:url(images/LtsidePlain.gif);  background-repeat:repeat-y; ">&nbsp;<a name="top" id="top"></a></td>

		                

    <td height="262" colspan="3" valign="top" bgcolor="#FFFFFF"><div   id="flashcontent"><a href="http://www.adobe.com/downloads"><img src="images/StaticMainHeader.gif" width="690" height="262" hspace="4"  border="0" /></a></div>

      <script type="text/javascript" src="http://www.randomlychallenged.com/js/swfobject.js"></script>

      <script type="text/javascript">

   var so = new SWFObject("http://www.randomlychallenged.com/RCFlash/Loader.swf?myTitle=", "", "690", "262", "7", "#FFFFFF"); 

   

   so.write("flashcontent");

      </script>      </td>

    <td width="29" rowspan="5" valign="top" style="background-image:url(./images/RtsidePlain.gif); background-repeat:repeat-y;"><!--DWLayoutEmptyCell-->&nbsp;</td>

    <td width="117"></td>

  </tr>

  

  

  
 

  <tr>

    <td height="83" colspan="3" valign="top" bgcolor="#FFFFFF" style="padding-top:16px;"><a name="top" id="top"></a>Ads here </td>

		                

    <td rowspan="3" valign="top"></td>

  </tr>

  <tr>

    <!--Make sure the table below is set to 5px and not 418 before upload-->

    <td height="5" colspan="3" align="center" valign="top" bgcolor="#FFFFFF" >

<div  id="cat" style="width: 640px; height:400px; background-image: url(images/InfoBG.jpg);">

  

  <!--Your DIV content as follows. Note to add CSS padding or margins, do it inside a DIV within the Collapsible DIV -->

  <div align="left" class="titles style21" style="margin-left:40px; margin-right:30px; padding-top:35px;"> information</div>

   <div class="text" align="left" style="margin-left:40px; margin-right:30px;  padding-top:30px;">Help content goes here.</div>

    <div  align="left" style="margin-left:40px; margin-right:30px;  padding-top:30px;"><a href="javascript:collapse2.slideit()" class="ranking2">Close</a></div>

</div>

</div>
 

<script type="text/javascript">
 

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )

var collapse2=new animatedcollapse("cat", 800, true)
 

</script></td>

  </tr>

  <tr>

    <td width="27" height="134" valign="top" bgcolor="#FFFFFF"><!--DWLayoutEmptyCell-->&nbsp;</td>

          <td width="640" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">

            <!--DWLayoutTable-->

            <tr>

              <td width="641" height="134" valign="top"><table border="0" cellpadding="0" cellspacing="0" width="640">
 

  <tr><!-- row 1 -->

   <td><img name="HeaderBG_r1_c1" src="images/ChallChron/InfoHeader/HeaderBG_r1_c1.jpg" width="640" height="50" border="0" id="HeaderBG_r1_c1" alt="" /></td>

  </tr>

  <tr><!-- row 2 -->

   <td><table align="left" border="0" cellpadding="0" cellspacing="0" width="640">

	  <tr><!-- row 1 -->

	   <td width="253" height="71" style="background-image:url(images/ChallChron/InfoHeader/HeaderBG_r2_c1.jpg);"><div></div></td>

	   <td><img name="HeaderBG_r2_c2" src="images/ChallChron/InfoHeader/HeaderBG_r2_c2.jpg" width="35" height="71" border="0" id="HeaderBG_r2_c2" alt="" /></td>

	   <td width="352" height="71" style="background-image:url(images/ChallChron/InfoHeader/HeaderBG_r2_c3.jpg);"><div></div></td>

	  </tr>

	</table></td>

  </tr>

  <tr><!-- row 3 -->

   <td><table align="left" border="0" cellpadding="0" cellspacing="0" width="640">

	  <tr><!-- row 1 -->

	   <td width="288" height="60" style="background-image:url(images/ChallChron/InfoHeader/HeaderBG_r3_c1.jpg);"><div></div></td>

	   <td width="78" height="60" style="background-image:url(images/ChallChron/InfoHeader/HeaderBG_r3_c3.jpg);"><div></div></td>

	   <td width="274" height="60" style="background-image:url(images/ChallChron/InfoHeader/HeaderBG_r3_c4.jpg);"><div></div></td>

	  </tr>

	</table></td>

  </tr>

  <tr><!-- row 4 -->

   <td width="640" height="137" style="background-image:url(images/ChallChron/InfoHeader/HeaderBG_r4_c1.jpg);"><div></div></td>

  </tr>

  <tr> <!-- row 5 -->

   <td width="640" height="58" style="background-image:url(images/ChallChron/InfoHeader/HeaderBG_r5_c1.jpg);"><div></div></td>

  </tr>

</table>

              </td>

            </tr>

            <tr>

              <td height="134" valign="top">
 

<ul id="countrytabs" class="shadetabs">

<li><a href="#" rel="country1" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('StoryBtn','','images/StoryBtnDOWN.jpg',1)"><img src="images/StoryBtn.jpg" alt="My Story" name="StoryBtn" width="100" height="100" border="0" id="StoryBtn" /></a></li>
 

<li><a href="#" rel="country2" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('PhotoBtn','','images/PhotosBtnDOWN.jpg',1)"><img src="images/PhotosBtn.jpg" alt="My Photos" name="PhotoBtn" width="100" height="100" border="0" id="PhotoBtn" /></a></li>
 

<li><a href="#" rel="country3" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('MovieBtn','','images/MoviesBtnDOWN.jpg',1)"><img src="images/MoviesBtn.jpg" alt="My Movies" name="MovieBtn" width="100" height="100" border="0" id="MovieBtn" /></a></li>

</ul>
 

<div  style="background-image:url(images/ChallChron/MainChronBG_r2_c1.jpg); background-repeat:repeat-y;"><img src="images/ChallChron/MainChronBG_r1_c1.jpg" />

<div  id="country1" class="tabcontent"><div style="background-image:url(images/ChallChron/Story/MyStoryBG_r1_c1.jpg); background-repeat:no-repeat; margin-left:20px; height:82px;"></div>

<div class="text"  style="background-image:url(images/ChallChron/Story/MyStoryBG_r2_c1.jpg); background-repeat:repeat-y; margin-left:20px;"><div style="margin-left:25px; margin-right:35px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sodales metus nec nisl. Mauris tincidunt convallis metus. In velit mi, volutpat vel, imperdiet ac, luctus nec, orci. Sed lectus lacus, ultrices et, adipiscing quis, hendrerit sit amet, tortor. Integer vitae lorem non mi aliquam dapibus. Suspendisse sed massa sit amet sem aliquam tempus. Morbi neque sem, semper non, interdum ac, fringilla in, libero. Suspendisse gravida dolor lacinia tortor. Nulla facilisi. Quisque convallis sagittis nisi. Ut volutpat, diam mollis rhoncus congue, nibh sapien lobortis dui, id dignissim nulla massa feugiat enim. Praesent a nisl eu mauris accumsan dignissim. Proin sagittis erat vulputate lacus. In iaculis feugiat metus. Nunc ut diam vel lectus tristique tincidunt.</div></div>

<div style="margin-left:20px;"><img src="images/ChallChron/Story/MyStoryBG_r3_c1.jpg" /></div>

</div>
 
 

<div align="center" style="margin-left:20px; margin-right:20px;" id="country2" class="tabcontent">
 

<?php 

$y=2;

while ($y<=$x) { 

$imageref = $direct.$name."_".$challenge."_img_".$y.".jpg";

?> 

<img src="<?php echo $imageref; ?>"  height="100px"  border=1 style="border-color: #CCCCCC" onmouseover="showtrail('<?php echo $imageref; ?>','<?php echo $name; ?>');"   onmouseout="hidetrail();" /><div style="display: none; position: absolute;z-index:110; " id="preview_div"></div>
 

<?php

$y=$y+1;

}

?>

</div>
 
 
 

<div  align="center" style="margin-left:20px; margin-right:20px;" id="country3" class="tabcontent">

<div   id="flashcontent2"><a href="http://www.adobe.com/downloads"><img src="images/StaticMainHeader.gif" width="320" height="230" hspace="4"  border="0" /></a></div>

      <script type="text/javascript" src="http://www.randomlychallenged.com/js/swfobject.js"></script>

      <script type="text/javascript">

   var so = new SWFObject("http://www.randomlychallenged.com/Movies/Test.swf", "", "330", "230", "7", "#FFFFFF"); 

  

   

   so.write("flashcontent2");

      </script> 

</div>

</div>
 

<script type="text/javascript">
 

var countries=new ddtabcontent("countrytabs")

countries.setpersist(true)

countries.setselectedClassTarget("link") //"link" or "linkparent"

countries.init()
 

</script>

<div><img src="images/ChallChron/MainChronBG_r3_c1.jpg" /></div>

</div></td>

            </tr>

          </table>

          </td>

          <td width="32" valign="top" bgcolor="#FFFFFF"><!--DWLayoutEmptyCell-->&nbsp;</td>

  </tr>

  <tr>

    <td height="39" colspan="3" valign="top" bgcolor="#FFFFFF" ><!--DWLayoutEmptyCell-->&nbsp;</td>

    <td valign="top"></td>

  </tr>

  <tr>

    <td height="66" colspan="5" align="center" valign="top"   style="background-image: url(./images/kubrickfooter.gif); background-repeat:no-repeat; background-repeat:no-repeat; "><div style="padding-top:15px" class="mainlinks"><a href="../NewsHub.php" class="mainlinks">News Hub</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="./SiteMap.php" class="mainlinks">Site Map</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="./faq.php" class="mainlinks">FAQ's</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="../FreestyleChronicle.php" class="mainlinks">Freestyle Chronicle</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="../ChronicleHub.php" class="mainlinks">Chronicle Hub </a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="../ProfileSearch.php" class="mainlinks">Profile Search</a>&nbsp;<br />

        <br />

    &nbsp;<a href="../ContactUs.php" class="mainlinks">Contact Us</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="../ChronicleSearch.php" class="mainlinks">Chronicle Search</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="./ChallengeHub.php" class="mainlinks">Challenge Hub</a></div></td>

    <td valign="top"></td>

  </tr>

  <tr>

    <td height="22" colspan="5" align="center" valign="top" class="sublinksWIT"><?php include './CopyrightInclude.php'; ?>

  <a href="./Rules.php" class="sublinksWIT">The Rules</a>&nbsp;|&nbsp;<a href="./T&amp;C.php" class="sublinksWIT">Terms &amp; Conditions</a>&nbsp;|&nbsp;<a href="./PrivacyPolicy.php" class="sublinksWIT">Privacy Policy</a><a name="bottom" id="bottom"></a></td>

    <td valign="top"></td>

  </tr>

  <tr>

    <td height="18" >&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td valign="top"></td>

  </tr>

</table>
 

</body>

</html>

<?php

mysql_free_result($UserInfo);

?>

Open in new window

0
Comment
Question by:RowdyBurns
  • 9
  • 8
17 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20380579
Again I am getting

Error: syntax error
Source File: http://www.randomlychallenged.com/TabTest2.php
Line: 1, Column: 132
Source Code:
MM_preloadImages('images/LogoutBtnDOWN.gif','images/NewsHubBtnDOWN.gif','images/ProSearchBtnDOWN.gif','images/MyProfileBtnDOWN.gif',,,'images/InfoBtnDOWN.gif','images/ChronicleHubBtnDOWN.gif','images/FreestyleChallComBtnDOWN.gif','images/ChronicleSearchBt

You do not want to fix that first?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20380583
Script works fine in FF and IE6 win otherwise
0
 

Author Comment

by:RowdyBurns
ID: 20380602
I've taken out the commas in the script that you highlighted.
I am working on a MAC with FF 2.0.0.10 and Safari  3.0.4. The preloader is not functioning in either of these and I don't have access to IE at the moment.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20380720
Well - I have no problems at all in IE6, FF 2.0.0.7 and Safari Beta for windows on Win2K
Only problem is I personally dislike that mouseover script a LOT - especially on your page since the thumbs are under the fold and so the images are not fully displayed unless I first scroll down
0
 

Author Comment

by:RowdyBurns
ID: 20380766
Thanks for the heads up mplungjan. I wanted to adjust the position of the thumbs as I dislike this too. However when I asked on EE how to do this my question was ignored, so I put it to the bottom of the list.
If you have any other suggestions as to how I can fix the position of the thumbs so that the script references either the center of the image or the bottom left corner rather than the top left I would be grateful.
In addition, any clues as to why the loader/background isn't displaying on a mac would be helpful.

Here is the script for the position of the rollOver.
var offsetfrommouse=[15,25]; //Can these figures be set to a negative amount or the script set to reference a different coordinate?

var displayduration=0; //duration in seconds image should remain visible. 0 for always.
 

var defaultimageheight = 40;	// maximum image size.

var defaultimagewidth = 40;	// maximum image size.
 

var timer;
 

function gettrailobj(){

if (document.getElementById)

return document.getElementById("preview_div").style

}
 

function gettrailobjnostyle(){

if (document.getElementById)

return document.getElementById("preview_div")

}
 
 

function truebody(){

return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}
 
 

function hidetrail(){	

	gettrailobj().display= "none";

	document.onmousemove=""

	gettrailobj().left="-500px"

	clearTimeout(timer);

}
 

function showtrail(imagename,title,width,height){

	i = imagename

	t = title

	w = width

	h = height

	timer = setTimeout("show('"+i+"',t,w,h);",200);

}

function show(imagename,title,width,height){

 

    var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth - offsetfrommouse[0]

	var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)
 

	if( (navigator.userAgent.indexOf("Konqueror")==-1  || navigator.userAgent.indexOf("Firefox")!=-1 || (navigator.userAgent.indexOf("Opera")==-1 && navigator.appVersion.indexOf("MSIE")!=-1)) && (docwidth>650 && docheight>500)) {

		( width == 0 ) ? width = defaultimagewidth: '';

		( height == 0 ) ? height = defaultimageheight: '';

			

		width+=30

		height+=55

		defaultimageheight = height

		defaultimagewidth = width

	

		document.onmousemove=followmouse; 
 

		

		newHTML = '<div class="border_preview" style="width:'+  width +'px;height:'+ height +'px"><div id="loader_container"><div id="loader"><div align="center">Loading template preview...</div><div id="loader_bg"><div id="progress"> </div></div></div></div>';

		newHTML = newHTML + '<h2 class="title_h2">' + ' '+title + '</h2>'

		

    	newHTML = newHTML + '<div class="preview_temp_load"><img onload="javascript:remove_loading();" src="' + imagename + '" border="0"></div>';

		newHTML = newHTML + '</div>'; 

		

		if(navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1 ){

			newHTML = newHTML+'<iframe src="about:blank" scrolling="no" frameborder="0" width="'+width+'" height="'+height+'"></iframe>';

		}		
 

		gettrailobjnostyle().innerHTML = newHTML;

		gettrailobj().display="block";

	}

}
 

function followmouse(e){
 

	var xcoord=offsetfrommouse[0]

	var ycoord=offsetfrommouse[1]
 

	var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15

	var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)
 

	if (typeof e != "undefined"){

		if (docwidth - e.pageX < defaultimagewidth + 2*offsetfrommouse[0]){

			xcoord = e.pageX - xcoord - defaultimagewidth; // Move to the left side of the cursor

		} else {

			xcoord += e.pageX;

		}

		if (docheight - e.pageY < defaultimageheight + 2*offsetfrommouse[1]){

			ycoord += e.pageY - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + e.pageY - docheight - truebody().scrollTop));

		} else {

			ycoord += e.pageY;

		}
 

	} else if (typeof window.event != "undefined"){

		if (docwidth - event.clientX < defaultimagewidth + 2*offsetfrommouse[0]){

			xcoord = event.clientX + truebody().scrollLeft - xcoord - defaultimagewidth; // Move to the left side of the cursor

		} else {

			xcoord += truebody().scrollLeft+event.clientX

		}

		if (docheight - event.clientY < (defaultimageheight + 2*offsetfrommouse[1])){

			ycoord += event.clientY + truebody().scrollTop - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + event.clientY - docheight));

		} else {

			ycoord += truebody().scrollTop + event.clientY;

		}

	}

	gettrailobj().left=xcoord+"px"

	gettrailobj().top=ycoord+"px"
 

}

Open in new window

0
 

Author Comment

by:RowdyBurns
ID: 20380771
By the way this is what the preloader should look like:

http://www.monsterpaparazzi.com/photos/howie/september2007.html
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20380786
Yeah I know. I hate it. Throwing a big ugly image up somewhere randomly near my cursor, closing it because I moved too far off the thumb and throwing another up somewhere near where my cursor now is but oh that was too close to the edge so we will flicker it left and right of the cursor in an insane dance.

PS: Sorry I do not have a Mac :(  I need 1799 Euro and I will get an Imac ;)
0
 

Author Comment

by:RowdyBurns
ID: 20380806
Man you need to get out more! Meet some people. Perhaps getting a nice shiny new Imac will help with that... when you can afford it.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20380813
:)  Writing custom JS for free does not help :|
0
 

Author Comment

by:RowdyBurns
ID: 20380823
Doesn't  EE give you a cut of what I pay them?!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20381253
No way. All volunteering. Wanna know more, my email is in my profile
0
 

Author Comment

by:RowdyBurns
ID: 20381522
That sucks. Maybe you should make a Kasamba account. Some of those guys seem to be doing well.
I know where you stand with the script that I am using. Do you have a suggestion be for a better solution?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20381777
0
 

Author Comment

by:RowdyBurns
ID: 20381859
I liked that one too when I was searching for a script. Unfortunately it has to work with the tabbed content script that we  already have on the page and we thought this might get a little confusing for the user.
Thanks for suggesting it though.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20382570
Just remove the tabs from the gallery!
0
 

Author Comment

by:RowdyBurns
ID: 20382621
LOL! You're assuming I know how to code in the first place. I know cut 'n' paste and that is about it!
I found a better version of the script I have on this thread. It's working well now and with a little more hacking about (if I don't break it) I should be there. Thanks for the conversation. Have 500 points!
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 20382638
Thanks - Now I have 4,001,858 points in total...

If you need help, you know where to find me :)))
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now