movieprodw
asked on
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
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
ASKER
Well if I only include the one in the head the it doesn't work on any browser
ASKER
I deleted the second jquery and you can see the slideshow does not load now
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>
You should use:
jQuery(function(){
instead of $(function(){
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.
ASKER
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).in voke('show '); } });
}, 3000);
</script>
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).in
}, 3000);
</script>
ASKER
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.
ASKER
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;"
"Apparently there's a workaround!
Simply set the absolute/relative positioned elements the following css attributes:
opacity:inherit;
filter:inherit;"
ASKER
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you!
One in the head and one just before the script