7 Replies - 1571 Views - Last Post: 02 March 2011 - 04:03 AM

#1 The Architect 2.0  Icon User is offline

  • D.I.C Regular

Reputation: 37
  • View blog
  • Posts: 351
  • Joined: 22-May 08

Applying CSS styles to Javascript DOM elements

Posted 21 February 2011 - 06:05 PM

hey guys, i have a little bit of a problem.

whenever i generate html elements with javascript, CSS rules seem to not apply themselves to these elements. is this normal? or am i just doing something wrong?

EDIT: oh heck, meant to post this into javascript forum :(

This post has been edited by The Architect 2.0: 21 February 2011 - 06:06 PM

Is This A Good Question/Topic? 0
  • +

Replies To: Applying CSS styles to Javascript DOM elements

#2 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3530
  • View blog
  • Posts: 10,172
  • Joined: 08-June 10

Re: Applying CSS styles to Javascript DOM elements

Posted 22 February 2011 - 01:42 AM

I suspect you’re doing something wrong. although it is futile to discuss without seeing the matter.
Was This Post Helpful? 0
  • +
  • -

#3 The Architect 2.0  Icon User is offline

  • D.I.C Regular

Reputation: 37
  • View blog
  • Posts: 351
  • Joined: 22-May 08

Re: Applying CSS styles to Javascript DOM elements

Posted 01 March 2011 - 09:45 PM

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>jQuery demo</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.rating.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery.rating.css"/>
 </head>
 <body>
   <script src="jquery.js"></script>
        <script>
            $(document).ready(function(){
                $("body").append($('<input class="star" type="radio" name="aspect1" value="1" title="Worst"/>'));
            });
        </script>
        <input class="star" type="radio" name="aspect1" value="2" title="Bad"/>
        <input class="star" type="radio" name="aspect1" value="3" title="OK" />
        <input class="star" type="radio" name="aspect1" value="4" title="Good"/>
        <input class="star" type="radio" name="aspect1" value="5" title="Best"/>
 </body>
 </html>



basically this is a star-based rating system; i get 4 stars and a single normal radio button.

i don't know what is going on, but it seems like the CSS is being applied 'before' the element is being created.

ps, how do i upload the supporting css/js files? just put them in a code box?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3530
  • View blog
  • Posts: 10,172
  • Joined: 08-June 10

Re: Applying CSS styles to Javascript DOM elements

Posted 01 March 2011 - 09:56 PM

View PostThe Architect 2.0, on 02 March 2011 - 05:45 AM, said:

basically this is a star-based rating system; i get 4 stars and a single normal radio button.

it could be a JS failure as well. anything in the error console?

View PostThe Architect 2.0, on 02 March 2011 - 05:45 AM, said:

ps, how do i upload the supporting css/js files? just put them in a code box?

FTP?
Was This Post Helpful? 0
  • +
  • -

#5 The Architect 2.0  Icon User is offline

  • D.I.C Regular

Reputation: 37
  • View blog
  • Posts: 351
  • Joined: 22-May 08

Re: Applying CSS styles to Javascript DOM elements

Posted 02 March 2011 - 01:02 AM

console:
Uncaught TypeError: Object Cancel Rating has no method 'show'

thats because someone editted out the code for a 'cancel' button




this is the homepage for the plugin:
http://www.fyneworks...ry/star-rating/

This post has been edited by The Architect 2.0: 02 March 2011 - 01:02 AM

Was This Post Helpful? 0
  • +
  • -

#6 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 795
  • View blog
  • Posts: 1,681
  • Joined: 30-January 09

Re: Applying CSS styles to Javascript DOM elements

Posted 02 March 2011 - 01:45 AM

This is your original code:
        <script>
            $(document).ready(function(){
                $("body").append($('<input class="star" type="radio" name="aspect1" value="1" title="Worst"/>'));
            });
        </script>


This tried to insert an element with the name '<input class="star" type="radio" name="aspect1" value="1" title="Worst"/>' into the body element.

Try this instead, it should simply append the text into the body element:
        <script>
            $(document).ready(function(){
                $("body").append('<input class="star" type="radio" name="aspect1" value="1" title="Worst"/>');
            });
        </script>


Was This Post Helpful? 0
  • +
  • -

#7 The Architect 2.0  Icon User is offline

  • D.I.C Regular

Reputation: 37
  • View blog
  • Posts: 351
  • Joined: 22-May 08

Re: Applying CSS styles to Javascript DOM elements

Posted 02 March 2011 - 02:00 AM

ya, thanks. i actually tried that earlier too(and tried it again just now for thoroughness sake), but it doesn't fix the issue :(. the actual radio button gets created both ways.
Was This Post Helpful? 0
  • +
  • -

#8 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 795
  • View blog
  • Posts: 1,681
  • Joined: 30-January 09

Re: Applying CSS styles to Javascript DOM elements

Posted 02 March 2011 - 04:03 AM

Okay, I just spent about 2 hours trying to get it to work with:
$(window).load(...);
$(function(){...});
$("img").load(function(){...});
etc etc etc


It seems that the styling is applied by the browser sometime between when the DOM is ready (ie - the document.ready function) and when the Javascript/jQuery actually fires. Wish I could be of more help, but I've exhausted my avenues, as well as clocked up another 100 or so Google clicks :P
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1