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 = position.top;
...

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 asp.net 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)