Adjust speed on jQuery UI accordion - javascript

I have a jQuery UI accordion of which I need to urgently change the speed/duration of the animation before the site goes live.
$(".faq-accordion > div").accordion({ header: "h4", collapsible: true, active: false, speed: "fast", });
Editing the speed in this line doesn't affect anything.
See JSFiddle for full code.
The show all/hide all buttons open the accordion at a much faster speed than when they are individually clicked.
I need to speed up the animation of the accordion so both are the same speed if possible.

If you take a look at the accordion API you'll see that there's no option called speed, you need to use animate. The equivalent to a duration setting of fast for slideUp and slideDown, in milliseconds, is 200, so you can just use that as a number value:
$(".faq-accordion > div").accordion({
header: "h4", collapsible: true, active: false,
animate:200
});
Here's your fiddle updated with this: http://jsfiddle.net/z3Lx1o0y/

You can specify the speed at a more granular level in the slideUp/slideDown function
e.g.
$('.applying div div').slideDown(1000);
Try tweaking this.

Related

Why does slick slider not work with tabs?

I used slick slider in tabs. In first tab slides are work good. But when we clicked on second tab - slider disappears.
https://codepen.io/malinosky/pen/jvgqxO?editors=1010
I used
$('.js-photo').slick("setPosition", 0);
$('.js-presentation').slick("setPosition", 0);
But that's don't work for me. What's my mistake?
Because when the slider is hidden, it has a height of 0.
So you should refresh the positioning of slick when the slider is visible:
target.fadeIn("200", function() {
$('.js-photo').slick("setPosition", 0);
});
Example: https://codepen.io/anon/pen/jvgVqR
I've found a solution through CSS and it's working well at mine.
You could set the not-active tabs to
overflow-y: hidden
height: 0
instead of the classic
display:none
Reference link :
https://github.com/kenwheeler/slick/issues/341
Thanks
You can set onClick function on the tabs (by class) or one tab (by id) like this
$("#tab1").click(function(){
$('.carousel-1').slick('refresh');
});
be careful on the tab and tab-pane
reference Github
The codepen demo missed an initial setPosition of original codes.
I've also forked a codepen demo:
https://codepen.io/RobJS/pen/zJgojN?editors=1010
autoplay: false,
autoplaySpeed: 2000,
fade: true,
arrows: false,
**lazyLoad:'ondemand'**
Use lazyload and wait 2 seconds after clicking (codepen takes this time to update).

Modifying onepage scroll functionality - overlap instead of slide up

Hi I am using this js library in order to make a site with full page scrolling.
http://www.thepetedesign.com/demos/onepage_scroll_demo.html
Here is my jsfiddle example:
http://jsfiddle.net/aLjLjxux/
Instead of each element being pushed up and out of the body, I want them to stay fixed and be overlapped by the following divs. Is there a simple implementation for this functionality within this library, or is there a different library that will allow me to achieve this?
For reference it would look something like this:
http://www.facebookgroups.com/ except reversed. As in the divs that come later will overlap the previous divs on scroll.
<body>
<div class="main">
<section style="background-color: #eaeaea;" class="first"><h1>Hello</h1></section>
<section style="background-color: #dadada;" class="second"><h1>Sup</h1></section>
<section style="background-color: #cacaca;" class="third">yo</section>
</div>
<script type="text/javascript">
$(".main").onepage_scroll({
sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
easing: "ease-out", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
// "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
animationTime: 1000, // AnimationTime let you define how long each section takes to animate
pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide.
updateURL: false, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
beforeMove: function(index) {$(this).css("position", "fixed");}, // This option accepts a callback function. The function will be called before the page moves.
afterMove: function(index) {}, // This option accepts a callback function. The function will be called after the page moves.
loop: false, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
keyboard: true, // You can activate the keyboard controls
responsiveFallback: false, // You can fallback to normal page scroll by defining the width of the browser in which
// you want the responsive fallback to be triggered. For example, set this to 600 and whenever
// the browser's width is less than 600, the fallback will kick in.
direction: "vertical" // You can now define the direction of the One Page Scroll animation. Options available are "vertical" and "horizontal". The default value is "vertical".
});
</script>
</body>
Thanks.
The website you link is using pagePiling.js plugin.
It even support old browsers with no CSS3 support, unlike the onepage-scroll you want to modify.
No need to modify the one you are using. It won't be that tribal anyway.
If you want to reverse it, then you should better start with pagePiling.js and you will have much less work.

How to drop down menu will drop in zero second

I have a drop down menu of JS in my website Please click here for website but its dropping very slow. Below is the JS code I am having. Please let me know how to make it to drop fast in Zero Second...
$(document).ready(function($){
$('#mega-menu-7').dcMegaMenu({
rowItems: '3',
speed: 'fast',
effect: 'slide'
});
});
Change speed: 'fast' to speed: 0. dcMegaMenu uses the literal speed value for the animation time, so if you set it to 0 it doesn't actually animate and will perform the transition instantly.

How to stop Jquery jCarousel on a specific condition

I am working on jquery's jCarousel, In which i am having some images from database and shown as slider using jCarousel, my functionality is working as per i expected but i want to apply one more functionality is that if image is only 1, then it should not do sliding, I am taking image count from database then setting it in jCarousel visible property
$('.carousel').jCarouselLite({
visible: #ViewData["ImgTotalCount"].ToString(),
activeClass: 'current',
btnNext: ".carousel-next",
btnPrev: ".carousel-prev",
auto: 2000,
speed: 600
});
curently it is sliding even on one image
If you have only one image, set the auto parameter to null. It will restore it to its default value, and to its default behavior, which is not moving.
See documentation here : http://www.gmarwaha.com/jquery/jcarousellite/#doc

JQuery Tabs - Toggle Animations

So far I have this code
$(document).ready(function(e) {
$(".slidetabs").tabs(".images > div", {
effect: "fade",
rotate: true,
autoplay: true
}).slideshow();
$(".slidetabs").data("slideshow").play();
});
Is there any way to have different animation? Not cross-fade, but something else. fx{} doesn't work for me and I don't know why.
effect seems to work for jQuery TOOLS-variant of tabs. You're sure you're not using that?
http://flowplayer.org/tools/tabs/index.html#effects <-custom effects in that case.
If this is about jQuery UI, this is a dupe: Different animations for Jquery ui tabs
(though that one is a bit old, it still gives the right answer afaik).

Categories

Resources