...

View Full Version : More conflicting scripts!



jonr1234
03-20-2004, 08:51 PM
I suppose I must seem very annoying to all you experts out there but I'm very new to all this web design and I am a bit of a cut and paste web designer!

I've been using some scripts from Dynamic Drive and pasting them into Frontpage 2000!

Two pages have conflicted with each other unfortunately. The scroll horizontal in a menu bar has conflicted with the scroll diagonal with an iframe!

I have pasted the code below for the entire two pages, If you could please sort them out so they work, if someone is generous!

The page mainframe.html has an iframe in which the second page is set to open in but when you use the up/down buttons at the bottom, the iframe does not scroll, I can alter it so the iframe has manual scroll bars at the side but I did not like the look of it

If you put both scripts within frontpage, you can see the workings easier, I hope I haven't rabbited on too much!


---------------------------------------------------------------------------------
MAINFRAME.html



<html>

<head>


<script language="JavaScript1.2">
<!--hide

//date in title by Randall Smith copyright 1999
//Permission given to Dynamicdrive.com to feature it in it's DHTML archive
//Script modified by Dynamicdrive.com to make it cross browser friendly. Visit Dynamicdrive.com for more DHTML scripts
//please visit me on the web at http://members.xoom.com/u4rstunzd/
//and to change the title:where it says Welcome todays date is: just put you own text in if you would like to--
var isnMonth = new
Array("January","February","March","April","May","June","July","August","Septerber","October","November","December");
var isnDay = new
Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday");
today = new Date () ;
Year=today.getYear();
if (Year < 1000)
Year+=1900
Date=today.getDate();
function setdate(){
document.title="Welcome! Today\'s date is: "+isnDay[today.getDay()]+", "+isnMonth[today.getMonth()]+" "+Date+", "+Year+""
}
if (document.all)
setdate()
else if (document.getElementById)
window.onload=setdate
//--hide-->
</script>


<script type="text/javascript">

