I am dealing with an application which is using a lot of graphics (the library Raphael and graphdracula). Basically, the application is drawing different graphs. Let's say that we have 3 pages which are drawing graphs:
graph1
graph2
graph3
Let's say we have the following URL:
www.someurl.com/graph1
Now, this URL is going to load the page and the drawing algorithm for graph1. The way my application works now is: if I want to change the layout (say, to graph2), I will have to reload a whole page:
www.someurl.com/graph2
What I want to do is: to make this as a Single Page Application (SPA). When we load the application, I want all the graphs to be loaded, but only one to be visible (I guess this is the way to do it). When I click a button, just to load the stuff I need, not the whole page. Something like, when we open the application's page about graphs, to be:
www.someurl.com/graph#1 -> for the first graph
www.someurl.com/graph#2 -> for the second graph
www.someurl.com/graph#3 -> for the third graph
I want to this asynchronous. I tried to find something for Flask, but without sucess. Can someone please point me into the right direction how should I do this?
Thanks in advance!
If that's not critical for you to support IE<10 - instead of old-style #hash-navigation, you can use jquery-pjax plugin to load page part by AJAX: https://github.com/defunkt/jquery-pjax
On Flask side - you will have to differ AJAX-requests by their headers or by some additional param like &ajax=1.
See also this question with comparison to history.js : jQuery-pjax vs history.js to load specific content when clicked
Related
I am working on a project that uses the jQuery Masonry and Infinite Scroll plugins to load "n" amount of pictures from instagram using their API. Looking at this short example my understanding is that I need to have before hand the html pages to be rendered:
<nav id="page-nav">
</nav>
The problem is, I dont really know how many pictures will be retrieved. Here is for example how I retrieve 20 pics at a time.
$(document).ready(function(){
var access_token = location.hash.split('=')[1];
if (location.hash) {
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: "https://api.instagram.com/v1/users/MY_USER_ID/media/recent/?access_token=MY_ACCESS_TOKEN",
success: function(data) {
for (var i = 0; i < 20; i++) {
$("#instafeed").append("<div class='instaframe'><a target='_blank' href='" + data.data[i].link +"'><img src='" + data.data[i].images.standard_resolution.url +"' /></a></div>");
}
}
});
} else {
location.href="https://instagram.com/oauth/authorize/?display=touch&client_id=MY_CLIENT_ID&redirect_uri=MY_URI";
}
});
I guess I will need a pagination mechanism but based on the tutorial mentioned above I believe I will first need to pre-define the html pages to be loaded. So now here my questions
Does that mean this plugin (Infinite Scroll) requires to have "n" amount of html files in a directory to achieve infinite scrolling?
Is it possible to implement infinite scrolling with the same plugin if I dont know how many pages I will have. Even better without even having to create physical html files?
How can this kind of pagination is implemented? (i.e loading chunks of 20 pics as long as the user keeps scrolling down) there is not that much documentation online, could you provide a short step through demo or description?
With kind regards
1) Does that mean this plugin (Infinite Scroll) requires to have "n" amount of html files
Absolutely not. You do not need to generate static html pages beforehand, The only think you need is a URL scheme where subsequent page content can be fetched by changing one number in URL.
Think of it from the perspective of the infinite scroll plugin. You load the plugin JavaScript in your page #1 and provide link to page#2 inside page #1. Now when the user scrolls past page#1, the only variable that the plugin has is the current page number, like, 2, or 3 or 4 (N)
The plugin needs to create the URL to fetch content from when user is scrolling. So how does the plugin do that? The plugin looks at the next URL structure provided in page#1, parses it and creates a "base path" to which it will keep adding current_page_number to fetch subsequent content. That is the role of NAV selector.
So let's say I have something like /home/page/2 as next URL in page#1. The plugin will parse this into an array as
[/home/page/,2]
and think that base_path = "/home/page/"
when the plugin attempts to fetch page_number 3, it will just append 3 to the base path, like base_path.join(current_page_num) making it /home/page/3
On server side I can just have a controller that takes care of all the /home/page/1 to /home/page/N links. You can just look inside the plugin, look for _determinePath and retrieve functions.
Now you can see the problem as well. The problem is that there can be an infinite variety of URL structure depending on how you are doing pagination inside your code and how many variables do you need. My way of doing pagination is different from your way of doing pagination. Same holds for frameworks. Drupal pagination scheme may be different from Djanga and wordpress etc.
The plugin cannot possibly cope with all these URL structures. Given a next URL, it cannot possible always deduce the "base path" to which it needs to add current_page_number. Again look at _determinePath() method of plugin to see what kind of URL it can cope with. It can parse simple URL structures, like page2.html or page=2 but you have to provide your own implementation if your URL structure is complicated or something that the plugin cannot handle. Look at pathParse() method as well.
2)Is it possible to implement infinite scrolling with the same plugin if I dont know how many pages I will have.
Again, there is no need to create HTML files. You have two options to signal end of content (without knowing how many pictures you have in advance)
When you have reached the "no content condition" you can return an HTTP 404.
Or you can return an empty string.
Does this answer the question?
How it can work with the plugin
First page - include - NAV SELECTOR - LOAD THNIGS THE USUAL WAY
First page on load - use instagram pagination and store "nextURL" in your javascript somewhere
On Scroll - override _determinePath to provide your own fetch URL using (2) - let plugin retrieve that URL
Override plugin content selector - so it returns new elements to callback
On Plugin fetch content - Use the callback inside plugin to update your page
Update on github repo
I have forked paul's github repo to add documentation for PHP server side integration. I believe that plugin's assumption that next URL is only dependent on current page number is too restrictive. We need to get nextURL from next page content.
Github Repo - https://github.com/rjha/infinite-scroll
Pull request on base repo - https://github.com/paulirish/infinite-scroll/pull/219
My javascript knowledge is very limited and maybe you can do a better job of extending the base plugin. However every drop helps make the ocean :)
Does that mean this plugin (Infinite Scroll) requires to have "n" amount of html files in a directory to achieve infinite scrolling?
Yes, that particular plugin seems to be designed to support only static pages, which otherwise would use a "Next page" link. The tutorial you found even states that it could not handle dynamically generated content with URL-parameters, though I don't really believe that.
Is it possible to implement infinite scrolling with the same plugin if I dont know how many pages I will have. Even better without even having to create physical html files?
By design of that plugin I'd say No. Of course, you should be able to use an (unknown) amount of dynamically generated pages with the pictures. This needs serverside code to be fed from the instagram api, which does not seem to be what you want.
How can this kind of pagination is implemented? (i.e loading chunks of 20 pics as long as the user keeps scrolling down) there is not that much documentation online, could you provide a short step through demo or description?
There are other infinite-scroll plugins. The demos 2 and 5 on that site you found implement a simple "native" (i.e., no plugin) infinite scroll, both loading the new content via ajax. The demos 3 and 4 use the endless-scroll plugin with a few more scrolling options, although the demos do not include ajax.
Now you are free to decide how you would like to implement your script. You seem to want to get all image urls from instagram at first, but append (and therefore load the image files) only chunkwise. If instagram supports a paged api, you might want to combine both load processes.
This can be done with code like in the demos 2 to 5 - when the scroll reaches the page end, trigger your requests to load the images. After that happened, call Masonry's appended method on the new the img elements (or instaframe divs, like in your example).
Hi, my question is, is it possible to set index.html#box02 as my homepage instead of index.html?
I am building a website with panning divs.
Exactly like http://demos.flesler.com/jquery/scrollTo/
Because of the panning effect, I design the whole site on a single html file - index.html. I guess it is not the best way, but I did not wish to break the animation effect. Or is there another better way?
So what i did was to create index.html and create many divs like:
example.com/index.html (Gallery)
example.com/index.html#box01 (About Us)
example.com/index.html#box02 (Homepage)
example.com/index.html#box03 (Contact Us)
I have tried to redirect using:
.htaccess (tried typing "DirectoryIndex index.html#box02" in .htaccess but fail to work)
tried redirecting using javascript in index.html:
<script type ="text/javascript">
function init(){
location.href = "index.html#box02";
}
</script>
<body onLoad="init()">
(but there is a lag time, as it loads index.html first, then it loads index.html#02)
Is it possible to load index.html#box02 straightaway instead of index.html?)
Would like to get help from more experienced web designers here?
Everything after the # is for the browser to handle (and not the server), so changes on the server will not really make a difference. Your javascript solution is a good way to go about it.
One other way you can address this is to make the contents of example.com/index.html#box02 available at index.html itself, by perhaps rendering it on load.
Nevertheless, the lag time you mention for the javascript solution is going to be present either way, as long as javascript is rendering the panning effect (which I believe is the case). I don't think your javascript solution will add significant lag here
I'm trying to build a single-page app that has several views (screens, page contents)
My App's UI has a permanent menu bar and a "view area" which retrieves a view via Ajax, based on menu selections. This works great for simple HTML content and keeps my menu-script running on the background despite which view is being displayed.
But what if my view needs an additional script? How do you load and execute a script as a result of a view change (=a page fragment was loaded as a result of a button click) also, how do I get rid of that script when I choose a different view?
I know I can embed a script-tag into the page fragment and write the code there, but I'm really looking for a more robust way of doing this, preferably so that an instance of an object is created when the view is loaded and then discarded when the view changes.
yepnope.js is a great conditional loader. You could use it to check certain conditions (e.g. view, state) before loading a script. I don't think it has the ability to remove a script that's already been loaded, though.
You can use javascript to add a <script> tag in the same way you would any other tag.
The hardest part is knowing where to place it, but if you have control over your markup, this isn't too big a barrier.
Something along these lines:
function DST(url)
{
var s = document.createElement(’script’);
s.type=’text/javascript’;
s.src= url;
document.getElementsByTagName(’head’)[0].appendChild(s);
}
If you need something to happen automatically when you load that script, you should be able to use a self executing anonymous function to do the job.
(function(){alert('this happened automatically');})();
If you need to pass anything in to the function it would look like this:
(function($){alert('this happened automatically');})(jQuery);
If you really need to discard the scripts, you can delete the nodes, but it might be better to leave them in, in case a user reactivates a view, so you don't have to make the AJAX call and associated HTTP request, allowing the page to load faster.
i created a video photo library / video library, there i have many rows where i places the icons against video or Image, & because of the length of the page i used the jquery pagination technique, Now i have 2 problems (1) SEO Problem, if anyone search any data that i have on the other than the 1st page, it shows in search engine & when user click on that link it land on the 1st page, not on the relevant page, (2) when user click on the next page, the view will stile on the pagination i want it goes on the top of the page or top of the table,
Link of that page "http://funswith.com/Multimedia/Video/Indian-Songs.html#pg=1"
any one can help me in this situation?
Thanks In Advance.
Have a read of Making Ajax Applications Crawlable as written by google.
In brief: Instead of www.example.com/ajax.html#key=value use www.example.com/ajax.html#!key=value as your scheme.
Then respond appropriately to requests in this format: www.example.com/ajax.html?_escaped_fragment_=key=value
To solve your scrolling issue, you'll want to add just one line of code to pager.showPage(). To scroll to the top of the table, add this line:
document.getElementById(tableName).scrollIntoView();
Or, to scroll to the top of the page, add this line:
scrollTo(0, 0);
For the SEO work, follow wombleton's advice.
See that your url container fragement #pg=1 by default when you point to such link it will move your view there. As an workaround you can write window.scroll(0,0); on your page to always be on top. For your SEO problem it seems like a usability problem which has to be resolved using some design changes. Also doesnot your search results give the url as
http://funswith.com/Multimedia/Video/Indian-Songs.html#pg=4
http://funswith.com/Multimedia/Video/Indian-Songs.html#pg=3
i mean the page numbers.
I'm in the process of writing a website that includes a reasonably large gallery. First page of the gallery the user will be displayed a bunch of thumbnail images with a url of: website.com/gallery.php
When they click a thumbnail image, if javaScript is turned off it will follow the url in the href and go to a page called gallery.php?img=67. If javaScript is turned on the href click will not execute, instead it will perform an ajax request to display the larger image and some text about it. The url changes to gallery.php#!img=67. The back button will take you back to the thumbnails, pressing f5 will keep the big image displayed with the text. If someone copies the address with the #! and sends it to someone they will get the same image displayed (assuming the receiver has javaScript turned on).
My question is, have I sorted this out correctly for google to index the individual gallery pages? Will google index them twice, once with the ?img=67 and once with the #! and if so is that a bad thing? I'm using javaScript/Ajax to preload the larger images once the thumbnail page is loaded for speed. I've read a lot of backlash against using hasbang ajaxy things recently and wondering if you think can justify using it here?
Google will follow your links and index the ?img=67 pages, and will not index your #! pages, because it can't see those links. You can tell Google about those links by doing the following:
Add <meta name="fragment" content="!"> to the <head> of your document, and
Handle requests for /?_escaped_fragment_= by returning an "HTML Snapshot" of your page that has all your #! links in the <A> tags.
Also, to make the most of this feature, you should also handle requests for /?_escaped_fragment_=img=67 by returning an HTML snapshot page with the big image displayed. Remember, GoogleBot doesn't execute Javascript. Using the #! URL tells Google to retrieve an alternate version of the page (A version where #! has been replaced with ?_escaped_fragment_=) that should render without Javascript.
THe use of #! tags in URLs are in the news recently, with updates to a well known blog.
http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs has a good description of what they are best used for - and when they can be bad. I think your use in a gallery is quite valid.
In short, a URL like http://lifehacker.com/#!5753509/hello-world... is rewritten by Google, and other compatible web-spiders as http://lifehacker.com/?_escaped_fragment_=5753509/hello-world...
Google may index them twice, but you can also use the canonical meta-tag to ensure it knows what the 'official' copy is.
Possible solution (as suggested in http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs) is to use regular links and translate them to #! in the OnClick() event. This ensures that the site displays regular links and not the shitty #!.
It does mean extra work for the server though, since the server needs to support both versions (the Ajax version and the regular version), but I think it worth it.These #! are so ugly..