Could anyone eplain to me, why this isn't working in IE?
It's fading perfectly into each image in other browsers, but when executed in IE, it only shows the last image(image 5) and stays that way.
And maybe come up with a possible solution ? I am very new to jquery
JS:
var rotationTime = 3000;
var fadeTimer = 500;
var zStart = 25;
var totalBanners;
var currentImage = 1;
$(document).ready(function(){
totalBanners = $('#fade-slider > div').length;
for(i=1;i<=totalBanners;i++){
$('#img-' + i).css('z-index', '' + (zStart-i) + '');
}
$(document).everyTime(rotationTime, 'imagefader', function(){
if(currentImage < totalBanners){
$('#img-' + currentImage).animate({opacity: 0}, fadeTimer);
currentImage += 1;
}
else{
currentImage = 1;
$('#img-' + currentImage).animate({opacity: 1}, fadeTimer, 'linear', function(){
for(i=1;i<=totalBanners;i++){
$('#img-' + i).animate({opacity: 1}, 0);
}
});
}
}, 0);
});
CSS:
#charset "UTF-8";
#fade-slider {
width:570px;
height:207px;
overflow:hidden;
margin:0px;
padding:0px;
position:relative;
}
.position-zero {
position:absolute;
top:0px;
left:0px;
}
HTML:
<div id="fade-slider">
<div id="img-1" class="position-zero"><img src="images/slider/image-1.jpg" alt="Image1" /></div>
<div id="img-2" class="position-zero"><img src="images/slider/image-2.jpg" alt="Image2" /></div>
<div id="img-3" class="position-zero"><img src="images/slider/image-3.jpg" alt="Image3" /></div>
<div id="img-4" class="position-zero"><img src="images/slider/image-4.jpg" alt="Image4" /></div>
<div id="img-5" class="position-zero"><img src="images/slider/image-5.jpg" alt="Image5" /></div>
</div>
I believe you're taling about IE8 - when mentioning IE ...
opacity
will not work properly in IE8 , try something like this
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
that last part 'Opacity=50' would equal opacity: .5 just adjust accordingly
for IE5- IE7 try this
filter: alpha(opacity=50);
Related
I created a kind of fake scroll using JS as my boss is using a Mac and scrollbars are turned off by default and he wanted to see what was going on.
My code for this is like so:
$(function() {
var popular_products_span = $("#popular_products_span");
var items = popular_products_span.children();
popular_products_span.prepend('<div id="right-button"><</div>');
popular_products_span.append('<div id="left-button">></div>');
items.wrapAll('<div id="inner" />');
popular_products_span.find('#inner').wrap('<div id="outer"/>');
var outer = $('#outer');
var updateUI = function() {
var maxWidth = outer.outerWidth(true);
var actualWidth = 0;
$.each($('#inner >'), function(i, item) {
actualWidth += $(item).outerWidth(true);
});
};
updateUI();
$('#right-button').click(function() {
var leftPos = outer.scrollLeft();
outer.animate({
scrollLeft: leftPos - 300
}, 300);
});
$('#left-button').click(function() {
var leftPos = outer.scrollLeft();
outer.animate({
scrollLeft: leftPos + 300
}, 300);
});
$(window).resize(function() {
updateUI();
});
});
#popular_products_span{
overflow:hidden;
}
img{
padding:10px;
}
#outer {
float:left;
width:400px;
overflow:hidden;
white-space:nowrap;
display:inline-block;
}
#left-button {
float:left;
}
#right-button {
float:left;
}
#inner:first-child {
margin-left:0;
}
.hide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="popular_products_span">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
</span>
However, I want it to scroll through endlessly so instead of coming to an end you will go back to the start again and am not sure how to go about this.
This is what I ended up using much easier
https://kenwheeler.github.io/slick/
I am trying to race two cars when a button is pushed. I want them to move at different speeds.
I am using startRaceButton.onClick to run my two start race functions which set intervals for my images to move. I also have it set to clear the interval after it reaches the finish line.
The problem I am having is, when the button is clicked nothing happens.
<script type="text/javascript">
window.onload = function() {
var redSpeed = 1*(Math.floor((Math.random() * 10) + 1));
var blueSpeed = 1*(Math.floor((Math.random() * 10) + 1));
var blueLeft = 81;
var redLeft = 81;
var redInterval = 10;
var blueInterval = 10;
var redTimer;
var blueTimer;
var startRaceButton = document.getElementById("imgStartButton");
var redCar = document.getElementById("imgRedCar");
var blueCar = document.getElementById("imgBlueCar");
var goRed = function() {
redCar.style.left = redLeft + "px";
redLeft += redSpeed;
if (redLeft > 899) {
clearInterval(redTimer);
}
}
var goBlue = function() {
blueCar.style.left = blueLeft + "px";
blueLeft += blueSpeed;
if (blueLeft > 899) {
clearInterval(blueTimer);
}
}
var startRed = function() {
redTimer = setInterval(goRed, redInterval);
}
var startBlue = function() {
blueTimer = setInterval(goBlue, blueInterval);
}
startRaceButton.onclick = function() {
startRed();
startBlue();
}
</script>
</head>
<body>
<div style= "display:block; margin:0; padding:0; width:1005px; height:400px;" id="container">
<div id="left" style= "float:left; display:block; margin:0; padding:0; width:80px; height:400px">
<img id="imgStartButton" src="http://ondemandweb.pbworld.net/pbucontent/images/GOButton.jpg" width="60" height="60" >
</div>
<div id="box" style="float:left; display:block; margin:0; padding:0; width:920px; height:400px;">
<img id="imgBlueCar" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTxJr8SKga0S-nM4JgzlIXk6XrmgN8fwdDbvA6tKGWV65fmeaYWDA" style="position:absolute; left:81px; top:100px" width="100" height="60" alt="blue">
<img id="imgRedCar" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8nsZ52wkuxrlT3aiqFicu_YYOVJ1hSKCI2-0MY6G4QKSGHIj4tw" style="position:absolute; left:81px; top:250px" width="100" height="60" alt="red">
</div>
<div id="right" style="float:left; display:block; margin:0; padding:0; width:5px; height:400px; background-color:black; ">
</div>
</div>
</body>
your script is running before your DOM loads. Therefore your bindings don't have meaning.
try including the script after the body of your html.
I was working with responsive web design and I wanted to slide some images in to a page. I tried some plugins but the problem with the plugin is it uses width and height property and also assigns position: absolute. So I thought of changing the src of the image myself using js and it worked fine, but can I give some transition effect to it?
Demo fiddle
What I have done is:
var i = 0;
var total = 2;
window.setInterval(function() {
show_hide();
}, 1000);
function show_hide() {
var img = $('.image-holder img, .image-holder2 img');
//alert(img.length);
if (i % 2 == 0) {
img[0].src = 'http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png';
img[1].src = 'http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png';
i = 0;
}
else {
img[0].src = 'http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834';
img[1].src = 'http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834';
}
i++;
}
My HTML is as follows:
<div class="image-holder" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" />
</div>
<div class="image-holder2" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" />
</div>
Here's what I put together. jsFiddle
javascript
var img = $(".image-holder img")
var i = 0;
var count = img.length - 1;
setInterval(function() {
showImage(i);
i++;
if (i > count) i = 0;
}, 2000);
function showImage(i) {
img.eq(i - 1).animate({
"opacity": "0"
}, 1000);
img.eq(i).animate({
"opacity": "1"
}, 1000);
}
HTML
<div class="image-holder" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" />
</div>
<div class="image-holder" >
<img src="http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png" />
</div>
CSS
.image-holder img{ opacity: 0;}
.image-holder { position: absolute; }
Could anyone eplain to me, why this isn't working in IE?
It's fading perfectly into each image in other browsers, but when executed in IE, it only shows the last image(image 5) and stays that way.
And maybe come up with a possible solution ? I am very new to jquery
JS:
var rotationTime = 3000;
var fadeTimer = 500;
var zStart = 25;
var totalBanners;
var currentImage = 1;
$(document).ready(function(){
totalBanners = $('#fade-slider > div').length;
for(i=1;i<=totalBanners;i++){
$('#img-' + i).css('z-index', '' + (zStart-i) + '');
}
$(document).everyTime(rotationTime, 'imagefader', function(){
if(currentImage < totalBanners){
$('#img-' + currentImage).animate({opacity: 0}, fadeTimer);
currentImage += 1;
}
else{
currentImage = 1;
$('#img-' + currentImage).animate({opacity: 1}, fadeTimer, 'linear', function(){
for(i=1;i<=totalBanners;i++){
$('#img-' + i).animate({opacity: 1}, 0);
}
});
}
}, 0);
});
CSS:
#charset "UTF-8";
#fade-slider {
width:570px;
height:207px;
overflow:hidden;
margin:0px;
padding:0px;
position:relative;
}
.position-zero {
position:absolute;
top:0px;
left:0px;
}
HTML:
<div id="fade-slider">
<div id="img-1" class="position-zero"><img src="images/slider/image-1.jpg" alt="Image1" /></div>
<div id="img-2" class="position-zero"><img src="images/slider/image-2.jpg" alt="Image2" /></div>
<div id="img-3" class="position-zero"><img src="images/slider/image-3.jpg" alt="Image3" /></div>
<div id="img-4" class="position-zero"><img src="images/slider/image-4.jpg" alt="Image4" /></div>
<div id="img-5" class="position-zero"><img src="images/slider/image-5.jpg" alt="Image5" /></div>
</div>
Try changing
$('#img-' + i).css('z-index', '' + (zStart-i) + '');
to
$('#img-' + i).css({'z-index':(zStart-i)});
or
$('#img-' + i).css('z-index', (zStart-i));
I'm not going to lay claim that it will work. But I think it could be just the way IE is interpreting things, I think it may be being interpreted as a string rather than an INT value and in that, not rendering it correctly. But again not saying that is the issue exactly, just something about that line doesn't sit right in my head, and without testing it (being on a Mac currently and not having IE) I can't be sure.
I followed a tutorial to create a simple javascript slideshow but I am having a strange bug... The first 2 cycles work perfectly, but once the counter resets the slideshow begins showing the previous slide quickly then trying to fade in the correct slide. Any idea what is causing this?
I have 3 images (named Image1.png, Image2.png, and Image3.png) in a folder for my simple slideshow and 3 divs set up like this:
<div id="SlideshowFeature">
<div id="counter">
3
</div>
<div class="behind">
<img src="SlideShow/image1.png" alt="IMAGE" />
</div>
<div class="infront">
<img src="SlideShow/image1.png" alt="IMAGE" />
</div>
</div>
My javascript looks like this
var nextImage;
var imagesInShow;
var currentImage;
var currentSrc
var nextSrc
function changeImage() {
imagesInShow = "3";
currentImage = $("#counter").html();
currentImage = parseInt(currentImage);
if (currentImage == imagesInShow) {
nextImage = 1;
}
else {
nextImage = currentImage + 1;
}
currentSrc = $(".infront img").attr("src");
nextSrc = "SlideShow/image" + nextImage + ".png";
$(".behind img").attr("src", currentSrc);
$(".infront").css("display", "none");
$(".infront img").attr("src", nextSrc);
$(".infront").fadeIn(1000);
$("#counter").html(nextImage);
setTimeout('changeImage()', 5000);
}
$(document).ready(function () {
changeImage();
});
EDIT:
Also here is my CSS
#SlideshowFeature
{
text-align:center;
margin: 0 auto;
width:800px;
background: #02183B;
height:300px;
float: left;
overflow:hidden;
display:inline;
}
#SlideshowFeature div
{
width: 800px;
height:300px;
position:absolute;
}
#counter
{
display:none;
}
The problem seem to be in your HTML structure (and not in your JS):
...
<img src="SlideShow/image1.png" alt="IMAGE" />
...
<img src="SlideShow/image1.png" alt="IMAGE" />
...
I think you meant to put image1.png and then image2.png
.infront must be in front and .behind must be behind
.behind {
z-index: 1;
}
.infront {
z-index: 255;
}
And I also moved re-scheduling logic to fadeIn callback:
$(".infront").fadeIn(1000, function(){setTimeout('changeImage()', 2500)});
$("#counter").html(nextImage);
//setTimeout('changeImage()', 2500);
Looks good for me now.