Problema con slideshow

sandoz

Problema con slideshow

Buongiorno. Mi sono appena iscritta a questo forum ed ho due problemi relativamente alla creazione di un sito (CSS+HTML).
In questo post esporrò il primo dei due (mi scuso per la lunghezza del post: per l'altro posterò un'immagine, esplicativa di suo).
Grazie in anticipo qualora riceverò risposte di aiuto.

Premessa
In ogni pagina del sito è presente una tabella divisa in celle (con presenza di funzione rowspan e colspan), scritta in semplice HTML, finora verificata e riconosciuta sia da Chrome e Mozilla sia da Explorer. Nella seconda cella, posta in cima a mo' di classico banner per il sito, ho inserito una slideshow in javascript che prevede la sequenza di tre immagini con effetto fade; le immagini sono dell'esatta grandezza ed altezza della cella; la slideshow funziona perfettamente.

Problema
L'unico vistoso problema si presenta con Chrome (strano a dirsi, con IE non succede!) quando clicco sulle voci del menu sotto (presenti in altra separata cella):
la slideshow, nell'attimo del clic (che vale ovviamente come cambio pagina - scusate l'ovvia precisazione) dà come l'effetto di uscire in quell'istante dalla sua relativa cella (l'effetto si verifica verso il basso: si sposta di un 5cm) per poi subito ritornare al posto. È, come posso dire, un effetto visivo...come se i clic gli dessero un pizzicotto che la fanno spostare e finito quello ritorna al posto, ecco
Naturalmente vorrei invece restasse ferma.

Ipotesi che se possibile vorrei scartare (e in ogni caso risolverebbe?)
Ho pensato che forse la creazione di un frame di due parti potrebbe risolvere (pagina in alto con tabella di logo, banner e menu - frame - pagine sotto con per ognuna una tabella relativa alle voci menu), ma per l'intero sfondo delle pagine ho voluto il gradiente di un colore, e col frame dovrei rinunciarci.

V'incollo comunque la tabella indicando cosa si trova nelle celle, evidenziando in neretto dove si verifica il problema, e sotto lo script della slideshow:

[HTML]
<table align=center cellpadding="0" cellspacing="0" border="0" width=900 height=929>
<tr>
<td rowspan="2" height=199 width=198>immagine logo</td>
<td height=175 width=700>SLIDESHOW che al clic sulle voci menu dà il problema, racchiusa in questo modo:
<div id="slideshow"><img src="ban.jpg"><img src="ban1.jpg"><img src="ban2.jpg"></div></td>
</tr>
<tr>
<td height=24 width=700>voci del menu</td>
</tr>
<tr>
<td colspan="2" height=530 width=898> parte centrale con dei box a seconda delle voci menu</td>
</tr>
<tr>
<td colspan="2" height=200 width=898>ancora vuota</td>
</tr>
[/HTML]


#slideshow img { 
padding: 0px; 
border-spacing: 0px; 
}

mirkomassarutto

Sandoz puoi fornire il link alla pagina? scrivi l'indirizzo senza http :// ... così capiamo meglio di cosa stiamo parlando... anche perchè è il caso di conoscere anche il javascript che utilizzi.
Ciao

sandoz

Sei gentile, grazie
Prima di darti il link, volevo dire che ieri ho notato questo:
Quel problema dell' "effetto pizzicotto" al click sulle parole-link (che fra parentesi non avviene con Mozilla), se come dicevo con Chrome quell'effetto si crea relativamente alla slideshow, con IE la slideshow resta invece al suo posto e quell'effetto al click avviene relativamente all'immagine del logo che sta nella cella accanto alla slideshow. Il problema potrebbe dunque essere legato alla tabella in sè?
Mi permetto quindi di incollare sia il codice relativo alla slideshow sia quello relativo alla mia tabella.
**
Il link slideshow**:
ebug punto it/creiamo-una-semplice-slideshow-con-jquery ... il download del file punto js è a fine articolo.
Io ho seguito il primo esempio, modificando qualcosina solo alla prima parte racchiusa fra i primi due style (valore del "padding" a cui ho dato 0, trasformato "border" in "border-spacing" dando valore 0 e tolto il background), mentre il seguito è tutto uguale, inserito fra apri e chiudi HEAD della pagina HTML:


