This is text that will be in a
slide out drawer
from the left of the page

OPEN

JellyBox WordPress Plugin

The jellybox WordPress plugin gives the power of animated text and boxes with an easy to use short code.

All examples on this page are built using the jellybox short code

Note: All margins and minor alignments show in the source code presented on this page are based on the style settings of the current WordPress theme. If you copy the code from this page then expect to also make minor adjustments to the to margins and spacing in accordance with your own theme.

Wow, now that I’m using jellybox I can display text in line at any angle without the slightest effort. It’s so cool!

Show the code for the line above

...line at [jellybox width="70" height="20" angle="25" inline="yes"]any angle[/jellybox] without the slightest effort.

In line text animation is also a breeze.

Show the code for the line above

In line text [jellybox width="70" height="20" angle="25" deltaangle="-50" gospeed="500" returnspeed="500" interval="500" inline="yes"]animation[/jellybox] is also a breeze.

Show the code for the panel on the left side of the page

<div style="position:fixed; left:-20px; top:25%; height:30%;"> [jellybox height="400" width="60" gospeed="500" returnspeed="200" deltawidth="200" class="jellyboxPanel" gocontrol="onmouseover" returncontrol="onmouseout"] <p style="margin-left:70px; margin-top:30px; white-space: nowrap;">This is text that will be in a<br />slide out drawer<br />from the left of the page</p> <p style="margin-left:10px;">OPEN</p> [/jellybox] </div>

Show the code for the nerd on the right side of the page

<div style="position:fixed; right:-20px; top:30%; height:50%;"> [jellybox height="500" width="24" gospeed="2000" returnspeed="100" deltawidth="400" deltaleft="-200" deltaangle="15" gotimeout="5000" gocontrol="clock" returncontrol="onmouseover" target="nerd"] <img style="background:transparent;" id="nerd" src="http://www.jellyrobotics.com/wp-content/uploads/2013/02/nerd.png" /> [/jellybox] </div>

HOVER OVER THIS EXAMPLE

Show the code for this hover box

[jellybox1 height="32" width="600" gospeed="500" returnspeed="500" deltaheight="180" deltatop="-180" class="jellyboxRed" gocontrol="onmouseover" returncontrol="onmouseout"] <p style="margin-top:-10px; text-align:center;">HOVER OVER THIS EXAMPLE</p> ...Here there is layout code for the four switches... [/jellybox]

Show the code for one switch

<img src="http://www.jellyrobotics.com/wp-content/uploads/2013/02/g11181.png" /> <div style="margin-top:-80px; margin-left:5px;"> [jellybox height="50" width="50" gospeed="250" returnspeed="250" deltatop="-90" ontoggle="switch1"] <img src="http://www.jellyrobotics.com/wp-content/uploads/2013/02/g11030.png" /> [/jellybox] </div> [raw] <script type="text/javascript"> function switch1( toggle ) { var obj = document.getElementById("showswitch1"); obj.jellyboxcontroller.setPosition(0,0,obj.jellydata.angle * -1); obj.innerHTML = "Switch #1 is "; if ( toggle ) obj.innerHTML = obj.innerHTML + "ON"; else obj.innerHTML = obj.innerHTML + "OFF"; } </script> [/raw]

Note: The switches above make use of the Raw HTML plugin to make it easy to embed javascript code directly into the page.

Show the code for one of these tilted boxes

[jellybox height="60" width="100" class="jellyboxGreen" id="showswitch1" angle="3"] [/jellybox]

This box is triggered by clicking the big circle to the left.


This is an example of the nesting ability of jellybox short codes. The most fantastic thing about jellybox is that controls like this even work in Internet Explorer 6, 7 and 8.

This box is triggered by pressing the button below. It will spin when the button is pressed.

Show the code for the box on the left

[jellybox height="110" width="300" gospeed="750" returnspeed="750" deltatop="-130" deltaheight="130" class="jellyboxLightBlue" target="trigger1" shadow="yes" returntimeout="3000"] [jellybox1 height="120" width="120" gospeed="750" returnspeed="750" deltaangle="-90" target="trigger1"] <img id="trigger1" style="float: left;" src="http://www.jellyrobotics.com/wp-content/uploads/2013/02/circle.png" /> [/jellybox1] <p style="margin-top:-110px; margin-left:150px;">This box is triggered by clicking the big circle to the left.</p> <div style="margin-top:40px;"></div> <hr></hr> <p>This is an example of the nesting ability of jellybox short codes. The most fantastic thing about jellybox is that controls like this even work in Internet Explorer 6, 7 and 8.</p> [/jellybox]

Show the code for the box on the right

