I have a function to adjust the page so that it does not scroll regardless of the device, it works at all, however, when you rotate the screen or when you change the device to inspect Google Chrome, the function does not work, only if I do the reload on the page that works, I don't know what I'm doing wrong, that's what I'm calling her
$("document").ready(function() {
changesize();
$(window).resize(function() {
changesize();
});
};
It is a syntax error document ready function closing bracket missing. Please refer below code.
$(document).ready(function() {
changesize();
$(window).resize(function() {
changesize();
});
});
I think this piece of code should fix your problem. It should trigger the resize function as needed when you flip your device. Let me know if it works :
window.addEventListener("orientationchange", function() {
window.dispatchEvent(new Event("resize"));
}, false);
Related
Upon load, I am positioning the users scroll to the top of the '#gallery-view' element.
This is working correctly on iPad and iPhone. However, if I change the orientation of the device, its not positioning.
I have run tests to check the code is run on orientation change. The 'resize' option is triggering correctly and the 'test' console.log is output.
Here is the code:
jQuery.noConflict();
function winResize() {
if ( jQuery('#gallery-view').length ) {
console.log('test');
window.setTimeout(function() {
window.scrollTo(0, jQuery('#gallery-view').offset().top);
}, 0);
}
}
jQuery(window).on('load', function() {
jQuery(window).resize(winResize);
winResize();
});
Does anyone know of any reason why this wouldn't trigger on orientation change?
Try attaching your winResize handler function to the orientationchange event as well. See the MDN docs.
I have a button used to scroll back to the top of the page when clicked.
I want to have an animation effect.
$("#back-to-top").click(function() {
$(document.body).animate({scrollTop: 0}, 800);
return false;
});
When I click on the button, it did scroll back to top. However, I can't scroll down and it seemed when I scroll down the function is called.
When I use
$(document).scrollTop(0);
it works well.
What's the problem?
Here's my Fiddle
I'm new to Fiddle, it just didn't work!
Try like this
$("#back-to-top").click(function(e) {
e.preventDefault();
$("body, html").animate({scrollTop: 0}, 800);
});
Update
According to your fiddle, you have to put this function outside of $(window).scroll( function() {});
Your problem is actually browser based, I tested this in Firefox which it didn't work. I then tested it in Chrome and it worked fine. Try using $('html, body').animate({scrollTop:0},500); instead.
I've managed to get a fiddle to work how I want it, but when I'd finished I realised I had it set to 'No wrap - in <body>' instead of 'onLoad'.
Now I can't seem to get the margin top function to work onLoad. I can't see where I'm going wrong. Can anyone help?
Set to No wrap - in <body>: Demo (Working how I need)
Set to onLoad: Demo (Not working)
JS thats not working:
function extraMargin() {
var xMar = $('.fixed-container').outerHeight();
$('.scrolling-container').css({"margin-top":xMar+"px"});
}
$(window).load(function(){
extraMargin();
});
$(window).resize(function(){
extraMargin();
});
It doesn't work with onLoad Fiddle mode because in this case your code is wrapped into window.onload event handler. But window.onload event doesn't fire twice. You put your code into onLoad callback in JSfiddle, and hence your own
$(window).load(function () {
extraMargin();
});
is never executed later - there will be no additional window.onload to run extraMargin function.
You need to just have
//$(window).load(function () {
extraMargin();
//});
if you use onLoad.
I'm trying to execute a javascript function ONLY if the width is bigger than 1200pixels.
The code I need to execute works, but the check for the screen size doesn't:
window.addEventListener("resize", function(){
if (document.documentElement.clientWidth > 1203) {
<<<some other code that's working>>>
}
}, true);
All this code is in a javascript file outside the document.ready function.
EDIT: When you drag your screen window around, it isn't working like normal css queries. This is the problem. It works if you refresh your page, but if you change the width of your browser, then it doesn't adjust, it needs the reload right now.
That's my issue.
You need to add an else clause to get the behaviour you want. Otherwise the resize event will only work going one way, as you described.
window.addEventListener("resize", function(){
// fire when above 1203
if (document.documentElement.clientWidth > 1203) {
console.log('Greater!');
}
// fire when below 1203
else {
console.log('Smaller!');
}
}, true);
Here's a link to the fixed jsfiddle that planet260 wrote: http://jsfiddle.net/4dnemh2j/4/
Here's my example again: https://jsfiddle.net/9n5hmpua
The problem is the true you're passing to addEventListener.
See the useCapture section here: EventTarget.addEventListener
Events which are bubbling upward through the tree will not trigger a listener designated to use capture
So you want:
window.addEventListener("resize", function(){
if (document.documentElement.clientWidth > 1203) {
<<<some other code that's working>>>
}
}, false); <----change here
You can use jQuery to achieve this
$( window ).resize(function() {
console.log($( window ).width());
var windowwidth = $( window ).width();
if (windowwidth > 500) {
console.log("Greater than 500");
/*Do your work here*/
}
});
I have a little code snippet here:
$(window).resize(function() {
if ($(window).width() <= 768) {
$('.menu-item-810').click(function () {
$('.squares').slideDown(2000);
});
}
});
That says when the browsers window width is less than or equal to 768px, when you click on the element that has a class of .menu-item-810, slideDown the .squares element.
That is what I want, and it does work.. but only 99.8% correctly.
When the screen width is larger than 768px, the .squares element has a different jQuery effect, it fades in and out, instead of sliding. I needed it to slideDown instead, when in tablet/mobile view, so I wrote the above snippet.
Like I said, it all works, but say I've opened any browser, resized it to 768px or less width, browsed to the site and then click on .menu-item-810. Nothing happens. It's only when I then manually resize the browser again, by any amount, that the jQuery fires. So if I've just resized the browser again, and then click .menu-item-810, the .squares element slides down like expected, but only if I manually resize the browser. I thought that the jQuery would be listening from the start if I wrapped that snippet in $(document).ready() but that doesn't work either, it just has the same behavior as without.
Anyhoo, any help is as always massively appreciated. Hopefully I'm just missing something simple.
Thanks guys!
Actually, this makes no sense? The resize event handler fires thousands of times when the window is resized, and binding a click event handler inside the resize handler will get you thousands of click handlers.
Attach one single click handler, and check the windows width inside it
$('.menu-item-810').click(function () {
if ($(window).width() < 768) {
$('.squares').slideDown(2000);
}
});
Once your javascript has loaded, it needs a resize event to fire in order to trigger your code. - it doesn't know if the window has been resized prior to the handler being initialised.
Put the same snippet in your document.ready() function to do an initial check for window size:
$(document).ready(function() {
if ($(window).width() < 768) {
$('.menu-item-810').click(function () {
$('.squares').slideDown(2000);
});
}
});
In the order of your code, it is first checking the window size, and only then, if it is small, adds your event handler.
It sounds like what you want is to always call the event handler, and then change the action depending on the side.
$(window).resize(function() {
$('.menu-item-810').click(function () {
if ($(window).width() <= 768) {
$('.squares').slideDown(2000);
}
});
});
Actually, now that i think some more, you don't even need to set the handler upon resize. Just set it on document load, and check the size when it gets clicked.
$(document).ready(function() {
$('.menu-item-810').click(function () {
if ($(window).width() <= 768) {
$('.squares').slideDown(2000);
}
});
});