asked on

jQuery effects slide Bug in IE

I am using the jQuery effect slide for animation. It works great on Chrome, but in IE, if I scroll the animation up, it moves the page back down on it's own. Obviously not a good thing.

Any ideas on this would be greatly appreciated.

HTML

<!-- Carousel -->
<section id="carousel_gadget" ]>
  <div data-ng-click="toggleSettings()" data-ng-show="inEditMode" class="settings-cog">
    <i class="fas fa-cog"></i> {{gadgetTitle}}
  </div>

  <div class="carousel d3-card d3-card-main d3-card-announcement">
    <div class="carousel-inner">
      <div class="feature" ng-model="slides" ng-hide="HideSlide">
        <div id="jq" style="float: left;">
          <img class="feature-img" data-ng-src="{{slides[currentItem].Image}}" alt="{{slides[currentItem].Title}}" data-ng-if="!slides[currentItem].IsPublishingImage" />

          <div class="feature-content">
            <div><a class="read-more-small-button" href="/sites/portal/Pages/Some_ShowAll.aspx">More</a></div>
            <div class="eyebrow">List Data</div>
            <div class="title"><a href="/sites/portal/Pages/Some_ReadMore.aspx?Listname=ListName&ItemID={{slides[currentItem].Id}}">{{slides[currentItem].Title | adjustlength:100}}</a></div>
            <div class="date">{{slides[currentItem].Date | date:'MMMM d, y'}}</div>
            <div class="blurb">{{slides[currentItem].Description | adjustlength:150}}</div>
            <div class="button"><a href="/sites/portal/Pages/Some_ReadMore.aspx?Listname=ListName&ItemID={{slides[currentItem].Id}}">Read More</a></div>

          </div><!-- feature content -->
        </div>
        <div class="counter">{{currentItem + 1}} of {{slides.length}} Amount of Data</div>

        <div class="controls">
          <div class="left-arrow" ng-click="PreviousRecord(false)"></div>

          <div class="items">

            <div id="s0" data-ng-class="isActiveSlide1(SlideZero)"><a href="#" ng-click="GoToRecord(SlideZero)">{{slides[SlideZero].Title | adjustlength:50}}</a></div>
            <div id="s1" data-ng-class="isActiveSlide1(SlideOne)"><a href="#" ng-click="GoToRecord(SlideOne)">{{slides[SlideOne].Title | adjustlength:50}}</a></div>
            <div id="s2" data-ng-class="isActiveSlide1(SlideTwo)"><a href="#" ng-click="GoToRecord(SlideTwo)">{{slides[SlideTwo].Title | adjustlength:50}}</a></div>

          </div>
          <div class="right-arrow" ng-click="NextRecord(false)"></div>

        </div><!-- controls -->
      </div><!-- feature -->
    </div><!-- carousel inner-->
  </div><!-- carousel -->

  <gadget-carousel-settings></gadget-carousel-settings>
</section>

Open in new window

CSS

.carousel {
  width: 798px;
  display: block;
}

.carousel-inner {
  padding: 10px 0px;
}

.feature {
  background: white;
  height: auto;
  display: block;
  clear: both;
  float: left;
}

.feature-img {
  width: 270px;
  height: 240px;
  background: #999;
  display: inline;
  float: left;
}

.feature-content {
  display: inline;
  width: 508px;
  padding: 0px 0px 0px 20px;
  display: inline;
  float: left;
}
.feature-content .read-more-small-button {
  margin-top: 0px !important;
}
  .feature-content .more {
    text-align: right;
    display: inline-block;
    float: right;
    font-family: AktivGrotesk-Regular;
    font-size: 14px;
    line-height: 1.14;
    text-align: right;
    color: #000;
  }
  /*.feature-content .more::after {
    content: "»";
    vertical-align: bottom;
    margin-top: -1px;
    color: rgb(0, 0, 0);
    background: 0px 0px;
    padding: 0px;
    content: "\f054";
    font-family: FontAwesome;
    margin-left: 5px;
    font-size: 11px;
}*/
  .feature-content .eyebrow {
    line-height: 1.43;
    letter-spacing: .8px;
    font-family: AktivGrotesk-Regular;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    margin: 0;
    padding-bottom: 16px;
    width: 50%;
    display: inline-block;
  }

  .feature-content .title {
    font-family: 'Lyon Text Web';
    font-weight: 700;
    color: #000 !important;
    margin: 0 0 9px;
    letter-spacing: .2px;
    display: -webkit-box;
    height: auto;
    font-size: 24px;
    line-height: 26px;
  }

    .feature-content .title a {
      text-decoration: none;
      color: black;
    }

      .feature-content .title a:hover {
        text-decoration: underline;
        color: black;
      }

  .feature-content .date {
    font-size: 13px;
    font-family: AktivGrotesk-Regular;
    font-weight: 400;
    margin-bottom: 8px;
    text-transform: none;
    line-height: 1.43;
    letter-spacing: .2px;
  }

  .feature-content .blurb {
    text-transform: none;
    font-weight: normal;
    font-size: 15px;
    font-family: Lyon Text Web;
    letter-spacing: normal;
  }

  .feature-content .button a {
    display: block;
    width: 115px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #000;
    text-decoration: none;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.5px;
    color: #fff;
    margin-top: 10px;
    font-family: AktivGrotesk-Regular;
  }

    .feature-content .button a:hover {
      background: #32d700;
    }

    div .feature {
      transition: all linear 10.5s;
    }

    .ng-hide {
      height: 0;
      width: 0;
      background-color: transparent;
      top: -200px;
      left: 200px;
    }