[jellybox height="110" width="250" gospeed="1000" returnspeed="1000" deltaangle="360" target="clickme" class="jellyboxLightBlue"] This box is triggered by pressing the button below. It will spin when the button is pressed.<br /> <br /> <br /> <button id="clickme">CLICK ME</button> [/jellybox]

The animation of this box is controlled by the passing the mouse cursor over the box to the right

The animation of this box is controlled by the passing the mouse cursor anywhere over this box.

Clicking the dial below is an example of the nesting ability of jellyboxes

The animation of this box is controlled by the passing the mouse cursor over the box to the left

Show the code for the box on the left

[jellybox height="150" width="200" gospeed="500" returnspeed="500" deltatop="-20" deltaheight="40" target="myownid" class="jellyboxLightBlue" gocontrol="onmouseover" returncontrol="onmouseout"] The animation of this box is controlled by the passing the mouse cursor over the box to the right [/jellybox]

Show the code for the box in the middle

[jellybox height="80" width="200" gospeed="500" returnspeed="500" deltatop="-270" deltaheight="270" id="myownid" class="jellyboxLightBlue" shadow="yes" gradient="none" gocontrol="onmouseover" returncontrol="onmouseout"] The animation of this box is controlled by the passing the mouse cursor anywhere over this box. <div style="margin-bottom:60px;"></div> Clicking the dial below is an example of the nesting ability of jellyboxes <div style="margin-bottom:20px;"></div> [jellybox1 height="120" width="120" gospeed="750" returnspeed="750" deltaangle="-90" target="trigger2"] <img id="trigger2" style="float: left;" src="http://www.jellyrobotics.com/wp-content/uploads/2013/02/circle.png" /> [/jellybox1] <div style="margin-bottom:20px;"></div> [/jellybox]

Show the code for the box on the right

[jellybox height="150" width="150" gospeed="500" returnspeed="500" deltaleft="-50" deltawidth="100" deltaangle="25" target="myownid" class="jellyboxLightBlue" gocontrol="onmouseover" returncontrol="onmouseout"] The animation of this box is controlled by the passing the mouse cursor over the box to the left [/jellybox]

Syntax

[jellybox class="jellyboxBlue" height="100" width="100"] This is the text inside the jellybox [/jellybox]

Nesting Example

[jellybox class="jellyboxRed"...]
[jellybox1 class="jellyboxGreen"...]
[jellybox2 class="jellyboxBlue"...]
[jellybox3 class="jellyboxYellow"...]
[jellybox4 class="jellyboxBlack"...]
[/jellybox4]
[/jellybox3]
[/jellybox2]
[/jellybox1]
[/jellybox]

Up to 5 levels deep

Show the code for the nested spiral

[jellybox class="jellyboxRed" height="250" width="250" deltaangle="10" id="box0" gospeed="300" returnspeed="300" interval="1200"] <div style="margin-top:10px; margin-left:16px;" align="left"> [jellybox1 class="jellyboxGreen" height="200" width="200" deltaangle="10" target="box0" gospeed="300" returnspeed="300"] <div style="margin-top:10px; margin-left:16px;" align="left"> [jellybox2 class="jellyboxBlue" height="150" width="150" deltaangle="10" target="box0" gospeed="300" returnspeed="300"] <div style="margin-top:10px; margin-left:16px;" align="left"> [jellybox3 class="jellyboxYellow" height="100" width="100" deltaangle="10" target="box0" gospeed="300" returnspeed="300"] <div style="margin-top:10px; margin-left:16px;" align="left"> [jellybox4 class="jellyboxBlack" height="50" width="50" deltaangle="10" target="box0" gospeed="300" returnspeed="300"] <div align="center" style="margin-top:-24px;">Up to 5 levels deep</div> [/jellybox4] </div> [/jellybox3] </div> [/jellybox2] </div> [/jellybox1] </div> [/jellybox]
Required Parameter Description
class=”aClassName” A predefined jellybox class or custom class for the jellybox presentation style.
The built-in styles are: jellyboxPanel, jellyboxRed, jellyboxGreen, jellyboxBlue, jellyboxLightBlue, jellyboxYellow, jellyboxBlack
Yes height=”99″ Pixel height of the jellybox.
Yes width=”99″ Pixel width of the jellybox.
angle=”90″ Starting angle of the jellybox (in degrees).
inline=”yes” Display the jellybox inline with the current paragraph using SPAN tags (default is ‘NO’ which tells jellybox to use DIV tags).
deltatop=”-20″ Pixel change to the jellybox “top” to animate.
deltaleft=”-20″ Pixel change to the jellybox “left” to animate.
deltaheight=”40″ Pixel change to the jellybox “height” to animate.
deltawidth=”40″ Pixel change to the jellybox “width” to animate.
deltaangle=”360″ Pixel change to the jellybox “angle” to animate.
gospeed=”1000″ Number of milliseconds to run Go animation.
returnspeed=”1000″ Number of milliseconds to run Return animation.
gocontrol=”onclick” Event that will trigger Go animation start.
Available options are: onclick, onmouseover, onmouseout or clock. If no control is specified the default will be onclick.
returncontrol=”onclick” Event that will trigger Return animation start.
Available options are: onclick, onmouseover, onmouseout or clock. If no control is specified the default will be onclick.
control=”onclick” Optional short cut to define both gocontrol and returncontrol using a single parameter.
id=”elementID” Optionally provide your own ID for the jellybox wrapper.
target=”elementID” Element ID to watch for the control event. If no target is specified the jellybox itself will be the default target.
autostartdelay=”5000″ Number of milliseconds to wait for the control event before running the Go animation automatically. Unlike the ‘gotimeout’ parameter, this auto start will only occur once after the page loads.
interval=”10000″ Number of milliseconds to automatically cycle both the ‘Go and Return animations.
gotimeout=”1000″ Number of milliseconds to wait for the control event before running the Go animation automatically.
returntimeout=”1000″ Number of milliseconds to wait for the control event before running the Return animation automatically.
ontoggle=”myCallbackFunction” Javascript callback function to call every time the control event triggers a change in state from Go or Return.
style=”background-color:#ff0000;” Optional in-line style commands for the jellybox.
cstyle=”background-color:#ff0000;” Optional in-line style commands for the jellybox container object.

