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.

Search recipes for this entry:

  • how to auto click ads in oxwall
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

»

Awale, Backgammon and 1 other Game Technology has transformed

From time memorial, man has indulged himself into seeking ...

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

Playstation Plus
»

SONY announces increase in PS+ Pricing. How will this affect the service?

credit: arstechnica.com Just when many PS+ members already felt let ...

»

Plan your Week Ahead: 7 Must Have Android Applications for the Week

Happy Sunday to all EWT readers! This is the 7th month of the ...

MTN Tariff Plans
»

MTN Tariff Plans – Latest Compilation of MTN Tariff Plans and Activation Code

Life with MTN can be a bit tricky. One day you get a notification to ...

»

Airtel Data Plans and Subscription Codes – Android, BlackBerry and Mega Data Bundle with SmartSPEEDOO

Compilation of the latest Airtel data plans for PC, Android, iOS, ...

MTN Tariff Plans
»

MTN Data Plans and Subscription Codes – Complete List with Text and USSD

Compilation of the latest MTN data plans for PC, Android, iOS, iPhone ...

»

Glo Data Plans and Subscription Codes – Full List for Monthly, Weekly, Daily & Campus Data Plans

Compilation of the latest Glo data plans for PC, Android, iOS, ...

Comments

Leave a Reply