We help IT Professionals succeed at work.
Get Started

jQuery effects slide Bug in IE

211 Views
Last Modified: 2020-01-27
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.
Comment
Watch Question
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2017
Commented:
This problem has been solved!
Unlock 1 Answer and 17 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant

An Experts Exchange subscription includes unlimited access to online courses.

Get Started
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE