CODEWITHSUNDEEP
jquerycss
os ip
os ip

Reputation: 67

dynamically append element to div and set css style

Id='a';      
linkId   = '#dialog_link' + Id;

htmlCode = '<p><a href="#" id="' + linkId + '" class="ui-state-default ui-corner-all"><span></span>Open Window</a></p>';        
$('#WindowsContainer').append(htmlCode);

$(linkId).css('padding: .4em 1em .4em 20px;text-decoration: none;position: relative;');
$(linkId + ' span.ui-icon').css('margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;');

Last two lines didn't affect style of a with id# "dialog_linka".

Upvotes: 0

Views: 12584

Answers (5)

Anenth
Anenth

Reputation: 702

Create the element from jquery with the styles set. 

var id = 2;
var link = $('<a/>',{
   id:'dialog_link' + id,
   class: 'ui-state-default ui-corner-all',
   text: 'Open Window',
   css:{
     padding: '.4em 1em .4em 20px',
     'text-decoration': 'none',
     position: 'relative'
   }
})

Demo Jsfiddle

References - Creating element from jquery

Upvotes: 3

Rohan Patil
Rohan Patil

Reputation: 2348

Try this.You can add style attribute instead of using .css function.

Id='a';      
linkId   = 'dialog_link' + Id;

htmlCode = '<p><a href="#" id="' + linkId + '" class="ui-state-default ui-corner-all"><span class="ui-icon"></span>Open Window</a></p>';        
$('#WindowsContainer').append(htmlCode);

$("#"+linkId).attr("style",'padding: .4em 1em .4em 20px;text-decoration: none;position: relative;');
$(linkId + ' span.ui-icon').attr("style",'margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;');

Upvotes: 0

JJJ
JJJ

Reputation: 33163

Try this:

$(linkId).css({ 
    padding: ".4em 1em .4em 20px",
    "text-decoration": "none",
    position: "relative"
});

You might want to re-read the API and check what kind of values $.css() accepts.

EDIT: If it doesn't work, it's because you haven't created the HTML correctly:

htmlCode = '<p><a href="#" id="' + linkId + '" ...'

because linkId is "#dialog_linka", the id attribute is id="#dialog_linka", when it should be dialog_linka (without the hash).

Also, you don't have any element with class .ui-icon, at least in the example code.

See http://jsfiddle.net/YDYA6/ for a demo.

Upvotes: 0

ipr101
ipr101

Reputation: 24236

You need to pass your css arguments as a map of property-value pairs -

$(linkId).css({'padding': '.4em 1em .4em 20px','text-decoration': 'none;position: relative'});

See the docs here - http://api.jquery.com/css/

Upvotes: 0

realshadow
realshadow

Reputation: 2585

You are using css function wrong.

It should be:

$(linkId).css({
    'padding': '.4em 1em .4em 20px',
    'text-decoration': 'none',
    'position': 'relative'
});

Upvotes: 0

Related Questions