TinyPortal

Ok now the above was an EXAMPLE so it looks all haphazzard since I threw in the blocks in no specific order - however how you use this script is up to your imagination and creativity.

A live situation where you can see this script working is on my live page Path To Peace (http://path-to-peace.net/forum) where I use it to display the users online in a floating block in the top left hand corner. Also there is a floating shoutbox which is displayed once the user registers/logins

How To Install

Download this file (http://goofy-goobers.com/forum/dragresize.zip)

Upload the contents of the zip file to your server, into your forum root.

Add this code to a PHP block - make sure to turn frames OFF and NO TITLE and NON COLLAPSIBLE (not required but makes it invisible)



include './gobo.php';
echo"

<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>

<div id='dwindow1' class='drsElement'
style='left: 800px; top: 40px; width: 150px; height: 200px;
background: #FDC; text-align: center'>
<div class='drsMoveHandle'><table><tr><td>USERS ONLINE</td><td><img src='closedr.gif' onClick='closeit1()'></td></tr></table></div>";

ssi_whosOnline(); //An example using the SSI Function change to whatever you like

echo"</div>

<div id='dwindow' class='drsElement'
style='left: 160px; top: 250px; width: 730px; height: 90px;
background: #6b92b2; text-align: center'>
<div class='drsMoveHandle'><table><tr><td>RECENT TOPICS</td><td><img src='closedr.gif' onClick='closeit2()'></td></tr></table></div>";

ssi_recentTopics(); //An example using the SSI Function change to whatever you like

echo"</div>";



Select the settings for it (i.e. which pages you want this block to be visible - thus ensuring that those floating blocks only appear on those pages)

Some things to know

All aspects of this script are editable via the code you add to the block. Here is a small explanation:

There are 3 Divs in the code above as you may have noticed, each defines what content is to appear in each block. Eventhough in the code I have placed the 3 DIV tags one after the other BUT you can place them in completely different blocks! All blocks however must be PHP and use the echo"   code here"; statement to put the code. That way you can actually disable the block for certain pages, and enable it for others! The structure and explanation is below:

Structure

Quote

<div class='drsElement'
style='left: 160px; top: 250px; width: 730px; height: 90px;
background: #6b92b2; text-align: center'>
<div class='drsMoveHandle'>Recent Topics</div>";

ssi_recentTopics(); //An example using the SSI Function change to whatever you like

echo"</div>

drsElement - This can actually be found in the PHP file, it is part of a CSS code which defines the box style (border, etc), u can change it to what you want.

160px; - This definex the X (left or right) co-ordinates for the block, determines its position, play around with it to fix on to your site

top: 250px; - This definex the Y (up or down) co-ordinates for the block, determines its position, play around with it to fix on to your site

width: 730px; - the width of the box

height: 90px; - the height of the box

background: #6b92b2; - color of the box

text-align: center - text alignment in the box

drsMoveHandle - This can actually be found in the PHP file, it is part of a CSS code which defines the header style, u can change it to what you want.

After this appears your Title like so:
<div class='drsMoveHandle'>TITLE HERE</div>

After this DIV the content appears - add whatever you want, SSI functions, PHP, tables, html, pictures, naked pictures, pictures f you wearing ur underwear on your head - whatever rocks your boat!

Thats all folks!

Credits
This script is not my work - I just made it useable with TP and reduced the code size by placing it in a PHP file - full credits go to the Author who was unfortunately lost at sea mysteriously, as he was sinking he found a bottle in his pocket and he wrote down the script and set it afloat in the bottle along with his life story, and while I was at the beach I found it so here it is! - HONEST

Authors Homepage (http://www.twinhelix.com/javascript/dragresize/)

have to say i dont like it , i may be and look impressive but it crowds up the screen. Im running 1140 X 900 pixels and it was really annoying to have to move them when i wanted to look around the forum.....


Btw why couldnt you have just posted the code instead of just posting a topic with a preview :P

That's inventive  :D

I thought they were kind of irritating  :-\

lol u can turn them on and off using the normal block settings thats whats cool about them :D

fully customizable (size, location, colors)

and also :D they can display any SSI function or custom code!

Very easy to edit too - all u do is add the code you want displayed - like in a normal block! :D

and ofcourse if you position them correctly - then viola! u got it made.
in my demo i just placed them 'wherever' - so it may look messy ;)

Quote
Btw why couldnt you have just posted the code instead of just posting a topic with a preview Tongue

i'm tidying it up - as it is right now its a BIG chunk of code - so im gona try and make a seperate file which can be called from the server and try and make it smaller if possible :D

Post updated - to include instructions and download :D Enjoy!

Very cool  ;) but not very useful  :o

Quote from: knat on September 23, 2006, 06:10:38 PM
Very cool  ;) but not very useful  :o

