incredibly slow and choppy jquery animation - javascript

So I have been creating a simple animation that copies a div, and expands it over the window. I am trying to optimize it so it's less choppy and was wondering if someone could help me out. So I have been reading that you cannot have any padding or margin settings on the element that is being animated, because that will slow everything down. This is the animation function I am using:
$('.content_cell').on('click', function(event) {
var $clonedElement = $( this ).clone(true).attr('class','cloned_object content_cell').appendTo('#mainContentTable');
$clonedElement.css({left:$(this).position().left,
top:$(this).position().top,
opacity:0}) ;
//Position caching for closing animation
selectedPos = $(this).position();
var currPos= $('#invitedToChatCell').position();
//Now animate the cloned element to the correct size
$clonedElement.animate({
height:640, width:700,
//position:'absolute',
left:currPos.left,
top:currPos.top,
opacity:1.0
}, 500, function(){ $('.cloned_object > ul').toggle(); });
event.stopPropagation();
});
The content cell CSS and cloned_object css look like this
.content_cell {
border-style: solid;
cursor:pointer;
width:300px;
height:300px;
overflow:auto;
}
.cloned_object{
position:absolute;
background-color:white;
width:300px;
height:300px;
}
does anyone see why this is such a slow animation? or anything I could do to speed it up? Thanks in advance...
UPDATE:
Here is a JSFiddle link

More than just simple JQuery animations tend to be "laggy".
I use css-animations/css-transforms wherever possible.
What you can do is clone the div with jquery and put it on the screen with some new css classes. Let the css handle the expand-part.
For css examples and good ideas see: http://daneden.me/animate
Just found another thread about this which explains the css part: Expand div from the middle instead of just top and left using CSS

Related

change dots on scroll [duplicate]

I'm using Bootstrap 3 and want to achieve this effect when the user scrolls past the large header image on my page. I need the background of the navbar to go from transparent to white. I looked in their code and I KNOW it is done with javascript, and even saw WHERE it was happening I think (look for the ID '#main-header' in that JS)...
Not knowing advanced Javascript aside, I'm looking for a way to apply this to my navigation bar when scrolling past a certain point. The class for my code is called 'navbar' and I would like it to turn white when it passes "#main". Let me know if you need more information, and thanks in advance if anyone wants to help!
The easiest way to accomplish what you're trying to do is a combination of some simple javascript (jQuery powered in this case) and CSS3 transitions.
We'll use JS to check for the windows scroll position on every scroll event and compare it to the distance of the bottom of the #main element - if the scroll position is greater, then we'll apply a class to the body to indicate we've scrolled past #main, and then we'll use CSS to define the nav styling for that "state."
So, our basic markup:
<nav class="nav">
[logo]
</nav>
<div id="main">#main</div>
<div id="below-main">#below-main</div>
And our javascript:
// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();
// on scroll,
$(window).on('scroll',function(){
// we round here to reduce a little workload
var stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.nav').addClass('past-main');
} else {
$('.nav').removeClass('past-main');
}
});
And, our styles:
.nav {
background-color:transparent;
color:#fff;
transition: all 0.25s ease;
position:fixed;
top:0;
width:100%;
background-color:#ccc;
padding:1em 0;
/* make sure to add vendor prefixes here */
}
.nav.past-main {
background-color:#fff;
color:#444;
}
#main {
height:500px;
background-color:red;
}
#below-main {
height:1000px;
background-color:#eee;
}
A working example on Codepen
This is how I did it here. I also employ some scroll throttling and a bit more complicated styling semantics, but this is the gist of it.
If you're using Twitter Bootstrap this can be achieved with the 'Affix' plugin
It's pretty straight forward to set up, here is the documentation
You could probably just use javascript element.scrollTop along with Jquery addClass and removeClass. Haven't tried it myself though.
Here's an overflow link for getting scrollbar position: How to get scrollbar position with Javascript?

Expand a div height from set height to natural height on button click