.counter {
  display: block;
  clear: both;
  font-size: 11px;
  font-family: AktivGrotesk-Regular;
  font-weight: 400;
  padding: 8px 0px 8px 20px;
  text-transform: none;
  line-height: 1.43;
  letter-spacing: .2px;
}

.controls {
  height: 80px;
  background: #fff;
  width: 100%;
  margin: 0 auto;
  display: block;
  clear: both;
}

  .controls .items {
    width: 100%;
  }

  .controls .items > div.active {
    border-top: 1px solid #32d700;
  }

    .controls .items > div {
      width: 225px;
      height: 100%;
      display: inline;
      float: left;
      padding: 8px;
      margin: 0 8px;
      border-top: 1px solid #000;
      vertical-align: top;
      font-size: 15px;
      line-height: 20px;
      text-align: left;
      color: #000;
      font-family: 'Lyon Text Web';
      letter-spacing: .2px;
      font-weight: 700;
    }

Open in new window

Controller fragment

$scope.slideDiv.effect("slide", { direction: 'right' }, 400);

Open in new window

Thanks.

Julian Hansen

Are we talking Edge or IE?

If Edge it is worth pursuing - if it is IE it is (in my view) not.

Howard Bash

ASKER

We're talking about IE 11.0

Julian Hansen

In all honesty Howard - I lost interest in IE11 shortly after its release. The effort required to support a browser that does not support current standards makes it worth considering abandoning it altogether. According to the latest W3 stats IE11 makes up around 3% of the browser share - yet it requires most of the effort to get code to work. That equation does not work for me.

Having said that we can try to solve it but not off the code you posted. The problem is not the code (if it is working in Chrome and FF) - the problem is IE so we would need to look at a workaround.

To do this we would need a minimal working example of the problem. You are using AngularJS as well so we need to determine if this is a jQuery library issue or something on the AngularJS side that is causing it.

My advice is to put together a working sample that uses the minimum code necessary and put that up on your server or on a Fiddle and let's go from there.

Without a means to replicate it (the code you have posted is not enough to do this) it is not feasible to try and solve this.

leakim971

IE11 : 3.25%
https://www.w3counter.com/globalstats.php

Howard Bash

ASKER

Julian,

I completely agree about IE, however, the customer is always right, yes?

No choice on this.

Julian Hansen

the customer is always right, yes?

Not always, I have convinced many to ignore IE11. My philosophy is if we pander to the likes of Microsoft who make the development effort that much more difficult they won't change.

I get where you are coming from - my personal standpoint is I don't support IE11.

Having said that - did you read the other part of my post.

Howard Bash

ASKER

Julian,

Just getting back to this. JSFiddler doesn't support IE (big surprise)...

Julian Hansen

Not surprised. This has been going on since IE6 - Microsoft has been aware of it and 5/6 versions of IE later we are still dealing with the same nonsense.

The sooner IE11 dies the better.

Howard Bash

ASKER

Hi,
I think I have it on plunker:
https://plnkr.co/edit/X37XbQEd4sUTF3cnFGhQ?p=preview

However, I can't seem to get the jQuery-ui affect slide to work.

See the method: ShowSlideDiv

I commented out the slide call and am just swapping images via index incrementing.

To see the issue, you probably need to get the jQuery UI code to work instead and then scroll to bottom of page to text hiding the carousel. It should jump up in IE>

Julian Hansen

Had a look, I managed to get a local version up and running but still not sure what I am looking for?

Howard Bash

ASKER

Hi,

I am trying to demonstrate the page jumping during the "slide" transitions. However, in Plunker I wasn't able to get the slide affect to work so I just switched slides to display the next slide.

Ideally in the following function:

 
$scope.ShowSlideDiv = function() {
    $scope.slideDiv.show();

    //Uncommenting these lines and commenting the line above breaks the carousel
    //Requires jQuery-UI
    //if ($scope.slideDiv) {
    //  $scope.slideDiv.effect("slide", {
    //    direction: 'right'
    //  }, 400);
    //  }
  };

Open in new window

Change it to the following:

 $scope.ShowSlideDiv = function() {

// I added this as a substitute for the jQuery UI slide effect --->    $scope.slideDiv.show();

    //Requires jQuery-UI
    if ($scope.slideDiv) {
      $scope.slideDiv.effect("slide", {
        direction: 'right'
      }, 400);
     }
  };

Open in new window

When I did so in Plunker, the call fails and the slides don't display. If you can get the effect to work, the issue is that as you scroll up, hiding the carousel and showing the text paragraphs, the page jumps up in IE only (lovely). The target audience uses IE.

Also, at the bottom of the code, you'll find the following:

  $interval(function() {
    //$scope.value++;
    $scope.AutoNextRecord(true);
  }, 2000);


  //$scope.StartShow();

Open in new window

However, I really only want/need the following:

  
$scope.StartShow();

Open in new window

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Howard Bash

ASKER

I'll try that now. The images are all the same size though. Also, I assume that this jumping doesn't happen in Chrome. And, did you switch to use the jQuery-ui effect code?

Howard Bash

ASKER

I set the style attribute on the DIV and that worked. This is fine. I would still like to see why only IE has this problem and also how to get plunker to work with that jQuery-UI effect slide method.

Also always, thanks Julian.

Julian Hansen

The other browsers do have the problem as I mentioned in my earlier email - just not as pronounced. I am guessing just different browser rendering strategies.

As to the Plunker - I would open a separate question for that. I downloaded your source and got it working locally.

You are welcome.

Howard Bash

ASKER

Julian,

As usual comes to the rescue. Thank you sir!

-Howard

Julian Hansen

You are welcome