<style>
#slideshow img { 
padding: 0px; 
border-spacing: 0px; 
}
</style>


<script src="ajax punto googleapis punto com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>


<script src="jquery.cycle.min.js">
</script>


<script type="text/javascript">
$(document).ready(function() {
    $('#slideshow').cycle({
    fx:'fade',
    speed:  1000,
    timeout: 5000
  });
});
</script>

Questa è invece la tabella in toto della pag HTML; nelle celle ci sono riferimenti a testo (p) e box definiti nel foglio CSS:

[HTML]
<table cellpadding="0" cellspacing="0" border="0" width=900 height=929>
<tr><td rowspan="2" height=199 width=198>LOGO con width e height uguali alla cella</td>
<td height=175 width=700><div id="slideshow">3 FIGURE per la slideshow con width e height uguali alla cella</div></td></tr>
<tr><td height=24 width=700>MENU - le voci del menu hanno effetto a:link su hover, visited etc</td></tr>

<tr>
<td colspan="2" height=530 width=898> <div id="box1" style="float:left";><p> PARTE DI TESTO con presenti diversi "<br>" </p></div>
<div id="box2" style="float:left";><div class="box-inner">
<p>
PARTE DI TESTO con presenti diversi "<br>"
</p></div></div>
</td>
</tr>
<tr><td colspan="2" height=200 width=898> ANCORA VUOTA</td></tr>
</table>
[/HTML]

sandoz

ps. il codice della tabella che vi ho incollato presentava due errori: larghezza table e altezza cella menu. Li ho corretti nella mia pagina, ma lo stesso la slideshow dà quel problema. Ho fatto anche prove di tabella con celle tutte una sotto l'altra (senza colspan), ma il problema persiste. Posso quindi dire che il problema sta proprio nella slideshow
Vorrei poter non rinunciare a questa slideshow, perché tra quelle che ho trovato è l'unica che funzioni e abbia allo stesso tempo un codice semplice da ripulire per le mie esigenze (ovvero una slideshow senza freccette e senza frasi che spuntano sulle foto al passaggio del mouse etc...).

Al limite all'anno nuovo aprirò una nuova discussione chiedendo se conoscete un sito con javascript di slideshow effetto fade senza cianfrusaglie, pazienza.
Per adesso grazie, e buon anno

mirkomassarutto

Ciao Sandoz, il codice che hai postato ci dice poco... la cosa che posso notare al volo è la presenza di una doppia chiusura di div (dopo la chiusura del <p>)... quindi innanzitutto controlla la correttezza del codice.. in alcuni casi un errorino del genere può comportare comportamenti strani da parte dei browsers...

io sono partito da questo esempio jquery.malsup.com/cycle/basic.html e lo ho modificato inserendo la tua tabella .. ma non ho problemi

ovviamente mi manca una base... cioè il codice relativo ai bottoni... non puoi fornire il link? scrivilo qui senza http come ho fatto io per l'esempio jquery. Ciao

p.s.: perchè usare una tabella se non devi mostrare una tabella?

sandoz

Ciao Mirkonetit, grazie per la risposta, sei molto gentile.
La presenza dei due </div> è per il seguente motivo: il primo chiude il <div class="box inner">, relativo alla presenza di una scrollbar all'interno del box...guarda:


<div id="box2" style="float:left";>
<div class="box-inner">
<p> 
PARTE DI TESTO
 </p></div></div>

In questo caso dici quindi basta una sola chiusura che si riferisca ad entrambi i div? Ho provato adesso ad inglobare "class="box-inner" all'interno del primo div, così da essercene solo uno e una sola relativa chiusura: la scrollbar non rispetta il margine a destra che gli avevo chiesto di avere ma resta dentro, però il famoso problema relativo alla slideshow persiste.

Per codice relativo ai bottoni intendi il modo in cui ho reso links le voci del menu? Se così: nella pagina HTML ogni voce ha un semplice:
[HTML]
<a href="home punto html">home</a>
[/HTML]

(ho messo qui solo la prima voce, per farti capire)
Mentre nel foglio CSS ciò che diventa link è definito in questo modo:


a:link {color: black; text-decoration:none; }


a:visited {color: black; text-decoration:none; }


