le animazioni con jQuery RoyalSlider dentro WP a FireFox non piacciono, non capisco

playmo

Nuovo Utente
13 Apr 2012
4
0
0
Bologna, Italy, Italy
Ciao a tutti e buon anno nuovo!
avrei voluto inserire i link ai due lavori di cui parlo ma mi viene bloccato il post quindi cerco di spigerami a parole
ecco il mio cruccio: ho configurato uno slider con animazioni usando Royalslider
per essere sicuro che il codice fosse giusto prima di inserirlo nella home di WP ho fatto una pagina con solo lo slider e funziona su tutti i browser (per ora non ho fatto i test su IE perchè uso Linux)
quando poi sono andato a metterlo nella Home ho avuto la strana sorpresa, lo slider su Firefox funziona solo in parte, le animazioni sulle immagini non vanno, cosa stranissima, le impostazioni sui testi che fanno parte anche della stessa slide vanno e le immagini no!
per inserire lo slider non ho usato il puglin specifico per wordpress ma ho editato la pagina PHP, i codici dei 2 slider (dentro e fuori WP) sono IDENTICI, e non solo, funzionando su Chrome devo dedurre che non ci sono conflitti JS
ho provato e riprovato senza successo, veramente non riesco a trovare una speigazione logica a questo malfunzionamento
avete qualche idea?
riporto di seguito il codice usato
grazie mille in anticipo

CODICE HTML
Codice:
<head> 
  <title>RoyalSlider</title> 
  <link href="css/slider.css" rel="stylesheet" type="text/css"> 
  <script  src="js/jquery-1.8.0.min.js"></script> 
  <script src="js/jquery.royalslider.min.js"></script> 
</head>

<body> 
     
<div id="slider"> 
     
    <div class="rsContent slide1"> 
 
            <img class="rsABlock sconti"  data-move-effect="none" data-fade-effect="true" data-delay="500" data-speed="1500" src="images/slide1-sconti.png"> 
            <strong style="padding-top: 50px" class="rsABlock blockHeadline" data-delay="2000" data-speed="500" >BENEFICI FISCALI</strong> 
            <strong class="rsABlock blockHeadline" data-delay="2500" data-speed="500" >PER PERSONE CON DISABILITA'</strong> 
            <span style="padding-top: 20px" class="rsABlock txtLeft" data-delay="3500" data-speed="500" data-move-effect="none">IVA agevolata al 4% anzichè al 21%</span> 
 
    </div> <!-- Chiusura slide1 -->  
     
        <div class="rsContent slide2"> 
 
            <img class="rsABlock corriere"  data-move-effect="none" data-fade-effect="true" data-delay="500" data-speed="1500" src="images/slide2-corriere.png"> 
            <strong style="padding-top: 50px" class="rsABlock blockHeadline" data-delay="2000" data-speed="500" >POSSIBILITA' DI SPEDIZIONE</strong> 
            <strong class="rsABlock blockHeadline" data-delay="2500" data-speed="500" >CON CORRIERE ESPRESSO</strong> 
            <span style="padding-top: 20px" class="rsABlock txtLeft" data-delay="3500" data-speed="500" data-move-effect="none">Contattaci per sapere come</span> 
 
    </div> <!-- Chiusura slide2 --> 
     
            <div class="rsContent slide3"> 
 
            <img class="rsABlock parcheggio" data-move-effect="bottom" data-fade-effect="false" data-delay="500" data-speed="1000" src="images/slide3-parcheggio.png"> 
            <strong style="padding-top: 50px" class="rsABlock blockHeadline" data-delay="2000" data-speed="500" >AMPIO PARCHEGGIO COPERTO</strong> 
            <strong class="rsABlock blockHeadline" data-delay="2500" data-speed="500" >RISERVATO AI CLIENTI</strong> 
 
    </div> <!-- Chiusura slide3 -->   
     
</div> <!-- Chiusura slider -->  
 
</body> 
 
