applying .css property on a dynamically created div

Question

I am trying to set the css left property value on items. Below is the code:

if (priorityObj.UpcomingActivities() != "") {
    $.each(priorityObj.UpcomingActivities(), function (i, v) {
        monthPosition = v.ActivityDateToDisplay().split(',')[0].substring(0, 3).trim();
        if (monthPosition != "") {
            activitymonthpos = $('#servicePlanMonths').find('#sp_month_' + monthPosition).position().left;
            $(curelement).find('.priority-icon').offset({ left: activitymonthpos });
        }
        else {
            monthLeftPosition = $('#servicePlanMonths').find('#sp_month_' + startingMonth).position().left;
            $(curelement).find('.priority-icon').offset({ left: monthLeftPosition });
        }
    });
}

The monthPosition variable is used fetch the current month and based on this gets the css left property value and then apply that property value. This code is running fine. But the issue that I am facing is with

$(curelement).find('.priority-icon').offset({ left: monthLeftPosition });

Since this class is binded with the UpcomingActivities() function and this function can have more than two values. So, if I have two values, then it apply the css and set the same left property of [0] index for both the values. I wanted that it should set the left property on only one value and diff left property value on the other.

How can I make it work so that the left property of the css is applied on different items.

I know the problem is with the below statement but I couldn't find out how to resolve it

$(curelement).find('.priority-icon').offset({ left: monthLeftPosition });

Can anybody help?

@Jai: by using the said statement, I was facing issue with the positioning. and there is difference between left and offset: for more info on this please go to this link: http://stackoverflow.com/questions/3202008/jquery-difference-between-position-and-offset — Running Rabbit, Oct 30 '15 at 09:40

score 0 · Answer 1 · answered Oct 30 '15 at 09:18

0

You could set the CSS property left using jQuery

$('#yourDiv').css( "left", 200 );

Live example here, click the blu div to change is left position:

https://jsbin.com/boqadeweqi/edit?html,output

$( "#target" ).click(function() {
  $( this ).css( "left", 200 );
});

div {
    position:absolute;
    width: 60px;
    height: 60px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target" style="background-color:blue;">Click me!</div>

For more information look at jQuery API here

answered Oct 30 '15 at 09:18

GibboK

71,848
143
435
658

my question is different here... I am successful in applying the css. but when I have two object, the same css is applied to each object.i.e left property is assigned to each object – Running Rabbit Oct 30 '15 at 09:32
@Yash thanks for commenting, could you please create a jsfiddle where you show us exactly your error, so we can try to help you fix it :) Let me know. Thanks for your time. – GibboK Oct 30 '15 at 10:56

score -1 · Answer 2 · answered Oct 30 '15 at 08:52

-1

Try using .css({"prop":"value","prop":"value"});

http://api.jquery.com/css/

answered Oct 30 '15 at 08:52

ahervin

461
2
15

applying .css property on a dynamically created div

2 Answers2