I have a div, and inside that div I have a variety of elements (p, strong, a, etc.) - by default this parent div is going to be at 200px height. When I click a read more button (last child element of the parent div) - I want the div to expand to it's natural height.
I'm using CSS max-height and overflow:hidden to accomplish the effect of a smaller than natural div and hiding the overflowing elements.
I need to accomplish this with javascript and jquery - and no external libraries unless someone can explain to me how to properly reference them in my wordpress site.
I was using this tutorials solution and it works fantastically, except that because I have multiple P tags inside the parent div, it won't expand to the full height of said parent div - thus my question.
EDIT: After some more time working at it, here's a really good solution, that also includes animation. Fiddle.
$('.career-readMore').on('click', function(event) {
var container = $(this).parent();
$(container).toggleClass('expanded');
$(container).css('max-height', '3000px');
https://jsfiddle.net/smo5vz67/
Assuming the structure presented in the fiddle, the solution is as simple as:
$( document ).ready(function() {
$('.read-more').click(function(){
$(this).parent().toggleClass('expanded');
});
});
plus some CSS
.container{
overflow: hidden;
max-height:200px;
position: relative;
border:1px solid #999;
}
.container.expanded{
max-height:none;
}
.read-more{
position: absolute;
right:0;
bottom:0;
}
try something like this
$('#btnExpand').click(function(){
$('#target').css('height', 'inherit');
});
https://jsfiddle.net/aznpqud0/

CSS overlay coming from corners

I am trying to bring in a overlay that comes on the top of a image when you hover with your mouse. Currently I have it coming just from the top, and eases down to the bottom. What I am trying to achieve though, is have the overlay split into 2 sections, coming from the top left and bottom right and join in the middle. I know this is hard to understand with just text, so I created an image.
I have seen this done before, but am not sure what it is called, or how to achieve the effect. Help would be appreciated
Here's my stab at it: http://jsfiddle.net/
The basic idea is that you're just doing this, but with the wrapper element rotated. This solution would obviously need to checked for compatibility.
This could be achieved without a .slide element, but would require more manual positioning of the elements.
Here is a basic example using jquery.
Note, the cool kids would do this with css3.
http://jsbin.com/eyilog/1/edit
In this example the divs are absolutely positioned outside the containing element. overflow:hidden; makes sure they are invisible. On hover jquery animates their positions back inside the div, overlaying the content of the div.
To make it diagonal just use transparent images.
$(".text").hover(function() {
$(".topleft").animate({top: "+0px"}, 500);
$(".bottomright").animate({bottom: "+0px"}, 500);
});
<div class="text">
<div class="topleft"></div>
text
<div class="bottomright"></div>
</div>
.text {
background-color:red;
width:100px;
height:100px;
margin:auto;
overflow:hidden;
position:relative;
}
div div {
background-color:black;
height:50px;
width:100px;
position:absolute;
}
.topleft {
top:-50px;
}
.bottomright {
bottom:-50px;
}

Position a Div "Fixed" Vertically and "Absolute" Horizontally within a "Position:Relative" Container Div

I'm looking for a way I can create a div which will be fixed on the page vertically, so if the user scrolls down, the div stays at the same place on the page. But have it positioned absolutely horizontally, so if the users screen is narrower than my webpage, scrolling to the right or left will not cause the div to move with the screen and, in some cases, remain either half visible at the edge of the screen or off the page completely.
This div must be within a "Position:Relative" Div.
I'm fairly sure there is no way to assign different positions to the varying axis of a div but this is the best way to describe the effect which I am hoping to achieve.
I have this so far, which is basically just a Fixed Div within a Relative Div.
CSS
#container {
position:relative;
width:700px;
height:1000px;
top:50px;
left:50px;
background-color:yellow;
}
#blue-box{
position:fixed;
width:100px;
height:100px;
background-color:blue;
margin-top:20px;
margin-left:400px;
{
HTML
<div id="container">
<div id="blue-box"></div>
</div>
I have also created a jsFiddle to help demonstrate the problem.
This works fine for the vertical, but if you resize your web-browser so that it is narrower than the yellow box (container) and then scroll horizontally, the blue box will move with the page. I'm hoping to stop that from happening.
If there is no way to achieve this through CSS, I'm perfectly happy to use JavaScript as long as it works with all modern browsers and both IE7 and IE8. (Which is why I have added the JavaScript tag)
Can anyone help me out?
With JQuery, use the scrollLeft() property of the document! This would work
$(window).scroll(function(event) {
$("#blue-box").css("margin-left", 400-$(document).scrollLeft());
});
See also
http://jsfiddle.net/zhQkq/9/
Good luck!
Edit: If you want it to use your preset margin-left instead of a hard-coded "400", use
$(window).scroll(function(event) {
$("#blue-box").css("margin-left", $("#blue-box").css("margin-left")-$(document).scrollLeft());
});
Using vanilla javascript would be something like this:
var bb = document.getElementById('blue-box');
window.addEventListener('scroll',function(event){
bb.style.marginLeft = window.scrollX + 'px';
});
In modern browsers, as of 2020, you should try to use the CSS position:fixed; instead of JavaScript positioning because it is widely supported now.
Here's my solution (tested in Opera and Firefox): http://jsfiddle.net/cCH2Z/2
The trick is to specify right: 0px;, this will position the box 0px from the right border of the window.

Change div height onclick with animation

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;
}

Categories