473,327 Members | 1,930 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

DHTML: DIV HEIGHT

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
1 12054
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Moi | last post by:
Hi i try to make simple DHTML menu but i have any little problem :-( The problem is..... i hide the body of the menu when mouse is (normaly) out of the body...but.... the event onmouseout is...
2
by: RWD | last post by:
I am trying to figure out how to change the target frame in my hyperlink on a DHTML menu. The menu is in one frame and the target frame is called "main" The code is below: Thanks in advance...
5
by: gimme_this_gimme_that | last post by:
I'd like to create my own version of google suggest GS. If you haven't seen GS check it out at : http://www.google.com/webhp?complete=1&hl=en I've reviewed several AJAX write-ups on the...
2
by: kae | last post by:
Hi there, this may not be an advanced problem but to me it is i got a great looking slide show script from this site (http://www.dhteumeuleu.com) but am having a lot of trouble adapting it to my...
3
by: aspmonger | last post by:
Hello, I really believe that IE 6 has a new (intentional?) bug that severely limits the capability of dhtml and cross domain scripting. Yesterday, I read an interesting article about the subject and...
0
by: Tarik Monem | last post by:
I have been working on an all AJAX/DOM web site which is set to go live today and I thought I'd share my discoveries with all of you whom have helped me when I have encountered different issues along...
9
by: ninhovid | last post by:
Hi... i'm new at dhtml, and i want to use it in help windows (instead of window.open() of javascript)... i'm done it... but it works only in internet explorer.. in firefox 2 and 3 it opens the...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.