Floating Blocks!!!!

[akulion]

ur welcome :up:

[Sforzando]

sorry, quick question- is that dhtml in the code on that comcast page?
wouldn't dhtml mean this'll only really work in IE?

[akulion]

best to my knowledge DHTML works with nearly all browsers

u can get additional support from dynamicdrive.com as well on DHTML , plus they have 100's of really cool scripts there

[Sforzando]

thanks so much

hmm, I tried some dhtml before, and it didn't work with Opera. But I'll see what I can do. Thanks!

[akulion]

oki doki good luck :up:

[Sforzando]

Hi, I have a couple questions:
1)

for adding more boxes u just make another copy of this code

Code Select Expand


<div id='dwindow' class='drsElement'
style='left: 50px; top: 100px; width: 250px; height: 120px;
background: #CDF; text-align: center'>
<div class='drsMoveHandle'><table><tr><td>TITLE HERE</td><td><img src='closedr.gif' onClick='closeit()'></td></tr></table></div>

YOUR CONTENT GOES HERE - YOU CAND HAVE PHP. SSI FUNCTIONS AND HTML

</div>

and add another number to the id='dwindow' like dwindow2 or 3 etc etc

I've been playing with this, but I'm confused by the fact that in the original code, there's a dwindow and a dwindow1. So when I copy the above code and change it to dwindow2, what do I adjust correspondingly- the dwindow and dwindow2?

2)
I copied/pasted the Comcast code, and replaced the google url with one of my own-

Code Select Expand


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#dwindow {
position:absolute;
background-color:#ebebeb;
left:0px;
top:0px;
display:none;
opacity:0;
}
#dwdrag {
z-index:10;
cursor:pointer;
background-color:navy;
text-align:right;
border-bottom:1px solid black;
}
#dwdrag img {
position:relative;
left:0;
top:0;
z-index:11;
}
#dwholder, #dwholder div {
height:100%;
background-color:transparent;
border-width:0;
cursor:auto;
z-index:0;
}
#dwholder div{
border:2px solid silver;
border-top-width:0;
border-left:1px solid black;
}
.lw {
cursor:pointer;
text-decoration:underline;
color:blue;
}
</style>
<!--[if lte IE 5.5]>
<style type="text/css">
#dwdrag, .lw {
cursor:hand;
}
</style>
<![endif]-->
<!--[if gte IE 5.5]>
<style type="text/css">
#dwindow {
filter:alpha(opacity=1);
}
</style>
<![endif]-->
<script>

//DHTML Window script- Copyright Dynamic Drive (http://www.dynamicdrive.com)
//For full source code, documentation, and terms of usage,
//Visit http://www.dynamicdrive.com/dynamicindex9/dhtmlwindow.htm
//Modified for persistence and to upgrade functionality in
//http://www.dynamicdrive.com/forums username:jscheuer1
//This notice must remain for legal use.

var persist=1;
var dragapproved=false;
var minrestore=0, maxrestore=0, dwloaded=0;
var initialwidth, initialheight, initialtop, initialleft;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

function drag_drop(e){
var dw=document.getElementById("dwindow"), dws=dw.style;
if (typeof e=='undefined'&&dragapproved&&event.button==1){
dws.left=Math.max(0, Math.min(iecompattest().clientWidth-dw.offsetWidth+iecompattest().scrollLeft, tempx+event.clientX-offsetx))+"px";
dws.top=Math.max(0, Math.min(iecompattest().clientHeight-dw.offsetHeight+iecompattest().scrollTop, tempy+event.clientY-offsety))+"px";
if(tempx+event.clientX-offsetx<0||tempy+event.clientY-offsety<0||iecompattest().clientHeight-dw.offsetHeight+iecompattest().scrollTop<tempy+event.clientY-offsety||iecompattest().clientWidth-dw.offsetWidth+iecompattest().scrollLeft<tempx+event.clientX-offsetx)
stopdrag();
}
else if (e&&dragapproved){
dws.left=Math.max(0, Math.min(window.innerWidth-dw.offsetWidth+window.pageXOffset, tempx+e.clientX-offsetx))+"px";
dws.top=Math.max(0, Math.min(window.innerHeight-dw.offsetHeight+window.pageYOffset, tempy+e.clientY-offsety))+"px";
if(window.innerWidth-dw.offsetWidth+window.pageXOffset<tempx+e.clientX-offsetx||window.innerHeight-dw.offsetHeight+window.pageYOffset<tempy+e.clientY-offsety||tempx+e.clientX-offsetx<0||tempy+e.clientY-offsety<0)
stopdrag();
return false;
}
}

