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*/
}
Related
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.
I have a .navbar.navbar-inverse.navbar-fixed-top navigation bar that always stays on top of the page. I have given the body a padding of 70 px and this works well with it.
The problem is if I resize the browser, then the nav-bar is no longer nice and neat with a fixed height. Instead it wraps all the items in it, the height of the nav bar becomes more than 70 px and covers parts of the page.
To fix this, I tried using JQuery to check the height of the nav bar and give body more padding, I put this in document.ready()
if ($(".navbar.navbar-inverse.navbar-fixed-top").height() > 100) {
$("html, body").css("padding-top", "150px");
}
However, this solution does not work because the browser is not reloaded when its size shrinks so therefore this check does not happen dynamically. So how do I fix this?
You can use the window resize event listener here. Something like this:
$( window ).resize(function() {
if ($(".navbar.navbar-inverse.navbar-fixed-top").height() > 100) {
$("html, body").css("padding-top", "150px");
}
});
Additionally you could also go the Bootstrap way and collapse and expand the Navbar into a button, depending on screen resolution. The above approach is slightly less than ideal IMO
I have a slideshow on my home page that uses images in a landscape orientation. However, when the browser is resized, the images eventually get clipped. To prevent this, I want to swap the landscape-oriented images to square ones when the browser reaches a certain pixel width. But it must switch back when expanded again. How would I go about this?
jQuery provides this resize event, And you can use it like,
$(function() {
$(window).resize(function() {
var width = $(window).width();
var height = $(window).height();
$('yourimage').attr('src', toAnotherSource);
// or you can do anything with the image here.
});
});
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');
}
});
so I've made a responsive menu that looks like the smartphone's menu (the one that slides from the side, Im not sure how it is called), and its toggler(which is an Anchor) is shown only when the screen is smaller than 960px using #media screen and (max-width: 960px).
now to toggle the menu i use a JQ's .toggleClass to add a class to the body as shown here:
$(document).ready(function(){
$('.btn-mobile-nav').click(function(e){
e.preventDefault();
$('body').toggleClass('mobile-slide-nav');
});
});
Now the problem is that when i stretch the window back to a bigger size than 960px after I open the menu the toggler disappears and the class that it added('.mobile-slide-nav') remains in the body element....
So... How do i fix it? any ideas?
And sorry about the bad english :)
$(window).resize(function(){
console.log('resize called');
var width = $(window).width();
if(width > 960){
$('body').removeClass('mobile-slide-nav');
}
})
.resize();//trigger the resize event on page load.
src:- https://stackoverflow.com/a/8943979/1632286