Visualizzazione risultati 1 fino 13 di 13
Like Tree1Likes
  • 1 Post By alemoppo

Discussione: Bug: Overlay

  1. #1
    LauraPausiniFan non è connesso Neofita
    Data registrazione
    19-11-2006
    Messaggi
    15

    Question Bug: Overlay

    Salve sono appena riuscito a fare tutto però ha due bug
    il primo sarebbe che si vede non si vede la trasparenza nell'overlay
    il secondo sarebbe che quando clicco nn resta fermo se ne sale sopra dove c'è il logo sia dal telefono che
    dal desktop
    come fare per risolvere queste piccoli bug fastidiosi?
    grazie mille in anticipo a chi risponde....


    www.laurapausinifan.altervista.org/disco.php

    x i codici che ho utilizzato

    Codice:
    /* -------------------------------------------------- 
       Target Overlay Modal Style
    -----------------------------------------------------
    */
    
    .lead{ font-size: 16px; font-weight: bold;}
    .hide{ display: none;}
    .close-overlay{ position: absolute; right: 1%; top: 1%; font-size: 30px; cursor: pointer;}
    .trg-overlay{ background: #fff; position: absolute; z-index: 800; padding: 15px; overflow: hidden; }
    .small{ width: 40%;  }
    .standard{ width: 60%;  }
    .big{ width: 70%;  }
    .overlay{
    display: none;
    background:#000;
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:600;
    cursor:pointer;
    width: 100%; height: 100%;
    }
    .trg-modal-header{ border-bottom: 1px solid #d2d2d2; padding: 0px; margin: 15px 0px;}
    Codice HTML:
    			  <!-- Included JS Files -->
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
     <script src="javascripts/targetweb-modal-overlay.js"></script>
     <script>
     $(document).ready(function() {
    
        TrgModalOverlay();
        
     });
     </script>

  2. #2
    LauraPausiniFan non è connesso Neofita
    Data registrazione
    19-11-2006
    Messaggi
    15

    Predefinito

    mi sa che siamo tutti ignoranti visto che nn ho ricevuto alcuna risposta :'(

  3. #3
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,067

    Predefinito

    Beh, probabilmente perché o nessuno veramente non sa rispondere o perché non ha capito bene cosa richiedi:

    • parli di overlay e c'è una definizione CSS; nel sito vedo:
      Codice HTML:
      <div class="overlay"></div>
      quindi non capisco quale sia la parte che vuoi rendere trasparente
    • quando clicco nn resta fermo se ne sale sopra dove c'è il logo
      chi? dove clicchi? cosa sale? Io cliccando non vedo muoversi nulla.


    Ciao!

  4. #4
    LauraPausiniFan non è connesso Neofita
    Data registrazione
    19-11-2006
    Messaggi
    15

    Predefinito

    mi spiego meglio allora
    quando clicchi sui testi dell'album dovrebbe spuntare il popup con
    la trasparenza intendo dire tutta la schermata che si vede una striscia sotto nera e la pagina tutta trasparente ed è un bug, invece dovrebbe essere tutto lo sfondo nero con un quadrato bianco e ci sono i testi delle canzoni.
    l'altro bug è che cliccando il testi delle canzoni non resta fermo la posizione della pagina se ne sale sopra la pagina guardi meglio www.laurapausinifan.altervista.org/disco.php
    Ultima modifica di LauraPausiniFan : 03-02-2018 alle ore 10.20.14

  5. #5
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,067

    Predefinito

    Per verificare meglio, posso chiederti quale codice hai utilizzato per far apparire l'overlay?

    Comunque nell'html ci sono alcuni errorini: probabilmente non sono quelli che danno problemi però sarebbe meglio sistemarli, ad esempio:
    Codice HTML:
    <ul class="links">
    					<li>...</li>
    				</ul>
    				</ul>
    (hai chiuso due volte il tag)
    Oppure:
    Codice HTML:
    <section id="banner" data-video="images/banner">
    					<div class="inner">
    						
    						<a href="#main" class="button big alt scrolly">DISCOGRAFIA</a>
    					
    
    </section>
    	
    				<div class="wrapper">
    Avresti dovuto chiudere il div interno prima di section

    (non ho guardato più sotto, ricontrolla comunque il codice).

    Ciao!
    LauraPausiniFan likes this.

  6. #6
    LauraPausiniFan non è connesso Neofita
    Data registrazione
    19-11-2006
    Messaggi
    15

    Predefinito

    <div id="modal1" class="trg-overlay hide small">

    <h2>Laura Pausini</h2>
    <p class="lead"> testo brano </p>
    <a class="close-overlay">×</a>
    </div>
    <a href="#" class="apri-trg-overlay" data="modal1">Testi dell'album </a><br>


    overlay:
    div class="overlay" id="overlay" style="display:none;"></div>

  7. #7
    LauraPausiniFan non è connesso Neofita
    Data registrazione
    19-11-2006
    Messaggi
    15

    Predefinito

    Citazione Originalmente inviato da alemoppo Visualizza messaggio
    Per verificare meglio, posso chiederti quale codice hai utilizzato per far apparire l'overlay?

    Comunque nell'html ci sono alcuni errorini: probabilmente non sono quelli che danno problemi però sarebbe meglio sistemarli, ad esempio:
    Codice HTML:
    <ul class="links">
    					<li>...</li>
    				</ul>
    				</ul>
    (hai chiuso due volte il tag)
    Oppure:
    Codice HTML:
    <section id="banner" data-video="http://forum.it.altervista.org/images/banner">
    					<div class="inner">
    						
    						<a href="#main" class="button big alt scrolly">DISCOGRAFIA</a>
    					
    
    </section>
    	
    				<div class="wrapper">
    Avresti dovuto chiudere il div interno prima di section

    (non ho guardato più sotto, ricontrolla comunque il codice).

    Ciao!
    nn ci ho fatto caso ora sistemo tutte le altre pagine grazie

  8. #8
    darbula non è connesso AlterGuru 2500
    Data registrazione
    24-04-2011
    Messaggi
    2,894

    Predefinito

    @alemoppo al click di un testo vorrebbe aprire un popup (quindi da una preview al testo completo) http://forum.it.altervista.org/php-m...ml#post1369709
    Ultima modifica di darbula : 04-02-2018 alle ore 01.44.45

  9. #9
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,067

    Predefinito

    Spulciando un po' nel codice, sono riuscito a ritrovare quale codice hai usato, e l'ho trovato qui (se me l'avessi indicato, avrei risparmiato parecchio tempo!).

    Ho provato, e a me sembra funzionare correttamente.
    A te non so perché non funziona, dovresti controllare tutto il sito (forse c'è qualche incompatibilità con i tag mal formati che ti dicevo, oppure quel codice ha qualche problema nel tuo sito) ma il codice mi sembra che lo hai inserito correttamente.

    In ogni caso, ti consiglio di utilizzare dialog di jqueryUi, è più carino, molto più personalizzabile e dovrebbe essere supportato in modo migliore. Ho provato anche questo e lo puoi vedere qui.

    Ciao!
    Ultima modifica di alemoppo : 04-02-2018 alle ore 03.21.31

  10. #10
    LauraPausiniFan non è connesso Neofita
    Data registrazione
    19-11-2006
    Messaggi
    15

    Predefinito

    se a voi funziona correttamente allora va bene poi codici li ho sistemati tutti
    tranne il menu che siccome prima era a destra l'ho dovuto spostare a sinistra ma fa l'effetto sempre a destra come posso configurare lo script che vada sempre a sinistra?

    http://laurapausinifan.altervista.org/homepage.php

    poi vorrei aggiungere un loading con la percentuale per ogni caricamento di pagina che mi consiglia?
    grazie in anticipo

  11. #11
    LauraPausiniFan non è connesso Neofita
    Data registrazione
    19-11-2006
    Messaggi
    15

    Predefinito

    /* Header */

    body.subpage {
    padding-top: 3.125em;
    }

    #header {
    background: #DACCC9;
    color: #000;
    cursor: default;
    height: 3.25em;
    left: 0;
    line-height: 3.25em;
    position: fixed;
    text-align: left;
    top: 0;
    width: 100%;
    z-index: 10;
    }

    #header > h1 {
    color: #000;
    display: inline-block;
    height: inherit;
    right: 1.25em;
    line-height: inherit;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    }

    #header > h1 a {
    font-size: 1.25em;
    }

    #header > h1 a:hover {
    color: #ffffff;
    }

    #header > h1 span {
    font-weight: 300;
    font-size: .8em;
    }

    #header > a {
    -moz-transition: color 0.2s ease-in-out;
    -webkit-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
    display: inline-block;
    padding: 0 0.75em;
    color: inherit;
    text-decoration: none;
    }

    #header > a:hover {
    color: #0C0C0C;
    }

    #header > a[href="#menu"] {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    }

    #header > a[href="#menu"]:before {
    content: "";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-transform: none !important;
    }

    #header > a[href="#menu"]:before {
    margin: 0 0.5em 0 0;
    }

    #header > a + a[href="#menu"]:last-child {
    border-left: solid 1px rgba(255, 255, 255, 0.15);
    padding-left: 1.25em;
    margin-left: 0.5em;
    }

    #header > a:last-child {
    padding-right: 1.25em;
    }

    @media screen and (max-width: 736px) {

    #header > a {
    padding: 0 0.5em;
    }

    #header > a + a[href="#menu"]:last-child {
    padding-left: 1em;
    margin-left: 0.25em;

    }

    #header > a:last-child {
    padding-right: 1em;
    }

    }

    @media screen and (max-width: 980px) {

    body {
    padding-top: 44px;
    }

    #header {
    height: 44px;
    line-height: 44px;
    }

    #header > h1 {
    right: 1em;
    }

    #header > h1 a {
    font-size: 1em;
    }

    }

    @media screen and (max-width: 480px) {

    #header {
    min-width: 320px;
    }

    }

    /* Menu */

    #menu {
    -moz-transform: translateX(20em);
    -webkit-transform: translateX(20em);
    -ms-transform: translateX(20em);
    transform: translateX(20em);
    -moz-transition: -moz-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
    -webkit-transition: -webkit-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
    -ms-transition: -ms-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
    transition: transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
    -webkit-overflow-scrolling: touch;
    background: #DACCC9;
    box-shadow: none;
    color: #000;
    height: 100%;
    max-width: 80%;
    overflow-y: auto;
    padding: 3em 2em;
    position: fixed;
    left: 0;
    top: 0;
    visibility: hidden;
    width: 20em;
    z-index: 10002;
    border: #fff 1 solid;

    }

    #menu > ul {
    margin: 0 0 1em 0;
    }

    #menu > ul.links {
    list-style: none;
    padding: 0;

    }

    #menu > ul.links > li {
    padding: 0;
    }

    #menu > ul.links > li > a:not(.button) {
    border: 0;
    border-top: solid 1px rgba(255, 255, 255, 0.15);
    color: inherit;
    display: block;
    line-height: 3.5em;
    text-decoration: none;

    }

    #menu > ul.links > li > .button {
    display: block;
    margin: 0.5em 0 0 0;
    }

    #menu > ul.links > li:first-child > a:not(.button) {
    border-top: 0 !important;
    }

    #menu .close {
    text-decoration: none;
    -moz-transition: color 0.2s ease-in-out;
    -webkit-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
    -webkit-tap-highlight-color: transparent;
    border: 0;
    color: #000;
    cursor: pointer;
    display: block;
    height: 3.25em;
    line-height: 3.25em;
    padding-right: 1.25em;
    position: absolute;
    left:0;
    left: 0;

    top: 0;
    vertical-align: middle;
    width: 7em;
    }

    #menu .close:before {
    content: "";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-transform: none !important;
    }

    #menu .close:before {
    font-size: 1.25em;
    }

    #menu .close:hover {
    color: #000;
    }

    @media screen and (max-width: 736px) {

    #menu .close {
    height: 4em;
    line-height: 4em;
    }

    }

    #menu.visible {
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    box-shadow: 0 0 1.5em 0 rgba(0, 0, 0, 0.2);
    visibility: visible;
    }

    @media screen and (max-width: 736px) {

    #menu {
    padding: 2.5em 1.75em;
    }

    }
    la templated lo preso qui...

    https://templated.co/broadcast

  12. #12
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    22,067

    Predefinito

    Scusami la domanda, ma se non sei molto pratico ed hai problemi in CSS e HTML, come mai non realizzi un sito tramite wordpress? (quest'ultimo viene usato anche per siti professionali).

    Ciao!

  13. #13
    LauraPausiniFan non è connesso Neofita
    Data registrazione
    19-11-2006
    Messaggi
    15

    Predefinito

    io ho fatto web designer solo che prima facevo siti troppo semplici ora vorrei modernizzare ma sto riscontrando troppi problemi.... :( se mi può aiutare col menu e poi nn chiedo nulla...

Tags for this Thread

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •