[Javascript] Selezione dinamica video

anto4392

Nuovo Utente
22 Mag 2017
25
1
3
32
Salve a tutti,

ho creato una pagina html con una serie di article contenenti video. Vorrei creare un menù a tendina per selezionare solo determinate categorie (ad esempio, solo i video di giocoleria)

Come posso fare?

Vi riporto il codice della pagina
Codice:
<!DOCTYPE html>
  <html lang="it">
    <head>
    <title>Foto</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css' /> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->



    
    </head>
    
        <body>

      
        <!--Header-->
        
        <header>
        
        
        <nav class="social">
                    <ul>
                        <li><a href="#"class="fa fa-facebook"></a></li>
                        <li><a href="#" class="fa fa-twitter"></a></li>
                        <li><a href="#" class="fa fa-instagram"></a></li>
                        <li><a href="#" class="fa fa-youtube"></a></li>

                    </ul>
        </nav>
        
        <div class="form-top">
        <form>Registrati alla Newsletter
            <input type="email">
            <input type="submit" id="submit">
            </form>
        </div>
        
        <img src="image/banner.jpg" class="small" alt="logo"/>
            
            
        <!--Menu di navigazione-->
        <div class="topnav" id="myTopnav">
        <a href="index.html">Home</a>
        <a href="#">Progetto</a>
        <a href="iniziative.html">Iniziative</a>
        <a href="#">News</a>
        <a href="#">Foto e video</a>
        <a href="#">Come partecipare</a>
        <a href="#">Registrati</a>
        <a href="#">Contatti</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
        </div>
        
        
        </header>
        
        <div id="content">


<div class="responsive">
  <div class="gallery">
    <video width="600" height="600" controls>
  <source src="video/giocoleria1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
    <div class="desc">Circo Inzir Torino 20 maggio 2016</div>
    <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbuonastrada.net%2F&width=136&layout=button&action=like&size=small&show_faces=false&share=true&height=65&appId=829285517229593" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
    </div>

</div>


<div class="responsive">
  <div class="gallery">
 <video width="600" height="600" controls>
  <source src="video/giocoleria2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
    <div class="desc">Circo Inzir Torino 20 maggio 2016</div>
    <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbuonastrada.net%2F&width=136&layout=button&action=like&size=small&show_faces=false&share=true&height=65&appId=829285517229593" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  </div>
 
</div>

<div class="responsive">
  <div class="gallery">
 <video width="600" height="600" controls>
  <source src="video/giocoleria4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
    <div class="desc">Circo Inzir Torino 20 maggio 2016</div>
    <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbuonastrada.net%2F&width=136&layout=button&action=like&size=small&show_faces=false&share=true&height=65&appId=829285517229593" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  </div>
</div>

<div class="responsive">
  <div class="gallery">
 <video width="600" height="600" controls>
  <source src="video/giocoleria5.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
    <div class="desc">Circo Inzir Torino 20 maggio 2016</div>
    <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbuonastrada.net%2F&width=136&layout=button&action=like&size=small&show_faces=false&share=true&height=65&appId=829285517229593" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  </div>
</div>

<div class="clearfix"></div>

<div class="responsive">
  <div class="gallery">
 <video width="600" height="600" controls>
  <source src="video/giocoleria6.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
    <div class="desc">Circo Inzir Torino 20 maggio 2016</div>
    <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbuonastrada.net%2F&width=136&layout=button&action=like&size=small&show_faces=false&share=true&height=65&appId=829285517229593" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  </div>
</div>


<div class="responsive">
  <div class="gallery">
 <video width="600" height="600" controls>
  <source src="video/giocoleria7.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
    <div class="desc">Circo Inzir Torino 20 maggio 2016</div>
    <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbuonastrada.net%2F&width=136&layout=button&action=like&size=small&show_faces=false&share=true&height=65&appId=829285517229593" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

  </div>
</div>

<div class="responsive">
  <div class="gallery">
 <video width="600" height="600" controls>
  <source src="video/giocoleria8.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
    <div class="desc">Circo Inzir Torino 20 maggio 2016</div>
    <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbuonastrada.net%2F&width=136&layout=button&action=like&size=small&show_faces=false&share=true&height=65&appId=829285517229593" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

  </div>
</div>

<div class="responsive">
  <div class="gallery">
 <video width="600" height="600" controls>
  <source src="video/giocoleria9.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
    <div class="desc">Artisti in Piazza 2017-Pennabilli</div>
  <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbuonastrada.net%2F&width=136&layout=button&action=like&size=small&show_faces=false&share=true&height=65&appId=829285517229593" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

  </div>
</div>

<div class="clearfix"></div>



                </div>
        

        <!--Footer-->
        <footer>
        <p>FNAS - federazione nazionale arti in strada | sede legale: Via di Villa Patrizi 10, 00161 Roma - C.F. 96395280587 - P.Iva 07510401008</p>
        </footer>
        
        <script>
<!--Rende la topnav responsive-->
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>
</body>
  </html>
 
Discussioni simili
Autore Titolo Forum Risposte Data
A [Javascript] Selezione dinamica Javascript 27
maxnegri [Javascript] TinyDatePicker data format e selezione progressiva. Javascript 0
F Svantaggi del codice Javascript per disabiltare la selezione del testo? Javascript 1
S Funzione JavaScript per selezione Javascript 3
I Creare un banner temporaneo JavaScript Javascript 0
S Impossibile scorrere un oggetto in JavaScript Javascript 0
N Passare array da php a javascript PHP 5
L Quiz javascript funzionante da migliorare Javascript 0
P errore 404 con javascript Javascript 2
D aiuto funzioni javascript Javascript 1
M Upload immagine con javascript problemi con FormData() Javascript 1
L countdown multiplo javascript Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 1
F Creare elementi html con javascript Javascript 3
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
R Confrontare il dominio di una mail con una stringa contenente un dominio personalizzato, tutto ciò in php o javascript PHP 0
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
G Problema verifica palindromo e verifica pari e dispari javascript Javascript 0
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
R Cerco supporto in programmazione javascript Offerte e Richieste di Lavoro e/o Collaborazione 0
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 18
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
F [Javascript] comando innerHTML non funziona Javascript 5
alexice51 proggrammi per scrivere in javascript? Javascript 3

Discussioni simili