window size jquery bug - javascript

While trying to create a single page template with parallax scrolling I found and odd problem. I'm am suspecting that the problem is in either the jQuery portion of maybe even the CSS it self, but I am rather not sure.
My current jQuery code bit reads the window size of the visitors browser and adjusts the height of the slides for each different anchored page. This way I achieved full with backgrounds no matter the window size. But in same time I realized that If I add different CSS components, they will not expand the active anchor background height, but rather will overflow onto the other slide.
Here is the jQuery portion responsible for the slides height
$(function () {
$('.windows').css({
'height': (($(window).height())) + 'px'
});
$(window).resize(function () {
$('.windows').css({
'height': (($(window).height())) + 'px'
});
});
});
And here is the site URL https://docstax.net/esgh/
Go to Plans and resize your browser you will see what I mean by not adjusting the high of slide based on needed high of content inside.
Edit: As suggested by putvande there where way to many $(window) which I was aware of, do to that I updated and minimized the code.

Basically you don't want to manually add a height component to the div if the content is going to be too large for the container. Here's what I think would work:
$(window).bind("load", function()
{
var windowHeight = $(window).height();
$('.windows').each(function(index) {
if ($(this).height() < windowHeight) {
$(this).height(windowHeight);
}
});
$(window).resize(function() {
var windowHeight = $(window).height();
$('.windows').each(function(index) {
if ($(this).height() < windowHeight) {
$(this).height(windowHeight);
}
});
});
});

You can try like this one:
<script type="text/javascript">
$(function(){
var height = window.innerHeight;
$('.windows') .css({'height': height+'px'});
$(window).resize(function() {
var reheight = window.innerHeight;
$('.windows') .css({'height': reheight+'px'});
});
});
</script>

I tried your page, I'm failing to see a problem :
The sections are resized as they should. Content is display as it should considering the styles applied.
When a section is smaller than its content, the content starts bleeding out on other pages. Perfectly normal. You could set overflow: hidden; on your .windows to prevent that from happening and/or use media queries to resize the content.
Here is a lighter function by the way, just edited your code :
$(function() {
$(window).resize(function() {
$('.windows').css({ 'height': $(window).height() });
}).resize();
});
No need to write the code twice : setting the resize handler and triggering it manually should do.
Write it once, so when you need to change it, you'll change it only once.
You could also reset de scrollTop in your resize handler to keep focus on the same portion of the page.

Related

jQuery: How to get the dynamic height of header

I am new to jQuery. And I can't figure out the solution to this problem.
So, the problem is that I want a fixed header on my website. I did that with CSS. But I want to give the main container div(right below the header) a margin-top of the height of the header.
For example, if the #masthead (header) height is 100px, I want to give a margin-top of 100px to .site-container.
I can easily do it with CSS, but due to some reason, there will be different header height on different pages. Or let's suppose that I don't know the height of the header.
So I want to do it using jQuery.
Here is the code -
jQuery(document).ready(function($) {
var header = document.getElementById("masthead");
var header_height = header.offsetHeight + "px";
$( '.site-content' ).css( {
'margin-top': header_height
} );
});
It works perfectly. But there is just one problem.
That, the header height on my website changes in different screen size. In Desktop Screen size, the #masthead height is 80px, in tablet, the screen size is 160px and in mobile, it's 60px.
But, the value of header height does not change with the change in screen size in jQuery.
In jQuery, I want the value of the variable header to change dynamically, with the change in screen size.
Please note that I am working on a WordPress website.
Please help me.
Thank you.
Use:
Use a window resize function
You could also use: (to make your life easier :)
jQuery selectors
.outerHeight() to "Get the current computed outer height (including padding, border, and optionally margin)"
Example code:
jQuery(document).ready(function($) {
// When the window resizes
$(window).on('resize', function () {
// Get the height + padding + border of `#masthead`
var mastHeight = $('#masthead').outerHeight();
// Add the height to `.site-content`
$('.site-content').css('margin-top', mastHeight);
});
// Trigger the function on document load.
$(window).trigger('resize');
});
Write the same function on window.resize.
By the way, after resize the screen reload the page, hope your code will work as it will get the document ready function.
You can execute the same function on both page load and window resize.
jQuery(document).ready(function($) {
function resizeContent(){
var header = document.getElementById("masthead");
var header_height = header.offsetHeight + "px";
$( '.site-content' ).css( {
'margin-top': header_height
});
}
resizeContent();
$(window).resize(resizeContent);
});

Resetting div height when window is resized

I'm trying to set the height on a responsive layout using javascript. I notice that when using the following function the height does get applied when making the window narrow but doesn't get reset when moving back to the original wider window position. The height is retained no matter what the window size is. How do I reset the div to the original height?
$(function () {
$(window).on("load resize", function () {
console.log($(this).width());
if ($(this).width() < 1025) {
$(".case-study-child").height($(".case-study-parent").height());
}
}).trigger('resize');
});
The best way to do this is with proper arrangement of the markup and use of responsive styles. However there may be a reason that responsive style is insufficient and it needs to be solved with js:
You'll need to define the 'full screen' height of the .case-study-child div so it can be set when the screen width goes above 1024. This is necessary in case the page is originally loaded at < 1024
$(function () {
// need to know what the div height should be when the page width is >= 1025px
window.fullScreenHeight = "250px";
$(window).on("load resize", function () {
console.log($(this).width());
// get the height to set the div to based on the screen width
var newDivHeight = $(this).width() < 1025 ? $(".case-study-parent").height() : window.fullScreenHeight;
$(".case-study-child").height(newDivHeight);
}).trigger("resize");
});

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

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>

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.

Categories