I've created a function that has to run only if the window is wider than 769px. It works when the page loads, but not on resize...
It looks like this:
$(window).on('load resize', function () {
if ($(window).width() >= 769) {
...funcion...
}
});
EDITED:
Full code below
$(window).on('load resize', function () {
if ($(window).width() >= 769) {
var $element = $('#cont_quote');
var $follow = $element.find('.img_quote');
var followHeight = $element.find('.img_quote').outerHeight();
var height = $element.outerHeight() - 300;
var window_height = $(window).height();
$(window).scroll(function () {
var pos = $(window).scrollTop();
var top = $element.offset().top;
// Check if element is above or totally below viewport
if (top + height - followHeight < pos || top > pos + window_height) {
return;
}
var offset = parseInt($(window).scrollTop() - top);
if (offset > 0) {
$follow.css('transform', 'translateY('+ offset +'px)');
}
})
}
});
HTML:
<section id="cont_quote">
<article class="cont_q">
Lorem ipsum
<img class="img_quote" src="img">
</article>
</section>
Try something like this:
$(document).ready(function(){
$(window).resize(function(){
if ($(window).width() >= 769) {
...funcion...
}
}
}
You can change on ready or on load, depending on what you need, but the the function should trigger on window resize.
I think you can try this solution this is just javaScript
var onWindowResize = function(e) {
width = e.target.outerWidth;
//uncomment if need height = e.target.outerHeight;
if(width >= 769) {
//remove alert just added for debug
alert("if");
}
else{
//remove alert
alert("else");
}
}
window.addEventListener("resize", onWindowResize);
Related
JSFiddle Demo
For the above JSFiddle demo, I need to position the last image so that it is centered, compared to the first three images.
How do I do this?
position()
window.onresize = function(event) {
position();
};
function position(){
var id = document.getElementById( "imageDisplay" );
console.log( window.innerWidth );
if( window.innerWidth > 400 ) {
console.log( "left" );
id.style.left = "200px";
id.style.bottom = 0;
id.style.top = "20px";
} else if( window.innerWidth <= 250 ) {
console.log( "left" );
id.style.left = "200px";
id.style.top = "20px";
id.style.right = 0;
}
}
Like this? Inside the position function you can write the conditions, refer the if else if condition, which checks the window size and determines the position of the element! When the document loads the position() function is ran once, to determine the initial position.
JSFiddle Demo
Javascript:
position()
window.onresize = function(event) {
position();
};
function position(){
var id = document.getElementById("img");
console.log(window.innerWidth);
if(window.innerWidth >800){
console.log("left");
id.style.left=0;
id.style.bottom=0;
id.style.top="";
}else if(window.innerWidth >600){
console.log("left");
id.style.left=0;
id.style.top=0;
id.style.right="";
}else if(window.innerWidth < 600){
console.log("right");
id.style.right=0;
id.style.top=0;
id.style.left="";
}
}
Using jquery I think you would be able to do it.
$(window).load( function() {
//find height only after all elements have loaded
var widthOfImage = $('#image').width();
//condition for image
if(widthOfImage < 200) {
$('#image').css({
'position': 'absolute',
'top': 0,
'left': 0
});
} else {
$('#image').css({
'position': 'relative',
'top': 100,
'left': 100
});
}
});
Hy,
Basically what I want to achieve is to align some content vertically, in my case name & job.
The issue here is, when resizing the window, I want the content to stay in the middle.
I found a small script but I cannot get it to work, still learning the basics of JS.
My markup is the following:
Navigation
Vertically content
Footer (position: absolute; bottom: 0;) // is aligned to bottom.
I created a JSFiddle (http://jsfiddle.net/marianstroiu/khm52p0a/1/), so can you see what I'm talking about.
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setContent() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentElement = document.getElementById('v-content');
var contentHeight = contentElement.offsetHeight;
if (windowHeight - contentHeight > 0) {
contentElement.style.position = 'relative';
contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
}
else {
contentElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setContent();
}
window.onresize = function() {
setContent();
}
Thank you!
You are using bootstrap sticky-footer template that add bottom margin and footer to the body element so you should substract 2 * 60 pixel from window height. Here is modified jsfiddle
As per the title, I want to be able to reduce image size when window height becomes smaller.
It's working for reducing part but I want it to get the original height back when window height is greater than specified.
I know this part $('.model').height(); is wrong.
$(window).on('load resize', function() {
var h = $(window).height();
if (h < 850) {
$('.model').height(600);
} else {
$('.model').height();
}
});
You can try to store the height of .model in a variable and restore it like this:
var originalHeight = $('.model').height();
$(window).on('load resize', function() {
var h = $(window).height();
if (h < 850) {
$('.model').height(600);
} else {
$('.model').height(originalHeight);
}
});
try putting height back into (the default) "auto" when you want the original size back?
$(window).on('load resize', function() {
var h = $(window).height();
if (h < 850) {
$('.model').height(600);
} else {
$('.model').css("height","auto");
}
});
I have a function that detects the window width and based on that does jquery things that mobile would have and does jquery things for desktop. I have two functions, one that alters content resize and one on reload. What I am trying to do is combine the two into one function. The problem now is anything in the resize function just resizes. Even $("html").width();
Anyone have any ideas or solutions? Thanks.
//ON RESIZE
$(window).resize(function () {clearTimeout(this.id);this.id = setTimeout(checkTimer, 500);});
function checkTimer() {
var width = $(window).width();
//MOBILE
if (width < 640) {
mobileView();
}
//TABLET
else if (width > 640 && width <966) {
appendFix();
}
//DESKTOP
else if (width >966) {
appendFix();
}
};
//ON RELOAD
var width2 = $(window).width();
//MOBILE
if (width2 < 640) {
mobileView();
};
//TABLET
if (width2 > 640 && width2 <966) {
appendFix();
};
//DESKTOP
if (width2 > 966) {
appendFix();
};
Think I found the solution.
$(window).resize(function () {clearTimeout(this.id);this.id = setTimeout(mobileSize, 500);});
function mobileSize() {
sizes();
}
$(window).load(function() {
sizes();
});
function sizes() {
var width = $(window).width();
if (width < 640) {
}
else if (width > 640 && width < 966) {
}
else if (width > 966) {
}
}
I have a fixed position div that I want to have position left: 0 when the browser window is smaller than 1200px, but no left positioning when larger than 1200px. I'm using this code
var $window = $(window);
function checkWidth() {
var windowsize = $window.width();
document.write(windowsize);
if (windowsize < 1200) {
document.getElementById("DBCIbox").style.left = "0";
} else {50
document.getElementById("DBCIbox").style.left = "500px";
}
}
checkWidth();
$(window).resize(checkWidth);
but it doesnt seem to be doing anything. I'm setting the left=500px as simply a test to get the javascript working, then I'll worry about where I want to position it.
I've done some googleing and from what I can tell this should work, what am I missing?
If theres a way to clear the left positioning I'd like to know that as well.
var $window = $(window);
That line is cacheing that instance of window. You need to re-evaluate $(window) everytime you call this code to get updated width and height values
Updated code below
function checkWidth() {
var $window = $(window);
var windowsize = $window.width();
document.write(windowsize);
if (windowsize < 1200) {
document.getElementById("DBCIbox").style.left = "0";
} else {50
document.getElementById("DBCIbox").style.left = "500px";
}
}
checkWidth();
$(window).resize(checkWidth);
#Jnatalzia had it right, I needed to make a few tweaks, and the comments wouldn't let me post the code, but credit goes to #Jnatalzia for the answer.
function checkWidth() {
var $window = $(window);
var windowsize = $window.width();
var position;
if (windowsize < 1390) {
document.getElementById("DBCIbox").style.marginLeft = 0 + "px";
} else if (windowsize >= 1390) {
position = windowsize - 1060;
position = position / 2;
position = position - 175;
document.getElementById("DBCIbox").style.marginLeft = position + "px";
}
}
$("document").ready(function(){
$(window).load(function(){
checkWidth();
});
$(window).resize(function(){
checkWidth();
});
});