I have a one page website that uses jquery scrollLeft to scroll between horizontally aligned divs that will work as pages.
These divs should be 100% width and 100% height (equal to current viewport).
with jquery I did it right:
$('.row').css('min-height', $(window).height());
$('.row').css('width', $(window).width());
$(window).resize(function() {
$('.row').css('min-height', $(window).height());
$('.row').css('width', $(window).width());
});
The problem is that these divs will not be re-sized until the jquery.js is fully loaded and the doc is ready.
So I think the best way is to do it with raw JavaScript. How?
Thanks.
Have your tried loading jquery right before your <div class="row">...</div>
and put the script your wrote right after it?
Related
I need to adjust several elements in width and height in relation to window width. So I am using
window.onload = function() {
slideSizeUpdate();
};
$(window).resize(slideSizeUpdate);
to call my function.
After window resize everything is displayed correctly - but not onload. I guessed that this had something to do with the window-width-value.
So, I printed the width value of window and recognized that - onload - my window width had a value 'x' and when I resized for 1px left or right value 'x' of window width increased / decreased + / - 18px.
I assume that this causes the problems on my website onload. Does anybody know the reason for this and has anybody a solution how to fix it? That would be great!
EDIT
Its not that onload doesn't work at all. Its just the wrong values that it seems to get when it reads out the window width.
You can do like this:
$(window).on('load resize',function(){
slideSizeUpdate();
}).resize(); // trigger resize when page is loaded
Consider this scenario:
Some of the content is hidden via CSS. The resulting page is short and no horizontal scrollbar is required.
You calculate the window width on load event at which point scrollbars are not there.
You un-hide the content and now the page is tall and requires horizontal scrollbar.
The width of the window decreases by 17px (usual width of scrollbar) without you noticing.
If this is the case then one solution is to force the window horizontal scrollbar using CSS. You can use the following (although I recommend searching more on StackOverflow):
html {
overflow-y: scroll;
}
This question is a duplicate of jQuery scrollRight?
I have a div with a lot of content (width-wise) and overflow:auto, so i have the scroll bar at the bottom. It starts scrolled fully to the left: is there a way to scroll it all the way over to the right, using jQuery/native JS?
Even if there's a way to do this in CSS (which would normally be preferable) i need to do it in JS, because some other stuff happens in the table first in JS (using the jquery plugin DataTables to be specific) in the dom ready block, so my code needs to run after that.
I thought this would be simple but i've not managed to google anything useful.
thanks! max
Here's how I did it - you might consider it a bit hacky.
In the sample below, "#test" is a div with 100px width and overflow: auto.
$("#test").css("overflow","none");
$("#test").css("width","none");
var width = $("#test").width();
$("#test").css("overflow","auto");
$("#test").css("width","100px");
$("#test").animate({scrollLeft: width}, 100);
Here I'm getting rid of the width and overflow CSS properties to work out what the true width of the content is. Then I'm putting the CSS properties back on and scrolling to that width.
Here's a JSFiddle: http://jsfiddle.net/dReFh/
So here's the deal. I have a div (call it div.container for troubleshooting purposes) on my page that will hold dynamically loaded content from a database (loaded using PHP). I want to detect the user's scroll position from the top of div.container, not from the top of the page. Note, div.container is not positioned at the top of the page, but is a child div with a position roughly 50px from the top of the page. I am looking to get the scroll distance in pixels.
I tried this with zero success:
$("div.container").scrollTop();
Other than that, I really have no idea where to start with this. Any help is so greatly appreciated. Thanks much.
You need to get the window's scrollTop() and subtract the '.container' offset() top value:
$(window).scroll(function(){
var posTop = $(window).scrollTop() - $('.container').offset().top
});
See this jsfiddle demo.
use the offset to caculate the child div 's distance from the parent div,
i use 1 div element to make the .background for my site. and it's will be 100% height. to achieve that i use jQuery dimensions utility.
<div class="background"></div>
with this script to get the height
$('.background').css( 'height', $(window).height() );
but now, i want to make it's height dynamic. if we resizing the browser. the height of .background will follow the new size of browser. i understand this will require some event since the size change after the page is first rendered.
can you please tell how to make it with jQuery?
Use .resize().
$(window).resize(function() {
$('.background').css( 'height', $(window).height() );
});
Take a look at http://api.jquery.com/resize/.
You'll have to add the same code above to the window's resize event.
Shouldn't you be using css fixed positioning? This lets you set the height, width and position of an element relative to the viewport (the browser window).
Take a look at http://www.w3schools.com/Css/pr_class_position.asp
I have a sidebar on my page that I want to always be 100% of the container size. Sadly, I can't tell the element to do this via CSS alone as the page has a variable height due to dynamic content.
Is it possible to use jQuery to find the height of the content container, and adjust the sidebar height to match it?
I found a few jQuery plugins that kind of do what I want, but feel they are over complicated (and I can't seem to get them to work anyway!).
Assuming the id of your container is "container" and the id of your sidebar is "sidebar", you could try the following (untested!)
$(document).ready(function() {
$('#sidebar').height($('#container').height());
});
This should (on document load), resize the sidebar height to the same as the container height.
I'm going to continue on from Damovisa's answer.
$(document).resize(function(){
$('#sidebar').height($('#container').height());
});
However, this could fire an awful lot if you resize the page a lot. You could try this
$(document).resize(function(){
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function() {
$('#sidebar').height($('#container').height());
}, 100);
});
In the second example, it will only resize 100 microseconds after resizing.
This is also assuming that $(document).resize() will be triggered when the page size changes. You could always wrap it in a function, and call it on completion of any slideDown() etc