I have a simple Jquery UI accordion with 3 sections. All 3 sections are collapsed in the beginning. When I click on a section header, the section content should show (slide) up. The special thing is now that the section content divs are positioned absolutely over each other.
To make it look good I want that the current opened section toggles completely before the animation of showing the next section begins.
This is what I have made to toggle the section it right now:
$(function () {
$("#accordion").accordion({
create: function (event, ui) {
ui.oldPanel.slideToggle("slow");
},
collapsible: true,
active:false
});
});
You can see how it looks like on:
http://jsfiddle.net/kqMAR/
It appears that the toggle and show up animation start at the same time. But what I want is to toggle it completely before starting the next slide up.
New Answer :
Try this
http://jsfiddle.net/6QJJp/1/
This is what you exactly need
you will need to fix CSS according to you requirement.
$(function () {
$("#accordion").accordion({
animate:{duration:5000},
collapsible: true,
active:false
});
});
Use above function to understand what is happening actually, new section starts opening as soon as the old section starts closing that's why its giving an illusion of incomplete animation. for complete animation place the buttons one below another then you will be able to see proper animation. If you require horizontal arrangement then you can possibly use fading effect that also looks cool.
Related
I am using bootstrap carousel but I need a very simple thing to be done. My carousel is placed in the bottom of the page and I want to stick to the 1st slide of the carousel until the user reaches this section. As soon as the user will reach the section,the carousel will start playing. I do not know how to achieve this. Please help me with ideas.
Thanks in advance!
According to http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
The .slide class adds a CSS transition and animation effect, which
makes the items slide when showing a new item. Omit this class if you
do not want this effect.
So all you need to do is to add that class when the user scrolls to that element...
As in, for the example given on the link I mentioned above, the element with id='myCarousel' must be given the .slide class.
Hence, using the jquery, the code will be as follows:
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>=($("#myCarousel").offset().top){
$("#myCarousel").addClass("slide");
//ANYTHING YOU WANT TO DO WHEN THE USER SCROLLS TO YOUR CAROUSEL.
}
})
});
NOTE: CODE NOT TESTED.
You can do it like that.
After doing quite a lot of research,finally I got this solution.I have mangaged to go back to the first carousel when I reach a specific portion.(Here the section where carousel does exist)
My code is:
$(document).ready(function(){
$(window).scroll(function(){
console.log($("#myCarousel").offset().top);
if($(window).scrollTop()>=$("#myCarousel").offset().top-70 && $(window).scrollTop()<2450 )
{
var index = $('.slides li').index($('.slides li:first'));
console.log(index);
$('.flexslider').data("flexslider").flexAnimate(index);
}
})
});
I am trying to integrate Royal Slider within my website. However I am having trouble with the first slide when the slider is within tabs on my page.
For example, you can see at http://christierichards.co.uk/slidertest/newtemplatefix.php that the slider is working perfectly (there is no styling as of yet).
On this page http://christierichards.co.uk/slidertest/newtemplate.php when you click on before and after (this is the tab I want the slider appearing in) the first slide does not show until you click tab 2 and then the height seems to appear.
I have managed to fix it within the tabs but this is only by adding a fixed height onto .rsOverflow. I cannot use a fixed height as I need the auto-height feature to work for clients to add their own photos. So I need a different way around it.
There must be a piece of conflicting code somewhere however I am stumped! Any help would be appreciated.
Thanks
The slider is being initialised while it is hidden behind a tab. Because of this, it cannot calculate its height and width, and is invisible. When you change to the next item in the slider, the heights and widths are recalculated, which is why you can see it again.
You can either add an initial height to .rsOverflow, or (re)initialise the slider when the tab is clicked, and the contents are made visible.
For example:
var sliderInitialised = false;
$j( "#tabs" ).tabs({
activate: function( event, ui ) {
// Check the activated tab, is the one that contains the slider
if(!sliderInitialised) {
// Initialise slider ...
sliderInitialised = true;
}
}
});
Alternatively, the slider could be initialised before all the tab contents are hidden.
I'm trying to make a custom slider for a few testimonials. The picture below illustrate how it should work. The first testimonial is highlighted and when the user clicks on the next testimonial the yellow background should slide to it, the font color of the name and company should change and also the actual testimonial text should slide.
I managed to make a functional version, which you can see in this fiddle or live on this website. Any improvements and explanations will be highly appreciated (I'm still very new to jQuery).
Here is the jQuery code I used:
$("div.container-slider").click(
function () {
$("div.active-slide").toggleClass("animate", 1000, function () {
$("div.mike").toggleClass("current-font", function () {
$("span").toggleClass("company-current");
}),
$("div.neil").toggleClass("inactive-slide", function () {
$("span").toggleClass("company");
});
}),
$("div.testimonial-text").slideToggle("slow", function () {
$("div.testimonial-text-2").toggleClass("display-none");
});
});
Problems:
How can I make the font color and weight change more subtle?
How can I target specific span codes, because right now the script changes the span color everywhere on the website?
How can I make the testimonial-text slide more smoothly (similar to the yellow background)?
It looks like you're already using CSS transitions. Have you tried fiddling with them?
Use this to limit scope to the current element, as in $(this).find('span')...., or use index (eq()) to target by slide, or give the relevant spans a class to target.
I'm not sure why you're toggling your display-none class, but that's
probably causing the abruptness. Try removing that.
I am trying to create something similar to this effect, where you can click on the hamburger icon and a menu slides out:
http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/
I don't need the hover event, just the click.
My problem is that in the above example, there is already space allocated for the menu to live. In my situation, I need my main content to shrink to make room for the menu. So, using Bootstrap, I am switching my main content from the "col-md-12" class to the "col-md-11" class, so that my menu with the "col-md-1" class can fit:
$('#toggle').mousedown(function () {
$('#mainMenu').toggleClass('col-md-1');
$('#mainMenu').toggleClass('zero');
$('#mainContent').toggleClass('col-md-12');
$('#mainContent').toggleClass('col-md-11');
});
I have attempted something here:
http://jsfiddle.net/955RV/
But it's not quite right. The negative margin trick is because I'm not sure how else to bring in the menu from the left. I also am not happy with the right side of the content shrinking in animation before the menu appears and would prefer it to happen simultaneously. My guess is that they are technically happening simultaneously, but that the margin animation takes longer to complete than the width animation.
Any help would be appreciated. Let me know if I can help clarify anything.
This looks like a great place to start:
http://tympanus.net/Blueprints/SlidePushMenus/
Notice the difference between the "push" and "slide" type menus. I was looking for "push."
Code explained here:
http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/
I am trying to animate a menu and have things sliding to the right on mouseover. Is there an easy way of undoing everything mouseover did when mouseout?
I have all the menu items (of my vertical menu) slide to right and have an empty news div slide in place of these menu items, which then gets filled with content, once it is in place... i.e. multiple instances of animate().
I think you are looking for something like .stop function: http://api.jquery.com/stop/
And probably you want to do something like this:
$(el).hover(function () {
$(this).stop().animate(...);
}, function () {
$(this).stop().animate(...);
});
Example: http://jsfiddle.net/VjKLe/