I really like the way the DIVs fold/unfold from the top to the bottom then left to right when users click on the menu items (about, services, my tools, etc) on this website. Seems that it has been developed by a very talented person.
Any idea how to achieve something like that? I was expecting this to be done via complex CSS animation, but looking at the CSS sheet that doesn't seem to be the case.
Many thank
On that site it is achieved with the use of jQuery UI - more specifically with the Fold Effect.
I think using jQuery UI for this task alone would be an overkill, in fact you don't even need jQuery here, but I think you want to stick to it, since it's relatively easy both to read and to write code:
$("a").click(function() {
$("#fold")
.animate({ width: "500px" }, 1000 )
.animate({ height: "500px" }, 1000 )
});
See:
http://jsfiddle.net/bartkarp/u3qtt6fo/
http://api.jquery.com/animate/
If you don't want to use jQuery UI, I guess you could do it by animating the css...:-??
First state is height: 0; and width :30px; ...then using the animate on click event you could give the height a value and animation time, the width a delay equal o bigger than the height animation time and then it's value...that should do the trick but it's more stiff than actually using the UI
Related
I am trying to add a class to my sticky container once the user scrolls the page past 100px, but it is lagging, and toggling the class uncontrollable.
$(function () {
$nav = $(".topmenu-container");
$(document).scroll(function () {
if ($(this).scrollTop() >= 100) {
$nav.addClass('scrolled');
} else {
$nav.removeClass('scrolled');
}
});
});
This is what I have so far.. I had the same function without an if clause and the toggleClass function instead, but same effect there.
Here you see the container that sticks to the top on scroll, and that I want to add the class to once the user scrolls past 100px from top for example
Edit: I now output the scrollTop value and saw, that it seems to get stuck at the point where the toggle should happen. It keeps jumping between 156px and 87px which makes the toggle happen multiple times a second. Does anyone have an idea?
What you need is rate limiting for your scroll events. In your case, I would suggest throttling, which means that your scroll events are limited to a certain number per second or time unit.
Another option is to use debouncing, but this would cause the event to be triggered only once at the end of the scrolling, which might not be the best solution for your case.
Read more here: Difference Between throttling and debouncing a function
Nice visualization: http://demo.nimius.net/debounce_throttle/
Depending on your use case you may actually get away with the new sticky value for the position property in CSS:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Additionally, instead of using debouncing and throttling, you could consider using the IntersectionObserver API. The events for InteresectionObserver fire only once (depending on settings) and surely less than scroll which is a hard to optimize event since it fires all of the time. See here:
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Now, if you have some elements inside the element that depend on the class, such as... the logo having a scaling animation or such, you will definitely have to use IntersectionObserver. It looks like your threshold is 100 pixels, you can definitely configure Interesction Observer to do that.
You can also take a look at this example from Wes Bos which seems to be in one of his free classes:
https://wesbos.com/javascript/06-serious-practice-exercises/scroll-events-and-intersection-observer
I'm hoping you can try these solutions instead of the antiquated scroll thing.
I want to know if there is any way to scroll a page/element using any of css property. We are able to do it with javascript with scrollTo and scrollBy, but I want to scroll using css transition properties to make an slider that will scrollleft after a given timestamp. I tried using the jquery plugin http://ricostacruz.com/jquery.transit/, but it doesn't support scrollLeft or any scroll.
You can replicate scrolling in CSS like this:
#parent{
overflow: hidden;
}
#child{
margin-left: -250px; /* Move across the page 250px (x axis) */
}
However, that probably isn't what you want.
The best and most common way to achieve animated scrolling is using the jQuery Javascript library:
$("#parent").animate({
scrollLeft: 250
}, 1000);
The only solution I found is to transform by changing x,
For example:
$('.box').transition({ x: '-40px' });
Make sure that overflow of box is not hidden.
http://ricostacruz.com/jquery.transit/
What i got from your question is basically you need a plugin to slide from left to right with time interval use carousel plugin in jquery it will solve your problem.
You can customize it according to your requirements. And the same effect can be done with css also but for the time interval you have to touch jquery. And you didn't mentioned that you need the slide onload or on event trigger.
jQuery's .width() method doesn't seem to account for scroll bars. This is problematic for me, since I'd like to set the width of some children to equal the width of their parent. I used jQuery similar to the following:
$('#contentDiv').width($('#containerDiv').width())
In this example, #contentDiv is the element I'd like to size, and I want to set it to have the width of #containerDiv, which is its parent element. My problem is that this cuts off the side of #contentDiv, as seen in this fiddle.
In my actual code, I have several elements that I'm sizing with jQuery, which all need to fit in the scrollable div, so just setting the css of #contentDiv to 100% is not an option. What's the best way of dealing with scroll bar widths of divs in jQuery?
The best solution I found while working around this solution is this:
http://chris-spittles.co.uk/?p=531
jQuery is all powerful and everything but sometimes a small dash of native JS is all you need to render pixel perfect pages... I hope you will find this solution helpful!
UPDATED:
None of the jQuery width-finding methods account for the scroll bar. In my original example, using .innerWidth(true) LOOKS like it works, but only because it returns and object, which causes width to fail and the inner contents size themselves to fit in the available space, because the example wasn't very good. However, it's possible to write a function to compute the available space in a div with a scroll bar in it, which can then be used to position the contents as you wish.
To write that function, I took advantage of the fact that, when a div is appended to a div with a scroll bar in it, it takes up the full available width (i.e. the inner width of the parent minus the width of the scroll bar).
The function looks like this:
function noScrollWidth(div){
var measureDiv = $('<div id="measureDiv">');
div.append(measureDiv);
var width = measureDiv.outerWidth();
measureDiv.remove();
return width
};
I then use this to size my content div:
$('#contentDiv').width(noScrollWidth($('#containerDiv')));
Working fiddle.
Try this:
$('#contentDiv').width($('#containerDiv')[0].clientWidth)
For more information about that solution, see this StackOverflow answer.
Another approach I'd try is setting both elements' box-sizing property to 'border-box', and see whether setting your contentDiv's width to 100% then works the way you want.
Now that fewer projects worry about crufty old browsers anymore, 'border-box' can make things easier to work with. Be sure to test multiple browsers on multiple platforms, though, because I'm not sure they all handle scrollbars the same way.
Here is my situation. I'm trying to do several animations on a single element at once; however, with the UI thread 'feature' and JQuery's animation queue it's becoming a hassle.
I'm designing a re-usable control library for a site and one of the things I wanted to do was to have a multi-class attribute system to initiate different animations upon ready().
For instance:
<div class="fadein loadingbar"></div>
with the CSS for an image background for .loadingbar, and then JQuery to animate the loading-bar's background indefinitely:
$(".loadingbar").each(function(){
$(this).css({backgroundPosition:"0px 0px"});
$(this).animate({backgroundPosition:"(-65px 0px)"}, (($(this).height() / 35) * 2000) + 600, "linear", function(){_n3_animLoadBars(this)});
});
as well as the fadeIn() animation for the .fadein class:
$(".fadein").each(function(){
$(this).css({opacity:0,visibility:"visible"})
.animate({opacity:1}, {duration:1000});
});
However; the only way to get them to animate asynchronously is to do {queue:false} for the .animate() function, which works fine until I want to delay the fade-in animation:
$(".fadein").each(function(){
$(this).css({opacity:0,visibility:"visible"})
.delay(800)
.animate({opacity:1}, {duration:1000,queue:false});
});
which completely skips the .delay() call since it's not queued (therefore not placing the animation cue right after the delay on the fx stack).
The only fix is to wrap the div with another div:
<div class="fadein"><div class="loadingbar"></div></div>
and to take the {queue:false} out, of course.
While this works, the javascript was supposedly going to be advanced enough so the markup didn't have to be that messy (usually a simple div wrap like that is fine with me, but I'm designing this for my own personal amusement and I would like to keep it down to a single div if at all possible).
Any quick fix with JQuery that I am missing, or is there a way to do this through writing a plugin?
Any insight would be helpful!
Found the solution - it was easier than I thought.
Instead of specifying {queue:false} on the fade-ins, I specified it on the background animations, leaving the fade-ins queued.
Ive done this a number of times with no problem but for some reason it is a problem on Here. The slide down will begin to work (1/3) normally and than all of a suddenly jerk and finish the animation. slideing up works fine. this is the case for slideDown(), slideToggle and .animate()
strangely if i also toggle opacity in the animate function it does not jerk but my text will briefly change color.
HTML:
<h2>Phthalate Free: </h2><div class="yamikowebsToggler">
<p>
Dibutyl Phthalate is linked to cancer and is present in nail polish, perfume, soft plastics and skin care products.
</p></div>
CSS: i read else were that margins can cause the jerkiness but this isnt helping
h2{color:#76DEFC; margin:0px;}
.yamikowebsToggler{margin:0px;}
p{margin:0px; color;#000000;}
JQUERY:
$(document).ready(function(){
$(".yamikowebsToggler").fadeOut(0);
$("h2").click(function()
{
$(this).next(".yamikowebsToggler").stop(true, true).animate(
{ height: 'toggle' },
{
duration: 1000,
});
})
});
I found the solution. it had nothing to do with my code but a bug in jquery. jquery has trouble getting the height if it is inherited because when it is getting the height the element is hidden. when elements are hidden they are treated with css properties of
position: absolute;
visibility: hidden;
to fix this you need to specify the height in either the animation which is not doable in my case since i have many that are toggled. the alternative is to set the height to the elements. i personally added a note in my jQuery about it and did it all in line simply adding
style="height: <height in px>;"
to the elements being toggled.
I had a similar issue when animating a division from 100% down to 0% width.
What was happening was that at the start of the animation the division got wider to like 110% for some reason.
Anyway I found the solution was to add max-width: 100%; in the CSS styles on the specific division.
Just thought I'd post that here as I came here looking for a fix to this issue. :)
Have you tried increasing your {duration: ...}? Also, you could just use the built-in jQuery function .slideToggle().
I know this is marked as answer, but would like to provide an update on this issue.
The corresponding issue ticket is here:
http://bugs.jquery.com/ticket/4541
However it's been closed by core devs, and seems like it won't be fixed unless there's a patch that has no performance flaws.
In the mean time, if you still wish to use jQuery to do this, you can either set the height or the width of the element you're trying to slideUp or slideDown. It doesn't have to be in "pixel" unit, it can be in percentage as well.