Domanda Mappa con bootstrap

Stato
Discussione chiusa ad ulteriori risposte.
Mi sa che ho un problema con la funzione perchè se clicco il bottone piano 0 mi mostra il piano 0; se clicco il bottone piano 1 mi mostra il piano 1 e il 2 (dovrebbe mostrare solo il primo); se clicco il bottone piano 2 non mi mostra nulla.

Penso che la funzione funga male e mi mostri o quelli con class="hidden" o quelli con class="visible" (o uno a l'altro).

HMTL
HTML:
                <div class="btn-group">
                      <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Mappe <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu">
                        <li><a numero="0" onClick="visualizza(this)">Piano 0</a></li>
                        <li><a numero="1" onClick="visualizza(this)">Piano 1</a></li>
                        <li><a numero="2" onClick="visualizza(this)">Piano 2</a></li>
                        <li><a numero="3" onClick="visualizza(this)">Piano 3</a></li>
                        <li><a numero="4" onClick="visualizza(this)">Piano 4</a></li>
                        <li><a numero="5" onClick="visualizza(this)">Piano 5</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Dove mangiare?</a></li>
                      </ul>
                </div>


                <div class="panel panel-default" style="border-color: transparent; background-color:transparent; no-border; box-shadow: 0 0 0 0 transparent;">
                    <div id="immagine-piano" class="panel-body">
                        <div class="visible" id="piano0">
                            <div id="piano1d1"></div><div id="piano1d2"></div><div id="piano1d3"></div><br>
                            <div id="piano1d4"></div><div id="piano1d5"></div><div id="piano1d6"></div><br>
                            <div id="piano1d7"></div><div id="piano1d8"></div><div id="piano1d9"></div><div id="piano1d10"></div><div id="piano1d11"></div><div id="piano1d12"></div><div id="piano1d13"></div><div id="piano1d14"></div><div id="piano1d15"></div><div id="piano1d16"></div>
                            <div id="piano1d17"></div><div id="piano1d18"></div><div id="piano1d19"></div><div id="piano1d20"></div><div id="piano1d21"></div>
                            <div id="piano1d22"></div><div id="piano1d23"></div><div id="piano1d24"></div><div id="piano1d25"></div><div id="piano1d26"></div>
                            <div id="piano1d27"></div><div id="piano1d28"></div><div id="piano1d29"></div><div id="piano1d30"></div><div id="piano1d31"></div>
                            <div id="piano1d32"></div><div id="piano1d33"></div><div id="piano1d34"></div><div id="piano1d35"></div><div id="piano1d36"></div>
                            <div id="piano1d37"></div><div id="piano1d38"></div><div id="piano1d39"></div><div id="piano1d40"></div><div id="piano1d41"></div><div id="piano1d42"></div>
                            <div id="piano1d43"></div><div id="piano1d44"></div><div id="piano1d45"></div><div id="piano1d46"></div><div id="piano1d47"></div><div id="piano1d48"></div>
                            <div id="piano1d49"></div><div id="piano1d50"></div><div id="piano1d51"></div><div id="piano1d52"></div><div id="piano1d53"></div><div id="piano1d54"></div>
                            <div id="piano1d55"></div><div id="piano1d56"></div><div id="piano1d57"></div><div id="piano1d58"></div><div id="piano1d59"></div>
                            <div id="piano1d60"></div><div id="piano1d61"></div><div id="piano1d62"></div><div id="piano1d63"></div><div id="piano1d64"></div>
                            <div id="piano1d65"></div><div id="piano1d66"></div><div id="piano1d67"></div><div id="piano1d68"></div><div id="piano1d69"></div>
                            <div id="piano1d70"></div><div id="piano1d71"></div><div id="piano1d72"></div><div id="piano1d73"></div><div id="piano1d74"></div>
                            <div id="piano1d75"></div><div id="piano1d76"></div><div id="piano1d77"></div>
                        </div>
                        <div class="hidden" id="piano1">
                            <div id="piano2d1"></div><div id="piano2d2"></div><div id="piano2d3"></div><div id="piano2d4"></div><div id="piano2d5"></div><div id="piano2d6"></div><div id="piano2d7"></div>
                            <div id="piano2d8"></div><div id="piano2d9"></div><div id="piano2d10"></div><div id="piano2d11"></div><div id="piano2d12"></div><div id="piano2d13"></div><div id="piano2d14"></div>
                            <div id="piano2d15"></div><div id="piano2d16"></div>
                            <div id="piano2d17"></div><div id="piano2d18"></div><div id="piano2d19"></div>
                            <div id="piano2d20"></div><div id="piano2d21"></div><div id="piano2d22"></div><div id="piano2d23"></div><div id="piano2d24"></div>
                            <div id="piano2d25"></div><div id="piano2d26"></div><div id="piano2d27"></div><div id="piano2d28"></div><div id="piano2d29"></div>
                            <div id="piano2d30"></div><div id="piano2d31"></div><div id="piano2d32"></div><div id="piano2d33"></div><div id="piano2d34"></div><div id="piano2d35"></div>
                            <div id="piano2d36"></div><div id="piano2d37"></div><div id="piano2d38"></div><div id="piano2d39"></div><div id="piano2d40"></div><div id="piano2d41"></div>
                            <div id="piano2d42"></div><div id="piano2d43"></div><div id="piano2d44"></div><div id="piano2d45"></div><div id="piano2d46"></div>
                            <div id="piano2d47"></div><div id="piano2d48"></div><div id="piano2d49"></div><div id="piano2d50"></div><div id="piano2d51"></div>
                            <div id="piano2d52"></div><div id="piano2d53"></div><div id="piano2d54"></div><div id="piano2d55"></div><div id="piano2d56"></div>
                        </div>
                        <div class="hidden" id="piano2">
                            <div id="piano3d1"></div>
                            <div id="piano3d2"></div><div id="piano3d3"></div><div id="piano3d4"></div>
                            <div id="piano3d5"></div><div id="piano3d6"></div><div id="piano3d7"></div><div id="piano3d8"></div><div id="piano3d9"></div>
                            <div id="piano3d10"></div><div id="piano3d11"></div><div id="piano3d12"></div><div id="piano3d13"></div><div id="piano3d14"></div>
                            <div id="piano3d15"></div><div id="piano3d16"></div><div id="piano3d17"></div><div id="piano3d18"></div><div id="piano3d19"></div>
                            <div id="piano3d20"></div><div id="piano3d21"></div><div id="piano3d22"></div>
                        </div>
                    </div>
                </div>


JS
Codice:
function visualizza( current )
{
    var padre=document.getElementById("immagine-piano")
    var noe=padre.children.length; //number of elements
    var act=parseInt(current.getAttribute("numero"));
    for( var i=0; i<noe; i++ ){
        if( i==act ){
            padre.children[i].className="visible";
        }
        else if( padre.children[i].className=="visible" ){
            padre.children[i].className="hidden";
        }
    }
}
 
A me funziona... Non è che il tuo browser non elimina i file memorizzati nella cache? prova a cancellarli e a ricaricare la pagina
 
Ho attaccato il codice del secondo piano al mio e va.... ovviamento ho dovuto riempire i div perchè non ho i tuoi css
 
Aggiunti i bordi alle aule utilizzando

Codice:
border:1px solid #636363;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, Gecko */
        box-sizing: border-box;

E i relativi: border-right, border-left, border-top, border-bottom (per evitare doppi bordi nelle aule vicine).
 
Come trovo un bug grafico del genere?
cba0e43f96.png

Nel rettangolo grigio scuro a destra in basso c'è il bordo spezzato.
Le misure però sono giuste quindi penso a uno spazio da qualche parte nel codice che però non trovo..
 
Finito di fare i bordi e sistemati i bottoni, fatte le loro funzioni e collegati alla mappa!
Ora posto su github dove terrò aggiornato.
Essendo scritto da me, incompetente del settore, i codici sono open-soruce.
 
Ragazzi sapete come fare uno slider ma solo con testo?
Sto provando ad integrare carusel di bootstrap togliendo le immagini ma ho problemi eheh
 
Devi rendere statico il background che vuoi per lo slider poi fai le slide in trasparenza. Oppure via CSS gli dai uno sfondo unico, tipo un colore o un gradiente e tutte useranno quello. Ora guardo il codice e ti aggiorno!
 
Devi rendere statico il background che vuoi per lo slider poi fai le slide in trasparenza. Oppure via CSS gli dai uno sfondo unico, tipo un colore o un gradiente e tutte useranno quello. Ora guardo il codice e ti aggiorno!
Risolto lo slide :)
Come dici tu circa :D
 
Ultima modifica:
Chi mi può aiutare a limitare la larghezza di Carusel di bootstrap?
Risolto creando un div class="container"
Ora devo capire come risolvere il problema del responsive sfasato nei telefoni
 
Per il redponsive devi fare il css e fare i casi a seconda dello schermo
Codice:
@media screen and ( max-width: 480px)
{
oggetto{codice}
}
Questo pezzo setta tutti gli attributi che inserisci all'interno a seconda della larghezza dello schermo
 
Per il redponsive devi fare il css e fare i casi a seconda dello schermo
Codice:
@media screen and ( max-width: 480px)
{
oggetto{codice}
}
Questo pezzo setta tutti gli attributi che inserisci all'interno a seconda della larghezza dello schermo

però bootstrap in se l'ha già quello
 
To fissi con quel coso hahaha
Non è difficile farle ste cose, cerca le proprietà dei tag, vedi che fanno e settali manualmente. Su w3schools ci sta tutto.
Magari usi bootmerd per fare una cosa iniziale ma poi ti conviene andare col "blocco note" per sistemare.
 
  • Mi piace
Reazioni: Valley
Stato
Discussione chiusa ad ulteriori risposte.