I just wanna say first that I am sorry if this has been asked before (I didn’t find anything), or if I’m not in the right section to ask this. Also, programming isn’t my main thing , so here goes…
I was looking at the Apple website and noticed something I’ve never seen before on a few pages such as http://www.apple.com/mac/…
On that particular page, look a little lower on the left in the “Mac@work” section. When you put your mouse over one of the tags, the other tags move out very smoothly as if it was Flash, but when I right click on it, I don’t see that it’s Flash. I opened the source (again, I’m no good with coding) and noticed some javascript, but is that what it is?
Also on that page, on the right side, in the “Top downloads” section, is that the same type of thing? And whatever it is, does the text included in there help for SEO issues (especially Google)?
Thanks for reading and trying to help! Even if you answer a part of my questions, or even simply give me a link where I could read about this, it would be very appreciated.
The page is coded using CSS/XHTML and uses javascript to create the sliding effect of those menu items. Second, yes, it does help with SEO since the menu items/contents are text (which is what search engines are looking for) vs a flash or graphic.
Haha, yeah obviously Apple.com doesn’t have to bother with SEO… but I do unfortunately, so I gotta find a way to get this done… And you’re saying it needs hard work
Thanks guys, thanks for pointing out the Java/Javascript difference logic_earth, I never really knew they were the same.
If any of you guys know where to find a tutorial/script/part of a script even!! that would help out a lot! Of course, I will be doing my own research and let you know if I find what I need. Thanks
Thankfully (and amazingly) Apple uses uncompressed javascript for the majority of that page. They use the prototype javascript library for most of the effects.
The javascript that relates to the sliders is:
/* SLIDERS */
var latestSliders = null;
Event.observe(window, 'load', function() {
var container = $('latest');
latestSliders = new AC.SlidingBureau(container);
var drawers = $$("#latest .drawers>li");
for (var i = 0; i < drawers.length; i++) {
var handle = drawers[i].getElementsByClassName('drawer-handle')[0];
var content = drawers[i].getElementsByClassName('drawer-content')[0];
var drawer = new AC.SlidingDrawer(content, handle, latestSliders, {
triggerEvent: 'mouseover',
triggerDelay: 120,
beforeOpen: function(drawer) {
var title = 'Window Shade - Mac - ' + drawer.handle.innerHTML;
var properties = {sprop3: title};
AC.Tracking.trackClick(properties, this, 'o', title);
}});
latestSliders.addDrawer(drawer);
}
var freeDrawers = function(container) {
return function() {
if (!AC.Detector.isIEStrict()) {
container.setStyle({height: 'auto'});
}
}
}
setTimeout(freeDrawers(container), 1000);
});
/* SHINGLES */
var macatworkShingles = null;
Event.observe(window, 'load', function() {
macatworkShingles = new AC.ShingleBureau('macatwork-shingles');
var challenges = $('macatwork-shingles').getElementsByTagName('li');
for (var i = 0; i < challenges.length; i++) {
var handle = Element.getElementsByClassName(challenges[i], 'handle')[0];
var drawer = new AC.ShingleDrawer(challenges[i], handle, macatworkShingles, {
triggerEvent: 'mouseover',
triggerDelay: 50});
macatworkShingles.addDrawer(drawer);
}
}, false);
Please note that this is only part of the function that makes the drawers. The other part is a semi-compressed single line of javascript…
Use the Web Developer toolbar for firefox to view the javascript.
thank you seriocomic! Web Developer is an amazing tool! I’ll just try to find what I need in that whole bunch of javascript that Firefox is showing me or get a programmer friend of mine to sit down and help me figure it out
, so here goes…
you have to work hard for getting it done using java but can be easily done using Flash.
