Strange accordion behavior with max-height - javascript

I was creating an accordion but because of the transition between height: 0 and height: auto can't be animated I found a way animating max-width
but like you can see in this way the timeline is not good, before open the one where the user clicks, then close the others.
Is there a way to solve that?
.content{
overflow: hidden;
max-height: 0;
transition: all 1s;
}
.active .content{
max-height: 500px;
}
FIDDLE HERE
UPDATE:
the problem is about max height, because with a specific height works like a charm.

You could just use jQuery's sliedUp() and slideDown():
$(document).ready(function(){
$(".singleAccordion").on("click", function(){
$(this).siblings().children(".content").slideUp();
$(".content", this).slideDown();
});
});
with following CSS:
.content{
overflow: hidden;
max-height: 500;
display: none;
}
Let me try to give some explanation.
Usually both transitions should run (pretty much) at the same time. If you replace max-height with just height (in your original code) you can see that that's actually the case. But for max-height this seems to be different. I don't know why this is the case but I'd guess that it might be hard to derive the actual height that has to be applied while other transitions are running on the same DOM subtree and so it's just getting queued.
I'll take a look at some docs to see what's the reason behind this. Will report back if I find more intel.
Alright, I digged a little deeper. It really seems like the calculation of the actual height is the issue. Take your above code and replace max-height: 500px with max-height: 5000px. You'll see that it takes reeeaally long until the collapse happens. Now put max-height: 50px in there and they will appear to happen at the same time.
Maybe this is because it's still animating beyond the actually required height. Sadly you can't animate onto height: auto - most probably for quite the same reason.

Remove the
.removeClass
like this
$(document).ready(function(){
$(".singleAccordion").on("click", function(){
$(this).addClass("active").siblings("active");
});
});

Just use Jquery Ui Accordion. That is awesome.
Here is JssFiddle
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="accordion">
<h3>Part1</h3>
<div> <p> 1 </p> </div>
<h3>part2</h3>
<div> <p> 2 </p> </div>
<h3>Part3</h3>
<div> <p> 3 </p> </div>
<h3>Part4</h3>
<div> <p> 4 </p> </div>
</div>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</body>

Related

Setting min-height automatically with jQuery or Javascript

I would like to use a script to add min-height or max-height to an element based on the height of the actual element.
So I'm getting the .height() (?) of a div and then using that value to set a min/max-height. Is this possible? It has to be dynamical, so that the div can change height but still have the right min-height or max-height.
I haven't tried anything, only searched for how to do it - I'm really not an expert on jQuery og Javascript. The thing I'm doing now is using console.log to give me the height of an element (a hero section for example) so that I don't need to manually check it in developer. And then I write the value as a min-height in CSS. The reason I'm doing it is because of the new Lighthouse Core Web Vitals (Cumulative Layout Shift (CLS)).
EDIT: So I think I found a solution, and (like I said) I'm not an expert here, but any feedback is very much appreciated.
jQuery(".hero").css("min-height", function(){
return jQuery(".hero").height();
});
this is an example of what you want
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Set a DIV height</title>
<style>
.box{
background: #f2f2f2;
border: 1px solid #ccc;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
var newHeight = $(".input-height").val();
$(".box").height(newHeight);
});
</script>
</head>
<body>
<form>
<input type="text" class="input-height">
<button type="button" class="set-height-btn">Set Height</button>
<p>Enter the value in input box either as number (e.g. 100, 200) or combination of number and unit (e.g. 100%, 200px, 50em, auto) and click the "Set Height" button.</p>
</form>
<br>
<div class="box">This is simple DIV box</div>
</body>
</html>

