Slide Out Floatbox

Page: 1

Author Post
Member
Registered: Jan 2012
Posts: 98
I am working on a new site and would like to use a slide out panel for the user interface, a bit like on Google Maps. Is it possible to configure Floatbox to work like that?

I've got part way but I'm stuck on a few things:

I can fix the floatbox to the side and top of the viewport, and set the width I want, but the height doesn't fill the viewport even using minBoxHeight of 100% or max. It always leaves about 30 or 40 pixels of space at the bottom.

For this application I need the animation to work horizontally but not vertically. So far I've only found a way of turning it on or off.

Although I haven't done it yet, I think I can set startAt to a 1 pixel big id to force the animation to start from the left edge of the viewport. Right?

I've fiddled around with all sorts of jQuery scripts before realising that Floatbox might be the answer. If it is, it will open up all sorts of possibilities.
Administrator
Registered: Aug 2008
Posts: 3382
I like this idea.
And yes, all the pieces are there in the Floatbox library to build this without too much muss or fuss.

Let me implement a version of a slider panel on the Floatbox demo page, which you can then pillage as you wish. Should be ready within 24 hours.
Member
Registered: Jan 2012
Posts: 98
That's brilliant. I'll look forward to that, and meanwhile I'll carry on with some other parts of the job.

One other minor thing that may be needed. Shadows are currently either "right and bottom" or "4 sides". A slideout would need the shadow only on one side.
Administrator
Registered: Aug 2008
Posts: 3382
Not correct Grasshopper.

3 of the sides are butted up against the browser viewport edge, and the shadows on those sides are rendered off-screen. Only the right-side shadow is in the visible screen area.

However, if you didn't want your slider to be full height, then yes, you would need to turn off the Floatbox shadows and attach your own on one side - easy to do.
Member
Registered: Jan 2012
Posts: 98
"Grasshopper"?

Fair point: the shadows will be hidden.

Any progress on the demo? I quite fancy a bit of pillaging!
Administrator
Registered: Aug 2008
Posts: 3382
Thanks for your patience Grasshopper.

This was a helpful project for me to take on. Building a slider revealed a few anomalies and shortcomings in various sizing and positioning routines. I'm just a few days out from releasing version 7.1.0 and this project came just in time for me to get the needed improvements into that release.

This site is now running on the new release, and the slider example can be found on the "Hi-Tech" tab of the demo page. It uses some of the new goodness of the v7 API, so can't be implemented with previous floatbox versions.

I'm guessing 3 days before v7 is available for download. It's pretty much code ready and I'm now grinding through getting the documentation updated. If you're in a panic to get working with this and can't wait, send me a message through the contact page and I'll slip you an undocumented pre-release.

Have fun...
Member
Registered: Jan 2012
Posts: 98
That looks like just the ticket.

I can wait for the official release of v7. There are plenty of other parts of the project to be getting on with in the meantime.

Thanks.
Member
Registered: Jan 2012
Posts: 98
I've just downloaded V7 and started trying to get the slider working. To start off with, I'm using slider.js and fbOptions.js exactly as is, apart from changing the content and width of the slider. What I'm looking for is rather simpler than your example though, and I can't see how to simplify it.

My test page is http://www.littlehotels.co.uk/myfamilyroots/index.php.

In essence, I would like to open the index page with the slider already hidden off the left side of the screen, and not have the animation go flying from right to left when the a href is clicked. Iwould then slideIn the slider with either the little inIcon or a link on the index page (or perhaps both).

No doubt it's simple, but I can't see it. In fact, I can't see the fly-in-from-the-right animation at all in the code.
Administrator
Registered: Aug 2008
Posts: 3382
Yes, agreed, you would not want a slider dashing about the screen on a production instance. My demo slider does that to draw attention to itself, because it's being demo'd.

Floatbox does not include a drop-and-go slider module. The demo slider is intended as an example of how Floatbox and its API can be used to build custom doohickys. Sorry if I misled folks into thinking the demo example would be ready to go, as is, on all production sites.

The demo slider code is fairly short and sweet. Before building your own slider, it's probably a good idea to understand what each line is doing so you understand how to get it to do something different.

For example:
The floatbox instance used as the slider is started with the fb.start call. We see from the API docs that the second parameter to fb.start is the options to be applied to the started floatbox. And we can see in those options boxLeft: '100%'. From the Options Reference, we know that this sets the left side of the slider box at 100% of the screen width, hence off the right side of the screen.

Similarly for other options:
maxContentWidth: '40%' to make sure the slider doesn't take over too much of the screen on small devices.
boxScroll: false to set fixed positioning and lock the floatbox to its screen position while the page is free to scroll around without moving the slider.

And so on for the other options. It's a learning example, and it's worth reading, and understanding the reason for, each entry and what it does.

One thing those start options do is hook a function up to the afterItemStart callback, called 'init' in this case. The init function is short and sweet too, and simply creates and attaches the little tab-button to the side of the slider box. Again, it's not intended to be the tab you want on your production slider, but is just an example of how a tab could be built. You might want a taller one with vertical text on it, or perhaps a jazzy little image, or...

