PDA

View Full Version : Using ' # ' in url.



james d
11-05-2010, 09:36 PM
I'm a bit new to java script so I don't know if this is really easy - it probably is but anyway.. I really like this site http://www.segd.org I've had a look at the code and I can follow it more or less but want to understand how it works not just copy and paste. What I can't get my head round is how they are using ' # ' it appears in the urls and I can't figure out the structure. anybody know a tutorial or something on this

Nile
11-05-2010, 09:49 PM
In some cases, if you were to have a div with the name "blah," then a link to your page like this: http://page.com/index.html#blah. That would tell the browser to, once the page is loaded, scroll down to the element with the name of blah. If you just put in the # without anything, it scrolls to the top of the page. It doesn't actually do anything.

james d
11-05-2010, 10:12 PM
Imagine; I'm on this page:- ' www.segd.org/#/conference/index.html '

I click a link and go here:- ' /www.segd.org/#/about-us/index.html '

where have I gone? Is it a new page or is it the same page but has the content been changed using java or something. If it is a new page is it in a different file?
I suppose it is simple but I just don't see what the structure is!

I had a look at their code and they mention a 'hash redirector' what is that all about or is it nothing to do with this question.

Nile
11-05-2010, 10:15 PM
It's both. Go here: http://www.segd.org/about-us/index.html
See, the page is the exact same without the #. But the javaSCRIPT - YOU MUST SAY JAVASCRIPT (I am hypnotizing you), say it... not say it again. Remember it. xD - helps the transition.

