Quite simple, I have a link to a secondary page with data-transition="slideup". That page slides up when opened and down when closed fine, but upon clicking the link itself, the current page fades out before the new page slides up. Similarly, when closing the secondary page, it slides down and then the other page fades in.
Can I disable this fade? I just want the secondary page to slide over the top of the current page.
What you're looking for is the CSS transition definitions. I ran into this same problem. If you edit the CSS transitions (transformations), then you should be able to get the desired effect you're looking for.
The transitions are defined as <transition name>.in or .out. You can find them in the structure CSS file. For jQuery Mobile 1.4.2, they would be defined in jquery.mobile.structure-1.4.2.css.
Here's a definition of the slideup (in and out) definitions:
.slideup.out {
-webkit-animation-name: fadeout;
-webkit-animation-duration: 100ms;
-moz-animation-name: fadeout;
-moz-animation-duration: 100ms;
animation-name: fadeout;
animation-duration: 100ms;
}
.slideup.in {
-webkit-transform: translateY(0);
-webkit-animation-name: slideinfrombottom;
-webkit-animation-duration: 250ms;
-moz-transform: translateY(0);
-moz-animation-name: slideinfrombottom;
-moz-animation-duration: 250ms;
transform: translateY(0);
animation-name: slideinfrombottom;
animation-duration: 250ms;
}
(there are also reverse versions for these definitions).
All you need to do is modify these CSS transformations to get the desired effect. Notice how there are defined animation names: slideinfrombottom? These are pre-defined #keyframes in the same CSS file.
Modifying everything here should give you everything you need to tweak and tune the page transitions in jQuery Mobile.
Important note: jQuery Mobile will not fire the in transition until the out transition is completed. If you'd like to tweak that as well, that's a completely different matter. There is code present in 1.4.2 that I saw directly address concurrent and simultaneous transitions, but I didn't explore it thoroughly.
Related
This question requires some explaining, so please bear with me.
Contrary to popular belief, inertia scrolling (the very smooth 60fps scrolling) is not enabled on web pages in Mobile Safari by default. As it makes a world of difference in user experience, I have enabled it by dynamically applying this CSS to the HTML and BODY element of the page, after a Modernizr test for iOS specifically:
<style>
.touchscroll {
overflow: auto;
-webkit-overflow-scrolling: touch;
position:relative;
height:100%;
}
.touchscroll body {
height:100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
position:relative;
}
</style>
The above basically makes the body element a scrollable element and by means of -webkit-overflow-scrolling: touch, one gets the smooth intertia scrolling effect on the entire page. Some more background on this solution can be found here (disclaimer: article by myself).
It works, so far, so good. The problem is that this solution effectively disables another highly desired behavior of Mobile Safari: normally, when scrolling down, it will make the address bar smaller, and hide the bottom bar of the browser entirely. They re-appear when scrolling back up.
Unfortunately, the above technique disables this for some reason. Yes, we've got super smooth scrolling, yet the browser bar is always large and the bottom bar permanently stays visible, both taking up valuable space.
My question therefore is, can I have both? I want the super smooth scrolling on the entire page, yet I also want the default hiding behavior of browser elements when scrolling.
An example of a site where I am using this is here:
http://www.jungledragon.com/
If you open that in Mobile Safari, you will see the smooth scrolling, yet not the hiding of browser elements when scrolling down.
I think you're setting both the <html> and the <body> element to scroll. You should apply these CSS rules to 1 element you want to be able to scroll.
So either the html or body, not both.
First off, this is not a clone of: iPad/iPhone hover problem causes the user to double click a link
because I want an answer that is purely CSS. All of the answers in this link require js or jQuery and the one CSS answer involves background images. I'm trying to change the opacity and that's it.
CSS wants to gear itself towards the mobile revolution yet every solution I see for a simple 'touchDown'(aka touch-hover) creating a hover effect requires javascript or jQuery.
Here's some simple code to illustrate what I mean:
.btn {
border-radius: 5px;
display: block;
opacity: 1; <--from
background: red;
text-align: center;
line-height: 40px;
font-weight: bold;
&:hover {
opacity:.7; <--to
transition: opacity .2s ease-out; <--fun fade animation :)
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
}
Tested in Chrome & Safari
iOS will not trigger a link click event on the first tap if the :hover state either:
Has a CSS transition animation
Reveals child content (such as a submenu, tooltip or ::before/::after element)
In both cases the first tap will trigger the :hover state and a second tap will trigger the link (or click event).
If you remove the animation or the child elements you should get it to trigger within a single tap.
This great article from CSS Tricks digs a bit deeper into the issue:
The Annoying Mobile Double-Tap Link Issue
TL;DR: don't rely on hover to reveal things
From the source recommended in #ihodonald's answer also simply recommends not using hover at all:
It’s probably best to just not rely on hover to reveal anything. The tech to work around it isn’t quite there yet.
And from Trend Walton's article:
Ultimately, I think seeing hover states fade away will make the web a better place. There never has been any substitute for concise content, clear interaction, and simple design. If we focus on core elements that make browsing the web great, our sites will function properly no matter how people use them.
Use the touchstart event instead of click on touchscreen devices. This example fixes the issue for iPhone and iPad.
if (
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i)
) {
// iPhone double-click polyfill
$(document).on("touchstart", ".btn-that-does-something", function (e) {
e.preventDefault();
doSomething(this);
});
$(document).on("click", ".btn-that-does-something", function (e) {
// no-op
e.preventDefault();
});
} else {
$(document).on("click", ".btn-that-does-something", function (e) {
e.preventDefault();
doSomething(this);
});
}
I'm trying to have a snippet of text "zoom & fade in" once the page is loaded. To do so, I'm creating a div with the text inside and setting it to transform immediately:
.whatIwantZoomed {
opacity:0;
/* Vendor Prefixes here */
transform:scale(4,4);
/* Vendor Prefixes here */
transition:transform 1s, opacity 1s;
}
Now, when called from my Javascript function, an animated class is applied which reduces the scale to (1,1):
.whatIwantZoomed.animated {
opacity:1;
/* Vendor Prefixes here */
transform:scale(1,1);
}
Now, on mobile Safari (both iOS 7 & iOS 8), the effect actually does work. The problem is the scaled text is actually larger than the width of the viewport, causing it to 'resize' and zoom the page out. As the animation occurs, the page resizes back to how it should be.
What I'm trying to do here is remove this unwanted viewport width alteration. I've tried setting the body to have a property of overflow-x:hidden; to no avail, and I can't seem to get the viewport metatag to help me either.
Can anyone shed some light on a solution here? Thanks.
EDIT: Added a fiddle demonstrating this. Notice the scrollbars in the HTML frame? That's what I'm trying to prevent.
Try this
DEMO
div {
text-align:center;
background-color:red;
transform-origin: 50% 50%;
transform:perspective(1200) scale(1);
animation:animated 1s ease-in-out;
}
#keyframes animated{
from{transform:scale(10);opacity:0}
}
For anyone coming across this, it seems to be related to this bug
The root cause is things that are off screen incorrectly trigger safari (or wkwebview) to resize the viewport.
Add this to your viewport meta tag:
shrink-to-fit=no
I am using css3 for "button", It is running well on every browser but it's showing different in iPad. I think it takes the default properties of iPad so I apply
"-webkit-appearance:none;" but it is not working.
My CSS Properties are - background:#1356b4; border:solid 1px #0e4189; border-radius:5px; transition:all 0.3s ease-in-out; -webkit-appearance:none;.
And html code is simple span class button and input.
Please help me if someone having any solutions.
By adding -webkit-appearance: none; we are telling mobile Safari that we explicitly don’t want our button to be styled like a native Apple UI control.
Considering this proof of concept, would it be possible to animate margin-left (both negative and positive values) through JavaScript?.. And how would you go about doing so?
Note: I know this is WebKit-only. And I'm fine with that, seeing as I am developing for iOS Safari.
Update
Thanks for the answers, but jQuery's animate function doesn't support pure CSS animations, which is what I need.
I know that you specifically say "can you do this in JavaScript", but you shouldn't need to use JavaScript. I'm fairly certain that the proof of concept you link to only uses jQuery as a way to make the animations fall back to JavaScript so that all browsers play nice with the animation. Since you're specifically developing for Mobile Safari, you shouldn't need to use jQuery for this except to use a history plugin to push and pop states to make the browser's back button work; this is entirely doable via CSS transition properties and the :target pseudo-selector.
So as an alternative, you should be able to do something like this:
In HTML:
<div id="thing-that-will-transition">
<a href="#thing-that-will-transition>click this to transition the div</a>
</div>
In CSS:
#thing-that-will-transition
{
(bunch of properties)
-webkit-transition: margin-left [the rest of your transition values]
}
#thing-that-will-transition:target
{
margin-left: [your properties]
}
As long as your fragment URL matches up with the name of the element that you want to transition then you should be able to push the fragment in to the URL using JavaScript if you absolutely have to instead of using anchor with a fragment href while still having the transition take place. And if you use a jQuery history plugin or do your own pushing and popping of the history stack then you still get back-button behavior for your app.
I know you specifically asked for a JavaScript solution to trigger the CSS animation, but I'm just not sure why this is what you need. Sorry if this doesn't help you at all.
UPDATE: Here's a jsFiddle demonstrating the above. It uses this jQuery history plugin to manage the history stack, so that you can still get acceptable back/forward button behavior from the fragment URL's. The anchor tag uses the plugin's "push" or "load" method in its onClick with a standard fragment in the href attribute as a fallback for browsers without JS enabled.
UPDATE 2: Here's another jsFiddle that uses transforms/translations instead of transitions.
UPDATE 3 (by roosteronacid):
And as for getting the animations going through JavaScript, you can do:
var element = document.getElementById("...");
setTimeout(function ()
{
element.style.webkitTransitionDuration = "0.3s";
element.style.webkitTransitionTimingFunction = "ease-out";
element.style.webkitTransform = "translate3d(300px, 0, 0)";
}, 0);
You can set a transition in css3, and then subsequent changes to the element will be animated.
.MY_CLASS {
-moz-transition: all 0.3s ease-out; /* FF4+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5+ */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
-ms-transition: all 0.3s ease-out; /* IE10 */
transition: all 0.3s ease-out;
}
This specifies a nearly cross browser (damn IE) transition that applies to all css changes, lasts 0.3 seconds and eases, so it will slow down towards the end of the transition. Therefore, to animate it to the left/right, simply change the css:
$(".MY_CLASS").css("margin-left", "-300px");
Note this will animate it to a fixed position of 300px, if you want to animate to a position relative to its current location use:
var mleft = $(".MY_CLASS").css("margin-left");
var newleft = mleft.substr(0, mleft.length-2) + 50;
$('.MY_CLASS').css("margin-left", newleft+"px");
See a working example here (jsFiddle)
Better use transitions, that are almost cross-browser supported (except IE), and set the keyframes through JS.
This works using CSS, HTML and WebKit only:
#wrapper {
width: 700px;
text-align: left;
border-radius:10px;
-moz-border-radius:10px;
border-style:solid;
border-width:1px;
border-color:#ccc;
padding:30px 30px;
-moz-box-shadow: 0px 0px 5px #BBB;
-webkit-box-shadow: 0px 0px 5px #BBB;
box-shadow: 0px 0px 5px #BBB;
-webkit-transition-property: -webkit-transform, margin-left;
-webkit-transition-duration: 3s;
-webkit-transition-timing-function: ease-in;
-webkit-transform: translate(100px);
}
Just make a <div id="wrapper">Placeholder text</div> in an HTML file to test it out. Worked for me in Google Chrome 12.0.742.112 and Safari 5.0.5 (6533.21.1). If it doesn't do the animation right away, it may be due to your browser processing the translation too quickly (or caching, perhaps?). You might consider adding a delay somehow. I just pressed the refresh button a few times really fast. Worked for me.
Edit:
Check out the source behind girliemac's test page. Some insightful stuff there. Also see this SO post.
you can use jqueries .animate() - http://api.jquery.com/animate/
Check my example - http://jsfiddle.net/ajthomascouk/jS83H/ - Press the + and -
Animating css margins with jQuery works like this:
$( '#mydiv' ).animate({
'margin-left': 'new margin value'
});
To use webkit's css animations, you'd create a class that has the transform property, then you can use jQuery to add/remove said class as needed.