Buongiorno a tutti!
Innanzitutto, buon sabato e buon weekend.
Scrivo perchè ho un piccolo problema di visualizzazione di un pulsante per un div con effetto creato in javascript.
Premessa: ho un blog wordpress (aggiornato all'ultima versione) con tema twentyeleven (aggiornato all'ultima versione e con alcune modifiche da me apportate).
L'idea mia: mi interessava creare un box per articoli correlati e ho creato un nuovo foglio .php con un div che all'interno riporta una tabella (ho diviso gli articoli correlati per autore e per categoria). Per rendere il box a scomparsa ho inserito il codice seguente nel file .php creato e ho richiamato quest'ultimo nel file "content-single.php" prima della tag di chiusura </article>:
"
(Il resto del codice che riguarda tutto il div che ho creato non ve lo copio per ragioni di spazio, che già questo è bello lungo. Vi ho inserito anche lo style dei div per completezza)
Il box si apre correttamente all'apertura dell'articolo e scompare quando clicco su "nascondi". Il problema è che, quando si abbassa il box, il pulsante "apri" si alza all'altezza dello spazio dei commenti (sulla destra dello stesso) e non in basso a destra nella pagina esattamente al posto del box che scende (come vorrei!).
Ciò che vorrei, praticamente, è riposizionare questo pulsante "apri" esattamente nell'angolo in basso a destra nella schermata, così che facendo lo scrolling della pagina possa restare sempre visibile (proprio come lo è il box quando appare al momento dell'apertura dell'articolo).
Ho provato a modificare il CSS ma non ci sono riuscito in alcun modo, nemmeno provando a cambiare posizione (sia nel file "content-single.php" sia spostando il richiamo al foglio nel "footer.php").
Ringrazio tutti anticipatamente, anche solo per leggere questo mio post!
Buona giornata
Vincenzo
Innanzitutto, buon sabato e buon weekend.
Scrivo perchè ho un piccolo problema di visualizzazione di un pulsante per un div con effetto creato in javascript.
Premessa: ho un blog wordpress (aggiornato all'ultima versione) con tema twentyeleven (aggiornato all'ultima versione e con alcune modifiche da me apportate).
L'idea mia: mi interessava creare un box per articoli correlati e ho creato un nuovo foglio .php con un div che all'interno riporta una tabella (ho diviso gli articoli correlati per autore e per categoria). Per rendere il box a scomparsa ho inserito il codice seguente nel file .php creato e ho richiamato quest'ultimo nel file "content-single.php" prima della tag di chiusura </article>:
HTML:
"
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js'></script>
<title>Documento senza titolo</title>
<style>
#ArtCorr{-moz-box-shadow: 0 8px 25px black;
-webkit-box-shadow: 0 8px 25px black;
box-shadow: 0 8px 25px black;
background-color: #EDEDED;
border-top: 3px solid #f47a28;
bottom: 0;
height: 59px;
left: 0;
margin: 0;
position: fixed !important;
width: 100%;
z-index: 99999;
display:none;
}
.nascondi{ position:absolute; top:0%; right:5%; cursor:pointer;}
.apri{ position:absolute; bottom:0%; right:5%; cursor:pointer; border-top: 2px solid #F60;border-right: 2px solid #F60; border-left: 2px solid #F60; width:200px; background:#EDEDED;-moz-border-radius: 10px 10px 0 0px;
-webkit-border-radius: 10px 10px 0 0px;
border-radius: 10px 10px 0 0px; height:30px; display:none;
}
.open{ margin: 20px 0px 0px 50px;}
#testo{ margin:0 auto;
padding:0;
}
#PerCategoria {-moz-box-shadow: 0 8px 25px black;
-webkit-box-shadow: 0 8px 25px black;
box-shadow: 0 8px 25px black;
background-color: #EDEDED;
border-top: 3px solid #f47a28;
bottom: 0;
height: 59px;
left: 20%;
margin: 0;
position: fixed !important;
width: 40%;
z-index: 99999;
display:none;
}
#PerAutore {-moz-box-shadow: 0 8px 25px black;
-webkit-box-shadow: 0 8px 25px black;
box-shadow: 0 8px 25px black;
background-color: #EDEDED;
border-top: 3px solid #f47a28;
bottom: 0;
height: 59px;
left: 60%;
margin: 0;
position: fixed !important;
width: 40%;
z-index: 99999;
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#ArtCorr").slideDown("slow");
$(".nascondi").click(
function(){
$("#ArtCorr").slideUp("slow");
$(".apri").slideDown("slow");
});//fine chiudi banner
$(".apri").click(
function(){
$("#ArtCorr").slideDown('slow');
$(".apri").slideUp("slow");
});//fine chiudi banner
});
</script>
</head>(Il resto del codice che riguarda tutto il div che ho creato non ve lo copio per ragioni di spazio, che già questo è bello lungo. Vi ho inserito anche lo style dei div per completezza)
Il box si apre correttamente all'apertura dell'articolo e scompare quando clicco su "nascondi". Il problema è che, quando si abbassa il box, il pulsante "apri" si alza all'altezza dello spazio dei commenti (sulla destra dello stesso) e non in basso a destra nella pagina esattamente al posto del box che scende (come vorrei!).
Ciò che vorrei, praticamente, è riposizionare questo pulsante "apri" esattamente nell'angolo in basso a destra nella schermata, così che facendo lo scrolling della pagina possa restare sempre visibile (proprio come lo è il box quando appare al momento dell'apertura dell'articolo).
Ho provato a modificare il CSS ma non ci sono riuscito in alcun modo, nemmeno provando a cambiare posizione (sia nel file "content-single.php" sia spostando il richiamo al foglio nel "footer.php").
Ringrazio tutti anticipatamente, anche solo per leggere questo mio post!
Buona giornata
Vincenzo
Ultima modifica di un moderatore:
