Please advice js/jquery library/plugin for making page/part page rewind (horizontal scroll)
of content/full page like in github.
Or advice how I can realise it by myself
They have explained how to achieve it.Please take a look
In summary, you need a HTML5 History API, CSS3 transitions and some server side setup. To support it in cross browser, you may need to use some polyfill plugin to achive it.
History.js
For CSS3 transitions in IE, there are no promised polyfill.
You may like a library pajax from github which combine the ajax request and history api.
Related
Typically, if it were a regular page-by-page website, I would install the analytics javascript before the body tag.
But, with a site where content is on overlays, how can analytics be installed to track views? (i.e. a one page portfolio site)
Thanks for any insight!
See Tracking Google Analytics Page Views with Angular.js. Even though I'm not sure if you are using something like Angular or just straight javascript, you could use a similar technique described there with hash urls that are set when a user clicks on a different part of the page, that way you could track how a user interacts with your single page site by making different urls for their interactions.
For more information see Pushing Functions onto the Queue.
In javascript that calls the overlay, you can add:
_gaq.push(['_trackPageview', '/url/of/page']);
or:
ga('send','pageview','/url/of/page');
I am currently writing a compatibility layer between browsers and for this I need to ask the user to confirm an action. Currently the only standard way in JavaScript to do this is window.confirm which is synchronous and I do not want to block the whole site. So I would be searching for a library which can display a asynchronous browser-like request (e.g. the ones they use for Geolocation).
EDIT: And similar to the native one I do not need/want the user interaction to be modal. Just displaying and reacting on user input that is all.
I remember having seen such sites, but cannot remember where.
Can someone point me in the right direction?
As a bonus it would be great if it would work an look like the native ones in IE, FF and Opera.
the jQueryUI library has a dialog plugin that can be made modal. Since it is JS, it does not block the rest of the page execution.
I need for users to upload files (mostly images) without leaving the current webpage. What's the best tool, library or mechanism for doing this? I'm using the latest jQuery and Spring webmvc (with JSP), so if there's already a mechanism within them then that's ideal.
It would also be really great to have some kind of progress bar. Does that mean it requires coordination with the server to read the progress (where Spring would have to come into play)? Or is there a mechanism within JavaScript for this?
You should check out Plupload.
Plupload offers a cross-browser
JavaScript File uploading API that
handles multiple file uploads,
client-side progress meters, type
filtering and even client-side image
resizing and drag-and-drop from the
desktop. It achieves all of this by
providing backends for Flash,
Silverlight, Google Gears, HTML5 and
Browserplus and picking the most
capable available option.
Its really neat! Here's a link to some of their Demos...
http://www.plupload.com/example_jquery_ui.php
... and a screenshot of the jQuery UI queue widget (it has a progress bar!):
I hope this helps.
Hristo
I use uploadify pretty regularly: http://www.uploadify.com/
However it does use flash for the upload mechanism and as a result may create some issues if the user is authenticated.
You should use AJAX on the client side
http://www.webtoolkit.info/ajax-file-upload.html This tutorial covers all client side.
Om the server side
This tutorlal covers most of this issue:
http://www.ioncannon.net/programming/975/spring-3-file-upload-example/
Yopu can use jquery as well or any other JS framework.
But the mist important thing is the fact You need to remember that your tag on client side should have.
enctype='multipart/form-data'
property. it means that your request contains muultipart data.
Uploadify does that trick > http://www.uploadify.com/
All samples are php but you should be able to convert it to your platform.
How does Facebook Ajax work? 2-3 months ago they were using # but now the whole addressbar is changing.
The first approach used is called "Ajax Crawling" (also refer to this answer).
But I think the new approach you are talking about is just the HTML5 History API. Github is using this approach for their tree browsing, and you can learn more about it here. (I recommend ALL readers to read and watch the video as it's very informative)
EDIT:
Just to point out that Facebook is definitely using the HTML5 History API (direct link from the previous github article).
They still use # as far as I can tell (but maybe we are on different versions?). For me, their links are for different pages, but they intercept my onclick and change the click to an Ajax request instead. Maybe this is to make cleaner URLs when copying and/or make it work without JS?
Facebook is doing Ajax History (Back and Forward button) and Bookmark using #! instead of just # in the URL. Is it always a good idea to do that, because I was thinking that a usual anchor could interfere with the Ajax History mechanism to trigger it into processing a normal anchor.
So, the Ajax History function will only process a hash portion only when it sees #! instead of just #.
And is using ! compatible with major browsers? If Facebook is using !, a guess is that it may be fairly well supported.
See Google's Making AJAX Applications Crawlable
for a possible use case (don't know if this is why Facebook used this fragment).
Update: This answer has been superseeded by this article. It discusses the issues with the Hashbang (#!), Hashes (#) and the HTML5 History API (pushState, popState) and the solutions.
In regards to usability on your website, it doesn't matter and you can use anything you like.
In regards to search engine optimization, having it and not having it both provide different avenues to go down.
For instance, Facebook uses the ! according to the Google Proposal for Making Ajax Applications Crawlable. Adding the ! will tell google that it should listen in on that ajax request and add that url to search engine results. This is great for websites which have already implemented ajax, as all you need to do is add the !.
The downside of this is that it only solves the problem of making your ajax crawlable. It does not solve the problems of:
Keeping the URLs clean and consistent for Ajax and Non-Ajax users. Eg. you could end up with www.facebook.com/profile.php?pid=123#!profile.php?pid=123
Keeping the website accessible by Non-Ajax users.
Keeping the URLs the same for both Ajax and Non-Ajax users.
Requires some severely complicated server side changes for escaping and translation of states in regards to query strings.
It is not compatible with the new HTML5 PopState functionality which is designed to truly solve these problems.
For websites which don't currently use ajax for everything, due to the problems above it is far better NOT using the Google Proposal as it is only workaround for sites like facebook which went ajax crazy and needed a desperate solution to SEO. There are alternatives which solve more of these problems (and with the HTML5 PopState now available can solve all the problems). One such alternative is jQuery Ajaxy (as seen on balupton.com) which works by simply upgrading your website into a ajax application, while keeping the experience for a Ajax-Enabled rich and interactive and continuing to work perfectly for Ajax-Disabled users.