function initializedrag(e){
var dw=document.getElementById("dwindow");
if (minrestore)
return;
offsetx=e.clientX;
offsety=e.clientY;
document.getElementById("dwindowcontent").style.display="none"; //extra
tempx=parseInt(dw.style.left);
tempy=parseInt(dw.style.top);

dragapproved=true;
document.onmousemove=function(e){return drag_drop(e);};
return false;
}

function loadwindow(url,width,height,resets){
if (!document.getElementById||!/number/.test(typeof window.pageYOffset+typeof iecompattest().scrollTop))
window.open(url,"","width=width,height=height,scrollbars=1")
else{
var dws=document.getElementById('dwindow').style;
if (resets)
eraseCookie('dwcookie');
if(typeof dwindow!='undefined'&&dwindow.filters&&!readCookie('dwcookie'))
dwindow.style.filter='alpha(opacity=100)';
else if (!readCookie('dwcookie'))
dws.opacity=1;
dws.display='block';
dws.width=initialwidth=width+"px";
dws.height=initialheight=height+"px";
dws.left="30px";
dws.top=typeof window.pageYOffset=='number'? window.pageYOffset*1+30+"px" : iecompattest().scrollTop*1+30+"px"
document.getElementById("cframe").src=url
if(!readCookie('dwcookie')&&!resets){
initialtop=dws.top;
initialleft=dws.left;
maxrestore=1;
minimize();
}
if(dwloaded){
minrestore=0;
setdwcookie();
}
dwloaded=1;
}
}

function maximize(){
var dws=document.getElementById("dwindow").style;
if (minrestore==0){
if (maxrestore)
minimize();
minrestore=1 //maximize window
document.getElementById("dwdrag").style.cursor='default';
initialtop=dws.top;
initialleft=dws.left;
document.getElementById("maxname").setAttribute("src","restore.gif")
dws.height=window.innerHeight? window.innerHeight-20+"px" : iecompattest().clientHeight+"px"
if (window.innerWidth)
var wp=window.innerHeight<iecompattest().offsetHeight? 20 : 0;
dws.width=window.innerWidth? window.innerWidth-wp+"px" : iecompattest().clientWidth+"px"
dws.left=typeof window.pageXOffset=='number'? window.pageXOffset+"px" : iecompattest().scrollLeft+"px"
dws.top=typeof window.pageYOffset=='number'? window.pageYOffset+"px" : iecompattest().scrollTop+"px"
}
else{
minrestore=0; //restore window
document.getElementById("dwdrag").style.cursor='';
document.getElementById("maxname").setAttribute("src","max.gif")
dws.width=initialwidth;
dws.height=initialheight;
dws.top=initialtop;
dws.left=initialleft;
}
setdwcookie();
}

function closeit(){
document.getElementById("dwindow").style.display='';
if(maxrestore)
minimize();
setdwcookie();
}

function stopdrag(){
if (minrestore)
return;
dragapproved=false;
document.onmousemove=null;
document.getElementById("dwindowcontent").style.display=''; //extra
setdwcookie();
}

function minimize(){
if(minrestore){
initialleft=(typeof window.pageXOffset=='number'? window.pageXOffset : iecompattest().scrollLeft)+(window.innerWidth? window.innerWidth : iecompattest().clientWidth)/2-parseInt(initialwidth)/2+'px';
initialtop=(typeof window.pageYOffset=='number'? window.pageYOffset : iecompattest().scrollTop)+"px";
maximize();
}
initialheight=maxrestore? initialheight : document.getElementById("dwindow").style.height;
document.getElementById("dwindow").style.backgroundColor=maxrestore? '#ebebeb' : 'transparent';
document.getElementById("minname").src=maxrestore? 'minus.gif' : 'plus.gif';
document.getElementById('dwholder').style.display=maxrestore? '' : 'none';
document.getElementById("dwindow").style.height=maxrestore? initialheight : 'auto';
maxrestore=maxrestore==0? 1 : 0;
setdwcookie();
}
function cb(){
document.getElementById("dwindow").style.backgroundColor='transparent';
return false;
}
function md(){
return false;
}

function setdwcookie(){
var dws=document.getElementById("dwindow").style;
initialtop=minrestore? initialtop : dws.top;
initialleft=minrestore? initialleft : dws.left;
var dwdisp=dws.display? dws.display : 'none';
createCookie('dwcookie',initialwidth+' '+initialheight+' '+initialleft+' '+initialtop+' '+minrestore+' '+maxrestore+' '+dwdisp, persist)
}

