Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jan 2007
    Posts
    217
    Thanks
    9
    Thanked 0 Times in 0 Posts

    jquery adding CSS to newly added div via append()

    Hey guys,

    I have a situation where I append a div to my page via an ajax call. I then want to update the CSS for it and access the property. For example
    Code:
    $('#container').append(\"<div id='char_'+d[0]><img src=\" + st + \"></div>\");
    $('#char_'+d[0]).css({'position' :  'absolute', 'left' : '425', 'top' : '860'});
    The problem is, no css is applied to my newly added div. The d[0] is an unique id and is used to give the div a unique name.

    Any help from the gurus?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    First I don’t see where you have an AJAX call here. Can we see more than those two lines of code? Secondly you should avoid mixing JS and CSS (just as you should avoid mixing HTML and CSS or JS and HTML). Rather, you could assign a class to that appended element and style it in the stylesheet using that class then.

  • #3
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Quote Originally Posted by ole90 View Post
    Code:
    $('#char_'+d[0]).css({'position' :  'absolute', 'left' : '425', 'top' : '860'});
    This is bogus. The values for the 'left' and 'top' properties have to be either numbers or strings containing real CSS syntax. So, that's either 425 or '425px'.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,294
    Thanks
    10
    Thanked 583 Times in 564 Posts
    might be too soon, or there's an ID conflict.

    fix your quotes below, but splitting it up into creation/appending phases gives you the extra handle you need to call .css() on an object.

    Code:
    var temp=$("<div id='char_'+d[0]><img src=\" + st + \"></div>");
    $('#container').append(temp);
    temp.css({'position' :  'absolute', 'left' : '425', 'top' : '860'});

    PS: numerical <WIDTH> attribs without specified units default to pixels coords.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #5
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Quote Originally Posted by rnd me View Post
    fix your quotes below, but splitting it up into creation/appending phases gives you the extra handle you need to call .css() on an object.

    Code:
    var temp=$("<div id='char_'+d[0]><img src=\" + st + \"></div>");
    $('#container').append(temp);
    temp.css({'position' :  'absolute', 'left' : '425', 'top' : '860'});
    Apart from the fact that this saves a DOM query, this is not really an issue, and the other approach should work just fine.

    There are a bunch of other issues, though:
    Code:
    $('#container').append(\"<div id='char_'+d[0]><img src=\" + st + \"></div>\");
    rnd me already addressed that in his snippet, but it's worth pointing out: You can't escape your quotes like that. Why would you even do that?

    Code:
    $('#container').append(\"<div id='char_'+d[0]><img src=\" + st + \"></div>\");
    There is no variable substitution in Javascript, so those are the literal strings "+d[0]" and " + st + ", which is not what you want.

    A working version of the code could look like that:

    PHP Code:
    $('#container').append('<div id="char_' d[0] + '"><img src="' st '"></div>');
    $(
    '#char_' d[0]).css({'position' :  'absolute''left' 425'top' 860}); 
    But I'd definitely prefer real DOM manipulation over innerHTML:


    PHP Code:
    $('<div/>', {
        
    id'char_' d[0],
        
    css: {
            
    position'absolute',
            
    left425,
            
    top860
        
    }
    }).
    append(
        $(
    '<img/>', {
            
    srcst,
            
    alt'whatever'
        
    })
    ).
    appendTo('#container'); 


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •