Skrollr destroy canceling out height 100% on body - javascript

Ok so I am using bootstrap 3 and skrollr.js and I have a fullscreen hero unit at the top of my page, which has a simple skrollr parallax effect on it. I also have some js which "activates" and "destroys" skrollr at 768 width. This works fine, but when I size the browser window down the height:100% just is not applied to the body for some reason.
I believe the issue is somewhere within my js for skrollr which is:
$(function () {
// initialize skrollr if the window width is large enough
if ($(window).width() > 768) {
skrollr.init({forceHeight: false,smoothScrolling: true, smoothScrollingDuration: 1500});
}
// disable skrollr if the window is resized below 768px wide
$(window).on('resize', function () {
if ($(window).width() <= 768) {
skrollr.init().destroy(); // skrollr.init() returns the singleton created above
}
});
});
I have tried adjusting the js in various way and still have not found a solution, I am currently looking for different ways to disable skrollr on touch devices.
You can view the js fiddle here.
If you size the window down to mobile size you will see the hero unit get smaller and not fullscreen. But if you refresh it works fine, anyone have any ideas?

I fixed this by adding !important to height:100%; on the body and html tag.
And also changing my start-skrollr.js to:
$(function () {
if ($(window).width() > 767) {
skrollr.init({forceHeight: false,smoothScrolling: true, smoothScrollingDuration: 1500});
}
});
The last part of my .js file was not needed.

Related

How to Dynamically Update outerHeight of An Element When Another Element Changes in Height on Window Resize?

Bit of a jquery / javascript noob question here. I have a subnav element that I am sticking to the bottom of my primary nav once someone hits a certain scroll point. To do that, I'm offsetting the subnav element by the height of the main nav element, as shown below.
$(function() {
$('.sticky-nav').stickybits({
useStickyClasses: true,
stickyBitStickyOffset: $('.navbar-fixed-top').outerHeight(),
});
});
The problem that I'm running into is '.navbar-fixed-top' has a different height at mobile / tablet and desktop sizes (the height changes at 992px) and the offset gets messed up if someone resizes the screen (i.e., if they start at desktop, and then resize to mobile / tablet, there's too much space above the subnav because the main nav was taller in desktop).
My question is, how can I update the code above to dynamically update the outerHeight when the height of the .navbar-fixed-top element changes?
I tried the code below, inspired by the answer to this question: Resize element width on window resize jquery, but it's not working
$(function() {
var topNavHeight = $('.navbar-fixed-top').outerHeight();
$(window).on('resize', function(event) {
var topNavHeight = $('.navbar-fixed-top').outerHeight();
});
$('.sticky-nav').stickybits({
useStickyClasses: true,
stickyBitStickyOffset: topNavHeight,
});
});
Thanks!
I think this will work:
$(function() {
let stickything;
function set_sticky() {
if (stickything) {
stickything.cleanup();
}
stickything = $('.sticky-nav').stickybits({
useStickyClasses: true,
stickyBitStickyOffset: $('.navbar-fixed-top').outerHeight(),
});
}
$(window).on('resize', set_sticky);
set_sticky();
});
Just changing a variable isn't enough, you have to tell stickbits to update. There doesn't seem be a way to update the offset so this just reinitializes it.

Stop window resizing below 768px

I want the entire page(window) to stop resizing below 768px and there should not be any horizontal scroll below 768px. Is there any way to do that?
The browser / window is in the user's control and is dependent on the device also.
Using CSS you can set a minimum width of your page using:
min-width:768px;
However when the user resizes the browser to below this stage, you will see scrollbars appear. You site will no longer resize and get smaller, but the user will need to scroll left and right to see the full content of your page.
As mentioned below, you can hide the scrollbars with
overflow:hidden;
Or to target a specific scrollbar:
overflow-x:hidden;
overflow-y:hidden;
However, the user will still need to scroll sideways to see your full content...
You can't control the size of the window. You can use CSS to set min-width and min-height properties to ensure your page layout stays sane.
If you want to get the size of the window you can do it like this:
var wid = $(window).width();
if(wid> 768){
// something
}
Bind window resize events using resize event
$(window).on('resize', function(event){
//here goes the magic
});
Using Jquery
$(document).ready(function(){
if($(window).width() < 768){
//do something
}
});
Using CSS
#media only screen and (max-width:768px)
{
/*do something*/
}

window.resize not on scrolling

i have a jQuery code that slide/toggles the navigation. After that I reset the style-attribute in the HTML, with window.resize, so that the Navigation will appear, if the browser-window is resized. The code for that is here:
$(window).resize(function(){
$("nav").removeAttr('style');
$(".level_2").removeAttr('style');
$(".menu-expander").removeClass('close');
});
Now I have the problem, that the navigation is displayed off, when I scroll down on the smartphone or change from the portrait-view to landscape, e.g. when I have a long navigation.
Is there a possibilty to check, if there was just changed the view or was scrolled on the page, so that the window.resize could just appear when the browserwindow is resized?
PS: Here is the code on Codepen: http://codepen.io/Sukrams/pen/NxQoYr
I found a solution: I set a variable for the width and put it into an if:
$(window).resize(function(){
var width = $(window).width();
if(width > 700) {
$("nav").removeAttr('style');
$(".level_2").removeAttr('style');
$(".menu-expander").removeClass('close');
}
});

iOS 8 glitch effecting window resize

I've got some very simple code:
$(function() {
$(window).resize(function () {
if ($(window).width() < 500) {
$("#foo").show(); $("#foo2").hide();
} else if ($(window).width() > 501) {
$("#foo2").show(); $("#foo").hide();
}
}).resize();
});
All was working fine on desktop (all major browsers) and mobile (as many as I could test), till iOS 8 came out. Now when a users scrolls in Safari the javascript falls back to 'else if', creating 'foo2' and hiding 'foo' despite the browser not resizing. This is for a menu, as such the menu closes if the user scrolls which shouldn't be happening.
If I remove the window resize function all works as it should, however the menu doesn't update in real time if the user resizes the browser window.
Is there an alternative to window resize I can use to achieve the same effect?
...so, considering I get the problem as you describe it, you can avoid javascript and do it using pure css and media queries:
#media (max-width:500px) {
#foo {
display:block;
}
#foo2 {
display:none;
}
}
#media (min-width:501px) {
#foo2 {
display:block;
}
#foo {
display:none;
}
}
edit: ..this will definately have nothing to do with scrolling and will certainly be faster and cleaner
This might be a little late, but I'd store the width of the window on load and then check against that on the resize to ensure an actual resize took place horizontally. That would ensure that the code only fired when the browser changed size on the x axis.
var windowWidth = $(window).width();
$(window).resize(function(){
if (windowWidth !== $(window).width())
{
windowWidth = $(window).width();
// rest of your code goes here
}
});
Remember that the resize event could fire quite a lot while someone is resizing, so you may want to limit the whole thing using setInterval, but that's a separate discussion.

different javascript/jQuery function by screen orientation on mobile AND browser

Disclaimer: I am not a javascript or jQuery expert.
This is probably an easy problem to solve, as it's just a small fix I can't figure out. I am implementing a site that is horizontal if the browser is in landscape mode, and vertical if in portrait. CSS changes are not an issue as that is easy with media queries. The problem I run into is when I want to only run a specific script when the screen is in landscape mode. Next problem I run into is that I don't just want this to work on mobile, but I also want it to be responsive in a standard browser as well; i.e. detect when the screen width > screen height and run said script. Here is my code so far:
var height = $(window).height();
var width = $(window).width();
if (width > height) {
//run landscape script
} else {
//run portrait script
};
This is working just fine to detect orientation when the page loads, but it doesn't change when the screen is resized since the script is not bound to window.resize. That being said, it is also not working when I bind it to window.resize.
Is there a better way to go about this? Or do I just need to fix up what is already here?
In case somebody else runs into this problem in the future, I'll post what solved my problem.
When I attempted to add the resize event to the function, my code looked like this:
$(window).on('resize', function() {
var height = $(window).height();
var width = $(window).width();
if (width > height) {
//run landscape script
} else {
//run portrait script
};
)};
This worked just fine, but it did not appear that way because the script was only being fired when the browser resized. While this is essential, the script also needs to fire when the page loads. My solution was just to add 'load' to the event:
$(window).on('resize load', function() {
var height = $(window).height();
var width = $(window).width();
if (width > height) {
//run landscape script
} else {
//run portrait script
};
)};

Categories

Resources