problema slideshow 100% width

**bukz** · 15-11-2011, 02:45

Salve ho trovato un slideshow online ed ho provato ad adattarlo ad un mio sito ma riscontro un problema:

voglio mettere questo slideshow come header 100% del sito.
Ho modificato il codice per fargli prendere le immaigni da una cartella e dare sempre il 100% di width e la height relativa al'immagine.

solo ora tutte le div che vengono dopo lo slideshow gli appaiono dietro (inivisibili) invece che sotto.

ecco il codice:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<script type="text/javascript">

/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it

***/

function slideSwitch() {
var $active = $('#slideshow div.active');

if ( $active.length == 0 ) $active = $('#slideshow div:last');

// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow div:first');

// uncomment the 3 lines below to pull the images in random order

// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );

$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}

$(function() {
setInterval( "slideSwitch()", 5000 );
});

</script>

<style type="text/css">

/*** set the width and height to match your images **/

#slideshow {
position:relative;
width:100%;
}

#slideshow div {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
width:100%;
}

#slideshow div.active {
z-index:10;
opacity:1.0;
width:100%;
}

#slideshow div.last-active {
z-index:9;
width:100%;
}

</style>
</head>
<body style="font-family: Arial, Sans-serif, sans;">
<div id="slideshow">
<?php
if ($handle = opendir('pics')) {
$actv=false;
/* This is the correct way to loop over the directory. */
while (false !== ($file = readdir($handle))) {
if ($file!="." && $file!="..") {
if ($actv==false) {
echo '<div class="active"> [img]'.$file.'[/img] </div>';
$actv=true;
}
else {
echo '<div> [img]'.$file.'[/img] </div>';
}
}
}

closedir($handle);
}
?>
</div>
<div id="mainbody">
CONTENT.....
</div>
</body>
</html>

Come posso far apparire la div mainbody sotto lo slider? aiuto!

grazie

**bukz** · 15-11-2011, 18:12

nessuno sa aiutarmi ?

**Mich_** · 16-11-2011, 09:20

Hai postato codice senza formattazione (devi usare il tag [ code ]); hai postato un codice piuttosto lungo; ci hai inserito parti PHP (non si riesce a capire cosa fa il programma lato server).
Sono tutto cose che scoraggiano chi volesse aiutarti.

Inoltre personalmente non so cosa sia un "header 100%"

Meglio se posti un link (eventualmetne una pagina provvisoria), in modo che si possa vedere la pagina in funzione.

**bukz** · 16-11-2011, 17:30

allora il problema e che quando creo uno slider con 100% width tutte le div hce vengono dopo di lui nel codice appaiono dietro invece che sotto.

Questo slide va come 'header' cioe è posto per primo nela parte superiore della pagina. Assegnandogli un'altezza fissa tutto apparte sotto come dovrebbe, ma a me serve full width (100%) quindi l'altezza varia a secondo della grandezza della pagina.

ecco qui il codice piu semplificato:
css:

codice:

#wrapper {
	position:relative;
	width:100%;
	height:100%;
}

#slideshow {
    width:100%;
    position:relative;
}

#slideshow DIV {
    position:absolute;
	width:100%;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    background-color: #FFF;
}

#slideshow DIV.active {
    z-index:10;
    opacity:1.0;
}

#slideshow DIV.last-active {
    z-index:9;
}

#slideshow DIV IMG {
	width:100%;
    display: block;
    border: 0;
    margin-bottom: 10px;
}

ed ecco l'html:

codice:

<div id="wrapper">
<div id="slideshow">
    <div class="active">
        [img]image1.jpg[/img]
    </div>
    
    <div>
        [img]image2.jpg[/img]
    </div>
</div>
<div>
CONTENT CHE FINISCE DIETRO INVECE CHE SOTTO
</div>
</div>

ecco il la funzione js (potrebbe servire per capire il problema)

codice:

