The Book and the Cover » Web Development http://benjaminsterling.com Ok, you did not judge the book by it's cover, great. Now, read the whole thing before passing judgment. Mon, 16 Jan 2012 21:58:18 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 IE6 Support http://benjaminsterling.com/ie6-support/ http://benjaminsterling.com/ie6-support/#comments Tue, 24 Mar 2009 19:25:03 +0000 Benjamin Sterling http://benjaminsterling.com/?p=142 With the launch of Internet Explorer 8 last week there has been a good amount of talk for support for IE6. At my company we are currently discussing the best approach that will both keep the client happy at the same time forcing people to upgrade their expectations of a browser. Some thoughts have been to charge a premium to support IE6 – whether this is a percentage of total expect hours for a project or a flat rate based on the requirements , the difference being building with IE6 in mind compared to progressive enhancements after the fact. Obviously my team has pride in our work so we most likely would be building to some extent with IE6 in mind either way.

The following stats are some questions I posted surveying a large group of people.

What do you fall under?

Response Total Percent
Developer 117 54.93%
Designer 78 36.62%
Profession (ie. PM, Director) 18 8.45%
213

What type of client do you support?

Response Total Percent
Commercial (big companies) 84 32.81%
Mom and Pop type clients 84 32.81%
Non-Profits 58 22.66%
Government 30 11.72%
256

How long will you/your group support IE6?

Response Total Percent
Umm… IE6 who? 50 24.27%
Till what seems like the end of time (or till gov’t offices update) 53 25.73%
Another 6 months, then progressive inhancements FTW 26 12.62%
Another 6 months, then not at all 24 11.65%
Another year, then progressive inhancements FTW 14 6.8%
Other Options 39 18.93%
  • Other Text
  • We only suppport it for clients that ask for it.
  • As soon as Windows 7 OS is released to the public
  • until our internal IT team drops 6
  • when full experience is needed for ie6 clients, otherwise prog. enhancement now
  • Bare minimum now (works, may not look 100% perfect) unless there is extra budget for it.
  • As long as there is a business requirement to do so
  • As long as my damn clients still have it on their desks
  • Until enough of our client’s client’s no longer use IE6.
  • unsure, our clients are often not tech savvy
  • only when target audience uses
  • We only suppport it for clients that ask for it.
  • As soon as Windows 7 OS is released to the public
  • until our internal IT team drops 6
  • when full experience is needed for ie6 clients, otherwise prog. enhancement now
  • Bare minimum now (works, may not look 100% perfect) unless there is extra budget for it.
  • As long as there is a business requirement to do so
  • As long as my damn clients still have it on their desks
  • Until enough of our client’s client’s no longer use IE6.
  • unsure, our clients are often not tech savvy
  • only when target audience uses
  • IE7.js
  • Once our IE6 usership drops below 5%
  • Depends on user agent stats to my clients’ sites
  • I detect IE6, then redirect visitor to page ‘gently’ suggesting they upgrade to a better browser (with links to Firefox, Opera, Safari, Chrome, and IE7/8)
  • Until it holds a significantly lower Market share that we can profesionaly ignore it
  • Already stopped
  • until we replace expensive legacy apps that rely on IE6 for some reason
  • Untill ie8 becomes as involved as ie6
  • until IE6 market share drops below 5%
  • We only provide basic support as a opt-in feature.
  • Till clients stop using it.
  • we get the basics working, anything else is a bonus
  • Already dropped support
  • I simply try to ignore IE6 =)
  • I can’t say. My clients still see traffic from IE6.
  • progressive inhancements FTW already
  • ceased support 1st Jan 2009
  • No more support DIE IE6!
 206

If you have to support government agencies, how do you plan to tackle the IE6 issue?

Response Total Percent
Will support, but with a IE6 cost adjustment, ie. charge more 93 52.84%
Just keep doing what we do 75 42.61%
Other Options 8 4.55%
  • Other Text
  • Since I work for a govt agency I don’t really have a choice. Supposedly IE7 will be released soon but they’ve been saying that forever. Until then, its all about progressive enhancement
  • I don’t pay taxes so govt. agencies can use browsers like IE6.
  • Since I work for a govt agency I don’t really have a choice. Supposedly IE7 will be released soon but they’ve been saying that forever. Until then, its all about progressive enhancement
  • I don’t pay taxes so govt. agencies can use browsers like IE6.
  • n/a
  • IE MUST DIE!!!!!
  • I dont
 176

How does having IE8 available effect your process?

