JQuery not resizing div on window resize - javascript

So I have a JQuery function that is built to make column heights the same. It checks the screen size, and if it's on a medium sized device or bigger, it will resize the column to the same heights. This part of the function works great. However, if it gets resized to mobile size (or anything under 1025px) the height does not reset to the original size and stays at the increased size. If it starts on a small screen, it will appear correctly until it is resized to a large screen and then resized to a small screen again (then the same problem as above occurs).
Here is the code!
$(document).ready(function(){
matchColHeight('.intro-pic', '.intro-desc-container');
$(window).resize(function(){
matchColHeight('.intro-pic', '.intro-desc-container');
});
});
function matchColHeight(tallColumn, shortColumn){
shortOriginalHeight = $(shortColumn).height();
if (window.matchMedia('(min-width: 1025px)').matches) {
height = $(tallColumn).height();
$(shortColumn).css({
'height': height + 'px'
});
}
else{
$(shortColumn).css({
'height': shortOriginalHeight + 'px'
});
}
}
Note: I've also tried using the below function and it had the same issues:
function matchColHeight(tallColumn, shortColumn){
shortOriginalHeight = $(shortColumn).height();
screenSize = $(window).width();
if (screenSize > 1025){
height = $(tallColumn).height();
$(shortColumn).css({
'height': height + 'px'
});
}
else{
$(shortColumn).css({
'height': shortOriginalHeight + 'px'
});
}
}
Thanks in advance!


Ended up resolving my issue by changing the function to the following:
function matchColHeight(tallColumn, shortColumn){
if (window.matchMedia('(min-width: 40em)').matches) {
height = $(tallColumn).height();
$(shortColumn).css({
'height': height + 'px'
});
}
else{
$(shortColumn).removeAttr('style');
}
}
Instead of storing the original height and reverting back to it, I just removed the modified height when it isn't needed.

Related

How can I resize my image proportionally

How can I resize my image like they did here website.
When you zoom in that picture where it says "Radiant Power" , it does not go bigger. Just stays the same size compared to the other elements on the site.
Can you guys give me some tips on how to do that, I can't seem to find the answer anywhere.
Here's my website: site
It's on a free domain so it will load slow.
As you can see I made the big picture work ,because it's 100vw so it's much easier to handle... it stays the same when you zoom in. Now i want the little one to be resized when I zoom in and keep its aspect ratio like that website I showed.
Here's the jsfiddle
That's how I did the large picture resize:
$(function () {
var scr=screen.width;
if($(window).width() > scr){
$("#wall").width(scr + 'px');
$("#content").width(scr + 'px');
$("#body-wrap").width(scr + 'px');
$("header").width(scr + 'px');
$("ul:eq(0)").width(scr + 'px');
}
else{
$("#wall").width('100vw');
$("#wall").height('auto');
$("#body-wrap").width('100vw');
$("header").width('100vw');
$("ul:eq(0)").width('100vw');
}
$(window).resize(function () {
if($(window).width() > scr){
$("#wall").width(scr + 'px');
$("#content").width(scr + 'px');
$("#body-wrap").width(scr + 'px');
$("header").width(scr + 'px');
$("ul:eq(0)").width(scr + 'px');
}
else {
$("#wall").width('100vw');
$("#wall").height('auto');
$("#body-wrap").width('100vw');
$("header").width('100vw');
$("ul:eq(0)").width('100vw');
}
});
});

You just make image scale on percent of total width/height like this:
https://jsfiddle.net/bhdpmhgc/1/
#test{
width: 10%;
height: 10%;
}
<img src="https://images.cdn.autocar.co.uk/sites/autocar.co.uk/files/porsche-911-s-gen2-rt-2016-244.jpg" id="test">

Change position of div based on content & viewport height using jquery

I want to have a div be fixed at the bottom of the window when the window is taller than the content height. If the content height is taller than the window height, I want the div position to remain relative.
I currently have this mostly working, however I don't want the div to overlap the content at all. I tried various forms of below, but still not working:
var body = content+bottomBar
if (body > viewport) {
$(".bottom-bar").css({
'position':'relative'
});
} else {
$(".bottom-bar").css({
'position': 'fixed'
})
}
I also am having trouble getting the window.resize to work.
Any help would be appreciated!
http://jsfiddle.net/no05x1vx/1/

Referring to the jsfiddle linked by the OP, here are a few changes to make the code work as expected, please see the comments:
var content = $(".content").height()
var viewport = $(window).height();
// Use innerHeight here as the bottom-bar div has height 0 and padding 60px
// .height() would return 0
var bottomBar = $(".bottom-bar").innerHeight();
var body = parseInt(content)+parseInt(bottomBar)
$(window).on('resize', function(){
// Get new viewport height
viewport = $(window).height();
if (content > (viewport-bottomBar) ) {
$(".bottom-bar").css({
'position':'relative'
});
} else {
$(".bottom-bar").css({
'position': 'fixed'
})
}
});
// Trigger resize after page load (to avoid repeated code)
$(document).ready(function(){
$(window).resize();
});

Changing variable based on window size - jQuery/JS

