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

How do I decide the height and scrolling position of window in jQuery?

I need to grab the height of the window and the scrolling offset in jQuery, but I haven't had any luck finding this in the jQuery docs or Google. I'm 90% certain there's a way to access height and scrollTop for an element (presumably including the window), but I just can't find the specific. I am stuck on code below
var height = $(window).height();
var scrollTop =$(window).scrollTop();

I’m not sure what the jQuery Approved™ way of doing this would be, but in plain JavaScript:
var height = window.innerHeight;
var scrollTop = window.pageYOffset;

You must understand the basic difference between $(window) and $(document).
$(window) refers to the viewport
$(document) refers to the actual html document
So in your case you'd use $(document).scrollTop(); for the scroll distance and depending on needs (actual viewport height or document height) either $(document).height() or $(window).height()
Edit: Check out http://api.jquery.com/height/ and http://api.jquery.com/scrolltop/

My jQuery Code doesn't work with Sticky footer

I have a problem with my Sticky footer while using jQuery. The reason why I use jQuery is because it's a "Demand" so I have to use it.
Here is my jQuery Code :
$(document).ready(function () {
var bodyHeight = $("body").height();
var windowHeight = $(window).height();
if (windowHeight > bodyHeight) {
$("Footer").css("position", "absolute").css("bottom", 0);
}
});
You can Check the problem on My site
It sticks to the button of the page when then content is not bigger than the site, but then when it "breaks" when the Content gets longer than the window site.
hope you can help me and not refer to another page that use CSS, as I said, I have to use jQuery
Thanks again

$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
So you need to apply like this:
$(document).ready(function () {
var bodyHeight = $(document).height();
var windowHeight = $(window).height();
if (bodyHeight > windowHeight) {
$("Footer").css("position", "absolute").css("bottom", 0);
}
});
Replace to (windowHeight > bodyHeight) with (bodyHeight > windowHeight)
And also be assure about the selector Footer

You have real problems here:
It is a really strange idea to use jQuery for that. Why not use existing tutorial? e.g. tutorial with even points about asp.net
Your code will always cover its part of page: the footer has some height and this height will be taken out from content, it is a bad style of sticky footer to not think about that
Use another way of doing the task.

Trying to trigger event on certain scroll height using javascript

var amount = document.getElementsByClassName("cart-total-qty")[0].innerHTML;
console.log(amount);
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
var tenPercent = height*.9
window.addEventListener("scroll", function() {
scrollAmount = window.scrollY;
if(scrollAmount == tenPercent){
alert("It's happening (Insert Ron Paul)");
}
});
In my code above i am getting the height of the page using an example i found here: How to get height of entire document with JavaScript?
I am then trying to trigger an event once the user has scrolled to the bottom ten percent of the page. The problem is that scrollAmount does not ever reach within 10% of height
In my example height is returned as 1280 and scrollAmount never returns higher then 1040 while scrolling, but the strange part is that if i change the height of my browser i get different results for scrollAmount when i scroll to the bottom.

First of all, it is expected that scrollAmount would return a value significantly lower than content height of the document. If you look closer, maximum value of it is actually (content height - window height). Think of it like this: suppose your content was just one pixel longer than available window height, in that case what should be the maximum scrollAmount? I'd expect it to be 1.
So replace your tenPercent = height*.9 with tenPercent = (height-window.innerHeight)*.9
Second, you scroll in steps of 100px or so. Sure some animation may be there, but event doesn't fire constantly for every possible value of scrollAmount. It is unlikely that during scroll, scrollAmount would exactly be equal to tenPercent. So replace your scrollAmount == tenPercent with scrollAmount > tenPercent

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;
}
}