fb.getViewport() - not working?

Page: 1

Author Post
Member
Registered: Dec 2009
Posts: 39
I have a site running Floatbox 6.1.0 - it uses some of the API functions to do some scaling operations.

I upgraded to 7.3.0 and have a problem in that fb.getViewport() doesn't seem to work as before! Chrome Console gives me this message when I run my simple test page (which uses the example from the API docs).

Quote
test_floatbox.php:13 Uncaught TypeError: fb.getViewport is not a function

My test page:-

<!DOCTYPE html>
<html lang="en">
<head>
<title>Viewport Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="/includes/floatbox_730/floatbox.css">
<script type="text/javascript" src="/includes/floatbox_730/floatbox.js"></script>

<script type="text/javascript">

function ap_viewport() {
var viewport = fb.getViewport();
alert(&#039;browser window is &#039; + viewport.width + &#039;x&#039; + viewport.height + &#039;px&#039;);
}
</script>
</head>
<body onload="ap_viewport()">
<h3>Floatbox Viewport Test</h3>
</body>
</html>

Running the same test with 6.1.0 performs as it should. Am I doing something wrong, or has something got lost in translation?
Administrator
Registered: Aug 2008
Posts: 3382
fb.getViewport() is alive and well. There must be something amiss in your setup.

Link me into the page and I'll quickly find the problem. Or play around in the developer console looking for clues. The first thing I would do is just type fb<return> into the console and expand the object to see if it looks right. You could do that on this page first to see what the healthy fb object looks like first.
Member
Registered: Dec 2009
Posts: 39
Thanks - I'm probably doing something incredibly stupid, but I can't seem to sort it myself. I've double checked everything. Re-downloaded floatbox, checked all syntax, tested in various browsers etc. etc., on PC, laptop and mobile. I get the same results on my local wampserver and my real world server. I've followed your suggestion and expanded the fb object, but all looks good to my untrained eye.

All I'm trying to do, at this point, is use fb.getViewport to display an alert with the viewport width and height. It works with 6.1.0, but not 7.3.0. I use fb.getViewport on my live site running 6.1.0 without any problems.

It should be so simple, but I can't get it working, so please could you have a look at these two pages and tell me what you find?

Working 610

http://tinyurl.com/jp4yqk4

Not working 730

http://tinyurl.com/hmamz82
Administrator
Registered: Aug 2008
Posts: 3382
Ah-hah!
It's being called before the document and, more importantly, before Floatbox is loaded and ready.

floatbox.js is primarily a boot-loader and initializer, with the bulk of Floatbox's functionality (and a lot of the API) coming from core_.js, which is lazy-loaded after the document is complete and ready.

Bottom line, script actions that use the document or the Floatbox API should be wrapped in an fb.ready() call which will wait until everything is ready (hence the name) before running the code.

To take your example as an example:
<script>
function apViewport () {
var viewport = fb.getViewport();
alert( &#039;browser window is &#039; + viewport.width + &#039;x&#039; + viewport.height + &#039;px&#039; );
}
fb.ready( apViewport );
</script>

or, more directly...
<script>
fb.ready( function () {
var viewport = fb.getViewport();
alert( &#039;browser window is &#039; + viewport.width + &#039;x&#039; + viewport.height + &#039;px&#039; );
} );
</script>
Member
Registered: Dec 2009
Posts: 39
Of course!! If it hadn't been for the fact that 6.1.0 had been working for some time, I might have delved deeper and re-read all the API docs - I might even have found the solution, especially as I use jQuery's $(document).ready() to prevent similar issues with jQuery.

Enough excuses - many thanks for your usual excellent, super fast, weekend support.

Page: 1