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.
Related
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>
I have a function that corrects and adapts the size (and vertical alignment) of three fluid columns with text and images.
The script, while not polished/efficient yet, works exactly as expected but sometimes(?) fails at the beginning.
The functions is the following:
var resetHeight = function(){
var maxHeight = 0;
$(".same-height-col").height("auto").each(function(){
maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
}).height(maxHeight + 25);
var maxTextSize = 0;
var tempHeight;
$(".same-height-col").each(function(){
tempHeight = $(this).find(".links-text").height();
maxTextSize = tempHeight > maxTextSize ? tempHeight : maxTextSize;
});
var topMargin;
$(".same-height-col").each(function(){
topMargin = (maxTextSize - $(this).find(".links-text").height()) + 25;
$(this).find(".links-image").css("margin-top",topMargin);
});
}
The I call it twice:
$(document).ready(function() {
resetHeight();
$(window).resize(function() {
resetHeight();
});
});
The problem is that many times when I load the page, I see this:
That doesn't happen consistently, but it does happen pretty often, but as soon as I resize the window the script works exactly as expected:
So where could the mistake be?
The script is called for sure even at the beginning, if I put an alert in the function, and just load the page (with no resize), the alert pops up.
When you calculate the maxHeight value, you reset all the inline heights that were set in the previous resetHeight call by doing $(".same-height-col").height("auto"). However, you don't reset the margin-top properties that were added to the links-image elements.
This means that the second time that resetHeight is called (and all subsequent times), the maxHeight calculations will be different. To make sure the results are the same each time, you need to reset the margin-top property on the links-image elements before doing the calculation.
$(".same-height-col .links-image").css("margin-top","");
$(".same-height-col").height("auto").each(function(){
maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
}).height(maxHeight + 25);
You may also want to make that height maxHeight+50 rather than maxHeight+25 if you think the result of the layout after the resize looked better than the intial layout on load.
As i understand your issue, you should set attribute width and height of images and use the document ready handler:
HTML for all images in .links-image DIVs: {width/height/alt attributes should always be specified for image when possible}
<div class="links-image" style="margin-top: 53px;">
<img src="img/list.png" width="210" height="92" alt="">
</div>
JS code:
$(document).ready(function() {
$(window).resize(resetHeight).trigger('resize');
});
I’m starting with the premise that you want the box content components — the title, the subtitle, and the image — vertically aligned across all the three boxes. If this is not true, just ignore this answer.
While I can’t spot the issue in the code at hand, I would try to approach it another way, without JS: clearfix the columns and fix the height of the components: let’s say I expect titles to be one line of text, subtitles three lines, and images are already fixed-height.
The fixed height will give you vertical alignment, and the clearfix will take care of the column height.
Im using flexslider2 to show my slides.
But i have the problem, that the width of my li-elements are computed wrong at the first page load.
when i open firebug and click on the inline style, the width changes and everything is displayed correctly. Also when I just resize my browser, everything is correct.
Why do I have this problem?
When i look into the flexslider code, i find this:
slider.computedW = slider.itemW - slider.boxPadding;
which should be alright .... because on resize, it only uses the computedW:
if (vars.smoothHeight) methods.smoothHeight();
slider.newSlides.width(slider.computedW);
slider.setProps(slider.computedW, "setTotal");
please help me!!!
Do you have your flexslider inside a container? If so you can set flexslider to automatically adjust to that specific height when the page loads.
$(document).ready(function(){
var containerheight = $(".flexcontainer");
var borderWidth = $('.flexslider').css('height', containerheight.outerWidth());
});
Also, if your container is slightly another height than your flexslider should be you can use below. (The "5" is by how many pixels you want to change the height with)
$(document).ready(function(){
var containerheight = $(".flexcontainer");
containerheight = containerheight -5;
var borderWidth = $('.flexslider').css('height', containerheight.outerWidth());
});
A view in my web app has a table which may be extremely long, so I wrapped it in a div with overflow: auto; max-height: 400px; so users can scroll through it while keeping the other controls on the page visible.
I want to use a bit of JavaScript to dynamically adjust the max-height CSS property so the div stretches to the bottom of the browser window. How can I determine this value? jQuery solutions are fine.
The table doesn't start at the top of the page, so I can't just set the height to 100%.
Something like this would work I think:
var topOfDiv = $('#divID').offset().top;
var bottomOfVisibleWindow = $(window).height();
$('#divID').css('max-height', bottomOfVisibleWindow - topOfDiv - 100);
I had a very similar problem, except in my case I had a dynamic pop-up element (a jQuery UI Multiselect widget), to which I wanted to apply a max-height so that it never went below the bottom of the page. Using offset().top on the target element wasn't enough, because that returns the x coordinate relative to the document, and not the vertical scroll-position of the page.
So if the user scrolls down the page, the offset().top won't provide an accurate description of where they are relative to the bottom of the window - you'll need to determine the scroll position of the page.
var scrollPosition = $('body').scrollTop();
var elementOffset = $('#element').offset().top;
var elementDistance = (elementOffset - scrollPosition);
var windowHeight = $(window).height();
$('#element').css({'max-height': windowHeight - elementDistance});
window.innerHeight gives you the visible height of the entire window. I did something almost identical recently so I'm pretty sure that's what you need. :) Let me know, though.
EDIT: You'll still need the Y-value of the overflowed div which you can get by document.getElementById("some_div_id").offsetHeight, seeing that .style.top won't give you a result unless it has been specifically set to a point via CSS. .offsetHeight should give you the correct 'top' value.
Then it's just a matter of setting the size of the table to the window height, minus the 'top' value of the div, minus whatever arbitrary wiggle room you want for other content.
something like max-height: 100%, but not to forget the html and body height 100%.
Here's what i have so far:
function loadOff(){
$(document).ready(function(){
$("#eLoader").ajaxStop(function(){
$(this).hide();
$("#eventsContent").show();
var h = document.body.scrollHeight;
$("#bodyBackground").css("height",h+100+"px");
$("#sidePanel1").css("height",h-105+100+"px");
$("#bottom").css("top",h+100+"px");
});
});
}
This is a callback function for a JQuery ajax function, basically what is does is when all ajax is finished .ajaxStop() it hides the loader then shows the content.
The problem i am having is adjusting bodyBackground, sidePanel, and bottom to fit the content. I dont care to have it elastic and retract for short content at this point, i would just like it to extend to proper positioning based on content length.
All divs are absolutely positioned. The numbers in the function are broken down simply to make it easy to explain. -105 is the offsetTop of that element and +100 is the margin between the end of the content and the elements.
if there is a better, more efficient way to achieve this outcome, please, do tell.
Thanks.
Based on your code, the only thing you ought to see is the top 105px of #sidePanel1. Is that your intent? (h = the bottom of the window, according to your code.)
Sticking with the JQuery patterns, you would use
var h = $(window).height();
Maybe you're looking for this instead of the browser window's height? It will get the height of the content element.
$("#eventsContent").outerHeight();