Floating Blocks!!!!

[akulion]

Ladies & Gentlemen!

Presenting a REVOLUTION in the way Portals work!

Remember you saw it here 1st on TP

Presenting...............



Dum dum dum dum dum (music for effect)

Taaaaannnn taaaaaaann taaaaannnn


TAN TAAAANNNNNNNN

dum dum dum dum dum


RESIZABLE- MOVABLE - CLOSABLE - FLOATING BLOCKS!

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

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)

Code Select Expand



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

<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

[alan s]

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

[RoarinRow]

That's inventive 

[G6Cad]

I thought they were kind of irritating 

[akulion]

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

fully customizable (size, location, colors)

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

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

[akulion]

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

[akulion]

Post updated - to include instructions and download Enjoy!

[knat]

Very cool  but not very useful 

[akulion]

Very cool  but not very useful 

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

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!

[Crip]

Could the Shoutbox! float too?