Jump to content
  • 0

Слайдшоу работает во всех браузерах, кроме Chrome

averin13

Asked by averin13,

 Share

Question

averin13 Explorer

averin13

Posted
Posted

Есть слайдшоу на вот этой странице: http://web-luck.ru/cookie/# . По сути при нажатии на кнопку картинки должны прокручиваться, а в Chrome это не выполняется.Если что Chrome 15.0.874.120 m, Windows 7. Вот сами исходники:

Javascript


$(document).ready(function () {
	if ($.browser.webkit && document.readyState != "complete"){
		setTimeout( arguments.callee, 100 );
		return;
	}

	var content  = $("#gallery ul").html().replace(/\t/g,'').replace(/\r\n/g,'').replace(/\n/g,'').replace(/\<\/A\> \<LI\>/g,'</A></LI><LI>');
	$("#gallery ul").html(content)

	var width = $("#gallery ul").attr("scrollWidth") - $("#gallery ul").attr("clientWidth");
	var indent = 0;
	var factor = 2.5;
	var elapsed = width * factor;

	var widthStop = 100;
	var factorStop = 8;

	$("#gallery .prev").mouseenter ( function () {
		$('#gallery ul').stop(true);
		indent = - parseInt ( $('#gallery ul').css('text-indent') );
		$('#gallery ul').animate({ textIndent: 0}, elapsed - ( width - indent ) * factor, 'easeOutQuad' );
	});

	$("#gallery .next").mouseenter ( function () {
		$('#gallery ul').stop(true);
		indent = - parseInt ( $('#gallery ul').css('text-indent') );
		$('#gallery ul').animate({ textIndent: -width}, ( width - indent ) * factor, 'easeOutQuad' );
	});

	$("#gallery .prev").mouseleave ( function () {
		$('#gallery ul').stop(true);
		indent = - parseInt ( $('#gallery ul').css('text-indent') );

		if ( indent > widthStop )
			$('#gallery ul').animate({ textIndent: '+='+widthStop }, widthStop * factorStop, 'easeOutQuad' );
		else if ( indent > 0 )
			$('#gallery ul').animate({ textIndent: 0 }, indent * factorStop, 'easeOutQuad' );
	});

	$("#gallery .next").mouseleave ( function () {
		$('#gallery ul').stop(true);
		indent = - parseInt ( $('#gallery ul').css('text-indent') );

		var delta = width - indent;

		if ( delta > widthStop )
			$('#gallery ul').animate({ textIndent: '-='+widthStop }, widthStop * factorStop, 'easeOutQuad' );
		else if ( delta > 0 )
			$('#gallery ul').animate({ textIndent: -width }, delta * factorStop, 'easeOutQuad' );
	});
});

Html and CSS



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Art Печенье</title> 
<style>
html, body {
	margin:0px;
	padding:0px;
	 margin:0;
  padding:0;
  width:100%;
  height:100%;
}
body {
position:relative;
min-height: 100%;
height: auto !important;
height: 100%;

}
#contents {
 background-color: #ffffff;
}

#footer {
height: 33px;
width: 1000px;
position: absolute;
bottom: 0;
background-image:url(footer.jpg);
background-repeat: no-repeat;
}

a{
text-decoration:none;
color:#ffffff;
}
.center {display:block; margin:0 auto;}

ul#mainNav {
        margin-left:70px;
        margin-top:70px;
        padding: 0;
        list-style: none;
        float: left;
        background: #f7f7f7 url(1.png);
        width:865px;
        height:55px;
        background-repeat: no-repeat;
        text-align:center;
}

#mainNav li {
float: left;
width: 144px;
height:55px;
}

#mainNav li div{
border-left: 3px solid #c9c1be;
height:18px;
position: relative;
width: 100%;
top: 18px;
}

#mainNav a {
text-decoration: none;
font-size: 18px;
font-weight:900;
color:#392411;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
display: inline-block;
padding: 17px 0px;
left: -3px;
position: absolute;
top: -18px;
width:100%;
}

#mainNav li a:hover{
background-color:#392411;
color:#ffffff;
width:149px;
z-index: 100;
}

#light a:hover{
background-image:#000000;;
}

   .links {
    display: inline-block; /* ссылки становятся встроенными блоками */
    min-width: 150px; /* минимальная ширина ссылок */
	min-height: 60px;

	width: auto !important; /* если нужна поддержка IE6 */
    width: 40px; /* если нужна поддержка IE6 */
    color: #666; /* цвет текста ссылок */
    font-weight: bold; /* жирность шрифта */
    text-decoration: none; /* отмена подчеркивания */
    text-align: center; /* центровка текста */
    padding: 0px 5px 5px; /* внутренние отступы ссылок */
   }
   .links1 {
   /* ссылки становятся встроенными блоками */
    min-width: 119px; /* минимальная ширина ссылок */
	min-height: 48px;
	width: auto !important; /* если нужна поддержка IE6 */
    width: 40px; /* если нужна поддержка IE6 */
    color: #ffffff; /* цвет текста ссылок */
    font-weight: bold; /* жирность шрифта */
    text-decoration: none; /* отмена подчеркивания */
    text-align: center; /* центровка текста */

   }
    .links1:hover {
    color: #f7a901; /* цвет текста ссылок под курсором */
   }
   .links:hover {
    color: #c00; /* цвет текста ссылок под курсором */
   }
   .image {background: url(7.png) 100% 0 no-repeat;} /* иконка картинок */
   .image:hover {background: url(77.png) 100% 0 no-repeat;}   /* иконка картинок при наведении мыши */
   .inf {background: url(4.png) 100% 0 no-repeat;} /* иконка картинок */
   .inf:hover {background: url(44.png) 100% 0 no-repeat;}

</style>
<link href="screen.css" rel="stylesheet" type="text/css" />

<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</head>
<body style="background-color:#3a2313">
<div style="margin: 0px auto;padding-left:10px;width: 1000px; border:0px solid;padding:0px;height:1200px;background-color:#ffffff;" id="contents">

	<div id="gallery" style="margin-left:10px;margin-bottom: 300px;">
		<div class="container" style="padding-top:50px;">
			<ul>
				<li><a href="#"><img src="img/img1.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li>
				<li><a href="#"><img src="img/img2.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li>
				<li><a href="#"><img src="img/img3.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li>
				<li><a href="#"><img src="img/img4.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li>
				<li><a href="#"><img src="img/img5.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li>
				<li><a href="#"><img src="img/img6.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li>
				<li><a href="#"><img src="img/img7.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li>
				<li><a href="#"><img src="img/img8.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li>
				<li><a href="#"><img src="img/img9.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li>
				<li><a href="#"><img src="img/img10.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li>
				<li><a href="#"><img src="img/img11.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li>
				<li><a href="#"><img src="img/img12.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li>
				<li><a href="#"><img src="img/img13.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li>
				<li><a href="#"><img src="img/img14.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li>
				<li><a href="#"><img src="img/img15.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li>
				<li><a href="#"><img src="img/img16.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li>
				<li><a href="#"><img src="img/img17.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li>
				<li><a href="#"><img src="img/img18.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li>
				<li><a href="#"><img src="img/img19.jpg" /></a><a class="links image" href="#" style="margin-top: 150px;margin-left:-210px;text-align:center;"></a></li>
			</ul>
		</div>
		<div class="nav prev" style="padding-top:50px;"><a href="#" class="links image" title="назад">назад</a></div>
		<div class="nav next" style="padding-top:50px;"><a href="#" class="links image" title="вперед">вперед</a></div>
	</div>

</div>	


</body>
</html>

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept