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.
Related
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 wrote a code for a 5 image slideshow and the NEXT and PREVIOUS buttons are supposed to take you to the next and previous slide but nothing happens when i press them. Can anyone help me out? some more detail some more detail some more detail some more detail
var slideShow = [];
function newImage(source, caption) {
var pic = new Object();
pic.src = source;
pic.cap = caption;
return pic;
}
slideshow[0] = newImage("slideshow1.jpg", "The Happy Cat");
slideshow[1] = newImage("slideshow2.jpg", "The Tube Cat");
slideshow[2] = newImage("slideshow3.jpg", "The Chubby Cat");
slideshow[3] = newImage("slideshow4.jpg", "if I fits I sits ");
slideshow[4] = newImage("slideshow5.jpg", "The classic Nicolas Cage");
var i = 0;
function nextPic() {
i = (i + 1);
if (i == 5)
i = 0;
document.getElementById("picture").innerHTML = '<img src= ' +
slideshow[i].src + ' id="images" height="100%"' +
' alt="my picture"> <p>' + slideshow[i].cap + '</p>';
}
function prevPic() {
if (i == -1)
i = 4;
else
i = (i - 1);
document.getElementById("picture").innerHTML = '<img src= ' +
slideshow[i].src + ' id="images" height="100%"' +
' alt="my picture"> <p>' + slideshow[i].cap + '</p>';
}
#picture {
width: 200px;
margin-left: 50;
margin-right: auto;
}
div.buttons {
width: 200px;
margin-left: auto;
margin-right: auto;
}
div.info {
width: 500px;
text-align: center;
margin-left: auto;
margin-right: auto;
border: 3px solid purple;
}
button {
font-size: 12px;
}
button.left {
auto;
margin-right: 418px;
}
p {
text-align: center;
}
<h3>Project 2: Slide Show</h3>
<h4>I do not own any of the following pictures</h6>
<h4>All pictures acquired online, unknown owners</h4>
<br />
<div id="picture">
<img src="slideshow1.jpg" id="images" alt="my picture" height="200 px">
<p>The Happy Cat</p>
</div>
<div class="buttons">
<button class="left" onClick="prevPic()">PREVIOUS</button>
<button onClick="nextPic()">NEXT</button>
</div>
1) Typo in slideShow
2)Not related but you cannot have duplicate id instead use class
var slideshow = [];
function newImage(source, caption) {
var pic = new Object();
pic.src = source;
pic.cap = caption;
return pic;
}
slideshow[0] = newImage("slideshow1.jpg", "The Happy Cat");
slideshow[1] = newImage("slideshow2.jpg", "The Tube Cat");
slideshow[2] = newImage("slideshow3.jpg", "The Chubby Cat");
slideshow[3] = newImage("slideshow4.jpg", "if I fits I sits ");
slideshow[4] = newImage("slideshow5.jpg", "The classic Nicolas Cage");
var i = 0;
function nextPic() {
i = (i + 1);
if (i == 5)
i = 0;
document.getElementById("picture").innerHTML = '<img src= ' +
slideshow[i].src + ' class="images" height="100%"' +
' alt="my picture"> <p>' + slideshow[i].cap + '</p>';
}
function prevPic() {
if (i == -1)
i = 4;
else
i = (i - 1);
document.getElementById("picture").innerHTML = '<img src= ' +
slideshow[i].src + ' class="images" height="100%"' +
' alt="my picture"> <p>' + slideshow[i].cap + '</p>';
}
<h3> Project 2: Slide Show </h3>
<h4> I do not own any of the following pictures </h6>
<h4> All pictures acquired online, unknown owners </h4>
<br />
<div id="picture">
<img src="slideshow1.jpg" class="images" alt="my picture" height="200 px">
<p>The Happy Cat</p>
</div>
<div class="buttons">
<button class="left" onClick="prevPic()">PREVIOUS</button>
<button onClick="nextPic()">NEXT</button>
</div>
You declaring var slideShow = []; array, however later you are populating slideshow with the code:
slideshow[0] = newImage("slideshow1.jpg","The Happy Cat");
which throws ReferenceError because you can't set property of the undefined.
Use var slideshow = [] instead of var slideShow = []
How do I get my fading image to be over the top of my transitioning one. I am not familiar with Javasript and I need to make this work for my website if anyone could help it would be fantastic! Here is my code.
<center> < <div id="main_over"></div>
<div id="main_img"></div>
<div id="himg" style="display:none; clear:both; margin-top:40px;">
<img id="si_15" src="Images\MS1.jpg" />
<img id="si_16" src="Images\MS2.jpg" />
<img id="si_17" src="Images\MS3.jpg" />
<img id="si_18" src="Images\MS4.jpg" />
</div>
<style>
#main_over{position:absolute; z-index:10; width:100; height:100; background:#000; display:block;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var i = 0;
$('#himg img').each(function(){
if(i == 0)
{
$('#main_over').html('<img src="' + $(this).attr('src') + '" alt="" />');
}
if(i == 1)
{
$('#main_img').html('<img src="' + $(this).attr('src') + '" alt="" />');
}
i ++;
slide.arr.push($(this).attr('src'));
});
setTimeout(function(){
if(slide.arr.length < 2)
slide.fade(0);
else
slide.fade(2);
}, 5000);
});
var slide = {
arr: Array(),
fade: function(i)
{
$('#main_over').fadeOut("medium");
setTimeout(function(){slide.next(i);}, 2000);
},
next: function(i)
{
$('#main_over').html($('#main_img').html());
$('#main_over').css('display', 'block');
$('#main_img').html('<img src="' + slide.arr[i] + '" alt="" />');
i++;
if(i >= slide.arr.length)
i = 0;
setTimeout(function(){slide.fade(i);}, 5000);
}
}
``</script> /> </center>
The positioning of the images isn't a javascript issue, it's a CSS one.
Make the container of the images a fixed width/height (i.e. same as the images) and position:relative;
Then make all the images position:absolute, and top:0px, left:0px. This will position them all in the same place on the page.
You can then control their relative depth with z-index, and adjust the opacity of images as required to generate transitions between images.
...or just download one of the hundreds of free slideshow widgets on the web.
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);
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.