Response
  • How does having IE8 available effect your process?
  • Response
  • Doesn’t
  • It makes it worse. Now we have THREE versions of IE to test in!!!
  • Not at all, just one more browser to test for.
  • It doesn’t. We don’t even have IE7 deployed across our agency.
  • definitely gives us more leverage for dropping IE6
  • not at all until mass adoption
  • We have not setup a plan yet but are planning currently
  • just another browser to debug in.Also, should be noted that IE 7 is considered ‘buggy’ and ‘unsafe’ by most corporate IT services including AOL and Time Warner
  • Not at all.
  • Hopefully it helps fight our cause for stopping IE6 support
  • It’ll just mean one more browser to test in.
  • Currently, not at all. The bigwigs at my company have yet to recognize it.
  • We’ll add X-UA-Compatible = Edge headers, and fix IE8 rendering issues that we might have ignored while it was still in beta.
  • None until the % of IE6 users drops below a certain threshold.
  • It’s just yet another browser to support. No difference.
  • It doesn’t
  • Doesn’t. The gov has IE6.
  • allows me to shame IE6 users more.
  • It complicates it—there’s now another browser to test against. It wouldn’t be such a problem if the IEs weren’t so annoyingly different from version-to-version.
  • We told IE6 to take a hike months ago. IE8′s just another browser to test.
  • One more crappy browser to deal with.
  • It doesn’t yet. We’ll use IE6 internally until 2056.I do internal web apps, and I wish we could code to more than IE6 though… it’s more of an impediment to professional development than anything else. I can only code/use other browsers outside of work.
  • Not much. If it’s truly standards compliant, then we’ll still have to use IE specific stylesheets and little hacks for users who have 7 and below.
  • Not much at all, thankfully. Just one more browser to test.
  • Afraid to see how crappy it is, can not answer that
  • We are not rolling it out until after our applications have been certified for user with them. They currently are not.
  • It makes me have to test for another fucking browser. Fuck!
  • i don’t know for now, but i’m expecting for some trouble in near future
  • it doesnt
  • Other than giving me one more browser to test in, it doesn’t.
  • We don’t get to play with it because the site is adamant that they WILL deploy IE7 (and Vista) first, just to fark everything up, instead of jumping straight to Win7 and IE8 or FF.
  • Doesn’t
  • It makes it worse. Now we have THREE versions of IE to test in!!!
  • Not at all, just one more browser to test for.
  • It doesn’t. We don’t even have IE7 deployed across our agency.
  • definitely gives us more leverage for dropping IE6
  • not at all until mass adoption
  • We have not setup a plan yet but are planning currently
  • just another browser to debug in.Also, should be noted that IE 7 is considered ‘buggy’ and ‘unsafe’ by most corporate IT services including AOL and Time Warner
  • Not at all.
  • Hopefully it helps fight our cause for stopping IE6 support
  • It’ll just mean one more browser to test in.
  • Currently, not at all. The bigwigs at my company have yet to recognize it.
  • We’ll add X-UA-Compatible = Edge headers, and fix IE8 rendering issues that we might have ignored while it was still in beta.
  • None until the % of IE6 users drops below a certain threshold.
  • It’s just yet another browser to support. No difference.
  • It doesn’t
  • Doesn’t. The gov has IE6.
  • allows me to shame IE6 users more.
  • It complicates it—there’s now another browser to test against. It wouldn’t be such a problem if the IEs weren’t so annoyingly different from version-to-version.
  • We told IE6 to take a hike months ago. IE8′s just another browser to test.
  • One more crappy browser to deal with.
  • It doesn’t yet. We’ll use IE6 internally until 2056.I do internal web apps, and I wish we could code to more than IE6 though… it’s more of an impediment to professional development than anything else. I can only code/use other browsers outside of work.
  • Not much. If it’s truly standards compliant, then we’ll still have to use IE specific stylesheets and little hacks for users who have 7 and below.
  • Not much at all, thankfully. Just one more browser to test.
  • Afraid to see how crappy it is, can not answer that
  • We are not rolling it out until after our applications have been certified for user with them. They currently are not.
  • It makes me have to test for another fucking browser. Fuck!
  • i don’t know for now, but i’m expecting for some trouble in near future
  • it doesnt
  • Other than giving me one more browser to test in, it doesn’t.
  • We don’t get to play with it because the site is adamant that they WILL deploy IE7 (and Vista) first, just to fark everything up, instead of jumping straight to Win7 and IE8 or FF.
  • Sure does!
  • Frankly it’s just another pain in the ass. It just adds another browser to test on. It’s already not a short list
  • Just one more browser to test in… :(
  • Hopefully will lead us into an age where IE6 WILL be outlawed… or something like that.
  • na
  • Not yet… but we’ll likely focus on IE7 and IE8 soon and less and less on IE6.
  • Just makes it more complicated, I guess!
  • no effect.
  • We will have to start testing in it, although the priority on the fixes will be much lower that FF, IE6/7 and Safari.
  • It doesn’t. It just came out, need to wait 6 months to a year for people to update. Still can’t use some things until even IE 7 is dead.
  • We will now check in IE8
  • just another browser to test in
  • One more browser for test
  • Sigh.
  • Just one more browser to QA and tweak for.
  • Another VM with another browser to test in… more development time.
  • As we primary design for FF, not very much.
  • Not yet.
  • It hasn’t at the moment. Will now download as IE8 is out of beta
  • Adds one more browser to test once we find a machine to put it on.
  • IE8 doesn’t affect things until it becomes more popular. Then I’ll need to add it to the list of browsers to test in.
  • First of all, it’s *affect* not ‘effect’. Effect means ‘bring about’ or ‘make happen’. (Sorry, my mom was an English teacher!).Second, the IE8 beta’s been around for what, a year now? So having the actual release doesn’t make much of a difference to my development process. Although I suppose I should pay attention now to making sure the sites I build look proper in IE8, the reality is that the vast majority of my clients’ visitors won’t be using IE8 just yet, unless Microsoft forces it down their throats via a non-optional update.
  • Until the people in charge of Corporate IT networks pull their fingers out, it makes zero difference
  • not sure yet :)
  • IE8 will continue to be the worst browser. It is less bad than IE6, however.
  • I need another desktop to test for IE8, the way I already have one just for IE7 testing…can’t do some of the fancy tricks here at work to get them up side by side
  • Still renders differntly, ie7 still seems easier to deal with
  • It lengthens the time spent on IE-fixing ¬¬
  • Doesn’t really effect it. One more browser to test in but it’s the closest to standards so far.
  • we make our website the more cross browser possible. It’s just another test we must do.
  • It doesn’t. If it’s standards-compliant, it should work fine anyway. If it’s not…DIE!!!!
  • Not right now. Many of my clients are small businesses. Main focus on IE7 and some IE6 right now. But this will change soon.
  • one more effing browser to test in. and an effing Microsoft browser no less
  • It’s just another site to test it. It also means I can push a bit farther into the realm of CSS3.
  • Nothing now as everything we do already works in 8, but hopefully it effects our clients process, getting them to upgrade from 6.
  • Just another browser to test.
  • just another browser we have to test in.
  • It’s actually a kick in the pants, but not because of IE8 itself, but rather its IE7 ‘compatibility’ mode. Since, that mode won’t render the way IE7 itself renders, it effectively adds another browser to test and support.
  • it doesn’t really yet.
  • test
  • We’ll have another browser in which to test, and another stylesheet to implement should the need arise (via conditional comments)
  • So far not at all. It seems to be working well.
  • At least it is somewhat compliant but is already behind the curve without CSS3 support. So many people that use IE don’t even know what version they are using so unless microsoft forces a change my life will still be burdened by the plagues that is know as IE. I only see a minimal change in the near term to my process.
  • it makes debugging for ie7 and 8 easier
  • Haven’t really tested in IE8. I’m fairly confident that the majority of work will be OK. Will need to look more closely at what I must do to ensure standards compliance mode.I’ve been watching site stats and I think across all the sites I manage I’ve had 2 or 3 visits from IE8
  • One more browser to test in.
  • Well. I’m hoping that with the news of IE8 some people will upgrade after realizing there has been two major versions of the browser released. In the end I hope it will keep me from spending a ton of time fixing the site for IE6.
  • Minimal
  • not sure yet
  • hmmmm. it is a microsoft product. need I really say more. I will likely have to hack on
  • It’s another browser to test again, but so far the testing process seems pretty straightforward. I expect that having implemented CSS2.1 properly will mean that it won’t impose too much change in our process. Of course, in theory.
  • Makes developing for these kind of platforms a lot easier. Less time concerning stupid errors and glitches specific to IE platform.
  • Makes more problems to deal with.
  • Doesn’t effect
  • Hope, IE6 will die.
  • Hardly at all. I mostly test in webkit and mozilla browsers then when the page is done I see if everything works okay in the IE 6-8 and include conditional stylesheets to work around the ‘bugs’.
  • Not at all. IE7 only recently became our officially supported browser. As much as I hate to say it, I don’t expect to see IE8 in our environment for some time.
  • Saves me and the client money
  • Yet another browser to test in.
  • Don’t know yet.
  • None really because it’s too new
  • Just one more browser to test on. Hopefully that slice of IE6 will keep shrinking. Is it worth testing for if it gets under 10%? Most of my clients audience has already moved on to IE7+
  • It has yet to affect us. I’m terrified when we start supporting it.
  • Still trying to sort that out.
  • it creates more work. IE8 compatibility view is not the same as a native IE7 client so now we have to work with even more cross-browser issues.
  • Doesn’t really. There have always been browser inconsistencies to deal with, with IE8 there are some more.Only in my dreams do all browsers render the same.
  • I usually use the IE7 compatibility meta tag. So, IE8 is more like a pseudo-ghost to me anyways.
  • It hasn’t so far.
  • Better than IE6!
  • No
  • not at all so far…
  • Just another rushed out browser that has to be entered into the equation and bugtested for each project
  • Ugh, just another idiot browser to maintain..

Are your sites working in IE8?

Response Total Percent
Yes 133 63.94%
No 8 3.85%
Other Options 67 32.21%
  • Other Text
  • dunno
  • most, but not all
  • Haven’t tested yet.
  • have not been actively qa’ing for ie8
  • Don’t know
  • untested
  • Haven’t tested yet.
  • Still checking
  • Have not checked
  • not sure
  • Haven’t even tested yet
  • Internal NO, External Yes
  • testing this week
  • have no ieda
  • I’ve not played with IE 8 much
  • dunno
  • most, but not all
  • Haven’t tested yet.
  • have not been actively qa’ing for ie8
  • Don’t know
  • untested
  • Haven’t tested yet.
  • Still checking
  • Have not checked
  • not sure
  • Haven’t even tested yet
  • Internal NO, External Yes
  • testing this week
  • have no ieda
  • I’ve not played with IE 8 much
  • Maybe
  • Don’t know
  • Don’t know yet
  • Haven’t checked yet ;)
  • Haven’t checked.
  • We haven’t even started testing yet.
  • Most of them, yes
  • for the most part
  • haven’t been able to test yet.
  • Untested…
  • Haven’t tested all yet.
  • not sure at the moment
  • Do not know yet.
  • Not Sure
  • not sure
  • I don’t know
  • not sure yet.
  • Haven’t checked
  • mostly
  • Everything renders larger
  • Haven’t checked yet
  • I should say not…!
  • the phone’s not ringing … yet
  • Haven’t tested yet.
  • have not check them yet.
  • Most are, using the meta tag for IE7 rendering
  • Don’t know. I would imagine most if not all will work.
  • havn
  • idk I’ll begin testing in it now
  • not sure
  • The ones I direclyt worked on, yes
  • haven’t checked
  • untested
  • Mostly, have to fix some float issues.
  • need to check
  • there are issues
 208


]]> http://benjaminsterling.com/ie6-support/feed/ 0 Developer Tools That Don’t Get Enough Love http://benjaminsterling.com/developer-tools-that-dont-get-enough-love/ http://benjaminsterling.com/developer-tools-that-dont-get-enough-love/#comments Mon, 08 Dec 2008 06:00:46 +0000 Benjamin Sterling http://benjaminsterling.com/?p=127

Jing

The concept of Jing is the always-ready program that instantly captures and shares images and video…from your computer to anywhere.

Why I think this tool should get more love? Ever needed to explain something over the phone to someone and they are just not getting it? So what do you do, you take a bunch of “print screens” and past it into a Word doc and send that over. They get it and they still don’t get “it.” Well, this is where jing comes in, you simply open the program – if you don’t already have it open be default like me – select a section of the screen to record, record what you are trying to explain, save and the send that SWF over and you just saved yourself hours of hassle.
http://www.jingproject.com/

Yugma

Yugma is the leader in affordable instant web conferencing solutions. Yugma provides Free, Professional, and Enterprise web conferencing software-as-a-service (SaaS) solutions to individuals, small businesses, and large enterprises across a diverse range of industries.

