jquery error

Hello,

I have a jquery error and I can not figure it out. It works on all browsers but not IE, it is driving me nuts.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('.fadein a:gt(0)').hide();
    setInterval(function(){
      $('.fadein a:first-child').fadeOut()
         .next('a').fadeIn()
         .end().appendTo('.fadein');},
      3000);
});
</script>

page http://tinyurl.com/6rdkqoa
LVL 1
movieprodwAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
hankknightConnect With a Mentor Commented:
This should address all the issues you raised:
<script type="text/javascript">
function HomeFade() {
 jQuery('.fadein a').css('opacity',1).css('zIndex','1');
 jQuery('.fadein a:eq(1)').css('zIndex','2');
 jQuery('.fadein a').show().first().css('zIndex','3').animate({
    opacity: 0,
  }, 500, function() {
    jQuery('.fadein a').first().appendTo(jQuery('.fadein'));
  });
}

jQuery(document).ready(function () {
  jQuery('.fadein a').hide();
  jQuery('.fadein a img').hide();
  jQuery('.fadein a img:eq(0)').attr('src', jQuery('.fadein a img:eq(0)').attr('src')).load(function() {
   jQuery('.fadein a img').show();
   jQuery('.fadein a').show().css('zIndex','1').css('position','absolute');
   jQuery('.fadein a').first().css('zIndex','3');
   setInterval("HomeFade()",4000);
  });
});
</script>

Open in new window

0
 
GaryCommented:
Why are you including two version of jquery?
One in the head and one just before the script
0
 
movieprodwAuthor Commented:
Well if I only include the one in the head the it doesn't work on any browser
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
movieprodwAuthor Commented:
I deleted the second jquery and you can see the slideshow does not load now
0
 
hankknightCommented:
This works:
<script type="text/javascript">
function HomeFade() {
 jQuery('.fadein a').show();
 jQuery('.fadein a').last().fadeOut(350, function() {
    jQuery('.fadein a').last().prependTo(jQuery('.fadein'));
 });
}

jQuery(document).ready(function () {
    setInterval("HomeFade()",3000);
});
</script>

Open in new window

0
 
hankknightCommented:
You should use:
jQuery(function(){

Open in new window

instead of
$(function(){

Open in new window

because you are also using prototype.js and there is a conflict with the "$" symbol.  I also made slight changes to the logic of your script.
0
 
movieprodwAuthor Commented:
I have ditched the second script and edited the script to be scriptlicious not jquery and it works in all browsers but in IE it does not fade.

Any idea?

<style type="text/css">
.fadein { position:relative; height:332px; width:500px; }
.fadein img { position:absolute; left:0; top:0; }
.fadein a {display:block;}
</style>
<script>
setInterval(function(){
  var as = $$('.fadein a'),
   visible = as.findAll(function(a){ return a.visible(); });
  if(visible.length>1) visible.last().fade({ duration: .3 });
    else as.last().appear({ duration: .3,
      afterFinish: function(){ as.slice(0,as.length-1).invoke('show');  } });
}, 3000);
</script>
0
 
movieprodwAuthor Commented:
Thank you! That worked, can you please help me make it so they are ordering opposite, for some reason your script made them load the last first.
0
 
movieprodwAuthor Commented:
This fixed the fade issue FYI

"Apparently there's a workaround!

Simply set the absolute/relative positioned elements the following css attributes:

opacity:inherit;
filter:inherit;"
0
 
movieprodwAuthor Commented:
I can just order them backwards.

The only issue I have is that it is not hiding the non active images, it flips through them on load and when you leave the page then go back.

Thank you for your help,
Matt
0
 
movieprodwAuthor Commented:
Thank you!
0
All Courses

From novice to tech pro — start learning today.