Contenu Slideshow qui sort aléatoirement depuis requete SQL

BAM Jan0
Javascript

Bonjour,

Je me permets de poster ce jour, car depuis hier je rencontre un problème avec un slideshow que j'ai mis sur mon site.
En effet, jusqu'à hier, je modifiais le contenu de mon slideshow via les pages de code où il se situe, et je n'ai jamais rencontré de soucis.

Hier j'ai administré mon slideshow via des requêtes SQL, tout en modifiant certains paramètres de mon css avec un max-width et un max-height afin que les images(de tailles variables) de celui-ci s'adaptent le mieux possible.

Suite à ces modifications, il s'avère qu'une partie de mon slideshow n'a plus le mouvement escompté, et ce de manière très aléatoire. C'est à dire qu'au moindre changement de page, que ce soit sur mon site ou sur un autre, ou encore quand je clique sur la flèche du navigateur pour revenir en arrière, je peux me retrouver avec soit le contenu à sa place ou soit le contenu qui se met en dessous (en gros qui ne bouge pas de son point de départ, et qui n'est pas en hidden).

Voila 2 screen qui montre mon problème en image:
En temps normal:

Bug aléatoire depuis hier:
http://img98.xooimage.com/files/0/e/9/fez-42d078b.png

Code avant modif:
PHP:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="bam_style.css" />
        <link rel="icon" type="image/png" href="images/picto_bam.png" />
        <style type="text/css" >
    </style>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js" ></script>
    <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js" ></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#slideshow").tabs({fx:{opacity: "toggle", duration: 'slow'}, {opacity: "toggle", duration: 'normal'}],
            show: function(event, ui){
                $('#slideshow .ui-tabs-panel .info').hide();
                var infoheight=$('.info', ui.panel).height();
                $('.info', ui.panel).css('height', '0px').animate({ 'height': infoheight }, 500);
            }
        }).tabs("rotate", 5000, true);
        $('#slideshow').hover(
            function(){ $('#slideshow').tabs('rotate', 0, true); },
            function(){ $('#slideshow').tabs('rotate', 5000, true); }
        );
        $('#slideshow .ui-tabs-panel a.hideshow').click(function(){
            if($(this).text()=='Hide'){
                $(this).parent('.info').animate({ 'height': '0px' }, 500);
                $(this).text('Show');
            }
            else{
                $(this).parent('.info').animate({ 'height': '70px' }, 500);
                $(this).text('Hide');
            }
            return false;
        });
    });
    </script>
        <title>BAM e-Sport</title>
    </head>
    <body>

            <!-- LOGO -->   
            <div id="logo"></div>

            <!-- MENU NAVIGATION -->    
            <?php include("menu.php"); ?>

            <!-- CORPS DU SITE -->      
            <div id="bloc_page">

                <!-- SLIDESHOW & RESEAUX SOCIAUX -->
                <div id="slideshow_reseaux_sociaux">

                        <!-- slideswhow -->
                        <div id="slideshow" >
                                <ul class="ui-tabs-nav">
                                    <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><div id="titre_haut"> All4Gaming réouvre ses portes!</div><div id="date">29/07/2013</div></a></li>
                                    <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><div id="titre_haut">Lancement de la BAM Tv Girls!</div><div id="date">23/07/2013</div></a></li>
                                    <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><div id="titre_haut">2 beaux tops pour FlowMJ en ce mois de Juillet!</div><div id="date">31/07/2013</div></a></li>
                                </ul>
                                <!-- 1ère News -->
                                <div id="fragment-1" class="ui-tabs-panel" style="">
                                    <img src="images/sa1.png" alt="" />
                                     <div class="info" >
                                        <h2> All4Gaming réouvre ses portes!</h2>
                                        <p>Salut à toutes les gameuses et les gamers,voici LA nouvelle de la journée, ou pas... ^^La boutique All 4 Gaming ré-ouvre enfin ses portes !...<a href="http://www.team-bam.com/t8717-All4Gaming-r-ouvre-ses-portes.htm" target="_blank">Lire la suite</a></p>
                                     </div>
                                </div>
                                <!-- 2ème News -->
                                <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
                                    <img src="images/sa2.png" alt="" />
                                     <div class="info" >
                                        <h2>Lancement de la BAM Tv Girls!</h2>
                                        <p>Après le succès de la BAM Tv et les lives de Okpapi (LoL, CoD, SCII), la BAM e-Sport vous propose de découvrir ...<a href="http://www.team-bam.com/t8711-Lancement-de-la-BAM-Tv-Girls.htm" target="_blank">Lire la suite</a></p>
                                     </div>
                                </div>
                                <!-- 3ème News -->
                                <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
                                    <img src="images/sa3.png" alt="" />
                                     <div class="info" >
                                        <h2>2 beaux tops pour FlowMJ en ce mois de Juillet!</h2>
                                        <p>Vous le savez sans doute, l'été n'est pas la saison du repos sur CoD. FlowMJ en est la preuve, il sort de 2 LANs consécutives, avec de beaux résultats a la clef ...<a href="http://www.team-bam.com/t8721-2-beaux-tops-pour-FlowMJ-en-ce-mois-de-Juillet.htm" target="_blank">Lire la suite</a></p>
                                     </div>
                                </div>
                        </div>

CSS: 

/* slideshow */
#slideshow{ 
    width:873px;  
    position:relative;
    background: url('images/contour_block_slideshow.png');
    height:393px; overflow:hidden;
}
#slideshow ul.ui-tabs-nav{ 
    position:absolute;
    top: 14px; right:61px; 
    list-style:none; 
    padding-right: 0; margin:0; 
    width:211px; height:322px;
    overflow:auto;
    overflow-x:hidden;
}
#titre_haut{
    padding: 5px;
    font-size:16px; font-family:"Myriad pro";  
    line-height:18px; 
}
#date{
    position: relative;
    top: 35px;
    right: 5px;
    text-align: right;
    font-size:12px; font-family:"Myriad pro";
}
#slideshow li.ui-tabs-nav-item a{ 
    display:block;
    width:211px;
    height:106px;
    margin-bottom: 1px;
    text-decoration:none;
    background: url('images/smalld3.png');
    color: #b26767;
    line-height:20px; outline:none;
}
#slideshow li.ui-tabs-nav-item a:hover{ 
    background:url('images/smalld3.png');
    color: #ffffff;
}
#slideshow li.ui-tabs-selected, #slideshow li.ui-tabs-active{ 
    background:url('images/selected-item.gif') top left no-repeat;  
}
#slideshow ul.ui-tabs-nav li.ui-tabs-selected a, #slideshow ul.ui-tabs-nav li.ui-tabs-active a{ 
    color:#ffffff; 
}
#slideshow .ui-tabs-panel{ 
    position:absolute; 
    top: 13px; left:60px; 
    width:539px; height:322px; 
    background:#999; position:relative;
}
#slideshow .ui-tabs-panel .info{ 
    position:absolute; 
    bottom:0; left:0; 
    height:70px; 
    background: url('images/transparent-bg.png'); 
}
#slideshow .ui-tabs-panel .info a.hideshow{
    position:absolute; font-size:11px; font-family:"Myriad pro"; color:#f0f0f0; right:10px; top:-20px; line-height:20px; margin:0; outline:none; background:#333;
}
#slideshow .info h2{ 
    font-size:1.2em; font-family:"Myriad pro"; 
    color:#fff; padding:5px; margin:0; font-weight:normal;
    overflow:hidden; 
}
#slideshow .info p{ 
    margin:0 5px; 
    font-family:Verdana; font-size:11px; 
    line-height:15px; color:#f0f0f0;
}
#slideshow .info a{ 
    text-decoration:none; 
    color:#fff; 
}
#slideshow .info a:hover{ 
    text-decoration:underline; 
}
#slideshow .ui-tabs-hide{ 
    display:none; 
}

Code après modif:
PHP: 

<?php
    mysql_connect('localhost','root','') or die ("connexion impossible");
    mysql_select_db('bam_esport') or die ("pd bdd");        
