Please note that this is not the same question as "change a div size to fit content". What I have is a relatively positioned div with a couple of absolutely positioned images inside it:
<div id="nj_size_holder">
<img id="nj_credit_card" src="credit_card.png" width="340"/>
<img id="nj_ruler" src="ruler.jpg" />
<img id="nj_item_image" src="{$base_dir_ssl}img/p/{$imgurl}" height='{$imgheight}'/>
</div>
What I also have is a Javascript/jQuery function. This function is where my question lies. What I need it to do is - given a certain parameter (as a percentage) it should dynamically resize both the div and the images inside it by that percentage.
function resizeAll(perc){
//resize everything here
}
So if the div height is initially 600px and the "nj_ruler" image height is 400, calling resizeAll(25) should increase the height of the div to 750px and the height of the image to 500px (25% increase).
Is there a way to accomplish this without increasing each height individually? There will be more elements in the div later on and, if possible, I'd like to have a function which resizes everything without referring to every element within the div individually.
var increaseby=25; //in percent
$("#nj_size_holder, #nj_size_holder > img").each(function() {
$(this).css("height",$(this).css("height")*((increaseby+100)/100));
});
Related
I'm trying to add a gradient fade on content that overflows a , as seen here: http://jsfiddle.net/6k3vV/
On the div I have a set height of 200 pixels
I want to optionally show the fade depending on whether or not the content actually overflows the 200px
Things work ok if I have all the content/resources already loaded:
Something like <h1>Hello World</h1> will work fine and I can calculate the height that that would occupy
if I insert it into the document
However, if I have something like <h1>Hello World</h1><img src=".." /> it will not work as I cannot reliably
determine the height the contents would occupy until the image itself is loaded.
I'm trying to add this functionality on a comments page where I inject each comment into a wrapping div and optionally
display the gradient fade. The current solution that I am thinking of is checking for and tag and attaching an onload
event handler that will calculate the height after the image loads.
is there a better way of doing this?
Since you have a set height, it's easy. On doc load (or an event), just check the height of each "section" and append a div w/ the class fadeout if that height is greater than 200.
Fiddle for you
I would recommend adding a class to your <section> element rather than using that element as a whole selector.
You may want to play around with using the height of .fadeout as a % rather than em
I have an image of 1108px height and 907 px height. I have kept this image in a div tag and its height and width is as shown
<div id="mapframe" style="overflow:hidden;height:200px;width:300px;">
<img id="image" src="img/Groundfloor1.jpg" height="1108px" width="907px">
</div>
Now i do not know how to display only the specified coordinates(eg 500px from top and 100px from right) of my image at the centre of the div container and the image should be a DRAGGING IMAGE like GOOGLE MAPS. I have tried it with offset but the problem with it is that my image stops dragging.
Thank you for trying to help me.
Does it need to be an image element? It might be easier having it as a background-image for the div and using background-position to move it around.
If you insist on having an img element, you could also use margins, but to save you some headaches I would just use absolute positioning.
I have a parent div .photo_container that holds an img, and stretches to the dimensions of this img with its display: inline-block CSS attribute.
Problem: Because there will be many .photo_container divs on the page and the images take some time to load, before all the img loads, the page will be filled with the tiny unstretched divs (with a few px of padding) before expanding to accomodate each img as they load one by one.
Is it possible to 'pre-stretch' the divs to the correct size so that when its child img loads, it does not have to change its size?
Here's an illustration of how it looks like before the images load (ugly!) and after.
Code:
<div class="photo_box">
<img src="..." />
</div>
There is no way to know image dimension unless you actually load the image (in JS or CSS alike). So it doesn't matter if you use JS and set container dimensions dynamically - you still need to load image first and thus for some time you will display the "ugly" empty containers.
So, add minimum size to .photo_container. I looks like at least width of all your thumbs is consistent, so do something like .photo_container { min-width:100px; min-height:50px }. Then to each image add an onLoad callback that will resize parent accordingly.
If you use jQuery, do something like this:
$('.photo_container img').each(function() {
$(this).bind('load', function() {
var w = $(this).width(),
h = $(this).height();
$(this).parent('.photo_container').attr({ width: w+'px', height: h+'px' });
}
});
Please take a look at this fiddle.
My goal is to have a button to remotely slide up the image via a button, but instead it becomes small .
Anyone know the cause of this?
The image element is trying to keep its aspect ratio, since you only specified a height and not a width.
Adding width="200px" solves your problem. You will find an updated fiddle here.
You need to put the image inside a container with overflow: hidden set to it, so that the browser doesn't resize the image itself and cause the distortion of the aspect ratio.
HTML
<div class="le_map_container"> <!-- overflow: hidden on this element -->
<img src="http://bethhaim.spin-demo.com/wp-content/files_flutter/1330095469Untitled-5.jpg" height="200" class="le_map"/>
</div>
jQuery
$('.tour_map').click(function() {
$(".le_map_container").slideToggle();
});
Example fiddle
The slideToggle method changes the height of the element. But I think because you slideToggle the image tag directly, the width is changed along with the height to keep the ratio.
Try setting explicitly a width you your image to the width stays.
DEMO
I have a <h3> tag with limited height (100 px for example, position: absolute) and the text overflows it.
What I would like to do is slide it down over to the height that is needed when the mouse is over it and back to original height (100px).
I hope you understood what I mean
I don't think it uses slidedown() function for that and I am very weak in animate function. Any help please?
You can nest a div inside the h3 that contains the content and then use the h3 as a masking container (use overflow:hidden). When the user mouses over, fire a function that get's the height of the interior div (make sure to include any margins or padding). Then execute you height adjust animate function (In jquery, something like $('h3').animate({height: heightVar}); )The mouseout fires a function that restores the height of the h3 back to 100px.
Here's a sample: http://jsfiddle.net/XR9fb/
You can get the real height of the element with the scrollHeight property. Now, I don't really know much of jQuery, but I imagine you could just call animate to set the height CSS property to the scrollHeight of the element when the mouse hovers it, and return to the original height when the mouse moves out of it.
If the height of the element isn't fixed, you can salve the current height somewhere before displaying the full element, and when the mouse leaves the element you just restores this state.