i have a code for check every height's thumbnail and make all thumbnail to have the height of the tallest thumbnail. its work well for the first time.
then i test it in resolution 768x163 from 1440x613 all my thumbnail seems like have a little space inside the caption. so i try to reload the page. and the bug got fix.
so how to make the function to work when i minimize the window without have to reload the page
this my code on height.js
(function($) {
"use strict";
// THUMBNAIL HEIGHT
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.each(function() { $(this).height(tallest); });
}
$(document).ready(function() {
equalHeight($(".thumbnail"));
});
})(jQuery);
heres jsfiddle https://jsfiddle.net/nr2cc6LL/
Just call the function inside the resize method too like:
$(window).resize(function() {
equalHeight($(".thumbnail"));
});
Simple Demo
Related
It's pretty hard to replicate because I use this code on a wordpress site and everything together gets to this result, but I try to explain it as good as possible.
I just want to know if I use it wrong or if its "illegal" to do it like I did so it would break something for sure, or if just wordpress or some other code on there messes this up.
First I got the following code:
$(document).ready(function () {
let li = $('.wpb_image_grid_ul li').not('#studio_gallery .wpb_image_grid_ul li');
let width = li.outerWidth();
li.css('height', width);
});
It resizes images inside my li to be square. It is working, but as soon as the browser gets resized and a breakpoint changes the width of the image, the height will stay the same as it got set before.
So I put my code in a function and called it once in the $(document).ready(function () and once in the $(window).resize(function() like this:
$(document).ready(function () {
function gallery_fix () {
let li = $('.wpb_image_grid_ul li').not('#studio_gallery .wpb_image_grid_ul li');
let width = li.outerWidth();
li.css('height', width);
}
gallery_fix();
});
$(window).resize(function() {
gallery_fix();
});
But that breaks the site, when I resize the window the page isn't responsive anymore and most of the content overflows.
When I change the code to this and just duplicate everything instead of calling the function twice it's working.
$(document).ready(function () {
function gallery_fix () {
let li = $('.wpb_image_grid_ul li').not('#studio_gallery .wpb_image_grid_ul li');
let width = li.outerWidth();
li.css('height', width);
}
gallery_fix();
});
$(window).resize(function() {
let li = $('.wpb_image_grid_ul li').not('#studio_gallery .wpb_image_grid_ul li');
let width = li.outerWidth();
li.css('height', width);
});
What am I doing wrong? Is my code not in the correct syntax? Or am I missing something here?
Your gallery_fix function is declared inside your $(document).ready() function. So, you can only call the function from within. You can either:
place your $(window).resize() handler within the $(document).ready()
declare the gallery_fix function outside
I'm developing a wordpress theme that has a function of changing background image by hovering menu item(each menu item is attached different image). On mobile, I'd like to change background image just by scrolling so that viewers don't need to click each menu to change the background image.
This is the method I implemented to change background by hovering.
http://codepen.io/nummelin/pen/kzaso
// When any of the a's inside of sidebarContainer are hovered
$( ".sidebarContainer a" ).hover(function() {
// Removes all previous classes but keeps sidebar1
$('.sidebar1').removeClass().addClass('sidebar1');
// Splits up the URL on the current href
var URI = $(this).attr('href').split('/');
console.log(URI[2]);
// Applies the last part of the URL to sidebar1
$('.sidebar1').addClass(URI[2]);
});
Achieving with scrolling, I think I need a function that hovering menu item by its position like the image below.
Does anyone have any ideas how to achieve this? I've been exploring a plugin or sample code similar to this, but haven't found any...
Any advices would be appreciated.
Okay, so this is the code I wrote. Hope it helps. I've worked on cross-fading effect but it wasn't that easy. If someone tried please teach me how to do it.
Demo on Codepen:
http://codepen.io/bavavava/pen/rrNpaY
jQuery(function($){
'use strict';
$(document).ready(function(){
var elem = $('li.list-item'),
$listPosition = $.map(elem, function(el, i) { return $(el).offset().top; }),
$listURL = $.map(elem, function(el,i) { return $(el).find('a').attr('href'); }),
$bg = $('.container');
console.log($listPosition);
console.log($listURL);
//PRELOAD IMAGES
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
$($listURL).preload();
//SCROLL CHANGE
$(window).on('scroll', function () {
var windowScroll = $(this).scrollTop();
$.each($listPosition, function (i, pos) {
if (windowScroll >= pos) {
$bg.css('background', 'url(' + $listURL[i] + '), black no-repeat center center fixed');
}
});
});
});
});
I have this slider on my WP page, which is vertical. I would like to convert it so it his horizontal. As I understood I need to change my JS code.
jQuery(function($) {
var image_es;
var zoom_timer;
var win_width = 0;
function resize_venedor_thumbs() {
if (win_width != $(window).width()) {
if (image_es) {
image_es.destroy();
}
image_es = $('#thumbnails-slider-756').elastislide({
orientation : 'vertical',
minItems: 4
});
win_width = $(window).width();
}
if (zoom_timer) clearTimeout(zoom_timer);
}
$(window).load(resize_venedor_thumbs);
$(window).resize(function() {
clearTimeout(zoom_timer);
zoom_timer = setTimeout(resize_venedor_thumbs, 400);
});
});
I tried to change vertical to horizontal in inspect element mode but it did not change at all.
If you change the orientation to 'horizontal' in inspect element mode, you need to make sure the resize_venedor_thumbs function is called.
It looks like it is called on load or resize (try resize because loading will erase your edits); or you can call it in the console yourself resize_venedor_thumbs(); or, of course, edit the source and load the page.
My page content is dynamically created, I am trying to write a script that searches for all images in a container 'image-rounded', and if they are not square, change either the height or width to make them square (based on the size of the smallest edge).
Here is my script so far:
jQuery(function($) {
$('.wrapper-site').find('.image-rounded img').each(function () {
var round_image_width = $(this).width();
var round_image_height = $(this).height();
if(round_image_height > round_image_width) {
$(this).css('height', 'round_image_width');
} else {
$(this).css('width', 'round_image_height');
}
});
});
But currently this does nothing.
$(this).css('height', 'round_image_width');
should be
$(this).css('height', round_image_width);
Same for the height... Happens to the best of us :)
I have a function that I'm using to make a bunch of sibling divs have the same height. When the DOM is ready, I define it, call it, and then set it to be called whenever the window is resized.
jQuery(function($){
function rescaleStuff ( )
{
$('.children-have-equal-height').each(function(){
var children = $(this).children();
var numChildren = children.length;
if (numChildren > 1)
{
var firstChild = children.first();
var maxHeight = firstChild.height();
firstChild.siblings().each(function() {
var thisHeight = $(this).height();
if (thisHeight > maxHeight)
maxHeight = thisHeight;
});
children.height(maxHeight);
}
});
}
rescaleStuff();
$(window).resize(function()
{
rescaleStuff();
});
});
The function rescaleStuff is working awesomely when it is invoked by the resizing of the window, but it is not working correctly when the page loads. For some reason, it is calculating the heights as smaller than the actual heights. Why is that?
Also, it is possible to make my procedure any more compact, elegant, readable, efficient, clever and maintainable? I didn't think so. ;)
Use:
$( window ).load(function() {
....
});
If you have to calculate widths/heights, positions... ready() method is not sufficient. You have to wait until whole content (with images) is loaded, since content affect heights and widths.