The New Stuff

How to Add Floatbox (Cute PopUp) on Oxwall


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.

ewtnet oxwall floatbox image

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.

The following two tabs change content below.

Ebenezer Obasi

Senior executive editor at EwtNet
A web developer, IT undergrad, terrible entrepreneur, internet freak and a man of a few other incongruous talents, Ebenezer has been writing on technology since 2012, and plans to do so until a few days before his ultimate fate: cryogenic preservation. If resurrected, he is likely to go back to writing on technology.

Recieve Free Email Updates!

Subscribe to get new updates instantly delivered to your inbox. Select the specific category you want to recieve updates on and enter your email address below.


*A confirmation message will be sent to you, login to your e-mail account and click on the confirmation link to start enjoying this service.

Get the latest news on your Android mobile, Download our Android App

Recently Published

»

Darwin Life Aims to Impregnate 40 and Above Women with Designer Babies

Darwin Life is a new fertility clinic that aims to get ...

College Students - Online Jobs
»

16 Online Jobs that will Make You Real Money in College

Are you a college student who is need of extra cash? Not really, you ...

multiple accounts
»

How to Use Multiple WhatsApp and Social Media Accounts on your Android Device

Do you have two accounts for Messaging, tired to log in and out to ...

PayPal
»

PayPal will Fully Accept Nigeria only when their US Allies has Ignored them

After waiting for a little over a decade, PayPal arrived Nigeria in ...

»

Recharge your MTN Airtime Anytime Directly from your Bank Account

MTN On Demand will let you top up your MTN airtime balance anytime ...

MTN DND Image
»

MTN DND: Stop Unwanted SMS from your Network Provider

Stop unnecessary and promotional messages from MTN Nigeria by ...

»

Awale, Backgammon and 1 other Game Technology has transformed

From time memorial, man has indulged himself into seeking out ways to ...

YouTube's demonetization aftermath
»

YouTube’s demonetization finally recognized; popular creators mad

YouTube (the behemoth video website and subsidiary of Google [GOOG]) ...

»

Why Pokemon GO Falls Short

Pokemon GO is a augmented reality mobile game that released (without ...

Comments

Leave a Reply