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');
}
});
Related
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
I'm able to navigate to specific slides using the reveal.js API like so:
<script>
$(document).on('click', '#goToMySlide', function() { Reveal.slide(6); return false; });
</script>
But that only jumps directly to the slide without any of the cool transitions that reveal.js is known for (zoom, fade, concave, etc.). Any idea how I can jump to a slide with a transition effect?
Looks like you can do this with the viewDistance parameter when configuring Reveal.
The author suggests using viewDistance: 100 (or some sufficiently large number) to make this work.
I am trying to set up a JQuery Mobile 1.3 site that uses a panel and a slider.
Problem is, that using the slider triggers the panel, which opens on a "swiperight" event, as I am moving the slider to the right. The slider will be for pagination, the panel for a menu.
Code here:
http://jsfiddle.net/kMARn/1/
Move the slider to the right and the panel will open.
I have tried using the .not() selector for the panel to not react on the slider:
$(document).not("#slider").on("swiperight", function(event, ui) {
$("#myPanel").panel("open");
});
But it won't work, the panel opens when i move the slider to the right. Tried a bunch of variants too, but I'm lost...
Any ideas?
Thanks!
A bit late to the party, but you can disable swipe-to-close by setting the data-swipe-close attribute to "false" on the panel div.
http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/options.html
In my case I used this simple code, without data-swipe-close = "false" in panel.
Keeping panel close with swipe right, outside of the slider.
$('#panel').find('#slider')
.on('slidestop',function(e,ui) {
var value = e.target.value;
//...operations with slider value...
})
.parent().on('swiperight',function(e,ui) {
e.stopPropagation(); //block panel close
})
From the 1.3.0b1 Docs for Swipe:
"Triggers when a horizontal drag of 30px or more (and less than 75px
vertically) occurs within 1 second duration"
This applies to and can be configured for swiperight too. You can make the slider small in length and this would ensure that both the slider event stop and the swipe are not triggered at the same time, yet that may not be practical for all scenarios.
What might be better is to bind the swipe right to a DIV or section of the page. By this, I mean if you have a 75 px div box on the left hand side of the display, and when a swipe event occurred within that div, it could trigger the menu.
I feel the logic here might be better controlled by a button, much like used in the Facebook App to display there slide out menu. In the Dolphin browser on Android, this type of event also triggers a bookmark menu, so if a page has a swiperight event and trigger it, I sometimes get both the event and the bookmark menu from the App. Annoying!
I did fork your jsfiddle and will play with it more (http://jsfiddle.net/Twisty/Hg2pw/). FYI, they have JQM 1.3.0b1 in their available frameworks so you don't have to link it in your HTML. If I find some more info, I will comment here.
The following solution is more a workaround. It should be relatively reliable though.
$(document).ready( function () {
var menu_available = true;
$(document).on("swiperight", function(event, ui) {
if (menu_available) $("#myPanel").panel("open");
});
$("#slider").on("slidestop", function( event, ui ) {
menu_available = false;
window.setTimeout(function() {menu_available= true;},250);
});
});
The variable menu_available is false for a 250 milliseconds right after the slide stops. The window.setTimeout block will reset the variable so that the menu is available again.
This is a stupid workaround, but jQuerys function event.stopEventPropagation(), which IMHO would be the correct way to go, didn't work.
This is my accordion: http://muso-syndicate.com/accordion/index9.htm - N.B. only currently styled for SF, FF, doesn't currently work in IE
If you select a 2nd category header once another one has been opened, it doesn't re-focus on the new header. By example, click on 'Classical' then scroll down and select 'Jazz', it doesn't automatically scroll back up to the top of the 2nd category.
Ideally, I'd like to add a 'scrollTo' function to '.bind' to the jQuery UI library. However, I have tried various solutions suggested on StackOverflow but none seem to work for me!
As the categories will vary in height as more content is added, I'd prefer not to use a solution that uses a fixed pixel scrollTo solution as this will require constant altering as new content is added to each category.
Any suggestions would be greatly appreciated as several folk seem to be scratching their heads on this one!
UPDATE:
I've got much closer to a solution for this but still requires some tweaking to stop the focus occasionally scrolling past the category header. Please see code below:
$(function() {
$( "#categories" ).accordion({
collapsible: true,
autoHeight: false,
active: -1,
change: function(event, ui)
{
$("#categories").bind("accordionchange", function(event, ui)
{
$("#categories").animate({scrollTop: $(ui.newHeader).offset().top}, 1);
});
},
});
});
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.