I would like to animate jQuery Mobile tab content. I have 2 tabs. You start on the left tab, with its content showing. When you click on the right tab, the right tab's content slides in from the right. I have this part working. I am using this script for my animation:
$(document).on("tabsbeforeactivate", "#tabs", function (e, ui) {
$(ui.newPanel).addClass("in slide").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass("in slide");
});
});
See JSFiddle here:
http://jsfiddle.net/69om1nsc/4/
And credit to Omar on this stackoverflow answer:
Data-transition effects does not work with tab navigation jquery mobile
Here's what I need help with: when you click on the left tab, I would like the left tab's content to slide in from the left. Currently, it is sliding in from the right. I'm not very experienced with Javascript, and I could not find anything on jQuery Mobile's site to help me.
Can anyone help me alter the script so that when the left tab is clicked on, its content comes in from the left?
Thank you!
Check the .index() of both newPanel and oldPanel, if the .index() of newPanel is greater than oldPanel's index, add class reverse.
$(document).on("tabsbeforeactivate", "#tabs", function (e, ui) {
var reverse = ui.newPanel.index() < ui.oldPanel.index() ? " reverse" : "",
classes = "in slide" + reverse;
$(ui.newPanel).addClass(classes).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass(classes);
});
});
Demo
Related
In Powerpoint, clicking the left mouse button advances to the next slide. In reveal.js, it is done using the keyboard. Is it possible to configure reveal.js to advance to the next slide also when clicking the mouse button?
It looks like you can add a click event to the entire slide and and check the button for the event.
window.addEventListener("mousedown", handleClick, false);
window.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false);
function handleClick(e) {
e.preventDefault();
if(e.button === 0) Reveal.next();
if(e.button === 2) Reveal.prev();
}
If you're worried about links on the page not being clickable you can check the target of the event. If it's a link, don't proceed to the next slide.
This site could be useful and has a more in depth explanation. It's where the above code is from.
This is driving me a little crazy as I just can't get it to work :(!
I have jQuery tabs set-up as follows (all working) :
$(".tabs_area" ).tabs({
fx: { duration: 'slow', opacity: 'toggle' }
});
I then have a scroll to anchor focus mechanism (again works fine in terms of the function itself) :
$('.tabs_area li a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 500,'easeInOutExpo');
event.preventDefault();
});
My problem is that sadly they won't work simultaneously. When I click the tab, it correctly displays the corresponding tab content BUT it doesn't scroll you to the start of this content. You have to click the tab again for it to then do the scroll to the content, which isn't good.
Sadly the reason I need is that I am using this on a mobile website, and when you click the tab, although it does actually change the content, it is bellow the tabs menu, and therefore below the visible area of the screen, hence why I want it to swap the content then scroll you down to this so you can see it, and of course with one click only.
So I think I need to combine the scroll functionality within the tabs set-up code... somehow... as a callback or something... but I just keep breaking it :(!!
Any help would be so much appreciated.
Thanks in advance,
TJ
Why don't you use the show option for jQuery Tabs?
Seems to do what you wish to do.
Check the solution
$(".tabs_area" ).tabs({
show: function(e,ui){
$('html, body').stop().animate({
scrollTop: $(ui.tab.getAttribute('href')).offset().top
}, 500,'easeInOutExpo');
}
});
For jqueryUI's tabs, I'm familiar w/ adding a function to the show event, as described in this question. However, is there a way to add a function when a tab is unloaded or loses focus? I see there is a hide function, but my function doesn't get called when I click away from a tab (to another tab).
Here is my code:
$("#myTabs").tabs({
selected: tab,
show:
function (event, ui) {
//some code that works
},
hide:
function(event, ui) {
//some code that never gets called
}
});
Instead of trying to accomplish something during the hide function, I added a custom function in my "select". You can read more about it on this other question.
Jquery Tabs showing a confirmation before activate
I have been googlgling around and it seems I don't get any answer :/
I'd like to know how can I make sure that the dialog title will "stick" to the top of the document even if I've scrolled down in the main page?
I tried the option "position" top, bottom but with no luck.
Thanks for answering!
Finally I come up with the solution:
Using the "open" event to trigger the window.scrollBy(0,window.innerHeight - dialogHeight);
$("#open").click(function (){
$("#dialog").dialog({
open:function(){
window.scrollBy(0,window.innerHeight - 850);
},
modal:true,
width:850,
height:850
});
});
This will ensure the title of the dialog will be shown at first rather than the bottom part.
I'm using jQuery tabs and I'm having some problems. Let me detail them for you here and then I'll put code below:
PROBLEM 1:
I have a total of 6 tabs (default tab in local div, other 5 loading via Ajax). When the page loads, I need the 3rd tab to be selected by default. Easy. Problem is, say I link to http://example.com/index.html#services the 3rd tab still shows up instead of the services tab.
I've tried to use cookie to set the selected value but it just isn't working right.
PROBLEM 2:
This is major and I can't seem to figure it out. The 3rd tab is the default data and if I click on a tab to the right of that tab and come back everything is golden. BUT... If I click on a tab to the left of the 3rd tab (all tabs left or right of default are loaded via Ajax) and then click back to the 3rd tab the panel goes away completely and it's blank. Then, clicking on a different tab not only leaves the 3rd tab in a selected state (not the content just the tab itself) AND ALSO the selected tab shows in a selected state as well.
I'm pulling my hair out trying to figure out what in the world is going on here. I'll be on the road a bit today, but will check in as it's possible. Hopefully one of you can help me straighten this out.
Okay... here's the code from my jquery
$(document).ready(function() {
//build tabs
$("#tabs").tabs( {
cookie: { expires : 30 },
load: function(ui) {
//initilize accordion
$("#accordion").accordion( { active: 2 } );
},
show: function(event, ui) {
//initialize accordion
$("#accordion").accordion( { active : 2 } );
//cookie select
var cookie = $("#tabs").tabs("option", "cookie");
/*
if(cookie) {
$("#tabs").tabs("select", $.cookie('ui-tabs-1'));
} else {
$("#tabs").tabs("select", 2);
}
*/
},
ajaxOptions: {
dataFilter: function(data, dataType) {
return $(data).find("#content_area");
}
}
} );
});
Here's the code from my tabs:
<div id="tabs">
<ul>
<li>Home</li>
<li>Services</li>
<li>Company</li>
<li>Employee</li>
<li>Work Tools</li>
<li>Contact</li>
</ul>
<div id="content_area">
<p>CONTENT HERE</p>
</div>
<!-- end #content_area -->
I sincerely appreciate your help.
Okay... Figured it out! Went in a completely new direction and actually ended up better as I can use the tabs and the back button with custom address bar changes.
I highly recommend the jQuery Address plugin as I used it to solve my problems. I had to do some tweaking with the accordion in the tabs because the autoHeight wouldn't work, but fixed that by checking the height() of accordion divs and setting changestart.