jQuery functions not firing until you resize window - javascript

I have a Foundation Orbit image slider that doesn't show up until you resize the browser window. The space is empty until you even just change the window size by a pixel. Foundation is calculating the hight of the slider on the fly but when the page first loads there's no height set on the container.
I also have a nav bar that doesn't correct itself to its calculated width until I resize the window.
Here's the nav bar code:
Ew.ApplicationView = Ember.View.extend({
didInsertElement: function() {
$(".nav").width($(window).width() - 406);
$(".subnav").width($(window).width() - 396);
return $(window).resize(function() {
$(".nav").width($(window).width() - 406);
return $(".subnav").width($(window).width() - 396);
});
}
});
And the slider initialization code:
Ew.OrbitSliderComponent = Ember.Component.extend({
initOrbit: function() {
$(document).foundation('orbit', {
stack_on_small: true;
navigation_arrows: false;
variable_height: true;
});
}.on('didInsertElement')
});
What causes jQuery functions to not fire until the window resizes?

A simple trick would be chaining the .resize() function twice:
return $(window).resize(function() {
$(".nav").width($(window).width() - 406);
return $(".subnav").width($(window).width() - 396);
}).resize(); // Resize() onload
You can see the difference between without chaining (http://jsfiddle.net/teddyrised/2x42Q/2/) and with chaining (http://jsfiddle.net/teddyrised/2x42Q/1)

I do not understand fully why this is happening, but it seems it has to do with the size .nav and .subnavright? I think that the initial sizing of this elements occurs too early. Plz try the following:
Ew.ApplicationView = Ember.View.extend({
didInsertElement: function() {
Ember.run.scheduleOnce('afterRender', this, function(){
$(".nav").width($(window).width() - 406);
$(".subnav").width($(window).width() - 396);
return $(window).resize(function() {
$(".nav").width($(window).width() - 406);
return $(".subnav").width($(window).width() - 396);
});
}
}
});
This makes your logic run after all rendering stuff has been performed by Ember. Actually didInsertElement just guarantees to be executed when the root element of the given view is there. The child elements or child views do not have to be there! Have a look at my blog for an explanation and a more elegant approach to avoid this unattractive nesting in the code.

Could it be the parts that are saying:
return $(window).resize(function() {
What if instead of $(window).resize it was $(document).load ?
From jQuery documentation:
/*The load event is sent to an element when it and all sub-elements have been
completely loaded. This event can be sent to any element associated with a
URL: images, scripts, frames, iframes, and the window object.*/

Related

Detecting weather user scrolls the bottom of the div or not in react js and javascript

I want to implement infinite scrolling in the table, so I am calculating div height in one possible way, you can see below
let fixedCh = e.target.clientHeight;
let calCh = e.target.scrollHeight - e.target.scrollTop;
if (fixedCh === calCh) {
alert('load more');
}
In this approach,calCh is varied from different resolutions. Is there any other way of doing this, so that it can work through all kind of browser and screen resolution
Your approach is good; you need to call your function initially when the user loads the page to check if the user's screen resolution is already to the end of the scroll, call "alert('load more')".
The problem is that for some users, based on their screen, the scrollbar will not be visible to scroll, so your event of scroll won't check the element. To fix this, as I said above, you need to initially load your screen check function when the "Dom is ready".
Here is the basic implementation:
function loadMore (e) {
let fixedCh = e.clientHeight;
let calCh = e.scrollHeight - e.scrollTop;
if (fixedCh === calCh) {
alert('load more');
}
}
// listen on scroll and check target element fixedCh === calCh
function listenOnScroll() {
document.getElementById('app').addEventListener('scroll', (e) => {
loadMore(e.target)
})
},
window.onload = (event) => {
loadMore(document.getElementById('app').target)
};
I will call the function "loadMore" when the dom is ready or loaded and pass the targetted Dom element.
Later, I'll call the "listenOnScroll" function to listen on the target element scroll and then call the "loadMore" function from it.

window width only showing when resizing viewport, not on load - jquery

Trying to get viewport width on page load and when resizing browser window. For some reason the width isn't being outputted on page load. Any idea what the issue is and/or how to resolve?
function mobileViewUpdate() {
var viewportWidth = $(window).width();
console.log(viewportWidth);
if (viewportWidth > 776) {
$("area[data-toggle]").click(function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$(".detail-box").hide();
$(".detail-box"+selector).show().addClass('animated fadeIn');
});
}
}
$(window).on('load, resize', mobileViewUpdate);
There is no need of , as separator. Separation by space will work . Please refer this link for more informaton
$(window).on('load resize', mobileViewUpdate);
I guess you are calling this function within a ready function, in that case window has already loaded and so the window load event has already been called.
Attaching the load event handler at that point will never be called.

How do I stop a JQuery function from being called after conditions for an if else statement are reevaluated?

I'm trying to create a mobile layout for my site, and I'm having trouble with the menu portion. All of my CSS works, and I've narrowed the problem down to my JQuery, specifically this:
var mobileNav = function(){
if($(window).width() < 751){
$('#mobile_nav').hide();
toggleNav();
} else {
$('#mobile_nav').show();
}
};
var toggleNav = function(){
$('#page_nav_bar').toggle(function(){
$('#mobile_nav').show();
}, function(){
$('#mobile_nav').hide();
});
};
mobileNav();
$(window).resize(mobileNav);
For some reason when I resize my browser from under 751 to a larger size, the toggleNav() function doesn't stop. Even if my browser is larger than 751 after I've resized it, when I try to click the #page_nav_bar element it toggles show/hide. The other functions (hide the element when the browser is small, show it when it's large) work fine, but I can't figure out how to get toggleNav() to stop after the window is larger than when it was originally called.
I'm sorry if this is a simple fix. I'm relatively new to JQuery and I've been trying to figure this out for days. I've tried .on/.off to the best of my ability, toggle .noop after the else, and tried rearranging everything (originally it was all one chunk of code under the mobileNav variable).
Any help is appreciated. Thanks in advance!
I'm sorry this took me so long to spot, but no errors were being thrown so I didn't think much of it, but the function signature for .toggle() is actually
.toggle( [duration ] [, complete ] )
However, you are using it more like hover passing in two functions as such:
$('#page_nav_bar').toggle(function(){
$('#mobile_nav').show();
}, function(){
$('#mobile_nav').hide();
});
Since no animation is actually taking place and it wasn't mentioned in the question, I'm assuming that you are not concerned with slow fade ins/outs. If this is the case, you can simplify your code more like the following:
// NOTE: Try to only create jQuery objects once and reuse them
$window = $(window);
$mobile_nav = $("#mobile_nav");
var mobileNav = function() {
if ($window.width() < 751) {
$mobile_nav.hide();
} else {
$mobile_nav.show();
}
};
mobileNav();
$(window).resize(mobileNav);
I hope this is more what you are looking for.
Demo: JSbin
This is probably due to a race, you call the function everytime the resize event is dispatched by the window (that mean a lots of time during resizing). Then toggleNav(); at line4 is executed everytime as well. Sometime the DOM didnt refreshed its state that window resize callback function is called again and cause the issue you describe, to avoid this problem, i suggest you do the following:
resizeTimeout = null; //timeOut Timer Reference
$(document).ready(function(){ //called when Dom is ready (start up function)
$(window).resize(function(){
if(!resizeTimeout) //if there is no timeOut initialized
resizeTimeout = setTimeout(function(){ //execute this anomymous function avec 100 milliseconds
mobileNav();
resizeTimeout = null;
},100);
})
mobileNav();
});
I use a setTimeout within the callback function of window.resize is for the following reason:
It avoid calling the function ToogleNav on each resize callback (minor optimization)
It ensure to be executed after the DOM have been refreshed its state
you could solve this easily using css:
#mobile_nav,
#mobile_nav.hidden{ display: none; } /* Hidden by default (mobile first) */
#mobile_nav.visible{ display: block } /* Visible by default only when using class="visible" */
#media (min-width: 751px ) {
#mobile_nav { display:block; } /* Visible by default only when the width is >= 751px */
#mobile_nav.hidden{ display: none; }
#mobile_nav.visible{ display: block } class="visible" */
}

document.height not affected by jquery calls.

I have already followed instructions on how to make a specific div height take up the entire document. I created the following function, which works perfectly when the page is first loaded.
function resizeBody() {
$(document).ready(function () {
$(window).resize(function() {
$('.body').height((document).height - $(".topbar").height() - 30);
});
$(window).resize();
console.log(document.height);
});
};
In another section of my code, I am hiding and showing divs using jquery to create tabs. These tabs are all of different heights. The code is as follows:
$(document).ready(function() {
$(".tab").click(function () {
$(".tab_content").hide();
$(".tab").css("font-weight","normal");
resizeBody();
});
$("#infoButton").click(function() {
$("#info").show();
$("#infoButton").css("font-weight", "bold");
});
$("#toolsButton").click(function () {
$("#tools").show();
$("#toolsButton").css("font-weight", "bold");
});
$("#dataButton").click(function () {
$("#data").show();
$("#dataButton").css("font-weight", "bold");
});
$("#visButton").click(function () {
$("#vis").css('display','inline-block');
$("#visButton").css("font-weight", "bold");
});
resizeBody();
});
My problem is that when I hide or show a div, the properties of the document aren't updated. Calling console.log(document.height) in the resizeBody() function still prints the original height of the document. Oddly, when I type "document.height" directly into the developer console, the correct (resized) value is printed.
Additionally, after opening the developer console, the page seems to update (without any kind of refresh) and the body div is correctly resized.
What am I missing here? Is this a problem specific to Chrome or am I misunderstanding something fundamental about the way javascript deals with the document object.
It may be important to note that all of my divs use inline-block as their display style. Each div gives a specific value for it's height in the web inspector.

cannot get jscrollpane api for dynamic size to work

I have been experimenting with jscrollpane to add custom scrollbars to some content. The data is being pulled in via ajax and the jscrollpane api works nicely for that.
But I'm trying to make the scrollpane have a height that is always, say, 70% of the height of the users browser window. The jscrollpane site says that I can use the following code to make it work, but i'm having no luck.
$(function () {
$('.scroll-pane').each(
function () {
$(this).jScrollPane({
showArrows: $(this).is('.arrow')
});
var api = $(this).data('jsp');
var throttleTimeout;
$(window).bind('resize', function () {
if ($.browser.msie) {
// IE fires multiple resize events while you are dragging the browser window which
// causes it to crash if you try to update the scrollpane on every one. So we need
// to throttle it to fire a maximum of once every 50 milliseconds...
if (!throttleTimeout) {
throttleTimeout = setTimeout(
function () {
api.reinitialise();
throttleTimeout = null;
}, 50);
}
} else {
api.reinitialise();
}
});
})
});
When I change the css to a percentage, the custom scrollbar fails entirely, and I get a default chrome scrollbar that is 100% of the height of the window.
http://jsfiddle.net/loren_hibbard/2yEsG/
Thank you very much!
It appears that there is some compatibility problem with the api for resize and jsfiddle. jscrollpane continues to be an amazing extension. thanks.

Categories