Before I launch my site, I want to get my URL structure set in stone. A large number of my pages have tabs on them, and it's a much better user experience if when changing a tab, I use ajax to get the relevant changes and just update that, rather than updating the whole page.
Should I use the popular method of just updating the hash of the url for ajax tab changes, or should I just use the HTML 5 history API, and let anyone with browsers that don't support it reload the full page? I've heard people say that websites that use hashes and hashbangs are "breaking the web". Using hashes my urls would look like this: example.com/#popular, and using HTML 5 history my urls would look like this: example.com/?tab=popular.
If you want to serve a different page depending on which tab is selected, then use the HTML 5 history approach. Otherwise just update the hash.
As far as I know, and from my experience it's really six of one and half dozen of another. It's really what you prefer since the end result is the same.
Related
Okay I do not know how to explain this to you, It may be just my internet, or maybe my site is slower, or they really have a technique for doing this.
If you visit Facebook, Reddit, Youtube, Twitter, and if you click on links or any actions on those websites, the url changes but the browser tab doesn't show any loading circle.
How do they do that?
I am pretty sure my website is fast enought and at times it loads even faster than the bigger sites, but mine shows the loading circle on the browser tab.
Okay so I found the answer. Here is the technique for changing the url without reloading the page.
Updating address bar with new URL without hash or reloading the page
How do I modify the URL without reloading the page?
I am still trying to figure out though how to redirect the actual page without reloading the entire page. I am guessing they are loading it via ajax or something similar upon url change. I'll update this once I figure it out.
Edit: I am currently working on this feature for my site. The technique is to use ajax to load the content based on the url. I'll update this thread more as I update my site with this feature.
Edit 2: Damn, you will probably face the same problem I had trying to detect the url change without using onhashchange. If so, here you go:
How to detect URL change in JavaScript
This literally took me 4 hours just to figure that one out.....
Edit 3: I have now integrated this feature on my site. You can check it at
Grandweb
It is quite simple, but lots of work in appending the content once retrieved via ajax. So here is the process:
I am using pushState(); to change the url without reloading the page.
var url = $(this).attr('href');
var split_url = url.split('/');
var new_url = url.replace('https://grandweb.net/','');
window.history.pushState("object or string", "Title", "/write");
Using 'mouseup' was a bad idea, I changed my mind.
I then have to trigger the first function using 'mouseup' to retreieve the content via ajax, and then listen to succeeding onpopstate() for the next ones, because some mouse actions such as Mouse 4 or Mouse 5 are bound to the browser's Back and Forward button, and does not trigger via 'mouseup'.
$(window).on('mouseup', function(evt) {
get_content();
}
window.onpopstate = function(event) {
get_content();
}
The first one is responsible for triggering the function on first try because onpopstate only listens only when the browser's history API is populated.
Using mouseup was a bad idea, basically, don't use it unless you really want to detect mouse action from anywhere on the document.
I instead use the anchor tags/links to trigger the first function for retrieveng content.
example:
<a class="dynamic_btn" href="website.com/post">Home</a>
then
$(document).on('click','.dynamic_btn',function(e){
e.preventDefault();
get_content();
});
Using onhashchange is possible IF you have hashes on your url. I do not use hashes on my url so basically onhashchange is useless in my use case, unless I do not know something.
After retrieving the contents, I append them via creating DOM elements to existing containers from the page.
This is much easier to do if you are planning to change few elements or containers in your pages. If you plan on doing this to change a full page layout, goodluck. It's doable, but it's a really pain in tha *ss.
Upon observing Facebook, I learned that they do not implement this technique in all of their links/features. It makes sense because this is harder to maintain most especially because most of the work here is being done client side. It is very nice though because the page doesn't load.
I have implemented it on a few 'essential' functions of my website such as the viewing of posts and returning to the homepage. I can implement it on the whole site, but I am still deciding on that. That is all, thank you very much for reading internet stranger.
I have a joomla site and would like to integrate some old unfinished webcomics to it, so I can pick them up where I stopped in a CMS that won't leave me in an absolute frothing rage (thanks, wordpress).
I've got some experience with Joomla and I believe it would be a pretty good platform for managing multiple comics... except for the small issue of horrid navigation between pages/articles. Joomla's integrated article navigation is a humble but passable start, but if you intend to use categories to organize chapters then getting from the end of one to the beginning of the next is... yeah. This is a pity, as Joomla's category and article management options are beautiful for archiving and presentation, and adding gantry 5 to it means a great deal of control over the reading experience. Basically, joomla has pretty much everything I want, except for the navigation.
Ideally, what I'd like to be able to accomplish for comic navigation in joomla is:
Clickable full-article-image leading to next article/page
Prev/next article buttons (already available)
Prev/next category buttons (do we have those?)
The latter two in a module I can choose where to publish (optional)
And this is it, basically. I understand that implementing the first could be very hard without some major template customization, in which case I'd be willing to insert the image as a link in the article body... but only if there was one single code I could use, like the one that generates the next category article button. Because I'm not willing to create hundreds of menu items to generate links page-by-page.
So is any of this doable?
This is a quick answer but too much for a comment. I'm assuming since you are on SO that you don't mind coding (as opposed to just configuring).
I think you need to do two things. First you need to create a pagination.php for your template. This will let you really super control what the pagination looks like. You can have images, special css and js, whatever you want. You can also add the "last" and "first" options.
I think you need to make a new plugin to replace the core pagenavigation plugin and that also generates the previous/next category links. (Or I guess you could make one just to do categorynavigation depending on what you want.) HOWEVER, it seems to me that there is data on the sibling links that is already being generated in the content category model so you might be able to use that. (Check the code; I think there was never a UI for it, but it is there. Even if it isn't there, siblings are very easy to obtain in nested sets)
The other thing you can really think about if you go that route is changing the whole thing somewhat to use a module that gets the current ID and category ID from JInput. You might also be able to use JPagination. The important thing, however is that you make sure to do the caching the way the pagination that is there does it. In other words you really want to cache the whole list in the order you want so you are not running so many queries and slowing your site down. You may want to look at the categories and category modules to get some ideas about the queries to do.
Hope that gets you started, but it is definitely something you can do without too much trouble.
Twofold question.
Using a web template that utilizes AJAX for loading new pages, rather than traditional point-the-browser-to-the-url style, how would one go about adding new script or style tags to the page head as necessary?
I think using jQuery $('head').append(script); works just fine, but (and here's the second half), if I wanted to group all of the scripts that were page-dependent away from those that are universal across the site - how would I do that?
Using a div sounds so enticing since I could print it at the initial page render and just call
$('head div.external').append(script), but still probably a bad idea inside the head.
Is there any other element or method I could use to group these? The goal being to easily remove all of them when the user navigates away from the current page. A smaller consideration is that Google Analytic instructs you to place it at the end of the head tag (I'll be honest, I don't know why being the last script matters), and I don't want my scripts to interfere. Do these even need to be in the head, could I place a div at the end of the body and use that?
Surely the easiest way to do this, if it is necessary, is with classes:
$(script).addClass('external').appendTo('head');
then later:
$('script.external').remove();
I'm honestly not sure what this would achieve, however.
I'll admit that I'm pretty new web development (only been coding for about a year) and especially green when it comes to JS / jQuery.
A specific web page I've built loads different data based on hovering over certain categories: country clubs, resorts, hotels, etc. When I built the site on my local machine, the javascript function was super quick. However, on the live site, it has a long delay before the data swap happens.
The URL is: http://preferredparkingsolutions.com/client_list.html
Which links to a javascript function at: http://preferredparkingsolutions.com/scripts/clientHover.js
Which replaces the display div (#client_list) by pulling data from a text file.
Is there a better / faster way of doing this?
Yes, this could be optimised by loading the content in up-front and caching it. Currently you are doing a HTTP request each for each and every hover - even if the user has hovered over that element before, since the AJAX responses aren't being cached. Doing this would be your quickest win.
However, I can't see any case at all for having the content live externally. Is there any reason you're against having the content physically in the page and just using show/hide methods? There's various benefits to this - SEO, for one thing, since Google will find the content.
this is the external page you are loading http://preferredparkingsolutions.com/client_list.inc.html and the content looks little and looks like its a static page then why not just load every thing upfront and then just hide and show div's ? as Utkanos suggested you will aslo have a SEO benifit and also its HTTP request each for each and every hover. if you still want to load it externally lost load it once and cache it and use the cached version to hide and show divs.
Not sure if what I want to do is possible, but what I am hoping to do is somehow gather certain pieces of text from a website, remove the header, footer, background, all formatting, and place it into my application in a scrollview or something similar...
I'll give you an example... Imagine I was making wikipedia's iPhone app, I want to download the information about the wiki on dogs, without the header, side bars etc, just the text. How would I go about doing this?
I understand that for this I have not provided any example code or what I've tried or started, but that's just because in this case I'm lost! That doesn't mean I want full chunks of code either. Any help will do. If this doesn't work, I will just have to make a 'mobile optimised' version of the webpages I want to include in my app.
Thanks
(Edit: the term I was trying to use was 'strip the web page of its HTML coding')
You may be going about this the wrong way, or perhaps even asking the wrong question.
Does the target website have an API or datafeed of some kind?
Can you get the information you need in JSON or XML format directly from the site?
I think you've misunderstood the technology. HTML is merely the framwork on which the formatting and data is hung.
Parsing the HTML page seems like an awfully big headache, I doubt you'll ever be able to get it to work, because almost all sites these days are partially or wholly generated on the server side, the page is only the result.
Some sites hide the information in memory and others get it dynamically through ajax for example, which means that simply trying to get the data by parsing the HTML will get zero data.
Another issue you should be aware of though, is that simply copying the data from generated websites may open yourself up to copyright issues.
You have to parse the html code and search for the part that you want and "throw" away the part that you do not need. This is more or less like bruteforcing and the code of the website should not change otherwise you are screwed. So you have to write the parser by hand with this method. But maybe there is a atom or rss feed and you can parse this one. This will be much more easier and you are not depending on the website layout because the rss/atom feed is just about the data. For parsing rss you could try out NSXMLParser.
And then you have to make a valid html page out of the data and present it in the UIWebView