Last updated on May 5th, 2018 at 09:41 pm

You know that cute box that pops up when you are cropping a new avatar or trying to upload a couple of pictures on Oxwall? That’s called the floatbox. It can also be used to display a nice little message or warning for your users when they visit your website.

Today, I’m going to show you exactly how to make your own floatbox – someone actually asked about this on the Oxwall forum – I figured it will be helpful to a lot of Oxwall users.

For this tutorial, we will be taking the dashboard page as an example – later in the tutorial, I will show you how to use it basically anywhere or even sitewide.

Oxwall geek, Get your code editor ready…

Download and edit ow_system_plugins/base/controllers/component_panel.php Basically, this is the file that stores all the chunk of codes used in your index, profile, my-profile and dashboard pages. Since we are working on dashboard, let’s quickly look through line 159 of that file.

	$script = "
		$(document).ready(function(){
			window.fooFloatBox = new OW_FloatBox({\$title:'Some Floatbox Title here', \$contents: 'Some contents here', width: '550px'});
		});
	";
	OW::getDocument()->addOnloadScript($script);

Add the above php code anywhere within the dashboard function – preferable below the following code:

	if ( !OW::getUser()->isAuthenticated() )
	{
		throw new AuthenticateException();
	}

It’s your choice, you can change fooFloatBox to any name you wish to call your newly created floatbox, Some Floatbox Title here of course it’s the title that will display on the floatbox. Incase some aliens just stormed earth, you can include it in place of Some contents here. Make sure to avoid unnecessary spaces and possibly avoid line breaks. If you must use line break, it’s best you use a content ID in place of raw text. If you noticed, 530px is just the width of your floatbox. The height is auto-adjusted. When you are done with the look and feel, save and upload your file and clear your cache.

What just happened?

THAT worked like magic and THIS is what happened. First, we declared a variable called script. Then, we added some fancy JQuery code here and there in the PHP script variable.

	$(document).ready(function(){
		window.fooFloatBox = new OW_FloatBox({\$title:'Some Floatbox Title here', \$contents: 'Some contents here', width: '550px'});
	});

$(document).ready(function() basically execute any action contained in its block. Next, we created a new object of Oxwall floatbox using window.fooFloatBox = new OW_FloatBox and the rest is history.

Finally, we used OW::getDocument()->addOnloadScript($script) to add our JQquery code to the chunks of javascript codes Oxwall should load when your site is visited.

Using Oxwall floatbox outside dashboard page

Unlike many other teachers, I teach my students with a more advanced example. Using PHP is the hard way, it could be a lot more easier with HTML.

	<script type="text/javascript">
		$(document).ready(function(){
			window.fooFloatBox = new OW_FloatBox({\$title:'Some Floatbox Title here', \$contents: 'Some contents here', width: '550px'});
		});
	</script>

The above code, copied into any HTML widget area on any page will do the magic. If for any reason you want to display a message sitewide, you can add the above code here http://yoursite.com/admin/settings/page – Anywhere in the body section will do.

Incase you want more… I got more

You will be eternally disappointed to find out that ‘Some contents here’ (quotes included) can only display a string of text and some fancy little words. What of adding images, some hot gossips with line breaks here and there? Here we go…

In place of Some contents here let’s have $(‘#floatbox_content’). Then put the following code in any HTML output, say your HTML widget:

	<div style="display: none">
		<div id="floatbox_content">
			<div class="ow_center">Some text, images and 'what have you?' here</div>
		</div>
	</div>

Incase you want to display this floatbox only once, you can use the javascript below:

	if(!isset($_COOKIE['visited_already']))
	{
		setcookie('visited_already' , 'true' , time()+60*60*24*7*365);
		
		//If not, popup some contents and mark this user as visited for the next 365 days.
		$(document).ready(function(){
			window.fooFloatBox = new OW_FloatBox({\$title:'Some Floatbox Title here', \$contents: 'Some contents here', width: '550px'});
		});
	}

The code will check if user has visited the page before, if not pop up some contents and mark the user as visited for the next 365 days.