Why I think this tool should get more love? Inline with Jing, using Yugma helps you take client “support” to the next level. Sometimes a three minute video is not enough, you actually need to see what the client is seeing and the next best thing to actually sitting of the clients or co-workers shoulder is to share their screen. Yugma’s free account, although not as feature rich as the Pro account, it gets the job done in a pinch.
http://www.yugma.com/

Twitter

Twitter is a service for friends, family, and co–workers to communicate and stay connected through the exchange of quick, frequent answers to one simple question: What are you doing?

Why I think this tool should get more love? Really, Twitter gets a ton of love from the average person to Steven Colbert to CNN but I don’t think it gets enough love as tool for Developers/Designers. Imagine you work is a firm, design/development/both, and you have a problem with some code or how to make a design better, you simply call over one of your co-workers and get their advice. But if you don’t work in an office where you can get help you alternatives are forums, mailing groups or IRC which are all ok, but not – in my experience – give off the truly “personal” help that Twitter can help provide. If you follow and build a rapport with other people a request for help can be fulfilled pretty quickly.
http://twitter.com | follow me

Virtualbox

VirtualBox is a family of powerful x86 virtualization products for enterprise as well as home use. Not only is VirtualBox an extremely feature rich, high performance product for enterprise customers, it is also the only professional solution that is freely available as Open Source Software under the terms of the GNU General Public License (GPL). See “About VirtualBox” for an introduction.

Why I think this tool should get more love? I’ve had limited interaction with the other visualization apps but I really must say that I really like VirtualPC. “But you are talking about VirtualBox, am I missing something?” No, no you are not. VirtualPC in my mind is probably the best visualization app out there but it costs $$ and if you are not making a ton of $$ the next runner up is VirtualBox which is an extremely close second. In my development I try to test in as many environments as I can, I try to set up my VB to only have 512mb of ram running WinXp and Win2000 (don’t have Vista yet otherwise that would be my main install). The reason for setting up weaker environments then my custom built machine is because not everyone has 3.5gb of ram with a video card that has 512mb ram and so on. Some of the apps I build are quite JavaScript intense so I need to make sure it can still run as smoothly as possible in those systems.
http://www.virtualbox.org/

]]> http://benjaminsterling.com/developer-tools-that-dont-get-enough-love/feed/ 2 Really Simple History: Ajax history and bookmarking library http://benjaminsterling.com/really-simple-history-ajax-history-and-bookmarking-library/ http://benjaminsterling.com/really-simple-history-ajax-history-and-bookmarking-library/#comments Wed, 03 Dec 2008 16:00:51 +0000 Benjamin Sterling http://benjaminsterling.com/?p=119 For some time now I have been using Really Simple History for my applications that use a good amount of AJAX. RSH is exactly what it sounds like, it is a really simple way of adding history and bookmarking to your AJAXified apps.  To see it in action have a look at the Mason's Graduate Requirements site where it is being used to handle bookmarking for four separate parameters.

What I want to cover in the article is what I have learned and what steps I took when coding with RSH for the Mason project and for some other on going projects.

First thing you should do is download the Really Simple History code.

Secondly, I have been using a modified version of Adam Vandenberg's Querystring functions which has only one modification to it.

PLAIN TEXT
JavaScript:
  1. if (qs == null) qs = location.search.substring(1, location.search.length);
  2. // changed to
  3. if (qs == null) qs = location.hash.replace(/^.*#/, '');

You will need to set up your script is a particular way so that the history script is created first, and then initialized, at least the way I do it, when DOM is ready.  You can get away with doing it on Window.onload but since most likely your code will be minipulating the DOM, initializing on DOM ready is probably better for you.

I set up my inital code like below:

PLAIN TEXT
JavaScript:
  1. var initail = false;
  2. var qs = null;
  3.  
  4. window.dhtmlHistory.create();
  5.  
  6. $(document)
  7. .ready(function(){
  8.     dhtmlHistory.initialize();
  9.     dhtmlHistory.addListener(theListener);
  10.  
  11.     if(!initail){
  12.         theListener();
  13.     };
  14. });

Lines 1 and 2 we set up some globals we will be reusing later on and line 4 we create the history object. Lines 5 and 6 should be familiar to you, here we just check to see if the DOM is ready, if so, we run the code in the containing function. Line 8 we initialize the history script and at line 9 we set the listener to "theListener" which is a function I will point out further down the page. You will see that I also have an IF statement that is checking to see if this is the initial run. This is because the the RSH script does not run the listener script when it is initialized.

The next function is just a helper function I use all the time when dealing with the hash:

PLAIN TEXT
JavaScript:
  1. hash = function(){
  2.     return location.hash.replace(/^.*#/, '');
  3. };

The last function is the "theListener" function which I referenced at line 9 of the second group of codes. This function will get called each and every time the hash changes.

PLAIN TEXT
JavaScript:
  1. theListener = function(){
  2.     if(!initail) initail = true;
  3.     qs = new Querystring( hash() );
  4.  
  5.     if( typeof qs.get('cat') == 'undefined' ){
  6.         // run cat specific code
  7.     }
  8. };

Although the RSH script does pass back two params you will see that I don't use them and the only real reason for this is that I felt it was too complicated and I never really figured out how I should use them.

At line 2 of the function we check to see if the function was already initiated. Then at line 3 we set up a new Querystring reference - should probably change the name to hashstring or something like that at some point. And from this point on, you can check your query string for what ever parameters you need to and run the appropriate codes.

]]> http://benjaminsterling.com/really-simple-history-ajax-history-and-bookmarking-library/feed/ 0 Web Tech November Meetup Presentation http://benjaminsterling.com/web-tech-november-meetup-presentation/ http://benjaminsterling.com/web-tech-november-meetup-presentation/#comments Tue, 25 Nov 2008 17:35:00 +0000 Benjamin Sterling http://benjaminsterling.com/?p=116 Last night I had the opportunity to speak at the Web Tech November Meetup in Baltimore about jQuery.  I focused mainly on traversing since I believe once you fully grasp some of the built in jQuery traversing methods you can do just about anything using jQuery and do it easily.

Preparations

I spent about three weeks getting this presentation together with the hopes that everything I talked about would be self-explanatory.  For the most part it was, there was some items that I should have wrote differently as to not make it look complicated.  Over all I think most of the items just flowed well.

My preparations went something like this, first I went through most of the code I had written over the past two months.  As I went through the code I made a tally of what traversing methods where used and how often.  I was suprise to see that I used .eq() quite often, guess I am glad jQuery brought that back quickly after the move to the .slice() method back at 1.1.4.  The others that ranked pretty high were .is(), .hasClass() and .not().

Since that list is pretty small I decided to go through some of the "help" emails, IMs and twitter messages I have gotten over the past couple of months and although I took some more complex routes with the answers I provided, after looking at them again they could have been accomplished better by using some of the family methods.  Yes, I am coining a new phrase for a group of methods.  Those methods are .children(), .parent(), .parents(), .siblings(), and the cousins .next() and .prev().  I also through in .end() since this can be a very useful method and helps the chaining a bunch of calls together.

I know that I am much better presentor when i present on the fly with minimum talking points, so actually creating a slideshow and talking off of that slide show was going to very hard for me.  After many, many edits to my talking points that I had written down and desided to put pen to paper or mouse pointer to web browser.  I signed up for an account with 280slides, started making my slide.  Although the app does not offer the same flexiblity or features that a desktop app would provide, it was pretty damned close.  My hat goes off to the developers of that app, it is quite nice.

After some time, about two weeks, I finally got the presentation done the day before I was to present.  I went to the slides over and over again and noted what points I should make what points were less important and depending on how well the presentation was going, I would expand on those talking points.

The Presentation

The meetup did not have a big turn out so the nervousness I had before hand disapated enough for me to get in to my zone.  I started off by introducing myself and did my best to keep away from any self depricating statements that I am so very skilled at.  Told the group what I would be focusing on, Selecting, Caching, Traversing, and we were on our way.

The group consisted of a few JavaScript rookies and JavaScript novices but for the most part, everyone knew CSS.  So for selectors, I focused on if you know CSS then you know how to select DOM elements in jQuery.  It really is that simple.  I explained the Hierarchy Selectors since a good majority of people I've helped over the years don't fully grasp them.  The main ones are the prev + next and prev ~ siblings selectors since if you don't see it is use, you can't really grasp the purpose of them.  I also showed the built in Custom Selectors but did not go into detail with them.

Caching was pretty straight forward so there was not much explanation needed for that.

Finally I jumped in to Traversing, focusing the methods I mentioned above.  The .is(), .hasClass() and .not() methods were pretty easy to explain, but for the family methods I actually had to show a family, my family.  I created a family tree for the group to better demonstrate .children(), .parent(), .parents(), .siblings().  I think it went over pretty well, I think for ease, I will put this grab in between each of the family method slides.  Moving back and forth between slides was a bit time consuming.

