infinite loop in IE7...
hey guys, i got a problem with my Jquery script. Would appriciate it if you could help me out
.
I add a Jquery carousel, but it'll cause a infinite loop in IE7... works great in Firefox thought.. I made a lil code that if you klick on the main menu a div slides out with included text in it. So the div where the Jcarousel is in.
This is the code from my index page:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css" />
<title>Home</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//main menu
$(document).ready(function(){
$("#a, #b, #c, #d, #e").fadeTo("fast", 0.00);
$("#a, #b, #c, #d, #e").hover(
function () {
$(this).fadeTo("fast",1.00);
},
function () {
$(this).fadeTo("fast", 0.00);
}
);
//Home page......................................................................
$("#contentcontainer").hide();
$(".menu").click(function() {
$pagina = $(this).attr("href");
$("#opvulling").hide();
$("#contentcontainer").slideUp("slow", function(){
$.post($pagina,{},function(inhoud){
if ($("#contentcontainer").is(":hidden")) {
$("#contentcontainer").slideDown("slow");
}
$("#content").html(inhoud);
if($pagina == "indexbestanden/portfolio.html"){
$('#mycarousel').jcarousel({
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback
});
}
});
});
return false;
});
});
</script>
<!-- Jquery Carosel.................................................................... -->
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
</script>
</head>
<body>
<div id="site">
<div id="buttons">
<div id="home"><a id="a" class="menu" href="indexbestanden/home.html"><img src="images1/1.jpg" /></a></div>
<div id="info"><a id="b" class="menu" href="indexbestanden/persoonlijk.html"><img src="images1/2.jpg" /></a></div>
<div id="portfolio"><a id="c" class="menu" href="indexbestanden/portfolio.html"><img src="images1/3.jpg" /></a></div>
<div id="close"><a id="d" class="menu" href="indexbestanden/closeup.html"><img src="images1/4.jpg" /></a></div>
<div id="contact"><a id="e" class="menu" href="indexbestanden/contact.html"><img src="images1/5.jpg" /></a></div>
</div>
<div id="opvulling"></div>
<div id="contentcontainer">
<div id="content">
</div>
</div>
<div id="footer1"></div>
</div>
</body>
this is the included text file from portfolio.html:
<h2>Portfolio</h2>
<p>mine portfolio</p>
<div id="wrap">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><a href="http://www.google.nl"><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://www.google.nl"><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://www.google.nl"><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://www.google.nl"><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://www.google.nl"><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://www.google.nl"><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://www.google.nl"><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://www.google.nl"><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://www.google.nl"><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://www.google.nl"><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></a></li>
</ul>
</div>
.
I add a Jquery carousel, but it'll cause a infinite loop in IE7... works great in Firefox thought.. I made a lil code that if you klick on the main menu a div slides out with included text in it. So the div where the Jcarousel is in.
This is the code from my index page:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css" />
<title>Home</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//main menu
$(document).ready(function(){
$("#a, #b, #c, #d, #e").fadeTo("fast", 0.00);
$("#a, #b, #c, #d, #e").hover(
function () {
$(this).fadeTo("fast",1.00);
},
function () {
$(this).fadeTo("fast", 0.00);
}
);
//Home page......................................................................
$("#contentcontainer").hide();
$(".menu").click(function() {
$pagina = $(this).attr("href");
$("#opvulling").hide();
$("#contentcontainer").slideUp("slow", function(){
$.post($pagina,{},function(inhoud){
if ($("#contentcontainer").is(":hidden")) {
$("#contentcontainer").slideDown("slow");
}
$("#content").html(inhoud);
if($pagina == "indexbestanden/portfolio.html"){
$('#mycarousel').jcarousel({
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback
});
}
});
});
return false;
});
});
</script>
<!-- Jquery Carosel.................................................................... -->
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
<script type="text/javascript">
function mycarousel_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
</script>
</head>
<body>
<div id="site">
<div id="buttons">
<div id="home"><a id="a" class="menu" href="indexbestanden/home.html"><img src="images1/1.jpg" /></a></div>
<div id="info"><a id="b" class="menu" href="indexbestanden/persoonlijk.html"><img src="images1/2.jpg" /></a></div>
<div id="portfolio"><a id="c" class="menu" href="indexbestanden/portfolio.html"><img src="images1/3.jpg" /></a></div>
<div id="close"><a id="d" class="menu" href="indexbestanden/closeup.html"><img src="images1/4.jpg" /></a></div>
<div id="contact"><a id="e" class="menu" href="indexbestanden/contact.html"><img src="images1/5.jpg" /></a></div>
</div>
<div id="opvulling"></div>
<div id="contentcontainer">
<div id="content">
</div>
</div>
<div id="footer1"></div>
</div>
</body>
this is the included text file from portfolio.html:
<h2>Portfolio</h2>
<p>mine portfolio</p>
<div id="wrap">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><a href="http://www.google.nl"><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://www.google.nl"><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://www.google.nl"><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://www.google.nl"><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://www.google.nl"><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://www.google.nl"><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://www.google.nl"><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://www.google.nl"><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://www.google.nl"><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></a></li>
<li><a href="http://www.google.nl"><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></a></li>
</ul>
</div>
Topic Participants
isenhart