Creating element using JQuery that takes CSS property in .css file

Question

I have code that looks like this :

style.css

#div1{
 height: 1280;
 width: 800;
 top: -5000px;
 position: absolute;

}
#div2{
    height: 50%;
    width: 50%;
    top: 25%;
    left: 25%;
    position: absolute;
    display: none;

}
#div3{
    height: 100%;
    width: 100%;
    background: white;
    position: absolute;
    display: none;
}
#ball,
#ball1,
#ball2,
#ball3,
#ball4,
#ball5,
#ball6,
#ball7,
#ball8
{
    height: 100px;
    width: 100px;
    position: absolute;
    display: none;
}

game.js

document.addEventListener("deviceready", onDeviceReady, true); 
function onDeviceReady(){
    //jQuery.fx.interval = 120;
    $("#div1").animate({top:'0px'});
    $("#div2").delay(1000).fadeIn(500);
    $("#div2").animate({height:'75%',width:'75%',top:'12.5%',left:'12.5%'});
    $("#div2").delay(1000).animate({left:'20%'},50).animate({left:'2.5%'},50).animate({left:'12.5%'},50);
    $("#div3").delay(2000).fadeIn(500).fadeOut(500);


//#ball turn orbit around the fixed pixel
var angle = 0;     // starting position (degrees)
var angle1 = 45;
var angle2 = 90;
var angle3 = 135;
var angle4 = 180;
var angle5 = 225;
var angle6 = 270;
var angle7 = 315;
var angle8 = 0;

var distance = 250; // distance of b from a
var speed = 300;    // revolution speed in degrees per second
var rate  = 10;    // refresh rate in ms

function f() {

    var t = 450 + (distance * Math.sin(angle * Math.PI/180.0));
    var l = 350 + (distance * Math.cos(angle * Math.PI/180.0));

    var t1 = 450 + (distance * Math.sin(angle1 * Math.PI/180.0));
    var l1 = 350 + (distance * Math.cos(angle1 * Math.PI/180.0));

    var t2 = 450 + (distance * Math.sin(angle2 * Math.PI/180.0));
    var l2 = 350 + (distance * Math.cos(angle2 * Math.PI/180.0));

    var t3 = 450 + (distance * Math.sin(angle3 * Math.PI/180.0));
    var l3 = 350 + (distance * Math.cos(angle3 * Math.PI/180.0));

    var t4 = 450 + (distance * Math.sin(angle4 * Math.PI/180.0));
    var l4 = 350 + (distance * Math.cos(angle4 * Math.PI/180.0));

    var t5 = 450 + (distance * Math.sin(angle5 * Math.PI/180.0));
    var l5 = 350 + (distance * Math.cos(angle5 * Math.PI/180.0));

    var t6 = 450 + (distance * Math.sin(angle6 * Math.PI/180.0));
    var l6 = 350 + (distance * Math.cos(angle6 * Math.PI/180.0));

    var t7 = 450 + (distance * Math.sin(angle7 * Math.PI/180.0));
    var l7 = 350 + (distance * Math.cos(angle7 * Math.PI/180.0));

    var t8 = 450 + (50 * Math.sin(angle8 * Math.PI/180.0));
    var l8 = 350 + (50 * Math.cos(angle8 * Math.PI/180.0));

    $("#ball").css({
        top: t,        
        left: l
    });

    angle += (speed * (rate/1000)) % 360;

    $("#ball1").css({
        top: t1,        
        left: l1
    });

    angle1 += (speed * (rate/1000)) % 360;

    $("#ball2").css({
        top: t2,        
        left: l2
    });

    angle2 += (speed * (rate/1000)) % 360;

    $("#ball3").css({
        top: t3,        
        left: l3
    });

    angle3 += (speed * (rate/1000)) % 360;

    $("#ball4").css({
        top: t4,        
        left: l4
    });

    angle4 += (speed * (rate/1000)) % 360;

    $("#ball5").css({
        top: t5,        
        left: l5
    });

    angle5 += (speed * (rate/1000)) % 360;

    $("#ball6").css({
        top: t6,        
        left: l6
    });

    angle6 += (speed * (rate/1000)) % 360;

    $("#ball7").css({
        top: t7,        
        left: l7
    });

    angle7 += (speed * (rate/1000)) % 360;

    $("#ball8").css({
        top: t8,        
        left: l8
    });

    angle8 += (speed * (rate/1000)) % 360;

}

setInterval(f, rate);

$("#ball").delay(4000).show(100);
$("#ball1").delay(4000).show(100);
$("#ball2").delay(4000).show(100);
$("#ball3").delay(4000).show(100);
$("#ball4").delay(4000).show(100);
$("#ball5").delay(4000).show(100);
$("#ball6").delay(4000).show(100);
$("#ball7").delay(4000).show(100);
$("#ball7").delay(6000).remove();
$("#ball6").delay(6000).remove();
$("#div1").append("<img src='pix/s1.png' id='ball8' />").show(100);

};

abc.html

<html>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/android2_1.js" type = "text/javascript"></script>
<script src="js/jquery.gamequery-0.7.0.js" type="text/javascript"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<head>
</head>
<body onload="onDeviceReady()">
<div id="div1">
<img src="pix/bg1.jpg" id="bgpic" style="height: 100%; width: 100%;" />
<img src="pix/item1.png" id="div2" />
<img src="pix/s1.png" id="ball" />
<img src="pix/s1.png" id="ball1" />
<img src="pix/s1.png" id="ball2" />
<img src="pix/s1.png" id="ball3" />
<img src="pix/s1.png" id="ball4" />
<img src="pix/s1.png" id="ball5" />
<img src="pix/s1.png" id="ball6" />
<img src="pix/s1.png" id="ball7" />
</div>
<div id="div3"></div>
</body>
</html>

