Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Using ' # ' in url.

  1. #1
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Using ' # ' in url.

    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

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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.
    Jeremy | jfein.net

  3. #3
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default I still don't get it!

    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.

  4. #4
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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.
    Jeremy | jfein.net

  5. #5
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  6. The Following 2 Users Say Thank You to djr33 For This Useful Post:

    james d (11-05-2010),Nile (11-05-2010)

  7. #6
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Thanks for saving me there djr - haha
    Jeremy | jfein.net

  8. #7
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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!

  9. #8
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default Wow!

    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)?

  10. #9
    Join Date
    Nov 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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

  11. #10
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  12. The Following 2 Users Say Thank You to djr33 For This Useful Post:

    auntnini (11-08-2010),james d (11-06-2010)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •