Change div height onclick with animation - javascript

I'm trying to make a gallery using divs that change their height when you click on them. Ideally, this would include animation to smoothly expand the div's height. There will be several of each div on each page, so it needs to just expand that section.
It's actually supposed to turn out something like the news section on this page: http://runescape.com/
I'd like to do it with JavaScript/jQuery if possible.

$('div').click(function(){
$(this).animate({height:'300'})
})
Check working example at http://jsfiddle.net/tJugd/

Here's the code I ended up using:
JS:
document.getElementById("box").addEventListener("click", function() {
this.classList.toggle("is-active");
});
CSS:
#box {
background: red;
height: 100px;
transition: height 300ms;
width: 100px;
}
#box.is-active {
height: 300px;
}
HTML:
<div id="box"></div>
Fiddle:
https://jsfiddle.net/cp7uf8fg/

try
$('div').toggle(function(){
$(this).animate({'height': '100px'}, 100);
}, function(){
$(this).animate({'height': '80px'}, 100);
});
DEMO

jQuery rules. Check this out.
http://api.jquery.com/resize/

The complete solution:
Both spacer DIV and Margin or Padding on content DIV works but best to still have a spacer DIV.
Responsive design can be then applied to it in your CSS file.
This is mutch better as with JAVA the screen would flicker!
If you use a grid system there will be a media query part there you need to include your settings.
I use a little spacer on HD screen while its increasing till mobile screen!
Still if you have breadcrumb in header multiple lines can be tricky, so best to have a java but deferred for speed resons.
Note that animation is for getting rid of flickering of screen.
This java then would only fire if breadcrumb is very long otherwise single CSS applied via the grid and no flickering at all.
Even if java fired its doing its work via an elegant animation
var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;
if (header_height > spacer_height) {
$('#header_spacer').animate({height:header_height});
};
Note that I have applied a 5px tolerance margin!
Ho this helps :-)

I know this is old, but if anyone seems to find their way here. #JacobTheDev answer is great and has no jQuery! I have added a little more for use cases where the event is not being assigned at the same point your toggling the css class.
HTML
<div id='item' onclick='handleToggle()'> </div>
JS
handleToggle(event){
document.getElementById(event.target.id).classList.toggle('active')
}
CSS
#item {
height: 20px;
transition: 1s;
}
.active {
height: 100px;
}

Related

removeClass is not working w/CSS transitions

I'm trying to make a blink effect on click (instantly set background and then fade out) but on second click removeClass is not removing it. Where is a mistake?
JS:
$('div').click(function() {
$(this).css({transition: '0s'}).addClass('qwe')
.delay(1).queue(function() {
$(this).css({transition: '2s'}).removeClass('qwe');
});
});
CSS:
div{
height: 100px;
width: 100px;
background: gray;
}
.qwe {
background: green;
}
Fiddle
The browsers are built to optimize consequent style changes by coalescing them. In case of CSS transitions they do it a bit over-zealously.
Currently there's no 'clean' way around it, the best you can do in current browsers is force restyle via window.getComputedStyle(document).color or similar before the applying the changes that would invoke transition (removeClass in your case).
See
Clean way to programmatically use CSS transitions from JS? for more information.
Solved it using jQuery UI
$('div').click(function() {
$(this).addClass('qwe').switchClass('qwe', '', 1000);
});

Can't get height of div to adjust

