Sidebar 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.
 
macaddict23 said:
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?
Click to expand...

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.
 
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.
 
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