Explaining the .next() and .prev() methods was pretty easy and straight forward, there were some questions, but mainly because I was using a bad term, can't remember what it was now.

To demonstrate .end(), I pulled up a few pieces of code from projects that I've been working on and explained what each line was doing, much like what I did for the "Slide in tab" post I did a few weeks back.

The Close

There really was not a ton of questions thrown my way, that could mean that I did an excellent job of explaining myself or it means people were totally confused and felt I could not help them.   For the questions that were asked, I was able to answer them pretty easily.

My thoughts

There are obviously a few things I feel I need to work on and will try to do so.  I want to do some more talks, maybe focusing on the same topic at first till I feel that one is working the way I want and then maybe move on to more complicated jQuery topics.

The slide show I used for my presentation is below, feel free to have a look at it and let me know your thoughts.  As soon as slideshare is done processing it I will post the slideshare link here, till then feel free to check out the presentation via 280slides.

The Slides

]]> http://benjaminsterling.com/web-tech-november-meetup-presentation/feed/ 0 Slide in tab window using jQuery http://benjaminsterling.com/slide-in-tab-window-using-jquery/ http://benjaminsterling.com/slide-in-tab-window-using-jquery/#comments Thu, 20 Nov 2008 04:03:16 +0000 Benjamin Sterling http://benjaminsterling.com/?p=104 Say you want to wanted to put little tabs - you know, the ones like what you get from a lawyer or a realestate again to point out important things - off the side of your page so that your users can click, bring that tab into view to see what important information you want to point out.  Yeah, I know, you've seen these "tabs" a millions times and that is fine, but you have not seen it from my site and most likely you were not secretly brainwashed into learning about other jQuery methods that you don't already use or know about.

So, let the brainwashing education begin!

The Tabs

Take a look off to the left I moved the demo here, do you see the three tabs that are there, they are so spectacularly named "tab 1", "tab2" and, yup you guessed it, "tab3."  The html structure is pretty straight forward:

PLAIN TEXT
JavaScript:
  1. <div id="sideTabs">
  2.     <div class="tab">
  3.         <h3>Tab 1</h3>
  4.         <div class="gut">
  5.             <p>Some text</p>
  6.         </div>
  7.     </div>
  8.     <div class="tab">
  9.         <h3>Tab 2</h3>
  10.         <div class="gut">
  11.             <ul>
  12.                 <li>link</li>
  13.             </ul>
  14.         </div>
  15.     </div>
  16.     <div class="tab">
  17.         <h3>Tab 3</h3>
  18.         <div class="gut">
  19.             <ul>
  20.                 <li>link</li>
  21.             </ul>
  22.         </div>
  23.     </div>
  24. </div>

You will notice that there are no links for the tabs and this is because we will create them on the fly.  Why?  Well, other then that I have a plan to show you some new tricks, imagine that you have JavaScript turned off, those will just be pointless links with a hash in them.  You can probably argue that we can put an ID with each tab and that link will be a link hash to that ID, and I will say that you are being brainwashed educated to my thinking.

The CSS

This part is actually completely open to you to format how ever you want, my initial thought was to do a bunch of "progressive enhancements" - don't you love buzzwords for not truly supporting older browsers - that would entail some gradients, rounded corners and dropshadows, but the point of this post was not to show off my CSS3 prowest.  The point was to show you some fancy methods so here is the CSS I am using:

PLAIN TEXT
CSS:
  1. #sideTabs.closed{
  2.     left:-310px;
  3. }
  4. #sideTabs{
  5.     position:fixed;
  6.     left:0;
  7.     top:100px;
  8.     width:300px;
  9.     height:300px;
  10.     border: 10px solid #000000;
  11.     background:#fff;
  12. }
  13. #sideTabs a.tabLinks{
  14.     position:absolute;
  15.     right:0;
  16.     top:0;
  17.     outline:none;
  18.     display:block;
  19.     border: 10px solid #000000;
  20.     border-width:1px 1px 1px 0px;
  21.     -moz-border-radius: 0px 200px 200px 0px;
  22.     -webkit-border-radius: none 200px 200px none;
  23.     margin:0;
  24.     padding:0 5px 0;
  25.     color:#000;
  26.     text-decoration:none;
  27.     font:12px/25px Verdana, Arial, Helvetica, sans-serif;
  28.     background:#000;
  29.     color:#fff;
  30.     z-index:20;
  31. }
  32. #sideTabs a.tabLinks.active{
  33.     font:bold 14px/25px Verdana, Arial, Helvetica, sans-serif;
  34.     background:#fff;
  35.     color:#000;
  36.     z-index:21;
  37. }

The jQuery

Alright, we are at the meat and potatoes the corn and the cob the Larry and Moe (and Curly)... sadly that is the best I can do with those analogies.  Any who, we are at the JavaScript, what I will do is post the code and the try to explain what is happening line by line:

PLAIN TEXT
JavaScript:
  1. var jqsideTabs;
  2. var tabs, h = 50, r = 0,ra = 0;
  3. $(document)
  4. .ready(function(){
  5.     jqsideTabs = $('#sideTabs').addClass('closed');
  6.    
  7.     tabs = jqsideTabs
  8.     .find('.tab h3')
  9.     .clone()
  10.     .appendTo(jqsideTabs)
  11.     .each(function(i){
  12.         var that = $(this), cls = '',ow,newThis, newEl;
  13.        
  14.         if( i == 0 ) cls = ' active';
  15.         newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>');
  16.         that.replaceWith(newEl);
  17.        
  18.         ow = newEl.outerWidth();
  19.        
  20.         if( i == 0 ) ra = ow;
  21.         else r = ow;
  22.        
  23.         h = newEl.css({'top':h , 'right': -ow }).height() + h;
  24.        
  25.         newThis = newEl.get(0);
  26.         newThis.jq = newEl;
  27.         newThis.i = i;
  28.        
  29.         newEl.click(function(){
  30.             var el = this.jq;
  31.            
  32.             if( jqsideTabs.hasClass( 'closed' ) ){
  33.                 jqsideTabs.removeClass('closed');
  34.             }
  35.             else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){
  36.                 jqsideTabs.addClass('closed');
  37.             }
  38.            
  39.             el
  40.             .siblings()
  41.                 .removeClass('active')
  42.                 .css({'right': -r })
  43.             .end()
  44.             .addClass('active')
  45.             .css({'right': -ra });
  46.            
  47.             tabs.eq( this.i ).show().siblings('.tab').hide();
  48.            
  49.             return false;
  50.         });
  51.     })
  52.     .end()
  53.     .parent()
  54.         .eq(0)
  55.         .addClass('active')
  56.     .end()
  57.         .filter(':not(:eq(0))')
  58.         .hide()
  59.     .end();
  60.  
  61.     jqsideTabs.bind("mouseleave",function(){
  62.         jqsideTabs
  63.         .animate({left:-310}, 'fast', function(){
  64.             jqsideTabs.addClass('closed').removeAttr('style');
  65.         });
  66.     });
  67. });

Update: Moved the demo to a separate page.

The Explanation

Lines 1 and 2 are just some variables that I will be setting and reusing through-out the code.

Line 5 I set the "jqsideTabs" variable to reference the jQuery object for the element with an ID of sideTabs and I also add a class of "close".

Line 7 a reference is being set and I will point a little later below what that is actually being referenced too.

Line 8 we look inside the jqsideTabs DIV for the H3 elements that are inside the ".tab" DIVs.  I can just as easily do jqsideTabs.find('.tab > h3') to make sure to the H3 tag directly below the ".tab" element or jqsideTabs.find('.tab h3:first-child') to make sure I grabbing the first H3 that is the first element under '.tab'.

Line 9 we clone() those H3 elements, if we do .clone(true) we will also clone any events that are bound to the H3.

Line 10 we append the cloned H3s to "jqsideTabs"

Line 11 through to 51 we are looping through those H3s to do some fanciness.  Notice the "i" in the function?  That will be returning the index of the loop starting at zero (0).

Line 12 some variables are set up.

Line 14 we check if we are on the first index, which is zero (0), and then set the "cls" variable to "active".

Line 15 we set up a reference to a new DOM element/jQuery object that has the text of the H3 element by using "that.text()".

Line 16 we replace the H3 with the newly create DOM element, the A element/tag/

Line 18 we get the outer width (.outerWidth()) of the element, outerWidth() will get the full width of the element including border and padding, if you were to do outerWidth(true) you would also get the margins.

Line 20 we check if it is the first index again and if so, set the variable "ra" to the outer width

Line 21 is the else part of line 20 and here we set the "r" variable.  Both "ra" and "r" will be used for "right active" and "right".  You will see their purpose shortly.

