Geek asks and answers

Fluid spacing for div

I have a page with the main image. The main image will change its height and width depending on the photo. I also have a AddThis widget next to the image. I have a spacing correct for an image of the same size. How to install AddThis divto maintain the current interval in the current state depending on the size of the image?

Here is a link so you can see an example of what I'm talking about. The black box (marked in white) on the page represents the image that will change. Currently, the AddThis div attribute is customizable for height, but not width. Here is the CSS for the AddThis div:

style = "left: -110px; top: -220px;" / * How it is positioned now, and I like the current interval. It must support this interval * /

.addthis_floating_style{ 
        background: none repeat scroll 0 0 #000000 !important; 
        position: relative !important; 
}

How to change this so that AddThis correctly adjusts its distance to the height and width of the image?

Another way that I think about it, is to use jQuery to read the height and width of the image, and then set the elements leftand topin the AddThis element based on the image size. This will need to be calculated dynamically.

I will use any method that works best. Please give an example, since javascript is not my strong suit.

: , , , , , . , (: , , , - , ):

JS

var $j = jQuery.noConflict();
$j("#add-this-vertical").position({
    my:        "right top",
    at:        "right bottom",
    of:        $j("#image-container"),
   collision: "fit"
})

HTML

<div id="image-container">
<div class="img-center"><img src="/test.jpg" alt="test" />
</div>
<div id="add-this-vertical">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/
 300/addthis_widget.js">   
</script>
<!-- AddThis Button END -->
</div>


</div>
0
2

, . ...

<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
    <div style="text-align:center;">
         <img src="/Images/test.jpg" alt="test" />
    </div>
    <div style="position:absolute; bottom:0px; right:-40px;">
    <div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
         <a class="addthis_button_facebook"></a>
         <a class="addthis_button_twitter"></a>
         <a class="addthis_button_email"></a>
         <a class="addthis_button_compact"></a>
    </div>
    <script type="text/javascript" src="http://s7.addthis.com/js/300/
            addthis_widget.js"></script>
 </div>
    </div>
0

JavaScript :

<img onload="onMyImageLoad(this)" />

:

<script>

function onMyImageLoad( img )
{

var height = img.height

// now do something with this height value like change a 
// div height or margin-top    

}

</script>
0

More articles:


All Articles