Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Rendere responsive un'immagine selezionata da un JavaScript e un video Youtube entrambi random

    Salve, sto cercando di rendere responsive un mio sito web avente un css per l'home page e un altro per tutte le pagine interne.
    Pian piano ci sto riuscendo, ma sono bloccato su un paio di questioni...
    Nella home page è presente un'immagine di copertina che cambia casualmente secondo un JavaScript di questo tipo:
    codice:
    <script language="JavaScript">            <!--
                img = new Array()
                ran = Math.floor(3 * Math.random());
                img[0] = 'immagine0.jpg';
                img[1] = 'immagine1.jpg';
                img[2] = 'immagine2.jpg';
    
                document.write("<img src=\"gallery"+"/"+img[ran]+"\">");
                // -->
                </script>
    Per il logo me la sono cavata facilmente scrivendo questa istruzione CSS:
    codice:
    #logo IMG            { display: block; margin: 0em auto; width: 100%; max-width: 720px; }
    Ma con l'immagine scelta dal JavaScript non so come muovermi, ammesso che si possa fare: le immagini sono tutte delle stesse dimensioni e c'è un blocco <div></div> dedicato...

    Discorso analogo con una serie di video scelti con un JavaScript simile, dove tuttavia sono indicate le dimensioni del player in pixel e non in em.

    Siccome attualmente l'home page è sviluppata su 4 colonne (due esterne più strette e le due interne con l'immagine e il video più larghe), l'intenzione sarebbe che in caso di visualizzazione da smartphone, le due colonne centrali si disponessero una sotto l'altra adattandosi alla larghezza del display come già succede con il logo.

    Si può fare qualcosa o c'è incompatibilità in tal senso?

  2. #2
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,654
    Ciao, puoi fare la stessa cosa come per il logo. Sapendo che le immagini stanno in un contenitore, che siano queste colonne una di fianco all'altra o incolonnate, basta dare le dimensioni in percentuale e gestire quindi via css il comportamente delle colonne.
    Al tag img che generi con JS aggiungi una classe (che utilizzerai nel caso con media query se dovesse servire una casisitica a seconda del device).
    In sostanza tutto quello che si deve adattare al conenitore deve avere diemsioni in percentuale (quindi fluide), saranno poi i contenitori ad adattarsi alle esigenze.

  3. #3
    Ho ottenuto questo risultato per il momento http://dampyr.altervista.org/index2.html
    L'obiettivo sarebbe quello di fissare una larghezza tale al di sotto della quale le due colonne vadano una sotto l'altra anziché restare affiancate (recuperando quindi ciascuna la maggiore larghezza disponibile), e fissare in alto logo e menù, cosa che mi riesce ostica perché essendo responsive, l'altezza di quel blocco è variabile e non so come passare il parametro ai div sottostanti.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.