div").css({ 'margin-top': -($(this).height()/2), 'margin-left': -($(this).width()/2)});What am" name="description" /> div").css({ 'margin-top': -($(this).height()/2), 'margin-left': -($(this).width()/2)});What am" />
4996

Assign margin-left using element's own width

Question:

I want to set the margin-left of an element to negative half the width of itself. This gets the document's width instead:

$("#services .backPanel > div").css({ 'margin-top': -($(this).height()/2), 'margin-left': -($(this).width()/2) });

What am I doing wrong?

<h2>css</h2> #services{ margin: 127px 0 0 0; width: 100%; height: 100%; position: relative; } #services .services{ position: relative; margin: 40px 9% 0 9%; } #services .backPanel{ float: none; position: absolute; top: 0; left: 0; padding: 30px 50px; z-index: 80; width: 100%; height: 100%; background: #f9f8f8; } #services .backPanel div{ width: 100%; position: absolute; top: 50%; left: 50%; } <h2>html</h2> <div id="services"> <div class="services">

Services

<div class="row-fluid"> <div class="span4"> <div class="frontPanel design"> <h3>Design and development</h3> </div> <div class="backPanel"> <div> <h3>Design and development</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget viverra massa.

</div> </div> </div> </div> </div> </div>

SOLVED IT

Turns out that I hadn't taken into account the css transition property that was set to the parent .backPanel, which caused the function to read the element's width and height at it was being loaded. With the transition set for all properties, the inner div was still growing from 0 towards its final width and height.

<em>Note for future reference</em>: Always take into account the transition for the animations of objects when reading their dimensions.

Answer1:

If I'm not mistaking $(this) is pointing to window in your case. Try:

$("#services .backPanel > div").each(function() { var element = $(this); element.css({ 'margin-top': -(element.height()/2), 'margin-left': -(element.width()/2) }); });

<a href="http://jsfiddle.net/peQ2R/" rel="nofollow">http://jsfiddle.net/peQ2R/</a>

Answer2:

Turns out that I hadn't taken into account the css transition property that was set to the parent .backPanel, which caused the function to read the element's width and height at it was being loaded. With the transition set for all properties, the inner div was still growing from 0 towards its final width and height.

<em><strong>Note for future reference</strong></em>: Always take into account the transition for the animations of objects when reading their dimensions.

Recommend

  • jinja2 template not found and internal server error
  • is it possible to insert a line break in this tooltip?
  • Request response issues in biztalk
  • cordova is not defined - cordova.js has already been loaded :: Ionic
  • Clear fused location provider's location for testing
  • Floated image with variable width and heading with background image
  • How Lists (specifically, RecyclerView with CardViews) in Android work
  • azure media services - The request body is too large and exceeds the maximum permissible limit
  • Google Custom Search with transparent background
  • Android fill_parent issue
  • Jetty Server not starting: Unable to establish loopback connection
  • Repeat a vertical line on every page in Report Builder / SSRS
  • PHPUnit_Framework_TestCase class is not available. Fix… - Makegood , Eclipse
  • Insert into database using onclick function
  • Encrypt data by using a public key in c# and decrypt data by using a private key in php
  • Fill an image in a square container while keeping aspect ratio
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Change an a tag attribute in JavaScript based on screen width
  • Symfony2: How to get request parameter
  • Weird JavaScript statement, what does it mean?
  • jquery mobile loadPage not working
  • Rearranging Cells in UITableView Bug & Saving Changes
  • Cannot Parse HTML Data Using Android / JSOUP
  • How to get icons for entities from eclipse?
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • Java static initializers and reflection
  • How to stop GridView from loading again when I press back button?
  • unknown Exception android
  • JaxB to read class hierarchy
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal