par
juliette » 24 sept. 2013, 10:07
Pour faire les test, j'utilise IE tester mais j'ai le sentiment que c'est lui qui bug, j'ai fait un text du rendu IE9 en ligne et e résultat semble correct mais c'est une capture alors je ne suis sur de rien...
Est ce que quelqu'un qui possède IE9 pourrait faire le test pour moi en essayant ce code...
En cas de scroll, un bouton apparait en bas a droite, il doit renvoyer vers le haute de la page mais aussi afficher un tooltip...
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8"/>
<title>titre du site</title>
<link rel="dns-prefetch" href="//fonts.googleapis.com"/>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$(document).tooltip({
position: {
my: "rgiht bottom-20",
at: "center top",
using: function(position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
});
});
$('#toTop').fadeOut();
$(window).scroll(function() {
if ($(window).scrollTop() === 0) {
$('#toTop').fadeOut('8000');
} else {
if ($('#toTop').length === 0) {
$('body').append('<div id="toTop">' + '<a href="#top" class="' + lien + '"><i class="icon-arrow-up"></i></a>' + '</div>');
}
$('#toTop').fadeIn('8000');
}
});
$(document).ready(function() {
$(function() {
$(lien).click(function(e) {
e.preventDefault();
$('html, body').animate({scrollTop: '0px'}, 1000);
});
});
});
</script>
</head>
<body>
<hr />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<div id="toTop"><a href="#top" class="backtotop" title="titre"><i class="icon-arrow-up"></i></a></div>
</body>
</html>
merci d'avance

Pour faire les test, j'utilise IE tester mais j'ai le sentiment que c'est lui qui bug, j'ai fait un text du rendu IE9 en ligne et e résultat semble correct mais c'est une capture alors je ne suis sur de rien...
Est ce que quelqu'un qui possède IE9 pourrait faire le test pour moi en essayant ce code...
En cas de scroll, un bouton apparait en bas a droite, il doit renvoyer vers le haute de la page mais aussi afficher un tooltip...
[html]
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8"/>
<title>titre du site</title>
<link rel="dns-prefetch" href="//fonts.googleapis.com"/>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$(document).tooltip({
position: {
my: "rgiht bottom-20",
at: "center top",
using: function(position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
});
});
$('#toTop').fadeOut();
$(window).scroll(function() {
if ($(window).scrollTop() === 0) {
$('#toTop').fadeOut('8000');
} else {
if ($('#toTop').length === 0) {
$('body').append('<div id="toTop">' + '<a href="#top" class="' + lien + '"><i class="icon-arrow-up"></i></a>' + '</div>');
}
$('#toTop').fadeIn('8000');
}
});
$(document).ready(function() {
$(function() {
$(lien).click(function(e) {
e.preventDefault();
$('html, body').animate({scrollTop: '0px'}, 1000);
});
});
});
</script>
</head>
<body>
<hr />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<hr />
<div id="toTop"><a href="#top" class="backtotop" title="titre"><i class="icon-arrow-up"></i></a></div>
</body>
</html>
[/html]
merci d'avance :wink: