posizionamento pulsante "apri" per box articoli correlati

andyeddie

Nuovo Utente
6 Nov 2013
4
0
0
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>:

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:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, se vuoi che il pulsante scorra insieme alla pagina dovrai assegnare la position: fixed anche all'elemento "apri"
Ti sposto in HTML perch mi pare che il javascript funzioni correttamente
 

andyeddie

Nuovo Utente
6 Nov 2013
4
0
0
Ciao, se vuoi che il pulsante scorra insieme alla pagina dovrai assegnare la position: fixed anche all'elemento "apri"
Ti sposto in HTML perch mi pare che il javascript funzioni correttamente
Ciao criric!
Grazie mille!
Era una cosa davvero banale, ma finalmente posso implementare questa cosa!
Buona serata! :)