oohh i dont know how u can say that!

Now I can have blocks floating around anywhere on my pages with the latest news right there :D

Next Steps:
Gona try and add more functionality to blocks:
- Collapsible
- Closable DONE!
- Move with page instead of fixed place
- Browser remembers last position block was placed in

It will be a very tough job, cant gurantee ill be able to do it - but hey its worth a shot!

Could the Shoutbox! float too?

yup as long as its PHP it can do it

give me the code for the shoutbox and I will give it a go

ALSO GOOD NEWS!!!

BLocks can now be closed! :D
One down - 3 to go!!!!

I will update the code in post 1 eventually but for now just a short note:

To allow the block to close do this:

To one of the 3 DIVs add an ID tag like so:

<DIV ID='dwindow'

Then where the TITLE of the block is declared - put this bit of code:

TITLE HERE<a href=="closedr.gif" onClick="closeit()">

Then open the PHP file and AFTER line 93 add this:

function closeit(){
document.getElementById('dwindow').style.display='none'

Finally upload this image to your forum root as well (https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fgoofy-goobers.com%2Fforum%2Fclosedr.gif&hash=0f05120855b344576b137b972e68a3f28dd834ca)

And thats it!!! Now when you click the lil X button in the header of your block it will close!

I'm still trying to figure out how to include the function for all 3 divs...
Figured out :D

It's TP_Shoutbox.. code I dunno?

is there a way to call it like a function?

or else i imagine the code wold be pretty huge

Quotelol u can turn them on and off using the normal block settings thats whats cool about them

I turn them off, but as soon as i change page or refresh, they come back, still anoying to me ;)
Also when you move the mouse over the page, you get that "move block" arrow from the mouse, even if your block is set to be fixed in one place, also anoying  :2funny:

Updated 1st Post to reflect the "close window" changes

Also added 1 functionality - now the thingies (tabs, bars whatever) can be FIXED in place, pushing down the TP blocks if required

Quote
I turn them off, but as soon as i change page or refresh, they come back, still anoying to me

You mean u specified in block settings which page to show the block on? Like "show this on forum" etc etc?

I just checked that setting out and it works - when u create block or edit it...just use the drop down boxes at bottom to specify which page to show block on...thats all :D

I'll have to check on that

Quote
Also when you move the mouse over the page, you get that "move block" arrow from the mouse, even if your block is set to be fixed in one place, also anoying

Only when mouse is on top of block though....thats part of the script to change the 'cursor' ill have to study it deeper to be able to try and fix that one

PS: this still needs much work - but still its pretty amazing :D (i think)

QuoteYou mean u specified in block settings which page to show the block on? Like "show this on forum" etc etc? And still its coming?

Yes :)   They pop up even if they are closed when i change page or just make a refresh

QuoteOnly when mouse is on top of block though

Yes, over the blocks :)

G6 woo hoo just discovered something even cooler!!!!!

u can SEPERATE all the divs into seperate blocks!

as long as the gobo.php is called in one of the blocks (placed at the top)