<script type="text/javascript"> 
jQuery(document).ready(function($) { 
  $('#slider').royalSlider({ 
    arrowsNav: true, 
    arrowsNavAutoHide: false, 
    controlNavigationSpacing: 0, 
    controlNavigation: 'bullets', 
    imageScaleMode: 'none', 
    imageAlignCenter:false, 
    blockLoop: true, 
    transitionSpeed: 4000,  
    loop: true, 
    numImagesToPreload: 6, 
    transitionType: 'fade', 
    keyboardNavEnabled: true, 
    fadeinLoadedSlide: true, 
    block: { 
      delay: 3000 
    }, 
    autoPlay: { 
            // autoplay options go gere 
            enabled: true, 
            pauseOnHover: true 
    } 
  }); 
}); 
</script>

CODICE CSS
Codice:
@charset "utf-8";
/* CSS Document */


/* Contenitore con gradiente */

#slider {
    border-radius: 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    box-shadow: 10px 10px 5px #dedede;
    margin: 0;    
    width: 945px;
    height: 375px;
    background: rgb(15,105,56); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBmNjkzOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMlIiBzdG9wLWNvbG9yPSIjMTM2YzNiIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iOCUiIHN0b3AtY29sb3I9IiMyNDcwNDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI4JSIgc3RvcC1jb2xvcj0iIzI3NzE0MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwJSIgc3RvcC1jb2xvcj0iIzJhNzM0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEyJSIgc3RvcC1jb2xvcj0iIzMzNzQ0NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE2JSIgc3RvcC1jb2xvcj0iIzNjNzc0OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iIzYwODk2NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUyJSIgc3RvcC1jb2xvcj0iIzgxOWY4MCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc4JSIgc3RvcC1jb2xvcj0iI2I3YzZiNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc4JSIgc3RvcC1jb2xvcj0iI2I5YzhiNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2JkY2JiYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgzJSIgc3RvcC1jb2xvcj0iI2M1ZDFjMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iI2M1ZDJjMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg2JSIgc3RvcC1jb2xvcj0iI2NiZDZjOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg5JSIgc3RvcC1jb2xvcj0iI2QwZGFjZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg5JSIgc3RvcC1jb2xvcj0iI2QyZGNkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjkyJSIgc3RvcC1jb2xvcj0iI2Q4ZTFkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk0JSIgc3RvcC1jb2xvcj0iI2RlZTVkYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0iI2UxZTdkZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0iI2UzZTllMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZWYyZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  rgba(15,105,56,1) 0%, rgba(19,108,59,1) 3%, rgba(36,112,64,1) 8%, rgba(39,113,65,1) 8%, rgba(42,115,66,1) 10%, rgba(51,116,69,1) 12%, rgba(60,119,73,1) 16%, rgba(96,137,100,1) 33%, rgba(129,159,128,1) 52%, rgba(183,198,180,1) 78%, rgba(185,200,182,1) 78%, rgba(189,203,186,1) 80%, rgba(197,209,194,1) 83%, rgba(197,210,195,1) 84%, rgba(203,214,201,1) 86%, rgba(208,218,207,1) 89%, rgba(210,220,209,1) 89%, rgba(216,225,215,1) 92%, rgba(222,229,220,1) 94%, rgba(225,231,223,1) 95%, rgba(227,233,225,1) 95%, rgba(238,242,237,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(15,105,56,1)), color-stop(3%,rgba(19,108,59,1)), color-stop(8%,rgba(36,112,64,1)), color-stop(8%,rgba(39,113,65,1)), color-stop(10%,rgba(42,115,66,1)), color-stop(12%,rgba(51,116,69,1)), color-stop(16%,rgba(60,119,73,1)), color-stop(33%,rgba(96,137,100,1)), color-stop(52%,rgba(129,159,128,1)), color-stop(78%,rgba(183,198,180,1)), color-stop(78%,rgba(185,200,182,1)), color-stop(80%,rgba(189,203,186,1)), color-stop(83%,rgba(197,209,194,1)), color-stop(84%,rgba(197,210,195,1)), color-stop(86%,rgba(203,214,201,1)), color-stop(89%,rgba(208,218,207,1)), color-stop(89%,rgba(210,220,209,1)), color-stop(92%,rgba(216,225,215,1)), color-stop(94%,rgba(222,229,220,1)), color-stop(95%,rgba(225,231,223,1)), color-stop(95%,rgba(227,233,225,1)), color-stop(100%,rgba(238,242,237,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(15,105,56,1) 0%,rgba(19,108,59,1) 3%,rgba(36,112,64,1) 8%,rgba(39,113,65,1) 8%,rgba(42,115,66,1) 10%,rgba(51,116,69,1) 12%,rgba(60,119,73,1) 16%,rgba(96,137,100,1) 33%,rgba(129,159,128,1) 52%,rgba(183,198,180,1) 78%,rgba(185,200,182,1) 78%,rgba(189,203,186,1) 80%,rgba(197,209,194,1) 83%,rgba(197,210,195,1) 84%,rgba(203,214,201,1) 86%,rgba(208,218,207,1) 89%,rgba(210,220,209,1) 89%,rgba(216,225,215,1) 92%,rgba(222,229,220,1) 94%,rgba(225,231,223,1) 95%,rgba(227,233,225,1) 95%,rgba(238,242,237,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(15,105,56,1) 0%,rgba(19,108,59,1) 3%,rgba(36,112,64,1) 8%,rgba(39,113,65,1) 8%,rgba(42,115,66,1) 10%,rgba(51,116,69,1) 12%,rgba(60,119,73,1) 16%,rgba(96,137,100,1) 33%,rgba(129,159,128,1) 52%,rgba(183,198,180,1) 78%,rgba(185,200,182,1) 78%,rgba(189,203,186,1) 80%,rgba(197,209,194,1) 83%,rgba(197,210,195,1) 84%,rgba(203,214,201,1) 86%,rgba(208,218,207,1) 89%,rgba(210,220,209,1) 89%,rgba(216,225,215,1) 92%,rgba(222,229,220,1) 94%,rgba(225,231,223,1) 95%,rgba(227,233,225,1) 95%,rgba(238,242,237,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(15,105,56,1) 0%,rgba(19,108,59,1) 3%,rgba(36,112,64,1) 8%,rgba(39,113,65,1) 8%,rgba(42,115,66,1) 10%,rgba(51,116,69,1) 12%,rgba(60,119,73,1) 16%,rgba(96,137,100,1) 33%,rgba(129,159,128,1) 52%,rgba(183,198,180,1) 78%,rgba(185,200,182,1) 78%,rgba(189,203,186,1) 80%,rgba(197,209,194,1) 83%,rgba(197,210,195,1) 84%,rgba(203,214,201,1) 86%,rgba(208,218,207,1) 89%,rgba(210,220,209,1) 89%,rgba(216,225,215,1) 92%,rgba(222,229,220,1) 94%,rgba(225,231,223,1) 95%,rgba(227,233,225,1) 95%,rgba(238,242,237,1) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(15,105,56,1) 0%,rgba(19,108,59,1) 3%,rgba(36,112,64,1) 8%,rgba(39,113,65,1) 8%,rgba(42,115,66,1) 10%,rgba(51,116,69,1) 12%,rgba(60,119,73,1) 16%,rgba(96,137,100,1) 33%,rgba(129,159,128,1) 52%,rgba(183,198,180,1) 78%,rgba(185,200,182,1) 78%,rgba(189,203,186,1) 80%,rgba(197,209,194,1) 83%,rgba(197,210,195,1) 84%,rgba(203,214,201,1) 86%,rgba(208,218,207,1) 89%,rgba(210,220,209,1) 89%,rgba(216,225,215,1) 92%,rgba(222,229,220,1) 94%,rgba(225,231,223,1) 95%,rgba(227,233,225,1) 95%,rgba(238,242,237,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f6938', endColorstr='#eef2ed',GradientType=1 ); /* IE6-8 */
}

/* Impostazioni generali Slider */

.rsContent {
    color: #FFF;
    text-shadow: 2px 2px 2px #000000;
    font-size: 30px;
    line-height: 32px;
    float: left;
}
.bContainer {
    position: relative;
}
.rsABlock {
    position: relative;
    display: block;
    left: auto;
    top: auto;
}
.blockHeadline {
    padding-left: 15px;
    font-size: 42px;
    line-height: 50px;
}
.blockSubHeadline {
    font-size: 32px;
    line-height: 40px
}
.txtCent {
    text-align: center; 
    width: 100%; 
}
.txtLeft {
    padding-left: 15px;
    text-align: left; 
    width: 100%; 
}

/* Impostazioni singole slide */

.sconti {
    margin-top: 8px;
    left: 727px;
    top: 0;
    bottom: 0;
    position: absolute;
    overflow: hidden;
}

.corriere {
    margin-top: 8px;
    left: 519px;
    top: 0;
    bottom: 0;
    position: absolute;
    overflow: hidden;
}

.parcheggio {
    margin-top: 8px;
    left: 692px;
    top: 0;
    bottom: -600;
    position: absolute;
    overflow: hidden;
}
 
Discussioni simili
Autore Titolo Forum Risposte Data
P [CERCO - RETRIBUITO] animazioni con videoscribe o simili Offerte e Richieste di Lavoro e/o Collaborazione 3
I animazioni con js Javascript 0
B animazioni Bitmap con Flash mx 2004 versione6 Flash 3
M Come mettere animazioni flash su pagine create con front page... HTML e CSS 2
M Come creare un menu con animazioni Javascript 1
V animazioni flash Flash 0
GoshMaledetto animate() animazioni in sequenza jQuery 2
G Animazioni a ripetizione jQuery 2
P Layout a griglia fluida vs. animazioni flash HTML e CSS 0
D Animazioni - perchè torna nel suo stato iniziale??? HTML e CSS 2
B Animazioni form php PHP 3
B esportare animazioni da maya Windows e Software 1
N Animazioni scritte Flash 2
S Realizziamo siti internet, animazioni in flash, loghi, banner, header Offerte e Richieste di Lavoro e/o Collaborazione 0
S animazioni flash Flash 1
M link a diverse animazioni flash Javascript 2
D animazioni... Flash 3
L Flash e animazioni 3D Flash 1
T possibile ke nn si visualizzino nè animazioni in flash nè gif animate? Windows e Software 2
M Aiuto Flash [animazioni] Flash 0
M Come creare animazioni e pubblicare siti Flash 2
M Script per decidere - visualizzare animazioni Classic ASP 0
G Invio form con PHP PHP 1
M Barra di navigazione con google HTML e CSS 1
T PROBLEMA CON SESSIONI PHP 3
A Problemi con move_uploaded_file PHP 7
G Menù a tendina di ricerca con query PHP 1
T fatture con voci fattura in php PHP 0
A Tabella con bottoni per aggiornamento record PHP 6
M Come selezionare e deselezionare radiobutton con jquery jQuery 1
MarcoGrazia Calcolo fra due date con esclusione delle feste PHP 7
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
T PROBLEMA CON ARRAY PHP 8
M Inviare un file su un server remoto con JavaScript Javascript 0
L problema con query select PHP 2
M Come validare textarea con jquery jQuery 0
M Problemi con la stampa dei valori in php PHP 1
A Regex per isolare link interni con rel noopener PHP 0
L Problemi con il login PHP 2
F Creare elementi html con javascript Javascript 2
R Problema query con ricerca id numerico PHP 2
R [C#] Quali dipendenze occorrono su progetto "Setup" con Access Database? .NET Framework 0
F Problema con risposta PHP 0
A Sottoquery con group by per mese MySQL 0
R Aggiornare record mysql con Ajax, jQuery e php Ajax 2
A Quale NVR con ingressi bnc ? IP Cam e Videosorveglianza 1
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
T Film interattivo con linguaggi web Programmazione 7
A pulsante di update campo mysql con javascript Javascript 2

Discussioni simili