Get the plugin here

download from here –> JellyBox Shortcode Plugin for WordPress

108 Responses to JellyBox WordPress Plugin

  • Jeff

    Hi,
    Thank you so much for this plug-in! I had two static PNG images I wanted to animate for my homepage and was given an estimate of 4-6 hours of work – $100-$120 – to have the code written (I know some code but can’t write from scratch). Once I installed the plugin it only took me 20 minutes or so to modify it the way I wanted. Thanks so much! These days every penny helps, so you saved me big!! :)

    Thanks again!

    Best,
    Jeff

    • jellyrob

      That’s fantastic. I’m glad it worked for you. Thanks.

  • fixneed

    it doesn’t work on Chinese wordpress/UTF8
    sad

    • fixneed

      Warning: include(shortcodes.php) [function.include]: failed to open stream: No such file or directory in /home/domain/public_html/name/wp-content/plugins/jellybox/jellybox.php on line 2

      Warning: include(shortcodes.php) [function.include]: failed to open stream: No such file or directory in /home/domain/public_html/name/wp-content/plugins/jellybox/jellybox.php on line 2

      Warning: include() [function.include]: Failed opening ‘shortcodes.php’ for inclusion (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in /home/domain/public_html/name/wp-content/plugins/jellybox/jellybox.php on line 2

      • jellyrob

        I just made a modification to use require_once( ABSPATH . WPINC . ‘/shortcodes.php’ ) instead. That should fix it. Thank you and thanks to Marcel Vigier for the input on this issue.

  • Marcel Vigier

    Hey, Rob

    great work! But one thing:
    It didn’t find “shortcodes.php”. Changed the include in your php to ‘include “/wp-includes/shortcodes.php';”
    No “warnings” any more. ;)

    Maybe you should define a constant for the default “/wp-include” path…

    Best regards,
    Marcel

    • jellyrob

      I just made a modification to use require_once( ABSPATH . WPINC . ‘/shortcodes.php’ ) instead. That should fix it. Thank you.

      • Marcel Vigier

        Marvelous! Thank you! :D

  • Ioanna

    very jelly super!great plugin

  • Sander

    Great PlugIn!!!

    i miss animatable colors and transparency though

  • Jeff

    Hi,

    Just a quick follow-up to my last comment. Thanks again for the awesome plug-in! I’m having an issue though with one of my images. I want it coded to pop up from the bottom of the user’s browser when clicked on (it should be partially visible then pop up to full view). I can’t seem to get the placement right though. I want it fixed at the bottom of the browser so it always stays at the bottom – regardless of scrolling or window size. This doesn’t seem to be an issue with my second image – which is fixed to the right/center of the browser. Here is the code for the image in question –

    [jellybox height="500" width="424" gospeed="2000" returnspeed="1500" deltaheight="0" deltatop="280" deltaleft="0" deltaangle="0" gotimeout="0" gocontrol="clock" returncontrol="onmouseover" target="nerd2"]

    [/jellybox]

    Any ideas? I’m sure it’s ridiculously simple but I can’t seem to code a solution.

    Any help you can offer would be much appreciated!! :)

    Thanks!!

    Best,
    Jeff

  • Jeff

    Sorry – the code didn’t post properly…

    ——[jellybox height="500" width="424" gospeed="2000" returnspeed="1500" deltaheight="0" deltatop="280" deltaleft="0" deltaangle="0" gotimeout="0" gocontrol="clock" returncontrol="onmouseover" target="nerd2"]

    [/jellybox]——–

    • jellyrob

      Frame the [jellybox...] in a DIV. Something like this:


      <div style="position:fixed; bottom:-220px; left:50%;">
      -- your [jellybox shortcode]
      </div>

  • Jeff

    Hi, thanks for your quick response…and sorry for my slow reply. I do have the code framed in a div tag (position; fixed; bottom: 0px) but the problem persists. It’s difficult to judge because I can adjust the numbers/ percentages so it looks fine on my 13inch Macbook Pro…but when I test it on larger screens the image appears absolute and not fixed at the bottom of the web browser. Any ideas? Again, I’m sure it’s something simple I’m missing but I just can’t get the fixed bottom div to function properly with all screen sizes. You can see the image in question on my website – http://www.jeff-hudgins.com (it is the image of me in Ninja Turtles garb with a sewer lid over my head! Hey, I work in animation;)

    Any further help would be much appreciated! :)

  • Roland

    I want to have an image appear (like the nerd in your example), but then disappear on it’s own after a period of time..and not return.
    I tried:

    [jellybox height="270" width="75" gospeed="400" returnspeed="100" deltawidth="50" deltaleft="-200" deltaangle="12" gotimeout="1000" returntimeout=”800" control="clock" target="nerd"]
    [/jellybox]

    But the image does not disappear on its own and always comes back.

    • jellyrob

      Try this:


      [jellybox height="270" width="75" gospeed="400" returnspeed="100"
      deltawidth="50" deltaleft="-200" deltaangle="12" autostartdelay="1000"
      returntimeout="800" returncontrol="clock" target="nerd"]

      This should work like you want. The only problem remaining is that it will also disappear when ‘clicked.’ I have an update that changes the code to not allow click events when the control is set to ‘clock.’ In the meantime, I hope this gets what you need.

      • Roland

        Tried the code – now nothing happens :-( The image does not appear at all.

        • jellyrob

          Here is exactly what I just tested and it’s working for me:


          <div style="position:fixed; right:-20px; bottom:30%; height:50%;">

          [jellybox height="270" width="75" gospeed="400" returnspeed="100" deltawidth="50" deltaleft="-200" deltaangle="12" autostartdelay="1000" returntimeout="800" returncontrol="clock" target="nerd2"]

          <img style="background:transparent;" id="nerd2" src="http://www.jellyrobotics.com/wp-content/uploads/2013/02/nerd.png" />

          [/jellybox]

          </div>
          • Roland

            Ok – I’ll try that … thanks

        • Roland

          Used: [jellybox height="270" width="75" gospeed="400" returnspeed="100" deltawidth="50" deltaleft="-200" deltaangle="12" autostartdelay="1000" returntimeout=”1000" returncontrol="clock" target="nerd"]

          Image appears but does not disappear.

          • Roland

            Success! Using your last code.
            Thank you, Roland

  • Roland

    One other question. How to make the image a link? So, when someone clicks on it it goes to the desired page?
    I tried adding within the [jellybox] code but the image the had a white box around it (the size of the jekkybox.

  • Chhand

    I want to use jellybox for display contact form 7 as a sliding (same like as per your example in this page for OPEN content on left side). And of course, it should display on everypage of website rather than any one-two page. I am confuse where should I need to place the code?? should I place shortcode in each pages through backend and is there any way to place this code into any theme/template PHP file?? Pls suggest a way as it’s very urgent

    • jellyrob

      You place the jellybox shortcode in your page and the contact form inside the JellyBox. It’s a little quirky because of how the contact 7 forms work.

  • Sebby

    Thx for all ! I have one question too : how center the box ?

    Cant use this (doesnt work): [jellybox class="jellyboxBlue" height="250" width="700" align="center"]

    • jellyrob

      Align=”center” isn’t an option with the short code. Try wrapping the short code in a DIV with center alignment instead

  • Sebby

    That work in a DIV, thx.

  • Lorene

    Can I create a box with blinking borders with text inside that does not blink? Can I control the colors with hex codes? Thanks!

    • jellyrob

      Yes. The style sheet that is included with the plugin can be customized without being overwritten by updates. Take a look at that and you will see how the “built in” styles for the parameter class=”aClassName” are setup. I would just make a copy of one of the existing styles and create your own to adjust how you need it. Here is an example of a blinking border in CSS3:

      
      @keyframes blink
      {
      from { border-color: #ffffff;}
      to { border-color: #ff0000;}
      }
      
      @-webkit-keyframes blink /* Safari and Chrome */
      {
      from { border-color: #ffffff;}
      to { border-color: #ff0000;}
      }
      
      #blink
      {
      width:100px;
      height:100px;
      position:relative;
      
      border-style:solid;
      border-width:5px;
        
      animation-name:blink;
      animation-duration: .2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite ;
      animation-direction: alternate ;
          
      /* Safari and Chrome */
      -webkit-animation-name:blink;
      -webkit-animation-duration: .2s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite ;
      -webkit-animation-direction: alternate ;
      }
      
  • Liz

    Hi JellyRob, my apologies in advance as this is probably an embarrassingly simple question with an easy answer. I’m still really new to shortcode but I’m really enjoying your awesome work. I wanted to use your nerd example work with an owl character of mine, and I’m hoping you might be able to pinpoint where I’m going wrong with naming the image target or id in the shortcode (again, apologies for my noobness). :\

    [jellybox height="500" width="24" gospeed="2000" returnspeed="100" deltawidth="400" deltaleft="-200" deltaangle="15" gotimeout="5000" gocontrol="clock" returncontrol="onmouseover" target="owl"] [/jellybox]

  • Liz

    HA! Solved my own problem after all. A simple typo on my part. This girl needs less coffee and more sleep. Thanks again JellyRob!

  • Liz

    I’ve been trying to have the nerd function pop out from the left side instead of the right, but I’ve been unsuccessful with the angle and slice. I’m wondering if you might have suggestions for making a left side mirror image of this?

    [jellybox height="500" width="24" gospeed="2000" returnspeed="100" deltawidth="400" deltaleft="-200" deltaangle="15" gotimeout="5000" gocontrol="clock" returncontrol="onmouseover" target="nerd"] [/jellybox]

    • Hunter

      You need your starting image to start off of the page to the left ( mine was about 1000px )
      Then let deltaleft bring it into the scene. Do this in the div tag
      Ex:

      • Hunter

        Here’s more accurate example code:

        [jellybox height="249" width="564" gospeed="500" returnspeed="300" deltawidth="50" deltaleft="400" autostartdelay="1" returncontrol="onclick”]

        [/jellybox]

  • Hunter

    Awesome Awesome Plugin, I’m having a blast animating my site :)

    Great controls, easy to pickup and run with. So glad it runs on mobile as well!

    Any plans on adding opacity controls? That would really take this to the next level!

    • jellyrob

      No plans for that right now but thanks.

  • Enrico

    Hi, I have downloaded your plugin and tried to setup.

    I have the problem with the animation on mouse over. The animation go between the main slider.

    Please visit: http://grafica.terenzinet.com/irci/

    for view the problem.

    I wait your reply

    thanks a lot and congratulation for the plugin…..

    Enrico

    • jellyrob

      Beautiful site, but I don’t see the problem. I mouse over the boxes below the main slider and they seem to work fine. What am I suppose to be looking for?

      • Enrico

        I’m using firefox and chrome and I have the same problem with the two browser:

        If I mouse over in the first blu box under the slide, the animated box go under the slider…..

        I wait your reply thanks

  • Enrico

    Hi hope to resolve this problem changing somethinks in your plugin and not in the layerslider :)

    I wait your reply

    thanks

    • jellyrob

      Sorry but there is no way to fix this in the plug-in. This is being caused by the theme stylesheet. If you look at http://grafica.terenzinet.com/irci/wp-content/themes/alterna/style.css you will see that the class “content-wrap” has overflow attribute set to hidden. I don’t know how it will affect the rest of your site, but changing that to “overflow:visible;” fixes the problem. I was able to test your web page and make it work by making this change

    • jellyrob

      If your THEME allows custom CSS, then you should be able to fix it by adding this to a custom CSS section:

      
      .content-wrap {overflow:visible;}
      
      • Enrico

        Ok resolved. Very thanks

  • Enrico

    Last problem…..

    When I try to resize the window browser I note that the 4 box are not exactly reduced.
    Is a responsive problem?

    How to fix?

    thanks

    • jellyrob

      Unfortunately JellyBoxes are sized by pixel and not by percentage so they don’t re-size when the page size changes. That’s a good idea for an update but I won’t be able to work on anything like that for a few weeks.

  • kunal

    hi,
    ive just activated ur plugin. but have no clue how to work
    tried to put the below into a page but not working

    In line text [jellybox width="70" height="20" angle="25" deltaangle="-50" gospeed="500" returnspeed="500" interval="500" inline="yes"]animation[/jellybox] is also a breeze.

    pls solve the issue

    • jellyrob

      This is straight from the example page which is working now so I’m not sure why it wouldn’t be working on your site.

  • Jeff

    Hello, I am using WordPress 3.4 with Jellybox plugin v 1.0.0. Everything has been working perfectly for months but my hosting (Bluehost) went down for a few days and when it came back up, suddenly my site is loading super slow. The Bluehost tech support told me it was due to an error with the Jellybox plugin. Here is the error reading, according to Bluehost:

    PHP Warning: include() [function.include]: Failed opening ‘shortcodes.php’ for inclusion (include_path=’.:/usr/lib64/php:/usr/share/pear’) in /home7/newmedk9/public_html/wp-content/plugins/jellybox/jellybox.php on line 2

    Any ideas for a fix? Everything was working so perfectly for months so I don’t understand how this just now occurred….

    Great plugin by the way! :)

    http://www.jeff-hudgins.com
    Thanks!!!

    http://wordpress.org/plugins/jellybox/

    • jellyrob

      Only thing I can assume is that you might uninstall and re-install the plug-in. I’m using WordPress 3.7.1 and it’s working fine.

  • Leo

    hi – I’ve been trying to find a plugin that performs like the one at this site:
    http://theme-fusion.com/
    The boxes rotate when you hover over them – can jellybox do this? Ideally I want an image one side and text when the rollover happens

    cheers

    • jellyrob

      Yes, that’s exactly the thing that JellyBox does. There are examples and the sample page that do similar actions

  • Enrico

    Hi,
    Have you updated the plugin for a responsive view?

    thanks

    • jellyrob

      Yes, the plugin has been tested with the latest release of WP 3.8 and with responsive themes.

      • Enrico

        Can you help me to make responsive the 4 banner under the slider of this site? If I try to reduce the screen the 4 banners do not resize correctrly.

        http://www.ircispa.com

        I wait you reply thanks

        Thanks

        • jellyrob

          I don’t think that’s possible the way I have the code right now. The boxes are sized by px and you would probably need them sized by percentage.

  • Victoria Wood

    Hi

    I was wondering if you can help me please?

    How do you separate the hover boxes and get them to work together. My first hover box worked but now I am adding on another one they are sitting to close to each other on the page and now the original box doesn’t work.

    Thank you

    • jellyrob

      Can you paste your code so I can see how you are using the short codes?

      • Victoria Wood

        [jellybox height="80" width="200" gospeed="500" returnspeed="500" deltatop="-270" deltaheight="270" id="myownid" class="jellyboxBlue" shadow="yes" gradient="none" gocontrol="onmouseover" returncontrol="onmouseout"] The animation of this box is controlled by the passing the mouse cursor anywhere over this box.

        Clicking the dial below is an example of the nesting ability of jellyboxes

        [/jellybox]

        Here you go – thank you
        [jellybox height="80" width="200" gospeed="500" returnspeed="500" deltatop="-270" deltaheight="270" id="myownid" class="jellyboxRed" shadow="yes" gradient="none" gocontrol="onmouseover" returncontrol="onmouseout"] The animation of this box is controlled by the passing the mouse cursor anywhere over this box.

        Clicking the dial below is an example of the nesting ability of jellyboxes

        [/jellybox]

        • jellyrob

          On my example page I have placed a drawer on the left and the shy nerd peeking in from the right by wrapping the jellybox short code in a DIV block that controls the position. Here is the code I used:


          <div style="position:fixed; left:-20px; top:25%; height:30%;">
          [jellybox height="400" width="60" gospeed="500" returnspeed="200"
          deltawidth="200" class="jellyboxPanel"
          gocontrol="onmouseover" returncontrol="onmouseout"]
          <p style="margin-left:70px; margin-top:30px; white-space: nowrap;">This is text that will be in a<br />slide out drawer<br />from the left of the page</p>
          <p style="margin-left:10px;">OPEN</p>
          [/jellybox]
          </div>

          <div style="position:fixed; right:-20px; top:30%; height:50%;">
          [jellybox height="500" width="24" gospeed="2000" returnspeed="100"
          deltawidth="400" deltaleft="-200" deltaangle="15" gotimeout="5000"
          gocontrol="clock" returncontrol="onmouseover" target="nerd"]
          <img style="background:transparent;" id="nerd"
          src="http://www.jellyrobotics.com/wp-content/uploads/2013/02/nerd.png" />
          [/jellybox]
          </div>

  • Victoria Wood

    Can you help please?

    How do you make the boxes bigger?

    I have a few topics that need hover boxes, I made one work and when I added another one the original box stopped working. How do I get them all working together?

    • jellyrob

      As long as you are not nesting the boxes or overlapping their triggers multiple boxes should work fine just as they are on the example page. The size is set by the attributes.

  • Ryan

    Awesome plugin, but is there a way to add a tilt attribute to a metaslider? example of tilt wanted is on this page

    http://www.entacc.com/

    The two pictures on either side of the logo are tilted inward toward the logo. Can I make this happen with Jellybox?

    url I’m currently working on is 50.87.161.194/~entfpsco

    thank you in advance for any help or suggestions.

    Ryan

    • jellyrob

      Sorry Ryan but the example you provided is actually a 3D transform and not a simple rotation which JellyBox supports. It’s a cool idea but I’m busy with other projects at the moment so I won’t be adding that kind of capability anytime soon.

      • Ryan

        No problem, your plugin is working great but it seems to have created a massive space between rows on the front page. I was told to look for the jellyboxcontainer class and change the value to 250px…however i cannot locate this. Any suggestions?

        site url: 50.87.161.194/~entfpsco

        • Ryan

          Oh, figured it out, ha! I’m having a moment apparently. Thank you for your awesome plugin!

          • jellyrob

            Great, I’m glad it’s working for you. Thanks

  • John

    Using Jelly in a WordPress site I have 2 very basic Jelly boxes which I would like side by side but the second one always appears on the line below the first one. Any help would be gratefully received.
    Thanks
    John

    • jellyrob

      Your theme probably supports columns which is one way I’ve presented jellbox’s side-by-side on my example page. Another way is to just wrap the jellbox in a DIV with display:inline-block; attribute.

      • John

        Thanks for that. Columns sorted it.
        Thanks for a great plugin!

  • John

    Hi
    Is there an easy way to have extra colors for the jellyboxes?
    Thanks
    John

    • jellyrob

      Yes, you can easily control style elements of the box with an option like this style=”background-color:#ff0000;” You can also use class=”aClassName” and define all the style elements of the box with your own CSS class

    • jellyrob

      In the plug-in folder jellbox/css there is a file named jellbox.css where you can create your own CSS styles that jellybox will find. You can look at jellybox/template/jellybox.css for examples. That is where I define the built in styles.

  • John

    Cheers, new colors sorted.
    Thanks a lot!

  • Caroline

    Hi there, I love this plug in and have used it instead of an accordian here http://www.paintingholidaysitaly.com/journaling-and-bookbinding/, and it looks great. the only problem is that once the boxes have been activated, if you then scroll to the top the responsive menu seems to slip behind the text. It happened before and I fixed it using z-index but can’t remember how or where. Any ideas

    • jellyrob

      It looks like the support for layered jellyboxes conflicts with the code that manages your menu layer. I can probably update the plug in to support an option to disable the layer controller but that may be a few weeks from now. Until then I have a work around for you if you are brave and want to follow these steps. If anything goes wrong you can remove and re-install the jellybox plugin to restore it back to normal:

      Under “Plugins” in your WordPress menu, select “Editor”

      On the right hand side of the page there is a drop down box of your plugins titled “Select plug in to edit:”

      In that drop down, pick “jellybox” and then press Select

      After pressing select, a link to a file named “jellybox/js/jellybox.js” will appear below the drop down

      Click on the link for the file named “jellybox/js/jellybox.js”

      Around line 315 in the file (you can use your browser page search to locate it) there is a line that looks like this:
      jellyBoxObj.jellydata.layerController.pop();

      Either delete that line or place two backward slashes at the begging of the line to comment out the code; like this:
      // jellyBoxObj.jellydata.layerController.pop();

      Around line 449 in the file (you can use your browser page search to locate it) there is a line that looks like this:
      jellyBoxObj.jellydata.layerController.push();

      Either delete that line or place two backward slashes at the begging of the line to comment out the code; like this:
      // jellyBoxObj.jellydata.layerController.push();

      After commenting out or deleting these two lines from the plugin code, click the “Update File” button at the bottom of the page.

      This should remove the calls to layer management that causes your page problems.

  • Caroline

    Well …. that was painless. Worked a treat, many thanks for a great plugin (sometimes I just go there and play with the boxes) and great help.

  • John

    Hi,
    I am trying to make an angled box become straight when the mouse goes over it. Code at the moment –

    [jellybox height="80" width="100" gospeed="500" returnspeed="500" id="str" target="str" deltaangle="0" class="jellyboxRed" angle="15" gocontrol="onmouseover" returncontrol="onmouseout"] test box [/jellybox]

    I guess it’s something obvious I am doing wrong or it can’t be done.
    Thanks for any help
    John

    • John

      Hi
      Everything comes to he who keeps fiddling!

      [jellybox height="80" width="100" gospeed="50" returnspeed="50" id="str" deltaangle="15" class="jellyboxRed" angle="15" gocontrol="onmouseover" returncontrol="onmouseout"] test box [/jellybox]

      Thought deltaangle was an absolute angle not a relative one, and also don’t need target.

      Thanks again for great plugin!

      John

  • Cassandra

    Hi there,

    Lovely plugin! But I am more interested how I can get the funny Professor on the right of this screeen, I completely fell in love with him and would like to implement him on my site.

    Could you please please please direct me how to do this?

    Cassandra

    • jellyrob

      The image itself came from Fotolia so you will need to purchase your own from there or some other site the licenses images. The code for displaying a time image that jumps away when the mouse cursor moves over it is as follows:

      <div style=”position:fixed; right:-20px; top:30%; height:50%;”>
      [jellybox height="500" width="24" gospeed="2000" returnspeed="100" deltawidth="400" deltaleft="-200" deltaangle="15" gotimeout="5000" gocontrol="clock" returncontrol="onmouseover" target="nerd"]
      <img style=”background:transparent;” id=”nerd” src=“IMAGELINK” />
      [/jellybox]
      </div>

  • David

    Hi jellyrob,

    Are you maybe able to shoot me an email? Wanted to ask you a question. :)

    Thanks,
    D

  • Shubh

    Hi, Please help me. I want a spinning circle on page load and it should keep spinning until I am on that page. How do I do that?

    • jellyrob

      Not sure what you mean by spin during page-load. Like a busy indicator while a large page loads?

  • STeve

    Newbie Here….where would I add the code in my website to have the nerd image for instance

    thanks

    • jellyrob

      it’s a shortcode plugin so you insert the shortcode in your page where ever you want

  • RA

    I love this! But for what I need it for I would have to customize it. I am wondering if there is a way I can show a an image at different angles. For example, the image can be displayed initially and then the user either has to Hover over the image or click it, to turn it 90 degrees and stop. If they hover again OR click it would turn ANOTHER 90 degress and vice versa until it completes a 360 or continuous. What do you think? Is this possible?

  • Ray

    Hey JellyRobotics, I posted something yesterday Not sure if it got deleted or something. However, I am so thankful for your code here. I am confused. I am trying to use it for an image. This image can be viewed in different angles. How do I edit the code so it can rotate 90 on click each time? I would appreciate the help. Thanks!

  • Kevin

    Hi
    First of all thanks for creating a brilliant plugin only wished I spotted it earlier.
    I it possible to make the image (on nerd) clickable to a link.
    I am an insurance broker trying to build my own site and want a “Get a Quote” to shoot into the middle of the page (managed that bit) then potential client to click on it to obtain travel insurance quote
    Thanks

    • jellyrob

      Sure, some of the other examples on the page show clickable actions. You may need to place something in the box with an link tag to cause it send your reader to another page. I haven’t tested it but a link within the box should work

  • Rick

    Hi JellyRob,

    I am helping build what was supposed to be a “simple blog”, which has turned into a major project. On the home page (www.darlinhouse.com), she wants to animate the “Welcome” button, which then will link to her main page. What she wants (for today at least) is to have the button tilt left, then right when the mouse is hovered over.

    Your plugin seems like it can accomplish this, but I wanted to make sure before investing time in this. Can the plugin work on a background image? An image inserted into a page? Please advise.

    The site is being built with Artisteer if that’s any help. Using WP 3.9.1

    Thanks for your help.

    Rick

    • jellyrob

      The plugin wraps whatever you place inside it into a DIV element that is animated with javascript so it just depends on how you’re handling your background image but it should work

  • Dave

    Great plugin!

    One question, using the panel on the left side of page “OPEN” and on mobile device it opens, but does not retract. Should this work on Mobile devices? Anything special required?

    Thanks!

    • jellyrob

      It closes when it loses focus. For mobile you would use a different trigger because the only way to make it lose focus is to tap somewhere else on the page

  • Dave

    Hmmm. I tried that. I left the page alone for sometime and it stayed opened. I tried clicking in the other areas of the page and now luck :-(

    Thanks

  • Dave

    Ok, I changed it to “onclick” and it works. Thanks!

  • Mia

    I’d like to use the jellybox to open up a contact form (contact form created by using Contact Form 7 plugin). However, the contact form closes whenever the mouse is clicked anywhere in it. Is there a way to keep the form open so the user can fill in the fields and then click ‘submit’?
    Thanks for the plugin. It’s really great!

    • jellyrob

      I remember I had an issue with this and worked out some sort of kludge to address it. Not sure if it’s a workable solution but try the example on the wordpress.org site for this plugin. https://wordpress.org/plugins/jellybox/

  • Mia

    I used that code and it is working! Thanks a million.

  • Peter

    Nifty effects! Will there be any triggered by scroll position?

    Cheers!

    • jellyrob

      Nice idea but no plans for changing the code anytime soon. Sorry :(

  • Graham

    Sorry I am a beginner.

    Can I wrap text around Jellybox? Like the photos in this webpage http://en.wikipedia.org/wiki/Fred_Astaire

    • jellyrob

      Yes, but the approach you take will depend on how you want the text around it to react to the animation.

Leave a Reply

Your email address will not be published. Required fields are marked *