all the other divs placed inside any other blocks (PHP blocks) will still work!!

So that way you can ONLY call each block for a specific page!!!!

yippee

check out my homepage: NO mp3 player
Check out forum: mp3 player (in a non colosable block)

It also suports flash!

I think this thing has a lot of potential

But seriously my knowledge with using DIVs is very limited but if i know better u can: Collapse them, make them transparent and many other cool stuff!!
So on to studying DIVs :D

I will have to try that :)

added transparency

The trick is simple

you need to take off the background color from the DIV

and replace with:

background-image:url(urimage.gif); background-repeat:repeat;

so the transparent image repeats itself in the div and sets as the transparent BG - ive set 2 on the demo page

hey crip I got the Shoutbox to float too - u were askin about it before...

its simple!

just call the shoutbox function in the divs

TPortal_shoutbox();

theres a demo on the goofy goobers (GG) page

nice work... something to play with for sure.

Amazing..there is a lot of code now that can do impressive stuff. Not sure I see the benefits though, since user-block-positions aren't in TP currently. If they were, then positions could be saved.

I don't like it either. Sorry, but looks cool from a distance.

good learning though. Thats the thing the willingness to try new ideas helps to teach us better ways to do things.

Like my games Ive learned so much sense i first coded them that I can't help but picture a complete rewrite now that i understand what spagetti code really is lol.

Keep it up m8 you will learn a great deal this way.

I'm still gona try and see if position info can be saved using cookies, it could be possible - as soon as I get an idea about cookies ill know lol

I still think this is a good way to have 'tool tips' on certain pages for users - or reminders or even displaying adverts in google adsense! lol (now thats annoying advertising :2funny:

This could really work for adds and whatnot.  I have no need for it on my site right now.  We get donations.  But this would be very usefull for some crafty coders.  Nice one.

Could us it as a pop up for a PM alert as ive seen something similar on an Invision Power Board.  :)

smf already opens a pop-up for a PM... just set it in your profile!

can you set it global for all members though?

the pms or the blocks?

pop ups alerts telling you that you have a pm I havent seen that im smf not the actual pm just a popup alert.

openPopUps also bypasseses pop-up blockers, so here's an alternative! :D

plus it makes a very handy Navigation menu bar

have a look: http://path-to-peace.net/forum

Hi, would it be possible
- to create a block with an google ad or ebay ad in it
- to make it unmovable
- to make it closable only after the user clicked the ad

???

- to create a block with a google ad or ebay ad in it:

simply put the code for it between the DIV tags, the complete code would be:



include './gobo.php';
echo"
<div id='dwindow' class='drsElement'
style='left: 160px; top: 250px; width: 730px; height: 90px;
background: #6b92b2; text-align: center'>
<div class='drsMoveHandle'><table><tr><td>RECENT TOPICS</td><td><img src='closedr.gif' onClick='closeit2()'></td></tr></table></div>";

CODE FOR GOOGLE AD GOES HERE

echo"</div>";



- To make it unmovable:

In the code you have a class called drsElement change it to class='drsElement1' and the code will fix the advert. Just make sure this is a center block when fixing it - because if its in a side block then the ad will go off the screen (since it will fix it to the side block)

- to make it closable only after the user clicked the ad

yes thats possible too - in the code above you will have to remove the onClick='closeit2()' function and add that function to the advert. That way when the person clicks the advert, it should close the window as well as count a click on the advert

I dont use google adsense myself but I have come across the code and if I remember it gives a link with ur ID or something in it
so the link would become like <a href='your reffer link here' onClick='closeit2()'>

Just make sure of one thing: REPLACE ALL " with '
this is important because the echo code for PHP is using " and if it appears inside the code it will read it as a closing statement.

If you need help just lemme know and ill try the different stuff out for u ;)

mmmh, I use ebay ads, but the code is Iframe or java script