function slideSwitch() {
    var $active = $('#slideshow DIV.active');

    if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

    // use this to pull the divs in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow DIV:first');

    // uncomment below to pull the divs randomly
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

Ovviamente la posizione absolute a slideshow DIV è essenziale per far funzonare lo slideshow.

qualunque soluzione è piu che ben accetta.
AIUTOOOO!!! :P

**Mich_** · 16-11-2011, 18:02

Anzitutto elimina quelle maiuscole nei nomi degli elementi che hai nel CSS: lo so che alcuni brwoser non fanno differenza maiuscole/minuscole, ma le specifiche dicono che nei CSS i nomi dei tag vanno scritti minuscoli, e qualche browser lo segue.

Il <div> che finisce sotto come e` posizionato?

Altra domanda: Il Wrapper e` definito width:100%, ma il suo contenitore ha larghezza definita? Perche` altrimenti e` un 100% di un valore indeterminato, quindi non definito.

ma a me serve full width (100%) quindi l'altezza varia

questa e` una contraddizione: o parli di width o di height. E ricorda che un valore % ha senso solo se il contenitore ha lo stesso valore definito.

**bukz** · 16-11-2011, 20:24

Grazie della risposta,

allora:
cambio a minuscole tutto e ok....

il div che finisce dietro ha position relative, ma appunto non so cosa dargli per farlo apparire sotto...
Wrapper è il div che contiene tutto, il primo dentro body, quindi non ha contenitore, è lui il contenitore.
Wrapper comunque non è un dvi essenziale per me, lho messo dopo aver letto altri forum, pensavo aiutasse.
Con 'a me serve full width' intendo che lo slider deve coprire sempre il 100% del width della pagina, quindi il height cambia in base alle proporzioni dell'immagine.

ecco il sito:

www.p130.it

lo slider va bene cosi ma il resto appare dietro.

**bukz** · 16-11-2011, 21:39

Qui sotto ho postato un link con i codici piu semplificati possibile, lo slider non funziona perche manca il file jquery ma è irrilevante al mio problema.

Spero aiuti e risolvere il problema

http://jsfiddle.net/ag8mD/2/

**Mich_** · 17-11-2011, 12:04

Anzitutto noto che usi molta formattazione HTML (es: align="center" width="100%"): non e` buona cosa, dato che potrebbe andare in conflitto con la formattazione CSS, e browser diversi risolvono i conflitti in modo diverso: in linea di massima quando si usano i CSS si deve eliminare tutta la formattazione HTML.

Vedo anche che usi la DTD XHTML 1.0 Transitional: probabilmente e` il tuo editor/CMS che lo fa, ma questo porta ad interpretazioni diverse i browser IE, e questo complica la formattazione (tant'e` che hai ben due file CSS per IE - e magari non hai ancora testato IE8 e ie9)

Non vedo la formattazione delle dimensioni dei tag <html> e <body>: in mancanza, i valori % di wrapper non hanno significato.
Prova a mettere
html, body {
width: 100%;
height: 100%; /* vedi domande sotto */
}

Ed ecco alcune domande (che richiedono un ripensamento):
1. Perche` il wrapper e` alto SOLO 100%? Dovrebbe potersi allungare se la pagina e` piu` lunga.
Prova a togliere l'altezza del wrapper, lasciandolo in automatico.

2. in quale brower stai testando? Io non ho guardato i CSS per IE - ragiono solo sui brwoser standard

3. Parli di wrapper, ma nella pagina si chiama mainwrapper: sei sicuro di aver usato nomi coerenti?

4. la formattazione di maninwrapper e` attaccata al blocco precedente: prova a metterlo all'inizio riga, o almeno lascia uno spazio prima del # (non sono sicuro di cosa dica lo standard a proposito di mettere il # attaccato al } precedente)

E comunque in una pagina cosi` complessa, preferirei vedere piu` ordine: non tanto per il computer (che si fa uno suo schema interno), ma per i programmatori umani che devono poi andar dietro a tutte queste cose: la pulizia del codice evita molti errori.

**bukz** · 17-11-2011, 14:06

grazie dellìinteressamento.

Cmq il sito è fatto in joomla, io voglio solo aggiungere una div in cima al sito con dentro questo slider.
Sto solo aggiungendo css ai fogli gia esistenti.
La formattazione html, i tag, ecc che vedi sul sito p130.it sono le varie prove che stiamo facendo in 2 persone quindi non ci badare.
Per questa ragione ho postato link a jsFiddle, è tutto semplificato li per riscontrare il problema da solo senza tutto il resto.
Ho provato cio che mi hai detto ma purtroppo non cambia niente.

Ecco il link aggiornato:

http://jsfiddle.net/ag8mD/4/

se ti basi sul codice qui vedi il problema semplicemente.
Il propblema è relativo alla height dello slider, se si da una height tutto funziona bene, se do solo width, e la height non è definita quindi varia come dovrebbe non va.

**bukz** · 23-11-2011, 00:31

!

Discussione: problema slideshow 100% width

Strumenti discussione

Ricerca discussione

Visualizza

problema slideshow 100% width

Permessi di invio