a:hover { color:#797979; text-decoration:none; }

Ti faccio vedere il sito com'è finora, per ciò che ti spiegherò in seguito:
lemonlies punto altervista punto org/sitoAMPGS punto jpg
(ciò che si legge dopo il benvenuto è la recensione di un libro incollata per adesso per gestire il testo )

Il motivo per il quale sto usando una tabella è perché non sono ancora così brava da creare per l'intera pagina dei box con le giuste posizioni...Mi sono insomma servita di un qualcosa da gestire di per sé al centro della pagina (intendo la tabella), e all'interno delle relative celle inserire dei box dove preferisco (in questo caso all'interno della parte centrale). Lo trovi troppo pretenzioso? In effetti ho letto che tabelle e CSS non camminano proprio a braccetto. Ad onor del vero posso comunque ammettere che il problema della slideshow risulta proprio relativamente allo stare dentro la cella della tabella, perché ieri ho provato a creare a mo' di banner un box dove inserirla esternamente alla tabella, quest'ultima l'ho posizionata sotto il box e cliccando sui links di cambio pagina la slideshow si ricaricava senza spostarsi all'attimo del click sui links. Ho però riscontrato problemi su Mozilla e IE, perché, al contrario di Chrome in cui la tabella restava al centro, negli altri browser si andava a posizionare alla destra del box/banner, nonostante avessi dato coordinate di center etc.

Ad ogni modo: ti sto già disturbando un bel po', quindi credo mi metterò a studiare per bene i giusti modi per posizionare più box nel modo in cui sono posizionate le celle della tabella, con i CSS si può, no? Cercando il modo che serve a far apparire tutto uguale anche in IE e, se darà problemi, in Mozilla.

mirkomassarutto

Allora.. ho dato un occhiata alla tua immagine su lemonlies.altervista.org/sitoAMPGS.jpg

io farei cosi:

Immaginiamo la header (logo compreso) come quello che è: un elenco puntato

Quindi la struttura HTML sarà:
<ul class="header">
<li><a href="/" title="AMPGS" class="logo">AMPGS</a></li>
<li><a href="/" title="vai alla home">home</a></li>
<li><a href="/" title="trova la sede">sede</a></li>
<li><a href="/" title="i nostri corsi">corsi</a></li>
</ul>

In questo caso dovrai dare delle dimensioni alla classe header in modo che prenda anche l'altezza...
il <li> con classe logo avrà le dimensioni del tuo logotipo e avrà un overflow hidden. all'intero il link sarà in display block e avrà un padding pari alle dimensioni del logo (così la scritta testuale non risulta visibile) ed il background sarà il logotipo.
Gli altri li avranno dimensioni AUTO e avranno un margine top per esser posizionati in basso.

Poichè vuoi cambiare lo sfondo con effetto fade (senza far sparire i contenuti della header) devi modificare la header in maniera che il menu si a sovrapposto ad un div che contenga gli sfondi...

A questo punto devi giocare un po con javascript.. io ho usato per l'esempio jquery che ti semplifica la vita in buiona sostanza abbiamo due livelli sovrapposti bImg1 e bImg2 la cui immagine all'interno viene sostituita con un effetto fade.
su un livello superiore ho messo il menù descritto sopra... di seguito il codice completo... spero risulti comprensibile. Ciao, Mirko
p.s. un esempio funzionante lo trovi qui: networkitaly.com/examples/fading_header_background

<html>
<style>
html, body {
margin: 0;
padding: 0;
background: #fff;
color: #000;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
a {
text-decoration: none;
}
.headercontainer {
position: relative;
margin: auto;
padding: 0;
width: 929px;
height: 199px;
}
.header {
margin: 0;
padding: 0;
width: 929px;
height: 199px;
background: rgba(255,255,255,.7);
margin: auto;
position: absolute;
top: 0;
z-index: 10;
}
.header li {
float: left;
height: 15px;
line-height: 15px;
margin: 184px 5px;
padding: 0;
list-style: none;
}
li.logo {
height: 199px;
width: 150px;
margin-top: 0;
background: url(mylogo.jpg) center center no-repeat;
background-size: contain;
overflow:hidden;
}
li.logo a {
display: block;
padding: 200px;
}
#background-images {
position: relative;
margin: 0;
padding: 0;
width: 929px;
height: 199px;
z-index: 1;
}
#bImg1 {
position: absolute;
width: 929px;
height: 199px;
z-index: 3;
background: url(start_img1.jpg) center center no-repeat;
background-size: cover;
}
#bImg2 {
display: none;
position: absolute;
width: 929px;
height: 199px;
z-index: 2;
background: url(start_img2.jpg) center center no-repeat;
background-size: cover;
}
.container {
width: 929px;
margin: auto;
}
.content {
width: 700px;
float: left;
}
.news li {
list-style: none;
}
.news li span {
text-decoration: underline;
display: block;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var imageSet1 = ["img1.jpg", "img2.jpg", "img3.jpg"];
var currentImageSet1 = 0;

var imageSet2 = ["img4.jpg", "img5.jpg", "img6.jpg"];
var currentImageSet2 = 0;

function changeBackgroundImages() {
img1Fade();
setTimeout(img2Fade, 2000);

}
function img1Fade(){

$('#bImg1').fadeOut('slow', function(){$('#bImg1').css({background: 'url(' + imageSet1[++currentImageSet1] + ')'})});
$('#bImg2').fadeIn('slow');
if (currentImageSet1 >= imageSet1.length - 1) {


        currentImageSet1 -= imageSet1.length;
    };

}

function img2Fade(){

$('#bImg2').fadeOut('slow', function(){$('#bImg2').css({background: 'url(' + imageSet2[++currentImageSet2] + ')'})});
$('#bImg1').fadeIn('slow');
if (currentImageSet2 >= imageSet2.length - 1) {


        currentImageSet2 -= imageSet2.length;
    };

}

$(document).ready(function(){
setInterval(changeBackgroundImages, 5000);
});
</script>
<body>
<div class="headercontainer">
<div id="background-images">
<div id="bImg1"></div>
<div id="bImg2"></div>
</div>
<ul class="header">
<li class="logo"><a href="/" title="AMPGS">AMPGS</a></li>
<li><a href="/" title="vai alla home">home</a></li>
<li><a href="/" title="trova la sede">sede</a></li>
<li><a href="/" title="i nostri corsi">corsi</a></li>
</ul>
</div>
<div class="container">
<div class="content">
<h1>Benvenuti in...</h1>
<p>
al premio nobel per....
</p>
</div>
<div class="news">
<h2>News</h2>
<ul>
<li><span>Domenica 29:</span> Bla Bla Bla</li>
<li><span>Domenica 321:</span> Bla Bla Bla</li>
</ul>
</div>
</div>
</body>
</html>

sandoz

Mirko, sei stato davvero molto molto gentile, grazie. Più tardi proverò a studiare il tutto e a metterlo in pratica. Spero funzionerà
Grazie ancora

sandoz

Mirko, per correttezza voglio aggiungere una risposta dicendo che ho risolto in toto il problema slideshow, che adesso funziona benissimo!
Non ho utilizzato alla lettera le tue istruzioni (ancora non padroneggio di tutte le nomenclature dei CSS), ma mi sono comunque tornate utilissime nell'organizzare il tipo di struttura che ho creato. Ho praticamente ricreato un foglio CSS quasi uguale al tuo, la differenza è che ho creato tutti i box nominandoli così:


.logo {position: absolute;
left: 270px;
top: 57px;
width: 199px;
height: 199px;
background-color: transparent;
text-align: left;
}

#slideshow { 
padding: 0px; 
border-spacing: 0px; 
position: absolute;
left: 469px;
top: 57px;
width: 700px;
height: 175px;
background-color: #97d8f8;
text-align: left;
}


.menu {
position: absolute;
left: 469px;
top: 232px;
width: 700px;
height: 24px;
background-color:;
text-align: left;
}

...Eccetera eccetera per anche gli altri box che grazie ai valori di position, left e top si sono posizionati tutti nell'esatto posto che volevo per ognuno.
Nelle pagine HTML ho richiamato i box con apri e chiudi div=class e nome del box in questione. Tutto funziona Sono molto contenta.
Grazie mille per l'interessamento: mi ha dato l'input ad abbandonare la tabella per i box
Ciao e ancora grazie.