We Keep Coding

How to get window width via Javascript

I am looking for some help concerning my Jquery. I have an animation, that is opening a navigation menu, running from the right window site into the middle. What I want to do now is: When the user is reducing the browser window width (lets say in a step of 100px), the Animation should run a 100px less into the middle. Below you can the the short version of my code. Is there a way to define the width using the value of a class, that I have written in my css?
$(".slide-left").click(function(){
$("#navibox").animate({ width: 863 }); });

You cannot define the width with the value in a class. Although to get the width of the window itself, you can use
window.innerWidth
If you'd like to have some code run when you resize you can add an eventListener, with the event name of 'resize' like this.
window.addEventListener('resize', (e)=>{})
The event passed from that callback has the property 'target' which is the window instance that you can grab the innerWidth from again.
If you have to update the animation with some new evaluated width, you can do it there.

Thanks! I already tried something like this:
$(window).resize(function(){
if ($(window).width() > 1000) { mywidth = 863; }
if ($(window).width() < 1001 && $(window).width() > 959 ) { mywidth = 823; }
if ($(window).width() < 960) { mywidth = 783; }
});```
In the animation I used:
```$("#navibox").animate({ mywidth });```
But that did not work...

How to Get live window width and apply it live in a div?

I am using jQuery-1.11.0 in my project. I have a horizontal menu and it looks like sliding menu. my problem was IE support for transition(I applied transition for smooth sliding). My menu works on most of the browser but not works in IE9 and lower. so I decided to do this with Jquery and I got solution for this. When my page loads it works fine (My plan was first i will add left: calc(-100%+50px); to my css and then when my Collapse button clicked I will change this css to left: 0px;so it will expend and agin when Collapse button clicked it wit restore to left: calc(-100%+50px);so it collapsed. But it seems like jquery can not animateleft: calc(-100%+50px);this type of css. I have tried this with jquery .animate() Method. But problem is after expending menu when i go to collapse the menu it don't show any sliding animation. It just add the css to menu.
here is my first try jsfiddle
here is my second try jsfiddle
here is my latest try jsfiddle
Which method is best and what can i do to fix this?

Here is another answer. I fixed your javascript. Should work on resize. What I did was resize and reposition the menu on resize. This way the button which is dependent on the menu moves with it. Below is the javascript code.
(function($) {
$(".button").on("click", function() {
if ($(".menu").css("left") == "0px") {
$(".menu").stop().animate({
left: -1 * $(window).width() + 30
}, 'slow');
} else {
$(".menu").stop().animate({
left: 0
}, 'slow');
}
});
$(window).resize(function() {
var width = $(window).width();
$(".menu").css("width", width);
if ($(".menu").css("left") != "0px") {
$(".menu").css("left", (-1 * $(window).width() + 30));
}
});
}(jQuery));

To get the live window width use below code:
window.innerWidth gives you the viewport width of the window while
window.width gives you the whole window width.
Thanks

In order to get the width of the window you must keep in mind that the user might resize his browser. This is why we wrap our code with the jQuery resize function for a live update of the width. Check the below code:
$(function() {
$(window).resize(function() {
var width = $(window).width();
// update the width of your element, the below line is just an example on how to do that
$("#someElementId").css("width", width);
});
});

Jquery resize document height

I'm having a little trouble with my jQuery/JS code.
Whenever the window resizes, the "stretch" function should be run.
Now, I tried this:
function stretch() {
var stretch_elem = $('.stretch');
if (stretch_elem.length) {
var h = $(document).height() - stretch_elem.offset().top - 70;
stretch_elem.height(h);
}
}
$(window).resize(stretch);
But something strange is happening, when I resize the window. The element I'm stretching is just getting longer and longer, even if I upsize the window and the document height is getting lower.
What am I doing wrong here?
Thanks in advance.

Just fixed it. Had to add stretch_elem.height(0); before setting the new height. Didn't think I needed to do that. But it's working now.

Get scrollable height of a page

First of all,I would like to know the difference between these terms:
- $(window).height()
- $(document).height()
- $(window).scrollTop()
These terms look somewhat similar to me and I am unable to understand the clear difference between them. Here are my answers:
$(window).height() : Gives the height of window which a user can see.
$(document).height() : Gives total height of document. This can be more/less than window height depending upon the content on the page.
$(document).scrollTop() : gives the vertical position of scrollbar in window.
Real Question:
I am trying to implement lazy loading kinda thing where I need to make a call to server when scrollbar has crossed a point 200px from bottom of page. I am unable to use the above values to get this.
Any help would be appreciated.

The window is the area that you can see - as if your screen is a window and you are looking through at the document. The document is the entire document - it could be shorter or much longer than the window.
This is the math you need:
if( $(document).height() - $(document).scrollTop() < 200 ){
//Do something
}

$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).scrollTop(); //Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.
$(window).scrollHeight(); //Height of the scroll view of an element; it includes the element padding but not its margin.

Eventually, I figured out what should be the calculations after understanding these terms. Thanks to the answers. I was almost right in my definitions.
function (isScrollable) {
var isUserAtBottom = ($(window).height() + $(window).scrollTop() + 200 > $(document).height());
if (isUserAtBottom) {
// Do something (Like Ajax call to server to fetch new elements)
return true;
}
}

Trigger JQuery function when passed half way down the page

Is there a way to tell if you have scrolled passed the center of the web page or in other words, when you have scrolled passed exactly half of the web page and your scrollbar is situated in the lower half of the browser window?
I want to be able to trigger this:
$('.pineapple-man').show(); when I have scrolled down passed half of the page?
Is this possible at all?
Your help would be so kind!

You can get the pixel amount of an element has been scrolled by using .scrollTop(). To listen to scroll events use .scroll().
When you want to identify the halfway, use height of the scroll:
$(window).scroll(function () {
if ($(window).scrollTop() > $('body').height() / 2) {
$('.pineapple-man').show();
}
});
If you are scrolling some other element than the whole window/body, please feel free to change the selectors.
To make the showing one-timer, add the removal of scroll event listener, by adding the following after the .show() call:
$(window).unbind('scroll');

I guess you want to do something like this:
if($(document).scrollTop() > $(document).height()/2){
$('.pineapple-man').show();
}
where scrollTop() gets the current horizontal position and height() defines the document height.

See the scroll event and the scrollTop method.

you can use the focus event if you scroll down to it (just like jQuery uses for their comments)
jQuery('selector').focus(function() {
jQuery('.page').show();
});