can i use that code too?

the code is like

Quote<script type="text/javascript">document.write('<scr'+'ipt src="http://banners.webmasterplan.com/view.asp?site=xxxx&ref=xxxxxx&type=text&tnb=32&showJS=1&template=1311&textcolor=CCCCCC&titlecolor=CCCCCC&bordercolor=000000&bgcolor=333333&refurl='+escape(document.location.href)+'"></scr'+'ipt>'); </script>

where do i have to put the onClick='closeit2()'  ?

thanks

javascript may or may not work with the "closeit" function but worth a try:


include './gobo.php';
echo"
<div id='dwindow' class='drsElement'
style='left: 160px; top: 250px; width: 730px; height: 90px;
background: #6b92b2; text-align: center'>
<div class='drsMoveHandle'><table><tr><td>RECENT TOPICS</td><td><img src='closedr.gif' onClick='closeit2()'></td></tr></table></div>


<script type='text/javascript'>document.write('<scr'+'ipt src='http://banners.webmasterplan.com/view.asp?site=xxxx&ref=xxxxxx&type=text&tnb=32&showJS=1&template=1311&textcolor=CCCCCC&titlecolor=CCCCCC&bordercolor=000000&bgcolor=333333&refurl='+escape(document.location.href)+'' onClick='closeit2()'></scr'+'ipt>'); </script>

</div>";



Try that if it works - if it dosent remove the onclick stuff
Javascript should work just fine as long as the variables used in the 2 scripts dont start to clash

mmmh, I created a new php center block with -no title-

but after I paste the code and activate the block, I only see a blue empty block with the title Recent topics.
Nothing in it, and the block is resizable, and movable

what exactly is your javascript code?

because this:



<script type="text/javascript">document.write('<scr'+'ipt src="http://banners.webmasterplan.com/view.asp?site=xxxx&ref=xxxxxx&type=text&tnb=32&showJS=1&template=1311&textcolor=CCCCCC&titlecolor=CCCCCC&bordercolor=000000&bgcolor=333333&refurl='+escape(document.location.href)+'"></scr'+'ipt>'); </script>



is producing no results even on its own: http://goofy-goobers.com (look at the xDeathList5x JS Block on the main page

thats because i deleted my affiliate account parameters

use this one:

Quote
<!-- BEGIN PARTNER PROGRAM - DO NOT CHANGE THE PARAMETERS OF THE HYPERLINK -->
<script type="text/javascript">document.write('<scr'+'ipt src="http://banners.webmasterplan.com/view.asp?site=1382&ref=298638&type=text&tnb=32&showJS=1&template=1311&textcolor=666666&titlecolor=660000&bordercolor=000000&bgcolor=000000&refurl='+escape(document.location.href)+'"></scr'+'ipt>'); </script>
<!-- END PARTNER PROGRAM -->

oh ok lemme give it a go and ill try and make it work in a floating block

see u soon - keep ur fingers crossed that it works 

hehe okay

i shuld say that its a scyscraper format: means that it should be a 120x600 block

thanks akulion

ok this wont work because of a clash between ' and "

how so?

notice in your javascript code it uses both " and ' now the problem arises that if I replace the " with ' the code stops working and same if i replace the ' with "

And this poses an error for PHP since we can either use:
echo " (in this case you cannot use " anywhere within the code being echoed out)
OR
echo ' (in which case you cant use ' anywhere)

and since the javascript above is using BOTH ' and " its causing a problem

but dont worry

I am gona try and isolate the script by including it from an external file next to see if it works or use an Iframe to get it to display

hang in there   

phew finally got it working but in a VERY different manner - your users will be able to:
- CLOSE the advert
- MINIMIZE the advert
- MAXIMIZE the advert
- RELAUNCH the advert by clicking on the 'launch advert' link

The advert should be fixed in one spot...to change the spot try switching block places like left right or center

