DHTML: DIV HEIGHT

I

IC

Hi -

I have a question about the following code:

<script>
document.write('<span id="outter" style="position:relative;">');
document.write("<object
classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
codebase='http://active.macromedia.com/flash2/cabs/swflash.cab#version=5,0,0,0'
id=fscommand width=200 height=60><param name=movie
value='x.swf'><param name=quality value='high'></object>");
document.write('<div id="inner"
style="position:absolute;left:-1px;top:60px;overflow:hidden;width=200px;height=240">');
function SHOW() {
document.all.inner.style.visibility = "visible";
document.all.inner.innerHTML = '<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
id=fscommand width="200" height="240"><param name=movie
value="y.swf?"><param name=wmode value="trasparent"><PARAM
NAME=bgcolor VALUE="#FFFFFF"><param name=quality
value="high"></object>'
}
function HIDE() {
document.all.inner.style.visibility = "hidden";
}
document.write('</div>');
document.write('</span>');
</script>

In the above code x.swf would load. When you click on x.swf, y.swf
would appear below it (i.e. like a dropdown). I want to make a
change, so that the dropdown swf does not appear all at once. Rather
it starts to appear from the top until, after a few seconds, the
entire dropdown is visible. I think this can be down by dynamically
changing and increasing the div styles height value. For example, you
click on x.swf and the style height goes from 1 to 240. When you
close the div, the height would go from 240 to 0. Hopefully, this
makes sense to someone out there.

Thanks for your help in advance.

-E
 
I

IC

Richard Cornford said:
In the above code x.swf would load. When you click on x.swf,
y.swf would appear below it (i.e. like a dropdown). I want
to make a change, so that the dropdown swf does not appear
all at once. Rather it starts to appear from the top until,
after a few seconds, the entire dropdown is visible. I think
this can be down by dynamically changing and increasing the
div styles height value. For example, you click on x.swf and
the style height goes from 1 to 240. When you close the div,
the height would go from 240 to 0. Hopefully, this
makes sense to someone out there.
Click to expand...

The plugin for swf might be the biggest problem with this plan as it
might not be happy to be clipped. However, setting the overflow property
of a DIV to hidden and changing its size (height) over time could
resemble a dropdown. This page demonstrates the animation of a dropdown
like DIV. It will work with modern browsers and should be harmless on
older browses like Netscape 4:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title></title>
<style type="text/css">
#upper {
width:100%;
color:#000000;
background-color:#FFFF00;
}
#lower {
width:100%;
color:#FFFFFF;
background-color:#0000FF;
overflow:hidden;
}
#outer {
margin:0px auto;
padding:0px;
width:40ex;
}
#lower UL {
margin:2% auto 2% 10%;
padding:0px;
}
</style>
<script type="text/javascript">
var TimedQue = function(){
var base, timer;
var interval = 40;
var newFncs = null;
function addFnc(next, f){
function t(){
next = next&&next();
if(f()){
return arguments.callee;
}else{
f = null;
return next;
}
};
t.addItem = function(d){
if(next){
next.addItem(d);
}else{
next = d;
}
return this;
};
t.finalize = function(){
return ((next)&&(next = next.finalize())||(f = null));
};
return t;
};
function tmQue(f){
if(newFncs){
newFncs = newFncs.addItem(addFnc(null, f));
}else{
newFncs = addFnc(null, f);
}
if(!timer){
timer = setTimeout(tmQue.act, interval);
}
};
tmQue.act = function(){
var f = newFncs, strt = new Date().getTime();
if(f){
newFncs = null;
if(base){
base.addItem(f);
}else{
base = f;
}
}
base = base&&base();
if(base){
var t = interval - (new Date().getTime() - strt);
timer = setTimeout(tmQue.act, ((t > 0)?t:1));
}else{
timer = null;
};
};
tmQue.act.toString = function(){
return 'TimedQue.act()';
};
tmQue.finalize = function(){
timer = clearTimeout(timer);
base = base&&base.finalize();
slotIndex = 0;
newFncs = [];
};
return tmQue;
}();
var running = false;
var currentDivSize = 0;
var direction = 1;
var maxHeight = 240; // default value!
function getDiv(iD){
if(document.getElementById){
return document.getElementById(iD);
}else if(document.all){
return document.all[iD];
}
return null;
}

function expand(but){
var lowDiv,divStyle,heightType,step = 8;
function sizeDiv(){
currentDivSize += direction * step;
divStyle.height = currentDivSize + heightType;
if((currentDivSize <= 0)||(currentDivSize >= maxHeight)){
direction *= -1;
running = false;
but.value = (direction == 1)?' Expand ':'Contract';
}
return running;
}
if(!running){
lowDiv = getDiv('lower');
if(lowDiv){
divStyle = lowDiv.style||lowDiv;
heightType = (typeof divStyle.height == 'string')?'px':0;
if(currentDivSize){
direction = -1;
}else{
direction = 1;
}
maxHeight = lowDiv.scrollHeight||maxHeight;
but.value = '------------';
running = true;
TimedQue(sizeDiv);
}
}
}
function init(){
var lowDiv = getDiv('lower');
if(lowDiv){
var divStyle = lowDiv.style||lowDiv;
maxHeight =
lowDiv.offsetHeight||lowDiv.scrollHeight||maxHeight;
divStyle.height = 0 +
((typeof divStyle.height == 'string')?'px':0);
}
}
</script>
</head>
<body onload="init()">
<div id="outer">
<div id="upper">
<form name="aForm" action="#">
<script type="text/javascript">
if((document.getElementById)||(document.all)){
document.write('<input type="button"'+
' name="Expand" value="Expand"'+
' onclick="expand(this);">');
}
</script>
</form>
<p>XXXX XXXXX XXXXX XXXX XXXX
XXX XXXX XXXXX XXXXX XXXX XXXXXX
XXXX XXXX XXXX XXXX XXXX XXXXXX
XXXXX XXXXX XXXXX XXX XXXX XXXX
XXXX XXXX XXXXXX XXXX XXXX XXXX
XXXX XXXX XXXX XXXXX XXXXX XXXX</p>
<div>
<div id="lower">
<ul>
<li>XXXX XXXX XXXX</li>
<li>XXXX XXXX XXXX</li>
<li>XXXX XXXX XXXX</li>
<li>XXXX XXXX XXXX</li>
<li>XXXX XXXX XXXX</li>
<li>XXXX XXXX XXXX</li>
<li>XXXX XXXX XXXX</li>
<li>XXXX XXXX XXXX</li>
<li>XXXX XXXX XXXX</li>
<li>XXXX XXXX XXXX</li>
</ul>
</div>
</div>
</body>
</html>

You could have a go at inserting your object tags into the DIVs.

Richard.
Click to expand...


Thanks for your help!!!!

-Ian
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

SWF Viewer question 2
Document.write and Flash 3
Flash and document.write() 11
Problem with javascript function call 7
Display images or flashes based on the HTML page 0
Declaring a div using Javascript not working in Safari 2
Load Video File Dynamically 0
The annoying problem! 3

Members online

No members online now.
Total: 21 (members: 0, guests: 21)
Robots: 471

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top