PDA

View Full Version : Make Div slide using existing script



Gibson98
Mar 2nd, 2011, 11:02 AM
Hi,

I have a script that shows/hides a div but rather than making it sort of snap I would like to make it glide/slide. I have looked at other scripts but can't make them work with mine.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>test</title>

<style type="text/css" media="screen">
/* CSS Reset */
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}

body {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
color:#FF0000;
}
a:link {
color: #999999;
text-decoration: none;
letter-spacing: 3px;
font-size:14px;
}
a:visited {
color: #999999;
text-decoration: none;
letter-spacing: 3px;
font-size:14px;
}
a:hover {
color: #FF0000;
letter-spacing: 3px;
text-decoration: none;
font-size:14px;

}
a:active {
color: #FF0000;
font-size:14px;
letter-spacing: 3px;


}



#wrapper{
position:relative;
width:730px;
height:600px;
margin:0px auto;
}

#images{
width:730px;
height:552px;
overflow:hidden;
float:right;
position: absolute;
top: 48px;
}



#textbox{
position: absolute;
width:205px;
height:40px;
background-color: #FFFFFF;
top: 68px;
left: 20px;
z-index: 2;
padding: 10px;
border-bottom: 2px solid red;

}

#logo {
position: absolute;
width: 101px;
position: absolute;
left: 634px;
top: 19px;
padding: opx;
margin: 0px;
z-index: 2;
}

.more {
display: none;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
border-bottom: 2px solid red;
padding-left: 8px;
padding-right: 8px;
margin-left: -10px;
width: 209px;
padding-bottom:10px;


}

a.more:hover {

text-decoration: none;}

a.showLink, a.hideLink {
text-decoration: none;
font-size: xx-small;
color: #36f;
padding-left: 8px;
/*** background: transparent url(down.gif) no-repeat left;***/ }
a.hideLink {
/*** background: transparent url(up.gif) no-repeat left;***/ }





.drop1 {
font-size: 12px;
font-weight: bold;
}
.drop2 {
color: #666666;
font-size: smaller;

}
#apDiv1 {
position:absolute;
left:319px;
top:87px;
width:234px;
height:32px;
z-index:1;
}


.init_image, .inactive_class {


}

.hover_class, #active_id {
color:#F00;
}

</style>

<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "<img src=ShowProduct.jpg border='0'>";
}
else {
ele.style.display = "block";
text.innerHTML = "<img src=hideProduct.jpg border='0'>";
}
}
</script>

<script type="text/javascript">

// Reference URL to large images here
var Images = new Array(
"001.jpg",
"002.jpg",
"003.jpg",
"004.jpg"

);


function swap(el) {
var timgs=document.getElementsByTagName('a')
for (var i_tem = 0; i_tem < timgs.length; i_tem++)
if (timgs[i_tem].className=='inactive_class'||timgs[i_tem].className=='hover_class')
timgs[i_tem].id=''
el.id='active_id'
document['imgMain'].src = Images[el.href.substr(el.href.lastIndexOf('#')+1)];
}

function init(){
var timgs=document.getElementsByTagName('a')
for (var i_tem = 0; i_tem < timgs.length; i_tem++)
if (timgs[i_tem].className=='init_image'){
timgs[i_tem].className='inactive_class'
timgs[i_tem].onmouseover=function(){this.className='hover_class'}
timgs[i_tem].onmouseout=function(){this.className='inactive_class'}
timgs[i_tem].onclick=function(){swap(this);return false;}
}
swap(document.getElementById('first'));
}

</script>
</head>
<body onLoad="init();">


<div id="wrapper">

<div id= logo><img src="logo2.png" width="101" height="92" /></div>
<div id="textbox">
<div style="position:relative;">

<img style="padding-right:5px;" src="logo_dedon.png" alt=""/>
<a href="javascript:toggle();" id="displayText"><img src=ShowProduct.jpg border="0"></a>
<img style="padding-right:5px;" src="clear.gif" alt="" width="135" height="10" />
<a class="init_image" id="first" href="#0">1</a>
<a class="init_image" id="first" href="#1">2</a>
<a class="init_image" id="first" href="#2">3</a>
<a class="init_image" id="first" href="#3">4</a>
</div>


<div id="toggleText" style="display: none;" class="more">
<p><span class="drop1">BARCELONA</span><br />
<span class="drop2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin non mi in urna hendrerit tincidunt. Maecenas eleifend erat et lacus. Sed tempor. Sed venenatis consequat neque. Sed massa. Donec quis orci sed lacus ullamcorper venenatis. </span></p>

</div>

</div>

<div id="images">
<div><img galleryimg="no" name="imgMain" src="img/big/1big.jpg" alt=""></div>

</div>

</div>




</body>
</html>




Can anyone advise a solution for this please?

Thanks alot
Joe

hdewantara
Mar 3rd, 2011, 04:21 PM
Tried from scratch with setInterval() ?