/***********************************************
* Contractible Headers script- Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated Oct 21st, 2003.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="yes" //Collapse previously open content when opening present? (yes/no)

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}

function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(cid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
}
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document.cookie=window.location.pathname+"="+selectedItem
}

function do_onload(){
getElementbyClass("switchcontent")
if (enablepersist=="on" && typeof ccollect!="undefined")
revivecontent()
}
window.onload=do_onload

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)


if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
<base target="datamain">
<style fprolloverstyle>A:hover {color: #337ABD; font-weight: bold}
</style>
</head>

<body bgcolor="#999999" background="grey3.bmp" link="#003366" vlink="#003366" alink="#003366">

<table border="0" width="100%" height="30%">
<tr>
<td width="100%" align="center"><img border="0" src="Header-proper.JPG" width="741" height="205"></td>
</tr>
</table>
<div align="center">
<center>
<table border="0" width="100%" cellpadding="5">
<tr>
<td width="27%" align="center" valign="top">
<table border="2" width="102%" bordercolor="#337ABD" cellspacing="0" cellpadding="3" bordercolordark="#337ABD" bordercolorlight="#337ABD" bgcolor="#CFDAF0">
<tr>
<td width="100%" height="177%" valign="top" align="center">
<font face="Hobo" size="5"><A STYLE="text-decoration:none" href="home.htm"><b><font color="#000000">Home</font></b></a></font>
<h3 onClick="expandcontent('sc1')" style="cursor:hand; cursor:pointer"><font face="Hobo" size="5"><b>About Me</b></font></h3>
<div id="sc1" class="switchcontent">
<dl>
<dt><b><font face="Comic Sans MS" size="4" color="#36658C">
<a target="datamain" href="file:///C:/Documents%20and%20Settings/Jon%20Boy/My%20Documents/My%20Webs/My%20Official%20Site/about.htm">Stuff about me</a></font></b></dt>
<dt><b><font size="4" color="#36658C" face="Comic Sans MS"><a href="contact.htm">Contact me</a></font></b></dt>
</dl>
</div>

<h3 onClick="expandcontent('sc2')" style="cursor:hand; cursor:pointer"><font face="Hobo" size="5"><b>PC
Games</b></font></h3>
<div id="sc2" class="switchcontent">
<dl>
<dt><b><font face="Comic Sans MS" size="4" color="#36658C"><a href="gta3.htm" target="datamain">GTA3</a></font></b></dt>
<dt><b><font face="Comic Sans MS" size="4" color="#36658C"><a href="gtavc.htm">GTA: Vice City</a></font></b></dt>
<dt><b><font face="Comic Sans MS" size="4" color="#36658C"><a href="maxp.htm">Max Payne</a></font></b></dt>
</center>
<dt><b><font face="Comic Sans MS" size="4" color="#003366"><a href="medal.htm">Medal
of Honor</a></font></b></dt>
<dt><b><font face="Comic Sans MS" size="4" color="#003366"><a href="archive.htm">Game
Archive</a></font></b></dt>
</dl>
</div>

<center>

<h3 onClick="expandcontent('sc3')" style="cursor:hand; cursor:pointer"><font face="Hobo" size="5"><b>Xbox
Games</b></font></h3>
<div id="sc3" class="switchcontent">
<dl>
<dt><b><font face="Comic Sans MS" size="4" color="#36658C"><a href="chamber.htm">HP: Chamber of Secrets</a></font></b></dt>
<dt><b><font face="Comic Sans MS" size="4" color="#36658C"><a href="quidditch.htm">Quidditch World Cup</a></font></b></dt>
<dt><b><font face="Comic Sans MS" size="4" color="#36658C"><a href="return.htm">LOTR: Return of the King</a></font></b></dt>
</dl>
</div>

<h3 onClick="expandcontent('sc4')" style="cursor:hand; cursor:pointer"><font face="Hobo" size="5"><b>The
Lord of The Rings</b></font></h3>
<div id="sc4" class="switchcontent">
<dl>
<dt><b><font face="Comic Sans MS" size="4" color="#36658C"><a href="lotrbook.htm">The Book Trilogy</a></font></b></dt>
<dt><b><font face="Comic Sans MS" size="4" color="#36658C"><a href="lotrfilm.htm">The Film Trilogy</a></font></b></dt>
<dt><b><font face="Comic Sans MS" size="4" color="#36658C"><a href="tolkien.htm">J.R.R.Tolkien</a></font></b></dt>
</dl>
</div>

<h3 onClick="expandcontent('sc5')" style="cursor:hand; cursor:pointer"><font face="Hobo" size="5"><b>Harry
Potter</b></font></h3>
<div id="sc5" class="switchcontent">
<dl>
<dt><b><font face="Comic Sans MS" size="4" color="#36658C"><a href="hpbook.htm">The Book series</a></font></b></dt>
<dt><b><font face="Comic Sans MS" size="4" color="#36658C"><a href="hpfilm.htm">The Film series</a></font></b></dt>
</dl>
</div>

<h3 onClick="expandcontent('sc6')" style="cursor:hand; cursor:pointer"><font face="Hobo" size="5"><b>Steam
Railways</b></font></h3>
<div id="sc6" class="switchcontent">
<dl>
<dt><b><font face="Comic Sans MS" size="4" color="#36658C"><a href="model.htm">Model Railways</a></font></b></dt>
<dt><b><font face="Comic Sans MS" size="4" color="#36658C"><a href="kesr.htm">K&amp;ESR</a></font></b></dt>
</dl>
</div>

<h3 onClick="expandcontent('sc7')" style="cursor:hand; cursor:pointer"><font face="Hobo" size="5"><b>Cool Internet Stuff</b></font></h3>
<div id="sc7" class="switchcontent">
<dl>
<dt><b><font face="Comic Sans MS" size="4" color="#36658C"><a href="links.htm">Links</a></font></b></dt>
<dt><b><font face="Comic Sans MS" size="4" color="#36658C"><a href="download.htm">Downloads</a></font></b></dt>
</dl>
</div>


</center>


</td>
</tr>

</table>
<p>&nbsp;
<table border="2" width="102%" bordercolor="#337ABD" cellspacing="0" cellpadding="3" bordercolordark="#337ABD" bordercolorlight="#337ABD" bgcolor="#CFDAF0">
<tr>
<td width="100%" align="center"><font face="Harquil" size="6" color="#003366">Quote
of the Day</font></td>
</tr>
<tr>
<td width="100%" align="center"><font size="5" face="Broadband ICG">quote</font></td>
</tr>
<tr>
<td width="100%" align="center"><font size="5" face="Broadband ICG">whoever
said it</font></td>
</tr>
</table>

</td>
<td width="73%" align="center" valign="top">
&nbsp;


<!--Scrollable iframe script- By Dynamic Drive-->
<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
<!--This credit MUST stay intact for use-->

<iframe id="datamain" src="home.htm" width=550 height=700 marginwidth=1 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no name="datamain"></iframe>

<layer visibility=hide>
<div style="width: 536; height: 33" align="right">
<p align="center">
<font color="#003366" face="Comic Sans MS">
<a href="#" onMouseover="scrollspeed=-2" onMouseout="scrollspeed=0"><font size="5">Up</font></a>&nbsp;&nbsp;
<font size="5">|&nbsp;&nbsp; <a href="#" onMouseover="scrollspeed=2" onMouseout="scrollspeed=0">Down</a>
</font></font>
</div>
</layer>

</td>
</tr>
</table>
</div>
<table border="0" width="100%" height="47">
<tr>
<td width="100%" height="43">
<p align="center"><font size="2" color="#999999">This webpage and all
content on it was produced by Jonathan Ramsden, unless stated otherwise.
Copying of any data without prior consent from said owner is prohibited.</font></td>
</tr>
</table>


<script language="JavaScript1.2">
<!--

//onMouseover Scrollbar effect- by Svetlin Staev (svetlins@yahoo.com)
//Submitted to Dynamic Drive
//Visit http://www.dynamicdrive.com for this script

/*---------------[IE 5.5 Scrollbars colorer]--------------------*/
function scrollBar(line,face,theme)
{
if (!line||!face)
{
line=null;
face=null;
switch(theme) // Predefined themes
{
case "blue":
var line="#337ABD";
var face="#CFDAF0";
break;
case "orange":
var line="#FBBB37";
var face="#FFF9DF";
break;
case "red":
var line="#FF7979";
var face="#FFE3DD";
break;
case "green":
var line="#00C600";
var face="#D1EED0";
break;
case "neo":
var line="#BC7E41";
var face="#EFE0D1";
break;
}
}

with(document.body.style)
{
scrollbarDarkShadowColor=line;
scrollbar3dLightColor=line;
scrollbarArrowColor="black";
scrollbarBaseColor=face;
scrollbarFaceColor=face;
scrollbarHighlightColor=face;
scrollbarShadowColor=face;
scrollbarTrackColor="#F3F3F3";
}
}

