Hi guys I want to know if i could implement something like this in my side:
To check the height of the users window or display
And if it's for example smaller than 800px,
Then a javascript code should not be executed
I already read about mediaqueries but, I really don't know how to use it on a jquery code.
Thanks.
Use window.innerHeight:
document.ready(function(){
if (window.innerHeight < 800){
//Code here
}
});
You can jQuery height() function or window.innerHeight to find out window height.
Live Demo
if($(window).height() < 800)
return;
//You code here
Edit: As mentioned by Cerbrus, it is better to use javascript window.innerHeight here
if(window.innerHeight < 800)
return;
//You code here
use jquery height().. go to the link if u want to read more about height()
if($(window).height() < 800)
{
//do your stuff
}
I use this sometimes when I want to know about the user's viewport:
var PageDimensions = (function () {
var Width;
var Height;
var getDimensions;
function pagedimensionsCtor() {
if( getDimensions === undefined ){
getDimensions = document.createElement("div");
getDimensions.setAttribute("style", "visibility:hidden;position:fixed;bottom:0px;right:0px;");
document.getElementsByTagName("body")[0].appendChild(getDimensions);
}
Width = getDimensions.offsetLeft;
Height = getDimensions.offsetTop;
}
pagedimensionsCtor();
function Reset() {
pagedimensionsCtor();
}
function GetHeight() {
return Height;
}
function GetWidth() {
return Width;
}
return {
Reset: Reset,
GetHeight: GetHeight,
GetWidth: GetWidth
};
})();
demo: http://jsfiddle.net/Vb7xz/
Related
I have functions running depending on window size and changing on resize;
function checksize() {
if ( $(window).width() > 1220 ) {
//sticker1220();
} else if ( $(window).width() > 640 & $(window).width() < 1219 ) {
sticker950();
} else if ( $(window).width() < 639 ) {
sticker320();
}
};
checksize();
$(window).resize(checksize);
I found out that when I open window with size eg 1230px, and then change it to 300px I have three functions working together. I solved this problem with css. But to have better code I'd like to know how to stop this functions.
Hi I have more solution for this.
1: by using setTimeout and clearTimeout
var timeout = null;
function checksize() {
if(timeout){
clearTimeout(timeout);
}
timeout = setTimeout(function(){
//Your code logic here
}, 1000);
}
checksize();
$(window).resize(checksize);
2: By using javascript object
function windowResize(){
var onRunning = false, self = this;
this.onResized = function(){
if(onRunning){
//Your code logic here
onRunning = true;
}
onRunning = false;
}
}
var _myObject = new windowResize();
function checksize() {
_myObject.onResized();
}
checksize();
$(window).resize(checksize);
I hope it help you more :) ...
I'm trying to get the div to resize when the window is resized. With the following code i get "this.fullScreen is not a function" If i remove the window resize it works fine but obviously doesn't resize with the window. Am I thinking about this the wrong way?
var PE = {};
PE.functions = {
fullScreen: function fullScreen() {
var fullScreen = $('.full-screen'),
navbarHeight = $('.navbar').height(),
windowHeight = $(window).height(),
windowWidth = $(window).width();
fullScreen.css({
width: windowWidth,
height: windowHeight - navbarHeight
});
},
fullScreenResize: function screenResize() {
$(window).resize(function(){
this.fullScreen();
});
}
};
$(document).ready(function() {
PE.functions.fullScreenResize()
});
In fullScreenResize, the call to this.fullScreen(), this is not necessarily the PE.functions object because the callback function passed to resize has a different this. To remedy, bind the callback function to the current this:
fullScreenResize: function screenResize() {
$(window).resize(function() {
this.fullScreen();
}.bind(this));
}
Or replace this.fullScreen() with the full object path PE.functions.fullScreen().
I have a codepen here -
http://codepen.io/ashconnolly/pen/EjMbQp
function homepanelHeights() {
$('.img_panel').each(function() {
if (currentWidth < 700) {
var panelcopyHeight = $(this).find('.panel_copy_inner').outerHeight();
console.log(panelcopyHeight);
$(this).css('height', panelcopyHeight);
} else {
// remove inline style
$(this).css("height", "");
}
});
}
$(document).ready(function() {
$('.img_panel').each(homepanelHeights);
});
$(window).resize(function() {
$('.img_panel').each(homepanelHeights);
});
I want to apply a function to each element with .img_panel.
Do you know why the each function call is not working?
I assume its because of the arguments I'm passing, but can not work it out.
it works if I simply repeat the function in the doc.ready and window.resize, but that is a bit dirty..
Hope you can help!
You just need to call homepanelHeights(); Because when you using $('.img_panel').each(...) in homepanelHeights, you're already iterating through it, $('.img_panel').each(homepanelHeights);, combine with the logic inside the function, can be considered as:
// This is the outer
$('.img_panel').each(function() {
// This is inside your homepanelHeights
$('.img_panel').each(function() {
// Do something.
});
});
So you can see that that the logic n*n times.
currentWidth is undefined in your codepen. Added a fake to show.
function homepanelHeights(){
$('.img_panel').each(function (){
// VVVV Make the `currentWidth` get value here, it needs the current width
// when window content is fully loaded, or resized.
var currentWidth = $(window).width();
if (currentWidth < 700){
var panelcopyHeight = $(this).find('.panel_copy_inner').outerHeight();
console.log(panelcopyHeight);
$(this).css('height', panelcopyHeight);
} else {
// remove inline style
$(this).css("height", "");
}
});
}
// As A. Wolff said :
// $(window).on('load resize', homepanelHeights); Can simplify the code.
$(document).ready(function() {
homepanelHeights();
});
$(window).resize(function() {
homepanelHeights();
});
.img_panel {background:salmon; width:200px; height:300px; margin-bottom:10px; display:table;
.panel_copy_inner {height:100%; display: table-cell; vertical-align:middle; text-align: center;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="img_panel">
<div class="panel_copy_inner">Test</div>
</div>
<div class="img_panel">
<div class="panel_copy_inner">Test</div>
</div>
<div class="img_panel">
<div class="panel_copy_inner">Test</div>
</div>
If you want to use the function homepanelHeights as $('.img_panel').each(homepanelHeights);
You can rewrite the logic to:
var currentWidth;
// You need to either define a `currentWidth` here by something.
function homepanelHeights(){
if (currentWidth < 700){
var panelcopyHeight = $(this).find('.panel_copy_inner').outerHeight();
console.log(panelcopyHeight);
$(this).css('height', panelcopyHeight);
} else {
// remove inline style
$(this).css("height", "");
}
}
// As A. Wolff said :
$(window).on('load resize', function() {
// Update the width here. So you don't need to get currentWidth
// each time you operate on an element.
currentWidth = $(window).width();
$('.img_panel').each(homepanelHeights);
});
Demo is on jsfiddle.
Here i have modified the code to achieve the functionality for each element.
Please see the code below.
homepanelHeights=function(key, val) {
var currentWidth = $(window).width();
console.log(currentWidth);
if (currentWidth < 700) {
var panelcopyHeight = $(this).find('.panel_copy_inner').outerHeight();
//console.log(panelcopyHeight);
$(this).css('height', panelcopyHeight);
} else {
// remove inline style
$(this).css("height", "");
}
}
/**/
$(document).ready(function() {
$('.img_panel').each(homepanelHeights);
});
$(window).resize(function() {
$('.img_panel').each(homepanelHeights);
});
function homepanelHeights(){
//This will iterate through all element having img_panel class
$('.img_panel').each(function(){
//get current div's height
var currentWidth = //assign some value here, it is undefined in your current code;
// your logic implemetation
if (currentWidth < 700)
{
var panelcopyHeight = $(this).find('.panel_copy_inner').outerHeight();
console.log(panelcopyHeight);
$(this).css('height', panelcopyHeight);
}
else {
$(this).css("height", "");
}
})
}
// on window load && resize
$(window).on('load resize',function() {
homepanelHeights();
});
//Or instead of window on load you can also use document's ready event
$(document).ready(function() {
homepanelHeights();
});
document.ready runs when the DOM is ready, e.g. all elements are there to be found/used, but not necessarily all the content.
window.onload fires later (or at the same time in the worst/failing cases) when images and such are loaded. So, if you're using image dimensions for example, you often want to use this instead
I wrote a function that's supposed to fire when the page first loads, and when a user resizes the window. It works fine when the page loads, but it doesn't work when the user resizes the window. What's weird is that if I put an alert inside the function, that alert shows up when the window gets resized, but the rest of the function doesn't fire. I'm not seeing any error's in Chrome's console. I've tried changing it to $(document).resize(), $("body").resize(), and $(".pricingHeader").resize(), and nothing's worked. This makes no sense to me.
function getTallest() {
var tallest = 0;
$(".pricingHeader").not(".features .pricingHeader").each(function(){
tallest = $(this).height() > tallest?$(this).height():tallest;
});
$(".pricingHeader").not(".features .pricingHeader").height(tallest);
$(".features .pricingHeader").height(tallest + 8);
}
$(document).ready(function() {
getTallest();
});
$(window).resize(function() {
getTallest();
});
Try :
function getTallest() {
var tallest = 0;
$(".pricingHeader").not(".features .pricingHeader").each(function(i, elem){
if ( $(elem).height() > tallest ) tallest = $(elem).height();
});
$(".pricingHeader").height(function() {
var add = $(this).closest('.features').length ? 8 : 0;
return tallest+add;
});
}
$(function() {
$(window).on('resize', getTallest).trigger('resize');
});
Alright, I figured out what the problem was. I was setting the height of every .pricingHeader to a fixed height, which was preventing the tallest from resizing on window resize. Here's the fixed script:
function getTallest() {
var tallest = 0;
$(".pricingHeader").not(".features .pricingHeader").each(function(){
$(this).css({height:"auto"});
tallest = $(this).height() > tallest?$(this).height():tallest;
});
$(".pricingHeader").each(function() {
$(".pricingHeader").not(".features .pricingHeader").height(tallest);
$(".features .pricingHeader").height(tallest + 8);
});
}
$(document).ready(function() {
getTallest();
});
$(window).resize(function() {
getTallest();
});
I have the following code in a jQuery JavaScript document running on a page (THIS IS CURRENT):
$(window).resize(function(){
detectscreen();
});
function windowWidth() {
if(!window.innerWidth) {
// user is being a git, using ie
return document.documentElement.clientWidth;
} else {
return window.innerWidth;
}}
gearsExists = false;
function detectscreen() {
shouldExist = windowWidth() >= 1300;
if (shouldExist != gearsExists) {
if (shouldExist) {
$('body').append('<div id="gearsfloat"></div>');
$('#clickGoTop').fadeTo(0,0);
$('#clickGoTop').hover(function() {
$(this).stop().fadeTo(500,1);
}, function() {
$(this).stop().fadeTo(500,0);
});
} else {
$('#gearsfloat').remove();
$('#clickGoTop').remove();
}
gearsExists = shouldExist;
}
}
This code is from my previous question, branched here simply because I think it is related.
The problem here is that the beginning is fine: it is displayed. However, if the screen is resized to less than 1300, it disappears; still good.
Now I make the window again larger than 1300. Suddenly the gear element is doubled. Another screen squish and largen and BAM, there's three now. Do this several times and it quickly adds up.
How can I stop this?
If you hook any code in resize event, make sure that your code doesn't resize the window again. Otherwise, resize event will fire again and your code will go in infinite loop.
Also, in your code, you are not using the global gearsExists variable. Remove the 'var' at the bottom of the method to use the global variable.
function detectscreen() {
// Your original code
//var gearsExists = shouldExist; //This code will create new local variable.
gearsExists = shouldExist;
}
}
EDIT: Here's what I would do:
//We will add only one variable to the global scope.
var screenManager = function()
{
var pub = {};
var inResizeHandler = false;
pub.getWindowWidth = function()
{
return window.innerWidth || document.documentElement.clientWidth;
};
pub.manage = function()
{
//if we are already in the resize handler, don't do anything.
if(inResizeHandler)
return;
inResizeHandler = true;
if(pub.getWindowWidth() < 1300)
{
$('#gearsfloat').remove();
//You don't have to remove clickGoTop because it is part of gearsfloat.
inResizeHandler = false;
return;
}
if($('#gearsfloat').length > 0)
{
inResizeHandler = false;
return false;
}
$('body').append('<div id="gearsfloat"></div>');
$('#clickGoTop').fadeTo(0,0);
$('#clickGoTop').hover(
function() {$(this).stop().fadeTo(500,1);},
function() {$(this).stop().fadeTo(500,0);
});
inResizeHandler = false;
};
pub.init = function()
{
$(window).resize(pub.manage);
};
return pub;
}();
$(document).ready( function() { screenManager.init(); } );
EDIT:
Final working version:
http://jsbin.com/ufipu
Code:
http://jsbin.com/ufipu/edit
Haha! After a while, I decided to ignore everything said by everyone else for a while (sorry) and try to see if I could figure it out myself, and I did!
Thanks to SolutionYogi for all the help, but the code he gave me was out of my expertise; it was impossible to debug. My solution is not as pretty as his (if you can help optimize, please do), but it works:
function WinWidth() {
// check width of content
if(!window.innerWidth) {
// you git, how dare you use ie
return document.documentElement.clientWidth;
} else {
return window.innerWidth;
}
};
function gearsAction() {
if(WinWidth() >= 1300) {
$('body').append(
'<div id="gearsfloat"></div>');
$('#clickGoTop').fadeTo(0,0);
$('#clickGoTop').hover(
function() {$(this).stop().fadeTo(500,1);},
function() {$(this).stop().fadeTo(500,0);});
};
};
$(document).ready(function() {
gearsAction();
});
$(window).resize(function() {
$('#gearsfloat').remove();
gearsAction();
});