SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamically calculate padding-left

    Hi,

    Here's a sample division:

    Code:
    <div style="padding:0 0 0 40px; background:url(comment-icon.png) left center no-repeat;">some text</div>
    I wonder how I can calculate the padding-left:40px dynamically so that any icon I choose the padding-left value changes according to the image width.

    Any help is appreciated!

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To do this client-side with JS, you'd need to:
    a) Read the background image
    b) Insert it into the page (use absolute positioning to move it off the top-left)
    c) Get the width of the visible image
    d) Update the padding of original element with new value
    e) Remove image from page

    To do it server-side, you could probably use a PHP image library.
    From the English nation to a US location.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •