Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SlideFromBelow/SlideFromAbove don't animate & get stuck in original, non-centered position #6

Open
jchu1 opened this issue Aug 8, 2013 · 5 comments
Open

SlideFromBelow/SlideFromAbove don't animate & get stuck in original, non-centered position #6

jchu1 opened this issue Aug 8, 2013 · 5 comments

Comments

@jchu1
Copy link

jchu1 commented Aug 8, 2013

Worked in 0.31. No longer working in 0.3.2

Looked at diffs. It looks like the following if statement was removed from the ShowModal function, when either SlideFromBelow or SlideFromAbove options are true.

if (coords.isEmpty()) {
 animateProperties.top = positionY;
} else {
 animateProperties.top = coords.top;
}

When I add this condition back, animation works again.
@GarethElms
Copy link
Owner

Hi thanks for reporting this.

The "Anchored to header (right)" option works in the example and is using 0.32 : http://www.garethelms.org/demo/backbone-js-modal-dialog/demo.html so it at least works on that page. Can you tell me your browser and version. If you can, a stripped down test page exhibiting the problem would be great.

In fact I'm struggling to find in the history the exact code you've quoted! Can you link to the change that is causing the problem?

@jchu1
Copy link
Author

jchu1 commented Aug 8, 2013

Embarrassingly, I looked at previous versions of Modal View here on Github and didn't see the solution I mentioned above either. So this is not a regression from 0.31 to 0.3.2.

Umm, there's a good chance that I may have tracked this down on an earlier version and added it to my own local copy. It looks like I replaced lines 374 and 380 with that block of code I mentioned. (Sorry, I neglected to document this, so I don't recall why.)

The "anchored to header (right)" option in the demo link works for me too. I'm using Chrome 28.0.1500.95, win7 64bit.

Here's some demo code that doesn't do the animate.

<html>
<head>
<script src="ext/jquery-1.10.2.min.js"></script>
<script src="ext/underscore-1.4.3.min.js"></script>
<script src="ext/backbone-0.9.9.min.js"></script>
<script src="ext/Backbone.ModalDialog-0.3.2.js"></script>
<script type="text/javascript">
    var TemplateModalView = Backbone.ModalView.extend({
        name: 'TestModal',
        initialize: function (attrs) {
            "use strict";
            _.bindAll(this, 'render');
            this.template = _.template($('#test-template').html());
            this.attrs = attrs;
        },
        render: function () {
            "use strict";
            $(this.el).html(this.template());
            return this;
        }
    });

    $(function () {
        $('#theBtn').bind('click', function (e) {
            "use strict";
            var testView = new TemplateModalView();
            testView.render().showModal({
                'backgroundClickClosesModal': true,
                'pressingEscapeClosesModal': true,
                'slideFromBelow': true,
                'showCloseButton': false,
                'css': {
                    'background-color': '#fff',
                    'border': '2px solid #666',
                    '-webkit-box-shadow': '0px 0px 15px 2px rgba(0, 0, 0, 0.5)',
                    '-moz-box-shadow': '0px 0px 15px 2px rgba(0, 0, 0, 0.5)',
                    'box-shadow': '0px 0px 15px 2px rgba(0, 0, 0, 0.5)',            
                    '-webkit-border-radius': '4px',
                    '-moz-border-radius': '4px',
                    'border-radius': '4px',
                    'padding': '1.5em 0.9em'
                }            
            });
        });
    });
</script>
</head>
<body>
<button id="theBtn">Click</button>
<script type="text/html" id="test-template">
    <div class="content-container">
    <h1 class="modal-header"> Test 1 2 3 </h1>
    Hello, bonjour, buenos dias
    </div >
</script>
</body>
</html>

@jchu1
Copy link
Author

jchu1 commented Aug 8, 2013

Ah, think I remember my reasoning for the code. It looks like the slideFromBelow animation works if you add a 'top' value in the css options.

testView.render().showModal({
            'backgroundClickClosesModal': true,
            'pressingEscapeClosesModal': true,
            'slideFromBelow': true,
            'showCloseButton': false,
            'css': {
                'top': '0px',
                'background-color': '#fff',
                'border': '2px solid #666',
                '-webkit-box-shadow': '0px 0px 15px 2px rgba(0, 0, 0, 0.5)',
                '-moz-box-shadow': '0px 0px 15px 2px rgba(0, 0, 0, 0.5)',
                'box-shadow': '0px 0px 15px 2px rgba(0, 0, 0, 0.5)',            
                '-webkit-border-radius': '4px',
                '-moz-border-radius': '4px',
                'border-radius': '4px',
                'padding': '1.5em 0.9em'
            }

I want my modals to end up in the center of the screen. Since you already do those calculations in your js to center the modal, I figured I would use your calculations instead of re-duplicating them in my code.

@GarethElms
Copy link
Owner

Think I've fixed it. I've put up a test at : http://garethelms.org/demo/backbone-js-modal-dialog/slide-test.html

The change I made was to add a null check when assigning animateProperties.top eg;

animateProperties.top = coords.top || modalOffset.top;

The changes are on line 374 and 380 here : http://garethelms.org/demo/backbone-js-modal-dialog/Backbone.ModalDialog.debug.js

Let me know if that fixes it for you in your web app and I'll update the repo.

Cheers

@jchu1
Copy link
Author

jchu1 commented Aug 8, 2013

Looks good!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@GarethElms @jchu1