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

Tags: javascript,jquery,css,variables

Problem :

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.

Solution :

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 =;

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

    CSS Howto..

    how to make body tag elastic?

    How do you make a make a page's worth of empty space (with only a title) followed by a div in CSS?

    How to display another div when clicked on a div using CSS only

    Menu - Show up the Submenuitems under the whole Menuitems - HTML/CSS

    How to reference nested classes with css?

    How do I manipulate the same function in javascript for two different classes

    how to overwrite css style in page?

    How to automatically compile LESS into CSS on the server?

    How to re-use common css rules in css( sass ) [closed]

    How to put a css tag in an element if another has this element [closed]

    How can I set my unordered list to be in the middle not in-line (see image)?

    How to make hover-active whole
  • , not just ?
  • How to center text in lists?

    How to properly align icon and text in a table?

    How to use the native browser outline in CSS?

    Bootstrap: Only Show Fixed Footer In Larger Screens?

    How at least approximately imitate col-md-1.5?

    PostCSS: How to conditionally add a new rule based on declaration in current rule?

    how come the position static on my element doesnt position relative to the parent div?

    How Is This Effect Achieved? HTML/CSS/jQuery [closed]

    Wordpress Menus are not showing up correctly?

    How to add delay in css hover on a div that was displayed none?

    how to overide css class with an underlying class

    How to keep banner animations running while changing webpages [closed]

    How to create these boxes with CSS and HTML [closed]

    How do I update an div css to display an complete image when section is complete?

    How to increase cell height of GWT celltable : Issue with IE?

    How to get slanted borders in CSS

    How to explain using browser.sleep in protractor

    AngularDart - How to style Component with global CSS in Google Chrome 35m (applyAuthorStyles is deprecated)