I am using jquery ui tabs. I want to apply sliding content effect when switching between tabs i.e on showing and hiding of the tabs content. Here is my DEMO
I'm trying to slide the tab divs with the content in them when I click on the navigation above it all. So Nav link 1 would slide the content of #tabs-1 in front of the screen, etc.
The script I have currently, which has no sliding functionality is :
$(document).ready(function () {
$('#tabs').tabs();
$('.sub-nav a').click(function () {
$('.sub-nav li a').removeClass('subnav-active');
$(this).addClass('subnav-active');
});
});
I've tried to do slideToggle, as well as just a fading out and fading in effect, but couldn't get either to work. So i'm reaching out for some assistance, even if all it is, is somewhere to look, that would be greatly appreciated since i'm not the greatest at javascript or jQuery.
jQueryUI has effects built in. No need to roll your own.
http://api.jqueryui.com/slide-effect/
http://jsfiddle.net/isherwood/9jg4r/4/
$('#tabs').tabs({
hide: {
effect: "slide",
duration: 1000
}
});
Here's an example with show and hide effects: http://jsfiddle.net/isherwood/9jg4r/5
Related
I've created a fiddle
http://jsfiddle.net/d9wf1s44/
When I click the hamburger menu, the breadcrumbs toggles away to right, and after that the function executes which shows the menu.
$menu_toggle.on('click', function(e){
e.preventDefault();
$(this).toggleClass('open');
breadcrumbs_bar.toggle('slide', {direction:'right'}, 800, function(){
$navigation.fadeToggle(600);
});
});
Now the issue is that when I click again, naturally, the same thing will happen, the breadcrumb will toggle and menu will fade out. It's just that I'd like first the menu to fade out, and then the menu to toggle in. How can I do that? animate is used for css manipulation and I tried doing everything with css transitions and delay, but couldn't achieve the nice result like here, I like the toggle animation that the breadcrumbs has, so that's why I'm using toggle (also the breadcrumbs get display none, so the menu is right next to the icon).
How can I control what happens on second click? How to separate this?
You have to make alternate animation for close the menu
after you toggle class "open", you have to do as below :
if($(this).hasClass('open')){ //open function
breadcrumbs_bar.toggle('slide', {direction:'right'}, 800, function(){
$navigation.fadeIn(600);
});
}else{
$navigation.fadeOut(600, function(){
breadcrumbs_bar.toggle('slide', {direction:'right'}, 800)
});
}
you can check my jsfiddle demo http://jsfiddle.net/euds0n6x/
I have a menu that is hidden from view (for mobile) using CSS:
#filter-column {
position:absolute;
left:-400px;
}
When the user clicks a link I want to hide everything else except that menu which will slide in from the left. I want the reverse to happen when the layer is closed.
I have the following jQuery:
// Show/hide filters on mobile //
$("#openMobileFilters").click(function(){
$("#filter-column").animate({left:'0'},600).css('position', 'relative');
$('#results-container, #footer').addClass('hidden-xs');
});
$(".closeFilters").click(function(){
$("#filter-column").animate({left:'-400px'},600).css('position', 'absolute');
$('#results-container, #footer').removeClass('hidden-xs');
});
The problem is when I click to hide the menu the content shows before it is actually hidden. Is there a better way of doing this?
Without seeing this in action in a fiddle, I can only suggest you move the removal of the hidden class to the complete function of animate
$(".closeFilters").click(function(){
$("#filter-column").animate({left:'-400px'}, 600, function() {
$('#results-container, #footer').removeClass('hidden-xs');
}).css('position', 'absolute');
});
Currently, you are showing the content while the animation is going on which is why you see the content right away.
you have to put the code you want to be executed after the animation in the complete callback .. for example:
$("#filter-column").animate({
left:'-400px',
complete: function() {$('#results-container, #footer').removeClass('hidden-xs');}
}, 600)
I use carousel bootstrap 3 to use slide text. When the row#1 text is long to bottom (ex: height 300px) and the row#2 text is too short (ex:just 10px), The problem is we always must scroll to top as manually when we click next to row#2 from row#1. How to make when next slide, the system will 'smooth scrolling' to top as automatically???
In other hand, How to user can use 'hand carousel' ??? (I don't know the technology name but user just tap to right on mobile when want to next slide) when use mobile so its easy next slide without go to bottom again (find the carousel again) (this issue important when mobile ).
This is simple code
$(document).ready(function() {
$('#carousel-example-generic').carousel({
interval: false
})
});
But full code in fiddle: http://jsfiddle.net/luisan/B9FeP/1/
Thanks
You could tap into the carousels slide event and then add the jquery scroll top function
$('#carousel-example-generic').bind('slid', function () {
console.log('slid event');
$('.carousel-inner').scrollTop(0);
});
Maybe using body would be better
$('body').scrollTop(0);
You can also add in an animation that would look nicer
$('body').animate({ scrollTop: 0 }, 600);
I am using Zurb Foundation to create a small website and I have a top navigation bar with four links. On clicking each link, I want to horizontally slide to a different page every time.
The content in the page should be loaded via ajax and not loading all pages on visiting index page itself. (note: content for slide-to page should be loaded not after the slide animation but somehow with the slide itself or else the empty sliding would look a little weird)
In addition, since I am using foundation to get responsive layouts, I am confused how to place the sections for the different pages horizontally. If the website wouldn't have been responsive, I probably would have placed the other pages separated by a margin property and to slide them, I could have done an animate of the margin property.
But, how do I get a horizontal page sliding effect (along with ajax loading) on my current page?
I think you want a 'single page website'? There are a lot of tutorials about this but this one is great:
http://vandelaydesign.com/blog/web-development/single-page-sliding-nav/
A live demo can be found here:
http://vandelaydesign.com/demos/single-page/
This uses jquery to scroll to the element with a specific id on the page. When you click one of the menu items it scrolls/slides automatically to that part of the page.
Just because the code is a bit long I'll only post the Jquery, to give you an idea.
<script type="text/javascript">
$(document).ready(function(){
$('#topnav').onePageNav({
currentClass: 'current',
scrollOffset: 0
});
});
</script>
$('#nav').onePageNav({
currentClass: 'current',
changeHash: false,
scrollSpeed: 750,
scrollOffset: 30,
scrollThreshold: 0.5,
filter: '',
easing: 'swing',
begin: function() {
//I get fired when the animation is starting
},
end: function() {
//I get fired when the animation is ending
},
scrollChange: function($currentListItem) {
//I get fired when you enter a section and I pass the list item of the section
}
});
Hope it helps :)
I have a wordpress template that makes use of Coda Slider 1.1.1, and although I have figured out how to make it transition less frequently, I can't figure out how to change the physical speed at which the elements slide across the screen. I'm looking at the coda-slider.1.1.1.pack.js file but can't see it in there...
If you are using Coda slider 1.1.1 pack js.. You can use this code to auto slide :
jQuery(window).bind("load", function() {
jQuery("div#slider1").codaSlider({ continuous:true})
jQuery("div#slider2").codaSlider()
// etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.
var autoSlide = setInterval(function()
{
jQuery("#stripNavR0 a").click();
}, 6000);
});
Instead of #stripnavR0 a use the id for the div use on right click of your slider.
you can adjust the slide speed with that:
$().ready(function() {
$('#coda-slider').codaSlider({
autoSlide: true,
autoSlideInterval: 4000,
});
});
Cheers,
Stefan