StickyPanel Particle - Freebie by MrT
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Several members have asked me if it's possible to add a fixed position panel to their Gantry 5 templates. Often this requirement is borne of a desire to have a login or contact forum on the page but not have it use up valuable screen real estate. So, I've come up with this new particle that I've called "StickyPanel".
The "StickyPanel" particle allows you to add a tab in a fixed position of your page and when you click on the tab a panel slides out to show your content. The tab and panel can be attached to the left, right, top, or bottom of your page and placed wherever you need it. Furthermore, the content can be sourced from the particle itself or (if you're using the Joomla CMS) a Joomla Module. The particle can be used in Joomla, Wordpress or GRAV.
Even more exciting is that you can use many of these particle all on the same page, so if you really wanted to go crazy you could have a whole load of these tabs on the side, top, or bottom of your page each opening different content.
This is what it looks like:
This image is hidden for guests.
Please log in or register to see it.
Ok, hopefully I have you attention now so let's get the particle installed (Joomla only - look for the equivalent locations in GRAV or Wordpress here ).
1. From the ZIP file copy stickypanel.yaml and stickypanel.html.twig to /templates/TEMPLATENAME/custom/particles (note you may need to create this folder).
2. From the ZIP file copy _stickypanel.scss to /templates/TEMPLATENAME/custom/scss (note you may need to create this folder).
3. Open your existing custom.scss file (or add one to /templates/TEMPLATENAME/custom/scss) and at the top add this line:@import "stickypanel";
So, now we're ready to actually use the particle.
4. Drag and drop the stickypanel particle on to the layout of your outline and click on the settings cog in the particle. Complete the settings (they should all be self explanatory):
This image is hidden for guests.
Please log in or register to see it.
This should also help with understanding what the fields mean:
This image is hidden for guests.
Please log in or register to see it.
Tips:
1. Pay attention to the field tooltips for settings and the info panels - there's good advice therein.
2. Don't go too crazy! You could end up with lots of panels overlapping if you're not careful.
3. You might want to hide a stickypanel in mobile view as the viewport often gets too small to show panel content well - just add "hidden-phone" class to the "block" tab of the particle settings to hide the panel in mobile view.
4. Do test in all viewport sizes.
I hope you find this particle useful.
Any questions or suggestions please ask.
Regards, Mark. - Last Edit: 1 year 6 months ago by MrT.
-
The following users have thanked you: Joombler, Henning, Ed Williams, Reggie Simmons, Ron Miller, Zbigniew Sokal, Bigfly
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Ron Miller
- Sr. Rocketeer
- Posts: 153
- Thanks: 1
-
Hi Mark,
This is extremely handy! Finally found a use for this one... as an index for a glossary !
I was able to make this as a module, and then use the same module on two separate pages.
Suggested feature request...
A check box for "opened on load" or "closed on load." Is this possible?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
It's a freebie from me - so go ahead and change anything you want to add more features. I won't be changing this any further I'm afraid.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- c.gm
- Jr. Rocketeer
- Posts: 47
- Thanks: 4
-
Hi Mark,
got this particle up and running when I was still on Joomla 3. Now that I'm on J4 it stopped working. Anything I'm missing? Site is www.gymnasium-meschede.de (koleti template), you can see the green sticky panel on the right saying "Logineo" won't open.
Regards,
Chris
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Honestly, I've no idea as I#ve not tested it on J4 yet myself. You're getting a JS error in the browser console and you do seem to have a lot of third -party products installed - so there may be a clash with one of those (try disabling them). Otherwise - I'l get around to testing this in the next few days - but not today I'm afraid.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- c.gm
- Jr. Rocketeer
- Posts: 47
- Thanks: 4
-
Took me some fiddling, but I think I've solved it. Tracked down the JS error to the sticky panel and in stickypanel.html.twig I replaced
jQuery(window).load(function()
by this:
jQuery(window).on('load', function()
(not because I'm so clever, but google came up with this...)
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Thank you for that - that's very helpful. It would appear that Joomla 4/Gantry 5.5.7 uses a more modern version of jQuery and the load function has been deprecated in that version in favour of on("load".... so I will get that changed as soon as time permits.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Ok so doing a lot more testing that is not the best solution as it's unreliable... the better solution is to use this instead:
jQuery(document).ready(
Regards, Mark. -
The following users have thanked you: c.gm
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.051 seconds