tela Raffaello che riempie un contenitore div

Invece di specificare la larghezza e l'altezza di una tela di Raffaello, ho bisogno che sia al 100% delle dimensioni del suo contenitore. Quindi potrei semplicemente fare un Raphael ("container", containerElement.width, containerElement.height) e impostare la funzione onresize per resettare quei valori. Ma poi il contenuto diventa molto nervoso e frenetico mentre ridimensiono la finestra o il contenitore perché le barre di scorrimento (che voglio se diventano troppo piccole) lampeggiano dentro e fuori dall'esistenza.tela Raffaello che riempie un contenitore div

È questo il modo corretto di legare la tela di Raffaello alle dimensioni di un contenitore? Mi piacerebbe anche fornire l'opzione per rendere la tela di Raphael "a schermo intero" occupando l'intera finestra del browser.

fonte

2010-11-15 at.

Se si utilizza un div, è possibile utilizzare CSS per impostarlo al 100% della larghezza e dell'altezza. Quindi si utilizza Raphael("container", "100%", "100%")

Per quanto riguarda la visualizzazione a schermo intero, la maggior parte dei browser ha un comando per farlo. Quindi se stai davvero facendo il 100%, quando premi il pulsante di comando, ad es. (F11 in firefox) diventerà schermo FULL.

fonte

2010-11-15 10:35:31

Ho avuto l'impressione leggendo i documenti e gli altri post nel forum di discussione di Google Gruppi che è stato necessario inserire un numero (per il numero di pixel) nel costruttore Raphael, non una percentuale. Ci proverò, grazie. Per quanto riguarda lo schermo intero, intendevo solo a schermo intero la finestra del browser, quindi 100%, 100% lo consentirà. –

La documentazione di Raphael mostra l'uso di dimensioni specifiche ma l'utilizzo di percentuali funziona, dall'esperienza personale. Presumo che tu sappia della documentazione di Raffaello, ma qui trovi un link se non lo fai: http://raphaeljs.com/reference.html –

Grazie Adam, sembra che questa sia la risposta! Ho letto la documentazione, ma in particolare ha detto che dovevamo mettere un numero di pixel lì. –

Raphael("container", "100%", "100%"); riempirà la tela alla larghezza/altezza del contenitore DIV. Funziona bene in Chrome e Safari. Per ottenere Firefox a bordo dovrai dare corpo e html 100% larghezza/altezza nel css, altrimenti il vettore verrà ritagliato.

fonte

2012-02-14 05:57:17 gnat

Non è la stessa risposta esatta di quella accettata? –

no, la risposta accettata non dice nulla su 100% html e body su firefox – supercrabtree

Un po 'in ritardo su questo, ma posterò qui per cercare altre persone.

var h = $('container').height(); //get the container height into variable h  
    var w = $('container').width(); //get the container width into variable w 
    //set your Raphael canvas to the variables 
    var contpaper = Raphael("container", w, h); 
    var doit; 
    //function to reload the page and/or do other adjustments 
    function resizedw(){ 
     document.location.reload()     
    } 
    //call function 200 ms after resize is complete. 
    $(window).resize(function(){clearTimeout(doit); 
     doit = setTimeout(function() { 
     resizedw(); 
    }, 200)});

Questa soluzione è cross-browser e sicura per dispositivi mobili, quindi è possibile utilizzarla per incorporare il design reattivo. Aggiungendo i caveat per viewport width o height al tuo javascript sotto forma di istruzioni if, puoi definire tutte le tue forme in base alle stesse variabili.

fonte

2013-07-25 02:17:19 Jerimio

tela Raffaello che riempie un contenitore div

risposta

Problemi correlati