Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 11
  1. #1
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    20

    menu a tendina a scomparsa potete darmi una mano

    purtroppo non posso far vedere html perche non me lo permette il sistema volevo sapere se questo script è scritto giusto perche non mi funziona va a vuoto quando clicco è un tasto dedicato per smartphone a scomparsa
    <script type="text/javascript">
    $(document).ready(function(){
    $(".header_icon-bar").click(function(e){
    $(".header_menu").Toggleclass('.is-open');
    e.preventDefault();

    });
    });


    so che purtoppo la domanda e incompleta ma piu di cosi non mi permette di di fare!!!!

  2. #2
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    20
    <body>

    <header class="header clearfix">
    <a href="" class="header_logo">logo</a>
    <a href="" class="header_icon-bar">
    <span></span>
    <span></span>
    <span></span>
    </a>
    <ul class="header_menu animate">
    <li class="header_menu_item"><a href="javascript:apri('popup-tes.html');">contattaci</a></li>
    <li class="header_menu_item"><a href="single.html">single</a></li>
    <li class="header_menu_item"><a href="page.html">page</a></li>
    <li class="header_menu_item"><a href="">item</a></li>
    <li class="header_menu_item"><a href="">item</a></li>
    </ul>
    </header>
    <section class="cover">
    <div class="cover_caption_filter"></div>
    <div class="cover_caption">
    <div class="cover_caption_copy">
    <h1>primary message of the home</h1>
    <h2>subtitle of the home page</h2>
    <a href="" class="button">call to action</a>

    </div>
    </div>
    </section>
    <section class="cards clearfix">
    <div class="card">
    <img class="card_image" src="https://source.unsplash.com/collection/190727/400x260"alt="">
    <div class="card_copy">
    <h3>title card</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias sequi tempore dolorem recusandae adipisci est sed eveniet nobis ipsum, quae dicta. Obcaecati unde accusamus ea assumenda nam facilis illum? Ipsam.</p>
    </div>
    </div>
    <div class="card">
    <img class="card_image" src="https://source.unsplash.com/category/nature/400x260"alt="">
    <div class="card_copy">
    <h3>title card</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias sequi tempore dolorem recusandae adipisci est sed eveniet nobis ipsum, quae dicta. Obcaecati unde accusamus ea assumenda nam facilis illum? Ipsam.</p>
    </div>
    </div>
    <div class="card">
    <img class="card_image" src="https://source.unsplash.com/category/people/400x260"alt="">
    <div class="card_copy">
    <h3>title card</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias sequi tempore dolorem recusandae adipisci est sed eveniet nobis ipsum, quae dicta. Obcaecati unde accusamus ea assumenda nam facilis illum? Ipsam.</p>
    </div>
    </div>
    </section>

    <section class="banner clearfix">
    <div class="banner_image"></div>
    <div class="banner_copy">
    <div class="banner_copy_text">
    <h3>banner title</h3>
    <h4>banner subtitle</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quo quibusdam eligendi nobis eveniet amet! Mollitia culpa expedita cupiditate accusantium qui placeat quasi aliquam nostrum. Ex iusto dolore eligendi consequuntur.</p>
    </div>
    </div>
    </section>


  3. #3
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    20
    section class="cards clearfix">
    <div class="card">
    <img class="card_image" src="https://source.unsplash.com/collection/190727/400x260"alt="">
    <div class="card_copy">
    <h3>title card</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias sequi tempore dolorem recusandae adipisci est sed eveniet nobis ipsum, quae dicta. Obcaecati unde accusamus ea assumenda nam facilis illum? Ipsam.</p>
    </div>
    </div>
    <div class="card">
    <img class="card_image" src="https://source.unsplash.com/category/nature/400x260"alt="">
    <div class="card_copy">
    <h3>title card</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias sequi tempore dolorem recusandae adipisci est sed eveniet nobis ipsum, quae dicta. Obcaecati unde accusamus ea assumenda nam facilis illum? Ipsam.</p>
    </div>
    </div>
    <div class="card">
    <img class="card_image" src="https://source.unsplash.com/category/people/400x260"alt="">
    <div class="card_copy">
    <h3>title card</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias sequi tempore dolorem recusandae adipisci est sed eveniet nobis ipsum, quae dicta. Obcaecati unde accusamus ea assumenda nam facilis illum? Ipsam.</p>
    </div>
    </div>
    </section>

    <section class="banner clearfix">

    <div class="banner_copy">
    <div class="banner_copy_text">
    <h3>banner title</h3>
    <h4>banner subtitle</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quo quibusdam eligendi nobis eveniet amet! Mollitia culpa expedita cupiditate accusantium qui placeat quasi aliquam nostrum. Ex iusto dolore eligendi consequuntur.</p>
    </div>
    </div>
    <div class="banner_image"></div>
    </section>

    <div class="overlay" id="pop">
    <div class="popup">
    <h2>Questo è un popup</h2>
    <p>Potete utilizzarmi per inserire pubblicità</p>
    <p>o per fare un annuncio</p>
    <span id="close">X</span>
    </div>
    </div>

    <footer class="footer">
    <p>copiright - 2020 picopallinodesign.net</p>

    </footer>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
    $(".header_icon-bar").click(function(e){
    $(".header_menu").Toggleclass('.is-open');
    e.preventDefault();

    });
    });



    setTimeout(
    function() {
    console.log("run");
    document.getElementById('pop').style.display="block" ;
    }, 2000);


    document.getElementById("close").onclick = function(e){
    document.getElementById('pop').style.display="none";
    }


    document.getElementById("pop").onclick = function(e){
    document.getElementById('pop').style.display="none";
    }

    function apri(url) { newin = window.open(url,'titolo','scrollbars=no,resizable=yes, width=200,height=200,status=no,location=no,toolbar =no'); }


    </script>

    </body>
    </html>

  4. #4
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    20
    css
    html,body{height: 100%;}
    body {background: #eee;}

    /*-------------------
    general
    ---------------------*/



    animate {
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    }
    .button{display: inline-block; background: #fff; color: #000; padding: 15px 30px; border-radius: 3px; text-decoration: none;}
    p{line-height: 22px;}
    a{color: #16dd94;}
    a:hover{color: #16dd}
    /*-------------------
    header
    ---------------------*/

    .header {background:#333;}
    .header_logo {color:#fff; float: left;display: block; padding: 20px;text-decoration: none;}
    .header_menu {float: right; margin: 0; padding: 0;}
    .header_menu_item {display: inline-block;}
    .header_menu_item a{color: #fff; display: block;padding: 20px;text-decoration: none;}
    .header_menu_item a:hover{background: #000;}

    .header_icon-bar{display:block; float: right; padding: 20px; display: none;}
    .header_icon-bar span{display:block; height: 3px; width: 30px; background: #fff; margin-bottom: 5px;}
    /*-------------------
    cover
    ---------------------*/
    .cover{height: 70%;
    background-image: url(https://source.unsplash.com/category/buildings);
    background-size: cover;
    --background-size: cover;
    -moz-background-size: cover;
    background-position: center center;
    position: relative;
    }

    .cover_caption_filter{
    background: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    opacity: 0.5;
    }


    .cover_caption{display: table;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1;
    padding:0 20px;
    }
    .cover_caption_copy{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    }

    .cover--single{height: 50%;}
    .cover--single h1{font-size: 42px;}

    /*-------------------
    cards
    ---------------------*/
    .cards { max-width: 1200px; margin: 40px auto;}
    .card { width: 30%; margin:0 1.5%;background: #fff; float: left;}
    .card_image{width: 100%; height: auto;}
    .card_copy{padding: 5px 20px;}
    .card_copy h3{margin-bottom: 0;}



    /*-------------------
    banner
    ---------------------*/
    .banner{background: #fff; height: 50%;}
    .banner_image{width: 30%; float: left; height: 100%;
    background-image: url("https://source.unsplash.com/category/nature/400x400");
    background-size: cover;
    --background-size: cover;
    -moz-background-size: cover;
    background-position: center center;
    }
    .banner_copy{width: 70%; float: left; height: 100%; display: table;}
    .banner_copy_text{display: table-cell; vertical-align: middle; padding: 30px;}

    .banner_copy_text h3{font-size: 36px; margin-bottom: 0;}
    .banner_copy_text h4{font-size: 28px; margin: 5px 0;}


    /*-------------------
    footer
    ---------------------*/

    .footer{background: #333; padding: 30px; color:#fff; margin-top: 40px;}

    /*-------------------
    single
    ---------------------*/

    .single
    .single_copy{max-width: 800px; margin: 0px auto; margin-top: -40px; background: #fff; padding: 20px 40px;
    position: relative; z-index: 1;}
    .single_copy_meta{font-weight: bold; font-size: 18px; font-style: italic;}
    .single_copy_title{font-size: 32px;}

  5. #5
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    20
    /*-------------------
    popup
    ---------------------*/

    .popup{
    width: 500px;
    height: 400px;
    background: #fefefe;
    margin: 40px auto;
    padding: 10px 20px;
    position: relative;
    color: #333;
    }

    .overlay{
    position: fixed; /* schermo intero*/
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    background: rgba(0,0,0,0.7); /* colore sfondo e opcità */
    text-align: center;
    display: none
    }

    #close{
    position: absolute;
    top: -20px;
    right: -20px;
    color: #fff;
    }

    #close:hover{
    cursor: pointer;
    }


    /*-------------------
    popuph1
    ---------------------*/
    .popuph1{width: 500px;
    height: 400px;
    background: #fefefe;
    margin: 40px auto;
    padding: 10px 20px;
    position: relative;
    color: #333;
    }

    /*-------------------
    tablet
    ---------------------*/
    @media (max-width: 998px){
    /* banner*/
    .banner_image,
    .banner_copy{width: 50%; height: 50%;}
    }
    /*-------------------
    page
    ---------------------*/
    .page
    .page_copy{margin-top: 20px;}

    /*-------------------
    smartphone
    ---------------------*/
    @media (max-width: 767px){
    .header{position: fixed; z-index: 100; width: 100%;}
    .header_icon-bar{display: block;}

    .header_menu{width: 100%; height: 0px; overflow: hidden;}
    .is-open{height: 300px; overflow: auto;}
    /* cover */
    .cover{height: 100%;}

    /* cards */
    .card {width: 90%; margin: 5%;}

    /* banner */
    .banner{height: 100%;}

    .banner_image,
    .banner_copy{width: 100%; height: 50%;}




    }



    .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
    * html .clearfix { zoom: 1; } /* IE6 */
    *:first-child+html .clearfix { zoom: 1; } /* IE7 */

    *,
    *:before,
    *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

  6. #6
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    20
    ho inviato a spezzoni il codice html spero che possiate trovarmi errore sto impazzendo.
    grazie

  7. #7
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,725
    Ciao e benvenuto, quando il codice è eccessivo meglio non postarlo in questo modo - ci vuole più tempo a ricomporlo che a trovare l'errore - se hai la pagina online posta direttamente il link altrimenti prova a riprodurre il problema usando un qualche playground (ad es. SoloLearn o JSFiddle o CodePen).

    Puoi inoltre verificare tu stesso nella console del tuo browser (F12 per aprirla) se ricevi degli errori di script. In tal caso, se non riesci a risolvere autonomamente, posta le indicazioni compresi i messaggi di errore eventualmente riscontrati nella console.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,725
    Ho visto dove sta il problema.

    Questo script a due errori:
    codice:
    $(".header_menu").Toggleclass('.is-open');
    1 - il metodo si chiama toggleClass(), non Toggleclass(). Fai attenzione all'uso delle maiuscole e minuscole. In genere, nel caso di nomi composti, per funzioni e variabili in jQuery si segue quella convenzione che in gergo tecnico viene chiamata "dromedary case" ("notazione a dromedario").

    2 - il valore dell'argomento di tale metodo deve essere il nome della classe (o la serie di nomi separati da spazi), escluso il punto "." (che di fatto non è parte del nome).

    Prova a correggere in questo modo:
    codice:
    $(".header_menu").toggleClass('is-open');
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  9. #9
    Utente di HTML.it
    Registrato dal
    Apr 2020
    Messaggi
    20
    mi spiace ma ho provato ma non funziona ugualmente

  10. #10
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,725
    Bene. Io ho provato ad assemblare quanto hai postato e ciò che ti ho indicato risolve. Provato chiaramente anche sul mio smartphone.

    Tu noti lo stesso identico problema anche con quelle correzioni?
    Hai verificato sulla console web del tuo browser se riscontri errori di script?
    Puoi postare lo script da te corretto (solo lo script senza il resto dell'HTML e del CSS)? Così verifichiamo se hai fatto in modo giusto.

    Fai sapere.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.