Line 23 is doing a few things, 1) it is setting the top and right positions of the element and returning the .height() of the element plus the previously stored height at the same time.

Line 25 we are using the .get(0) method against the newly created A tag and this will give us the equivalent of doing a getElementById.

Line 26 we set the reference now so that we don't have to re-look up this element later on, the speed gain is probably minimum at best but I makes me happy to do this and really, that is what it's all about.

Line 27 and line 26 we are doing something specific and really can't remember what it is called, maybe "assignment," but basically we are storing some data directly in the DOM to be used later.

Line 29 we add a .click() event to the A tag we created.

Line 30 just to stick to a decent naming conventions I take the varariable I set earlier and plop it into a new variable call "el" (short for element)

Line 32 to 34 we check to see if the jqsideTabs element has a class (.hasClass()) of "closed", if so, remove that class.

Line 35 to 37 we check to see if the jqsidetabs element does not have a class of "closed" and the current element has a class of "active", if so, add the class "close".

Line 40 we grab all the .siblings(), in this case, all the .tab DIVs and links that were created.

Line 41 each item returns will have the class "active" removed.

Line 42 the default right position is set for those elements.  But let me note something real quick, in this case I am going with the assumption that I did not set the "position" of the .tab elements to anything, meaning, they were not set to relative or absolute.  If I did this I would need to change siblings to only grab items at are A tags to be sure I only grab the, well, A tags.

Line 43 the .end() method is used, this brings the reference back to "el" at line 39.

Line 44 a class of "active" is added.

Line 45 the right position is set to the "ra" variable.

Line 47 with the reference of tabs that was set back at line 7, we find the DIV or .tab that equals what ever that index (i) is match to, in the example it can be either 0, 1 or 2, then we show that one and then hide its siblings that have a class of ".tab".

Line 49 a return of false is used to stop the default action of the link.

Line 52 end() is used to give reference back to the H3 tags.

Line 53 we use .parent() to grab the parents of the H3 tags.

Line 54 we filter down to the first element in the parents by using .eq(0).

Line 55 a class is added to that returned element from line 54.

Line 56 we go back to all the parents by using .end()

Line 57 filter is used with the combination seletor of ":not()" and ":eq(0)" to grab all the DIVs (the parents of the H3s) that is not equal to the first one.

Line 58 then we hide the returned elements

Line 59 here we use end() to finally set the "tabs" variable that we have way back at line 7.

The Closing

Ok, are you brainwashed educated yet?  Could I have combined a few steps or could I have writen some of my selectors to be a little more precise? Sure I could have.  The beauty of coding with jQuery is that there can be any number of ways to approach the same exact issue.  But do keep in mind that my way is always the right way.

But seriously, there are a lot of ways to use the jQuery framework, you have to find the way the best suits you.  And the only way to find that out is to learn how others do it and read the docs and learn the selectors and traversing methods.

As always, please feel free to check me if I got something incorrect or if you think you can do better.  I am just as open to learning as you should be.

]]> http://benjaminsterling.com/slide-in-tab-window-using-jquery/feed/ 5 Better jQuery Code #2 http://benjaminsterling.com/better-jquery-code-2/ http://benjaminsterling.com/better-jquery-code-2/#comments Sun, 16 Nov 2008 16:00:17 +0000 Benjamin Sterling http://benjaminsterling.com/?p=101 In a follow up to my Better jQuery Code #1 post I will be writing about some other small items that I have found to make my code better and more readable.

Chaining

Chaining is one of the most beautiful and time save pieces of code structure that jQuery brought to the game, the problem is is that it can make the code unreadable if not treated correctly.

For example, say you wanted to select the fourth LI in your nav and add a class, remove a class from it, then you want to find the UL that is a child of that LI and add a class to that, then want to move back to the UL that has the ID nav on it (.end() goes back to the last 'destructive' operation) and lastly you want to animate that UL. Along with have a heft run on sentence you also have a pretty unreadable string of functions.