/*------------------[Pointer coordinates catcher]---------------*/
function colorBar(){
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var x = event.clientX;
var y = event.clientY;
if(x>w||y-3>h) scrollBar('#006699','#B3C4E8'); // Your colors
else scrollBar(null,null,"blue"); // A predefined theme
}

if (document.all){
scrollBar(null,null,"blue");
document.onmousemove=colorBar;
}

function offscreen(){
scrollBar(null,null,"blue");
}

document.onmouseout=offscreen;
//-->
</script>


</body>

</html>




---------------------------------------------------------------------------------
gta3.html (opens in iframe)




<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
</head>

<body bgcolor="#CFDAF0" link="#337ABD" vlink="#337ABD" alink="#337ABD">

<p align="center">&nbsp;</p>

<p align="center"><font color="#003366" size="7" face="Harquil">Grand Theft Auto
3</font>
</p>


<hr>
<p align="center">



<font face="Comic Sans MS" size="5">



<script type="text/javascript">

/***********************************************
* Scrollable Menu Links- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//configure path for left and right arrows
var goleftimage='pointer2.gif'
var gorightimage='pointer.gif'
//configure menu width (in px):
var menuwidth=400
//configure menu height (in px):
var menuheight=25
//Specify scroll buttons directions ("normal" or "reverse"):
var scrolldir="normal"
//configure scroll speed (1-10), where larger is faster
var scrollspeed=6
//specify menu content
var menucontents='<nobr><a href="link">About the Game</a> | <a href="link">Chamber of Secrets Review</a> | <a href="link">Screenshots</a> | <a href="link">Game Cheats and Walkthroughs</a> | <a href="link">Links</a></nobr>'


////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById
var leftdircode='onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"'
var rightdircode='onMouseover="moveright()" onMouseout="clearTimeout(righttime)"'
if (scrolldir=="reverse"){
var tempswap=leftdircode
leftdircode=rightdircode
rightdircode=tempswap
}
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-5000">'+menucontents+'</span>')
var actualwidth=''
var cross_scroll, ns_scroll
var loadedyes=0
function fillup(){
if (iedom){
cross_scroll=document.getElementById? document.getElementById("test2") : document.all.test2
cross_scroll.innerHTML=menucontents
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2
ns_scroll.document.write(menucontents)
ns_scroll.document.close()
actualwidth=ns_scroll.document.width
}
loadedyes=1
}
window.onload=fillup

function moveleft(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px"
}
else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))
ns_scroll.left-=scrollspeed
}
lefttime=setTimeout("moveleft()",50)
}

function moveright(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)<0)
cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px"
else if (document.layers&&ns_scroll.left<0)
ns_scroll.left+=scrollspeed
}
righttime=setTimeout("moveright()",50)
}


if (iedom||document.layers){
with (document){
write('<table border="0" cellspacing="0" cellpadding="2">')
write('<td valign="middle"><a href="#" '+leftdircode+'><img src="'+goleftimage+'"border=0></a> </td>')
write('<td width="'+menuwidth+'px" valign="top">')
if (iedom){
write('<div style="position:relative;width:'+menuwidth+'px;height:'+menuheight+'px;overflow:hidden;">')
write('<div id="test2" style="position:absolute;left:0;top:0">')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+menuwidth+' height='+menuheight+' name="ns_scrollmenu">')
write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')
}
write('</td>')
write('<td valign="middle"> <a href="#" '+rightdircode+'>')
write('<img src="'+gorightimage+'"border=0></a>')
write('</td></table>')
}
}
</script></font></p>


<p align="center"><font face="Comic Sans MS" size="6">This is the content of the main page.</font></p>


</body>

</html>


----------------------------------------------------------------------------------

Thank you for being patient, as i know this is a lot of code!

Philip M
03-20-2004, 10:00 PM
Your problem is that you have two window.onload events.

window.onload=setdate

window.onload=do_onload

The solution is to delete both of these lines and call the scripts directly within the <body> tag:

<body onload ="setdate(); do_onload()"; .....>

This is a very common problem when people simply cut and paste multiple scripts which are not specifically intended to work togther.

Have a look at:-

http://www.javascriptkit.com/javatutors/multiplejava.shtml

Antoniohawk
03-20-2004, 10:15 PM
In the future it would also be a good idea to place your code in the [code] tag and disable smilies so that they don't appear in your code.

jonr1234
03-21-2004, 09:40 AM
I'm sorry but that did not work. I did exactually what you said, but it does not allow my iframe to scroll.

I believe the conflict is between the two pages, the two window.onload's were in the same page.

There is a conflict between the scrolling iframe and the scrolling menu scripts!

Thank you for trying anyway! And the link you posted I had studied for a while before looking on these forums, but it didn't help.

I must be doing something wrong somewhere...


P.S. I will put my code in the code brakets next time! :thumbsup:

jonr1234
03-21-2004, 09:46 AM
I have posted the two scripts from my site if it helps:

Put these two scripts together and the iframe will not scroll, how can I change them?

-----------------------------------------------------------------------------------
Scrollable Iframe
-----------------------------------------------------------------------------------




<!--Scrollable iframe script- By Dynamic Drive-->
<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
<!--This credit MUST stay intact for use-->

<iframe id="datamain" src="home.htm" width=550 height=700 marginwidth=1 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no name="datamain"></iframe>

<layer visibility=hide>
<div style="width: 536; height: 33" align="right">
<p align="center">
<font color="#003366" face="Comic Sans MS">
<a href="#" onMouseover="scrollspeed=-2" onMouseout="scrollspeed=0"><font size="5">Up</font></a>&nbsp;&nbsp;
<font size="5">|&nbsp;&nbsp; <a href="#" onMouseover="scrollspeed=2" onMouseout="scrollspeed=0">Down</a>
</font></font>
</div>
</layer>



------------------------------------------------------------------------------------
Scrollable menu links
------------------------------------------------------------------------------------




<script type="text/javascript">

/***********************************************
* Scrollable Menu Links- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//configure path for left and right arrows
var goleftimage='pointer2.gif'
var gorightimage='pointer.gif'
//configure menu width (in px):
var menuwidth=400
//configure menu height (in px):
var menuheight=25
//Specify scroll buttons directions ("normal" or "reverse"):
var scrolldir="normal"
//configure scroll speed (1-10), where larger is faster
var scrollspeed=6
//specify menu content
var menucontents='<nobr><a href="link">About the Game</a> | <a href="link">Chamber of Secrets Review</a> | <a href="link">Screenshots</a> | <a href="link">Game Cheats and Walkthroughs</a> | <a href="link">Links</a></nobr>'


////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById
var leftdircode='onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"'
var rightdircode='onMouseover="moveright()" onMouseout="clearTimeout(righttime)"'
if (scrolldir=="reverse"){
var tempswap=leftdircode
leftdircode=rightdircode
rightdircode=tempswap
}
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-5000">'+menucontents+'</span>')
var actualwidth=''
var cross_scroll, ns_scroll
var loadedyes=0
function fillup(){
if (iedom){
cross_scroll=document.getElementById? document.getElementById("test2") : document.all.test2
cross_scroll.innerHTML=menucontents
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2
ns_scroll.document.write(menucontents)
ns_scroll.document.close()
actualwidth=ns_scroll.document.width
}
loadedyes=1
}
window.onload=fillup

function moveleft(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px"
}
else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))
ns_scroll.left-=scrollspeed
}
lefttime=setTimeout("moveleft()",50)
}

function moveright(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)<0)
cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px"
else if (document.layers&&ns_scroll.left<0)
ns_scroll.left+=scrollspeed
}
righttime=setTimeout("moveright()",50)
}


if (iedom||document.layers){
with (document){
write('<table border="0" cellspacing="0" cellpadding="2">')
write('<td valign="middle"><a href="#" '+leftdircode+'><img src="'+goleftimage+'"border=0></a> </td>')
write('<td width="'+menuwidth+'px" valign="top">')
if (iedom){
write('<div style="position:relative;width:'+menuwidth+'px;height:'+menuheight+'px;overflow:hidden;">')
write('<div id="test2" style="position:absolute;left:0;top:0">')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+menuwidth+' height='+menuheight+' name="ns_scrollmenu">')
write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')
}
write('</td>')
write('<td valign="middle"> <a href="#" '+rightdircode+'>')
write('<img src="'+gorightimage+'"border=0></a>')
write('</td></table>')
}
}
</script></font></p>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum