Contenu Slideshow qui sort aléatoirement depuis requete SQL

Par BAM Jan0, il y a 12 ans

PHP

Bonjour,

Alors tout d'abord je tiens à m'excuser pour le double post. En effet, j'ai écris ce poste aussi dans la partie du forum jquery. Mais ne sachant pas d'ou vient mon soucis php ou jquery, je me permets de le poster aussi dans cette section php.

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

flo3376, il y a 12 ans

hum, ça me dit quelque chose cette blague.
dans tes adresse tu n'aurai pas des pourcentages ou autre caractére spéciaux?? surtout dans celle qui catouille.

Si c'est le cas celà me fait penser à un prb de concaténation (j'ai un doute sur l'orthographe du mot).

une mauvaise mise entre guillement simple ou double en fonction de tes besoins.

<?php
echo ";";
?>

affichera un point virgule ; 

<?php
echo ;;
?>

n'affichera rien 

<?php
echo "if";
?>

affichera if 

<?php
echo if
?>

plantera ton prg.

ce que je veux te dire, c'est de vérifier tes mises en guillemet, car des adresse url contiennent par moment le signe%20 pour simuler un espace.
Et un pourcent qui ce promène dans un php peut être problématique

BAM Jan0, il y a 12 ans

<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.