The init function's tab building basically just creates the elements needed, styles them, and attaches them to the main floatbox div. It also adds a 'mousedown' handler so that click or touching it does something.

And finally at the bottom of init we see a call to slideOut()

What does slideOut do? Looking at that function, we can see that it calls Floatbox's resize() function to do an animated move of the box from wherever it is to off the left side of the screen with 5 pixels left showing. Remembering that boxLeft put the initial slider location off the right side of the screen, it would then be this slideOut call in init that moves it from the starting position over to the left side.

What slideIn and toggleSlider do should be obvious from their short bits of code, if not from their names.


A couple of housekeeping issues, and apologies in advance for any inconvenience caused by them...

Make sure you're using the updated slider.js as your starting point. Your browser cache may be showing you the original, slightly flawed version that was up before the official new Floatbox version was posted. Bypass your browser cache by fetching the good one here: slider.js

Also, (and more of a pain) is that the original build of Floatbox 7.1.1 that went up on April 18th was modified slightly and replaced the next day. The only change was a fix to a timing problem when the resize() function was called from afterBoxStart or afterItemStart - exactly what the slider example does (but yours probably won't). Basically, the Floatbox code was confused about what life-cycle phase the floatbox was in under those circumstances - was it starting or resizing?

You can determine which build you've got by running fb.key() from the developer console of any browser, or typing javascript:fb.key() into the address bar of any browser except Firefox, or by looking at the date at the top of the comments in floatbox.js.
Member
Registered: Jan 2012
Posts: 98
That clarifies a lot. Essentially I was able to solve most of my issues just by changing to boxLeft: '-100%' so the starting position is on the left of the screen. Then slideOut() in the init function animates the slider off the side of the screen.

My remaining problem is that I would like to start the floatbox off-screen and slide it onto the screen. If I could get the start position right, I could change slideOut() to slideIn(). However both boxLeft and boxLeftAdjust won't allow the floatbox to go off-screen.
Administrator
Registered: Aug 2008
Posts: 3382
Indeed!

I completely forgot that you can't open a floatbox offscreen. It's been a fundamental design principle right from the start that a floatbox would only be created if it's content was intended to be seen, and hence that last thing that occurs in setting up the opening position - after all the various size and positioning calculations and options have been applied - is to move the box, if necessary, into the viewable screen area.

I built an update to slider.js which sets the opening width or height quite small and resizes that along with the 'left' position - giving a very similar effect to sliding into the screen.

It's got two modes, settable in the startOpen variable at the top of the script.
If startOpen is false, the height starts at 1px, the width at 5px, and the starting animation expands the small strip vertically down the left edge of the screen.
If startOpen is true, it starts life at full height, width at 1px, and then expands out horizontally to the fully open position.

Because we set a width other than the real one, we now have to add the width value to the resize() function's parameters to force it out to what we really want.

There's a few other minor changes in the code, but nothing that changes its fundamental strategy or structure.
Member
Registered: Jan 2012
Posts: 98
Great stuff, Admin. I've got that working nicely now using startOpen = true.

To anyone else who comes along here interested in a slider, my test page (see post #8) will have my latest working version for a little while yet. Eventually it will disappear though.

Obviously I've made a few small tweaks to suit my application but slider.js remains largely faithful to post #11. In order to make it look as much like Google Maps as possible, I've tried to put a drop shadow and a tooltip on the button ('btn') but no success with either so far.
Administrator
Registered: Aug 2008
Posts: 3382
Google's got
box-shadow: 0px 1px 4px rgba(0,0,0,0.3);
on their button's style.

If you want to put that in fb.setStyle's object parameter, you have to use boxShadow, otherwise you're using an arithmetic operator where a property label should be.
« Last edit by admin on Thu Apr 21, 2016 4:44 pm. »
Member
Registered: Jan 2012
Posts: 98
I've got that shadow sorted now. I was putting in a floatbox shadowType instead of a CSS boxShadow.

I've still got nowhere with a tooltip. Putting a class:fbTooltip in the slider.resize so I thought I would just rely on the standard HTML display of a title. But putting title:'This is a title', in the fb.setStyle doesn't work either.
Administrator
Registered: Aug 2008
Posts: 3382
If attaching a tooltip, I would think you would want that on the little clicker button, not the entire slider block. You would put a 'fbTooltip' class and a 'data-fb-tooltip' attribute describing the tooltip onto the button element. The Floatbox API library functions can help accomplish this, or any other library you are familiar with and prefer to use (e.g., jQuery), or, of course, native javascript.

Maybe I'll include a tooltip in the demo page's example at the next Floatbox update. But let me reiterate, the slider example on the demo page is not intended to be a supported, universal, production-ready slider and is not part of what you get with the Floatbox software. It's just a demonstration example of customization and API usage. For a drop-in, ready-to-go, no-design-and-code-needed, supported slider, one is probably better off looking for a 3rd party package that offers that.

Also, I think browsers show the 'title' (or 'alt') attributes as system tooltips only for images.
Member
Registered: Jan 2012
Posts: 98
That's great. As a javascript virgin the letters API generally scare the bejeesus out of me, but I dug deeper into the API reference and managed to get it all working with the assistance of fb.addClass and fb.attr in the slider.js file.

Page: 1