?>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="bam_style.css" />

        <style type="text/css" >

    </style>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js" ></script>
    <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js" ></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#slideshow").tabs({fx:{opacity: "toggle", duration: 'slow'}, {opacity: "toggle", duration: 'normal'}],
            show: function(event, ui){
                $('#slideshow .ui-tabs-panel .info').hide();
                var infoheight=$('.info', ui.panel).height();
                $('.info', ui.panel).css('height', '0px').animate({ 'height': infoheight }, 500);
            }
        }).tabs("rotate", 5000, true);
        $('#slideshow').hover(
            function(){ $('#slideshow').tabs('rotate', 0, true); },
            function(){ $('#slideshow').tabs('rotate', 5000, true); }
        );
        $('#slideshow .ui-tabs-panel a.hideshow').click(function(){
            if($(this).text()=='Hide'){
                $(this).parent('.info').animate({ 'height': '0px' }, 500);
                $(this).text('Show');
            }
            else{
                $(this).parent('.info').animate({ 'height': '70px' }, 500);
                $(this).text('Hide');
            }
            return false;
        });
    });
    </script>
        <title>BAM e-Sport</title>
    </head>
    <body>

            <!-- LOGO -->   
            <div id="logo"></div>

            <!-- MENU NAVIGATION -->    
            <?php include("include/menu.php"); ?>

            <!-- CORPS DU SITE -->      
            <div id="bloc_page">

            <?php
                $requeteslid1=mysql_query('SELECT * FROM newstest WHERE id=1');                     
                $ligne1=mysql_fetch_array($requeteslid1);
                $requeteslid2=mysql_query('SELECT * FROM newstest WHERE id=2');                     
                $ligne2=mysql_fetch_array($requeteslid2);
                $requeteslid3=mysql_query('SELECT * FROM newstest WHERE id=3');                     
                $ligne3=mysql_fetch_array($requeteslid3);
                $requeteslid4=mysql_query('SELECT * FROM newstest WHERE id=4');                     
                $ligne4=mysql_fetch_array($requeteslid4);
                $requeteslid5=mysql_query('SELECT * FROM newstest WHERE id=5');                     
                $ligne5=mysql_fetch_array($requeteslid5);
                $requeteslid6=mysql_query('SELECT * FROM newstest WHERE id=6');                     
                $ligne6=mysql_fetch_array($requeteslid6);
                $requeteslid7=mysql_query('SELECT * FROM newstest WHERE id=7');                     
                $ligne7=mysql_fetch_array($requeteslid7);
                $requeteslid8=mysql_query('SELECT * FROM newstest WHERE id=8');                     
                $ligne8=mysql_fetch_array($requeteslid8);
                    {
            ?>
                <!-- SLIDESHOW & RESEAUX SOCIAUX -->
                <div id="slideshow_reseaux_sociaux">

                        <!-- slideswhow -->
                        <div id="slideshow" >
                                <ul class="ui-tabs-nav">

                                    <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><div id="date"><?php echo "<p>".date("d/m/Y",strtotime($ligne1"date"]))."</p>";?></div><div id="titre_haut"><?php echo $ligne1'titre'];?></div></a></li>
                                    <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><div id="date"><?php echo "<p>".date("d/m/Y",strtotime($ligne2"date"]))."</p>";?></div><div id="titre_haut"><?php echo $ligne2'titre'];?></div></a></li>
                                    <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><div id="date"><?php echo "<p>".date("d/m/Y",strtotime($ligne3"date"]))."</p>";?></div><div id="titre_haut"><?php echo $ligne3'titre'];?></div></a></li>
                                </ul>
                                <!-- 1ère News -->
                                <div id="fragment-1" class="ui-tabs-panel" style="">

                                    <img src="<?php echo $ligne1'imagelien'];?>"/>

                                     <div class="info" >
                                        <h2><?php echo $ligne1'titre'];?></h2>
                                        <p><?php if(strlen($ligne1'contenu']) > 162) {$ligne1'contenu'] = substr($ligne1'contenu'], 0, 162).'...';};echo $ligne1'contenu'].'      ';?><a href="<?php echo $ligne1'lien'];?>" target="_blank">Lire la suite</a></p>
                                     </div>
                                </div>
                                <!-- 2ème News -->
                                <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">

                                    <img src="<?php echo $ligne2'imagelien'];?>"/>

                                     <div class="info" >
                                        <h2><?php echo $ligne2'titre'];?></h2>
                                        <p><?php if(strlen($ligne2'contenu']) > 162) {$ligne2'contenu'] = substr($ligne2'contenu'], 0, 162).'...';};echo $ligne2'contenu'].'      ';?><a href="<?php echo $ligne2'lien'];?>" target="_blank">Lire la suite</a></p>
                                     </div>
                                </div>
                                <!-- 3ème News -->
                                <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">

                                    <img src="<?php echo $ligne3'imagelien'];?>"/>

                                     <div class="info" >
                                        <h2><?php echo $ligne3'titre'];?></h2>
                                        <p><?php if(strlen($ligne3'contenu']) > 162) {$ligne3'contenu'] = substr($ligne3'contenu'], 0, 162).'...';};echo $ligne3'contenu'].'      ';?><a href="<?php echo $ligne3'lien'];?>" target="_blank">Lire la suite</a></p>
                                     </div>
                                </div>
                        </div>

CSS: 

