WebSite X5Help Center

 
Agatino Caruso
Agatino Caruso
User

Torna su con jQuery ed altro ancora tutto responsive...  it

Автор: Agatino Caruso
Просмотрено 1449, Подписчики 2, Размещенный 0  

Date una occhiata a questo form realizzato con jQuery, ditemi che ne pensate. Il top button e responsive e visualizzabile solo per tablet e smartphone, non su desk.

Screen adattabile su tutti i dispositivi con ausilio di WSx5 e code al 50%

http://www.nursinginformatico.it/scala-di-braden-infermiere-infermieristica-nursing-informatica-online-informatico.html

Gradite osservazioni e critiche...

Grazie

Размещено
7 Ответы
Vittorio N.
Vittorio N.
User

ciao potresti svelarmi il "segreto" del top button visualizzabile solo per tablet e smartphone, non su desk? non sono esperto in Jquery e quindi mi servirebbe il codice per il top button e per farlo "sparire" con il desk.

grazie e tanti auguri di un felice 2016

Читать больше
Размещено От Vittorio N.
Mirko Boschetti
Mirko Boschetti
Moderator

potresti provare con questo, nel tag head in impostazioni generali:

<style>
    @media only screen and (min-width: 600px) and (max-width: 5000px){
        #toTop {
 display: none !important;
        }
    }
</style>


Читать больше
Размещено От Mirko Boschetti
Vittorio N.
Vittorio N.
User

Grazie Mirko

funziona perfettamente Felice 2016!!

Читать больше
Размещено От Vittorio N.
Mirko Boschetti
Mirko Boschetti
Moderator

Non è farina del mio sacco, ma di Lemonsong...

Читать больше
Размещено От Mirko Boschetti
 lemonsong  
 lemonsong  
User

See, altro che farina, quella è una semplice media query.

Qui si scambia spessissimo del banale codice con invenzioni mai viste in tutto il web. Comunque sì... le media query le ho inventate io agli inizi del '900

Читать больше
Размещено От  lemonsong  
Mirko Boschetti
Mirko Boschetti
Moderator

io non le conoscevo, prima che le scrivessi tu qui....

Читать больше
Размещено От Mirko Boschetti
Agatino Caruso
Agatino Caruso
User
Автор

Copia e incolla su un oggetto HTML lo script sottostante.

Poi carica l'immagine in allegato "up-arrow.png" da inserire nella cartella images del progetto.

#C86666 e #D49A9B sono i due colori da modificare per personalizzare il button.

Il segreto come anticipato da Mirko è la Media Query "@media only screen and (min-width: 160px) and (max-width: 719px){" dove stabilisci il range nella quale vedere visibile il tuo button, in questo caso tra 160 e 719 pixel dello schermo.

<script>

$('body').prepend('<a class="back-to-top"></a>'); /*Crea una classe*/
/*TopButton*/
var amountScrolled = 300;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
});
$('a.back-to-top, a.simple-back-to-top, input#reset').click(function() {
$('html, body').animate({
scrollTop: 0
}, 700);
return false;
});
</script>
<style>

@media only screen and (min-width: 160px) and (max-width: 719px){
body{
font-size: 18px;
font-family: times;
text-align: left;
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
}
input[type='radio']{
cursor: pointer;
}
a.back-to-top {
display: none;
width: 50px;
height: 50px;
text-indent: -9999px;
position: fixed;
z-index: 999;
right: 20px;
bottom: 20px;
background: #C86666 url("images/up-arrow.png") no-repeat center 43%;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}

a:hover.back-to-top {
background-color: #D49A9B;
}

</style>

Читать больше
Размещено От Agatino Caruso