I want to get the screen and modify the css styles of my box.
Thats my code
if ($('.content').height() > $(window).height() - 100) {
$('.content').css("max-height", $(window).height() - 100);
}
Now I want to set the max height of the .content box lower than the height of my screen size.
If my content box is higher than my screen size, the css should set de max height and change the overflow to auto.
Looks like you could do this -
var content = $(".content");
// Cache the height in variables, no need to access DOM again and again
var screenHeight = $(window).height();
var contentHeight = content.height();
if(contentHeight>windowHeight-100){
content.css("overflow","auto"); // Note - this will change it for the current instance of the page and NOT in your CSS file
content.css("max-height",(windowHeight-100) + "px");
}
You can also combine the above two css properties in one single statement (written separately for explanation) -
content.css({"max-height":(windowHeight-100)+"px","overflow":"auto"});
I would suggest you to use the max height value along with px.
if ( $('.content').height() > ($(window).height() - 100) ) {
$('.content').css("max-height", ( $(window).height() - 100 ) + "px" )
.css("overflow","auto");
}
This would resolve you issue.
Do this -
var maxHeight = $(window).height() - 100;
if ($('.content').height() > maxHeight) {
$('.content').css({"max-height": maxHeight, overflow: "auto"});
}
Use unit "px"
$('.content').css("max-height", ($(window).height() - 100)+"px");
Related
In my jquery I am trying to calculate when the scrollbar is 100px from the bottom, and when it gets there I will do an ajax query (for now I am doing an alert as you can see).
$(document).on("scroll", function(e){
var scrollHeight = $(document).height();
var offset = $(document).scrollTop();
console.log(scrollHeight);
console.log(offset);
if(scrollHeight - offset <= 100){
alert("here");
}
});
For some reason that I can not figure out it doesn't work. If I scroll to the bottom I would assume that the height() would equal scrollTop() but it doesn't, and here is what it shows:
scrollHeight = 1923
offset = 998
Am I using the wrong methods for this?
You need to add the height of the window with scrollTop. Link
$(document).on('scroll', function () {
var docHeight = $(document).height(),
scrollTop = $(document).scrollTop(),
windowHeight = $(window).height();
if (docHeight - (scrollTop + windowHeight) <= 100) {
alert(docHeight - (scrollTop + windowHeight));
}
});
Looks like you might be forgetting to subtract the pane's view-able height. I've done something similar in my code here:
var scrollPos = $('#viewable-div').height() - $('#scrolling-content').height();
if ($("#scrolling-content").scrollTop() > (scrollPos - 100)) {
//load more
}
When you scroll the element all the way down, scrollHeight should be equal to scrollTop + clientHeight.
If the element has no scrollbars scrollWidth/Height should be equal to clientWidth/Height.
• When the element has no scrollbars IE makes the scrollHeight equal to the actual height of the content; and not the height of the element. scrollWidth is correct, except in IE8, where it’s 5 pixels off.
• Opera gives odd, incorrect values.
You can use a statement like this
((container.scrollTop() + container.height() + detectionOffset) >=
container.get(0).scrollHeight)
Where container could be the document.body and detectionOffset would be 100
This has been answered a few times before, including here
One piece of code that I'm using and is always working (even on Opera) is this:
$(window).on("scroll", function () {
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
/* Do something */
}
});
Got the script that auto adjusts width of children divs depending on the number of children. And on smaller screen i need them to be 100% wide. I've tried inserting the script right into the script that adjusts width on regular screen. Doesn't work. Also tried inserting it in the very bottom of the page. Didn't work too.
Here is the code
$(".basecollections").each(function(){
var child_width = 100 / $(this).children().length;
child_width = Math.floor(child_width);
$(this).children().css("width", child_width + "%");
if ( screen.width < 1000 ) {
$(this).children().css('width','100%');
}
})
http://jsfiddle.net/3x466nb1/
instead of screen.width you need to use $(window).width(): DEMO
$(".basecollections").each(function(){
var child_width = 100 / $(this).children().length;
child_width = Math.floor(child_width);
$(this).children().css("width", child_width + "%");
if ( $(window).width() < 1000 ) {
$(this).children().css('width','100%');
}
});
also if you want the change to be dynamic, you need to write this piece of code inside the resize event of the window element:
$(window).resize(function(){
$(".basecollections").each(function(){
var child_width = 100 / $(this).children().length;
child_width = Math.floor(child_width);
$(this).children().css("width", child_width + "%");
if ( $(window).width() < 1000 ) {
$(this).children().css('width','100%');
}
});
});
I'm trying to do the inverse of this fiddle, make a square with a width based on an a 100% based height.
http://jsfiddle.net/j372H/6/
<html style="height:100%">
<body style="height:100%">
<div id="square" style="background-color:black"></div>
</body>
</html>
$(window).ready(updateWidth);
$(window).resize(updateWidth);
function updateWidth()
{
var square = $('#square');
var size = square.width();
square.css('height',size);
}
Thank a lot for your help.
Seb.
In CSS set the height of the div also
<style>
html,body,#square { height:100%; }
</style>
then the reverse for your js function
function updateWidth()
{
var square = $('#square');
var size = square.height();
square.css('width',size);
}
Demo courtesy of wared - jsfiddle.net/wared/spSLP - - nice one, wared
$(window).ready(updateHeight);
$(window).resize(updateHeight);
function updateHeight()
{
var square = $('#square');
var size = square.height();
square.css('width',size);
}
NOTE - This needs the square div to have a height in the first place - height does not behave the same as width - just a heads up!
Using a simple math equation in the variable you can set a square div that re-sizes automatically.
change the 100 after * to give you a % width for your div.
see working jsfiddle for responsive width
$(document).ready(function() {
var height = ( $(window).height() / 100) * 100 ;
$('#square').width(height);
$('#square').height(height);
});
$(window).resize(function(){
var height = ( $(window).height() / 100) * 100 ;
$('#square').width(height);
$('#square').height(height);
});
If you go to the slideshow I am working on here, you can see that the image resizes and moves correctly if you resize the browser window.
...unless you make the browser window's width smaller than a certain amount (i can't tell what defines that amount) and then it stretches the image instead of scaling it. How can I fix this?
Here is my resize code:
winWidth = $(window).width();
winHeight = $(window).height();
ratio = winWidth/winHeight;
if(ratio > imgRatio){
$('#curImg img').css({width:winWidth});
imgWidth = winWidth;
imgHeight = $('#curImg img').height();
$("#curImg img").css({top: (-1*Math.round((imgHeight-winHeight)/2)) + "px"});
$("#curImg").css({height: winHeight + "px"});
}else{
$('#curImg img').css({height:winHeight});
imgHeight = winHeight;
imgWidth = $('#curImg img').width();
$("#curImg img").css({left: (-1*Math.round((imgWidth-winWidth)/2)) + "px"});
$("#curImg").css({width: winWidth + "px"});
}
You could also check out this jQuery plugin:
http://srobbin.com/jquery-plugins/backstretch/
Or CSS tricks which looks at multiple solutions:
http://css-tricks.com/perfect-full-page-background-image/
You should take a look to tha background-size properties, especially at the cover values
Something I wrote that works:
//oWidth - container width
//oHeight - container height
//iWidth = image width
//iHeight = image height
iRatio = iWidth/iHeight;
wRatio = oWidth/oHeight;
if(iRatio<wRatio){
imageWidth = oWidth;
imageHeight = Math.ceil(iHeight*(oWidth/iWidth));
}
else{
imageHeight = oHeight;
imageWidth = Math.ceil(iWidth*(oHeight/iHeight));
}
$('#backgroundResizeImage').css({
'height': imageHeight,
'width': imageWidth
});
Hope this helps!
I rewrote your example a bit to make a self-contained demonstration.
Two notes unrelated to your question.
Make sure to cache any of your jQuery objects. You don't want to fetch items repeatedly, as that comes with an unnecessary performance cost.
My example shows this happening in the resize event for the window - I'm not sure how you had yours set up. For production, it's very important to throttle events bound to things like the window resize event, since they can be fired as fast as a browser can manage, which can lead to bad consequences. See this excellent article by John Resig on a time this bit Twitter in the ass.
The biggest relevant change is that I altered the way it's setting the heights and widths of images depending on how their ratio compares to the window. I think this way is a little clearer, but that's subjective. But it does work!
http://jsfiddle.net/L4k3s/2/
var $window = $(window),
$img = $('img'),
imgRatio = $img.width() / $img.height();
$window.on('resize', function (event) {
var imgWidth = $img.width(),
imgHeight = $img.height(),
winWidth = $window.width(),
winHeight = $window.height(),
ratio = winWidth / winHeight;
// The image is wider than the window
if (ratio < imgRatio) {
$img.width(winWidth);
$img.height(winWidth / imgRatio);
$img.css({
left: 0,
top: (-1 * Math.round((imgHeight - winHeight) / 2)) + "px"
});
// The image is taller than the window
} else {
$img.width(winHeight * imgRatio);
$img.height(winHeight);
$img.css({
left: (-1 * Math.round((imgWidth - winWidth) / 2)) + "px",
top: 0
});
}
});
I am looking to create an overlay effect (modal) type effect on my website, I have one working already that is a fixed width and height, but I want it to fill 85% of the available screen space?
How can I achieve this?
My old code looks like this,
$('#overlay').fadeIn('fast');
$('#lightbox').css({
position:'fixed',
left: ($(window).width() - $('#lightbox').outerWidth())/2,
top: ($(window).height() - $('#lightbox').outerHeight())/2
});
You want the overlay to fill 85% of the screen space? Then you need to calculate the required width/height & x/y coordinates for that.
var targetProcent = 85;
var targetWidth = $(window).width() * (targetProcent / 100);
var targetHeight = $(window).height() * (targetProcent / 100);
var targetX = ($(window).width() - targetWidth) / 2;
var targetY = ($(window).height() - targetHeight) / 2;
$('#overlay').width(targetWidth);
$('#overlay').height(targetHeight);
$('#overlay').css({
"position": "absolute",
"top": targetY+"px",
"left": targetX+"px"
});
Alot of the variable assignments could probably be cut out, but left them in for clarity.