dwonload=function(){
if (readCookie('dwcookie'))
var cv=readCookie('dwcookie').split(' ')
else
return;
var dws=document.getElementById("dwindow").style;
initialleft=cv[2];
initialtop=cv[3]
dws.left=initialleft;
dws.top=initialtop;
if (cv[4]>0){
maximize();
initialwidth=cv[0];
initialheight=cv[1];
initialleft=cv[2];
initialtop=cv[3]
}
else if (cv[5]>0)
minimize();
dws.display=cv[6];
if(typeof dwindow!='undefined'&&dwindow.filters)
dwindow.style.filter='alpha(opacity=100)';
else
document.getElementById('dwindow').style.opacity=1;
dwloaded=1;
}

// http://www.quirksmode.org cookie unit:

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

// End quirksmode.org cookie code

if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", dwonload, false );
else if ( typeof window.attachEvent != "undefined" )
    window.attachEvent( "onload", dwonload );
else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            dwonload();
        };
    }
    else
        window.onload = dwonload;
}
</script>
</head>
<body>
<div id="dwindow" onmouseup="stopdrag();">
<div id="dwdrag" onmousedown="return initializedrag(event);" onmouseup="stopdrag();" onselectstart="return false;"><img src="minus.gif" id="minname" onmousedown="cb();" onclick="minimize();"><img src="max.gif" id="maxname" onmousedown="md();" onclick="maximize();"><img src="close.gif" onmousedown="md();" onclick="closeit();"></div>
<div id="dwholder"><div id="dwindowcontent">
<iframe id="cframe" src="about:blank" width=100% height=100% frameborder="0"></iframe>
</div></div>
</div>

<script>
//Use below code to load DHTML Window as page loads
loadwindow('http://www.radu-sirbu.com/greensitepages/gbioimage.html' ,600,400);
</script>

<!--Use below code to load DHTML window via link-->
<span class="lw" onclick="loadwindow('http://www.radu-sirbu.com/greensitepages/gbioimage.html' ,600,400,'r');">Biography</a>
</body>
</html>


when I close the box and press refresh on the comcast pasge, the box comes up automatically. But for some reason, the problem is, after I replaced google with my own page, the box doesn't automatically come up anymore with refresh. I need to click the link to get it back. 

And how would I make a second block here?


Thanks very much for your help!

[akulion]

ohh i just had a look

this will require an entire function rewrite to include a secondary window!

which means including the entire text of the script over again but this time with the window named as dwindow1, 2 , 3 etc

And to be honest thats way beyond my skills lol

But dont depspair :up:

The best thing for you to do would be go over to dynamic drive (which is the author of this script) and ask on their support forums for help.

I will lead you to a thread I made there from where I originally got this script - so u can check it out and contact the guy who was helpin me there

Click here to go to DDrive Post I made

best of luck - and if u get it workin do share

[Sforzando]

Thanks
I'll check it out

[akulion]

oki doki - sorry couldnt provide u with further help

but ran out of steam lol

[Sforzando]

Well, nobody at Dynamic Drive is answering me, so I've been looking at all the coding sites I could find.
One of them, codebrain.com, does have a floating iframe layer, but it doesn't close. The code is

Code Select Expand


<DIV
STYLE="position:absolute;
       left:150;
       top:50;
       width:300;
       height:200;
       clip:rect(0,324,224,0);"
>
<IFRAME
SRC="http://www.yoursite.com/yourpage.html"
WIDTH="300"
HEIGHT="200"
MARGINWIDTH=0
MARGINHEIGHT=0
FRAMEBORDER="NO"
SCROLLING="YES"
STYLE="border-width:12;
       border-color:#445599;
       border-style:solid;"
>
</IFRAME>
</DIV>


but as I said, it doesn't close and it doesn't drag.
I think at this point I would be satisfied if I could just get it to close. I know about

Code Select Expand


<input type="button" value="Close this window" onclick="self.close()">


but I don't know where it would go. When I put it in that iframe div tag, nothing really happens.

Codebrain also has the code for the draggable, closeable floating blocks, but it's back to square one cuz it only codes for one block per page, and what I need is multiple blocks.

I keep staring at the source code for http://www.madonna.com
That site has multiple, draggable, closeable blocks on each page, and I'm dying to know how they did it. I honestly don't understand their source code, and I think that some things aren't being displayed in it.
If someone could maybe take a look at it, and give an opinion, I'd really, really appreciate it.
Thanks