/* slideshow */
#slideshow{ 
    width:873px;  
    position:relative;
    background: url('images/contour_block_slideshow.png');
    height:393px; overflow:hidden;
}
#slideshow ul.ui-tabs-nav{ 
    position:absolute;
    top: 14px; right:61px; 
    list-style:none; 
    padding-right: 0; margin:0; 
    width:211px; height:322px;
    overflow:auto;
    overflow-x:hidden;
}
#date{
    padding-top:1px;
    padding-left: 5px;
    text-align: left;
    font-size:12px; font-family:"Myriad pro";  
}
#titre_haut{
    padding-left: 5px;
    padding-right: 5px;
    font-size:16px; font-family:"Myriad pro";  
}
#slideshow li.ui-tabs-nav-item a{ 
    display:block;
    width:211px;
    height:106px;
    margin-bottom: 1px;
    text-decoration:none;
    background: url('images/smalld3.png');
    color: #b26767;
    outline:none;
}
#slideshow li.ui-tabs-nav-item a:hover{ 
    background:url('images/smalld3.png');
    color: #ffffff;
}
#slideshow li.ui-tabs-selected, #slideshow li.ui-tabs-active{ 
    background:url('images/selected-item.gif') top left no-repeat;  
}
#slideshow ul.ui-tabs-nav li.ui-tabs-selected a, #slideshow ul.ui-tabs-nav li.ui-tabs-active a{ 
    color:#ffffff; 
}
#slideshow .ui-tabs-panel{ 
    position:absolute; 
    top: 13px; left:60px; 
    width:540px; height:322px;
    background:#fff; position:relative;
}
#slideshow .ui-tabs-panel .info{ 
    position:absolute; 
    bottom:0; left:0;
    width:540px;
    height:70px; 
    background: url('images/transparent-bg.png'); 
}
#slideshow .ui-tabs-panel .info a.hideshow{
    position:absolute; font-size:11px; font-family:"Myriad pro"; color:#f0f0f0; right:10px; top:-20px; line-height:20px; margin:0; outline:none; background:#333;
}
#slideshow .info h2{ 
    font-size:1.2em; font-family:"Myriad pro"; 
    color:#fff; padding:5px; margin:0; font-weight:normal;
    overflow:hidden; 
}
#slideshow .info p{ 
    margin:0 5px; 
    font-family:Verdana; font-size:11px; 
    line-height:15px; color:#f0f0f0;
}
#slideshow .info a{ 
    text-decoration:none; 
    color:#fff; 
}
#slideshow .info a:hover{ 
    text-decoration:underline; 
}
#slideshow .ui-tabs-hide{ 
    display:none; 
}
#slideshow img
{
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 541px;
    max-height: 323px;  
}

Désolé pour la longueur des codes, mais ne sachant pas d'ou vient le soucis je préfère mettre la partie entière du slideshow.

En vous remerciant par avance pour les réponses apportées.

Cordialement

2 réponses

BAM Jan0
Auteur
Réponse acceptée

<u><strong>Sujet résolu!</strong></u>

Le problème était lié à l'appel des css des includes de la page où se trouve le slideshow.

En effet, novice dans le domaine du php, j'essaye des choses, mais qui ne marche pas toujours.
Dans le cas présent, j'appelais 3 includes (menu, sponsors, et footer) dans la page index.php. Le css respectif de ces 3 includes était appelé directement sur leur propre page.
exemple: 

<link rel="stylesheet" href="./css/bandeau_partenaires_style.css" />
<!-- PARTENAIRES -->
    <div id="blocs_partenaires">
        <div id="logo_partenaires"> 
            <a href="http://www.dreamteamcar.com/" target="_blank"><img src="images/logo_dream_team_car.png"/></a>
            <a href="http://www.fanaticgame.com/" target="_blank"><img src="images/logo_fanatic_game.png"/></a>
            <a href="http://www.glory4gamers.fr/inscris-toi-aux-tournois-gratuits/?c=b3c5cd97624d773f39cbb5edab4eafa6/" target="_blank"><img src="images/logo_glory_4_gamers.png"/></a>
            <a href="http://www.neo-creators.fr/" target="_blank"><img src="images/logo_neo_creator.png"/></a>
            <a href="http://www.all4gaming.fr/" target="_blank"><img src="images/logo_all_4_gaming.png"/></a>
            <a href="http://www.ultimate-driver.com/" target="_blank"><img src="images/UD.png"/></a>
            <a href="http://gladiasport.com/" target="_blank"><img src="images/logo_gladiasport.png"/></a>
        </div>                  
    </div>

Du coup, le link rel n'était pas positionné dans les balises <head></head> de la page index.php. En replaçant chaque link rel dans le head de la page index.php, le problème à logiquement disparu.

BAM Jan0
Auteur

Petit UP