PLAIN TEXT
JavaScript:
  1. $('#nav').find(&gt; li').eq(3).addClass('className').removeClass('otherClass').find('ul').addClass('redClass').end().end().end().slideUp().slideDown();

Instead, format you code to look something like below, you can have more then one methods per line, but keep it reasonable and readable. See how I am indenting each line? This is to give it a sense that each method is referring to specific elements. Much like you would indent your HTML and how some people indent their related CSS, it is good practice to indent your code.

PLAIN TEXT
JavaScript:
  1. $('#nav')
  2.     .find('> li')
  3.         .eq(3)
  4.         .addClass('className')
  5.         .removeClass('otherClass')
  6.         .find('ul')
  7.             .addClass('redClass')
  8.         .end()
  9.     .end()
  10. .end()
  11. .slideUp()
  12. .slideDown();

A small caveat to the above structure is that if you run your code through JavaScript Lint you will get a notice of "lint warning: unexpected end of line; it is ambiguous whether these lines are part of the same statement," I personally don't see an issue with this and will just to a find and replace for the line break and all is good.

Traversing (Finding)


Last post I posted about eq, hasClass, is, and not which are four traversing methods for filtering out certain items from your select. For returning specific elements from the DOM using the children(), siblings(), parent(), and parents() methods in most of my projects.

The Core developers for jQuery are very smart people

The Core developers for jQuery are very smart people, they name methods the make a lot of sense and match up to the functionality they provide and children() is not an exception. Let's assume we have the following DOM structure:

PLAIN TEXT
JavaScript:
  1. <ul id="nav">
  2.     <li><a>Text</a></li>
  3.     <li><a>Text</a></li>
  4.     <li><a>Text</a></li>
  5.     <li><a>Text</a></li>
  6.     <li> <a>Text</a>
  7. <ul>
  8.     <li><a>text</a></li>
  9. </ul>
  10. </li>
  11.     <li><a>Text</a></li>
  12.     <li><a>Text</a></li>
  13. </ul>

With that structure, we did:

PLAIN TEXT
JavaScript:
  1. $('#nav').children();

How many elements would be returned? 17? 15? 7?

If you said 7 then you are correct; why not 17 or 15? Imagine this, you have a single parent, and you have 6 brothers each of whom have a significant other. You and your significant other have a daughter and she in turns has a kid but is single and that kid has a childhood sweetheart. In this scenario "#nav" is your mother (we'll cover the parent and parents method below but keep this in your head) and when we say give me all your children we are only look for your mothers immediate children, which in this case are the LI.

Got that?

Ok, now what do you get if you do the following with the siblings() method?

PLAIN TEXT
JavaScript:
  1. $('li:eq(4)').siblings()

If you said 6, you are correct, siblings will select all your immediate brothers and sisters. You following me so far? Does this make sense? In this example we are saying select the LI that is in the forth index (or in this case, you) and then get my brothers and sisters or siblings.

Just for a teaser, what if you wanted to something to you and your siblings? Easy, just add .andSelf() at the end (this would probably be used in a case where you click on a LI and do $(this)). We'll cover this a bit more in a later post.

PLAIN TEXT
JavaScript:
  1. $('li:eq(4)').siblings().andSelf()

The .parent() method is pretty straight forward, it will select your immediate parent. So in the following case you will select the UL.

PLAIN TEXT
JavaScript:
  1. $('li:eq(4)').parent()

The parent() method excepts an expression but the only need I've ever had was to quickly test the parent for something particular, maybe a class or a specific attribute or attribute with a certain value, in an IF statement. (remember, in JavaScript 0 is treated at false and 1 is treated as true)

PLAIN TEXT
JavaScript:
  1. if( $('li:eq(4)').parent('.selected') ){
  2. if( $('li:eq(4)').parent('[data]') ){
  3. if( $('li:eq(4)').parent('[start=5]') ){

The parents() method can be a little more powerful for your needs, but is useful in some cases. Let's assume that the UL above is the only code in your body tag. So if you do the following how many items will be returned? 1? 2? 3? 4?

PLAIN TEXT
JavaScript:
  1. $('li:eq(4)').parents()

If you said anything but 3 you would be incorrect, if the UL code above was the only child of the body tag that the JavaScript code above would return the UL, BODY, and HTML tags. With the parents method you can filter it down to what you want by using any number of selectors that jQuery supports.

Below is a piece of code from a project I've been working on. Basically the issue was that there needed to be a submit button appended after the last input box on the page. If that input box is inside of table, append the button after the table. The issue was, I had not idea what the TABLE may be in, could have been a DIV that is inside of a DIV and so on. Also keep in mind that as of this writing I see at least one better way to have written out this code but for this post this example should work fine.

PLAIN TEXT
JavaScript:
  1. // inlineTextQuestion is a reference to all the input elements
  2. var lastOne = inlineTextQuestion.eq( inlineTextQuestion.size()-1 );
  3. var lastOneParents = lastOne.parents();
  4. var lastOneParent = null;
  5.  
  6. lastOneParents
  7. .each(function(i){
  8.     if( lastOneParent === null ){
  9.         var el = $(this);
  10.         // #bodyText is the one known factor I had
  11.         if( el.parent().is('#bodyText') ){
  12.             lastOneParent = el;
  13.         }
  14.     }
  15. });
  16.  
  17. // sbmt is a reference to a submit button create about this code
  18. lastOneParent.after(sbmt);

Let me try to explain what is going on, please refer to the comments in the code for what the variables are reference to, line 2 I am grabbing a reference to the last INPUT in the inlineTextQuestion variable. Line 3 I grabbed a reference to the all the parents of that INPUT. Line 6/7 I loop through all the parents checking , at line 11, to see if the current element's parent is the DIV with the ID of "bodyText." If that returns true we set a reference to that element and at line 18 I append the submit button after that referenced element.

Closing

In this post we discussed using the children(), siblings(), parent(), and parents() methods and I try to explain them the way I see them. These are the ones I use the most and the ones I think you will find the love for.

If there is anything with the above you don't under stand or, god forbid, I got incorrect, please feel free to drop me a line.

]]> http://benjaminsterling.com/better-jquery-code-2/feed/ 2 Better jQuery Code #1 http://benjaminsterling.com/better-jquery-code-1/ http://benjaminsterling.com/better-jquery-code-1/#comments Sat, 15 Nov 2008 18:01:50 +0000 Benjamin Sterling http://benjaminsterling.com/?p=99


I've been wanting to write some jQuery tips for a while now and just never know what to really say until I saw Marc Grabanski's 5 Tips for Better jQuery Code.  Although I have tips, I don't think I have any that are Earth shattering or ones that I can rank higher then the other, but these are ones that I use daily and are asked about just as often.

Caching

If there are items you will be referencing more than once, cache it!  Even if you won't be referencing an item more than once still get in the habit of setting up references.

Now, what do I mean references?  If you are going to be playing with you main nav group or probably going to be messing with inputs, set up a variable and store the reference to those element in it.

PLAIN TEXT
JavaScript:
  1. var mainNav = $('#main_nav a');
  2. var inputs = $('input');
  3.  
  4. // the make calls like
  5.  
  6. mainNav.click(function(){});
  7. input.change(function(){});

[Update #1: as Sean O points out, doing $mainNav may help you remember that the variable is a jQuery object and may be good practice.]

[Update #2: Another good point from Dan G. Switzer, you could easily have cached your jQuery objects when you initiated your events/behaviors like below]

PLAIN TEXT
JavaScript:
  1. var $mainNav = $('#mainNav').click(function(){});

Traversing (Filtering)

This is a topic I plan to put some more effort into in a later post but there are four methods you should use: eq, hasClass, is, and not.

The use of these methods will filter out your selection to mat

PLAIN TEXT
JavaScript:
  1. var mainNav = $('#main_nav a');

eq() will filter your selection down to one element eq(1) will select the second element since the jQuery object that is returned by $('#main_nav a') is basically a zero based array.

PLAIN TEXT
JavaScript:
  1. mainNav.eq(1);

A combination of eq and hasClass; hasClass is exacly what it sounds like, it checks the element to see if it has a class of "selected" and returns true if it does have that class

PLAIN TEXT
JavaScript:
  1. mainNav.eq(1).hasClass('selected');

Once again, a combination of eq and is; is simply checks the element in question against the expression in the brackets and returns true if is has the class selected or if the tag is A

PLAIN TEXT
JavaScript:
  1. mainNav.eq(1).is('.selected'); // checks for class of selected
  2.  
  3. mainNav.eq(1).is('a'); // checks to see element is an A tag

Checks to see if element has text in it of "special text" returns true if it has that text

PLAIN TEXT
JavaScript:
  1. mainNav.eq(1).is(':contains(special text)');

.not() will return elements that do not match the expression.

PLAIN TEXT
JavaScript:
  1. mainNav.not('.active')

So if you were to put a class of active on one of the links, that call will return all links in mainNav that you did not put a class of active.

Closing

Ok, I wanted to keep this short and point out some of the items I personally deal with and some items that I get asked about daily.  There are a few other items that I will address in another post that will make your life easier.

If there is anything with the above you don't under stand or, god forbid, I got incorrect, please feel free to drop me a line.

]]> http://benjaminsterling.com/better-jquery-code-1/feed/ 9 Things I’ve Learned While building a WordPress Plugin http://benjaminsterling.com/things-ive-learned-while-building-a-wordpress-plugin/ http://benjaminsterling.com/things-ive-learned-while-building-a-wordpress-plugin/#comments Sat, 15 Mar 2008 03:47:52 +0000 Benjamin Sterling http://benjaminsterling.com/things-ive-learned-while-building-a-wordpress-plugin/ After building my first few WordPress plugins I learned quite a few things that I just could not find good information on. So what I will be doing over a couple or so posts is explaining what the problem/issue was that I had and show you how I went about resolving the problem/issue.]]>

Table of contents for What I learned while building a WordPress Plugin

  1. Things I’ve Learned While building a WordPress Plugin

After building my first few WordPress plugins I learned quite a few things that I just could not find good information on. So what I will be doing over a couple or so posts is explaining what the problem/issue was that I had and show you how I went about resolving the problem/issue.

How do I add a sub menu for my plugins admin and what is a "unique identifier"?

Ok, creating a submenu is not very hard and WordPress docs does an ok job of explaining it. But when you are building your plugin using a class structure it is not very clear what you should do.

Lets assume that you have a class called "myClass" and a function with in it that is called "adminMenu." Let's also assume that this class is also on the same file that is your main plugin file that has the version information on it. Your typical php4 based class would look like (php5 based classes have __construct instead of calling myClass and some other minor differences):

PLAIN TEXT
PHP:
  1. class myClass{
  2.     function myClass(){
  3.         add_action('admin_menu', array(&amp;$this, 'adminMenu'));
  4.     }
  5.    
  6.     function adminMenu(){
  7.         if (function_exists('add_menu_page')) {
  8.             add_menu_page('My Class','My Class', 7, __FILE__, array(&$this, 'adminSubPage1'));
  9.         }
  10.         if (function_exists('add_submenu_page')) {
  11.             add_submenu_page(__FILE__, 'SubMenu 1', 'SubMenu 1', 7, __FILE__, array(&$this, 'adminSubPage1'));
  12.             add_submenu_page(__FILE__, 'SubMenu 2', 'SubMenu 2', 7, 'mc_adminSubPage2', array(&$this, 'adminSubPage2'));
  13.         }
  14.     }
  15. }

At line three we add an action that points to the "adminMenu" function and let me clarify what I have found happens with "array(&$this, 'adminMenu')". WordPress will take "array(&$this, 'adminMenu')" and make it into myClass::adminMenu() and execute it like that - the &this is a reference to myClass.

At line 8 we have the main link that gets put at the top next to "Plugins," "Comments" and so on. You will notice the __FILE__ constant, this allows WordPress to set that menu item to reference the plugins main file. You also see array(&$this, 'adminSubPage1') will execute as myClass::adminSubPage1() (this function is not shown).

At line 11 we create our first submenu for our plugin which also points to the adminSubPage1 function, which is needed I found. If you don't have a submenu item that points to the same "page" as the main menu item, the submenu items will not show up.

At line 12 we create our second submenu item that points to the adminSubPage2 function (also not shown). You will notice a three differences between the two submenus, two being the Names and the function they point to, and the third is the mc_adminSubPage2 which is our unique identifier. This will give us a url the looks something like admin.php?page=mc_adminSubPage2.

Nothing real fancy with this one, just wanted show how to create your plugin menu items while using a Object Oriented approach. Feel free to let me know if there is an easier way or if I am all around incorrect. Next post will be about loading of jQuery and your other JavaScript without messing up the Prototype code that WordPress and other WP plugins use.

]]> http://benjaminsterling.com/things-ive-learned-while-building-a-wordpress-plugin/feed/ 0 jQuery: Select what you want – part 2 http://benjaminsterling.com/jquery-select-what-you-want-part-2/ http://benjaminsterling.com/jquery-select-what-you-want-part-2/#comments Tue, 27 Nov 2007 03:28:47 +0000 Benjamin Sterling http://benjaminsterling.com/2007/11/26/jquery-select-what-you-want-part-2/

Table of contents for Select anything

  1. jQuery: Select what you want – part 1
  2. jQuery: Select what you want – part 2

In my first post about jQuery Selectors call Select what you want, I went over some basic selectors that I use on a daily basis within a web based training framework I put together using jQuery. What I would like to cover are some of the situations I have ran into over the past year while using jQuery are my frameworks backbone.

Some of the selections we will cover are searching for links with an specific extension, images, images that wrapped in a link, links and definition lists.

Let me give you some background on the process. We have a content writer who supplies us with with a storyboard for the content and flow. We then create a separate Html page for each page within that storyboard. Each one of these pages is brought into the main page using the .load method for jQuery. All the selections are being done in the callback of the .load method, like:

PLAIN TEXT
JavaScript:
  1. $(".textArea").empty().load(URL, function(){
  2.     // selection calls
  3. });

The following will be the functional request that the writer asks for. Note the "this" in my selector calls is referring to textArea. Also note that these will not be optimized calls, for instance, if I were going to check for images or links multiple times for different things, I would do something like:

PLAIN TEXT
JavaScript:
  1. var $img = $("img", this);
  2. var $a = $("a", this);

But for the purpose of this post, I will code as if there is only one thing we are looking for and most of these will be very simple selections.

Functional request: Have smaller image open a bigger image in a jqModal box

The Html
PLAIN TEXT
HTML:
  1. <a href="path/to/big" class="jqModal"><img src="path/to/small"/></a>

The JavaScript
PLAIN TEXT
JavaScript:
  1. $("a.jqModal:has( img )", this).click(function(){
  2.     // jqModal code
  3. });

Functional request: Have a "how-to" open in a jqModal iframed box

The Html
PLAIN TEXT
HTML:
  1. <a href="path/to/howto" class="jqModalFramed">How to link text</a>

The JavaScript
PLAIN TEXT
JavaScript:
  1. $("a.jqModalFramed", this).click(function(){
  2.     // jqModal code
  3. });

Functional request: Have pdfs alert before opening

The Html
PLAIN TEXT
HTML:
  1. <a href="thePdf.pdf">View PDF</a>

The JavaScript
PLAIN TEXT
JavaScript:
  1. $("a[href$='.pdf'", this).click(function(){
  2.     // prompt box code
  3. });

Functional request: Have glossary of words and when those words a clicked, show it's definition

The Html
PLAIN TEXT
HTML:
  2.     <dt>Word</dt>
  3.     <dd>Definition</dd>
  4. </dl>

The JavaScript
PLAIN TEXT
JavaScript:
  1. $('dl', this).find('DT')
  2. .toggle(function(){
  3.     $(this).addClass('open').removeClass('closed').nextUntil('DT').show();
  4. },function(){
  5.     $(this).removeClass('open').addClass('closed').nextUntil('DT').hide();
  6. })
  7. .addClass('closed')
  8. .nextUntil('DT')
  9. .hide();

Functional request: Have have a group of radio buttons and when clicked, have them show a response

The Html
PLAIN TEXT
HTML:
  1. <input type="radio" name="answer1"/>
  2. <p class="answer answer1">Text</p>

The JavaScript
PLAIN TEXT
JavaScript:
  1. $("input[type=radio]",this).click(function(){
  2.     $('.answer').hide();  // these are p tags that contain the answers
  3.     var current = $(this).attr('name');
  4.     $('.'+current).show().highlightFade('yellow');
  5. });

Functional request: Have external links prompt that they are going outside of site

The Html
PLAIN TEXT
HTML:
  1. <a href="epa.gov/radiation/">View PDF</a>

The JavaScript
PLAIN TEXT
JavaScript:
  1. $("a").filter(function() {
  2.        return this.href.match(/.com|.gov|.edu/);
  3. }).click(function(){
  4.     // prompt box code
  5. });

The Final Word

Each project comes with different requirements; the requirements above were only a small part of the requirements for the most recent project but the rest of the list was pretty simple stuff. Feel free to post question or corrections.

Previous in series
]]> http://benjaminsterling.com/jquery-select-what-you-want-part-2/feed/ 0 jQuery: Select what you want – part 1 http://benjaminsterling.com/jquery-select-what-you-want-part-1/ http://benjaminsterling.com/jquery-select-what-you-want-part-1/#comments Mon, 26 Nov 2007 03:12:46 +0000 Benjamin Sterling http://benjaminsterling.com/2007/11/25/jquery-select-what-you-want-part-1/

