I wrote a function that's supposed to fire when the page first loads, and when a user resizes the window. It works fine when the page loads, but it doesn't work when the user resizes the window. What's weird is that if I put an alert inside the function, that alert shows up when the window gets resized, but the rest of the function doesn't fire. I'm not seeing any error's in Chrome's console. I've tried changing it to $(document).resize(), $("body").resize(), and $(".pricingHeader").resize(), and nothing's worked. This makes no sense to me.
function getTallest() {
var tallest = 0;
$(".pricingHeader").not(".features .pricingHeader").each(function(){
tallest = $(this).height() > tallest?$(this).height():tallest;
});
$(".pricingHeader").not(".features .pricingHeader").height(tallest);
$(".features .pricingHeader").height(tallest + 8);
}
$(document).ready(function() {
getTallest();
});
$(window).resize(function() {
getTallest();
});
Try :
function getTallest() {
var tallest = 0;
$(".pricingHeader").not(".features .pricingHeader").each(function(i, elem){
if ( $(elem).height() > tallest ) tallest = $(elem).height();
});
$(".pricingHeader").height(function() {
var add = $(this).closest('.features').length ? 8 : 0;
return tallest+add;
});
}
$(function() {
$(window).on('resize', getTallest).trigger('resize');
});
Alright, I figured out what the problem was. I was setting the height of every .pricingHeader to a fixed height, which was preventing the tallest from resizing on window resize. Here's the fixed script:
function getTallest() {
var tallest = 0;
$(".pricingHeader").not(".features .pricingHeader").each(function(){
$(this).css({height:"auto"});
tallest = $(this).height() > tallest?$(this).height():tallest;
});
$(".pricingHeader").each(function() {
$(".pricingHeader").not(".features .pricingHeader").height(tallest);
$(".features .pricingHeader").height(tallest + 8);
});
}
$(document).ready(function() {
getTallest();
});
$(window).resize(function() {
getTallest();
});
Related
I am using the code snippet below within the body of a WordPress page, that is built using the page builder Elementor. I am using a tabs element and I am trying to make sure that the first tab is open on 768px and up but closed on 768px and below. The script below closes the tab element perfectly, but it closes all the time, how can I make sure that it only works at 768px and below?
<script>
jQuery(document).ready(function($) {
var delay = 10; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
$('.elementor-tab-content').css('display', 'none'); }, delay);
});
</script>
Returns width of browser viewport $( window ).width();
if ( jQuery(window).width() <= 768 ){
//do what ever
}
so you do like that:
jQuery(document).ready(function($) {
if ( jQuery(window).width() <= 768 ){
var delay = 10;
setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
$('.elementor-tab-content').css('display', 'none');
}, delay);
}
});
You can calculate the the viewport width:
const vw = jQuery(window).width();
Then,
if(vw >= 768) {
var delay = 10; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
$('.elementor-tab-content').css('display', 'none'); }, delay);
});
}
At Elementor you can get the device type ("mobile", "tablet", "desktop") by a data attribute of the body with:
jQuery( 'body' ).data( 'elementor-device-mode' )
I have a codepen here -
http://codepen.io/ashconnolly/pen/EjMbQp
function homepanelHeights() {
$('.img_panel').each(function() {
if (currentWidth < 700) {
var panelcopyHeight = $(this).find('.panel_copy_inner').outerHeight();
console.log(panelcopyHeight);
$(this).css('height', panelcopyHeight);
} else {
// remove inline style
$(this).css("height", "");
}
});
}
$(document).ready(function() {
$('.img_panel').each(homepanelHeights);
});
$(window).resize(function() {
$('.img_panel').each(homepanelHeights);
});
I want to apply a function to each element with .img_panel.
Do you know why the each function call is not working?
I assume its because of the arguments I'm passing, but can not work it out.
it works if I simply repeat the function in the doc.ready and window.resize, but that is a bit dirty..
Hope you can help!
You just need to call homepanelHeights(); Because when you using $('.img_panel').each(...) in homepanelHeights, you're already iterating through it, $('.img_panel').each(homepanelHeights);, combine with the logic inside the function, can be considered as:
// This is the outer
$('.img_panel').each(function() {
// This is inside your homepanelHeights
$('.img_panel').each(function() {
// Do something.
});
});
So you can see that that the logic n*n times.
currentWidth is undefined in your codepen. Added a fake to show.
function homepanelHeights(){
$('.img_panel').each(function (){
// VVVV Make the `currentWidth` get value here, it needs the current width
// when window content is fully loaded, or resized.
var currentWidth = $(window).width();
if (currentWidth < 700){
var panelcopyHeight = $(this).find('.panel_copy_inner').outerHeight();
console.log(panelcopyHeight);
$(this).css('height', panelcopyHeight);
} else {
// remove inline style
$(this).css("height", "");
}
});
}
// As A. Wolff said :
// $(window).on('load resize', homepanelHeights); Can simplify the code.
$(document).ready(function() {
homepanelHeights();
});
$(window).resize(function() {
homepanelHeights();
});
.img_panel {background:salmon; width:200px; height:300px; margin-bottom:10px; display:table;
.panel_copy_inner {height:100%; display: table-cell; vertical-align:middle; text-align: center;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="img_panel">
<div class="panel_copy_inner">Test</div>
</div>
<div class="img_panel">
<div class="panel_copy_inner">Test</div>
</div>
<div class="img_panel">
<div class="panel_copy_inner">Test</div>
</div>
If you want to use the function homepanelHeights as $('.img_panel').each(homepanelHeights);
You can rewrite the logic to:
var currentWidth;
// You need to either define a `currentWidth` here by something.
function homepanelHeights(){
if (currentWidth < 700){
var panelcopyHeight = $(this).find('.panel_copy_inner').outerHeight();
console.log(panelcopyHeight);
$(this).css('height', panelcopyHeight);
} else {
// remove inline style
$(this).css("height", "");
}
}
// As A. Wolff said :
$(window).on('load resize', function() {
// Update the width here. So you don't need to get currentWidth
// each time you operate on an element.
currentWidth = $(window).width();
$('.img_panel').each(homepanelHeights);
});
Demo is on jsfiddle.
Here i have modified the code to achieve the functionality for each element.
Please see the code below.
homepanelHeights=function(key, val) {
var currentWidth = $(window).width();
console.log(currentWidth);
if (currentWidth < 700) {
var panelcopyHeight = $(this).find('.panel_copy_inner').outerHeight();
//console.log(panelcopyHeight);
$(this).css('height', panelcopyHeight);
} else {
// remove inline style
$(this).css("height", "");
}
}
/**/
$(document).ready(function() {
$('.img_panel').each(homepanelHeights);
});
$(window).resize(function() {
$('.img_panel').each(homepanelHeights);
});
function homepanelHeights(){
//This will iterate through all element having img_panel class
$('.img_panel').each(function(){
//get current div's height
var currentWidth = //assign some value here, it is undefined in your current code;
// your logic implemetation
if (currentWidth < 700)
{
var panelcopyHeight = $(this).find('.panel_copy_inner').outerHeight();
console.log(panelcopyHeight);
$(this).css('height', panelcopyHeight);
}
else {
$(this).css("height", "");
}
})
}
// on window load && resize
$(window).on('load resize',function() {
homepanelHeights();
});
//Or instead of window on load you can also use document's ready event
$(document).ready(function() {
homepanelHeights();
});
document.ready runs when the DOM is ready, e.g. all elements are there to be found/used, but not necessarily all the content.
window.onload fires later (or at the same time in the worst/failing cases) when images and such are loaded. So, if you're using image dimensions for example, you often want to use this instead
I found a solution that didn't work mainly that I want. Here it is:
topic url
and this solution works for me:
if(pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top)
{
$('#date').html($(this).find('.description').text());
return;
}
jsfiddle
but I want to change content description in gray box more smooth. I've tried to give animation in CSS for it, but it didn't work.
I modified your script a bit to detect when the text changes and when that happens I apply a small animation with jQuery. I set the opacity to a low value, e.g. opacity:0.4 and then make a quick animation back to opacity:1.
This will help your user to see easier the change in the text.
$(window).load(function () {
$(window).on('scroll resize', function () {
var pos = $('#date').offset();
$('.post').each(function () {
if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
var newDescr = $(this).find('.description').text();
var oldDescr = $('#date').html();
$('#date').html(newDescr);
if(newDescr !== oldDescr) {
$('#date').css('opacity', 0.4).animate({ 'opacity': '1',}, 200);
return;
}
}
});
});
$(document).ready(function () {
$(window).trigger('scroll'); // init the value
});
});
Demo here
I am trying to learn how to pass one value within a window resize event, to a function, but I do not know what I am doing wrong. Basically everytime the window resizes, I want the scrollHeight to go to another function where I can view that value on click.
$(window).on('resize', function(){
var mheight = $('#wrapper')[0].scrollHeight;
smoothscroll(mheight);
});
function smoothscroll(mvalue) {
$mheight = this.mvalue;
if ($mheight < 3000) {
$(selector).on('click',function() {
console.log('show me my latest scroll height value for larger screens' + $mheight);
});
} else {
console.log('show me my current scroll height value for smaller screens' + $mheight);
}
}
...but for some reason my value always comes up as undefined...
Change
function smoothscroll(mvalue) {
$mheight = this.mvalue;
....
}
To
function smoothscroll(mvalue) {
$mheight = mvalue; // you don't need `this`, cause mvalue has passed by argument
....
}
Actually you can use mvalue directly without cache it to $mheight.
Complete code:
$(window).on('resize', function () {
var mheight = $('#wrapper')[0].scrollHeight;
smoothscroll(mheight);
});
function smoothscroll(mvalue) {
if (mvalue < 3000) {
$(selector).on('click', function () {
console.log('show me my latest scroll height value for larger screens' + mvalue);
});
} else {
console.log('show me my current scroll height value for smaller screens' + mvalue);
}
}
im trying to get my bootstrap dropdowns to be open by default at screens at or smaller than 600px (mobile).
this seems to get it to try but it looks like something overrides it and closes it again:
<script type="text/javascript">
$(window).load(function () {
var width = $(window).width();
if (width >= 0 && width <= 600) {
$('#openBrowseMobile').addClass('open');
}
else {
$('#openBrowseMobile').removeClass('open');
}
})
.load();
</script>
any ideas on how to make this work?
I can get it to work on resize with this, but i need it to work on pageload/doc ready..
<script type="text/javascript">
$(window).resize(function () {
console.log('resize called');
var width = $(window).width();
if (width >= 0 && width <= 600) {
$('#openBrowseMobile').addClass('open');
}
else {
$('#openBrowseMobile').removeClass('open');
}
})
.resize();
</script>
You can move them into the same handler, by triggering on multiple events.
<script type="text/javascript">
$(window).on('load resize',function () {
console.log('resize called');
var width = $(window).width();
if (width >= 0 && width <= 600) {
$('#openBrowseMobile').addClass('open');
}
else {
$('#openBrowseMobile').removeClass('open');
}
});
</script>
I had the same issue,
here is another approach using jquery that doesn't involve messing with less code or css.
I just added a trigger to open the dropdown menu inmediately after menu is opened.
There's a timeout that waits until the main menu is opened.
(there will be 100 ms delay until dropdown is opened), If you like it to don't wait I guess that can be changed in less.
$(".navbar-toggle").click(function() {
if (window.matchMedia("(max-width: 768px)").matches) {
// on mobile, dropdown default opened:
setTimeout(function() {
$(".dropdown-toggle").click();
}, 100);
}
});