We Keep Coding

How to Make This Jquery Script Work In Specific Width

I'm beginner to Jquery.
I have a simple piece of code that changes the height of an element to half of the window height.
$(function () {
'use strict';
$('.moubdi3in').height($(window).height());
});
I want to make this script work only when window size is more than 769px. In lesser heights, I want to give the element full window height.
How can I do this?
Thanks

You can use a trinary operator or if to decide what will be the elements height according to the current window height:
$(function () {
'use strict';
var windowHeight = $(window).height();
$('.moubdi3in').height(windowHeight > 769 ? windowHeight / 2 : windowHeight);
});

I want to make this script work only when window size is more than
769px
if($(window).height() <= 769) return; // reject function if less|equal 769px
I want to give the element full window height.
$('.moubdi3in').css('height', $(window).height()); // set windows height to height property of .moubdi3in element

JavaScript getting the wrong window size

I am messing around with some code and applying / removing classes based on window size and I'm running into a weird error. I've confirmed that I'm at the default zoom (if that matters), and I've replicated the issue in FF & Chrome.
I have a resize event handler that I'm just using to monitor the javascript window width value vs. the actual value (I have a chrome extension which shows the window & viewport width as you're resizing, and my bootstrap viewports hit exactly as they should at 992px, 1200px etc, so I know that the javascripts value is off for some reason and not vice-versa)
For some reason, as I resize the window, the value for window width that shows in the console.log, is always 21px smaller than the actual screen size. This is the code that I'm using for the test:
var w = 0;
$(function () {
w = $(window).innerWidth() || $(window).width();
})
$(window).resize(function () {
if (w != $(window).innerWidth()) {
w = $(window).innerWidth() || $(window).width();
console.log(w);
}
});

Give this a try:
var iw = $('body').innerWidth();
jsBin demo
answer from: https://stackoverflow.com/a/8340177/504836

How would I run this code at a certain window width in my web page?

I have this code:
<script type="text/javascript">
var snapper = new Snap({
element: document.getElementById('content'),
disable: 'right'
});
</script>
And I want it to run/be turned on only when the window width is less than or equal to 768px. How would I do this with javascript?
Thanks

Use the window.onresize event.
window.onresize = function ()
{
if (window.innerWidth <= 768)
{
var snapper = new Snap({
element: document.getElementById('content'),
disable: 'right'
});
}
}
Note that this will only fire when resizing of the window is complete, and that you may want to use jQuery's $(window).width() instead of pure javascript since it can be a little wonky. Also, if you want to undo what you did in the above if statement, you'll want to attach an else block with the appropriate code. Finally, if optimization strikes your fancy and you want to avoid running unnecessary code (eg if the window is resized to 768 and subsequently 700, there's no reason to run the if block both times) you may want to set a flag that's checked by the if and else if blocks (your else block would turn into an else if) to prevent creating a new Snap when it's not necessary.

Use the window.innerWidth property to determine what the width of the viewport. Note that this does include the vertical scrollbar.
if(window.innerWidth <= 768) {
// your code
}
Source: https://developer.mozilla.org/en-US/docs/Web/API/window.innerWidth
Note that the innerWidth property is not available in versions of IE prior to IE9; Safari prior to Safari 3; and Opera prior to Opera 9.

Consider using modernizr's media query functionaility to determine if you want to run this code or not.
You can do a media query just like in CSS, and then if it's true, run your code.
if(Modernizr.mq('(max-width: 767px)'){
//your code
}

With jquery you should be able to get the width and height of the window with
$(window).width();
$(window).height();
To do what you're after (If you're already using jquery)
$(window).resize(function() {
if ($(window).width() <= 768) {
//do your code
}
else {
//go back to normal
}
});

JS or jQuery or window resize or when window width is less than npx

How can I detect when a user resizes the browser window?
I'm looking for a script that does somenthing when user resizes the window or when the window's width is less than, for example, 900px.

Meh, You can use jQuery, but...
You can subscribe to the window resize event like this:
$(window).on("resize", function(event){
console.log( $(this).width() );
});
Just be careful with this, since a if-statement that executes code when the width is less than n would execute that code a ridiculous number of times while you resize a window that meets those conditions. Better to set some flags or add classes to the document, and make those part of your condition as well.
CSS Media Queries is Where It's At!
However, what you're asking sounds like it would most appropriately be solved with CSS Media Queries. For instance, if we wanted to change the body background color when the window is less than 900px:
#media screen and (max-width: 900px) {
body {
background: #ccc;
}
}
There's even a great polyfill for older version of IE: https://github.com/scottjehl/Respond

jQuery:
$(window).resize(function() {
//do something
var width = $(document).width();
if (width < 900) {
// do something else
}
});

$(window).resize(function() {
$('body').prepend('<div>' + $(window).width() + '</div>');
// Do stuff
});

According to what you need, this could handle when windows size is less than 900px:
$(window).on("resize", function(event){
console.log('User is using resize!');
var w = $(this).width();
if(w < 900)
console.log('Your window is ' + w + 'px (less than 900px)');
});​

You can use $(window).resize() like follows
$(window).resize(function() {
if($(this).width() < 900)
//do whatever you want
});
Here is the documentation for $.resize

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.