Table of contents for Select anything

  1. jQuery: Select what you want – part 1
  2. jQuery: Select what you want – part 2

In an earlier post I wrote about what are the fastest basic selectors and found out some interesting stuff with regards to speed for some basic selectors. In this post I am going to go over some not-so-basic selectors. I am going to try not to repeat what Karl has said in his two posts, "How to Get Anything You Want - part 1" and "How to Get Anything You Want - part 2", but some may be worth repeating.

To keep my searches confined to a certain div with a class of "theDiv" using calls like:

PLAIN TEXT
JavaScript:
  1. $("SELECTOR", ".theDiv")

Basically what this does is searches for the element with the class of "theDiv" and then searches for "SELECTOR" within that result.

Cell 1 Cell 2 Cell 3 Cell 4 Cell 6

See the quick brown fox jump over the lazy dog.

  • This is 1
  • This is 2
  • 3 this is
  • This is 4
  • This is 5
I am set as display:none
I am set as visibility:hidden

We are are going to start off with some "Attribute Filters"

$("[name]") Gets each element with an attribute of "name". Note that the last text field did not get highlighted, although it does have an attribute "name" , it is empty, so therefore not selected.

$("input[name]") Is the same as above, except we are limiting the return to inputs and if you run each with firebug running on "Profile," this one takes more calls to find the correct element(s).

$("[name=getMe]") This one is only grabbing the elements that have the "name" attribute with a value of "getMe"

$("[name!=getMe]") This one is only grabbing the elements that don't have the "name" attribute with a value of "getMe" and as you can see it even grabbed the elements that did not have the "name" attribute at all.

$("[type^=b]") This one matches elements that have the "type" attribute and the value of the "type" attribute starts with a "b". (in my test area the one submit button has a type of button)

$("[type$=t]") This one gets all the elements that has the "type" attribute and it's value ends with "t."

$("[value*=no]") This one will match all elements with "no" in it.

$("[id*=no]") Same as "Test 7" except we are grabbing all elements with "no" in the ID

$("[id*=no][name=getMe]")

Wow, that was fun, what did we learn? You can select anything you want by attribute alone. Let's get into some "Content Filters"

$(":contains('Cell')") Here we are getting all element with the word "Cell" in it and since we did not filter out what element we wanted, the TABLE, TBODY, TR, and the TD all got selected because they all contained the word "Cell". Note my earlier comment that I am using $(":contains('Cell')", ".theDiv") in my javascript to limit the return results to the containing div, otherwise the BODY and HTML tag and the other elements between BODY and the items with the "Cell" text.

$("td:contains('Cell')") Here is the same approach but we will be restricting our search to just the TD.

$(":empty") Selects every element that is empty. If you don't limit your search to items that are not form elements, you will get the input fields.

$(":has(span)") Selects all elements that has a span in it

$(":parent") Selects all elements that are "parent" elements

Oh; you want to be able to get hidden elements? Visible elements?

$(":hidden") Selects all elements that are hidden, this includes items with a style of display:none or visibility:hidden and input elements with a type of "hidden."

$(":visible") Selects all elements that are visible.

Where do we go from here

If you have visited the jQuery Documentation on Selectors you will see that I have not gone over anything new, just maybe rephrased it in "my terms." These, for the most part, are the selectors I would use on a daily basis, so I felt that these were the best place to start. Some approaches my be faster, so I would suggest that you take some "me" time and see which ones will work the best in your situation.

In a future alticle, I am going to cover some of the approaches I take with a web base training framework that I think will benifit you

Next in series
]]> http://benjaminsterling.com/jquery-select-what-you-want-part-1/feed/ 1 jQuery: what are the fastest selectors? http://benjaminsterling.com/jquery-what-are-the-fastest-selector/ http://benjaminsterling.com/jquery-what-are-the-fastest-selector/#comments Fri, 23 Nov 2007 20:40:21 +0000 Benjamin Sterling http://benjaminsterling.com/2007/11/23/jquery-what-are-the-fastest-selector/ Update 12/07/2007: per Brian Cherne comments, I decided to run these test again in Firefox with firebug lite instead of firebug and the execution times were dreastically different. So, to "level the playing field" I would suggest that you turn off firebug or disable it for the page and refresh, you will get the firebug lite console pop up at the bottom of the screen and then run the test. You will get much better results; but I most ask this question, because after searching I could not find the answer, why the difference in speeds?

I've been using jQuery for over a year now and have built some pretty big apps with it as my "selector" engine and had always wondered what were the fastest ways to select an element. After reading a post on the mailing list I decided to put some selectors to test. First thing I had to figure out what was the best way to really test out some selectors. So I went about just grabbing some site I came across while Stumbling, but after doing some testing using that sites content I came to the realization that I would not know how to implement a "test" suite on my site. So what I decided was to just implement an on the fly test suite on my content.