the dragging function was lost unfortunately! so u wont be able to drag the advert around - but no biggie

See the demo on http://goofy-goobers.com/forum

Once done lemme know so I can remove that block and put back the original demo

Instalation:
so now you have to do this:

Put all this code in a block: (create a SCRIPTBOX) not php!



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<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('advert_dsinclude.html',140,620);
</script>

<!--Use below code to load DHTML window via link-->
<span class="lw" onclick="loadwindow('advert_dsinclude.html',140,620,'r');">Launch Advert</a>
</body>



And then upload THIS FILE (http://goofy-goobers.com/forum/advert_dsinclude.html) to your forum root (to download simply save the whole file or right click and "save as"

oh yea i forgot to mention - this script is much better since it will REMEMBER if your user closed the advert or not

so it wont keep poping back up for the same user unless they click "launch advert link"

oohh man where is my mind today!!

u will also need to upload these 4 images to ur forum root along with that file:

(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fgoofy-goobers.com%2Fforum%2Fminus.gif&hash=7bfadbf144424629a07b13ce8adfd830cf9b3e1c)
(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fgoofy-goobers.com%2Fforum%2Fmax.gif&hash=bfcfb2f22af3c5ec793948f69eb512b908aa8dda)
(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fgoofy-goobers.com%2Fforum%2Fclose.gif&hash=3a986ba82b59e68aaec360c1af97fdbb1e9673fa)
(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fgoofy-goobers.com%2Fforum%2Fplus.gif&hash=afa486708ac002aa507bac48f04b525bb99a3093)

or u can use ur own lil images but name them the same as the images above and try and make them about the same size

ok thanks
you can delete it

oki doki

just remember that everytime u wana change the "advert block type" like size wise

go right to the bottom of the code I gave you and change the 2 numbers in each tag:



//Use below code to load DHTML Window as page loads
loadwindow('advert_dsinclude.html',140,620);
</script>

<!--Use below code to load DHTML window via link-->
<span class="lw" onclick="loadwindow('advert_dsinclude.html',140,620,'r');">Launch Advert</a>
</body>



PS: just out of curiosity - ur gona use it or is it too tacky?

mmh, is it possible to let my users only close the ad after they clicked it?

maybe it closes automatically after a click?

if this is possible i will use this script, cause upload videos all the time and spent a lot of time for the upload, my users can help me out gettin a better server

ill try and get some more functions into the script itself

for now this is all i could do

dont worry ill work something out of it sooner or later

ill pm u if i manage ;)

great

I already play with the script haha

looks great

these are not Collapsible at Demo Site , is it updated version of Demo or What?

Quote from: eitbuzz on September 29, 2006, 01:11:23 PM
these are not Collapsible at Demo Site , is it updated version of Demo or What?

oh that was conflictin with the other blocks and so i disabled it

but u can follow instructions in this post:
http://www.tinyportal.net/smf/index.php?topic=8866.msg73915#msg73915

to get it up and running - the file u download...put ur affliate javascript in there :up:

Hi, thanks very much, Akulion.
As I wrote in a pm, I'd like to use these floating blocks not in a forum but for content on my site- something like how http://www.madonna.com displays the content in closeable boxes that were automatically displayed over a background image.
If you could explain how I could code this, I'd really appreciate it.

hi,

The procedure is exactly the same - u will have to download the file provided and put it in the same folder as ur homepage

Then in the file you want to include it in u just have to do 2 things:

1 - the file extension MUST be .php (yourfile.php)

2 - inside the file while normally coding in HTML simply include this bit after the <body> tag


<?
include './gobo.php';
echo"

<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>

<div id='dwindow1' class='drsElement'
style='left: 800px; top: 40px; width: 150px; height: 200px;
background: #FDC; text-align: center'>
<div class='drsMoveHandle'><table><tr><td>USERS ONLINE</td><td><img src='closedr.gif' onClick='closeit1()'></td></tr></table></div>";

