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.
Related
I was trying to make a mini image editor with a width and height function. The image should keep getting more wide after button is clicked. I tried debugging with printing the width in the console and it did but the image didn't get wider. I also tried many other variations and all of them didn't work.
so, here is my code:
function go1(){
setInterval( function() {document.getElementById("testimage").style.width + 10}, 250)
}
Your first problem is that while you are calculating a new width, you are aren't setting the new width in your code.
The second problem is that IMG tags don't use the width style. Instead, they have a width attribute
function go1(){
setInterval( function() {
var im = document.getElementById("testimage");
var newWidth = (im.getAttribute("width") ? im.getAttribute("width") : 0) + 10;
im.setAttribute("width", newWidth);
}, 250)
}
Hello I'm trying to adjust the size of youtube videos in my web. I want them to be responsive that I'm using jquery to do that. I have done it successfully but the thing is I want the height of youtube video to be decreased. Right now, it's too big. When I try to do it, the responsiveness feature is removed. Can you check how I can decrease the size of the video and keep the responsiveness?
<script>
function update_iframe_size(){
var parent_id = $("iframe").parent().attr("id");
if (parent_id == "main_video") {
var parent_class = $("iframe").parent().attr("class");
var parent_width = $("iframe").parent().width();
console.log(parent_class);
var width = $("iframe").css("width"); // $("iframe").width();
var height = $("iframe").css("height");
var ratio = parseInt(height)/parseInt(width);
var new_height = parseInt(parent_width) * ratio
$("iframe").css("width", parent_width);
$("iframe").css("height", new_height);
}
}
update_iframe_size()
$(window).bind("resize", function(){
// alert("reized");
update_iframe_size();
});
</script>
I tried to decrease the height that I did $("iframe").css("height", new_height*0.7);
but then the height is set to the one I want. However responsiveness gets messed up.
Refer following link: iFrame always take height and width 100% depends on parent div/element which is position relative.
http://jsfiddle.net/masau/7wrhm/
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 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'});
});
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.