I want make a screen width judge, when screen width is bigger than 1024px, the body scroll bar will hidden, else when screen width is smaller than 1024px the body scroll bar will show its scroll.
See code in
http://jsfiddle.net/xmJzU/ (overflow-x)
http://jsfiddle.net/xmJzU/1/ (overflowX)
And test in
http://jsfiddle.net/xmJzU/show
http://jsfiddle.net/xmJzU/1/show
However when I dragged my browser edge, adjuce screen width smaller than 1024px, there have no scroll bar appear. Thanks.
It works, you just need to also declare the width variable inside your resize handler as the global variable is not in its' scope.
jQuery(document).ready(function() {
var width = $(window).width();
if (width < 1025) {
$('body').css('overflow-x', 'scroll');
} else {
$('body').css('overflow-x', 'hidden');
}
$(window).bind('resize', function() {
var width = $(window).width();
if (width < 1025) {
$('body').css('overflow-x', 'scroll');
} else {
$('body').css('overflow-x', 'hidden');
}
});
});
Example fiddle
An alternative method to using javascript for this is to use CSS3 Media Queries, but obviously this is dependant on the min-browser spec requirements you have.
Try using this css:
body {
width:100%;
min-width:200px;
overflow-x:hidden;
}
Related
There are tonnes of tutorials / examples of making a header stick on scroll for fixed height headers. However, I am working on a one page website and the initial section is a full screen image. The user then scrolls down to reveal the header and other content areas.
So my question is, how can I change my code to take into account the viewport / screen size - rather than use a fixed header size?
My existing code is:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 65) {
$(".main").addClass("sticky");
} else {
$(".main").removeClass("sticky");
}
});
You could use the height of the window instead of a fixed value (since you're talking about a full screen image, I'm guessing its height is equal to the window height):
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= $(window).height()) {
$(".main").addClass("sticky");
} else {
$(".main").removeClass("sticky");
}
});
You could also get the height of the first section, if it's smaller than the window
I don't know if there's a better solution, but here's my solution :
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= $(window).height()*0.2) { //0.2 for 20% of the viewport height, you can change this value if you need to
$(".main").addClass("sticky");
} else {
$(".main").removeClass("sticky");
}
});
I just used $(window).height() to get the viewport height.
I am trying to implement a full height slideshow on my website. However, I would like the slideshow to be full height if the browser width is more than 767px.
This is my code so far:
if( $(window).width() > 767) {
$(window).resize(function() {
var winHeight = $(window).height();
var headerHeight = $(".navbar").height();
$('.slideshow, .slideshow li').height(winHeight);
});
$(window).trigger('resize');
}
It kinda works if I the browser starts on a width greater than 767. However. If if the browser starts on a width less than 767 and I start resizing more than 767, the script does not starts.
Any ideas how I could fix this?
The resize event handler is bound when your browser starts up only when width > 767, try removing the if condition and it should work fine
EDIT:
To make it apply only when it's width is > 767, the condition should be inside the resize event
$(window).resize(function() {
if($(window).width() > 767) {
var winHeight = $(window).height();
var headerHeight = $(".navbar").height();
$('.slideshow, .slideshow li').height(winHeight);
} else {
$('.slideshow, .slideshow li').height(400); //initial height
}
});
$(window).trigger('resize');
You should be able to do this much more easily in css with a media query.
#media (min-width:500px){
.slideshow{
height:100%;
}
}
I want fixed an div or image in left of html page, and when scroll y, image scroll, but when scroll x image not scroll or fixed in left, I use jquery.sticky-kit.js and jquery-scrolltofixed.js plugin but when page resize to small width (mobile size) scroll x that, note that my page not responsive.
Another note that a mootools plugin is that work well, but I want do this in jquery.
Mootools plugin is in this link: http://demo.rickyh.co.uk/css-position-x-and-position-y/
HTML:
<div id="content"></div>
CSS:
#content {
width:50px;
height:50px;
background:#ccc;
position:fixed;
top:50px;
left:50px;
}
jQuery:
$(window).scroll(function () {
var content = $("#content");
var windowWidth = $(window).width()
content.css("top",-$(window).scrollTop() + 50) // 50 is initial top position
// if the window width is smaller than 600px - scroll also x-asis
if (windowWidth < 600) {
content.css("left",-$(window).scrollLeft() + 50) // 50 is initial left position
} else {
content.css("left", "50px") // 50 is initial top position
}
});
Fiddle: http://jsfiddle.net/n4we5xma/3/
Use CSS position property : horizontal fixed ,vertical relative
.scroll_fixed {
position:absolute;
}
See a working example
I able to set a div height as min-window height but can't set max-height as windowHeight similar way. Here is the code
$(document).ready(function() {
function setHeight() {
windowHeight = $(window).innerHeight();
$('.sidebar').css('min-height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
});
You don't need javascript nowadays to do that. Pure CSS is sufficient (and just height would be enough as well since you want to set min-height and max-height to the same value):
.sidebar {
height: 100vh;
}
vh is a relative unit referring to the height of the viewport. And it even works when resizing the window. Btw, same goes for vw which is the width of the viewport.
More information on the set of relative units and its browser support (as proposed by comments).
If you want both the min-height and max-height to be the size of the window why dont you just forgo the mins and maxs and just set the height itself?? You are pretty much bang on with your code however I would structure it a little differently. Are you loading the jQuery library?
$(document).ready(function() {
setHeight();
});
$(window).resize(function() {
setHeight();
});
function setHeight() {
windowHeight = $(window).innerHeight();
$('.sidebar').css('height', windowHeight);
console.log(windowHeight);
}
This will make the sidebar 100% of the screen height on load and on screen resize.
Alternatively if you are trying to make a page a tablet style web application you can achieve this 100% sidebar with css alone
html,body {
width: 100%;
height: 100%;
overflow:hidden;
}
.sidebar {
height: 100%;
/*set overflow-x + y to scrolls if you have a lot of content*/
}
this will give you the same effect without any javascript/jquery
http://jsfiddle.net/kdwnk2ax/1/
You can try this
$('.sidebar').css({
"max-height": windowHeight+"px",
"min-height": windowHeight+"px"
});
Demo http://jsfiddle.net/9kkukk2s/
I need to know how to re size a table if the window gets bellow 1050px its width needs to be 1050px. If it is above 1050px it needs to be at a width of 100%.
This isnt working so far.
window.onresize = resize() {
var bigger=document.getElementById("menuwrapper");
if (windowSize < 1050) {
bigger.width="1050px";
}
else {
bigger.width="100%";
}
}
You can do this with CSS:
#menuwrapper {
width:100%;
min-width:1050px;
}