Graphics Not Displayed

Question

I am simply trying to create some simple vector graphics using the Javascript Library Raphael. There should be a square object and a curved object, but nothing is being displayed. Can anyone help me. Thank you.

<html>

<head>
<script src="raphael.js"></script>
<script src="jquery-1.7.2.js"></script>

<script type="text/javascript"> //all your javascript goes here  
var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");

rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});
</script>

</head>

<body>

<div id="sample-2" style="width:500px; height:500px;">

</div>

</body>

</html>

Problem solved! Thanks to all those who helped. – John Doe Jul 17 '12 at 19:49 — John Doe, Jul 17 '12 at 19:49

score 3 · Answer 1 · answered Jul 17 '12 at 19:44

3

Move your script to after the <div id="sample-2" style="width:500px; height:500px;"> tag

Or some people prefer to use the onload handler, using jQuery for simplicity

$(function(){
    // Your code that runs after the DOM is loaded
});

The key is that your code is accessing the DOM and it needs to run after the DOM has been built. Calling it from the onload handler or after the DIV you're using makes sure the element is ready to be interacted with.

answered Jul 17 '12 at 19:44

Ruan Mendes

90,375
31
153
217

He means that the div where you are putting your images must be drawn and inserted at the DOM before you interact with it, when you put the onload handler you are waiting for the page to load before applying new instructions to the DOM, if you put it after the DIV you are making sure your code is executed after the DIV is created, I would recomend to use onload. and Obviously all of this should be enclosed inside a `$(document).ready(function(){ // code})` – Samuel Lopez Jul 17 '12 at 19:59
@SamuelLopez Your explanation is slightly confusing. `Obviously all of this should be enclosed inside a $(document).ready(function(){ // code})` is not accurate, I already added an explanation to the answer itself – Ruan Mendes Jul 17 '12 at 20:11

score 2 · Accepted Answer · answered Jul 17 '12 at 19:46

You are running your Javascript far too early. Your browser will run Javascript as it reads it and if the DOM elements have not been loaded, it will not do anything.

Try this:

<html>
    <head>
        <script src="raphael.js"></script>
        <script src="jquery-1.7.2.js"></script>
    </head>

    <body>
        <div id="sample-2" style="width:500px; height:500px;"></div>
        <script type="text/javascript">
            //all your javascript goes here  
            var paper = Raphael("sample-2", 200, 100);
            var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
            var curvePath = paper.path("M110,10s55,25 40,80Z");

            rectPath.attr({
                fill: "green"
            });
            curvePath.attr({
                fill: "blue"
            });
        </script>
    </body>
</html>

Enjoy and good luck!

score 1 · Answer 3 · answered Jul 17 '12 at 21:38

@JuanMendes it is slightly confusing, in the end the problem is that the js functions are called before the DOM is ready, elemets are still being created. I recommend using $(document).ready(function(){}) so that the scripts are executed only after the DOM has been created. I'm just explaining again because he is asking why he has to do that. For example if he did:

<html>

<head>
<script src="raphael.js"></script>
<script src="jquery-1.7.2.js"></script>

<script type="text/javascript">
$(document).ready(function(){ //all your javascript goes here  
var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");

rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});
}
)
</script>

</head>

<body>

<div id="sample-2" style="width:500px; height:500px;">

</div>

</body>

</html>

That script should work because the script is executed after the DOM is ready.

P.S. On a side note if you want to manipulate content that is dynamically created on the fly, you need to attach the event handlers as click, blur, hover, etc... with a binding operation so the event is registered. Example:

$('#form').on('blur', '#input', function(){
 // code

})

you can check out the Docs for binding at: http://api.jquery.com/on/ and of .ready() at: http://api.jquery.com/ready/

I don't need an explanation, no need to tag me. I was just saying your explanation wasn't clear. — Ruan Mendes, Jul 17 '12 at 22:05

Graphics Not Displayed

3 Answers3