I want to achieve something like this:
I have a div, which width is not specified, so it changes basing on the content it has. First of all, I want to calculate that div's width. After that, I would like to add css style with jquery, which will margin that div left half of its width. So, if the div's width is 300px, I want this css added to the same div:
margin-left: -150px;
I hope I was clear. Thanks a lot.
use this code:
// get div width
var width = $('div').width();
// calculate margin size
var marginLeft = width / 2;
// set css
$('div').css('margin-left', -marginLeft);
var w = $("#left-shunted-div").width();
var left_mar = -(w/2);
$("#left-shunted-div").css("margin-left",left_mar);
You could simply do it like so:
// After dom load
$(function(){
// Select the div
var div = $('#myDiv');
// Get the width;
var width = div.outerWidth();
// Change the margin-left to half negative
div.css({'marginLeft' : -(width / 2) + 'px'});
});
Related
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 !!
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.
I want to set the min-height of #wrapper to the height of #sidebar which does not have a fixed height.
So, something like the following. I am not adept with JavaScript so please don't laugh if it's way off.
var sidebarHeight = jQuery('#sidebar').height;
jQuery('#wrapper').css('min-height', sidebarHeight);
How can I make this work?
Try this
var sidebarHeight = jQuery('#sidebar').height(); //height() not height
and ensure function should be in $(document).ready(function(){... });
As per your need
jQuery('#sidebar').outerHeight();
if(jQuery('#sidebar').is(':visible')){ // if sidebar visible min-height is applied to wrapper
jQuery('#wrapper').css('min-height', sidebarHeight);
}
Use jquery outerHeight() as it will take in consideration the margin also
$(document).ready(function(){
var sidebarHeight = jQuery('#sidebar').outerHeight();
jQuery('#wrapper').css('min-height', sidebarHeight);
$(window).resize(function(){ //for responsive site ensure that min-height is changed
var sidebarHeight = jQuery('#sidebar')..outerHeight();
jQuery('#wrapper').css('min-height', sidebarHeight);
});
});
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');
I would like to know what the best method is to calculate the width and height of an element with Jquery/Javascript (or any other method that might be more accurate). Currently, I am using this Jquery method:
Jquery: See my example: http://jsfiddle.net/AwkF5/1/
var w = $("#wrapper"); //The element dimensions to calculate
$("#displayW").text( "outerWidth:" + w.outerWidth()+ " , outerWidth(true):" + w.outerWidth(true) ); // Displaying the width in the #displayW div
$("#displayH").text( "outerHeight:" + w.outerHeight()+ " , outerHeight(true):" + w.outerHeight(true) ); // Displaying the height in the #displayH div
Now is this the most accurate way to calculate the width/height(including content, padding and border) and TRUE width/height ((including content, padding, border and margin) of an element?
What would be the plain javascript method?
I'm asking because I want to make a background image for the div and I want to know what size it should be...Note that the width and height varies between different browsers...obviously
Thank You
This should work for you:
var realWidth = $("#yourBlockId").outerWidth();
realWidth += parseInt($("#yourBlockId").css("margin-left"), 10);
realWidth += parseInt($("#yourBlockId").css("margin-right"), 10);
The same approach for height.