Ciao a tutti
ho questo script che mi funziona con ie ma non con ff
il pezzo di codice che in particolare non va è il seguente...
if (elems_cnt <= 5) {
//alert("x è minore di 5");
}
else {
$('#rp_shuffle').unbind('click')
.bind('click', shuffle)
.stop()
.animate({ 'margin-left': '-18px' }, 700);
function shuffle() {
$list.find('li:visible div').stop().animate({
'marginLeft': '60px'
}, 200, function() {
load(-60);
});
}
}
Grazie Tommaso
Il problema è che se tolgo if funziona tutto regolare...
Posto tutto il codice
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="#" />
<meta name="keywords" content="#"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
body{
background:#BFE2FF;
font-family:Arial;
}
.content{
margin:0 auto;
}
div.shuffle{
position:fixed;
top:476px;
right:19px;
width:200px;
height:50px;
background:transparent url(shuffle.png) no-repeat top left;
}
</style>
</head>
<body>
<div id="rp_list" class="rp_list">
<ul>
[*]
<div>
[img]images/1.jpg[/img]
<span class="rp_title">Beautiful Background Image Navigation 1</span>
<span class="rp_links">
Visualizza la promo
</span>
</div>
[*]
<div>
[img]images/2.jpg[/img]
<span class="rp_title">Beautiful Background Image Navigation 2</span>
<span class="rp_links">
Visualizza la promo
</span>
</div>
[*]
<div>
[img]images/3.jpg[/img]
<span class="rp_title">Beautiful Background Image Navigation 3</span>
<span class="rp_links">
Visualizza la promo
</span>
</div>
[*]
<div>
[img]images/4.jpg[/img]
<span class="rp_title">Beautiful Background Image Navigation 4</span>
<span class="rp_links">
Visualizza la promo
</span>
</div>
[*]
<div>
[img]images/5.jpg[/img]
<span class="rp_title">Beautiful Background Image Navigation 5</span>
<span class="rp_links">
Visualizza la promo
</span>
</div>
[*]
<div>
[img]images/6.jpg[/img]
<span class="rp_title">Beautiful Background Image Navigation 6</span>
<span class="rp_links">
Visualizza la promo
</span>
</div>
[*]
<div>
[img]images/7.jpg[/img]
<span class="rp_title">Beautiful Background Image Navigation 7</span>
<span class="rp_links">
Visualizza la promo
</span>
</div>
[*]
<div>
[img]images/8.jpg[/img]
<span class="rp_title">Beautiful Background Image Navigation 8</span>
<span class="rp_links">
Visualizza la promo
</span>
</div>
[*]
<div>
[img]images/13.jpg[/img]
<span class="rp_title">Beautiful Background Image Navigation 9</span>
<span class="rp_links">
Visualizza la promo
</span>
</div>
[*]
<div>
[img]images/14.jpg[/img]
<span class="rp_title">Beautiful Background Image Navigation 10</span>
<span class="rp_links">
Visualizza la promo
</span>
</div>
[/list]
<span id="rp_shuffle" class="rp_shuffle">
</span>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function() {
/**
* the list of posts
*/
var $list = $('#rp_list ul');
/**
* number of related posts
*/
var elems_cnt = $list.children().length;
/**
* show the first set of posts.
* 200 is the initial left margin for the list elements
*/
load(200);
function load(initial) {
$list.find('li').hide().andSelf().find('div').css( 'margin-left', -initial + 'px');
var loaded = 0;
//show 5 random posts from all the ones in the list.
//Make sure not to repeat
var n_prodotti
if (elems_cnt < 5) {
n_prodotti = elems_cnt
}
else {
n_prodotti = 5
}
while (loaded < n_prodotti) {
var r = Math.floor(Math.random() * elems_cnt);
var $elem = $list.find('li:nth-child(' + (r + 1) + ')');
if ($elem.is(':visible'))
continue;
else
$elem.show();
++loaded;
}
//animate them
var d = 200;
$list.find('li:visible div').each(function() {
$(this).stop().animate({
'marginLeft': '-50px'
}, d += 100);
});
}
/**
* hovering over the list elements makes them slide out
*/
$list.find('li:visible').live('mouseenter', function() {
$(this).find('div').stop().animate({
'marginLeft': '-220px'
}, 200);
}).live('mouseleave', function() {
$(this).find('div').stop().animate({
'marginLeft': '-50px'
}, 200);
});
/**
* when clicking the shuffle button,
* show 5 random posts
*/
if (elems_cnt <= 5) {
alert("x è minore di 5");
}
else {
alert("x è maggiore di 5");
$('#rp_shuffle').unbind('click')
.bind('click', shuffle)
.stop()
.animate({ 'margin-left': '-18px' }, 700);
function shuffle() {
$list.find('li:visible div').stop().animate({
'marginLeft': '60px'
}, 200, function() {
load(-60);
});
}
}
});
</script>
</body>
</html>
FOGLIO DI STILE
.rp_list {
font-family:Verdana, Helvetica, sans-serif;
position:fixed;
right:-220px;
top:40px;
margin:0;
padding:0;
}
span.rp_shuffle{
background:#222 url(../images/shuffle.png) no-repeat 10px 50%;
width:28px;
height:14px;
display:block;
margin:10px 0px 0px 20px;
cursorointer;
padding:4px;
border:1px solid #000;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.rp_list ul{
margin:0;
padding:0;
list-style:none;
}
.rp_list ul li{
width: 240px;
margin-bottom:5px;
display:none;
}
.rp_list ul li div{
display: block;
line-height:15px;
width: 240px;
height: 80px;
background:#F60;
border:1px solid #000;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.rp_list ul li div img{
width:70px;
border:none;
float:left;
margin:4px 10px 0px 4px;
border:1px solid #111;
-moz-box-shadow:1px 1px 3px #000;
-webkit-box-shadow:1px 1px 3px #000;
box-shadow:1px 1px 3px #000;
}
span.rp_title{
font-size:11px;
color:#ddd;
height:46px;
margin:4px 0px 0px 20px;
display:block;
font-weight: bold;
padding-top:3px;
background:#F60;
}
span.rp_links{
width:195px;
height:8px;
padding-top:2px;
display:block;
margin-left:42px;
}
span.rp_links a{
background: #06F url(../images/bgbutton.png) repeat-x;
padding: 2px 18px;
font-size:10px;
color: #fff;
text-decoration: none;
line-height: 1;
-moz-box-shadow: 0 1px 3px #000;
-webkit-box-shadow: 0 1px 3px #000;
box-shadow:0 1px 3px #000;
cursor: pointer;
outline:none;
}
span.rp_links a:hover{
background-color:#000;
color:#fff;
}
Grazie Tommaso
http://forum.aspitalia.com/forum/pos...avaScript.aspx
QUI C'è LA SOLUZIONE
Permessi di invio
Rispondi quotando