Raphaël toile de remplissage d'un conteneur div

Au lieu de spécifier la largeur et la hauteur d'un Raphaël toile, j'en ai besoin pour être à 100% de la taille de son conteneur. Si je pouvais juste faire un Raphaël("container", containerElement.largeur, containerElement.la hauteur) et de définir la onresize fonction pour réinitialiser ces valeurs. Mais ensuite, le contenu est très nerveux et fébrile que j'ai redimensionner la fenêtre ou le conteneur parce que les barres de défilement (qui je veux si elle devient trop petite) flash dans et hors de l'existence.

Est-ce la bonne façon de lier Raphaël toile à la taille maximum d'un conteneur? Je tiens également à fournir l'option de faire le Raphaël toile "plein écran" en prenant de l'ensemble de la fenêtre du navigateur.

InformationsquelleAutor at. | 2010-11-15
  1. 27

    Si vous utilisez un div ensuite, vous pouvez utiliser les CSS pour le mettre à 100% de la largeur et de la hauteur. Ensuite, vous utilisez la Raphael("container", "100%", "100%")

    Que pour mettre en plein écran, la plupart des navigateurs disposent d'une commande pour le faire. Donc, si vous êtes vraiment faire à 100%, puis lorsque vous appuyez sur le bouton de commande par exemple (F11 dans firefox), il deviendra PLEIN écran.

    • J'ai eu l'impression de lire les docs et autres postes dans leurs groupes de google forum de discussion que vous deviez entrer un nombre (le nombre de pixels) dans le Raphaël constructeur, et non un pourcentage. Je vais essayer ça, merci. Concernant la totalité de l'écran, je voulais simplement dire qu'en plein écran de la fenêtre du navigateur, de manière 100%, 100%, va permettre cela.
    • Le Raphaël de la documentation montre à l'aide de tailles spécifiques, mais à l'aide de pourcentages n'travail, de l'autonomie de l'expérience. Je suis en supposant que vous connaissez sur le Raphaël de la documentation, mais voici un lien si vous n'avez pas: raphaeljs.com/reference.html
    • Merci Adam, il semble que ce soit la réponse! J'ai lu la documentation, mais il dit expressément, nous avons dû mettre un certain nombre de pixels.
    • Merci pour cette réponse. J'ai aussi vérifié la référence en ligne et il a dit que nous devions entrer un nombre.
    • "100%" fonctionne très bien dans Safari et Chrome mais pas avec Firefox, il me semble.
    • Important de noter que vous devez utiliser ("container") – pas besoin d'utiliser ("#container"), $("#container"), ou (document.getElementById("container")) (j'ai eu du mal avec les dernières options).

    InformationsquelleAutor Adam Holmes
  2. 2

    Raphael("container", "100%", "100%"); va remplir le canevas de la largeur ou de la hauteur de la DIV conteneur. Cela fonctionne très bien sur Chrome et Safari. Pour obtenir Firefox à bord, vous aurez besoin de donner du corps et du html à 100% de la largeur/hauteur de la css, sinon le vecteur sera découpé.

    • N'est-ce pas exactement la même réponse que l'on a accepté un?
    • non, l'on a accepté la réponse ne dit rien sur le 100% html et le corps sur firefox
    InformationsquelleAutor gnat
  3. 0

    Un peu en retard sur ce un seul mais je vais poster ici pour d'autres personnes à la recherche.

        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)});

    Cette solution est multi-navigateur et mobile de sécurité de sorte que vous pouvez l'utiliser pour intégrer responsive design. Par l'ajout de mises en garde pour la fenêtre d'affichage de la largeur ou de la hauteur à votre javascript dans le formulaire d'instructions if, vous pouvez définir tous vos formes basées sur les mêmes variables.

    InformationsquelleAutor Jerimio