Bug: Overlay

[LauraPausiniFan]

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

/* -------------------------------------------------- 
   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;}

			  <!-- 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>

[LauraPausiniFan]

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

[alemoppo]

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:

  <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!

[LauraPausiniFan]

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

[alemoppo]

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:

<ul class="links">
					<li>...</li>
				</ul>
				</ul>

(hai chiuso due volte il tag)
Oppure:

<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]

<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>

[LauraPausiniFan]

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:

<ul class="links">
					<li>...</li>
				</ul>
				</ul>

(hai chiuso due volte il tag)
Oppure:

<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

[darbula]

@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

[alemoppo]

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!

[LauraPausiniFan]

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

[LauraPausiniFan]

/* 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

[alemoppo]

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!

[LauraPausiniFan]

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...