Problems with a form in the bottom of the <div> panel

[udi]

I have a <div> as the panel, and at its bottom there is a form. This form is actually another jquery plugin used for star rating (jquery.rating.js).

There are couple of issues (not sure whether they are because of the star rating plugin or the form itself):

1. The bounding box of the panel is not calculated correctly, and "cuts" the stars.
2. The stars of in the side-panels are active (they are based on radiobutton inputs). When clicking on them, they actually get clicked, and at the same time, the panel slides to become the central. However, when it is the one in the middle, the height of the box does not adapt to the new div height (it "cuts" the image).
3. Not sure if this is related, but I added code that when the user clicks the stars of the central panel, it automatically jumps to the next panel:

$('.auto-submit-star').rating({callback: function(value, link){ 
    var mb = $('#boxes').getMovingBoxes();
    mb.currentPanel(mb.currentPanel()+1);
};

This works out usually fine, but sometimes the box slides but does not update the height of the box to the new panel.

[Mottie]

Try initializing the star plugin before initializing the MovingBoxes plugin. If the star plugin does something else that requires extra height, maybe try updating the plugin $('#boxes').getMovingBoxes.update();

Also your above code could be simplified by using the goForward function instead of using currentPanel as follows:

$('.auto-submit-star').rating({callback: function(value, link){ 
    var mb = $('#boxes').getMovingBoxes();
    mb.update(); // maybe adding the update here might work?
    mb.goFoward(); // go to the next panel (goBack, will go to the previous panel)
};

[udi]

Just tried your code (the goForward call) and it does nothing. Doesn't go forward any more...

Also, I moved the init of the stars before the movingbox init. Didn't help. Perhaps you should add a padding parameter to the panels so that the frame can be padded. Also - is it possible to remove the frame altogether?

[udi]

Tried using standard form in the bottom of the panel, and it works fine. So I guess that something is wrong with the star rating plugin.

However, in any case it would be useful to control the appearance of the frame of the panel.

[Mottie]

I tested the goForward function and indeed it does break in the jsFiddle unless it also includes a return false; or e.preventDefault() in the function. So try this:

$('.auto-submit-star').rating({callback: function(value, link){ 
    var mb = $('#boxes').getMovingBoxes();
    mb.update(); // maybe adding the update here might work?
    mb.goFoward(); // go to the next panel (goBack, will go to the previous panel)
    return false;
};

You can't add padding to the panel directly since it changes all of the dimensions, but there is an inner div wrapping all of the panel content you can add padding to, and remove the border/frame:

.mb-inside {
    padding: 20px;
    border: 0;
}

I'm still not sure what's going on with the start rating plugin, I haven't had time to test it myself, but I would appreciate a demo of the problem.

[Mottie]

If you look at the updated demo you shared in issue #54, you'll see that adding even 1px height to the form will make the star height be included and not wrap outside of the panel.

form { height: 1px; }