I able to set a div height as min-window height but can't set max-height as windowHeight similar way. Here is the code
$(document).ready(function() {
function setHeight() {
windowHeight = $(window).innerHeight();
$('.sidebar').css('min-height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
});
You don't need javascript nowadays to do that. Pure CSS is sufficient (and just height would be enough as well since you want to set min-height and max-height to the same value):
.sidebar {
height: 100vh;
}
vh is a relative unit referring to the height of the viewport. And it even works when resizing the window. Btw, same goes for vw which is the width of the viewport.
More information on the set of relative units and its browser support (as proposed by comments).
If you want both the min-height and max-height to be the size of the window why dont you just forgo the mins and maxs and just set the height itself?? You are pretty much bang on with your code however I would structure it a little differently. Are you loading the jQuery library?
$(document).ready(function() {
setHeight();
});
$(window).resize(function() {
setHeight();
});
function setHeight() {
windowHeight = $(window).innerHeight();
$('.sidebar').css('height', windowHeight);
console.log(windowHeight);
}
This will make the sidebar 100% of the screen height on load and on screen resize.
Alternatively if you are trying to make a page a tablet style web application you can achieve this 100% sidebar with css alone
html,body {
width: 100%;
height: 100%;
overflow:hidden;
}
.sidebar {
height: 100%;
/*set overflow-x + y to scrolls if you have a lot of content*/
}
this will give you the same effect without any javascript/jquery
http://jsfiddle.net/kdwnk2ax/1/
You can try this
$('.sidebar').css({
"max-height": windowHeight+"px",
"min-height": windowHeight+"px"
});
Demo http://jsfiddle.net/9kkukk2s/
Related
I am trying to implement a full height slideshow on my website. However, I would like the slideshow to be full height if the browser width is more than 767px.
This is my code so far:
if( $(window).width() > 767) {
$(window).resize(function() {
var winHeight = $(window).height();
var headerHeight = $(".navbar").height();
$('.slideshow, .slideshow li').height(winHeight);
});
$(window).trigger('resize');
}
It kinda works if I the browser starts on a width greater than 767. However. If if the browser starts on a width less than 767 and I start resizing more than 767, the script does not starts.
Any ideas how I could fix this?
The resize event handler is bound when your browser starts up only when width > 767, try removing the if condition and it should work fine
EDIT:
To make it apply only when it's width is > 767, the condition should be inside the resize event
$(window).resize(function() {
if($(window).width() > 767) {
var winHeight = $(window).height();
var headerHeight = $(".navbar").height();
$('.slideshow, .slideshow li').height(winHeight);
} else {
$('.slideshow, .slideshow li').height(400); //initial height
}
});
$(window).trigger('resize');
You should be able to do this much more easily in css with a media query.
#media (min-width:500px){
.slideshow{
height:100%;
}
}
I've created a sticky bar to stay at the bottom of the window. As the user scrolls down to the bottom of the page the same bar will stay fixed until the footer shows, then removes its fixed position, temporarily, to stay above the footer until the user scrolls back up and it remains fixed again.
I only want to happen when the page is wider than 680px. Anything under that will keep the sticky bar in a default position (CSS: position:inherit).
This is the website: http://ttd.firefly-digital.co.uk
It works as expected. However, when I test on Chrome in Mac it triggers my CPU fan which suggests this not very efficient and with my limited JavaScript skills, wondered if there is a cleaner way to achieve this is?
This is the current js code:
$(window).scroll(function(event) {
var scroll = $(this).scrollTop();
var docHeight = $(document).height();
var windowHeight = $(window).height();
var footerHeight = $('.footer').height();
if(docHeight - (windowHeight + scroll) < footerHeight) {
$('.contact-bar').css({
bottom: footerHeight - (docHeight - (windowHeight + scroll))
});
} else {
$('.contact-bar').css({
bottom: 0
});
}
});
var windowWidth = $(window).width();
$(window).resize(function() {
windowWidth = $(window).width();
if(windowWidth > 680) {
$('.contact-bar').css({
position: "fixed"
});
} else {
$('.contact-bar').css({
position: "inherit"
});
}
});
CSS code
.contact-bar {
background: $contact-bar;
width: 100%;
height: 40px;
text-align: center;
position: fixed;
bottom: 0;
z-index: 10;
}
You can do it in reverse. Make it so that the bar, without position fixed, is above the footer without any JavaScript (incl. media queries). Than add a fixed class with position:fixed and bottom:0 that will be added accordingly. Like so:
.contact-bar.fixed { position:fixed; bottom:0; }
The jquery code that will trigger this, is as follows:
$(window).scroll(function (event) {
var windowTop = $(this).scrollTop();
if (windowTop >= $(".footer").offset().top) {
$(".contact-bar").addClass("fixed");
} else {
$(".contact-bar").removeClass("fixed");
}
});
Then add a few lines that the above code will only fire if the window width is > 680, either with jquery or pure javascript. For example with:
if ($(window).width() < 960) { // above function }
Do note I have not tested this, so please comment if it doesn't work. Credit: Preventing element from displaying on top of footer when using position:fixed
You better use classes to target your elements, at least to prevent jQuery from traversing the whole DOM using selectors appropriately which is good in performance.
This might not be a simple question, but I try my best.
I have this example site: http://lotvonen.tumblr.com/
I have a little piece of javascript that automatically calculates the height of the inner browser window and sets that number as image wrapper div's height. Height of the image inside the wrapper is 100% of the wrapper, so that I get nice, full screen images on all normal screen sizes.
This works wonderfully on screens that are more wide than tall (desktops, laptops, etc).
But!
With screens that are more tall than wide (smartphones, iPads etc), the images get clipped from sides. I don't want that, so I have a temporary solution to have media query assigning height to auto and width to 100%, when browser screen max-width is 1024, so that no clipping occurs. But it's not a very good solution, and breaks at certain resolutions. It also destroys my JS with lower resolutions (eg. 800x600).
Here's the JS:
<script type="text/javascript">
var elems = document.getElementsByClassName('img'),
size = elems.length;
for (var i = 0; i < size; i++) {
var img = elems[i];
var height = (window.innerHeight) ? window.innerHeight: document.documentElement.clientHeight;
img.style.height=(height)+'px';
}
</script>
and here's my CSS:
.img {
max-width:100%
}
.img img {
width:auto;
}
.img img {
height:100%;
}
#media only screen and (max-width: 1024px) {
.img {
height:auto !important;
}
.img img {
height:auto !important;
max-width:100%;
}
and here's the div:
<li><div class="img"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></div>
How do I get it so, that when the browser window is more tall than wide (eg. 720x1024), the images adjust by width, and when the browser window is more wide than tall (eg. 1024x720) the images adjust like they do now (by height, with the JS).
Is this possible at all? Is there a simple CSS fix to this or do I need to mess more with JS?
Thanks in advance!
You could also get the aspect in javascript on a regular basis and then add a class to the body object that would specify if it was 4:3, widescreen, or portrait. Then make it run on an interval in case the window changes size.
Example
CSS
.43 img { width: auto; }
.widescreen img { width: 100%; }
.portrait img { height: 100%; }
JavaScript
var getAspect = function(){
var h = window.innerHeight;
var w = window.innerWidth;
var aspect = w / h;
var 43 = 4 / 3;
var cssClass = "";
if (aspect > 43) {
cssClass = "widescreen";
}
else if (aspect === 43) {
cssClass = "43";
}
else {
cssClass = "portrait";
}
$("body").addClass(cssClass); // Using jQuery here, but it can be done without it
};
var checkAspect = setInterval(getAspect, 2000);
I would suggest getting the aspect ratio first in javascript. Use window.innerHeight and windows.innerWidth, and make the necessary division. Then, make this a condition. When the screen in wider than its height, set the image in css to width: 100%. Otherwise, set height: 100%.
So I have a content div that looks best at incremental heights of 400px.
If the content varies in size, the bottom looks funny ie, if it's 638px tall due to the content inside. However if it's 800px it looks great (same for 1200 and 1600, etc.)
Is there a way to do a #div { min-height: 800px; } but if there is even 801px of content, make it snap to #div { min-height: 1200px; } with CSS or Javascript?
Something like this?
// set the height of a div with an id of 'test'
$(document).ready(function() {
var height = $('#test').height();
if(height % 400) {
height = height - (height % 400) + 400;
}
$('#test').css('height',height+'px');
});
I want make a screen width judge, when screen width is bigger than 1024px, the body scroll bar will hidden, else when screen width is smaller than 1024px the body scroll bar will show its scroll.
See code in
http://jsfiddle.net/xmJzU/ (overflow-x)
http://jsfiddle.net/xmJzU/1/ (overflowX)
And test in
http://jsfiddle.net/xmJzU/show
http://jsfiddle.net/xmJzU/1/show
However when I dragged my browser edge, adjuce screen width smaller than 1024px, there have no scroll bar appear. Thanks.
It works, you just need to also declare the width variable inside your resize handler as the global variable is not in its' scope.
jQuery(document).ready(function() {
var width = $(window).width();
if (width < 1025) {
$('body').css('overflow-x', 'scroll');
} else {
$('body').css('overflow-x', 'hidden');
}
$(window).bind('resize', function() {
var width = $(window).width();
if (width < 1025) {
$('body').css('overflow-x', 'scroll');
} else {
$('body').css('overflow-x', 'hidden');
}
});
});
Example fiddle
An alternative method to using javascript for this is to use CSS3 Media Queries, but obviously this is dependant on the min-browser spec requirements you have.
Try using this css:
body {
width:100%;
min-width:200px;
overflow-x:hidden;
}