Having issues with this. So in short I want var hprH = 555px when screens are >= 910px, then hprH = 300px when screens are between 910px - 400px and 150px when < 400px. I tried this with CSS media queries, but couldn't get it to work. So now I am trying to do this solely in js.
This is the global variable
var hprH = $('#hpr').height();
I would like to change this as stated above.
Here is the code that uses the variable, which works until I need the hprH height to be less than 555px.
$(function() {
hpr_init();
$('#hpr .thumb').click(function(){
clearInterval(timer);
showHPR($(this));
});
timer = setInterval(function(){showHPR(nextThumb);}, interval);
$(window).resize(function(){
hprH = $('#hpr').height();
$('.selected').height(hprH);
});
});
function showHPR(obj){
$(obj).fadeOut(300,function(){
$(obj).parent().animate({
height:hprH,
zIndex:0,
bottom:0
},duration);
$(obj).parent().find('img').animate({
top:0
},500,function(){
$(this).css({bottom:'auto'});
});
$(obj).parent().find('.content').fadeIn();
lastThumb(obj);
});
}

JS change height and return to original CSS height

Hoping to get some help on some javascript i'm getting stuck with.
Q1: JS RETURN TO IMAGE HEIGHT AND MARGIN
My layout is horizontal scroll of smaller images positioned in a grid, using different height percentages and margins to position.
When you click on any of the images they all expand to height:100% and margin:0 which clears all previous styles putting it into a simple large image layout.
My question is how do I add a function that when clicking on .image-container the height and margins returns to how it was originally set in the css
JS FIDDLE DEMO (click any center image)
// GALLERY 100% height
$('.image-container').click(function(){
$('.image-container img').animate({'height': '100%'},900)
.animate({'margin': '0'},900);
});
// ? REMOVE HEIGHT ?
$('.image-container').click(function(){
$('.image-container img').animate({'height': '?'},900)
.animate({'margin': '?'},900);
});
EDIT UPDATED QUESTION: Q2 HOW TO MAKE PAGE SIZE GROW WITH LARGER IMAGES
Right now my .image-container is set to a large width but with responsive images it's hard to find the correct width, is there a way to find this width and to make it grow along with the click grow of images (displayed above)
.image-container {
display:block;
width:3600px;
height: 75%;
float:left;
position:absolute;
top: 13%;
left: 120px;
z-index: -1;
}
Thanks for any help!

You need to store the original height in a variable.
Check out the updated fiddle
var originalheight;
// GALLERY 100% height
$('.image-container').click(function(){
originalheight = $('.image-container img').height();
$('.image-container img').animate({'height': '100%'},900)
.animate({'margin': '0'},900);
});
//REMOVE HEIGHT ?
$('.image-container').click(function(){
$('.image-container img').animate({'height': originalheight},900)
.animate({'margin': '0'},900);
});
EDIT:
Sorry about the goof up in previous solution. I didn't notice I was using click twice unnecessarily.
Here's the updated solution with the updated fiddle.
var originalheight;
$('.image-container').click(function () {
if (!originalheight) originalheight = $('.image-container img').height();
if ($('.image-container img').css('height') == originalheight + "px") { // GALLERY 100% height
$('.image-container img').animate({
'height': '100%'
}, 900).animate({
'margin': '0'
}, 900);
} else { //REMOVE HEIGHT ?
$('.image-container img').animate({
'height': originalheight
}, 900).animate({
'margin': '0'
}, 900);
}
});

This is my idea, hope it'll work:
// Before animation
var heights = new Array();
var margins = new Array();
$('.image-container img').each(function(){
heights.push($(this).css('height'));
});
$('.image-container img').each(function(){
margins.push($(this).css('margin'));
});
//
$('.image-container').click(function(){
$('.image-container img').animate({'height': '100%'},900)
.animate({'margin': '0'},900);
});
// ? REMOVE HEIGHT ?
$('.image-container').click(function(){
$('.image-container img').animate({'height': heights[$(this).index()]},900)
.animate({'margin': margins[$(this).index()]},900);
});

First of all, I suggest you to use the focusout and blur event to undo changes, because the way you implement your 'click' event, the second part only will be considered (you erase the first click implementation doing so). the best thing, is to enlarge the image when clicked, and reinit it's size when you click away.
Try this :
// GALLERY 100% height
$('.image-container')
.bind('click', function(){
$('.image-container img').animate({height: '100%'},900)
.animate({margin: 0},900);
})
.bind('focusout blur', function(){
$('.image-container img').animate({height: ''},900)
.animate({margin: ''},900);
});
Or better, use classes in which you define the behaiviors on clicking, and on clicking again, for exemple :
<style>
.clickimage{ height : 100%; margin :0;}
.yourOriginalValues {height : original; margin : original;}
</style>
$('.yourOriginalValues').click(function(){
$(this).switchClass( "yourOriginalValues", "clickimage", 900 );
});
$('.clickimage).click(function(){
$(this).switchClass( "clickimage", "yourOriginalValues", 900 );
});
ps. the switchClass method, is a jQuery UI functionality.

Jquery get height of fluid image

I need to get the height of an image and apply the height to another div. This is easy using
$(window).load(function() {
var img_height = $('#image').height();
$('.some_div').css('height', img_height);
});
however... the image is set to width 100% and changes size when re-sizing the browser window. Is it possible to get the live height of the image?

$(window).resize(function () {
var image_height = $('img').height();
$('div').css({
'height': image_height
});
});
Here's a JSFiddle which uses the Console to report back the image height.

You can use window resize callback
$(window).resize(function(){
var img_height = $('#image').height();
$('.some_div').css('height', img_height);
})

Categories