With that said, here we go:

If you do not have firebug installed, you will have a Firebug lite console pop up at the bottom of the screen. If you do have Firebug installed, be sure to open it to follow along.

This page has x DOM elements on it. So, what ever selection we make will cycle/search through that total number of elements.

First up is to find an element with the ID of "shareThisBookmarkThisone" (this is the "Share this..." div that is currently hidden) and to select this element we will do:

PLAIN TEXT
JavaScript:
  1. $("#shareThisBookmarkThisone")

After running that test you should have a number around 10 - 20 milliseconds. In this case, it is the equivalent of "getElementById" which is a built in JavaScript method that searches for an element node with an id attribute whose value is "shareThisBookmarkThisoneButton."

Pretty simple selector, lets move onto another simple one that should be pretty fast.

On this page, I have x DIV elements.

PLAIN TEXT
JavaScript:
  1. $("div")

After running that one, you should be looking at something between 0 - 10ms with Firefox about the 100ms range, once again, pretty simple.

Now let start getting into what selection methods are faster, say we want one of those DIVs with a class of "adspace," which approach would be faster? One this page, I know we only have one to work with, so we should be able to get a reasonable return time.

Our first approach would be:

PLAIN TEXT
JavaScript:
  1. $(".adspace")

PLAIN TEXT
JavaScript:
  1. $("div.adspace")

PLAIN TEXT
JavaScript:
  1. $("div").filter(".adspace")

For "Test 3" we should get about 15ms in Firefox 2, Safari 3, between 0 - 16ms in Opera 9.2 and 0ms in IE6 and IE7, whereas we get 0ms across the board for "Test 4." Now in "Test 5" we get 0ms for all except Firefox, where we get around 15ms.

What does the above tell us? That if there is only one element things are quicker? Not sure, but lets put that to the test, I posted some empty DIVs, some with a class of "selectMe" and others with some random classes, you can view the source to see what these DIVs look like.

PLAIN TEXT
JavaScript:
  1. $(".adspace")
  2. $("div.adspace")
  3. $("div").filter(".adspace")

With "Test 6" we are looking getting back 153 results and I really must say that I am a little shocked by the results:

  • IE7
    • 6.1: 16ms
    • 6.2: 15ms
    • 6.3: 0ms
  • Safari
    • 6.1: 16ms
    • 6.2: 0ms
    • 6.3: 0ms
  • Opera
    • 6.1: 31ms
    • 6.2: 0ms
    • 6.3: 0ms
  • Firefox with firebug
    • 6.1: 141ms
    • 6.2: 109ms
    • 6.3: 109ms
  • Firefox with firebug lite
    • 6.1: 31ms
    • 6.2: 0ms
    • 6.3: 0ms
Final Notes

Before we get into what we learned let me put a bit of a disclaimer here. I have not really looked into the full workings of the jQuery framework, so anything I say is based off of my assumptions and what I learned as I have built with it. The numbers you see above are from browsers that are running on a not so average computer, so they are not from the average user's/client's computer.

What did we learn? That if you are looking for all elements with a certain class and they are all of the same tag name, do $("TAGNAME.CLASSNAME") or $("TAGNAME").filter(".CLASSNAME"). That if you have only a single element that needs to be called and there will not be duplicates, your fastest selector is going to be the $("#ID") selector. That, with the exception of Firefox, the leading browsers handle a TAG search pretty quickly. Firefox had comparable speeds to the other browsers once firebug is turned off.

Something to keep in mind is that we did not do any manipulations, ie. css(), append(), animate(), or any really complex selectors and those will add time your actions.

jQuery is the library of choice for me, you are free to use any of the many libraries out there.

]]> http://benjaminsterling.com/jquery-what-are-the-fastest-selector/feed/ 10 Accessible and Search Engine Friendly Image Rollover with CSS and Sprites http://benjaminsterling.com/accessible-and-search-engine-friendly-image-rollover-with-css-and-sprites/ http://benjaminsterling.com/accessible-and-search-engine-friendly-image-rollover-with-css-and-sprites/#comments Wed, 21 Nov 2007 04:09:09 +0000 Benjamin Sterling http://benjaminsterling.com/2007/11/21/accessible-and-search-engine-friendly-image-rollover-with-css-and-sprites/ I've been using StumbleUpon for a few weeks now and have found a ton of sites that have given me a ton of knowledge, some that have confirmed my thoughts of quite a few things and sites that just made me shake my head at.

One such site was talking about CSS Image Rollovers and their examples consisted of a <A> tag wrapping a none breaking line space, I won't post a link because I have actually seen quite a few other sites doing the same thing and don't want to single anyone out. But what really made me frustrated is this particular site had a least 50 comments saying how great this was. While I don't consider myself an expert there are a few things I truly believe in: clean code and accessibility. As it stands now, my blog is not 100% accessible, there are things I need to do to make it better, and those things are in the works.

So, what I would like to do is show you a way of making image rollovers while being accessible, and search engine friendly.

Say we have an image sprite like below (we can cover the pros and cons of image sprites in another post, these icons can be found at http://utombox.com/my-works/):

The style sheet code:

PLAIN TEXT
CSS:
  1. .icon{
  2.     display:-moz-inline-box;
  3.     display:inline-block;
  4.     overflow:hidden;
  5.     background:url(imageRollover.png) no-repeat;
  6.     text-indent: -3000px;
  7.     *text-indent:0px;
  8.     font:0/0 Arial;
  9.     color:rgba(255,255,255,0);
  10.     vertical-align:bottom;
  11.     width:100px;
  12.     height:100px;
  13. }
  14.  
  15. .iconYouTube{}
  16. :hover.iconYouTube{background-position:-200px 0px;}
  17.  
  18. .iconFlickr{background-position:-100px 0px;}
  19. :hover.iconFlickr{background-position:-300px 0px;}
  20.  
  21. .iconRss{background-position:0px -100px;}
  22. :hover.iconRss{background-position:-200px -100px;}
  23.  
  24. .iconFeedburner{background-position:0px -200px;}
  25. :hover.iconFeedburner{background-position:-200px -200px;}
  26.  
  27. .iconDelicious{background-position:-100px -200px;}
  28. :hover.iconDelicious{background-position:-300px -200px;}
  29.  
  30. .iconTechnorati{background-position:-100px -100px;}
  31. :hover.iconTechnorati{background-position:-300px -100px;}



The Html code:

PLAIN TEXT
HTML:
  1. <a href="" title="youtube icon" class="icon iconYouTube">youtube icon</a>
  2. <a href="" title="flickr icon" class="icon iconFlickr">flickr icon</a>
  3. <a href="" title="rss icon" class="icon iconRss">rss icon</a>
  4. <a href="" title="feedburner icon" class="icon iconFeedburner">feedburner icon</a>
  5. <a href="" title="delicious icon" class="icon iconDelicious">delicious icon</a>
  6. <a href="" title="technorati icon" class="icon iconTechnorati">technorati icon</a>



The outcome:

youtube iconflickr iconrss iconfeedburner icondelicious icontechnorati icon



The Explanation:
Lets start off with the easy things to explain; in the instance above I am using an image sprite which, depending on how many external elements you need to load, will speed up load time. In the first class icon we are setting the background as the sprite and then proceeding classes we simply position the background image to get the desired image showing with both the default image and the hover.

The hard thing to explain, at least for me, is what everything in the icon class is doing. I will try, but if I mess something up, call me on it.

  • display

    • -moz-inline-box: for mozilla based browsers
    • inline-block: supported by IE and all other grade-A browsers
  • overflow

    • hidden: make everything hidden if it is outside the box (ie6, you know I talking about you)
  • background

    • url: ummm... the background image
  • text-indent

    • without *: applies to only block-level elements, table cells and inline blocks, since we are using -moz-inline-box, firebox will not use this
    • with *: IE does not support it correctly, so we set it back to 0
  • font

    • 0/0 Arial: this is to set the text to a very small size, there are some browsers that do not support this shorthand, but I can't remember which ones off hand.
  • color

    • rgba(255,255,255,0): this is a css3 spec and is only being supported by safari and firefox 3
  • vertical-align

    • bottom: this is required for block elements to keep them inline with text



The Small Print:
There are some thing to consider when doing the rollovers or image replacements in general; it is not 100% accessible, meaning, although screen readers will be able to pick it up, people that can see, but have poor vision will not be able to set the font any bigger then what you have in your image.

With that said, have fun with it. Any questions comments or concerns, feel free to drop a line.

Update 11/21/2007: Came across a really nice article about css sprites, very good read.

]]> http://benjaminsterling.com/accessible-and-search-engine-friendly-image-rollover-with-css-and-sprites/feed/ 2