ssi_whosOnline(); //An example using the SSI Function change to whatever you like

echo"</div>

<div id='dwindow' class='drsElement'
style='left: 160px; top: 250px; width: 730px; height: 90px;
background: #6b92b2; text-align: center'>
<div class='drsMoveHandle'><table><tr><td>RECENT TOPICS</td><td><img src='closedr.gif' onClick='closeit2()'></td></tr></table></div>";

ssi_recentTopics(); //An example using the SSI Function change to whatever you like

echo"</div>";
?>


so basically all you are doing is putting a <? and ?> at the beginning and end of the code from my 1st post :up: that will allow you to include php on the page itself.

Try it out and let me know if it works :)

ps: dont forget to put ur custom stuff where it says "YOUR CONTENT GOES HERE - YOU CAND HAVE PHP. SSI FUNCTIONS AND HTML" :)

Thanks, but sorry, I'm kinda confused.
First, you download the file provided, and upload it to your root folder.
And then I have to change the page displaying the boxes to .php?
And then, if I want multiple boxes, I just copy this code multiple times? Am I understanding correctly?

What if I want the boxes to display information that I already wrote in another file, like the way an iframe works? And would this code allow the boxes to scroll?

I havent tried this with Iframes so I dont know if that will work - but its worth a try!

but the basic concept is simple:

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


<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

but I think I know what u are asking for - especially since u mention Iframes

For that basically use this code: (its a totally different code so use alone)
>> http://www.tinyportal.net/smf/index.php?topic=8866.msg73915#msg73915

this one is a stand alone script for using with Iframes and includes Close, Maximize and Minimize functions :up:

try it out

additionally copy the code from this page:
http://home.comcast.net/~jscheuer1/side/dhtmlwin_s.htm

its the whole script as a stand alone - it will help u understand it better

since in this topic its pretty messy with all the codes mixed etc

wow! Thank you so so so much!
That's exactly what I'm looking for!
I'm going to go experiment with it :)
Thanks, thanks, thanks!

ur welcome :up:

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

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

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!

oki doki good luck :up:

Hi, I have a couple questions:
1)

Quote from: akulion on October 13, 2006, 02:12:36 AM

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-

<!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!

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 :D

Click here to go to DDrive Post I made (http://www.dynamicdrive.com/forums/showthread.php?t=13406)

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

Thanks :)
I'll check it out

oki doki - sorry couldnt provide u with further help

but ran out of steam lol

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

<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

<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

Put your code in a a block, select use frame from theme and allow block to collapse. Collapsing the block will close the floating window/s... ;)
Love these floating blocks btw. Cheers Aku

wow cool discovery :D nice one :up:

Quote from: DipWit on October 22, 2006, 01:42:14 AM
Put your code in a a block, select use frame from theme and allow block to collapse. Collapsing the block will close the floating window/s... ;)
Love these floating blocks btw. Cheers Aku

Sorry, but I don't quite understand. Would you please explain a little more? Sorry
thanks

he means to use the upshrink ability of blocks

enable title and allow block to collapse in block manager

Please can we see a demo somewhere ?
Many thanks.

I am looking for a simular Adsense solution like this:

http://www.dict.cc/

Could this be put just in a block,
so I could have a fixed left "menu"
where only the Adsense ads are ?
Many thanks.
Regards, Stefan.

Does nobody have a floating block installed on his forum,
so I could have a look at it ?
Please post your URL and the code you are using.
Many thanks again.

Regards, Stefan.

The code is in the first post of this topic. I would advise you to create a test forum, and then install the stuff there before you install on your live forum.

Does nobody use this code somewhere, so I can have a look at it ?
Many thanks in advance.

I did use it, but decided it I had no need for it on my site.

Why don't you just test it and see for yourself? I'm doubt that anybody using this would even be reading your posts. I'm not even sure if anybody is actually using it. While it's a nice idea..