Bug script Ticker News+Zoom Image

[edilrobotica]

Salve a tutti, premetto che non sono molto esperto di Javascript, Jquery &co., quindi vi prego di essere il più chiari possibile, detto ciò vengo al mio problema...
Nel sito che sto costruendo (http://edilrobotica.altervista.org/) ho inserito alcuni script jquery, uno di questi è quello che permette il cambiamento dei testi contenuti nel menu:

Link script js: http://edilrobotica.altervista.org/js/flashtext.js
Codice HTML:

<div id="flashtext" style="height: 90px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper metus ut velit ornare rutrum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper metus ut velit ornare rutrum.</p>
<p>Etiam at blandit nisl. Integer sollicitudin nunc id lorem dapibus, quis vulputate quam interdum. Aenean magna ipsum, blandit sit amet vulputate ut, consequat vel urna.
Phasellus nulla turpis, cursus in odio et, feugiat luctus erat. </p>
<p>Aenean sodales leo vitae nunc semper, id tincidunt purus pulvinar. In hac habitasse platea dictumst. Mauris et leo laoreet libero accumsan commodo.
Duis ornare arcu non tellus placerat, nec semper felis pharetra.</p>
</div>
<script type='text/javascript'>
start('flashtext');
</script>

Poi ho altri tre script che permettono di zoommare le immagini al passaggio del mouse:
Link script js: http://edilrobotica.altervista.org/js/elevatezoom.js
e di aprire un box in cui è possibile visualizzare l'immagine a dimensione massima:
Link script js: http://edilrobotica.altervista.org/js/fancybox.js
e un file in cui sono configurate le impostazioni, che viene richiamato nel file HTML:
Link script js:http://edilrobotica.altervista.org/js/imageshome.js
Codice HTML:

<table>
<tbody>
<tr>
<td><img id="home1" src="http://forum.it.altervista.org/images/contents/home1small.jpg" data-zoom-image="../images/contents/home1big.jpg" /></td>
<td><img id="home2" src="http://forum.it.altervista.org/images/contents/home2small.jpg" data-zoom-image="../images/contents/home2big.jpg" /></td>
</tr>
<tr>
<td><img id="home3" src="http://forum.it.altervista.org/images/contents/home3small.jpg" data-zoom-image="../images/contents/home3big.jpg" /></td>
<td><img id="home4" src=../images/contents/home4small.jpg" data-zoom-image="../images/contents/home4big.jpg" /></td>
</tr>
<tr>
<td><img id="home5" src="http://forum.it.altervista.org/javascript-e-altri-linguaggi-di-scripting/..images/contents/home5small.jpg" data-zoom-image="../images/contents/home5big.jpg" /></td>
<td><img id="home6" src="http://forum.it.altervista.org/images/contents/home6small.jpg" data-zoom-image="../images/contents/home6big.jpg" /></td>
</tr>
</tbody>
</table> 

<script type="text/javascript" src="../js/imageshome.js"></script> 

Dopo questa breve premessa giungo finalmente al problema: da quando ho inserito gli script elevatezoom.js e fancybox.js con le relative impostazioni in imageshome.js, il testo cambia solo quando si è situati all'inizio della pagina, una volta scesi con la scrollbar all'altezza delle immagini nella homepage, quindi dove si eseguono i due script, i testi si bloccano per ripartire solo quando si ri-scrolla la pagina o quando si risale a inizio pagina.. ho pensato ad un conflitto tra i file, ma non so dove mettere mano per risolvere, per questo chiedo il vostro aiuto. Grazie in anticipo

P.s: sono sicuro che sia uno dei tre file tra elevatezoom.js, fancybox.js ed imageshome.js poiché andando per esclusione erano gli unici che bloccavano flashtext.js, inoltre ho notato anche che raramente i testi compaiono due alla volta, cosa che vorrei evitare se possibile...

[NLSweb]

Gli script fancybox.js e elevatezoom.js , sono visualizzati inline quindi sono difficili da leggere ed interpretare !
per gli altri due script:

imageshome.js - esegue solo due funzioni ripetute per le varie home ....
che solo zoom della home al caricamento del documento
e al click (probabilmente) attiva la funzione fancybox.js

mentre flashtext.js - funzioni per la gestione delle news in flastext

avendo detto

sono sicuro che sia uno dei tre file tra elevatezoom.js, fancybox.js ed imageshome.js poiché andando per esclusione erano gli unici che bloccavano flashtext.js

penso che il colpevole sia l'iterazione di imageshome con fancybox

...a parte la sintassi di imageshome che presenta alcuni errori di forma...

non si può comprendere bene quale sia in dettaglio il comportamento errato della funzione JS
..se postassi un link , si potrebbe almeno usare il debug del browser..

[edilrobotica]

Innanzitutto ti ringrazio per la risposta, ma non capisco quale link devo postarti che ancora non ho postato per usare il debug del browser.. scusa la mia ignoranza, ma mi sono avvicinato da poco a linguaggi come Javascript o Jquery e queste cose non le ho mai fatte.

Ti ringrazio in anticipo per la pazienza

[NLSweb]

Se il sito che stai costruendo è online , puoi postare il suo link in modo da usare il debug del browser per testarlo..
se non è ancora online allora potresti indicare meglio cosa fa questo comando
$.fancybox(ez.getGalleryList());
che è l'unico in presente in imageshome che richiama fancybox

[edilrobotica]

Nel sito che sto costruendo (http://edilrobotica.altervista.org/) ho inserito alcuni script jquery, uno di questi è quello che permette il cambiamento dei testi contenuti nel menu:

Il sito è online ed è quello che ho linkato ad inizio post, purtroppo non sono in grado di indicare cosa fa quel comando, siccome sono codici che ho trovato già fatti

[NLSweb]

il testo cambia solo quando si è situati all'inizio della pagina, una volta scesi con la scrollbar all'altezza delle immagini nella homepage, quindi dove si eseguono i due script, i testi si bloccano per ripartire solo quando si ri-scrolla la pagina o quando si risale a inizio pagina..

ho controllato online con il debug , usando firefox (ultima versione) e il testo non si blocca ! funziona !
mentre con Chrome ritrovo l'errore da te descritto.

quindi si evidenza una incopantibilità di plug-in del browser

L'errore mi riporta:

Failed to load resource: net::ERR_FAILED
chrome-extension ..... cast_sender.js

questo è il link del codice JS

[edilrobotica]

Quindi cosa dovrei fare, una volta individuato questo errore? Scusa la mia più totale ignoranza sull'argomento

[NLSweb]

Allora.. usando il browser Chrome parte delle librerie che hai usato hanno un problema di funzionamento poiché "manca" cast_sender.js
il link che ti ho postato precedentemente illustra il codice JS da implementare per ovviare all'errore di plug-in
quindi prova a inserire quella libreria nel tuo codice e controlla che Chrome non presenti più l'errore.

Quindi posta il risultato del test.

p.s.
bisognerebbe verificare il funzionamento del tuo codice anche con altri browser...

[edilrobotica]

Purtroppo ho già provato subito dopo aver letto il tuo precedente messaggio ad implementare cast_sender.js come puoi anche tu vedere dalla sorgente di http://edilrobotica.altervista.org/ , ma continua a verificarsi lo stesso problema su Chrome...

EDIT: Ho testato il sito su vari browsers, tra cui IExplorer, Firefox e Opera... e ho notato che funziona tutto perfettamente meno che su Chrome, perfino sul tanto odiato IE non si verifica questo problema

[NLSweb]

Ho ricontrollato con il debug di Chrome
il JS inserito riporta: "No cast extension found"

il plug-in lo puoi scaricare QUI

[edilrobotica]

Ho provato ad installare il plugin, ma il risultato è comunque sempre lo stesso con Chrome, inoltre se la soluzione fosse quella di implementare un plugin nel browser tanto varrebbe cambiare lo script siccome non posso far installare il plugin a tutti i visitatori per un bug del genere...

Infine non capisco come un plugin che "ti consente di trovare e riprodurre contenuti sul tuo dispositivo Chromecast dal browser Chrome." possa risolvere quel problema

[NLSweb]

Il Debug di Chrome riportava quell'errore
il codice JS serviva ad identificare la natura del problema
e dopo aver installato il plug-in il debug non da più alcun errore
purtroppo ciò non ha risolto il tuo problema ...
analizzando il flusso dati si vede che la funzione flashtext viene eseguita anche quando si eseguo lo scroll della pagina
ma non vi visualizzato i testi probabilmente perchè ci sono altri conflitti con le librerie preinstallate che hai utilizzato

ho provato a fare delle modifiche ma senza risultato , sarebbe più semplice riscrivere il codice per il flashtext..

Se ti va di cimentarti , io opterei non per una tabella con tutti i testi in cui si nasconde / visualizza ciò che serve
ma di avere un unica area testo sempre visibile e cambiare il contenuto del testo (innerHTML) , questo a prescindere dal fatto se il testo è contenuto in un vettore o estratto da un file di testo o da un DB.

la temporizzazione verrà sempre eseguita con un setInterval , in cui ogni tot secondi scrive il nuovo contenuto nell'area

esempio:

var testi = new Array(5);
testi[0] = "testo in inglese";
testi[1] = "testo in italiano";
...
var indice = 0;
var numMAXtesti = 4;
var elemento = document.getElementById("mioDIV");
elemento.innerHTML = testi[indice];
var ciclo = setInterval(function(){
 indice++;
 if(indice>numMAXtesti){indice=0;}
 elemento.innerHTML = testi[indice];
},1000);

se vuoi aggiungere un effetto fadein/out
visto che usi jQuery..

var testi = new Array(5);
testi[0] = "testo in inglese";
testi[1] = "testo in italiano";
...
var indice = 0;
var numMAXtesti = 4;
var elemento = $("#mioDIV");
elemento.html(testi[indice]);
var ciclo = setInterval(function(){
 indice++;
 if(indice>numMAXtesti){indice=0;}
 elemento.animate({'opacity':'0'},1000,function(){
  elemento.html(testi[indice]);
  elemento.animate({'opacity':'1'},1000);
 });
},3000);

[edilrobotica]

Ciao, come puoi vedere dalla sorgente ho provato il codice qui: http://edilrobotica.altervista.org/prova/

ma non mi funziona... cosa sbaglio? Grazie ancora per la pazienza

[NLSweb]

Davo per scontato che il codice andava messo al caricamento della pagina..

DEMO

[edilrobotica]

Ho caricato il codice da te creato sul sito, ma il problema che si verifica è esattamente identico al precedente, si blocca quando durante lo scroll si arriva alle immagini con lo script dello zoom in home, a questo punto mi tengo questo bug, tanto si verifica solo con Chrome e in homepage...

[NLSweb]

Ho verificato che se il DIV con il testo lo porti fuori dalla tabella funziona anche con Chrome , quindi il problema probabilmente risiede in un conflitto (CSS , JS) della seconda tabella nel div bandiera.

[edilrobotica]

Ho messo il div #flashtext fuori dalla table come da te consigliato, ma io vedo sempre lo stesso risultato: Link

<div id="bandiera">
<div align="center">
<table style="padding: 20px 0px 0px 0px;">
<tbody>
<!-- codice bandierine -->
</tbody>
</table>
</div>

<div id="flashtext" style="height: 100px; font-family: Gautami; color: #FFF; font-size: 14.5px; line-height: 13px; text-align: justify; padding: 10px 15px 35px 15px;"></div>

<table style="font-family: HattoriHanzo; color: #FFF; font-size: 23px; line-height: 12px; float: right; width: 255px; padding: 35px 0 0 0;">
<tbody>
<!--codice voci menu -->
</tbody>
</table>
</div>

[NLSweb]

Se controlli con il Debug di Chrome
attualmente hai come struttura HTML
tre DIV :
posizionebandiera
fixedbandiera
bandiera

posizionando il DIV bandiera fuori da fixedbandiera , funziona senza problemi.

non ho ancora bene capito cosa ci sia nel DIV fixedbandiera che "disturbi" il funzionamento dello script