Cool Web site feature. How was this done?

Discussion in 'Web Design and Development' started by macaddict23, Jun 27, 2007.

  1. macaddict23 macrumors 6502

    macaddict23

    Joined:
    Jun 20, 2006
    Location:
    MacVille, USA
    #1
    http://complementaryduo.com/

    The site takes time to load up, but when it does, click on the Customize tab on the far-left column. Notice how a viewer can resize both the text and the layout? How was this done?
     
  2. antibact1 macrumors 6502

    Joined:
    Jun 1, 2006
    #2
    Check the HTML source code. If you're having difficulty understanding a particular portion of that, post a question to that effect. If you don't understand HTML, learn it first.
     
  3. rogersmj macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #3
    Despite your rather smart-ass remark, this really has next to nothing to do with HTML and everything to do with DOM scripting and CSS.

    macaddict, I haven't looked at the code for that particular site but I've seen and done similar things before. It's done by manipulating certain CSS properties via Javascript. It looks like that site uses a JS library such as Scriptaculous to make the transitions kind of fluid.
     
  4. antibact1 macrumors 6502

    Joined:
    Jun 1, 2006
    #4
    The HTML source is a starting place. Difficult to get to DOM scripting and CSS information without going there first. Such an open-ended "explain this to me" statement seems to indicate the individual is not a web developer, and will likely be unable to understand a technical explanation as to how the site works. Similarly, having someone else work through the site for them without them taking a look at the source first will do little to aid their comprehension.
     
  5. rogersmj macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #5
    That's true, and I understand the frustration with open-ended questions...I'm right there with you...but I saw nothing in his post that indicated he didn't understand HTML, so I thought that was kind of rude, and your post came off as "learn HTML, stupid" when that wasn't really necessary. Knowing HTML doesn't get you hardly anywhere to learning how to implement that effect. Javascript DOM and CSS are the most important elements, so if I were just going to say "Go learn ____" it would be "Go learn Javascript and CSS."
     
  6. antibact1 macrumors 6502

    Joined:
    Jun 1, 2006
    #6
    Well I saw nothing in the post that indicated they knew HTML, nor anything about web design. The post indicated they were someone who saw something cool, and wanted to know how it worked. The first inclination of a web developer would have been to check the source code. Given that the question was so open-ended, it seems likely they didn't. I apologize if my original response seemed rude. It is not my intent to have the poster learn HTML or anything technical, simply to learn to ask an appropriate and targeted question, something that help can actually be provided for.
     
  7. mintlivedotcom macrumors regular

    Joined:
    Apr 21, 2004
    #7
    I hope you got sort of an answer. I am no coding expert, but I do enjoy learning about something new (as long as it keeps me awake!). Thanks for posting the question and the link.
     
  8. dandiggs macrumors newbie

    Joined:
    Jul 11, 2006
    #8
    Taking a look at the source code, it looks like the developer linked a to a "MooTools" javascript file:

    <script type="text/javascript" src="http://complementaryduo.com/wp-content/themes/complementaryduo/script/mootools.all.r464.c.js"></script>

    as well as some other scripts that I assume are MooTools plugins.

    MooTools is a JavaScript framework (like script.aculo.us and jQuery) that supports a number of plugins that give added functionality, particularly animation, to a website that uses CSS standards. I'm still learning about these javascript frameworks myself, or else I'd have a more detailed answer. But, with a little research and work, I'm sure you'll be able to develop sites with similar functionality.

    www.mootools.net

    demos.mootools.net

    Hope this helps! :)
     
  9. mintlivedotcom macrumors regular

    Joined:
    Apr 21, 2004
  10. macaddict23 thread starter macrumors 6502

    macaddict23

    Joined:
    Jun 20, 2006
    Location:
    MacVille, USA
    #10
    Hi guys. I apologize for the "open-ended" question. I'm at an intermediate level when it comes to CSS, and I'm trying to learn something new everyday. Yes, the first thing I looked at was the source code, with the assumption that the idea was CSS-based. After finding out that it wasn't, I figured it had something to do with either Javascript, Flash, or a combination. I appreciate the help. :)
     
  11. c-Row macrumors 65816

    c-Row

    Joined:
    Jan 10, 2006
    Location:
    Germany
    #11
    This could also be done with Protoype and the Script.aculo.us library, so if you run into problems with MooTools, maybe you want to take a look at these instead.
     
  12. yetanotherdave macrumors 68000

    yetanotherdave

    Joined:
    Apr 27, 2007
    Location:
    Bristol, England
    #12
    I wonder why the button doesn't appear in Safari, but does in FF.

    And they really shouldn't put a w3 css validated button on a site that isn't!
     
  13. eto macrumors member

    Joined:
    Apr 27, 2006
    Location:
    20,000 leagues under the sea and or Duluth
    #13
    hmm...

    It validates. 163 warnings, but it still validates.
     
  14. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #14
    The main page doesn't.
     
  15. eto macrumors member

    Joined:
    Apr 27, 2006
    Location:
    20,000 leagues under the sea and or Duluth
    #15
    xhtml or css?

    Validates when I check it with FF add-on tools. Maybe something different happens when passing the url to w3c via developer tools for FF.

    any thoughts? Definately would be nice to know that validating through FF is not definitive.
     

Share This Page