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
CSS
Controller fragment
Thanks.
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>
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;
}
Controller fragment
$scope.slideDiv.effect("slide", { direction: 'right' }, 400);
Thanks.
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.
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.
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.
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.
The sooner IE11 dies the better.
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 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>
Had a look, I managed to get a local version up and running but still not sure what I am looking for?
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:
Change it to the following:
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:
However, I really only want/need the following:
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);
// }
};
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);
}
};
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();
However, I really only want/need the following:
$scope.StartShow();
I did that but I am not seeing anything different between IE and FF.
What happens is this
I get a scolling set of images at the top of the page.
I scroll down to the bottom of the page and on slide the page jumps back to the top in Firefox and Chrome as well - although in IE it is more pronounced - I had to add more <p>'s to the page to see the effect properly.
This happens because the container for the image is shrinking when the image is changed and so the page is becoming smaller so the page is jumping.
As a test do this (code snippets seem to be on the fritz so here is the code outside of a snippet)
<div class="carousel d3-card d3-card-main d3-card-announcement" style="height: 600px; overflow: hidden">
<div class="carousel d3-card d3-card-main d3-card-announcement" style="height: 600px; overflow: hidden">
Add the style to fix the height and the overflow hidden to hide the overflow of the images - you will see the problem goes away.
Standardise the height of your carousel container so the images don't overflow to affect page height and there should be no more jumping.
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?
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.
Also always, thanks Julian.
Premium Content
You need an Expert Office subscription to comment.Start Free Trial