0
Welcome Guest! Login
0 items Join Now

StickyPanel Particle - Freebie by MrT

    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 97921
    • Thanks: 13001
    • Web Designer/Developer

    StickyPanel Particle - Freebie by MrT

    Posted 3 years 6 months ago
    • 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: 4 months 2 weeks 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.
  • Re: StickyPanel Particle - Freebie by MrT

    Posted 2 years 4 months ago
    • 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's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 97921
    • Thanks: 13001
    • Web Designer/Developer

    Re: StickyPanel Particle - Freebie by MrT

    Posted 2 years 4 months ago
    • 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.
    • The following users have thanked you: Joombler, 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.
    • Dave S's Avatar
    • Dave S
    • Sr. Rocketeer
    • Posts: 159
    • Thanks: 1

    Re: StickyPanel Particle - Freebie by MrT

    Posted 6 months 2 weeks ago
    • Great particle! Pretty easy to install if directions followed. Directions are not always understood by those without learning the basics I guess.
    • c.gm's Avatar
    • c.gm
    • Jr. Rocketeer
    • Posts: 43
    • Thanks: 4

    Re: StickyPanel Particle - Freebie by MrT

    Posted 4 months 2 weeks ago
    • 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's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 97921
    • Thanks: 13001
    • Web Designer/Developer

    Re: StickyPanel Particle - Freebie by MrT

    Posted 4 months 2 weeks ago
    • 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's Avatar
    • c.gm
    • Jr. Rocketeer
    • Posts: 43
    • Thanks: 4

    Re: StickyPanel Particle - Freebie by MrT

    Posted 4 months 2 weeks ago
    • Thanks, I'll do that. Been meaning to track down this script error for a couple of weeks now - this gives me new inclination.
    • c.gm's Avatar
    • c.gm
    • Jr. Rocketeer
    • Posts: 43
    • Thanks: 4

    Re: StickyPanel Particle - Freebie by MrT

    Posted 4 months 2 weeks ago
    • 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's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 97921
    • Thanks: 13001
    • Web Designer/Developer

    Re: StickyPanel Particle - Freebie by MrT

    Posted 4 months 2 weeks ago
    • 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's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 97921
    • Thanks: 13001
    • Web Designer/Developer

    Re: StickyPanel Particle - Freebie by MrT

    Posted 4 months 2 weeks ago
    • 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.130 seconds