the website:
http://wouterschaeffer.nl/bt/
When the screen width gets bigger than 768px, the div containing the blocks has to move up so it's just beneath the carousel.
I think it can be solved with jQuery but I don't know how
if you want to do it with jquery try this
function resize(){
if($(window).width >768){
//do somthing here with css
}
}
resize();
$(window).resize(function(){
resize();
});
Well, I know how to do it in regular Javascript, and it is fairly simple.
var x = document.body();
if(screen.width >= 768){
//code goes here
}
That's all I did, but if you wanted to get the size of the window, you would replace screen.width, with window.innerHeight/window.innerWidth to get the size of the browser window
Related
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*/
}
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 if have this function in order to dynamically set a div's height based on the browser height:
$(window).resize(function() {
$('#slideshow').height($(window).height() - 110);
});
$(window).trigger('resize');
This works like a charm. As you can see, there's a 110px margin (that belongs to my header height).
This code is not optimal since, a header height might vary based on the current viewport.
Is there a way to set this up dynamically as well? Or at least set some conditions like:
If browser width is more than 768px then set a 110px margin. If less than 767, then the margin should be 80px.
This is my edited code so far, but I'm not sure if I'm on the right path:
$(window).resize(function() {
var set_width = $(window).width();
if(set_width <= 767)
$('#slideshow').height($(window).height() - 110);
});
$(window).trigger('resize');
Thanks a lot!
EDIT:
Now that I think of it better, this 110px are not a margin, it's a subtraction I'm doing in order for my header and the slideshow to fill the entire window. If I don't do this subtraction then I end up with my header height + slideshow height (which takes take browser height) making it scroll.
So I don't think I can do this with CSS. That's why I was thinking on a Javascript solution.
So, you'd need something like the following. I hope the code is straightforward.
$(window).on("resize", function() {
var winHeight = $(window).height();
var headerHeight = $("header").height();
$('#slideshow').height(winHeight - headerHeight);
});
$(window).trigger('resize');
The sample HTML I'd used as a model is:
<body>
<header>my header</header>
<div id="slideshow"></div>
</body>
You can do something like this:
$(window).resize(function() {
var buffer = ($(window).width()<768)?80:110;
$('#slideshow').height($(window).height() - buffer );
});
$(window).trigger('resize');
As Halcyon suggested in comments, use css. That is the neatest way to do it.
I'm working on a mobile web project that goes between a two column or single column view based on screen size. For some device sizes, changing from portrait to landscape switches you between the single and double column. Across the bottom of the page there are three feature images that are side by side for two column view, but we want to turn into a content slider in single column.
My issue:
The javascript conditional I have calls the function when the width of the screen is below a certain width. However if you change the orientation/size of the screen, it doesn't recall the function or re-evaluate the screen width.
What I have:
if( $(window).width() < 570) {
$(window).load(function() {
$('.flexslider').flexslider();
});
}
What is the best way to watch for resize and call/recall the function after the resize event?
Use jQuery resize event on window. jsfiddle
$(window).resize(function(){
//your code
});
To follow on from what Shusl said, you need to create the functions within $(window).resize();
What I would do is create the function and be sure to trigger it too. So it would be something like -
$(window)resize(function() {
winWidth = $(window).width();
winHeight = $(window).height();
if (winWidth < 570) {
$(window).load(function() { $('.flexslider').flexslider(); });
}
else {
// do something else
}
}).trigger("resize");
I would like a function to be called only when the browser is greater than 640px. So far I have the following, which successfully loads the function when the screen width is greater than 640px but the problem I'm facing, is that when the browser width goes back under 640px, the function is still active. In my particular scenario I do not want the function loading on smaller displays, hence why I'm trying to call it using the below code. How can I somehow remove/destroy the function when the browser is resized back under 640px?
<script>
function someFunction() {
// .. does something when the browser width is greater than 640px
}
(function($){
//detect the width on page load and load the function
$(document).ready(function(){
var current_width = $(window).width();
if(current_width > 640){
someFunction();
}
}
});
//update the width value when the browser is resized
$(window).resize(function(){
var current_width = $(window).width();
if(current_width > 640){
someFunction();
}
});
})(jQuery);
</script>
Here's a full jsFiddle example of what I have so far as per the help I have had so far. http://jsfiddle.net/7Dqna/26/
I'm implementing a sticky sidebar that scrolls with the page when it hits the top of the browser but I am trying to turn off the function at smaller screen sizes (think mobile).
It works when the page is refreshed, but if you make the browser window bigger, then smaller (less than 400px in the jsFiddle example) the menu still is still given the CSS by the function. So I guess it's not picking up the resize thingie.
why not just put the width size check into the function and return from it if the size is not at least 640? e.g.
var jWindow = $(window);
jWindow.resize( function() {
someFunction();
});
function someFunction(){
if ( jWindow.width() < 640 ){ return; }
// do stuff here
}
alternatively, you could do window.someFunction = function(){ return; }
$(document).ready(function(){
$(window).on('load resize', ifWidth);
function ifWidth() {
var W = $(window).width();
if(W > 640){
someFunction();
$(window).off('resize', ifWidth);
}
}
function someFunction() {
// .. does something when the browser width is greater than 640px
}
});
I can think on two ways to do it:
Create an unSomeFunction that will reverse someFunction work.
Inside someFunction check a boolean flag to know what's the size of the window.
It is happening because of $(window).resize() handler. If you just want this logic to be executed only on page load then just execute it on document ready and remove the $(window).resize() handler.