I've got an skrollr page with autoplay (animateTo) and an Stop function, fired by an button.
Problem, after fireing the stop function the page is stopped and "scrolled" back to top.
regards
martin
Related
I'm coding a website and trying to work out best practise for displaying a progress cursor. As my site is using an Ajax request to do the main heavy lifting, I've simply selected the "progress cursor" in CSS and apply it via jQuery at the start of my Ajax request and set it back to cursor:auto by applying another class with jQuery when I get the response back. Now this works well on my PC and laptops, but does not seem to work on my iPad. Everything works fine but the cursor on the iPad does not change when the Ajax request fires. Has anyone had a similar 'problem' or am I missing something that needs to be done on iPad / Mac, or perhaps not doing this right?!
My CSS code to set cursor :
body.wait { cursor: progress !important; }
My jQuery to apply cursor at start of Ajax request
$('html, body, button').css("cursor", "wait");
..and to set it back on completion of request:
$('html, body, button').css("cursor", "auto");
Many thanks for any ideas of how to get it working on iPad!
On my webpage, I've got several tabs and, in one of them, I want to display an iframe containing a Google Doc.
When the iframe is displayed, the google doc is loaded and there is no problem.
But by default, this tab is hidden (so, the iframe inside too)
Something like
<div id="tab-1">...</div>
<div id="tab-2" hidden>...</div>
<div id="tab-3" hidden><iframe src="https://docs.google.com/document/d/......../edit?usp=sharing&embed=true"></iframe></div>
with jquery to handle actions
And, when the iframe is hidden, it seems like it can't load until it's not hidden anymore. The problem is I endlessly get popup saying
This error has been reported to Google and will be examined as soon as possible. To continue, please refresh the page.
In a page without tab, if the iframe has the "hidden" attribute, the bug occurs too
I could get around the problem by "hiding" the iframe with a "heigth=0" but when it's hidden in a tab, the problem comes back
Have you ever met this problem and find a way to solve it ? Do I have to "dynamically load" the google doc iframe when it becomes visible ? (And then, how to ?)
Thanks
I don't mind if the iframe is loaded later so I decided to load the <iframe> with jquery, when the tab is opened, by storing the src into the attributes.
There could be problems though, if the tab is closed while the iframe is not fully loaded.
That's why I prevent this by stop loading if the tab is changed, (and don't if it's already fully loaded.)
html
<iframe data-src="https://docs.google.com/document/d/......"
class="google-doc"></iframe>
jquery
//Stops iframe loading
$(".tab-to-close iframe.google-doc").not('.isloaded').prop('src','')
//Change the tabs
$(".tab-to-close").hide();
$(".tab-to-open").show();
var iframetoload = $(".tab-to-open iframe.google-doc");
//Load iframes on the new tab
iframetoload.prop('src',iframetoload.data('src'))
//If it's loaded in time, save it so it's not destroyed on tab changing
iframtetoload.on('load', function(){
$(this).addClass('isloaded');
});
Hi everyone,
reading through this google group and the fiddles and blogpost linked from there, I managed to get page transitions working with ng-animate.
Here's my Fiddle
the fiddle is nicely commented, please let me know if anything's unclear
By setting a 'transitionClass' (either .LR or .RL) on the ng-view I was able to trigger different css-transitions for every view change.
Now, what I want to do, is manually applying a "back" transition in case of changing the view one step back, no matter whether that step back is caused by a link within the app or the browser's back button.
To do so, within app.run(), I'm listening for $locationChangeStart, saving the current url slug and then checking against it on the next $locationChangeStart to determine whether we're going back one page. If that's the case, the "back" transition is applied.
This works pretty well, except for...
The entering page (.page-enter, .page-enter-active) is transitioning as expected, while the leaving page (.page-leave, .page-leave-active) seems to be stuck on the previously used transition.
I'd expect, setting a transitionClass 'LR' on the ng-view, that both pages, entering and leaving, use the css transition for '.LR page-enter' and 'LR page-leave'.
What seems to happen instead: If the transitionClass was 'ANY' before, the ng-animate will use '.LR page-enter' for the entering page and '.ANY page-leave' for the leaving page.
Reproducing the 'bug':
App starts on Page 1. Go from 1 to 2. Now go from 2 to 3, this transition is broken. Go from 3 to 1, this transition works as expected. Both transitions are 'RL' (Right To Left), so they should look the same. The only difference being that page 2 enters 'LR' while page 3 enters 'RL'. So, actually, page 1 will use the '.enter-active' transition that was originally set for page 3 when changing from 2 to 3.
Is this the expected behavior?
I'm majorly confuzzled right now, but only working with angular for the last week or so and ng-animate being relatively new feature I might very well be missing something. So before reporting a bug or anything I'd welcome any input on this.
Thanks!
Ok, so based on the comments I'm pretty sure you want the incoming page to also determine exit animations to apply to the outgoing page. So you really need your $locationChange code.
It also looks like the problem you are seeing is that you are setting a class on the parent independently on the incoming page but there is nothing to keep the animations waiting for this class change to occur.
The simplest fix seems to be to make the ng-animate depend on your changing variable to determine the animation class names:
<ng-view ng-animate="transitionClass"></ng-view>
then the CSS selectors just collapse into single classes:
.LR-enter-active {
...
}
(where transitionClass is still being set on the $rootScope in the locationChangeStart:)
$rootScope.$on("$locationChangeStart", function (event, next, current) {
...
http://jsfiddle.net/9XPVX/4/
On this page I am making I have a button at the bottom of the page, which has to get wider and then move up when clicked. After the button has reached its new place, new content should load.
I have found a lot about CSS transitions an animations on hover, but I want to use this as a page transition.
How do I get this transition to happen before loading the new page??
I would love to do this with as little JS as possible..
Thanx Y'all!
Based on what you asked:
This delays the page load until the transition is complete (the setTimeout just need to be set to whatever the duration of the CSS transition is).
$('.link').click(function () {
$(this).addClass('clicked');
setTimeout( function() {
window.location.href = "url for page goes here";
}, 500);//set 500 to whatever timeout you want
});
See pen example: (http://cdpn.io/vyuch)
BUT
This is not a good idea... If CSS transitions aren't available, it will just look like a terrible link and confuse users. If they are, it is still slow and frustrating.
If you want the content to load on the same page, you need to use AJAX. To help with this, some more information would be helpful...
I'm building a photo gallery in ASP.NET. The user can browse thumbnails along the left and select one, which brings a preview-sized version into the right pane of the page.
I'd like to fade between the images, so that the current one fades out and the next one fades in. I'm using jQuery to fade the preview image in after it is loaded, which works great. Unfortunately, I can't get the fadeOut script to run before the click event posts the page back to the server. The thumbnails are ASP.NET ImageButtons, which means they're <input> tags.
Is there a way to get the postback to delay just long enough for the image to fade out? I've seen some tricks with the form onSubmit and setTimeout() but that would affect all the links and buttons on the page. I want to delay postback for the thumbnails only.
TIA
EDIT: Based on my research, and trying the suggestions below, it may be possible to delay the postback to accomplish this but it's not the best approach on several levels. To get a clean fade transition between images, in the future I would not do any posting back at all. I would use jQuery exclusively for the fadeout, load, fadein.
Try adding a return false to your function that handles the fadein/out... It should prevent the page postback from occurring...
$('#<%= this.aspbutton.ClientId%>').click(function(){
$('#myDiv').fadeout("slow");
return false;
});
I'm not sure what you are getting on the PostBack where you would want to fade out an image and then fade one in. Have you considered using AJAX for that? You could even have the thumbnail image contain the necessary information within the image tags for the larger image.
Take a look at the jQuery Lightbox plugin. I have implemented this plugin and modified the .JS a bit to allow for viewing a higher resolution photo in addition to the web view. Check it out here.
$('#<%= this.aspbutton.ClientId%>').click(function(){
var $btn = $(this);
$('#myDiv').fadeout("slow", function() {
$btn.unbind('click').click();
});
return false;
});
Here's the solution I used:
Since I AM using MS AJAX with an UpdatePanel, I can use the client-side AJAX event handler.
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(fadeOut);
function fadeOut() {
if ($('.mainImage').length > 0) {
$('.mainImage').fadeOut('normal');
}
}
This gives me the exact behavior I wanted- any time the user navigates between thumbnails, the image fades out, loads, then the new one fades in.
HOWEVER...
This is still not ideal, as there is a pause between fades while the page posts back. It will work for now but in the long run it would be better to use jQuery to set the preview image rather than the thumbnails posting back as ImageButtons.