AboutPricingCommunityTeamsStart Free TrialLog in
Avatar of Howard Bash
Howard Bash
Flag for United States of America 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.
ChromeJavaScriptjQueryInternet Explorer (IE)Web Browsers
Avatar of undefined
Last Comment
Julian Hansen
8/22/2022 - Mon
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.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
leakim971
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.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
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>
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
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
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
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?
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
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
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Julian Hansen
You are welcome
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent