Skip to content

Instantly share code, notes, and snippets.

@fchasen
Created October 27, 2010 07:10
Show Gist options
  • Save fchasen/648593 to your computer and use it in GitHub Desktop.
Save fchasen/648593 to your computer and use it in GitHub Desktop.
Proposal for $ Fragments

#Proposal for $ Fragments

##Example:

If we have:

<a name = "jump1">Jump To Me</a>

According to the W3 spec:

"Having defined the anchor, we may link to it from the same or another document. URIs that designate anchors contain a "#" character followed by the anchor name"

So we can jump to it by clicking on another link in the document

<a href= "#jump1">Jump to One</a>

Lastly we can get back to the fragment by going to the url:

http://mysite.com/index.html#jump1

And navigating the history will cause us to jump from anchor to anchor.

I propose loading in Fragments for external page in a similar syntax, however I would use $ rather than # and would have the uri of the page to load contained as a uri attribute.

so we define the anchor as

<a name = "jump1" uri = "hello.html" >Jump To Me</a>

and the link as

<a href= "$jump1">Jump to One</a>

Like a fragment, we can use a url to get to the loaded content

http://mysite.com/index.html$jump1

Why?

Many websites from simple portfolios to complex Web application need to dynamically load in information in a non linear order. Currently this is accomplished through ajax calls.

For instance this jquery code would behave similarly

$('#jump').click(function() {
  $('#jump1').load('hello.html');
});

I often find myself repurposing the normal behavior of the # fragment to make it act similar to the above. I gain the ability to have a relevant url to get to that content (aka "http://mysite.com/index.html#jump1") will load in the content. I can also use the back and forward history to navigate as if the site was linear.

Example of Behavior using Javascript

http://fchasen.com/loadtest/

@jonobr1
Copy link

jonobr1 commented Oct 28, 2010

whoa, nice example man.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment