In the past, I used to rely on hash for inline navigation, for example:
http://url?Category=a&item=3#Paragrah1
(Pointing to Paragraph1 within the http://url?Category=a&item=3 page)
With the widespread use of ajax, the hash tag has switched to a different purpose, allowing page refresh without full page reload. For example:
http://url#!Category=a&item=3
http://url#!Category=a&item=4 (the page switches to item 4, no full page reload)
My question: how can I make inline navigation work in such pages? To take the above example, how can I point to Paragraph1 in the http://url#!Category=a&item=4 page?
Use the HTML5 history API instead. Then you can use the hash for scrolling again.
If you need to use the hash # for both webapp page navigation and also for moving to a specific element on a specific page, then you'll need to handle the scrolling yourself.
javascript provides: window.scroll(x, y).
In your example, when you handle the URL http://url#!Category=a&item=4, you'll need to do a window.scroll using coordinates that cause Paragraph1 to move to the right place on the page, i.e. the top. You'll need to adjust these coordinates anytime the page layout changes.
Related
I had seen a comments that Apache Superset was edited to allow user activation of top level navigation for links in a Markup slice (so clicking a link redirects the page instead of just the contents of the slice). Does anyone know how to enable this option?
You can use HTML coding in the mark-up.
It works
I have a site with about 10 pages. On each page its the same layout and just the image changes. Is it possible (EG with HTML or AJAX) to animate the image change when you navigate to a new page?
I want the appearance to be as close to a normal jQuery slider as possible:
http://jquery.malsup.com/cycle2/demo/prevnext.php
I haven't used the Cycle 2 plugin as I need each page to have a separate URL. The Cycle 2 plug in does have bookmark-able slides but they use fragment identifiers for each 'page' which social media sharing widgets sometimes ignore. So mysite.com/#page3 is shared as mysite.com, meaning the first not third slide is linked to.
The social media sharing widgets also use meta data from the page which doesn't change per slide as its still the same page.
You can use CSS3 page transitions, remain on one page and just manipulate the URL as you need to. See for example: Change the URL in the browser without loading the new page using JavaScript
Here's a good answer to your question using HTML5 Transitions:
HTML 5 page transitions
Hope this helps!
So I have a website that has just two pages. On the home page, there are some things going on, but are not important. There are some links, however, that will need to link to a specific piece of content on the second page.
On the second page, I have content on there and it's all encased in the jcycle plugin.
What I need to do is if someone is on the homepage and they click on a link, it needs to load up the second page and show the correct "slide" that corresponds to what the homepage link is.
If you need any more clarification, please let me know.
In the cycle options reference, I see that there is a startingSlide option. You could set that dynamically. You could either do it with server-side code, e.g. /foo?slide=3 or you could check which anchor reference was used on the incoming link, e.g. /foo#slide3. Or, you could use DHTML to build the slideshow on the homepage when they click the given link.
Also note that there is a slideExpr option that you could use to filter the slides to a smaller set, depending on what they selected.
My designer thought it was a good idea to create a transition between different pages. Essentially only the content part will reload (header and footer stay intact), and only the content div should have a transitional effect (fade or some sort). To create this sort of effect isn't really the problem, to make google (analytics) happy is...
Solutions I didn't like and why;
Load only the content div with ajax: google won't see any content, meaning the site will never be found, or only the parts which are retrieved by ajax, which arent't full pages at all
show the transitional effect, then after that 'redirect' the user to the designated page (capture the click event of a elements): effect is pretty much the same as just linking to another page, eg. user will still see a page being reloaded
I thought of one possible solution:
When a visitor clicks a link, capture the event, load the target with ajax, show the transitional effect in the meantime, then just rewrite the entire document with the content fetched with the ajax request.
At least this will work and has some advantages; the page reload will look seamless, no matter how slow your internet connection is, google won't really mind because the ajax content is a full html page itself, and can be crawled as is, even non-javascript browsers (mobile phones et al.) won't mind, they just reload the page.
My hesitation to implement this method is that i would reload an entire page using ajax. I'm wondering if this is what ajax is meant to do, if it would slow things down. Most of all, is there a better solution, eg. my first 'bad' solution but slightly different so google would like it (analytics too)?
Thanks for your thoughts on this!
Short answer: I would not recommend loading an entire page in this manner.
Long answer: Not recommended. whilst possible, this is not really the intent of XHR/Ajax. Essentially what you're doing is replicating the native behaviour of the browser. Some of the problems you'll encounter:
Support for the Back/Forward
button. You'll need a URI # scheme
to solve.
The Browser must parse
the entire page through AJAX.
This'll slow things down. E.g. if
you load a block of HTML into the
browser, then replace the DOM with
it, only then will any scripts, CSS
or images contained therein begin
downloading.
Memory - the
browser's not changing pages. Over
time (depending on the browser), I'd
expect the memory usage to increase.
Accessibility. Screen readers
will need to be notified whenever
the page content is updated. Might
not be a concern for you but worth
mentioning.
Caching. Browser
would not know which page to cache
(beyond the initial load).
Separation of concerns - your View
is essentially broken into
server-side pieces to render the
page's content along with the static
HTML for the page framework and
lastly the JS to combined the server
piece with the browser piece.
This'll make maintenance over time
problematic and complex.
Integration with other components -
you're already seeing problems with
Google Analytics. You may encounter
issues with other components related
to the timing of when the DOM is
constructed.
Whether it's worth it for the page transition effect is your call but I hope I've answered your question.
you can have AJAX and SEO: Google's proposal .
i think you can learn something from Gmail's design.
This may be a bit strange, but I have an idea for this.
Prepare your pages to load with an 'ifarme' GET parameter.
When there is 'iframe' load it with some javascript to trigger the parent show_iframe_content()
When there is no 'iframe' just load the page, with a hidden iframe element called 'preloader'
Your goal is to make sure every of your links are opened in the 'preloader' with an additional 'iframe' get parameter, and when the loading of the iframe finishes, and it calls the show_iframe_content() you copy the content to your parent page.
Like this: Link clicked -> transition to loading phase -> iframe loaded -> show_iframe_content() called -> iframe content copied back to parent -> transition back to normal phase
The whole thing is good since, if a crawler visit ary of your pages, it will do it without the 'iframe' get parameter, so it can go through all your pages like normal, but when you use it in a browser, you make your links do the magic above.
This is just a sketch of it, but I'm sure it can be made right.
EDIT: Actually you can do it with simple ajax, without iframe, the thing is you have to modify the page after it has been loaded in the browser, to load the linked content with ajax. Also crawlers should see the links.
Example script:
$.fn.initLinks = function() {
$("a",this).click(function() {
var url = $(this).attr("href");
// transition to loading phase ...
// Ajax post parameter tells the site lo load only the content without header/footer
$.post(href,"ajax=1",function(data) {
$("#content").html(data).initLinks();
// transition to normal phase ...
});
return false;
});
};
$(function() {
$("body").initLinks();
});
Google analytics can track javascript events as if they are pageviews- check here for implementation:
http://www.google.com/support/googleanalytics/bin/answer.py?hl=en-GB&answer=55521
I'll explain:
I have a picture gallery, the first page is display.php.
Users can flip through pictures using arrows, when you click an arrow it sends an Ajax request to retrieve the next picture from the db. Now I want the URL to change according to the picture displayed.
So if the first picture is:
www.mydomain.com/display.php?picture=Paris at night
I'll flip to the next one and the URL would be
www.mydomain.com/display.php?picture=The Big Ben
How do I do this?
The trick here are uri's with an anchor fragment.
The part before '#' points to a resource on the internet, and after normally designates to a anchor on the page.
The browser does not refresh if the resource is the same but moves to the anchors position when present.
This way you can keep the convenience of browser history from a usability point of view while replacing certain parts on the page with ajax for a fast and responsive user interface.
Using a plugin like jQuery history (as suggested by others) is really easy: you decorate certain elements with a rel attribute by which the plugin takes care of the rest.
Also kinda related to this topic is something called 'hijax', and it's something I really like.
This means generating html just like you would in the old days before ajax. Then you hijack certain behavior like links and request the content with ajax, only replacing the necessary parts. This in combination with the above technique allows really SEO friendly and accessible webpages.
You can use the jQuery history plugin for example.
changing the search of the url will load the changed url.
See also: stackoverflow, javascript changing the get parameter without redirecting
Do you really want to use AJAX here?
A traditional web request would work like this...
User navigates to display.php
User clicks "next" and location is updated to "display.php?picture=Big-Ben"
Big Ben is shown to user, along with a link to "display.php?picture=Parliment"
User clicks "next" and location is updated to "display.php?picture=Parliment"
And so on.
With AJAX, you essentially replace the GET with a "behind the scenes" GET, that just replaces a portion of your page. You would do this to make things faster... for example...
User navigates to display.php
User clicks "next" and the next image location is obtained using an AJAX request
The image (and image description) is changed to the next image
What you are suggesting is that you retrieve the "next url" using AJAX and then also perform a GET on the whole page. You would be much better off sending the "next" image when you send each page and not using AJAX at all.
this best describes everything i think: http://ajaxpatterns.org/Unique_URLs