By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,287 Members | 1,509 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,287 IT Pros & Developers. It's quick & easy.

DHTML: DIV HEIGHT

P: n/a
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=24 0">');
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
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
IC
"Richard Cornford" <Ri*****@litotes.demon.co.uk> wrote in message news:<bd*******************@news.demon.co.uk>...
"IC" <ip*******@yahoo.com> wrote in message
news:c0**************************@posting.google.c om...
<snip>
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.


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||maxHeigh t;
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.

Thanks for your help!!!!

-Ian
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.