June 8, 200818 yr This is a 2 part question regarding Moo Tools Javascript Framework. I recently happened across a site with a feature which I absolutle love, and in the name of experimentation and learning I would like to emulate a similar effect on my own site. After a bit of chasing and reading I found out that the effect was created with Moo Tools. The effect in question is a drop down window that moves the rest of the site "down" when it slides out. I had a look at the Moo Tools website and it clearly states that Moo Tools is developed for people who have at least some understanding of Java script which I don't You can see the effect I am talking about at http://www.jek2k.com and clicking on the "Feeling Lost" link at the top of the page! Question 1: Would somebody out there be able to help me replicate this effect. I am not adverse to learning I am just wanting to get my own site up as quickly as possible and find the best way to learn these things is to ask somebody in the know! Question 2: Now this is a bit more tricky to answer as it relates to SEO. I am wondering how 'SEO Friendly' content contained within the silde down section is. Will it be checked and processed properly by a spider, or will it just get overlooked. Like many developers out there, ranking matters and I would not want to risk ranks just for the sake of 1 cool feature! Thanks in advance to anybody who replies! David
June 8, 200818 yr Hi, the example you've linked to wouldn't affect SEO. The content is simply hidden (visually) by javascript and then revealed when you click on 'Feeling Lost'. If you look at the source code, you can see it all there, which is what the spiders will see. The only problem is that if javascript isn't enabled on the browser, all of that content will be visible when the page loads. Obviously, this is very accessible but make sure that your site still looks ok with all of the content revealed (as that site does)
June 8, 200818 yr Author Hi, the example you've linked to wouldn't affect SEO.The content is simply hidden (visually) by javascript and then revealed when you click on 'Feeling Lost'. If you look at the source code, you can see it all there, which is what the spiders will see. The only problem is that if javascript isn't enabled on the browser, all of that content will be visible when the page loads. Obviously, this is very accessible but make sure that your site still looks ok with all of the content revealed (as that site does) Thanks ElanMan, "The content is simply hidden (visually) by javascript" I was led to believe that hiding any text/content was a bad thing in SEO, as most big search engine frown terribly upon that type of thing. And in relation to the javascript being enabled, I had that in mind, and the site is being designed so that if the Javascript section is visible the rest of the site will still be functional and wel presented. LOL might just need a little bit of a scroll down to get the content. I am hoping to use two tabs within that slide down section for my Site Map and Contact form. Thanks again for the reply, its very appreciated! David
June 8, 200818 yr "The content is simply hidden (visually) by javascript" I was led to believe that hiding any text/content was a bad thing in SEO, as most big search engine frown terribly upon that type of thing. If you hide content with Javascript then the browser and search engines will see it as if the Javascript wasn't there and the content was visible. It would only be "invisible" to the user. Basically, search engines don't use Javascript. As for how to achieve this with mootools, you could try something like the following. I've kept it basic and haven't used any complex Javascript so you can hopefully understand it better. You'll need the mootools javascript file as well: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>MooTools Development</title> <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript"> window.addEvent('domready', function() { var topSlide = new Fx.Slide('top'); topSlide.hide(); $('toggleTop').addEvent('click', function(e){ e = new Event(e); topSlide.toggle(); e.stop(); }); var middleSlide = new Fx.Slide('middle'); middleSlide.hide(); $('toggleMiddle').addEvent('click', function(e){ e = new Event(e); middleSlide.toggle(); e.stop(); }); }); </script> </head> <body> <ul> <a href="#" id="toggleTop">Toggle Top</a> <a href="#" id="toggleMiddle">Toggle Middle</a> </ul> <div id="top">Some content</div> <div id="middle">More content</div> <div id="bottom">Guess what? That's right, even more content!</div> </body> </html>
Create an account or sign in to comment