Div non sono a conoscenza del ridimensionamento dello schermo

Il primo div è una categoria e il secondo div contiene alcune foto.Div non sono a conoscenza del ridimensionamento dello schermo

volevo fare qualcosa che, quando l'utente fa clic su un'immagine la prima mossa div 0.7 della larghezza dello schermo a destra e tutte le immagini in secondo div scompaiono, così mi ha scritto:

$(document).ready(function() { 
 
    $("img").click(function() { 
 
    var my_width = screen.width * 0.7; 
 
    $(".second_div").find("img").hide(); 
 
    $(".first_div").css({ 
 
     "transform": "translate(" + my_width + "px,0px)", 
 
     "-webkit-transform": "translate(" + my_width + "px,0px)", 
 
     "-ms-transform": "translate(" + my_width + ",0px)" 
 
    }); 
 
    }); 
 
});

.first_div { 
 
    transition-duration: 2s; 
 
}

<div class="first_div col-md-1"> 
 
    //some code 
 
</div> 
 
<div class="second_div col-md-11> 
 
      //some codes 
 
</div>

quando il suo schermo intero funziona bene, ma quando ho ridimensionare la finestra e provare di nuovo la prima div non sarà situato dove si suppone (0,7 larghezza dello schermo) Qual' s sbagliato?

fonte

2015-12-15 Ali Seyfi

e anche cosa succede alle colonne di bootstrap? –

Intendo dire che quando avviene la transizione, la prima div si sposta nella seconda e tutte le foto si nascondono. ora la divisione è cambiata? –

Cosa devo fare per mettere un div sul lato sinistro del primo div dopo la transizione? –

per la larghezza della finestra Vorrei utilizzare il seguente:

var my_width = document.documentElement.clientWidth * 0.7;

questa è la stessa soluzione (cross-browser compatibile) utilizzato dal jQuery $.width()

Per maggiori informazioni sui diversi metodi di ottenere la larghezza, vedere questo link.

fonte

2015-12-15 01:39:57 thedarklord47

Grazie, ma non ha funzionato in questo [link] (http://qeshmbook.com/test.html) clicca sull'immagine qui sotto e prova a ridimensionare la finestra –

nel link, stai ancora usando 'var my_width = screen.width * 0,7; '. La modifica di ciò che è mostrato nella mia risposta lo corregge a qualsiasi dimensione. Se stai dicendo che il ridimensionamento dopo il completamento dell'animazione non sembra come lo vuoi, questo è un altro problema. Usare solo l'animazione che hai finora non fornirà un'esperienza reattiva. – thedarklord47

Oh scusa è stato un errore! grazie mille per l'aiuto –

Provare a utilizzare la larghezza interna della finestra anziché la larghezza dello schermo, in modo che sia relativa alla dimensione della finestra. sostituire

var my_width = screen.width * 0.7 ;

con:

var my_width = window.innerWidth * 0.7 ;

vedere un esempio qui:

http://codepen.io/anon/pen/jWWEKO

fonte

2015-12-15 01:37:57 Pabs123

Grazie! Va bene. –

Ma quando ridimensiono la finestra non cambierà la sua posizione! forse dovrei scrivere $ (window) .resize (function() {}); pure. grazie lo stesso! –

Div non sono a conoscenza del ridimensionamento dello schermo

risposta

Problemi correlati