I'm in a pickle.
I'm working on a layout, and I need the main div to adjust to the window size, mainly to get that middle div to make a scrollbar upon resizing. It's acting as a table cell currently, which is why it's forcing itself to simply become taller instead of using a scrollbar. It's in a containing div in the efforts to keep from doing this though.
<div id="ALL">
<div id="VOLTRON">
<div id="MAINSIDEBAR">ok</div>
<div id="CONTENT">
<div id="TICKER">please</div>
<div class="WRAP">
<div id="POSTSGOHERE">
<p>Lorem ipsum dolor sit amet, ...</p>
</div>
<div id="RIGHTSIDEBAR">WELL THEN.</div>
</div>
</div>
</div>
</div>
I resorted to Jquery, and though I found a code for this very thing, it's not working.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function(){
$('#ALL') .css({'height': (($(window).height()))+'px'});
$(window).resize(function(){
$('#ALL') .css({'height': (($(window).height()))+'px'});
});
});
</script>
I've tried setting a max height, I've tried setting it to vh instead of percent, I've tried containing it, and I feel like I've exhausted a pretty decent amount of time on this conundrum myself to finally get help.
Here is the entire code, in case that also helps. I'm certain that the way I'm doing this is the reason it's not working.
So, any idea for a fix for this? And why what I'm trying isn't working?
EDIT: I need to specify this again: I want the entire "table" to only fit the window, but the purple div is the one that should scroll. The problem is, though I've set it to overflow-y: scroll; it just changes the size of the entire container. The entire table just grows past the window to compensate for the overflow.
Your code looks good, you just don't see it as it takes the exact size of the window. You would see it better if you subtracted a little off of it and added the overflow-y:scroll to #ALL instead of the container:
#ALL {
background-color: red;
max-width: 100%;
max-height: 100%;
overflow-y: scroll;
}
$(function () {
$('#ALL').css('height', $(window).height()-50 + 'px');
$(window).resize(function () {
$('#ALL').css('height', $(window).height()-50 + 'px');
});
});
HERE IS A DEMO
EDITED: Following your edit, and I know this would threw off your layout completely, but the only thing that worked for me, if you wanted the purple one to move only, was to remove the table-cell display and set the height to the container instead of ALL, and adding the scroll only to that:
#ALL {
background-color: red;
max-width: 100%;
max-height: 100%;
}
#POSTSGOHERE {
background-color: purple;
max-height: inherit;
overflow-y: scroll;
}
$(function () {
$('#POSTSGOHERE').css('height', $(window).height()-50 + 'px');
$(window).resize(function () {
$('#POSTSGOHERE').css('height', $(window).height()-50 + 'px');
});
});
I updated the demo
Keep the max-height and set
overflow:scroll;
This should do the trick.
PS: Also try adding it to the Wrap class.
You think to display the #all div as an iframe style in fullscreen?
like here:
You can check it here
You were just missed one line of CSS.
#all
overflow: scroll
SASS syntax
NOTE: pls use small letter div selectors dont use capital ones, thanks ;)
This might work better
Place the window height in a var
so the div can read it, and rewrite the var when the user resizes
$(document).ready(function(e) {
var heightt = $(window).height();
$('#ALL').css('height',heightt);
$(window).resize(function(){
var heightt = $(window).height();
$('#ALL').css('height',heightt);
});
});

JS launches before CSS