djr33
11-05-2010, 10:21 PM
The hash symbol (#) splits two very different parts of the URL (or URI): the actual "address" and what is called a "fragment" (after the #).

The fragment is, at least in some browsers, not even sent to the server. This means that it is completely irrelevant to the data that is requested/sent when you load a page. So you are definitely viewing the same page, and a client side language (most likely Javascript) is using that as a value for something.

As Nile said, it can work with anchors to jump to sections but it can also be read by Javascript to do things to the page. You can think of the 'fragment' as a variable for Javascript (at least in some cases) so that it works as an indirect way of controlling the page.

The page you are talking about uses Ajax to dynamically load content into the page without actually refreshing the whole page. Thus, Javascript is creating a new request and asking the server for content. Because Javascript can read the fragment, it takes this value then asks the server for that content.

In other words, yes and no. Your browser isn't loading a new page, but Javascript is.

This is entirely based in Javascript, though it's fairly advanced.


The reason for this is that if you don't have some way in the URL of tracking the new "pages", you can't bookmark anything. So since the # doesn't make the page reload (as a real request would), Javascript can use this while the page [as a whole] is static [and parts are dynamically reloaded internally]. But then because the # changes, it still works to bookmark the specific 'page'.


But remember that since Javascript is responsible for all of this, the site won't work at all if you don't have Javascript enabled, or they'll need a very different strategy for an alternate version of the site that doesn't rely on JS.

Nile
11-05-2010, 10:26 PM
Thanks for saving me there djr - haha

james d
11-05-2010, 10:37 PM
So what you are saying is that the '#' doesn't do anything in this case or it indicates that what follows it in the url is a div?

How would you interpret this url
'http://www.segd.org/learning/index.html#/news/index.html ' Why does it have
'.html' twice I've never seen this before.

In your opinion is the segd page well constructed or is there an easier way to do what they have done. The javaScript seems quite complex or at least long it runs to about 2000 lines and as far as I can tell the real problem is maintaining the navigation in order for example the clicked div goes to the front and the previous first div always goes to the vacant space. I really like what they have done but I prefer to understand it not just copy and paste. Thanks for your time so far!

auntnini
11-05-2010, 10:45 PM
I'm holding my breath for an answer to that # hash question.

But I'd also love to know what is powering that fantastic site. It seems like Flash (and I see swfObject), but then it is not Flash? Is it JQuery? Is it Ruby (http://www.rubensteintech.com)?

james d
11-05-2010, 10:48 PM
djr thanks for that - a bit out of my league then!! Would it be easy to do something similar (What I like are the transitions) - but with static content or are the fragments a necessary part of something like this- If so do you know if there is a plugin or a good tutorial where I could learn about this? Unfortunately I showed this site to a potential client and they liked it so I've porbably bitten off more than I can chew having said that I don't think I actually said I could do it!!

Thanks

James

djr33
11-06-2010, 02:08 AM
Lots to respond to.

First, auntnini, please start a new discussion for a new question (but feel free to join in for this one). A quick answer to your question (but if you want more info, do start a new thread), it looks like just some complicated Javascript to me. Not that I see it on the page, but swfObject is a JS-based method of using flash, so it's just a way for JS to create the embed tags for flash-- it's regular flash, but there's some JS that generates the flash code.


And back to the original topic:
It depends on what you mean by "do anything":
It does give a variable to Javascript so that upon visiting the same page (that is: the same fragment) it will activate Javascript code to focus (load) that part of the page.
It does not "do anything" in the link itself or "mean anything" beyond giving Javascript a variable. This value would work the same way if it were "6", assuming that 6 somewhere corresponded to that page. It's a little more direct here because the page it uses is actually the same as the value there. You get the two .html's because the first is the real URL and the second is part of the page it's supposed to load.


You don't need the fragment, it's just helping to bookmark the page. It would do exactly the same thing without the fragment, except that the URL would never change (when using JS-- with JS disabled it would reload the page, so that's why you get the explicit page and additional fragment page in some links).


It's very well constructed in the sense that it works well and seems to account for all possibilities: it even works with JS disabled (just loading a page directly). It also is smooth, so that's a plus.
I'm not an expert with Javascript, so I wouldn't know where to start in analyzing the code as "efficient" or good/bad in terms of style, etc. But it works. One big question is whether it works across all browsers, and if it does, regardless of coding style (even if bad), that's a pretty solid script.


The fragment is an extra piece and you could do everything else on the page as it is. But honestly I think the rest of the page is much more complex than the fragment-- I've explained most of what you need to know for the fragment, but dealing with the rest would take a lot longer. (At least this is the case for me.)



I agree with you that the page is probably hard to maintain, though it is possible that there's a database and serverside script that manages all of that (or at least it would be possible to design it like that), so that could save some time in updates, etc.


In my opinion, that site is bordering on the range of what is possible in Javascript (in terms of interaction and visuals), and more often you'd see that type of design using flash. That might be another approach for you. The only downsides to flash are that it means learning a new program/language (ActionScript), and that all of your visitors will need the flash plugin or you'd need to build two versions of the site. Most visitors will have it (if they go to youtube, they do), but some devices can't, like an iphone. (Also, flash is an expensive program, so take that into account. Probably worth it if you plan to use it a lot though.)



I'd completely ignore the fragments for now, since they're really just a superficial part of the site-- they're just a tool to 'remember' what (sub)page is being loaded when you bookmark it. So build the rest of the site then worry about bookmarks. I'd say that 95% of scripts like this never bother to deal with that step, and it may not even be worth it. On the other hand, it is a pretty cool method.

The design itself is complex, and you'd need to learn how to work with graphics using Javascript. I don't think anything exactly like that exists but there are plenty of "gallery" type scripts. If you want something especially close to that site, you might spend less time developing it yourself rather than trying to borrow an existing script and modifying it. Remember that libraries like jquery can make it faster to create very involved Javascript.

remp
11-06-2010, 03:08 AM
It took a while to read all of that but it was well explained. Thank djr33!

traq
11-06-2010, 05:52 AM
I've seen similar stuff: the javascript could run everything without the hash fragment, but there's a very good reason for introducing it: it allows you to use the browser's <Back and Forward> buttons.

Otherwise, you'd have a long string of pages that (as far as the browser's history is concerned) are all the same page.

djr33
11-06-2010, 03:52 PM
Ah, very interesting. I knew it worked for bookmarking, but hadn't considered back/forward buttons. Thanks for adding that.

james d
11-06-2010, 09:32 PM
djr thanks for your reply , I understand it all a bit more now. If anyone is interested the js code is full of comments by the coder and his or her supervisor and reading it although it is quite long is interesting, especially as it is a real world web not a text book example,that tend to suddenly finish mid-teach and leave you with something you can't easily use.