Working on a mobile app, I have a menu that "slides" from left to right, using:
$.mobile.changePage(href, { transition: "slide", reverse: true });
On the page I am sliding to, I have a jqm back button, that goes back to my previous page.
The back button, "slides" the page from left to right. I want it to slide from right to left, reversing my left -> right initial transition.
I have tried:
Back
This does not work. I then thought, lets not "reverse" the transition, as it was already reversed to start with. So I tried just specifying slide thinking it would default to the normal slide of right -> left.
Back
This also does not work. My animation on the back button keeps sliding left -> right.
Thanks
Ended up using this.
Overriding the backbutton click event.
<script type="text/javascript">
$(document).on('touchstart', '[data-rel=back]', function (e) {
e.preventDefault();
$.mobile.changePage("index.html", { transition: "slide", reverse: false, changeHash: false });
});
I had to use changeHash: false, as my navigation flow did not register the page to be removed from the history when you now use the UI backbutton. This left me with cycling through all the "menu" page cycles I opened when clicking the hardware backbutton, until all is gone and the app closes.
With the changeHash, I now have one extra click when closing the app, which I can live with.
Related
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
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);
Right, so I have a main menu on my site, and I'm using the Hover Intent plugin to show sub-menus. When hovering the menu will fade in with easing, and of course will fade out with easing when the mouse moves away.
Now, what I'm trying to do seems quite simple, but I just don't know how to implement it. I need to be able to only animate the first menu that I navigate to, but when I hover between them, there should be no animation.
For example, let's say I have the following menu structure:
Home
About
Company
Mission & Vision
Solutions
About our solutions
Money-back guarantee
Contact Us
"About" and "Solutions" both have sub-menus. If I hover my mouse over "About", I want its sub-menu to fade in. If I move mouse directly from "About" to "Solutions", I want the visible sub-menu to simply disappear (no fading), and the "Solutions" sub-menu to simply appear (no fading). Then, when the mouse leaves "Solutions", that menu should fade out.
It might sound silly at first, but I have a reason for this process. See, I have a page-wide block element behind the sub-menus that also animates with the menus themselves. Its purpose is to make the menus stand out better. Now, I don't want that fading out every time I switch between menus.
Is this possible?
Here's my current [basic] code right now:
MainMenu = {
setup: function(menu, over, out) {
$(menu).hoverIntent(function() {
$(this).find('div, ul')[over]({duration: 450, easing:'easeInOutQuad'});
$('div.backFade')[over]({duration: 450, easing:'easeInOutQuad'});
}, function () {
$(this).find('div, ul')[out]({duration: 450, easing:'easeInOutQuint'});
$('div.backFade')[out]({duration: 450, easing:'easeInOutQuint'});
});
}
}
MainMenu.setup('div.menuPlaceHolder > ul > li:has(div,ul)', 'fadeIn', 'fadeOut');
Found it:
MainMenu = {
setup: function(menu, over, out) {
$(menu).hoverIntent({
over: function() {
$(this).find('div, ul').stop()[over]({duration: 450, easing:'easeInOutQuad'});
$('div.backFade').stop()[over]({duration: 450, easing:'easeInOutQuad'});
},
out: function () {
$(this).find('div, ul').stop()[out]({duration: 450, easing:'easeInOutQuint'});
$('div.backFade').stop()[out]({duration: 450, easing:'easeInOutQuint'});
},
interval: 0
});
}
}
I just set the interval method to 0 and added stop() to each action. So, the menus will always animate (which is okay, I guess), but the backFade will not.
Here is a link to the item in question:
http://www.nychukdesign.com/uploads/dynamic-top-bar-nav-menu.html
All HTML, Javascript and CSS is in the one html file
Functionality description:
This is a simple dynamic horizontal navigation bar that is intended to disappear when a user scrolls down the page, in which a trigger is activated when the user mouses into the area, of which it slides down and reappears, and disappears once more upon mousing out. When the user scrolls back to the top the navigation returns to it's default (static) state...which is where the problem comes in.
Problem description:
Sometimes (and yes I can not re-create this problem every time) when you return to the top of the page, and the navigation returns to it's default state, when the mouse leaves this area (without scrolling down again) the navigation will slide up and disappear. Sometime it will happen on the first try, sometimes after several, and primarily in Firefox 2.0, although I have had it happen once or twice in Safari.
My thoughts:
I am baffled by this, and why I am seeking help. Any advice would be greatly appreciated.
To re-create the problem
Update: I just discovered how to re-create the problem. You must scroll down and trigger the menu at least once, before scrolling back to the top, in which mousing over the menu will for some reason make it disappear.
Code:
<script type="text/javascript">
// Use short notation of DOM ready
$(function(){
// Assign variables for the menu, the trigger and the menu position (relative to the document)
var menu = $('#menu'),
menuTrigger = $('#menu-trigger'),
pos = menu.offset();
// Listen for the scroll event
$(window).scroll(function(){
// If we scroll past the position of the menu's height and it has it's default style, then hide menu.
if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
menu.fadeOut('fast', function(){
// Remove the default class and replace with fixed class
$(this).removeClass('default').addClass('fixed');
});
// Initiate the trigger to show and hide the menu with the mouse event
$(menuTrigger).removeClass('hidden').addClass('block').mouseenter(function(){
$(menu).slideDown('fast').mouseleave(function(){
$(menu).slideUp('fast');
});
});
// If we scroll back to top and menu has fixed class, fadeIn menu
} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeIn('fast', function(){
// Hide the trigger
$(menuTrigger).removeClass('block').addClass('hidden');
// Give menu default style
$(this).removeClass('fixed').addClass('default');
});
}
});
});
</script>
I'm currently trying to make a div appear from behind another div after the user scrolls away from the top of the page.
I'm hoping to do this using animate so that it slides out. Like this...
http://jsfiddle.net/xaYTt/99/
But I can't figure out how to make the red box stay behind the blue box until the user scrolls away from the top of the page.
I also need to reverse this when the user scrolls back up to the top of the page, so the red box slides back under the blue box again.
Can anyone help me out?
This is not the most elegant solution, but it works nonetheless.
http://jsfiddle.net/37LZ5/
Components:
Use $(document).scroll as a trigger to know when scrolling
Use scrollTop() to know how far we're scrolling (0 = top)
Remember state to make sure animation doesn't get triggered a zillion times (var away)
Use .stop() to prevent weird behaviour when halfway through one animation, another animation gets triggered
I think you are looking for this take a look at this demo
Working demo
Code
$(document).ready(function(){
//$('#bottom-box').animate({'margin-top': '200px'}, 1500);
$('body').hover(function(){
$('#bottom-box').animate({'margin-top': '200px'}, 1500);
}, function(){
$('#bottom-box').animate({'margin-top': '50px'}, 1500);
});
});
If my understanding about your question is correct, this is what you are looking for
Since you said, "User scrolls away from the top of the page", I added a div to be at the top of the page.
var isAlreadyOut=false;
$("#divPageTop").mouseover(function(){
if( isAlreadyOut==true)
{
$('#bottom-box').animate({'margin-top': '60px'}, 1500);
isAlreadyOut=false;
}
else
{
$('#bottom-box').animate({'margin-top': '200px'}, 1500);
isAlreadyOut=true;
}
});
Here is the jsfiddle version
http://jsfiddle.net/xaYTt/103/
I did something with jsFiddle that might be what you are after, if I understood your question correctly.
Basically, the red box will animate when you scroll the window more than the distance of the blue box.
Not 100%, just a quick mock up to see if that's what you want.
(When you scroll, click on the scroll bar arrows for more accurate results)
Demo here: http://jsfiddle.net/peduarte/xaYTt/104/