Bonjour YNX,
Merci de ton aide.
Et désolé de ne répondre que maintenant (mon devoir de Papa!)
Alors J'ai nettoyé le code, enlevé les choses inutiles... etc. Vendredi je l'ai fait à la va vite car je devait aller chercher ma fille à l'école
Donc voici la page qui accueil tout :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
#ZoneAffSSR {
width:920px;
height:300px;
border:#0c3 0px solid;
vertical-align:top;
display: -moz-inline-stack;
display: inline-block;
*display: inline;
margin-left:30px;
margin-bottom:100px;
z-index:999999999;
}
#ZoneSousCure {
width:465px;
height:300px;
border:#ccc 0px solid;
float:left;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #333;
}
#TitreCar {
width:408px;
height:30px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #333;
}
</style>
<script type="text/javascript" src="../../scripts/jquery-1-9-1.js"></script>
<!-- XHR -->
<script type='text/javascript'>
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
function go(valeur){
var xhr = getXhr();
valeur=parseInt(valeur);
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('AffCar'+ valeur).innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","xhr-carousel.php?valeur=" + valeur,true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
sel = document.getElementById('recipient'+ valeur);
id = sel.options[sel.selectedIndex].value;
xhr.send("id="+id);
}
</script>
<!-- Fin XHR -->
<!-- Carousel -->
<link href="../../scripts/jsCarousel/jsCarousel-2.0.0.css" rel="stylesheet" type="text/css" />
<script src="../../scripts/jsCarousel/jsCarousel-2.0.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#carousel').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay:1, orientation: 'h' });
$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay:1, orientation: 'h' });
$('#carousel2').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 1, orientation: 'h' });
$('#carousel3').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 1, orientation: 'h' });
$('#carousel4').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 1, orientation: 'h' });
$('#carousel5').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 1, orientation: 'h' });
$('#carousel6').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 1, orientation: 'h' });
});
</script>
<!-- Fin Carousel -->
<link href="xhr.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id='ZoneAffSSR'>
<form action='#' method='POST' name='form1' id='notificationPost1' class='toto'>
<select id='recipient1' name='id_cure' class='selmenu' onchange="go(1)">
<option value='0'>Faites votre choix</option>
<option value='1'>Choix #1</option>
<option value='2'>Choix #2</option>
<option value='3'>Choix #3</option>
<option value='4'>Choix #4</option>
</select>
</form>
<div id='TitreCar'><h3>Le Carousel #1</h3></div>
<div id='AffCar1'>
<div id="demo-right">
<div id="hWrapperAuto">
<div id="carousel">
<div>
<div id="LigCar">
<div id="VigCar" style="background-image:url('../../scripts/jsCarousel/images/img_1.jpg'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Solange</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
<div id="LigCar">
<div id="VigCar" style="background-image:url('../../scripts/jsCarousel/images/img_2.jpg'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Tere</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
</div>
<div>
<div id="LigCar">
<div id="VigCar" style="background-image:url('../../scripts/jsCarousel/images/img_3.jpg'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Angella</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
<div id="LigCar">
<div id="VigCar" style="background-image:url('../../scripts/jsCarousel/images/img_4.jpg'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Olivia</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
</div>
<div>
<div id="LigCar">
<div id="VigCar" style="background-image:url('../../scripts/jsCarousel/images/img_5.jpg'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Virginie</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
<div id="LigCar">
<div id="VigCar" style="background-image:url('../../scripts/jsCarousel/images/img_6.jpg'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Sophie</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Le fichier : xhr-carousel.php (appellé par le XHR)
<?
//$valeur=(isset($_GET['valeur'])) ? $_GET['valeur'] :NULL ;
//echo $valeur ;
//$id=(isset($_POST['id'])) ? $_POST['id'] :NULL ;
//echo "<br />L'ID : ".$id;
$valeur=1;
echo '<div id="demo-right">
<div id="hWrapperAuto">
<div id="carousel'.$valeur.'">
<div>
<div id="LigCar">
<div id="VigCar" style="background-image:url(\'../../scripts/jsCarousel/images/img_1.jpg\'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Solange XHR</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
<div id="LigCar">
<div id="VigCar" style="background-image:url(\'../../scripts/jsCarousel/images/img_2.jpg\'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Tere XHR</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
</div>
<div>
<div id="LigCar">
<div id="VigCar" style="background-image:url(\'../../scripts/jsCarousel/images/img_3.jpg\'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Angella XHR</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
<div id="LigCar">
<div id="VigCar" style="background-image:url(\'../../scripts/jsCarousel/images/img_4.jpg\'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Olivia XHR</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
</div>
<div>
<div id="LigCar">
<div id="VigCar" style="background-image:url(\'../../scripts/jsCarousel/images/img_5.jpg\'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Virginie XHR</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
<div id="LigCar">
<div id="VigCar" style="background-image:url(\'../../scripts/jsCarousel/images/img_6.jpg\'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Sophie XHR</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
</div>
</div>
</div>
</div>';
?>
Le fichier : jsCarousel-2.0.0.js
[javascript]
(function($) {
$.fn.extend({
jsCarousel: function(options) {
var settings = $.extend({
scrollspeed: 1500,
delay: 5000,
itemstodisplay: 5,
autoscroll: false,
circular: false,
masked: true,
onthumbnailclick: null,
orientation: 'h'
}, options);
return this.each(function() {
var oclass = 'horizontal';
if (settings.orientation == 'v')
oclass = 'vertical';
var slidercontents = $(this).addClass('jscarousal-contents-' + oclass + '');
var slider = $('<div/>').addClass('jscarousal-' + oclass + '').attr('id', slidercontents.attr('id'));
var backbutton = $('<div/>').addClass('jscarousal-' + oclass + '-back');
var forwardbutton = $('<div/>').addClass('jscarousal-' + oclass + '-forward');
slidercontents.removeAttr('id');
slidercontents.before(slider);
slider.append(backbutton);
slider.append(slidercontents);
slider.append(forwardbutton);
var total = $('> div', slidercontents).css('display', 'none').length;
var index = 0;
var start = 0;
var current = $('<div/>');
var noOfBlocks;
var interval;
var display = settings.itemstodisplay;
var speed = settings.scrollspeed;
var top;
var left;
var height;
var containerHeight;
var containerWidth;
var direction = "forward";
var scrolling = true;
function initialize() {
index = -1;
noOfBlocks = parseInt(total / display);
if (total % display > 0) noOfBlocks++;
index = noOfBlocks - 1;
var startIndex = 0;
var endIndex = display;
var copy = false;
var allElements = $('> div', slidercontents);
$('> div', slidercontents).remove();
if (settings.masked)
allElements.addClass('thumbnail-inactive').hover(function() { $(this).removeClass('thumbnail-inactive').addClass('thumbnail-active'); }, function() { $(this).removeClass('thumbnail-active').addClass('thumbnail-inactive'); })
for (var i = 0; i < noOfBlocks; i++) {
if (total > display) {
startIndex = i * display;
endIndex = startIndex + display;
if (endIndex > total) {
startIndex -= (endIndex - total);
endIndex = startIndex + display;
copy = true;
}
}
else {
startIndex = 0;
endIndex = total;
}
var wrapper = $('<div/>')
allElements.slice(startIndex, endIndex).each(function(index, el) {
if (!copy)
wrapper.append(el);
else wrapper.append($(el).clone(true));
});
wrapper.find("img").click(
function() {
if (settings.onthumbnailclick != null) {
settings.onthumbnailclick($(this).attr('src'));
}
});
slidercontents.append(wrapper);
}
if (settings.onthumbnailclick != null)
$('> div > div', slidercontents).css('cursor', 'pointer');
$('> div', slidercontents).addClass('hidden');
$('> div > div', slidercontents).css('display', '');
/*vertical*/
if (settings.orientation == 'v') {
top = $('> div:eq(' + index + ')', slidercontents).css('top');
if (top == 'auto') top = "0px";
containerHeight = slidercontents.height();
height = slidercontents.get(0).offsetHeight;
$('> div', slidercontents).css('top', '-' + containerHeight + 'px');
$('> div:eq(' + index + ')', slidercontents).stop(false, true).animate({ 'top': top }, speed, function() { scrolling = false; });
}
/*horizontal*/
if (settings.orientation == 'h') {
left = $('> div:eq(' + index + ')', slidercontents).css('left');
containerWidth = slidercontents.width();
height = slidercontents.get(0).offsetHeight;
$('> div', slidercontents).css('left', '-' + containerWidth + 'px');
$('> div:eq(' + index + ')', slidercontents).stop(false, true).animate({ left: 0 }, speed, function() { scrolling = false; });
}
$('> div:eq(' + index + ')', slidercontents).addClass('visible').removeClass('hidden');
slider.mouseenter(function() { if (settings.autoscroll) stopAnimate(); }).mouseleave(function() { if (settings.autoscroll) animate(); });
if (settings.autoscroll)
animate();
forwardbutton.click(function() {
if (!scrolling) {
direction = "forward";
if (settings.circular)
if (index <= 0) index = noOfBlocks;
showThumbs();
}
});
backbutton.click(function() {
if (!scrolling) {
direction = "backward";
if (settings.circular)
if (index >= noOfBlocks - 1) index = -1;
showThumbs();
}
});
}
initialize();
function stopAnimate() {
scrolling = false;
clearTimeout(interval);
slider.children().clearQueue();
slider.children().stop(false, true);
}
function animate() {
clearTimeout(interval);
if (settings.autoscroll)
interval = setTimeout(changeSlide, settings.delay);
}
function changeSlide() {
if (direction == "forward") {
if (index <= 0) index = noOfBlocks;
} else {
if (index >= noOfBlocks - 1) { index = -1; }
}
showThumbs();
interval = setTimeout(changeSlide, settings.delay);
}
function getDimensions(value) {
return value + 'px';
}
function showThumbs() {
scrolling = true;
var current = $('.visible', slidercontents);
var scrollSpeed = speed;
if (direction == "forward") {
index--;
if (index >= 0) {
if (settings.orientation == 'v') {
$('>div:eq(' + index + ')', slidercontents).css('top', getDimensions(containerHeight)).removeClass('hidden').addClass('visible').stop(false, true).animate({ 'top': top }, scrollSpeed, function() { scrolling = false; });
current.stop(false, true).animate({ 'top': '-=' + getDimensions(containerHeight) }, scrollSpeed, function() {
$(this).removeClass('visible').addClass('hidden');
$(this).css('top', top);
scrolling = false;
});
}
else {
$('>div:eq(' + index + ')', slidercontents).css('left', getDimensions(containerWidth)).removeClass('hidden').addClass('visible').stop(false, true).animate({ 'left': '-=' + getDimensions(containerWidth) }, scrollSpeed, function() { scrolling = false; });
current.stop(false, true).animate({ 'left': '-=' + getDimensions(containerWidth) }, scrollSpeed, function() {
$(this).removeClass('visible').addClass('hidden');
$(this).css('left', left);
scrolling = false;
});
}
} else index = 0;
}
else if (direction == "backward") {
index++;
if (index < noOfBlocks) {
if (settings.orientation == 'v') {
$('>div:eq(' + index + ')', slidercontents).removeClass('hidden').addClass('visible').css({
'top': getDimensions(-containerHeight)
}).stop(false, true).animate({ 'top': top }, scrollSpeed, function() { scrolling = false; });
current.stop(false, true).animate({ 'top': '+=' + getDimensions(containerHeight) }, scrollSpeed,
function() {
$(this).removeClass('visible').addClass('hidden');
$(this).css('top', getDimensions(-containerHeight));
scrolling = false;
});
}
else {
$('>div:eq(' + index + ')', slidercontents).removeClass('hidden').addClass('visible').css({
'left': getDimensions(-containerWidth)
}).stop(false, true).animate({ 'left': '+=' + getDimensions(containerWidth) }, scrollSpeed, function() { scrolling = false; });
current.stop(false, true).animate({ 'left': '+=' + getDimensions(containerWidth) }, scrollSpeed,
function() {
$(this).removeClass('visible').addClass('hidden');
$(this).css('left', getDimensions(-containerWidth));
scrolling = false;
});
}
} else index = noOfBlocks - 1;
}
}
});
}
});
})(jQuery);
[/javascript]
Le fichier : jsCarousel-2.0.0.css*
/*Horizontal Orientation CSS*/
.jscarousal-horizontal
{
width: 420px;
height: 255px;
background-color: #fff;
border: solid 0px #7A7677;
margin: 0;
padding: 0;
padding: 22px 8px 22px 8px;
position: relative; /*overflow: hidden;*/
}
.jscarousal-horizontal-forward
{
position: absolute;
top: 130px;
right: 5px;
width: 32px;
height: 45px;
cursor: pointer;
}
.jscarousal-horizontal-back
{
position: absolute;
top: 130px;
left: 5px;
width: 32px;
height: 45px;
cursor: pointer;
}
.jscarousal-horizontal-forward
{
background-image: url(next-horizontal.png);
background-repeat: no-repeat;
background-position: right;
background-position: 0 0;
}
.jscarousal-horizontal-back
{
background-image: url(prev-horizontal.png);
background-repeat: no-repeat;
background-position: left;
background-position: 0 0;
}
.jscarousal-horizontal-forward:hover,
.jscarousal-horizontal-forward:focus,
{
background-position: -32px 0;
}
.jscarousal-horizontal-forward:active {
background-position: -64px 0;
}
.jscarousal-horizontal-back:hover,
.jscarousal-horizontal-back:focus,
{
background-position: -32px 0;
}
.jscarousal-horizontal-back:active {
background-position: -64px 0;
}
.jscarousal-contents-horizontal
{
width: 360px;
height: 240px;
float: left;
position: relative;
overflow: hidden;
border: 0px solid #112121;
margin-left:28px;
}
.jscarousal-contents-horizontal > div
{
position: absolute;
width: 320px;
height: 360px;
}
.jscarousal-contents-horizontal > div > div
{
float: left;
margin-left: 8px;
margin-right: 8px;
}
.jscarousal-contents-horizontal img
{
width: 120px;
height: 94px;
border: solid 1px #7A7677;
}
/*Horizontal Orientation CSS Ends*/
/*Vertical Orientation CSS Starts*/
/*.jscarousal-vertical
{
width: 140px;
height: 460px;
background-color: #121212;
border: solid 1px #7A7677;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
.jscarousal-vertical-back, .jscarousal-vertical-forward
{
width: 100%;
height: 30px;
background-color: #121212;
color: White;
position: relative;
cursor: pointer;
z-index:100;
}
.jscarousal-vertical-back
{
background-image: url(top_arrow.jpg);
background-repeat: no-repeat;
background-position: bottom;
}
.jscarousal-vertical-forward
{
background-image: url(bottom_arrow.jpg);
background-repeat: no-repeat;
background-position: top;
}
.jscarousal-contents-vertical
{
overflow: hidden;
width: 140px;
height: 410px;
}
.jscarousal-contents-vertical > div
{
position: absolute;
top: 40px;
width: 100%;
height: 820px;
overflow: hidden;
}
.jscarousal-contents-vertical > div > div
{
width: 140px;
height: 125px;
margin: 8px;
margin-left: 14px;
}
.jscarousal-contents-vertical > div > div span
{
display: block;
width: 70%;
text-align: center;
}
.jscarousal-contents-vertical img
{
width: 110px;
height: 80px;
border: solid 1px #7A7677;
}
Vertical Orientation CSS Ends*/
/*Common*/
.hidden
{
display: none;
}
.visible
{
display: block;
}
.thumbnail-active
{
filter: alpha(opacity=100);
opacity: 1.0;
cursor: pointer;
}
.thumbnail-inactive
{
filter: alpha(opacity=20);
opacity: 0.2;
cursor: pointer;
}
.thumbnail-text
{
color: #7A7677;
font-weight: bold;
text-align: left;
display: block;
padding: 10px 2px 2px 0px;
}
/***********************************
Affichage des jus de la Cures dans Carousel des pages sous-rubriques Cure
***********************************/
#LigCar {
width:370px;
height:100px;
margin-top:20px;
border:#CCC 0px solid;
}
#VigCar {
display: -moz-inline-stack;
display: inline-block;
*display: inline;
border:#CCC 0 solid;
-moz-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
-khtml-border-radius: 15px;
margin-right:10px;
}
h3.NomCar {
height:20px;
font-family: Arial, sans-serif;
font-size: 16px;
font-style: italic;
color: #666666;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #666;
/*border: 1px solid #808000;*/
margin-top:0px;
}
#TxtCar {
display: -moz-inline-stack;
display: inline-block;
*display: inline;
border: 0px solid #808000;
vertical-align:top;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999;
text-align: justify;
}
p.TxtCar {
margin-top:-10px;
}
J'espère que ce n'est pas trop.
Donc , le premier "Carrousel" qui est inclue par défaut dans la page fonctionne très bien, mais dès que je l'appel par le XHR.. .il ne fonctionne plus ?
Merci de m'aider à comprendre.
Bonjour YNX,
Merci de ton aide.
Et désolé de ne répondre que maintenant (mon devoir de Papa!)
Alors J'ai nettoyé le code, enlevé les choses inutiles... etc. Vendredi je l'ai fait à la va vite car je devait aller chercher ma fille à l'école
Donc voici la page qui accueil tout :
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
#ZoneAffSSR {
width:920px;
height:300px;
border:#0c3 0px solid;
vertical-align:top;
display: -moz-inline-stack;
display: inline-block;
*display: inline;
margin-left:30px;
margin-bottom:100px;
z-index:999999999;
}
#ZoneSousCure {
width:465px;
height:300px;
border:#ccc 0px solid;
float:left;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #333;
}
#TitreCar {
width:408px;
height:30px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #333;
}
</style>
<script type="text/javascript" src="../../scripts/jquery-1-9-1.js"></script>
<!-- XHR -->
<script type='text/javascript'>
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
function go(valeur){
var xhr = getXhr();
valeur=parseInt(valeur);
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('AffCar'+ valeur).innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","xhr-carousel.php?valeur=" + valeur,true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
sel = document.getElementById('recipient'+ valeur);
id = sel.options[sel.selectedIndex].value;
xhr.send("id="+id);
}
</script>
<!-- Fin XHR -->
<!-- Carousel -->
<link href="../../scripts/jsCarousel/jsCarousel-2.0.0.css" rel="stylesheet" type="text/css" />
<script src="../../scripts/jsCarousel/jsCarousel-2.0.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#carousel').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay:1, orientation: 'h' });
$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay:1, orientation: 'h' });
$('#carousel2').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 1, orientation: 'h' });
$('#carousel3').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 1, orientation: 'h' });
$('#carousel4').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 1, orientation: 'h' });
$('#carousel5').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 1, orientation: 'h' });
$('#carousel6').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 1, orientation: 'h' });
});
</script>
<!-- Fin Carousel -->
<link href="xhr.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id='ZoneAffSSR'>
<form action='#' method='POST' name='form1' id='notificationPost1' class='toto'>
<select id='recipient1' name='id_cure' class='selmenu' onchange="go(1)">
<option value='0'>Faites votre choix</option>
<option value='1'>Choix #1</option>
<option value='2'>Choix #2</option>
<option value='3'>Choix #3</option>
<option value='4'>Choix #4</option>
</select>
</form>
<div id='TitreCar'><h3>Le Carousel #1</h3></div>
<div id='AffCar1'>
<div id="demo-right">
<div id="hWrapperAuto">
<div id="carousel">
<div>
<div id="LigCar">
<div id="VigCar" style="background-image:url('../../scripts/jsCarousel/images/img_1.jpg'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Solange</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
<div id="LigCar">
<div id="VigCar" style="background-image:url('../../scripts/jsCarousel/images/img_2.jpg'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Tere</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
</div>
<div>
<div id="LigCar">
<div id="VigCar" style="background-image:url('../../scripts/jsCarousel/images/img_3.jpg'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Angella</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
<div id="LigCar">
<div id="VigCar" style="background-image:url('../../scripts/jsCarousel/images/img_4.jpg'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Olivia</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
</div>
<div>
<div id="LigCar">
<div id="VigCar" style="background-image:url('../../scripts/jsCarousel/images/img_5.jpg'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Virginie</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
<div id="LigCar">
<div id="VigCar" style="background-image:url('../../scripts/jsCarousel/images/img_6.jpg'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Sophie</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
[/html]
Le fichier : xhr-carousel.php (appellé par le XHR)
[php]
<?
//$valeur=(isset($_GET['valeur'])) ? $_GET['valeur'] :NULL ;
//echo $valeur ;
//$id=(isset($_POST['id'])) ? $_POST['id'] :NULL ;
//echo "<br />L'ID : ".$id;
$valeur=1;
echo '<div id="demo-right">
<div id="hWrapperAuto">
<div id="carousel'.$valeur.'">
<div>
<div id="LigCar">
<div id="VigCar" style="background-image:url(\'../../scripts/jsCarousel/images/img_1.jpg\'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Solange XHR</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
<div id="LigCar">
<div id="VigCar" style="background-image:url(\'../../scripts/jsCarousel/images/img_2.jpg\'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Tere XHR</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
</div>
<div>
<div id="LigCar">
<div id="VigCar" style="background-image:url(\'../../scripts/jsCarousel/images/img_3.jpg\'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Angella XHR</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
<div id="LigCar">
<div id="VigCar" style="background-image:url(\'../../scripts/jsCarousel/images/img_4.jpg\'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Olivia XHR</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
</div>
<div>
<div id="LigCar">
<div id="VigCar" style="background-image:url(\'../../scripts/jsCarousel/images/img_5.jpg\'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Virginie XHR</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
<div id="LigCar">
<div id="VigCar" style="background-image:url(\'../../scripts/jsCarousel/images/img_6.jpg\'); background-position:center center; background-repeat:no-repeat;width:130px; height:95px;"></div>
<div id="TxtCar" style="width:185px; height:95px;"><h3 class="NomCar">Sophie XHR</h3><p class="TxtCar">Alimentorum formidatam extrusis ita choris adseclae quique alimentorum sine ob urbe ad haut pellerentur peregrini ob ne cum indignitatis ita</p></div>
</div>
</div>
</div>
</div>
</div>';
?>
[/php]
Le fichier : jsCarousel-2.0.0.js
[javascript]
(function($) {
$.fn.extend({
jsCarousel: function(options) {
var settings = $.extend({
scrollspeed: 1500,
delay: 5000,
itemstodisplay: 5,
autoscroll: false,
circular: false,
masked: true,
onthumbnailclick: null,
orientation: 'h'
}, options);
return this.each(function() {
var oclass = 'horizontal';
if (settings.orientation == 'v')
oclass = 'vertical';
var slidercontents = $(this).addClass('jscarousal-contents-' + oclass + '');
var slider = $('<div/>').addClass('jscarousal-' + oclass + '').attr('id', slidercontents.attr('id'));
var backbutton = $('<div/>').addClass('jscarousal-' + oclass + '-back');
var forwardbutton = $('<div/>').addClass('jscarousal-' + oclass + '-forward');
slidercontents.removeAttr('id');
slidercontents.before(slider);
slider.append(backbutton);
slider.append(slidercontents);
slider.append(forwardbutton);
var total = $('> div', slidercontents).css('display', 'none').length;
var index = 0;
var start = 0;
var current = $('<div/>');
var noOfBlocks;
var interval;
var display = settings.itemstodisplay;
var speed = settings.scrollspeed;
var top;
var left;
var height;
var containerHeight;
var containerWidth;
var direction = "forward";
var scrolling = true;
function initialize() {
index = -1;
noOfBlocks = parseInt(total / display);
if (total % display > 0) noOfBlocks++;
index = noOfBlocks - 1;
var startIndex = 0;
var endIndex = display;
var copy = false;
var allElements = $('> div', slidercontents);
$('> div', slidercontents).remove();
if (settings.masked)
allElements.addClass('thumbnail-inactive').hover(function() { $(this).removeClass('thumbnail-inactive').addClass('thumbnail-active'); }, function() { $(this).removeClass('thumbnail-active').addClass('thumbnail-inactive'); })
for (var i = 0; i < noOfBlocks; i++) {
if (total > display) {
startIndex = i * display;
endIndex = startIndex + display;
if (endIndex > total) {
startIndex -= (endIndex - total);
endIndex = startIndex + display;
copy = true;
}
}
else {
startIndex = 0;
endIndex = total;
}
var wrapper = $('<div/>')
allElements.slice(startIndex, endIndex).each(function(index, el) {
if (!copy)
wrapper.append(el);
else wrapper.append($(el).clone(true));
});
wrapper.find("img").click(
function() {
if (settings.onthumbnailclick != null) {
settings.onthumbnailclick($(this).attr('src'));
}
});
slidercontents.append(wrapper);
}
if (settings.onthumbnailclick != null)
$('> div > div', slidercontents).css('cursor', 'pointer');
$('> div', slidercontents).addClass('hidden');
$('> div > div', slidercontents).css('display', '');
/*vertical*/
if (settings.orientation == 'v') {
top = $('> div:eq(' + index + ')', slidercontents).css('top');
if (top == 'auto') top = "0px";
containerHeight = slidercontents.height();
height = slidercontents.get(0).offsetHeight;
$('> div', slidercontents).css('top', '-' + containerHeight + 'px');
$('> div:eq(' + index + ')', slidercontents).stop(false, true).animate({ 'top': top }, speed, function() { scrolling = false; });
}
/*horizontal*/
if (settings.orientation == 'h') {
left = $('> div:eq(' + index + ')', slidercontents).css('left');
containerWidth = slidercontents.width();
height = slidercontents.get(0).offsetHeight;
$('> div', slidercontents).css('left', '-' + containerWidth + 'px');
$('> div:eq(' + index + ')', slidercontents).stop(false, true).animate({ left: 0 }, speed, function() { scrolling = false; });
}
$('> div:eq(' + index + ')', slidercontents).addClass('visible').removeClass('hidden');
slider.mouseenter(function() { if (settings.autoscroll) stopAnimate(); }).mouseleave(function() { if (settings.autoscroll) animate(); });
if (settings.autoscroll)
animate();
forwardbutton.click(function() {
if (!scrolling) {
direction = "forward";
if (settings.circular)
if (index <= 0) index = noOfBlocks;
showThumbs();
}
});
backbutton.click(function() {
if (!scrolling) {
direction = "backward";
if (settings.circular)
if (index >= noOfBlocks - 1) index = -1;
showThumbs();
}
});
}
initialize();
function stopAnimate() {
scrolling = false;
clearTimeout(interval);
slider.children().clearQueue();
slider.children().stop(false, true);
}
function animate() {
clearTimeout(interval);
if (settings.autoscroll)
interval = setTimeout(changeSlide, settings.delay);
}
function changeSlide() {
if (direction == "forward") {
if (index <= 0) index = noOfBlocks;
} else {
if (index >= noOfBlocks - 1) { index = -1; }
}
showThumbs();
interval = setTimeout(changeSlide, settings.delay);
}
function getDimensions(value) {
return value + 'px';
}
function showThumbs() {
scrolling = true;
var current = $('.visible', slidercontents);
var scrollSpeed = speed;
if (direction == "forward") {
index--;
if (index >= 0) {
if (settings.orientation == 'v') {
$('>div:eq(' + index + ')', slidercontents).css('top', getDimensions(containerHeight)).removeClass('hidden').addClass('visible').stop(false, true).animate({ 'top': top }, scrollSpeed, function() { scrolling = false; });
current.stop(false, true).animate({ 'top': '-=' + getDimensions(containerHeight) }, scrollSpeed, function() {
$(this).removeClass('visible').addClass('hidden');
$(this).css('top', top);
scrolling = false;
});
}
else {
$('>div:eq(' + index + ')', slidercontents).css('left', getDimensions(containerWidth)).removeClass('hidden').addClass('visible').stop(false, true).animate({ 'left': '-=' + getDimensions(containerWidth) }, scrollSpeed, function() { scrolling = false; });
current.stop(false, true).animate({ 'left': '-=' + getDimensions(containerWidth) }, scrollSpeed, function() {
$(this).removeClass('visible').addClass('hidden');
$(this).css('left', left);
scrolling = false;
});
}
} else index = 0;
}
else if (direction == "backward") {
index++;
if (index < noOfBlocks) {
if (settings.orientation == 'v') {
$('>div:eq(' + index + ')', slidercontents).removeClass('hidden').addClass('visible').css({
'top': getDimensions(-containerHeight)
}).stop(false, true).animate({ 'top': top }, scrollSpeed, function() { scrolling = false; });
current.stop(false, true).animate({ 'top': '+=' + getDimensions(containerHeight) }, scrollSpeed,
function() {
$(this).removeClass('visible').addClass('hidden');
$(this).css('top', getDimensions(-containerHeight));
scrolling = false;
});
}
else {
$('>div:eq(' + index + ')', slidercontents).removeClass('hidden').addClass('visible').css({
'left': getDimensions(-containerWidth)
}).stop(false, true).animate({ 'left': '+=' + getDimensions(containerWidth) }, scrollSpeed, function() { scrolling = false; });
current.stop(false, true).animate({ 'left': '+=' + getDimensions(containerWidth) }, scrollSpeed,
function() {
$(this).removeClass('visible').addClass('hidden');
$(this).css('left', getDimensions(-containerWidth));
scrolling = false;
});
}
} else index = noOfBlocks - 1;
}
}
});
}
});
})(jQuery);
[/javascript]
Le fichier : jsCarousel-2.0.0.css*
[css]
/*Horizontal Orientation CSS*/
.jscarousal-horizontal
{
width: 420px;
height: 255px;
background-color: #fff;
border: solid 0px #7A7677;
margin: 0;
padding: 0;
padding: 22px 8px 22px 8px;
position: relative; /*overflow: hidden;*/
}
.jscarousal-horizontal-forward
{
position: absolute;
top: 130px;
right: 5px;
width: 32px;
height: 45px;
cursor: pointer;
}
.jscarousal-horizontal-back
{
position: absolute;
top: 130px;
left: 5px;
width: 32px;
height: 45px;
cursor: pointer;
}
.jscarousal-horizontal-forward
{
background-image: url(next-horizontal.png);
background-repeat: no-repeat;
background-position: right;
background-position: 0 0;
}
.jscarousal-horizontal-back
{
background-image: url(prev-horizontal.png);
background-repeat: no-repeat;
background-position: left;
background-position: 0 0;
}
.jscarousal-horizontal-forward:hover,
.jscarousal-horizontal-forward:focus,
{
background-position: -32px 0;
}
.jscarousal-horizontal-forward:active {
background-position: -64px 0;
}
.jscarousal-horizontal-back:hover,
.jscarousal-horizontal-back:focus,
{
background-position: -32px 0;
}
.jscarousal-horizontal-back:active {
background-position: -64px 0;
}
.jscarousal-contents-horizontal
{
width: 360px;
height: 240px;
float: left;
position: relative;
overflow: hidden;
border: 0px solid #112121;
margin-left:28px;
}
.jscarousal-contents-horizontal > div
{
position: absolute;
width: 320px;
height: 360px;
}
.jscarousal-contents-horizontal > div > div
{
float: left;
margin-left: 8px;
margin-right: 8px;
}
.jscarousal-contents-horizontal img
{
width: 120px;
height: 94px;
border: solid 1px #7A7677;
}
/*Horizontal Orientation CSS Ends*/
/*Vertical Orientation CSS Starts*/
/*.jscarousal-vertical
{
width: 140px;
height: 460px;
background-color: #121212;
border: solid 1px #7A7677;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
.jscarousal-vertical-back, .jscarousal-vertical-forward
{
width: 100%;
height: 30px;
background-color: #121212;
color: White;
position: relative;
cursor: pointer;
z-index:100;
}
.jscarousal-vertical-back
{
background-image: url(top_arrow.jpg);
background-repeat: no-repeat;
background-position: bottom;
}
.jscarousal-vertical-forward
{
background-image: url(bottom_arrow.jpg);
background-repeat: no-repeat;
background-position: top;
}
.jscarousal-contents-vertical
{
overflow: hidden;
width: 140px;
height: 410px;
}
.jscarousal-contents-vertical > div
{
position: absolute;
top: 40px;
width: 100%;
height: 820px;
overflow: hidden;
}
.jscarousal-contents-vertical > div > div
{
width: 140px;
height: 125px;
margin: 8px;
margin-left: 14px;
}
.jscarousal-contents-vertical > div > div span
{
display: block;
width: 70%;
text-align: center;
}
.jscarousal-contents-vertical img
{
width: 110px;
height: 80px;
border: solid 1px #7A7677;
}
Vertical Orientation CSS Ends*/
/*Common*/
.hidden
{
display: none;
}
.visible
{
display: block;
}
.thumbnail-active
{
filter: alpha(opacity=100);
opacity: 1.0;
cursor: pointer;
}
.thumbnail-inactive
{
filter: alpha(opacity=20);
opacity: 0.2;
cursor: pointer;
}
.thumbnail-text
{
color: #7A7677;
font-weight: bold;
text-align: left;
display: block;
padding: 10px 2px 2px 0px;
}
/***********************************
Affichage des jus de la Cures dans Carousel des pages sous-rubriques Cure
***********************************/
#LigCar {
width:370px;
height:100px;
margin-top:20px;
border:#CCC 0px solid;
}
#VigCar {
display: -moz-inline-stack;
display: inline-block;
*display: inline;
border:#CCC 0 solid;
-moz-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
-khtml-border-radius: 15px;
margin-right:10px;
}
h3.NomCar {
height:20px;
font-family: Arial, sans-serif;
font-size: 16px;
font-style: italic;
color: #666666;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #666;
/*border: 1px solid #808000;*/
margin-top:0px;
}
#TxtCar {
display: -moz-inline-stack;
display: inline-block;
*display: inline;
border: 0px solid #808000;
vertical-align:top;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999;
text-align: justify;
}
p.TxtCar {
margin-top:-10px;
}
[/css]
J'espère que ce n'est pas trop.
Donc , le premier "Carrousel" qui est inclue par défaut dans la page fonctionne très bien, mais dès que je l'appel par le XHR.. .il ne fonctionne plus ?
Merci de m'aider à comprendre.