This is currently happening in chrome, in firefox I haven't had this issue (yet).
Here is a VERY simplified version of my problem.
HTML:
<div class="thumbnail">
Click me!
</div>
CSS:
div {
width: 200px;
height: 300px;
background-color: purple;
}
a {
position: absolute;
}
#media (max-width: 991px) {
div {
height: 200px;
}
}
Javascript:
$(document).ready(function () {
var $parent = $('#clickMe').parent();
function resize() {
$('#clickMe').offset({
top: $parent.offset().top + $parent.height()-$('#clickMe').height()
});
}
$(window).on('resize', resize);
resize();
});
The problem:
So what does this give when I resize (without dragging)? Well javascript launches first and sets the position of the <a></a> , then CSS applies the height change if we are < 992 px.
Logically the button is now visually at the outside of the div and not on the border like I had originally defined it to be.
Temporary solution proposed in this post.
jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?
var doit;
$(window).on('resize', function(){ clearTimeout(doit); doit = setTimeout(resize, 500); });
Temporary solution is not what I'm looking for:
However, in my situation I don't really need to only call 'resize' when the resizing event is actually done. I just want my javascript to run after the css is finished loading/ or finished with it's changes. And it just feels super slow using that function to 'randomely' run the JS when the css might be finished.
The question:
Is there a solution to this? Anyone know of a technique in js to wait till css is completely done applying the modifications during a resize?
Additional Information:
Testing this in jsfiddle will most likely not give you the same outcome as I. My css file has many lines, and I'am using Twitter Bootstrap. These two take up a lot of ressources, slowing down the css application (I think, tell me if I'm wrong).
Miljan Puzović - proposed a solution by loading css files via js, and then apply js changes when the js event on css ends.
I think that these simple three steps will achieve the intended behavior (please read it carefully: I also suggest to read more about the mentioned attributes to deeply understand how it works):
Responsive and fluid layout issues should always be primarily (if not scrictly) resolved with CSS.
So, remove all of your JavaScript code.
You have positioned the inner a#clickMe element absolutely.
This means that it will be positioned within its closest relatively positioned element. By the style provided, it will be positioned within the body element, since there is no position: relative; in any other element (the default position value is static). By the script provided, it seems that it should be positioned within its direct parent container. To do so, add position: relative; to the div.thumbnail element.
By the script you provided, it seems that you need to place the a#clickMe at the bottom of div.thumbnail.
Now that we are sure that the styles added to a#clickMe is relative to div.thumbnail, just add bottom: 0px; to the a#clickMe element and it will be positioned accordingly, independently of the height that its parent has. Note that this will automatically rearrange when the window is resized (with no script needed).
The final code will be like this (see fiddle here):
JS:
/* No script needed. */
CSS:
div {
width: 200px;
height: 300px;
background-color: purple;
position: relative; //added
}
a {
position: absolute;
bottom: 0px; //added
}
#media (max-width: 991px) {
div {
height: 200px;
}
}
If you still insist on media query change detection, see these links:
http://css-tricks.com/media-query-change-detection-in-javascript-through-css-animations/
http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/
http://tylergaw.com/articles/reacting-to-media-queries-in-javascript
http://davidwalsh.name/device-state-detection-css-media-queries-javascript
Twitter Bootstrap - how to detect when media queries starts
Bootstrap: Responsitive design - execute JS when window is resized from 980px to 979px
I like your temporary solution (I did that for a similar problem before, I don't think half a second is too long for a user to wait but perhaps it is for your needs...).
Here's an alternative that you most likely have thought of but I don't see it mentioned so here it is. Why not do it all through javascript and remove your #media (max-width.... from your css?
function resize() {
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if(width<992){
$("div").each(function(e,obj){$(obj).height(200);});
}
$('#clickMe').offset({
top: $parent.offset().top + $parent.height()-$('#clickMe').height()
});
}
In the html page, put the link to css file in head section; next, put the link to js file just before the /body tag and see what happens. In this way css will load always before js.
Hope this help you.
Did you try to bind the resize handler not to the window but to the object you want to listen to the resize ?
Instead of
$(window).on('resize', resize);
You can try
$("#clickMe").on('resize', resize);
Or maybe
$("#clickMe").parent().on('resize', resize);
var didResize = false;
$(window).resize(function() {
didResize = true;
});
setInterval(function() {
if (didResize) {
didResize = false;
console.log('resize');
}
}, 250);
I agree with falsarella on that you should try to use only CSS to do what you are trying to do.
Anyway, if you want to do something with JS after the CSS is applied, I think you can use requestAnimationFrame, but I couldn't test it myself because I wasn't able to reproduce the behavior you explain.
From the MDN doc:
The window.requestAnimationFrame() method tells the browser that you
wish to perform an animation and requests that the browser call a
specified function to update an animation before the next repaint. The
method takes as an argument a callback to be invoked before the
repaint.
I would try something like this:
var $parent = $('#clickMe').parent();
function resize(){
$('#clickMe').offset({
top: $parent.offset().top + $parent.height()-$('#clickMe').height()
});
}
window.onresize = function(e){
window.requestAnimationFrame(resize);
}
window.requestAnimationFrame(resize);
Anyone know of a technique to wait till css is completely done loading?
what about $(window).load(function() { /* ... */ } ?
(it executes the function only when the page is fully loaded, so after css loaded)

how to show hover effect on a image where i hover my mouse

i have multiple images, on hover on particular image i want to apply on that image only, it should not effect on other image.
More Explanation:
In this example(http://codepen.io/anon/pen/AnsqI), suppose i have multiple images & want to apply the certain effect on only on that image where i hove my mouse.
I am using class attribute...
<script>
$(function() {
//For grid view hover effect
$('.grid_content').hide()
$('.grid_container').hover(
// Over
function() {
$('.grid_content').fadeIn();
}
,
// Out
function() {
$('.grid_content').fadeOut();
}
);
//--js for grid view hover effect ends here
});
</script>
Something i have to apply like $this , i tried like($this.$('.grid_content').fadeOut();)but it did not work.
Somebody please help me.
Use this:
$('.container').hover(function(){
$('.content',this).fadeToggle();
});
Check this Demo http://codepen.io/anon/pen/BxbID
You could consider using CSS and the opacity attribute (or display). You could progressively enhance the hover effect with CSS3's transition property as well. There isn't necessarily a need for JS here, and I only added five lines of CSS (unprefixed) to achieve the same effect.
.content {
width: 100%;
height: 100%;
background: rgb(255,255,255,0.9);
padding: 5px 15px 10px 15px;
box-sizing: border-box;
opacity: 0;
transition: opacity .2s linear; /* CSS3 progressive enhancement */
}
.content:hover {
opacity: 1;
}
Depending on how you organize your HTML, you may need to make modifications, but the concept is the same.
Check out the demo: http://jsfiddle.net/NeEuP/1/
There are 2 ways to do this. You can either reference it using the this javascript keyword and surrounding it in a jQuery function:
$('.grid_container').hover(function(){
$(this).fadeIn();
, function(){
$(this).fadeOut();
});
Or you can:
$('.grid_container').hover(function(e){
$(e.currentTarget).fadeIn();
, function(e){
$(e.currentTarget)$(this).fadeOut();
});
... basically you're getting element through the event object. I personally prefer this method, because it's more flexible it doesn't depend on the actual scope (this depends on scope).

jQuery code for sliding div (accordion)

I am looking for some good jQuery, XHTML & CSS code to achieve the effect as seen in the following image:
http://i48.tinypic.com/a3o4sn.jpg
Obviously this is a static image, what is supposed to happen is the text and the transparent background is hidden, and when you put your mouse over the image it slides up into view and down again onmouseout.
I think this is an accordion, can anyone point me in the right direction (or maybe you've seen another site that does this)?
Your may be interested in this great resource: Sliding Boxes and captions
DEMO
I've recently used a jquery plugin that does something quite similar.
You may find the plugin does all you need, or look at the source to see how the slide-in effect is achieved (although, of course, there's more than one way to do just about anything).
The plug-in is called Showcase
Its home page has more info and demo and tutorials
Finally, as an added demo, here's the site where I used it.
HTH
My approach to this effect is to have a div with overflow: hidden and the transparent black div with a top margin that puts it "outside" the container." Using .hover() you can tell the black div to slide up when the mouse is over the container div, and to slide away again when the mouse leaves.
Markup:
<div id='container'>
<div id='slider'>Some Text</div>
</div>
Styles:
div#container {
height: 100px;
width: 100px;
overflow: hidden;
}
div#slider {
width: 100px;
height: 40px;
margin-top: 100px;
background: black;
}
And your script:
$('#container').hover (
function () {
$('#slider').css('margin-top', '60px'),
$('#slider').css('margin-top', '100px');
);
I forget if you have to put the 60px in quotes or not, or if you have to pass 60 as an int, play around with it, but hopefully this gets you started.

Categories