Horizontal scroll event not working on IE? (seems like no other event is working)

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
height: 250px;
width: 250px;
overflow: auto;
}
#content {
height: 800px;
width: 2000px;
background-color: coral;
}
</style>
</head>
<body>
<p>Scroll inside the div element to display the number of pixels the content of div is scrolled horizontally and vertically.</p>
<div id="myDIV">
<div id="content">Scroll inside me!</div>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener('scroll', function (e) {
alert("scroll");
});
document.getElementById("myDIV").addEventListener('click', function (e) {
alert("click");
});
</script>
Why its not working in IE I played this same code in w3 try it yourself page, it works in IE but not if I tried it as a separate file, so confused. Even if some one downvote this please tell me what I am missing?
I found these things when I browse other answers:
pointing to window.scroll but I need on a particular element
Use overflow-x: scroll; overflow-y: hidden; or vice versa.(which didn't work and also I need scroll on both ways)
NOTE:
This code works clearly in other browsers.
Its my bad. May be helpful for someone like me, Please enable scripting in your IE. :_(
A thing to note here is, Although script is not enabled it w3 school exercises exercises worked because of iframe?. If so how?

Slide content / page transition

I'm trying to recreate something like they've got over at gimmebar.com.
When you click an image, the content current page slides out left and fades out. The target page fades in and slides in from the right.
I've tried a couple of things, like creating two divs in a container with a width of 200% and scrolling the content in to view and using JqueryUI and slideing the divs.
The scrolling failed with the divs not moving at all and srollLeft always being 0 no matter what.
The slide worked somewhat better but to me it seems like they aren't run simultaneously.
The second div just pops in to existence instead of nicely sliding in right behind the first.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
.container {
width: 100%;
float: left;
height: 800px;
}
#one {
background-color: red;
}
#two {
background-color: #333;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div class="container" id="one"></div>
<div class="container" id="two"></div>
<script>
$( document ).click(function() {
$("#one").hide("slide", { direction: "left" }, 1000);
$("#two").show("slide", { direction: "left" }, 1000);
});
</script>
</body>
</html>
It seems like it should be so easy to achieve but I'm stuck.
Take care.
Edit:
I kind of got it to work as you can see in this fiddle.
The slide is there but I can't see no fade.
There also might be a better way of achieving this but I'm pretty satisfied with not having to load a third lib/plugin just to slide a div.
http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios
Found a tutorial written by their developer. Think that would count as the solution.
A pure javascript solution: in the CSS:
div.wrap {visibility: hidden; position: absolute; overflow: hidden;
top: 0; left: 0; width: 100%; height: 100%}
div.wrap div.newContent {visibility: visible; position: relative; left: 100%;}
in the HTML:
<div class="initContent">
This is the content that is initially displayed
</div>
<div class="wrap">
<div class="newContent">
Put the content you want to be revealed here
</div>
</div>
The newContent div is initially hidden because its left edge is at the right edge of its parent (wrap) div, and the CSS tells the browser to hide any content that overflows the parent div.
Then to reveal the hidden content set a timer that progressively decreases the style.left for the inner div from 100% to 0% and increases the opacity from 0 to 1. I made a class for opening/closing swipey menus that could be adapted slightly to do this. (EDIT : a newer version)
i would recommend you use this jQuery script i used not so long ago in a website and it worked like a charm its called CODA SLIDER, it was made by Kevin Batdorf and the installation its barely 5 lines of code.
Good luck

Is it possible to do a "snap-to" effect while scrolling?

I am setting up a website like this (vertical slideshow almost):
http://mikelegacywebdesign.com/scrollpage_test/index.html
The one thing I am looking to do that I can't figure out is how to make the scrolling SNAP to the point where the color change is while scrolling.
For example, when scrolling, you get to about 50-100 px near the top of the next color you are scrolling to, it would be nice if that would snap to that point, instead of just continuing to scroll, because it is hard to get that "frame" to perfectly align. It's dependent on the user to scroll the perfect amount so that they are viewing the full frame, and not pieces of the former or next frame in the sequence.
Anyone that knows if there is a jQuery plugin or something for this would be my hero.
Here is the ENTIRE page so far. It's simple coding to get the current effect:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Scrollpage Test</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
.container { height: 400%; width: 100%; }
.section { height: 35%; width: 100%; }
#section1 { background-color: #1d9ad7; }
#section2 { background-color: #c83e3d; }
#section3 { background-color: #75b946; }
#section4 { background-color: #f4be2f; }
</style>
</head>
<body>
<div class="container">
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
<div class="section" id="section4"></div>
</div>
</body>
</html>
Yes, it's possible. Their code is quite awful though. While animating scrollTop, you'll want to make sure that additional user-input that normally leads to scrolling is ignored. Have a look at this test-case to get an idea about how to prevent a user from scrolling.
You can get the desired effect using the
scroll() jumpScroll() scrollBy()
and a little bit of your own code.
For example,
function jumpScroll() {
window.scroll(0,250);
}
Would scroll to that point on the page
I was after the same thing so asked a similar question a few weeks ago. I found an addon called stellar.js that had the functionality but the demo was in horizontal and I couldnt for the life of me change it to vertical. Anyways, someone posted a solution, which I edited for mousescroll instead of click: http://jsfiddle.net/djsbaker/dxzk4/
On a site note, I had issues with it being quite laggy with huge fixed background images. In fact very laggy, but I was using parallax which didn't mix well.

How do i make a div animate diagonally?

I am relatively proficient in html and css, but am not with javascript and jquery. I am trying to get a div to move diagonally, however its not working.
Here is my code:
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#box1 div").animate({left: '+=150', top: '+=150'}, 1000);​​​​​​​​​​​​​​​
});
</script>
<div id="box1"></div>
</body>
</html>
I know its probably something really stupid, but does anybody know what the problem is?
Thanks!
You have to first make it position: absolute or relative in CSS.
#box{
position: absolute;
}
$("#box1").animate({left: '+=150', top: '+=150'}, 1000);
Oh yeah, do this:
$("div#box1") //correct
instead of:
$("#box1 div") //incorrect
DEMO: http://jsfiddle.net/DerekL/bwg8R/
To animate something using left and top the element needs to be positioned. either relative or absolute, otherwise left and top don't do anything to the element.
See my example here: http://jsbin.com/ayafup/edit#html,live
And target your #box1 element directly as $(#box1), not all child div's inside it as you're doing, $(#box1 div)
Also move your scripts down to the bottom before </body> for better performance and better practice in general.
Give your div some position because left and top are used after position is set
<div id="box1" style="position:absolute;">s</div>
And in javascript
$("#box1 div").animate({left: '+=150', top: '+=150'}, 1000);
Should be
$("#box1").animate({left: '+=150', top: '+=150'}, 1000);
Because the previos one was selecting child of #box1
Here is the best solution I find for animations effects.. I you don't have any constraint to support older version of browser than animation of you will be like eating a cake..
Try this http://daneden.me/animate/
Cheers...!!!

Categories