Bonjour à tous.
J'ai un petit souci avec une demande, qui consiste à reprendre le fonctionnement de la balise marquee, mais en cross-browser, et avec un défilement vertical sans "blanc" à la fin ("slide up").
J'ai donc trouvé un script que j'essaie de modifier selon la demande.
Ca marche plutôt bien
MAIS : pour une raison que j'ignore, les div semblent avoir un problème avec IE7 : les liens ne marchent pas.
Je vous joins mon code, si l'un de vous a une idée de là où ça pourrait venir, ça m'aiderai énormément ! (le code est en "stand-alone")
Pour info, j'ai essayé de modifier les z-index, mais ça ne semble pas faire avancer la chose.
Merci d'avance =)
(modifié après post car fait de l'italique au lieu de prendre le i-ième poste de mon tableau
)
Modifié par Passeur (27 Sep 2011 - 22:03)
J'ai un petit souci avec une demande, qui consiste à reprendre le fonctionnement de la balise marquee, mais en cross-browser, et avec un défilement vertical sans "blanc" à la fin ("slide up").
J'ai donc trouvé un script que j'essaie de modifier selon la demande.
Ca marche plutôt bien
MAIS : pour une raison que j'ignore, les div semblent avoir un problème avec IE7 : les liens ne marchent pas.
Je vous joins mon code, si l'un de vous a une idée de là où ça pourrait venir, ça m'aiderai énormément ! (le code est en "stand-alone")
Pour info, j'ai essayé de modifier les z-index, mais ça ne semble pas faire avancer la chose.
Merci d'avance =)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#tickerContainer{height:300px;max-height:300px; overflow:hidden;}
#ticker { width:225px; height:300px;max-height:300px; overflow:hidden;position:relative;}
#ticker dd { margin-left:0; font:normal 11px Verdana; margin: 0px 0px 0px 0px; padding:0px 0px 0px 0px; border-bottom:1px solid #FFFFFF; background-color:#FFFFFF;}
#ticker dd.last { border-bottom:0px solid #FFFFFF; }
#ticker div { margin-top:0; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
// Modified from : http://www.wavesdream.com/create-a-simple-news-ticker-for-your-website/
$(function() {
//cache the ticker
var ticker = $("#ticker");
//wrap dt:dd pairs in divs
ticker.children().filter("dt").each(function() {
var dt = $(this),
container = $("<div>");
dt.next().appendTo(container);
dt.prependTo(container);
container.appendTo(ticker);
});
//hide the scrollbar
ticker.css("overflow", "hidden");
//animator function
function animator(currentItem) {
//work out new anim duration
var distance = currentItem.height();
duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;
//animate the first child of the ticker
currentItem.animate({ marginTop: -distance }, duration, "linear", function() {
//move current item to the bottom
currentItem.appendTo(currentItem.parent()).css("marginTop", 0);
//recurse
animator(currentItem.parent().children(":first"));
});
};
//start the ticker
animator(ticker.children(":first"));
//set mouseenter
ticker.mouseenter(function() {
//stop current animation
ticker.children().stop();
});
//set mouseleave
ticker.mouseleave(function() {
//resume animation
animator(ticker.children(":first"));
});
});
var remp = document.getElementById("remplissage");
var ticker = document.getElementById("ticker");
var cumul = 0;
var max = 0;
for(var j=1;j<ticker.childNodes.length;++j) {
if(!isNaN(ticker.childNodes[j].offsetHeight)) {
max = Math.max(max,ticker.childNodes[j].offsetHeight);
cumul += parseInt(ticker.childNodes[j].offsetHeight);
}
}
if(cumul < ticker.offsetHeight) {
// la taille de la fenêtre s'adapte à la plus grande diapositive
//remp.style.height = max + "px";
ticker.style.height = max + "px";
}else {
// Agrandir s'il y a de la place
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simple News Ticker</title>
</head>
<body>
<div id="tickerContainer">
<dl id="ticker">
<dd class="text" style="cursor:pointer;"><a href='http://google.com' target='_blank' style='text-decoration:none;'><div style='text-align:center;width:225px;'><div><span style='font-family:verdana;color:#E2017B;font-weight:bold;display:inline;'>Google 1</span></div><span style='font-size:0.12em;display:inline;'> </span><div style='color: #5090C8;text-align:center;font-family:verdana;font-weight:bold;display:inline;'><table style='margin:auto;'><tr><th>Google.com est un moteur de recherche</th></tr><tr><th> </th></tr></table></div><span style='font-size:0.37em;display:inline;'> </span><br /><span style='display:inline;color:#A0A0A0;font-family:verdana;font-weight:normal;font-size:0.93em;'></span></div></a></dd>
<dd class="text"> <br /></dd>
<dd class="text" style="cursor:pointer;"><a href='http://google.com' target='_blank' style='text-decoration:none;'><div style='text-align:center;width:225px;'><div><span style='font-family:verdana;color:#E2017B;font-weight:bold;display:inline;'>Google 2</span></div><span style='font-size:0.12em;display:inline;'> </span><div style='color: #5090C8;text-align:center;font-family:verdana;font-weight:bold;display:inline;'><table style='margin:auto;'><tr><th>Google.com est un moteur de recherche</th></tr><tr><th> </th></tr></table></div><span style='font-size:0.37em;display:inline;'> </span><br /><span style='display:inline;color:#A0A0A0;font-family:verdana;font-weight:normal;font-size:0.93em;'></span></div></a></dd>
<dd class="text"> <br /></dd>
<dd class="text" style="cursor:pointer;"><a href='http://google.com' target='_blank' style='text-decoration:none;'><div style='text-align:center;width:225px;'><div><span style='font-family:verdana;color:#E2017B;font-weight:bold;display:inline;'>Google 3</span></div><span style='font-size:0.12em;display:inline;'> </span><div style='color: #5090C8;text-align:center;font-family:verdana;font-weight:bold;display:inline;'><table style='margin:auto;'><tr><th>Google.com est un moteur de recherche</th></tr><tr><th> </th></tr></table></div><span style='font-size:0.37em;display:inline;'> </span><br /><span style='display:inline;color:#A0A0A0;font-family:verdana;font-weight:normal;font-size:0.93em;'></span></div></a></dd>
<dd class="text"> <br /></dd>
<dd class="text" style="cursor:pointer;"><a href='http://google.com' target='_blank' style='text-decoration:none;'><div style='text-align:center;width:225px;'><div><span style='font-family:verdana;color:#E2017B;font-weight:bold;display:inline;'>Google 4</span></div><span style='font-size:0.12em;display:inline;'> </span><div style='color: #5090C8;text-align:center;font-family:verdana;font-weight:bold;display:inline;'><table style='margin:auto;'><tr><th>Google.com est un moteur de recherche</th></tr><tr><th> </th></tr></table></div><span style='font-size:0.37em;display:inline;'> </span><br /><span style='display:inline;color:#A0A0A0;font-family:verdana;font-weight:normal;font-size:0.93em;'></span></div></a></dd>
<dd class="text" id="remplissage"> <br /></dd>
</dl>
</div>
</body>
</html>
(modifié après post car fait de l'italique au lieu de prendre le i-ième poste de mon tableau
) Modifié par Passeur (27 Sep 2011 - 22:03)