We Keep Coding

Justify images inside div using jquery

I have a centered div that takes 80% of the width of window, inside that div have a gallery images .container img {min-width:200px;} using jquery I want to make the images justified depending on the width of the .container, the code that worked for me is this :
$(window).on("resize", function(){
// get the width of the container
var albumContentWidth = $(".container").width();
// as we have in our css the min-width of image is 200
// see how many image can fit in each row
var imagePerRow = parseInt(albumContentWidth / 200);
// set the width of image using calc
$(".container img").css("width", "calc(100% / #{imagePerRow})");
});
The code above works fine, but for some reasons.. I don't want to use calc() instead I want to calculate this using pixels, so what I did :
$(window).on("resize", function(){
// get the width of the container
var albumContentWidth = $(".container").width();
// as we have in our css the min-width of image is 200
// see how many image can fit in each row
var imagePerRow = parseInt(albumContentWidth / 200);
// instead of using calc() divide the width of container by the possible number of images per row
var imageWidth = (albumContentWidth / imagePerRow).toFixed(2);
// set the width of image using calc
$(".container img").css("width", imageWidth);
});
However this is not working and the images don't get justified correctly when I resize !!

resize image two or three time via javascript

could we do this with javascript?
consider we have a x * y px div
(width=x and hight=y)
and user uploads image in any size, I want to find a way this image not to be Deformed in Container.
I have a senario but not sure it's possible via javascript or jquery in addition of css. you can see my senario below but I dont know how can I write correctly in javascript
var ContainerWidth=document.getElementById("Container").width;
var ContainerHight=document.getElementById("Container").height;
var imgWidth = document.getElementById("myImg").width;
var imgHight =document.getElementById("myImg").height;
if imgWidth > ContainerWidth
{
myimg.style.width = ContainerWidth;
var newHightOfmyimg= myimg.style.height = 'auto';???????????????????????? the main problem: how can I know what is this auto height in px and how can set it in a var?
}
if newHightOfmyimg > ContainerHight
{
UltimateimgHight= ContainerHight;
UltimateimgWidth=auto;
}

firstly to get the style of a property using javascript, you should do the following
var containerWidth = document.getElementById('Container').style.width;
var containerHeight = document.getElementById('Conatiner').style.height;
var imgWidth = document.getElementById('myImg').style.width;
var imgHeight= document.getElementById('myImg').style.height;
that will return the style set by the CSS itself.
secondly, auto is the original width / height of the element. if you want your image or any element to get it's parent's width / height then you could use inherit in CSS.

.css() not setting width value

I'm looking to simply move a divs width as certain pictures load in my application. As such for some reason I read the Div's width add 128 and then use the .css() to change divs new width. For some reason the .css() function isn't updating the width as it goes along. It only updates on the last picture that is loaded. I'm really not to sure why this is happening. Here is some code:
document.getElementById('back').onload = function(){
var width = $("#LoadingBar").css("width").replace(/[^-\d\.]/g, '');
width = parseInt(width);
var newwidth = width + increment;
newwidth = newwidth +"px";
$('#LoadingBar').animate({width:newwidth},"fast");
if(width == 1280) {
//This is another div that I show once all the pictures load
$("#everything").show();
}
}
Any ideas as to what I am breaking?

Use the jquery width property to update element widths.
css is for more esoteric properties of your HTML elements.
$("#LoadingBar").css("width")
Becomes:
$("#LoadingBar").width()
You can set width too
$("#LoadingBar").width(MyWidthValue);

instead of using css width use: var width = $("#LoadingBar").width() to get the numeric value. Then increment it and append units

Just do this to change the width
$(<your element>).width(function (a, w) {return w+=128});
and this if you need to animate
$(<your element>).animate({width:"+=128"},'fast');

jQuery Variable Height

I'm trying to have an image gallery where a caption is vertically centered inside of a slideshow, here's the code I'm working with
$(window).load(function() {
var imageHeight = $('.flexslider .slides li img').height();
var captionTop = imageHeight - $('.title-cap').height();
var captionTop = captionTop/2;
$('.title-cap').css('top',captionTop + 'px');
var captionTopOne = imageHeight - $('.sub-cap-one').height();
var captionTopOne = captionTopOne/2;
$('.sub-cap-one').css('top',captionTopOne + 'px');
var captionTopTwo = imageHeight - $('.sub-cap-two').height();
var captionTopTwo = captionTopTwo/2;
$('.sub-cap-two').css('top',captionTopTwo + 'px');
var captionTopThr = imageHeight - $('.sub-cap-three').height();
var captionTopThr = captionTopThr/2;
$('.sub-cap-three').css('top',captionTopThr + 'px');
});
The caption is positioned absolutely, and I'm using top to do the centering...
So my thought process is, get the height of the base slideshow image to keep it responsive, minus the height of the current caption, and divide that by two ending with the top value.
The first instance is working, with "title-cap", but the next three are not. They all return the same wrong value. All caption classes have the same attributes, just different for assignment.
Also, what would I need to add in order for the values to dynamically change with the browser window size in real time.
Edit: Alright, did a little research and figured out the load/resize part.
This is what I have now
function setContent(){
[Added all of the above minus the onload part in here]
}
$(window).load(function() {
setContent();
});
$(window).resize(function() {
setContent();
});
Now just not sure why the sub-cap's aren't loading properly. Any ideas?

I've had similar problem when trying to get the size of hidden elements. I found this nice jQuery actual plugin. It might be what you need.

image resize by adding values to retried width and height of image

i have an series of images whose width and height varies. in my application i need to gradually grow image when it gets focus.after image loads i have used
var w='img.width'
var h='img.height'
to get width and height of image. now how do i add some value say 10px to both width and height so that i can pass this values to grow function.
<script type='text/javascript'>
$(window).load(function(){
var timer = null;
$(function() {
$('button:has(img)').focus(function() {
var $image = $(this).find('img');
timer = setTimeout(function() {
var w = 'img.width';
var h = 'img.height';
var zoominw= w+10;
var zoominh=h+10;
$image.animate({
'width': 'zoominw',
'height': 'zoominh'
}, 500);
}, 2000);
}).blur(function() {
if (timer != null)
clearTimeout(timer);
$(this).find('img').animate({
'width': 'imgwidth',
'height': 'imgheight'
}, 500);
});
});
});
</script>

To get the width of an element use something like this:
var image = $(this).find('img');
var w = image.width();
(In your example, you are just setting the string img.width to the w variable instead of getting the value itself)
Next, just add 10 to the w variable and write back to img.width. Same goes for the h variable.
And finally, write back the updated value:
image.width(w);
Same goes for the height.
Assuming you want to animate the growth (and not just make it 10px bigger once), take a look at the jQuery animate documentation for more information on animating elements.
For example to animate the image to become 100px wider use something like this:
image.animate({"width": "+=100px"}, "slow");
(according to the animate documentation)