| DHMTL Sliding images not working in IE
Not sure what changed |
dohernan
msg:4344049 | 2:27 pm on Jul 26, 2011 (gmt 0) |
I used to have an old workaround for IE that no longer works, so I just get a background image but no div containers or sliding graphics in IE. The site works in other browsers and I don't know what to do. Help please?
<html><head><!--
Ç!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"È
--><title></title>
<meta name="description" content="Artwork">
<meta name="keywords" content="">
<script type="text/javascript" language="JavaScript">
<!--
// TACKLES THUMBNAIL ONCLICK EXPANDING INTO MAIN AREA
function writetoLyr(id, message) {
if (document.layers) {
document.layers[id].document.write(unescape(message))
document.layers[id].document.close();
}
document.getElementById(id).innerHTML = unescape(message);
}
//-->
</script>
<script type="text/javascript"><!--/HANDLES MENU FOR MSIE/--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</script>
<script type="text/javascript" language="JavaScript">
/**************************************************************************
Script: ScrollText Modified (SlideUp Controls)
Copyright (C) 2001 DHTMLCentral.com
This script is made by Thomas Brattli and copyrighted to DHTMLCentral.com
Visit for more great scripts. This may be used freely as long as this msg
is intact! We will also appreciate any links you could give us.
Modified by Greg Lowe
www.trustafarian.com
**************************************************************************/
//Default browsercheck
function bwcheck(){
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5 || this.dom)
return this
}
var bw=bwcheck()
//If you want it to move faster you can set this lower
var speed=0
//Sets variables to keep track of what's happening
var loop, timer, loaded
//Object constructor
function makeScrollObj(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
pageHeight=bw.ie && document.body.offsetHeight-5||innerHeight||0;
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
this.up=goUp;this.down=goDown;this.slideup=slideUp;
this.hideIt=hideIt;this.showIt=showIt;this.moveIt=moveIt;
this.x;this.y;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}
function moveIt(x,y){this.x=x;this.y=y;this.css.left=this.x;this.css.top=this.y}
function showIt(){this.css.visibility="visible"}
function hideIt(){this.css.visibility="hidden"}
//Makes the object go up (called on onMouseOver)
function goDown(move){
if(this.y>-this.scrollHeight+oContent.clipHeight){
this.moveIt(0,this.y-move)
timer=setTimeout(this.obj+".down("+move+")",speed)
}
}
//Makes the object go down (called on onMouseOver)
function goUp(move){
if(this.y<0){
this.moveIt(0,this.y-move)
timer=setTimeout(this.obj+".up("+move+")",speed)
}
}
//Calls the scrolling functions. Also checks whether the page is loaded or not.
function scroll(speed){
if(loaded){
loop=true;
if(speed>0) oScroll.down(speed)
else oScroll.up(speed)
}
}
//Stops the scrolling (called on onMouseOut)
function noScroll(){
loop=false
if(timer) clearTimeout(timer)
}
//Makes the object slide to starting point
function slideUp(move){
//This is where you should set the final placement of the control
//area. The 150 is the y placement and the 450is the x placement
if(this.y>30){
this.moveIt(135,this.y-move)
timer=setTimeout(this.obj+".slideup("+move+")",speed)
}
}
//Makes the object
function scrollInit(){
oContent=new makeScrollObj('divContent')
oScroll=new makeScrollObj('divText','divContent')
oScroll.moveIt(0,0)
oControl=new makeScrollObj('divControl')
oTitle=new makeScrollObj('divTitle','divControl')
oUp=new makeScrollObj('divUp','divControl')
oDown=new makeScrollObj('divDown','divControl')
//Set the placement of the scrolling container (x,y)
oContent.moveIt(25,20)
//Set the final x placement control (yes change the 450 again)
oControl.moveIt(0,pageHeight+50)
oControl.showIt()
//Fine tune the placement of up-down controls (x,y)
oUp.moveIt(240,500)
oDown.moveIt(240,520)
// position of main text box
oTitle.moveIt(0,0)
//Shows the objects inside the control, only shows the up/down divs
//if the text is larger than the container. Delete the if statements
//and copy the oTitle line fot the up/down divs to remove this function.
oTitle.showIt()
if(oScroll.scrollHeight > oContent.clipHeight){oUp.showIt(); oDown.showIt()}
if(oContent.clipHeight > oScroll.scrollHeight){oUp.hideIt(); oDown.hideIt()}
//Begins slideUp and then shows text. You can change
//the speed of the slide and the time delay here.
oControl.slideup(25)
setTimeout("oContent.showIt()",250)
loaded=true
}
//Call the init on page load
onload=scrollInit;
</script>
<style type="text/css">
@import "new.css"; /* basic formatting */
</style></head>
<body><center>
<div id="frame">
<div id="divControl"><div id="divTitle">
<div id="layerbg"><div id="testLayer">
<hr align="center">
Misc
</div>
<div id="bottomcurve"><!-- THIS DISPLAYS THE WHITE BOTTOM CURVE--></div>
</div><!--ENDS DISPLAY OF BLUEBOX-->
<div id="logo">
<img src="img/logoalone2.gif" alt="" title="" width=166 height=79>
</div>
<div class="topmenu">
<ul id="nav">
<li style="width:1.9em;"><a href="" title="3D images">3D</a>
<ul>
<li><a href="">General</A></li>
<li><a href="">Landscapes</A></li>
<li><a href="" class="under">Textures</A></li>
</ul>
</li>
<li style="width:6.7em;"><a href="#">Photography</A>
<ul>
<li><a href="" title="Objects, buildings, bridges etc.">Objects</a></li>
<li><a href="" title="The great outdoors, nature, etc.">Outdoors</a></li>
<li><a href="" title="Photographs of people.">People</a></li>
<li><a href="" title="Photographs of animals, insects, etc.">Critters</A></li>
<li><a href="" title="Photographs of Flowers">Flowers</a></li>
</ul>
</li>
<li style="width:5em;"><a href="#">Graphics</A>
<ul>
<li><a href="" title=".">Drawings & Paintings</a></li>
<li><a href="" title=".">Digital</a></li>
<li><a href="" title=".">Banners</a></li>
<li><a href="" title=".">Dress-Up</a></li>
<li><a href="pages.shtml" title=".">Site Pages</a></li>
<li><a href="scraps.shtml" title="...">Scraps</a></li>
</ul>
</li>
<li style="width:4em;"><a href="#" title="">Writing</a>
<ul>
<li><a href="fiction.shtml" title="...">Fiction</A></li>
<li><a href="nonfiction.shtml" class="under" title=".">Non-Fiction</A></li>
</ul></li>
<li style="width:4em;"><a href="" title=".">Orders</a></li>
<li style="width:6.3em;"><a href="" title="">Bio/Contact</a></li>
<li style="width:2.8em;"><a href="" title="Back to the Index/Home page.">Home</a></li>
</UL>
</div><!--THIS ENDS THE TOPMENU CLASS -->
</div></div><!--THIS WAS THE DIV TEXT AND DIV CONTROL CLASS-->
<div id="divUp">
</div>
<div id="divDown">
</div>
<div id="divContent"><div id="divText">
<h2>My Dreams</h2>
<div class="left">
<img src="" width="100" height="100" alt="" title="." border="0"></div>
<div class="right"><img src="" width="100" height="100" alt="." Title="" border="0"></div>
<div class="left">
<img src="" width="100" height="100" alt="." border="0" Title="."><br></a></div>
<div class="right">
<img src="" title="" alt="" border="0"></a></div>
<div class="left"><img src="" width="100" height="100" alt="" Title="" border="0"></a></div>
<!--
<div class="right"><img src="" width="100" height="100" alt="" border="0" Title="."></div>
<div class="right">
<img src="" width="100" height="100" alt="." border="0" Title="."></div>-->
</div></div>
<!-- THIS ENDS THE DIVCONTENT AND DIV TEXT CLASS -->
</div><!-- THIS ENDS THE FRAME CLASS -->
<br clear="all">
</center>
</body></html>
|
|
