CODEWITHSUNDEEP
javascriptjquerycssvariables
Chris
Chris

Reputation: 309

How do I use a variable to get CSS info on an element?

What I have is the following code to create a div.

function makeLinkdiv () {
  gCurrentBlock = $gBlockDivName + $gBlockPointer;
  var idPointer = gCurrentBlock;
  var linksBlock = $('<div id ="' + gCurrentBlock + '" class="LinksBlock EditBlock"></div>').appendTo("#canvas");
  linksBlock.draggable({containment: "#canvas", scroll: false, grid: [10, 10]}, {cursor: "move", cursorAt: {top: 125, left: 50}});
  linksBlock.append('<div class="article_title EditBlock fontCenter fontBold font24">Article Title</div>');
  //
  // log the div data to the div object
  //
  var x = gCurrentBlock.css('left');
  var y = gCurrentBlock.css('top');
  alert ('top is - ' + y + ' left is - ' + x);
  divData.items.push({ID: $gBlockPointer, Block: gCurrentBlock, posTop : "450", posLeft : "540" });
  //
  // increment the block pointer
  //
  $gBlockPointer = $gBlockPointer + 1;
  //
}

What happens is that I do not get the CSS properties for top and left. Actually, nothing happens. I know that there must be something wrong in how I am using the variable gCurrentBlock, but I can't figure it out.

Upvotes: 0

Views: 173

Answers (5)

Jai
Jai

Reputation: 74738

I think you are not selecting the selector in a proper way:

 var x = gCurrentBlock.css('left');
 var y = gCurrentBlock.css('top');

you have appended it like this:

var linksBlock = $('<div id ="' + gCurrentBlock + '" class="LinksBlock EditBlock"></div>').appendTo("#canvas");
//--------------------------------^^^^^^^^^^^^^---this is the id of the div

so your code should be :

 var x = $('#'+gCurrentBlock).css('left');
 var y = $('#'+gCurrentBlock).css('top');

Upvotes: 1

Sudhanshu Yadav
Sudhanshu Yadav

Reputation: 2333

Here gCurrentBlock is a id in which you are directly using jquery method, so it will not work.

Try x=$('#'+gCurrentBlock).css('left') //it will return you left position in pixel like 150px if you want left position in number you can use

 x=$('#'+gCurrentBlock).position().left; //will return x as 150

same you can do for y.

y=$('#'+gCurrentBlock).css('top');

or

y=$('#'+gCurrentBlock).position().top;

Upvotes: 1

Kundan Singh Chouhan
Kundan Singh Chouhan

Reputation: 14282

The gCurrentBlock is a variable which contains the id of the div only, Thus

Replace this 

var x = gCurrentBlock.css('left');

With 

var x = $("#"+gCurrentBlock).css('left');

Hope this will help !!

Upvotes: 0

Ryan Wheale
Ryan Wheale

Reputation: 28400

Not really sure what your code is trying to accomplish... but you need to check out jQuery's position and offset methods, which will give you coordinates for your element.

I would expect your code to look more like this:

...
var position = $('#' + gCurrentBlock).position();
var x = position.left;
var y = position.top;
...

And if the values are not what you expect, try changing position to offset.

Upvotes: 1

johankj
johankj

Reputation: 1767

You can't use .css() without using it as a jQuery-object.

Try the following instead:

var x = document.getElementById(gCurrentBlock).style.left;
var y = document.getElementById(gCurrentBlock).style.top;

Upvotes: 1

Related Questions