I have a div that has an inline height set to be 100% height of the browser window:
element.style {
height: 400px;
}
#scrollable-div {
overflow-x: hidden;
overflow-y: scroll;
position: relative;
width: 270px;
}
With JS or jQuery, I want to determine whether that div currently has a scrollbar, and if so, hide/show a different div. Any thoughts?
You can use this function to know if the element has scrollbar:
$(document).ready(function() {
var mydiv = $('#scrollable-div');
console.log(mydiv1[0].scrollHeight);
console.log(mydiv1.height());
if (mydiv1[0].scrollHeight > mydiv1.height()) {
console.log(1);
//Has scrollbar
}
else {
console.log(2);
//Dont has scrollbar
}
});
I'd suggest having another div that contains the content and is within scrollable-div. This will help track the height of the content for you to perform logic on.
if ($('#scrollable-inner').height() > $('#scrollable-div').height())
$('#dependent-div').hide();
else
$('#dependent-div').show();
See full code & demo at this jsFiddle.
Related
Is there a way to find out if an DOM element has scroll capabilities without checking its styles?
Currently, I'm looking for overflow: auto or scroll on the element. I'd like to know a JavaScript method that can check if the element is the scroll container for a deeply-nested child element.
[EDIT]
This isn't to find out if it's got a scrollbar showing; I wanna know if it's a container that would display a scrollbar if the contents extend past the container height.
In my experience, the browser is doing this naturally sometimes, but I can't figure out why. That tells me there's something on the container in JS saying "I will display scrollbars when the content is larger".
I was thinking it could have something to do with height: 100% and position: absolute, but then there are bound to be other situations as well.
Strangely, the browser is showing these elements as overflow: visible from the user-agent stylesheet, but it should never show scrollbars in that case.
You can compare the clientHeight of the element com the scroll height of it.
I made a function that makes it.
var myDiv = document.querySelector("#my_div_1");
var myDiv2 = document.querySelector("#my_div_2");
console.log("There's scroll in my_div 1 = " + hasScrollY(myDiv));
console.log("There's scroll in my_div 2 = " + hasScrollY(myDiv2));
function hasScrollY(elem) {
return elem.clientHeight < elem.scrollHeight;
}
#my_div_1 {
background-color: lightblue;
height: 50px;
overflow-y: scroll;
}
#my_div_2 {
background-color: lightgreen;
height: 60px;
overflow-y: scroll;
}
p {
height: 20px;
}
<div id="my_div_1">
<p>
This is a div with overflow
</p>
</div>
<br>
<div id="my_div_2">
<p>
This is a div without overflow
</p>
</div>
I have two divs with animation, both are doing the same but with different animation. I have
$(document).ready( function(){
$('#show_hide_button').click( function() {
$('#some_box').animate({ width: 'toggle' });
});
});
Whole code in in jsfiddle http://jsfiddle.net/xLHb8/192/
Can anyone please explain to me why first div is animating right to left, left to right and second div is animating always to top left corner.
How can I make second div animate same as first div?
First, the relevant details in your code should be included in your question (in addition to providing the fiddle). But so you have the following CSS:
#some_box {
background: #fc0;
width: 25%;
height: 200px;
}
.second img {
max-width:100%;
max-height:100%;
}
.second {
width: 200px;
}
With the following HTML:
<button id="show_hide_button">click me</button>
<div id="some_box"></div>
<div class="second">
<img src="http://piq.codeus.net/static/media/userpics/piq_66223.png" />;
</div>
Note that you're setting the img to have a maximum width and height of its parent container. So because you're toggling the width of the parent, as parent collapses, the image is scaling down. Further, since you don't have a height setting on the img, its height is going to animate along with the animated width. This creates the effect of the image animating to the top left corner.
Without further details, it's hard to say how to fix your code to achieve the desired effect.
Update
If you want the width only to collapse, you can set a pixel height on your image so that it doesn't scale in proportion to its width:
.second img {
max-width: 100%;
height: 200px;
}
You can also put both animations in a single click event handler, like so:
$(document).ready( function(){
$('#show_hide_button').click( function() {
$('#some_box').animate({ width: 'toggle'});
$('.second').animate({ width: 'toggle' });
});
});
Forked your fiddle: http://jsfiddle.net/u1sdd8j5/1/
Update 2
From the comments, it seems like you want the image to collapse to the left, without losing the aspect ratio. We need to get a little creative to pull that off, especially if you're looking for a solution involving jQuery.animate(). The image actually needs to move downwards as it is scaled down. We can pull that off by animating the <img> itself, rather than its container, and adjusting its top margin at the same time animate its width.
Revised CSS (making the containers the same size for consistency):
#some_box {
background: #fc0;
width: 25%;
height: 200px;
}
.second {
width: 25%;
height: 200px;
}
.second img {
max-width: 100%;
max-height: 100%;
}
Revised JS:
$(document).ready( function(){
$('#show_hide_button').click( function() {
$('#some_box').animate({ width: 'toggle' });
var $secondImg = $('.second img'),
secondImgMargin = $secondImg.is(':visible') ? '50%' : 0;
$('.second img').animate({
width: 'toggle',
marginTop: secondImgMargin
});
});
});
Note that we need to first determine whether or not the <img> is visible. If it is, then we want to animate the top margin to 50%. If it's not, then switch the top margin back to 0.
Here's a new forked fiddle: http://jsfiddle.net/xwanm9ze/1/
Final Note
All of this might be easier to achieve with CSS3 transitions. You would want to set up a class that toggles the animation. And you can specify the transform-origin which, in this case, would be 'left center'.
The problem is, that you added a relative width and height attribute to the inside the second div and did not give a height and width attribute to the second div. This way, the image controls the height and width of the second div, since it has no height and width attribute.
In your case, a solution would be to give the second div a fixed width and height
Also, for the JQuery, you only need one $(document).ready function
$(document).ready(function () {
$('#show_hide_button').click(function () {
$('#some_box').animate({
width: 'toggle'
});
$('.second').animate({
width: 'toggle'
});
});
});
#some_box {
background: #fc0;
width: 25%;
height: 200px;
}
.second img {
width:100%;
height:100%;
}
.second {
width:200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="show_hide_button">click me</button>
<div id="some_box"></div>
<div class="second">
<img src="http://piq.codeus.net/static/media/userpics/piq_66223.png" />
</div>
I want to make a half shown div in a page, like a footer. When I click it I want it to slide up. The div will contain information on it.
I achieved this somehow, but my problem is that the div does not get really hidden it just changes the position.
You can find the demo here: http://jsfiddle.net/8ZFMJ/394/
var clicked=false;
$(".two").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"bottom": -430});
}
else
{
clicked=true;
$(".two").css({"bottom": "-200px"});
}
});
I had a similar problem a while ago, in fact I think it was my first stackoverflow question. Unfortunately it got poorly received.
Anyway, the problem is currently that you are just changing the position of the div - that's what .bottom does. I think what you want to do is change the height, see this JSFiddle in which I managed to switch the div between states (no animation yet).
It makes simple use of css's overflow-y: hidden; to hide the div's contents when it is small, and all the JS does is toggle between heights:
if(clicked)
{
$(".two").css("height", 10);
}
else
{
$(".two").css("height", 250);
}
clicked = !clicked;
clicked = !clicked just flips the boolean state of the variable.
Now, to add the animation, we can use jQuery's .animate and produce this beautiful Fiddle
Basically, all we had to do in between is use animate instead of css. Simple, really.
TL;DR
final JSFiddle
.two must be absolute positioned inside .container that must be relative positioned. Then you just change the bottom with a negative value and that will hide the footer.
CSS:
html, body { height: 100%; }
.container {
position: relative;
height: 100%;
overflow: hidden;
}
.two {
position: absolute;
background-color: yellow;
width: 100%;
height:250px;
bottom: -200px;
transition: bottom 1s;
}
jQuery:
var clicked=false;
$(".two").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"bottom": "-200px"});
}
else
{
clicked=true;
$(".two").css({"bottom": 0});
}
});
http://jsfiddle.net/8ZFMJ/398/
I have a div called container which contains dynamically created content(paragraphs) through javascript. The problem is that the paragphs aren't shown on the div once they reach beyond the boundaries of the container. To solve this issue, I tried overflow but that just added x,y scrollbars.
What I'm trying to do is increase the height of the container after every parapgraph added i.e. when paragraph is added to container of height 20px, the container increases height to a further 40 px for next paragraph.
HTML
<div class="container"></div>
Add content
CSS
.container {
width: 120px;
height: 20px;
display: inline-block;
margin-left: auto;
margin-right: auto;
/* overflow: auto; */ //As aforementioned, I'm not in favour of scrollbars
background-image: url('http://i.imgur.com/dfzk0TW.png');
}
Javascript
$(function () {
$('#add').on('click', function () {
$('<p>Text</p>').appendTo('#container');
});
});
Any suggestions? Thank you!
Try this code
jsfiddle
remove height from css and use below code
$('<p>Text</p>').appendTo('.container');
remove # and put dot(.)
this code will get height of container div and than will add 20px in container div.
$(function () {
$('#add').on('click', function () {
$('<p>Text</p>').appendTo('#container');
heightWithPx = $('#container').css('height');
height = heightWithPx.substr(0,heightWithPx.length-2);
newHeight = parseFloat(height)+20;
$('#container').css('height',newHeight+'px');
});
});
I have a bootstrap navigation menu with more than 20 items and I want to get a fixed height to navigation therefore the menus that exceed the width of the container do not breaks but are hidden.
ul.fixedHeight {
height: 50px;
overflow: hidden;
}
Then I checked with jQuery if there is a hidden menu to show the button.navbar-toggle to slidedown and show the hidden menu:
JS:
function showhidebtn(){
var element = document.querySelector('ul.navbar-nav');
if((element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)){
$("button.navbar-toggle").removeClass("hidden");
$("button.navbar-toggle").addClass("visible");
} else {
$("button.navbar-toggle").removeClass("visible");
$("button.navbar-toggle").addClass("hidden"); }
}
CSS:
#media (min-width: 768px) {
button.navbar-toggle {
position: absolute;
bottom: 0;
margin-left: -50px;
background: #000;
}
button.navbar-toggle.hidden {
display:none;
}
button.navbar-toggle.visible {
display:block;
}
}
Lastly I run the function if the window size is greater than 768 or or when it is resized.
jsFiddle demo
The problem is that when window size is greater than 768 and I click to the button to show the hidden items the slidedown doesn't work, but it works when window size is less than 768.
Any help is appreciated! Thank you!
As said, the height is restricting it from growing when it's supposed to on the button click. However, you could fix this with javascript:
//initially the button is not clicked
clicked=false;
$('button.navbar-toggle').click(function(){
if(clicked==false)
{
//if the button isn't clicked and you click it,
//let the height grow and make the overflow property as visible
$('.nav.navbar-nav.fixedHeight').css('overflow','visible');
$('.nav.navbar-nav.fixedHeight').css('height','auto');
clicked=true;
}
else
{
//vice versa when you need to close it
$('.nav.navbar-nav.fixedHeight').css('overflow','hidden');
$('.nav.navbar-nav.fixedHeight').css('height','50px');
clicked=false;
}
});
DEMO