jquery slice script with window width - javascript

I have a script JS:
function thoat() {
var sples = $(window).width();
if (sples >= 320 && sples <= 480) {$('.projects').slice(0, 9).css('margin', '10px');
} else {$('.projects').slice(3, 6).css('margin', '10px');
}
}thoat();
Its when screen size btw 320 and 480 then select all elements if not select the three from bottom.
Its looks like work great but i try on a responsive screen test size with 320px and its not select all element not understand why? On 320px what write there not work
responsive test site where not work with 320px : screenfly
jsfiddle
Whats the problem? with script?

It works fine actually. The only problem is that you run your function just on DOM.ready(), but when you change the resolution on screenfly it does not cause the page reload, so DOM.ready() event is not fired, but $(window).resize() is. So you can add followingl line to your code
$(window).on('resize', thoat);
and it works!
jsfiddle
Screenfly
Just resize the screen to some mobile device and you'll see the result.
UPD It doesn't work at 320px cause of scrollbar, it's width is like 17px, and .width() method returns window width without scroll bar witdh, so , in your case it's out of range.

Related

Jquery window.resize(event) => {} works for inspect element but not when the chrome (or edge) window is resized

There are many many questions regarding resize (event) not working online, but I was only able to find one that actually reflected my exact problem but did not have an answer.
When I use inspector, my website changes from the desktop version to the mobile version when it reaches the breakpoint of <= 540px width. However, when I resize the entire chrome window, nothing happens (even though my window does get smaller than 540px width).
I'm not sure if the mobile version will actually work on a mobile as I have no way of testing that currently, but I'm unsure as to whether this is a normal thing with Chrome and the website will work perfectly well on desktop and mobile or whether I'm doing something wrong.
The related piece of code:
$(window).resize((event) => {
const windowWidth = window.screen.width;
if (windowWidth <= 540) {
$('.className1').addClass('d-none');
$('.classname2').css("width", "100%");
$('.classname3').css("left", "3%");
$('.classname3').css("width", "100%");
$('.classname4').css("width", "90%");
This is not the entire method but it basically shows the idea that css and attributes change based on window width dropping below 540px.
What I tried:
Document.resize (failed)
I really hope this isn't a duplicate, it's hard to navigate the vast number of questions out there.
The problem is not with the resize event or with browser. It's occurring because you're using window.screen.width, which is relative to the screen, not to the browser window. It doesn't matter if you resize the browser window, the screen width will not change. For example, if your screen has resolution of 1900x1200, screen.width will always be 1900. Hence, you should use window.innerWidth, or just innerWidth to get the viewport width. To know more, see this question.
Your code would be that way:
(window).resize((event) => {
if (innerWidth <= 540) {
$('.className1').addClass('d-none');
$('.classname2').css("width", "100%");
$('.classname3').css("left", "3%");
$('.classname3').css("width", "100%");
$('.classname4').css("width", "90%");
An example of working code (open the snippet in full page and resize it):
$(window).resize((event) => {
if (innerWidth <= 540) {
document.write('It\'s working.');
}
});
<html>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</body>
</html>

$(window).resize() in safari : why it works also if scroll window (but doesn't resize)?

i noticed, with safari on my iphone5 that
$(window).resize()
it works strangely...
i have this code:
$(document).ready(function () {
$(window).resize(function() {
avviaChart();
initialize();
if($('#time').is(':checked')){
$("#time").removeAttr('checked');
$("#Time").css('border','2px solid #ffffff');
}
});
});
this code should work only when sizes of window change....
with other browser work very good, but with safari the code works also if i scroll the page (and the sizes of window doesn't change)...
HOW IS POSSIBLE ? O.o
This is a known bug that happened from iOS6 Safari. The resize event fires randomly while scrolling. Fortunately it's not a jQuery issue.
This answer to a similar problem might solve your issue as well.
For the lazy:
3Stripe posted that you should "Store the window width and check that it has actually changed before proceeding with your $(window).resize function"
His code snippet:
jQuery(document).ready(function($) {
/* Store the window width */
var windowWidth = $(window).width();
/* Resize Event */
$(window).resize(function(){
// Check if the window width has actually changed and it's not just iOS triggering a resize event on scroll
if ($(window).width() != windowWidth) {
// Update the window width for next time
windowWidth = $(window).width();
// Do stuff here
}
// Otherwise do nothing
});
});
As you see, in iphone/ipad and android devices, when you scroll down the page, address bar will be small and when scroll to top address bar size will be return to the actual size, this operation fires window.resize event
This issue specific to ios, if any handler which changes size of anything in window, will trigger resize event, and sometimes it will get stuck in infinite resize call. So as mentioned above, have one condition which compares previous width with current width if both are equal then return.

jQuery/JS, iOS 4 and $(document).height() problems

I've run into an odd issue with what appears to be various versions of Webkit browsers. I'm trying to position an element on the center of the screen and to do the calculations, I need to get various dimensions, specifically the height of the body and the height of the screen. In jQuery I've been using:
var bodyHeight = $('body').height();
var screenHeight = $(window).height();
My page is typically much taller than the actual viewport, so when I 'alert' those variables, bodyHeight should end up being large, while screenHeight should remain constant (height of the browser viewport).
This is true in
- Firefox
- Chrome 15 (whoa! When did Chrome get to version 15?)
- Safari on iOS5
This is NOT working in:
- Safari on iOS4
- Safari 5.0.4
On the latter two, $(window).height(); always returns the same value as $('body').height()
Thinking it was perhaps a jQuery issue, I swapped out the window height for window.outerHeight but that, too, does the same thing, making me think this is actually some sort of webkit problem.
Has anyone ran into this and know of a way around this issue?
To complicate things, I can't seem to replicate this in isolation. For instance: http://jsbin.com/omogap/3 works fine.
I've determined it's not a CSS issue, so perhaps there's other JS wreaking havoc on this particular browser I need to find.
I've been fighting with this for a very long time (because of bug of my plugin) and I've found the way how to get proper height of window in Mobile Safari.
It works correctly no matter what zoom level is without subtracting height of screen with predefined height of status bars (which might change in future). And it works with iOS6 fullscreen mode.
Some tests (on iPhone with screen size 320x480, in landscape mode):
// Returns height of the screen including all toolbars
// Requires detection of orientation. (320px for our test)
window.orientation === 0 ? screen.height : screen.width
// Returns height of the visible area
// It decreases if you zoom in
window.innerHeight
// Returns height of screen minus all toolbars
// The problem is that it always subtracts it with height of the browser bar, no matter if it present or not
// In fullscreen mode it always returns 320px.
// Doesn't change when zoom level is changed.
document.documentElement.clientHeight
Here is how height is detected:
var getIOSWindowHeight = function() {
// Get zoom level of mobile Safari
// Note, that such zoom detection might not work correctly in other browsers
// We use width, instead of height, because there are no vertical toolbars :)
var zoomLevel = document.documentElement.clientWidth / window.innerWidth;
// window.innerHeight returns height of the visible area.
// We multiply it by zoom and get out real height.
return window.innerHeight * zoomLevel;
};
// You can also get height of the toolbars that are currently displayed
var getHeightOfIOSToolbars = function() {
var tH = (window.orientation === 0 ? screen.height : screen.width) - getIOSWindowHeight();
return tH > 1 ? tH : 0;
};
Such technique has only one con: it's not pixel perfect when page is zoomed in (because window.innerHeight always returns rounded value). It also returns incorrect value when you zoom in near top bar.
One year passed since you asked this question, but anyway hope this helps! :)
I had a similar problem. It had to do with 2 thing:
Box-sizing CSS3 property:
In the .height() jQuery documentation I found this:
Note that .height() will always return the content height, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS height plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css( "height" ) rather than .height().
This may apply to $('body').height().
Document ready vs Window.load
$(document).ready() is run when the DOM is ready for JS but it's possible that images haven't finished loading yet. Using $(window).load() fixed my problem. Read more.
I hope this helps.
It is 2015, we are at iOS 8 now. iOS 9 is already around the corner. And the issue is still with us. Sigh.
I have implemented a cross-browser solution for the window size in jQuery.documentSize. It stays clear of any kind of browser sniffing and has been heavily unit-tested. Here's how it works:
Call $.windowHeight() for the height of the visual viewport. That is the height of the area you actually see in the viewport at the current zoom level, in CSS pixels.
Call $.windowHeight( { viewport: "layout" } ) for the height of the layout viewport. That is the height which the visible area would have at 1:1 zoom - the "original window height".
Just pick the appropriate viewport for your task, and you are done.
Behind the scenes, the calculation roughly follows the procedure outlined in the answer by #DmitrySemenov. I have written about the steps involved elsewhere on SO. Check it out if you are interested, or have a look at the source code.
Try this :
var screenHeight = (typeof window.outerHeight != 'undefined')?Math.max(window.outerHeight, $(window).height()):$(window).height()
A cross browser solution is set that by jQuery
Use this property:
$(window).height()
This return a int value that represents the size of visible screen height of browser in pixels.

Using Javascript to resize a div to screen height causes flickering when shrinking the browser window

The Background:
I tried to solve the StackOverflow question yet another HTML/CSS layout challenge - full height sidebar with sticky footer on my own using jQuery. Because the sidebar in my case may be longer than the main content it matches the case of comment 8128008. That makes it impossible to have a sidebar longer than the main content and having a sticky footer without getting problems when shrinking the browser window.
The status quo:
I have a html page with a div, which is automatically stretched to fill the screen. So if there is empty space below the element, I stretch it downwards:
But if the browser viewport is smaller than the div itself, no stretching is done but the scrollbar shows up:
I've attached jQuery to the window's resize event to resize the div, if the browser window is not to small and remove any resizing in the other case. This is done by checking if the viewport is higher or smaller than the document. If the viewport is smaller than the document, it seems like the content is larger than the browser window, why no resizing is done; in the other case we resize the div to fill the page.
if ($(document).height() > $(window).height()) {
// Scrolling needed, page content extends browser window
// --> No need to resize the div
// --> Custom height is removed
// [...]
} else {
// Window is larger than the page content
// --> Div is resized using jQuery:
$('#div').height($(window).height());
}
The Problem:
Up to now, everything runs well. But if I shrink the browser window, there are cases, where the div should be resized but the document is larger than the window's height, why my script assumes, that no resizing is needed and the div's resizing is removed.
The point is actually, that if I check the document's height using Firebug after the bug appeared, the height has just the value is was meant to have. So I thought, the document's height is set with a little delay. I tried to run the resize code delayed a bit but it did not help.
I have set up a demonstration on jsFiddle. Just shrink the browser window slowly and you'll see the div "flickering". Also you can watch the console.log() output and you will notice, that in the case of "flickering" the document's height and the window's height are different instead of being equal.
I've noticed this behavior in Firefox 7, IE 9, Chrome 10 and Safari 5.1. Can you confirm it?
Do you know if there is a fix? Or is the approach totally wrong? Please help me.
Ok -- wiping my old answer and replacing...
Here's your problem:
You are taking and comparing window and document height, without first taking into consideration the order of events here..
Window loads
Div grows to window height
Window shrinks
Document height remains at div height
Window height is less than div height
At this point, the previously set height of the div is keeping document height greater than the window height, and this logic is misinterpreted:
"Scrolling needed, no need to extend the sidebar" fires, erroneously
Hence the twitch.
To prevent it, just resize your div along with the window before making the comparison:
(function () {
var resizeContentWrapper = function () {
console.group('resizing');
var target = {
content: $('#resizeme')
};
//resize target content to window size, assuming that last time around it was set to document height, and might be pushing document height beyond window after resize
//TODO: for performance, insert flags to only do this if the window is shrinking, and the div has already been resized
target.content.css('height', $(window).height());
var height = {
document: $(document).height(),
window: $(window).height()
};
console.log('height: ', height);
if (height.document > height.window) {
// Scrolling needed, no need to externd the sidebar
target.content.css('height', '');
console.info('custom height removed');
} else {
// Set the new content height
height['content'] = height.window;
target.content.css('height', height['content']);
console.log('new height: ', height);
}
console.groupEnd();
}
resizeContentWrapper();
$(window).bind('resize orientationchange', resizeContentWrapper);
})(jQuery);
Per pmvdb's comment, i renamed your $$ to "target"
$(window).bind('resize',function(){
$("#resizeme").css("height","");
if($("#resizeme").outerHeight() < $(window).height()){
$("#resizeme").height($(window).height());
$("body").css("overflow-y","hidden");
}else{
$("body").css("overflow-y","scroll");
}
});
Maybe I am misunderstanding the problem, but why are you using Javascript? This seems like a layout (CSS) issue. My solution without JS: http://jsfiddle.net/2yKgQ/27/

jquery expanding and resizing problem

Im using this jquery to try and control how wide and high a div opens depending on the screen resolution this is the code im using but it doesn't seem to be having any effect apart from cropping my image. I say it doesnt seem to work becuase it leaves a big space and when I look at firebug it tells me the box has expanded to the 600px x 488px when im viewing in the lower resolution.
Im not sure if the images are pushing the div out the that size because the pictures are exactly 600px x 488px but I need them to be the same file just smaller for dynamic PHP gallery updating in the future, how can I fix this code and how can I easily resize the images depending on the resolution?
$(document).ready(function(){
if ((screen.width>=1440) && (screen.height>=764)) {
$("#slideshow_box")
.animate({"height": "600px"}, 500)
.animate({"width": "488px"}, 500);
}
else {
$("#slideshow_box")
.animate({"height": "400px"}, 500)
.animate({"width": "288px"}, 500);
}
});
DEMO
As you can se HERE even if you resize your screen the calculated width is actually = your brand new ;) screen - size!
To get the actual 'screen' (window!) size in your browser you can use
$(window).width(); and $(window).height();
$(document).ready(function(){
var winW = $(window).width();
var winH = $(window).height();
alert("Window width is: "+winW+"px, window height is: "+winH+'px');
if ((winW>=1440) && (winH>=764)) {
$("#slideshow_box")
.animate({"height": "600px"}, 500)
.animate({"width": "488px"}, 500);
} else {
$("#slideshow_box")
.animate({"height": "400px"}, 500)
.animate({"width": "288px"}, 500);
}
});
HERE you can see it in action, just resize the frame.
$(window).resize(function() {
$('#size').html(
' Window width: '+$(window).width()+
'<br> Window height: '+$(window).height()
);
});
Hum, can't figure out your problem...seems to work for me, see http://jsfiddle.net/EtEzN/2/
For sure, your snippet resizes DIV layer only, so you have to resize containing images too!
EDIT: Fiddle is updated, so script regards browsers document height instead of screen height (remember: screen resolution <> browser resolution <> document resolution)
The images are indeed pushing out your div. If you want to change image size, then you can't just adjust the size of the containing div, you have to change the size of the img itself.
I'm assuming that the image is intended to be the same size as the div that contains it. Thus, your code should only require a slight modification:
$(document).ready(function(){
if ((screen.width>=1440) && (screen.height>=764)) {
// Since the image is already the same size as the div,
// don't change the image
$("#slideshow_box")
.animate({"height": "600px"}, 500)
.animate({"width": "488px"}, 500);
}
else {
// Resize the image along with the div
$("#slideshow_box, #slideshow_box img")
.animate({"height": "400px"}, 500)
.animate({"width": "288px"}, 500);
}
});
Also, the screen properties signify the resolution of the client's display screen, not the actual size of the browser window. Since you're using jQuery, you can use $(window).width() and $(window).height(), or if you're ever using plain JS, the window.innerWidth and window.innerHeight properties (for Firefox), or document.body.clientWidth for IE, although browser compatibility is annoying for this, so I'd probably stick with jQuery or another library.

Categories