i want to stop a jquery script when window size is smaller than 500px
can you help me.
i have tried to write a var from 0 to 1 when window size is smaller than 500px
and then add this with a if() function. it doesn't work.
the script that i want to stop running:
[jsfiddle][1]
thx for your help!
ehm yeah stackoverflow i want to text here 10000 words to describe my problem - so sorry i can describe
[1]: http://jsfiddle.net/fg5dcuzm/1/
You can use resize() function:
$(window).resize(function() {
var w = $(window).width();
if (w < 500) {
// stop script
}
});
Or you can run your script only if window is bidder that 500px:
$(window).resize(function() {
var w = $(window).width();
if (w > 500) {
yourFunction();
}
});
$(window).resize(function() {
if($('body').width()<500){
alert('dont do it');
}else{
alert('do it');
}
});
Maybe this helps.
Sorry I haven't reviewed your code well to know why Javascript is not working, but I sometimes hack such things with Css.
Using "!important" will make javascript styles not work when the window width is smaller than 500px:
#media (max-width: 500px) {
.two, .one {
left: 0 !important;
}
}
Related
Is it possible?
I have the following javascript function
<a onclick="execute()">Click here</a>
function execute(){
//code goes here
}
I would like that the onclick event to be only active when the screen size is below 768, so it's only relevant on mobile devices and so on.
Is it possible? and how do you achieve this?
It's totally possible. You'd probably want to do it in the execute function, otherwise when someone clicks on a larger size, there would be a ReferenceError (execute is not defined).
function execute () {
var width = window.innerWidth
if (width >= 768) return
// rest of code here
}
function execute(){
if(screen.width <= 768) {
//code goes here
}
}
Reference: https://www.w3schools.com/jsref/prop_screen_width.asp
Could also use a media query with CSS
#media only screen and (max-width: 768px) {
a {
display: none;
}
}
Media Queries
I had seen that there is similar questions, but couldn't find proper answer for my problem.
Code:
function test() {
var scroll = parseInt($('.sidebar').css('height'));
if (window.matchMedia('(min-width: 769px)').matches) {
$(window).scroll(function() {
if ( $(window).scrollTop() > scroll ) {
$('.element').addClass('fixed');
} else {
$('.element').removeClass('fixed');
}
});
} }
window.onload = function() { test(); }
As you can see this code (adding and removing simple class when scrolling) should work for resolutions bigger than 769px (width) and it works - when test this on mobile device with resolution 1024x768 at 1024px width - works fine, BUT the problem is when you rotate the device - now the width is 768px, but "fixed" class is again added and breaks layout. You have to refresh the whole page so the code to work properly.
I can make the whole page to reload on resize but this is slow and irritating for users.
Tried to set function and on resize but it doesn't work.
$(window).resize(function() {
clearTimeout(window.resizedFinished);
window.resizedFinished = setTimeout(function(){
test();
}, 10);
});
Tried to add "else" for the if (window.matchMedia('(min-width: 769px)').matches) but it doesn't work too.
Is there a way to fix this?
The scroll-event is added onload, and not removed on the resize-event. So the event-function is still being triggered. How about:
$(window).on('scroll resize', function() { // On both scroll and resize, call
if (
window.matchMedia('(min-width: 769px)').matches
&& $(window).scrollTop() > scroll
) {
$('.element').addClass('fixed');
} else {
$('.element').removeClass('fixed');
}
});
I am aware of how stupid this sounds...
I'm trying to re-size an iframe. Here's what I have:
function doTwitterHeight(screenwidth)
{
if(!screenwidth){
var screenwidth = window.innerWidth;
console.log('screenwidth is now defined as: ' + screenwidth);
}
if(screenwidth >= 981){
$('#twitter-widget-0').css('height',466);
}
else if(screenwidth <= 980 && screenwidth >= 952){
$('#twitter-widget-0').css('height',614);
}
else if(screenwidth <= 951 && screenwidth >= 877){
$('#twitter-widget-0').css('height',632);
}
//etc.
else{
$('#twitter-widget-0').css('height',468);
}
}
The function works when called with resize, like so:
$(window).on('resize', function(){
doTwitterHeight();
});
But I also need the function to be called and re-size the height of that div when the page is first loaded. I've tried:
$(window).on('load', function() {
doTwitterHeight();
});
And:
$(document).ready(function(){
doTwitterHeight();
});
And:
$(doTwitterHeight());
And I've had no luck with any of them.
Thanks in advance :)
So the resolution was to modify the code that twitter provide for the iframe embed. By using the advice found at: Twitter Embedded Timeline Callback
I've now fixed the problem by replacing:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
with:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {doTwitterHeight()});");fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
i.e. by adding:
js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {doTwitterHeight()});");
You can try this:
$(window).on('load resize', doTwitterHeight).resize(); // <---trigger it on load
or as per your code piece:
$(window).on('resize', function(){
doTwitterHeight();
}).resize(); // <-----this triggers the resize on page load.
I have a div set to 100% width, and when the page is being looked at 1024 resolution the width should change from 100% to 1000px, I got it working properly with #media queries and works fine on FF, safari chrome. But ie8 and below ignores it, is there any other to try to get the div to change the width from 100% to 1000px at 1024 resolution on IE?
I tried this with jquery but doesn't work.
$(document).ready(function(){
if ($(window).width() < 1024) {
$('#content')css('width','1000px')
} else {
$('#content')css('width','100%')
};
}
media queries are CSS3. Means not supported by IE8 and lower. But take a look here, that brings support for media queries to IE.
$(document).load($(window).bind("resize", changeWidth));
function changeWidth( e ) {
if($(window).width()<1024)
{
$('#content').css('width','1000px');
} else {
$('#content').css('width','100%');
}
}
jsFiddle
Why not just set this in CSS:
width: 100%;
max-width: 1000px;
It's infinitely more efficient than any JS/jQuery solution, I can assure you.
you can use this code :
$(window).resize(function () {
var width = screen.width;
var height = screen.height;
if (width <= 1024) {
//somecode
} else {
//somecode
}
});
however,as Sven Bieder mentioned CSS Media Queries are better than for Responsive Design.
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;
}