but the code doens't seems to work. I did try to google it. And what i get is .addClass() which is not work too.

Hope you guys can help me on this. Thanks in advance.

Guys, my bad.

i found my problem.

instead of this,

$("#div1").append("<img src='pix/s1.png' id='ball8' />").show(100);

I should write this

$("#div1").append("<img src='pix/s1.png' id='ball8' />");
$("#ball8").show(100);

yup, i did that. it work when i put my code like this $("#div1").append("<img src='pix/s1.png' id='ball8' style='height: 100px; width: 100px;' />"); — Eds Tan
– Eds Tan, Commented Feb 22, 2013 at 4:11
what do you mean it's not working, any error message? BTW your image is display:none; — Jonathan de M.
– Jonathan de M., Commented Feb 22, 2013 at 4:12
Jonathan: just ignore that display: none;, and there is no error message. Dipesh: DOM id ? how to check that? (Sorry I'm newbie) — Eds Tan
– Eds Tan, Commented Feb 22, 2013 at 4:15

Mr_Green · Accepted Answer · 2013-02-22 06:53:55Z

1

You were including the links in html instead of head tag.

change your html file as shown below:

<html>

<head>
   <!-- All plugin references should be inside head tag -->
   <!-- Added -->
   <link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
   <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
   <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 

   <!-- Your plugins here -->
   <script src="js/jquery.min.js"></script>
   <script src="js/jquery-ui.min.js" type="text/javascript"></script>
   <script src="js/android2_1.js" type = "text/javascript"></script>
   <script src="js/jquery.gamequery-0.7.0.js" type="text/javascript"></script>
   <link href="css/style.css" rel="stylesheet" type="text/css" />

</head>
<body onload="onDeviceReady()">
   <div id="div1">
     <img src="pix/bg1.jpg" id="bgpic" style="height: 100%; width: 100%;" />
     <img src="pix/item1.png" id="div2" />
     <img src="pix/s1.png" id="ball" />
     <img src="pix/s1.png" id="ball1" />
     <img src="pix/s1.png" id="ball2" />
     <img src="pix/s1.png" id="ball3" />
     <img src="pix/s1.png" id="ball4" />
     <img src="pix/s1.png" id="ball5" />
     <img src="pix/s1.png" id="ball6" />
     <img src="pix/s1.png" id="ball7" />
  </div>
  <div id="div3"></div>
</body>
</html>

UPDATE

setInterval(f, rate);
$("#div1").append("<img src='pix/s1.png' id='ball8' />");
$("#ball").delay(4000).show(100);
$("#ball1").delay(4000).show(100);
$("#ball2").delay(4000).show(100);
$("#ball3").delay(4000).show(100);
$("#ball4").delay(4000).show(100);
$("#ball5").delay(4000).show(100);
$("#ball6").delay(4000).show(100);
$("#ball7").delay(4000).show(100);
$("#ball8").delay(4000).show(100);
$("#ball7").delay(6000).remove();
$("#ball6").delay(6000).remove();

edited Feb 22, 2013 at 6:53

answered Feb 22, 2013 at 4:11

Mr_Green

42k48 gold badges171 silver badges277 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

Eds Tan Over a year ago

There is no error show, just that the element i created does not receive the css property.

Mr_Green Over a year ago

@EdsTan Seems to work for me jsbin.com/epejil/1/edit ? If I remove display:none

Eds Tan Over a year ago

I found some different. what is the different between $(function(){}); and document.addEventListener("deviceready", onDeviceReady, true); function onDeviceReady(){};

Eds Tan Over a year ago

my html body does this, <body onload='onDeviceReady()'>

Mr_Green Over a year ago

@EdsTan on which device you working on? Is it related to desktop?

|

MEP · Accepted Answer · 2013-02-22 04:22:55Z

0

Is the error just that the new element doesn't have the styles applied to it? The element is being created, it's just not styled properly?

If so, it's probably because you're using an ID rather than a class to assign the styles. The stylesheet is interpreted before the script. The styles which apply to the id are ignored because the element you're targeting doesn't exist at the time the CSS is interpreted. If you changed your CSS selector from #ball8 to .ball8 and then changed the image's id to a class, it would probably work. If you really need that image to have the "ball8" id, then just use a different class for the styles.

answered Feb 22, 2013 at 4:22

MEP

2712 silver badges3 bronze badges

Comments

Jamir Khan · Accepted Answer · 2013-02-22 05:11:16Z

0

You used display none for image. you have to show image in jquery. Try this code:

game.js

$('<img />', {
   id:'ball8'
}).appendTo('#div1').attr('src', 'pix/s1.png').show();

edited Feb 22, 2013 at 5:11

answered Feb 22, 2013 at 5:02

Jamir Khan

3971 silver badge13 bronze badges

Comments

xhallix · Accepted Answer · 2013-02-22 05:23:58Z

0

you can do this easily with addClass, but it does not work because you got an Id instead of class.

try this

.ball8 { height: 100px;width: 100px; position: absolute; display: none; }

game.js

$("#div1").addClass('ball8');

And don't forget to make it visible with something like this:

$('.ball8').show()

answered Feb 22, 2013 at 5:23

xhallix

3,0115 gold badges40 silver badges57 bronze badges

Collectives™ on Stack Overflow

Creating element using JQuery that takes CSS property in .css file

4 Answers 4

17 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

17 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related