RowdyBurns
asked on
Conflicting javascripts?
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('p
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('l
targelem.style.display='no
targelem.style.visibility=
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.
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('p
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('l
targelem.style.display='no
targelem.style.visibility=
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--> </td>
<td width="34" rowspan="5" valign="top" bgcolor="#FFFFFF" style=" background-image:url(images/LtsidePlain.gif); background-repeat:repeat-y; "> <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--> </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--> </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--> </td>
</tr>
<tr>
<td height="39" colspan="3" valign="top" bgcolor="#FFFFFF" ><!--DWLayoutEmptyCell--> </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> | <a href="./SiteMap.php" class="mainlinks">Site Map</a> | <a href="./faq.php" class="mainlinks">FAQ's</a> | <a href="../FreestyleChronicle.php" class="mainlinks">Freestyle Chronicle</a> | <a href="../ChronicleHub.php" class="mainlinks">Chronicle Hub </a> | <a href="../ProfileSearch.php" class="mainlinks">Profile Search</a> <br />
<br />
<a href="../ContactUs.php" class="mainlinks">Contact Us</a> | <a href="../ChronicleSearch.php" class="mainlinks">Chronicle Search</a> | <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> | <a href="./T&C.php" class="sublinksWIT">Terms & Conditions</a> | <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" > </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td valign="top"></td>
</tr>
</table>
</body>
</html>
<?php
mysql_free_result($UserInfo);
?>
Script works fine in FF and IE6 win otherwise
ASKER
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.
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.
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
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
ASKER
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.
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"
}
ASKER
By the way this is what the preloader should look like:
http://www.monsterpaparazzi.com/photos/howie/september2007.html
http://www.monsterpaparazzi.com/photos/howie/september2007.html
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 ;)
PS: Sorry I do not have a Mac :( I need 1799 Euro and I will get an Imac ;)
ASKER
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.
:) Writing custom JS for free does not help :|
ASKER
Doesn't EE give you a cut of what I pay them?!
No way. All volunteering. Wanna know more, my email is in my profile
ASKER
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?
I know where you stand with the script that I am using. Do you have a suggestion be for a better solution?
ASKER
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.
Thanks for suggesting it though.
Just remove the tabs from the gallery!
ASKER
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!
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!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Error: syntax error
Source File: http://www.randomlychallenged.com/TabTest2.php
Line: 1, Column: 132
Source Code:
MM_preloadImages('images/L
You do not want to fix that first?