My jQuery Code doesn't work with Sticky footer - javascript

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.

Related

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/jQuery inquiries

JavaScript/jQuery:
$(document).ready(function(){
"use strict";
var windowHeight = $(window).height();
var homePageHeight = $('#main').height();
if (windowHeight >= homePageHeight){
$('#main').css("padding-top", (((windowHeight-homePageHeight)/2))-130);
$('#main').css("padding-bottom", (((windowHeight-homePageHeight)/2))-130);
}
$(window).resize(function() {
var windowHeight = $(window).height();
var homePageHeight = $('#main').height();
if (windowHeight >= homePageHeight){
$('#main').css("padding-top", ((windowHeight-homePageHeight)/2));
$('#main').css("padding-bottom", ((windowHeight-homePageHeight)/2));
}
});
Basically I have a section here on my HTML that handled by that code above:
<section id="main">
</section>
I understand that these codes handles the size of the screen on the top but can anyone help me understand in layman's term how does the windowHeight and homePageHeight works? You simply explain it to me each function on the top line by line if that's possible.
$(window).height(); assigned to windowHeight is height of the (browser) window or viewport. With respect to the web browsers the viewport here is visible portion.
$('#main').height(); assigned to homePageHeight is height of the div or section identified by ID main
(windowHeight >= homePageHeight) checks whether browser height is greater than height of section #main
if windowHeight greater than or equal to homePageHeight, then a padding is added to top and bottom of #main
$('#main').css("padding-top", (((windowHeight-homePageHeight)/2))-130);
$('#main').css("padding-bottom", (((windowHeight-homePageHeight)/2))-130);`
Look at the JQuery Docs. The function height() is your favourite.
The measured height = (Height of Element) - (margin + border-width + padding of Element)
windowHeight is a variable, it's value is being set to the height of the browser window.
homePageHeight is also a variable, it's value is being set to the height of div#main.
When the document loads, it's checking if windowHeight is greater than or equal to homePageHeight; if it returns true, it is applying some css using jQuery.
When the window resizes, it's doing a similar thing again.
The rest of the code is very self-explanatory. If you still do not understand it, you need to read up on Javascript and jQuery.

jQuery element height calculation behaving unexpectedly

New to playing with jQuery and javascript (and stackOverflow). My project is basically a scrolling page with linked divs.
For aesthetic reasons, I wold like to have each div fill the size of window and I decided that jQuery would be an easy way to do this. The basic structure is this:
IF the div is shorter than the window
THEN grow to the size of the window.
ELSE use an auto height
I can get a single div to behave this way, the problem is I am applying this to a class and the other objects do not seem to want to behave in the same manner. Here is a fiddle (first time making a fiddle so if the link is not working let me know -
http://jsfiddle.net/ksaiyo/VBMVQ/3/
This fiddle shows the exact opposite:
http://jsfiddle.net/ksaiyo/6YYFU/1/
My script is here, but the fiddle seems to show the effect well enough. The heights stay at the auto height. (I have a fixed navigation header and unelegantly used padding on top so the linked elements in the page line up correctly - thus the extraneous variables)
$(document).ready(function() {
var divHeight = $( ".content" ).height();
var winHeight = $( window ).height();
var headerHeight = $( "header" ).height();
var viewHeight = winHeight - headerHeight
var newHeight = winHeight + headerHeight;
if (divHeight <= viewHeight ) {
$( ".content" ).height(newHeight);
};
)}
I have searched around and I can't seem to nail down the exact reason to why this is occurring. I tried to use an else statement in conjunction, but then everything including the small elements adopt the auto height. (I tried it in the fiddle as well)
Thanks in advance for your help.

How to show data only when in viewport

I'm planning to use a jQuery plugin called charts.js
for graphs and charts. However, on a larger page, the animations of those graphs get completed even before the user sees them.
My question is, how do we fade in the content of a particular div/section only when it is visible inside the viewport as exactly depicted on charts.js website. The content fades in sequentially as we scroll down and hence even the animations of the graphs aren't missed. How can I achieve this with the help of jQuery?
Take a look at this jsFiddle. The author fades in boxes as they become visible. You porbably need to call chart.js to create the graphs as they become visible, rather than just fade them in (that is if you want the fancy graph animations, rather than just a fade-in :-)) I have tweaked the fiddle and included it below:
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.graph').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
//Code to initialize the graph here.
//This initialization should probably
//be deferred, to ensure performance,
//and the graphs should be marked as
//initialized so we dont't init them
//multiple times (possibly by changing
//their class so .each ignores them).
}
});
});
});
Mika's Viewport Selectors plugin works for the browser window viewport and not html elements. In other words if you got some css like #container{width:350px;height:150px;overflow:auto;} it will not work when scrolling.
I recommend trying his other plugin, Lazy Load
Here's an example: http://jsbin.com/efazos/1/edit
The following code will enable you to determine whether an element is within the window on the scroll of the document. From there you can enable your chart and do whatever animations you like :
<script type="text/javascript">
$(document).ready(function() {
$(document).on('scroll', function() {
//Get Div 1's Top and Left offsets from the Document.
var divTop = $('#div1').offset().top;
var divLeft = $('#div1').offset().left;
//Get the current window height and width.
var winHeight = $(window).height();
var winWidth = $(window).width();
if (divPos <= winHeight && divLeft <= winWidth) {
//Div is visible in window
//Fade in Chart
}
});
});
</script>

fixed div on bottom of page that stops in given place

I have fixed div on bottom of my page that works well. I wonder if there is some simple way to make it "stop" on some place in page when user srolls down to it. I want it to remain fixed on bottom, until user scrolls down to some defined place on page and than stick it to the page and scroll like the rest of content. Any suggestions?
I tried setting something up on jsfiddle. While I was writing it up, I see that others have posted their alternatives. In case mine helps in any way: http://jsfiddle.net/PnUmM/1/
I set the position to relative in the CSS, calculate where it is on document load to keep the info aside and then set it to fixed.
var sticky_offset;
$(document).ready(function() {
var original_position_offset = $('#sticky_for_a_while').offset();
sticky_offset = original_position_offset.top;
$('#sticky_for_a_while').css('position', 'fixed');
});
$(window).scroll(function () {
var sticky_height = $('#sticky_for_a_while').outerHeight();
var where_scroll = $(window).scrollTop();
var window_height = $(window).height();
if((where_scroll + window_height) > sticky_offset) {
$('#sticky_for_a_while').css('position', 'relative');
}
if((where_scroll + window_height) < (sticky_offset + sticky_height)) {
$('#sticky_for_a_while').css('position', 'fixed');
}
});
I made this up for you: http://jsfiddle.net/XCYFG/1/.
$(document).ready(function() {
window._div1 = $('#div1'); //selector is expensive
window._window = $(window);
$(window).scroll(function(e) {
_div1.css("top",
Math.min(_window.height(),
window.scrollY + 100)
+ _window.height() - _div1.height() - 110);
}).scroll();
});
I have a plugin that does the opposite - it's in the flow of the webpage, and when the user scrolls past it, it gets fixed to the viewport. What it actually does though is apply a css class to the element, so you should be able to use it as is.
You can find the plugin here:
https://github.com/hanssonlarsson/jquery-fixedscroll
Then I would suggest you have your element in the flow of your webpage:
<div id="sometimesFixed">content</div>
With css:
#sometimesFixed {
position: fixed;
bottom: 0;
}
#sometimesFixed.scroll {
position: static;
}
And apply the plugin like so, in your JavaScript:
$('#sometimesFixed').fixedscroll({className: 'scroll'});
There is also a more general plugin, very new, called jquery-waypoints. The idea is to bind any code to "waypoints", points on the webpage where, when the user scrolls past them, some code is executed.
https://github.com/imakewebthings/jquery-waypoints
It's probably more optimized and a better fit than my plugin, but YMMV!

Categories