47 thoughts on “Slide Panel 1.1.0 released”

  1. This is a great plug-in! In my pop out, I have a series of menu links that is longer than some of the pages it is included on. Is there a way to add a scroll bar within the panel?
    Also, is it possible to include php code within the panel so that it can create the menu dynamically?

    • Hi Jeff! Glad you like it 🙂

      Adding a scroll bar is possible, but requires some coding. I’ll take a look at it later, but don’t hold your breath, I’ve got couple of client projects keeping me busy for next few months. Meanwhile, you may want to try to set height of the panel manually in plug-in’s style.css (go to Plugins -> Installed Plugings -> Edit). Just add it inside #mojo-sp-left or #mojo-sp-right definition. E.g. “height:1000px” makes panel 1000 pixels high. If you don’t see the change on your browser right away, that’s because your browser reads style.css from it’s cache. Either delete cache or right click the page -> View page source -> find the MojoPlug style.css -> click to open it -> right click and “reload”.

      Adding PHP is possible, but it’s not built-in and it may not be straight forward. However, you are free to make your own copy of the plug-in and write your PHP as much as you want. It’s open source, after all 😀

    • There’s a way I found: you need to put the contents of the panel into

      tags. Width and height being arbitrary numbers, of course.

      • Hi Angius, what was your solution for this? Looks like your code does not show up in the comments. I have the same issue of needing to be able to scroll.

        • I just found a simple solution, not yet tested in all browsers. In public/css/mojo-sp-public.css change .mojo-sp > .mojosp-widget-area { overflow: hidden; to overflow: scroll; }

          • Thanks, Matt. That’s the most elegant way. Actually that should be the value by default, I think. I’ll check it for the next release….

  3. Hi! Finally I’ve found a nice, simple and really working sliding panel for my contact widgets!

    Just one question: is it possibile to change button icon with a short text like “contact me”?

    I’m not good in php so I’ve took a look at the editor but couldn’t find any solutions!

    • Hi Elena!
      It’s possible to change the button icon to text, and actually the feature is in the backlog. Unfortunately I’m hands full with couple of client projects, so it may take some time to get the next version out.

      However, if you want to experiment yourself, below are couple of tips….

      Sorry that’s all I can do at the moment. I hope you get the plugin working for your site!

    • ** In plugin style.css you can hide the icon: find the “#mojo-sp-left-button span” (or “#mojo-sp-right-button span” for the right panel) and add line “display: none;”. You may need to refresh the page, see what I wrote to Jeff above

    • ** To add your text, you can open the class-mojo-sp-public.php, scroll to end and find “create_panels_html()” function. It contains initial html code for left and right panels. Place the text right below the “span class=”dashicons…” text. You can surround the text with your own tags and define a CSS class, if you need to format the text. E.g. “CLICK. In style.css define .my-class and add any formatting parameters you want. OR if you are lazy, try simply adding CLICK and use any CSS directives inside style.

    • ** Finally, you probably need to make button wider for the text. That’s again found in plugin’s style.css. Find “#mojo-sp-left-button” or “#mojo-sp-right-button” and add “width: 120px;” or whatever works best.

  4. This is the best slide out I’ve found so far that will allow for widgets via shortcode… is there ANY possible way to make it float as you scroll the page on pc & mobile? The whole reason I’m looking for a slide out widget is to keep my search tool readily accessible, especially on mobile devices where responsive layout extends the length of the page creating hassle for the user to scroll up or down to find the widget on the page…. X every page.

    • Hi Tracey!
      Yes, it’s possible to make a panel floating:
      1. Go to Plugins -> Installed Plugings -> Edit
      2. Find style.css at the end of the list and open it
      3. Add this text to the file (use “#mojo-sp-left-wrap” if you have your panel on left side):
      #mojo-sp-right-wrap {
      position: fixed !important;
      }
      4. Press “Update File”

      That’s it. You still need to refresh your browser cache to see the change:
      Right click the page -> View page source -> find the MojoPlug style.css -> click to open it -> right click and “reload”.

      I hope this helped! 😀

      • Thanks! That did the trick.
        1) Is it possible to have 2 slide outs on the same side of the page?
        2) If so, is there a way to have the 2 tabs one right below the other?

        3) What are typical tags that a theme will usually have that the tab can be attached to? I’ve tried [ footer ] but [ body ] is the only tag I’ve found that works and it positions the tab in the top right or top left header as it does on this page of your website… don’t know what tags would exist for me to attach the tab(s) to.

      • Hi,

        Trying to make the button float as above, set my position: fixed, however the hide button no longer shows when the panel opens. Is there a simple fix for this?

        • Hi Matt,
          Can you send me a link to your site so I can take a look at it? You can reply here or send email directly to more.karvonen(at)qumos.com. Thanks!
          -More

      • Hi, this is no longer working for some reason. I’ve been unable to find any hooks other than “body” not clear on how to create them to correspond to the areas I want to attach to. It’s the only solution I’ve been able to find for what I need it to do, just need to figure out how to get it working. Also, on non-mobile devices like laptops, users can’t see the options in the list unless you hover over each item blindly. Thanks for any help.

        • Hi Tracey,
          Did you update the plugin recently? If you did, that may be the reason. The style.css has been overwritten and your previous change is lost.

          I have instructed people to modify plugin style.css file, but that may be not a good idea for this reason. Whenever there is a new release available and you update, the style.css is overwritten and you will loose your changes.

          At least in this case, it’s better to add your change to Appeareance->Customize->Additional CSS. (That’s a new feature in WordPress 4.7.) So, put these lines there and save:
          #mojo-sp-right-wrap {
          position: fixed !important;
          }

          I hope this fixes your problem.

  5. Hi,
    Let me say – I love this panel. It’s simple, fast, and gets the job done without any unnecessary shenanigans.

    I have but two issues with it:
    1. I followed your steps to make the panel floating, and it works. However when I open the panel, the closing button disappears completely, and panel cannot be closed.
    2. I second the notion of having a scrollbar inside of it. It’d be very useful for including things like Twitter feeds and such.

    Thanks for your great work regardless!

    • Also, it seems that it’s not the panel itself that floats, but only the button instead. I tried attaching it to various other classes and tags, but it seems none really stays stationary. I could probably just hamfist an empty div in, but…

    • Progress report:
      To make the contents of the panel scrollable, you just need to put everything that goes inside into

      Still trying to figure out how to make the panel and the button float without it breaking.

    • Progress report 2:
      Turns out, that after the panel is extended, the close button sticks to the left side of the screen and is hidden behind it. So far I don;t know how (or for that matter: if) I can fix it.

      • Hi Angius,
        The reason is “position: fixed: !important;” in button tag, in the plugin style.css:
        #mojo-sp-left-wrap > button {
        top: 300px;
        opacity: 1;
        position: fixed !important;
        }

        If I remember correctly, it should be “absolute” instead of “fixed”. If the purpose was to make the panel sticky, move that “fixed” statement to #mojo-sp-left instead of “#mojo-sp-left > button”.

        • Nothing works, unfortunately.

          Changing it to absolute makes the panel and the button stay at the top.

          Adding position:fixed in #mojo-sp-left makes the panel disappear a split second after being opened, and only the button remains visible. Both stay at the top still.

          Adding position:absolute instead makes both the panel and the button stay at the top.

          • Oh sorry, I gave you slightly wrong instructions. To make the panel stay sticky on top, change the “wrap” element, like this::
            #mojo-sp-left-wrap {
            postiion: fixed !important
            }
            Also, chanage “#mojo-sp-left > button” position to absolute to keep it together with the wrap element. #mojo-spl-left should stay untouched.

    • Hi Nicki
      They should work if you have correct values in Settings->MojoPlug Slide Panel. For example, to get left and right arrowheads, you should fill in the Dashicon fields as follows:
      Button Icon (open panel): dashicons-arrow-right-alt2
      Button icon (close panel): dashicons-arrow-left-alt2

      What values do you have currently in those fields?

      • Hi

        Yes I have all those settings correct.
        I am trying to use
        dashicons-email
        in the left slide panel.

        I have also tried several other icons and none of these will show either.

        Thanks
        Nicki

  7. Hi

    Yes I have all those settings correct.
    I am trying to use
    dashicons-email
    in the left slide panel.

    I have also tried several other icons and none of these will show either.

    Thanks
    Nicki

    • This is weird. The plugin enables dashicons automatically and something like this should appear in the page HTML source:

      If you open the page source (in Chrome: right mouse click -> View page source), do you find this line?

  8. Hi,

    Awesome plugin. Once the button is opened, how do I keep the wrap fixed to say 400px and make it scrollable? I use these:

    #mojo-sp-right { height:400px !important; }

    #mojo-sp-right-wrap {
    position: fixed !important; }

    but I want to make it so if my content is more then 400px then its scrollable. Any ideas?

  9. Loving your widget! Having an issue though that I can’t make sense of. I’ve put a Widget in there, which is the Yootheme grid stack. It basically stacks up multiple pictures in a vertical column inside the slider. The issue is the only the first picture appears until you right click and “inspect element”. Then all of them appear. Any ideas on what that could be about? Using your posts above I was able to sub in my own image for the button, very cool!

    • Shane, I’m afraid I have not seen such problem before. Neither I know the Yootheme. So, no ideas. Maybe you can share a link to your site and I can take a look later when I have time?

  11. Hi, loved how easy the plugin was to get going!
    I’m having trouble with the ‘toggling panel with customized button or link’ feature – it has no reaction (the Make a Booking image has the #mojosp-toggle-right link on it)

    • Hi Andrew. The “Make a Booking” image link seem to have mojosp-toggle-right as an internal page link (like this: a href=”#mojosp-toggle-right”). However, the right way to implement it is to add it as an additional class, like this:
      a href="#make-a-booking" class="image-boxes-link imgboxes-wrapper u-mb-0 mojosp-toggle-right" target="_self" itemprop="url" rel="nofollow"

      Actually I tried it myself by directly changing it in Chrome’s inspect mode. It didn’t work and I don’t know why. There must be something conflicting code in the theme. However I suggest you to try that yourself by changing the tag in the backend.

  12. Hi, I can’t get “toggling panel with customized button or link” working.
    Clicking a link with #mojosp-toggle-right doesn’t make the panel open

Comments are closed.