djp1988 Posted June 27, 2008 Share Posted June 27, 2008 I am very interested in the javascript employed to get some interesting hover effects, please see the yahoo box on the right (http://uk.yahoo.com/) which when you hover on one of the topics, it slides down and shows you some info, also see here: http://www.apple.com/downloads/macosx/networking_security/ on the right side, when you hover, it slides down and shows you some info, obviously it looks so slick and great thanks to the graphics used, but, what kind of javascript is being used here ? Link to comment Share on other sites More sharing options...
Jesdisciple Posted June 27, 2008 Share Posted June 27, 2008 Could you be more specific about which page element(s) you're talking about? E.g., what text do they contain, or what's the element's tag name? I don't see anything that drops down on either of the pages (unless you mean the area marked "Essentials" on apple.com). Link to comment Share on other sites More sharing options...
djp1988 Posted June 27, 2008 Author Share Posted June 27, 2008 I'm playing around with it now but I can't put my finger on exactly what is motoring it: http://code.herpfrance.com/sliding/slidingeffect4.htmlIt seems they use some kind of scripts that maybe change the way they refer to elements in the document? maye this is why I cannot seem to be able to isolate a single .js file for it... Link to comment Share on other sites More sharing options...
Jesdisciple Posted June 27, 2008 Share Posted June 27, 2008 Try http://www.apple.com/downloads/scripts/sidebar_essentials.js and http://www.apple.com/global/scripts/drawers.js. (I wish Firebug had a "Find in all JavaScript" search box.)EDIT: AC is the Apple Core object; see line 50 of applecore.js: if (typeof(AC) == "undefined") AC = {}; EDIT2: And the first thing I would do with your copy of drawers.js is indent it so it can be read easily. Link to comment Share on other sites More sharing options...
djp1988 Posted June 27, 2008 Author Share Posted June 27, 2008 Yea what is up with some of the script files for large sites such as yahoo, apple, sme of them seem like they condense it to prevent us from decoding and using their scripts, is that the reason ?also I noticed that the drawer.js is part of a set of javascript files you can get from a website (don't know url), but what is the point is it for better browser compatibility ? set variables so everything is easier to code later? Link to comment Share on other sites More sharing options...
Jesdisciple Posted June 28, 2008 Share Posted June 28, 2008 Taking the whitespace out of a file makes it a smaller download, but since they didn't condense all files I don't know why they did that one.drawers.js takes an object-oriented approach to its task, so the runtime data (pieces of info) are put in their own little compartments in a scalable way. ("Scalable" sort of means "one-size-fits-all"; that file will allow the developers to make just one instance or one billion instances of AC.Bureau.) Link to comment Share on other sites More sharing options...
djp1988 Posted June 28, 2008 Author Share Posted June 28, 2008 Okay I don't really understand that, but its probably because I'm not too familiar with JS. I was actually really into it, I started to read the JavaScript bible sixth Edition 3 months ago, but at page 180 I stopped, all I really saw was the different was to refer objects on the page and how compatible each was was according to the browsers, and then I went seriously onto PHP,So why does the drawers.js file, when taken out, stop my sliding effect on the other page, how can I make it not be important anymore? Link to comment Share on other sites More sharing options...
djp1988 Posted June 28, 2008 Author Share Posted June 28, 2008 "EDIT2: And the first thing I would do with your copy of drawers.js is indent it so it can be read easily. "I have done now, what do you think: http://code.herpfrance.com/sliding/drawers.js Link to comment Share on other sites More sharing options...
Jesdisciple Posted June 28, 2008 Share Posted June 28, 2008 The whitespace thing has absolutely nothing to do with JavaScript in particular. If you have a sequence of 27 ASCII characters... (Four spaces are supposed to be a tab character but the forum software isn't working like I expect it to.) AB a bCD c dEF e f To a computer, that looks like... (in decimal numbers separated by spaces and with UNIX newlines so it's easier to understand) 065 066 010009 097 010009 098 010067 068 010009 099 010009 100 010069 070 010009 101 010009 102 Technically the numbers are all on one line, but that would make it hard to keep track of. ASCII #10 is the line feed ("\n") character and #9 is the horizontal tab ("\t"). Taking the whitespace out makes this character string considerably shorter (although most files have more than 2 characters between each newline)... 065 066097098067 068099100069 070101102 A shorter file takes less space on the server and less time to get to the client.The file's definitely an easier read, but I think you'll modify your indentation style a bit as you work with it.EDIT: To make the script not require drawers.js, just copy all of its contents to another file that you will be keeping. But why do you want to drop the file? Link to comment Share on other sites More sharing options...
djp1988 Posted June 28, 2008 Author Share Posted June 28, 2008 It's just that, I'm sure there's much ode that has nothing to do with the effect I want, I thought there would be a pretty small script to write to make a div or whatever element just go up by so many pixels in a smooth fasion on a mousover event, so I'm surprised there's thousands of lines. And also for exemple I don't know why the browser detect.js has anything to do witht the actual effect... Link to comment Share on other sites More sharing options...
Jesdisciple Posted June 30, 2008 Share Posted June 30, 2008 browserdetect.js would be necessary for any operations that involve cross-browser-incompatible features - which are more than you might think.This will interest you: http://jqueryfordesigners.com/slide-out-and-drawer-effect/. Link to comment Share on other sites More sharing options...
djp1988 Posted June 30, 2008 Author Share Posted June 30, 2008 I'm very lost now, jQuery... just when I thought I knew what to expect, I've tried to understand, but honestly what I have gathered is that this jQuery is for people who can't code in javascript and so they use this along with some pre-written hard core javascript files, and along with those pre-written files, they can code in an easy way reminding me a bit of php coding, and so that's it ? Link to comment Share on other sites More sharing options...
Synook Posted June 30, 2008 Share Posted June 30, 2008 jQuery is for people who can't code in javascript and so they use this along with some pre-written hard core javascript files, and along with those pre-written files, they can code in an easy way reminding me a bit of php coding, and so that's it ?Ouch. Thats a very... harsh way of putting it. jQuery is a library that provides a framework for writing JavaScript. It allows you to extend your code based on the core functions included in the library, so that you can, as they say, write less, and do more! :)Many people well-versed in JavaScript will still use jQuery or its contemporaries because it allows them to focus on the true aims of their applications without being bogged down in minor coding issues. Also, many years' development work has gone into jQuery, and so using it as a framework will ensure that your applications work under all conditions, quickly and efficiently, instead of you having to spend 50% of your time wondering why Safari breaks your code.It looks like PHP because of the $ function, but that really is justfunction $(eleid) { return document.getElementById(eleid);} Link to comment Share on other sites More sharing options...
justsomeguy Posted June 30, 2008 Share Posted June 30, 2008 jQuery is for people who can't code in javascript and so they use this along with some pre-written hard core javascript filesThat's not it, it's a framework for people writing applications with a lot of common things already done. When you're writing an application for Windows you're not going to write all the code yourself to create a new window, put "close", "minimize", "maximize" etc buttons on it, write a bunch of code that lets you grab the borders of the window and resize it, etc. You just use the Windows API and create the window with 1 line of code. It's about not re-inventing the wheel every time you need to drive your car. Frameworks are there to allow competent programmers to focus on their core application logic instead of the more general things that have already been done 100 times.If you think that frameworks are for people who don't know how to write Javascript, look at ExtJS. Look at this example, which lets you browse the Ext forums with paging, sorting, previews, etc, all in a nice grid (you can also put the grid in a floating, movable, resizable window with a couple extra lines of code). http://extjs.com/deploy/dev/examples/grid/paging.htmlNow click the link on that page to look at the Javascript for that page and tell me if that looks easier or more difficult than "regular" Javascript. Link to comment Share on other sites More sharing options...
djp1988 Posted June 30, 2008 Author Share Posted June 30, 2008 Oh don't get me wrong, all I was saying is what I gathered by just looking at a few pages, it's not my opinion.Okay, yea jQuery looks very interesting, but reassure me that I'm not wasting my time by learning JavaScript... Link to comment Share on other sites More sharing options...
justsomeguy Posted June 30, 2008 Share Posted June 30, 2008 OK, this is done in java script:http://extjs.com/deploy/dev/examples/desktop/desktop.htmlMore ExtJS samples here:http://extjs.com/deploy/dev/examples/desktop/desktop.htmlI wouldn't have said this 5 years ago, but the future of the internet is Javascript. Javascript 2 is getting closer and closer, and Javascript 1.x is standardized and fast enough that you can rely on it across browsers. Not all people enable Javascript, but the major projects I'm working on now simply require Javascript, if you don't want to run Javascript in your browser then you can't use the things I'm working on. I think that's reasonable. According to thecounter.com, only 6% of people are now browsing with Javascript disabled, and I imagine that the majority of those 6% are using something like NoScript for Firefox, or something that can be easily enabled for specific sites. I think it's reasonable at this point to require Javascript support for some of the more advanced things. For example, here's an RSS feed viewer:http://extjs.com/deploy/dev/examples/feed-viewer/view.htmlSure you could make something like that which doesn't use Javascript, but it's not going to be nearly as usable. Javascript has some usability issues (history, back button, search results, etc), but it allows a much higher degree of interactivity and usability in general then a simple HTML/PHP site.If you're going to study Javascript, study the theory. Don't waste time with tutorials on things like how to do an image rollover, or how to check a form field, or whatever. Learn how objects work in Javascript, learn about the event model and setting up event handlers, learn about AJAX and how to communicate with a server, learn about the DOM and namespaces and things like that. That will give you the background you need in order to take advantage of something like jQuery or ExtJS. It's going to take a little work to learn that stuff, but it will give you major advantages over other developers who just follow tutorials. If you check my info on the left, you can see that I'm trying to focus on improving my knowledge of PHP and Javascript, I personally think the future of internet applications are AJAX applications with a small PHP backend to communicate with the database, and a lot of Javascript code for the interface. In one application I'm building now, which is less then 20% finished, I have 23KB of PHP code and 98KB of Javascript, with a grand total of about 1KB of HTML code. This is all the HTML my application uses: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Application Title</title> <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"> <link rel="stylesheet" type="text/css" href="ext/resources/css/xtheme-default.css"> <link rel="stylesheet" type="text/css" href="include/main.css"> <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext/ext-all-debug.js"></script> <script type="text/javascript" src="include/lms.js"></script> <script type="text/javascript"> Ext.onReady(app.lms.init, app.lms); </script> </head> <body> <div id="require">This application requires that your browser has Javascript support enabled.<br><br>Loading required files, please stand by...<br><br>If this message does not disappear, please ensure that your browser is not blocking Javascript execution.</div> <script type="text/javascript"> document.getElementById("require").style.display = "none"; </script> <script type="text/javascript" src="include/user-data.js.php"></script><script type="text/javascript" src="include/admin-main.js"></script> </body></html> Link to comment Share on other sites More sharing options...
djp1988 Posted June 30, 2008 Author Share Posted June 30, 2008 Great, well I am a big JavaScript fan, I just started to notice one day the thousands of lines on major sites such as yahoo, and from that I got myself a few books, I did give up and go onto php, but now I feel like I have mastered that, I am tilting towards JS again and I am very excited Link to comment Share on other sites More sharing options...
Jesdisciple Posted July 2, 2008 Share Posted July 2, 2008 If you're going to study Javascript, study the theory.FYI, Douglas Crockford has several good (but possibly difficult) articles on JavaScript theory: http://javascript.crockford.com/ Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.