Toggle sidebar Toggle sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Cool Web site feature. How was this done?

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.
 
antibact1 said:
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.
Click to expand...

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.
 
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.
 
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."
 
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.
 
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! 🙂
 
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. 🙂
 
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.
 
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!
 
jng said:
The main page doesn't.
Click to expand...

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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back