Question

I’m just starting out using JQuery, have been reading and reading and have successfully implemented some easy stuff, changing classes etc. I’ve been trying to work on a small flyout panel for a WordPress site. I’m using the Protonet fork of the InView plugin: https://github.com/protonet/jquery.inview/tree/

which works fine in FF, Safari, Chrome, IE8 and IE7 if I just call the script and don’t do anything with it. Once I add the following scripts to animate the flyout, things work in everything except IE7, and in that browser, none of the other small small class changing scripts work either, breaking layouts.

jQuery(document).ready(function($){

$('div#utility-after-singular').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
  if (isInView) {
    // element is now visible in the viewport
$('.flyoutBox')
.animate(
    {
        marginLeft: '0'
    },
    {
        duration: 'slow',
        easing: 'easeInExpo',
        queue: 'true',
    });
  }
    else {
        // element has gone out of viewport
        $('.flyoutBox')
        .animate(
            {
            marginLeft: '598px'
            },
            {
            duration: 'slow',
            easing: 'easeInExpo',
            queue: 'true',
            }
        );
    }
});
});
jQuery(document).ready(function($){
$('#closeButton').click(function () {
$('.flyoutBox')
.animate(
    {
        marginLeft: '598px'
    },
    {
        duration: 'slow',
        easing: 'easeOutExpo',
        queue: 'true',
    }
);
$('div#utility-after-singular').unbind('inview');
});
});

Again, I’m very new JQuery and anything outside of HTML/CSS, so sorry if I’m just missing something ridonkulously obvious. Much thanks for any advice.

Answer 1

{
    duration: 'slow',
    easing: 'easeInExpo',
    queue: 'true',
});

Remove that trailing ,. You have a few to remove. IE7 doesn’t like those trailing commas.