I’m using PopDrop as a new way of displaying available documents in my next mystery game, but some of my documents are booklets, for which I am using 1LD’s Pagelit stack. However, it doesn’t show up when I put it in PopDrop. Any thoughts as to how I can display this content?
Many stacks that use Javascript to generate their content will need to be “visible” on page load, that is that may not work in things like tabs, light boxes and tooltips that are hidden with the page loads. The reason is usually that they need to know the size of their container element in order to generate the content. If it is not visible then the browser will report a size of zero or an incorrect size and the content will not be generated and sized correctly.
In the non RW world, we would simply trigger a recalculation when the tooltip / tab / lightbox etc opens and has a real size.
With stacks from different developers this is not always possible.
So, to a possible solution. It may well work by using Limelight instead of Popdrop. You can still launch Limelight from your Dossier button (just give it a CSS class of the limelight content unique ID that you set in the settings).
The crucial difference with Limelight is that it has a lazy preload setting. If you turn this on it may mean that the Pagelit calculates its size on page load as normal. This is by no means guaranteed as I don’t have that stack to try it but it will certainly be your best bet for a quick and easy first thing to try.
Thanks, Tav, for the explanation and the possible solution. I will say that this loading hidden content issue has been the bane of my existence in trying to pack a ton of info on a screen, for all my games - it feels like half my design effort is spent devising workarounds.
I was originally planning on using limelight for the dossier, but changed to popdrop, because I like the overlap effect (over the lightbox, or a pushing effect). Since I can display limelight content in other stacks, is there a stack you would recommend that achieve a similar effect? I know mega menu stacks do that. And Blueprint does overlaps, but having just watched the tutorial, I don’t think it can show and hide like I need. I guess whatever container stack I put the content in would need to have lazy loading.
Any suggestions would be appreciated! (PS: I’m building in Foundation 6)
Thanks,
Actually, I just realized that was a stupid question. It’s the LL content contain that lazy loads; not the launching mechanism. So I need to go with lightbox effect for this hidden content, or find a different dropdown stack. Sorry for the confusion!
I’m not quite sure what you are trying to achieve regarding the overlap, I would have throught that Limelight could achieve the same look at PopDrop but without the little caret (pip).
Never the less, there may actually be a couple of things to try with PopDrop as it does have a couple of settings that may act in a similar way to the lazy pre-load feature in Limelight. This is very much a long shot but try experimenting with the Allow Multiple Triggers setting in the main PopDrop stack and / or the This is a nested PopDrop setting in the PopDrop Content child stack.
These settings were added in order to make the PopDrop dropdown menu system work and do keep the content loaded so it may help Pagelit calculate its size. It’s certainly worth a try for the sake of a few clicks.
Just been exploring options, and for anyone following this discussion, here’s a summary:
My requirements are:
Dropdown, triggered by clicking on an image,
Multiple documents in the dropdown, in a slider or tabs, that are navigated by clicking on image tabs
Multiple document types in the different sliders/tabs, including a booklet using the Pagelit stack.
My results so far:
Dropdown
PopDrop doesn’t lazy load, so Pagelit won’t display correctly in a popdrop content area, so it’s out.
Foundation 6 Dropdown displays Pagelit correctly, but can’t be triggered from images (only buttons and text links). My workaround for that is to make the button clear and have no text, and use my fancy button image as a background. Not working perfectly yet, but I can make it work.
Tabs/Sliders
Foundation 6 Tabs don’t display Pagelit correctly, so they are out.
Tabulous, also by JW, does display correctly, but if I navigate from tabs, they can’t have images inside, and if I navigate from images, they can’t have selected/unselected states. Same goes for Limelight, I believe.
So I think whether I use the Foundation 6 dropdown or a Limelight lightbox, I am covered for the top level. For the nested tabs level, I don’t see a way yet to have both an images and a selected state, the way I can with the Foundation 6 tabs, so I may have to choose between the two.
Ideal setup would be if PopDrop had lazy loading.
2nd choice would be to be able to nav Limelight or Tabulous sliders using the Foundation 6 tabs, or some other launcher that allowed use of an image with maybe a background color to indicate active state. I’ll keep investigating different options, as I’m not keep to sacrifice design requirements due to technical constraints! :-)
So close! So Limelight Launcher will dim the image I put in it when active, so image/tabs problem solved! I’ve got Limelight targeting a Sections Pro instance inside the F6 Dropdown. The only problem I am having now is that the first time I select the tab with the Pagelit contents, it isn’t sized correctly. BUT, subsequent clicks have it sized correctly.
@Tav, any idea why the lazy preload doesn’t work on first load?
The first load order of things on the page is somewhat random and outside the control of any individual developer. The Pagelit is obviously loading before Limelight the first time but after that, the LL lazy preload is doing its job.
Limelight has several external triggers built in so that we may be able to add a little code to your page and force it to load / reload as soon as the page is finished loading.
If you want to send me just a small example project and the stack zipped up to the BWD support email, I’ll see what I can do. Please make it as simple as possible with just the absolute minimum parts of the page required. I’ve got F6 so that’s no problem.
