08 March 2013

jQuery Tutorial (Part 4) – Event Listeners



Today we’re going to kick it up a notch and really show where jQuery shines – events. If you followed the past tutorials, you should now have a fairly good understanding of the basic code structure of jQuery (and all the horrible curly braces that go with it), as well as how find elements of the DOM and some of things you can do to manipulate them. I also showed you how to access the developer console in Chrome and how you might use it to debug your jQuery code.


Events – among other uses – let you react to things that happen on the page and user interactions – clicking, scrolling, and all that fancy stuff.


What Is An Event Anyway?


For those new to programming that involves a graphical interface of some kind, events refer to any kind of interaction between the user and the application; or can be generated internally by some other process. Applications choose which events to “listen for”, and when that event is triggered, they can react in some way.


For example, tapping on your iPhone screen will generate a single “tap event” with an x,y coordinate of precisely where you tapped. If you tapped on a particular object, like a button, it’s likely that the button was listening for that event and will perform some action accordingly. If it was just a blank part of the interface, nothing was attached to the event and so nothing will happen.


Dragging your finger across the screen would generate another event, one which includes information about the start and end point of the drag movement, and perhaps the velocity. Events provide us with an easy way to react to things that happen.



Easy: Clicking


Perhaps the easiest event to listen for is the click event, fired whenever a user clicks on an element. This needn’t be a specific “button” – you can attach an event listener to anything on the screen, but as a web developer, you obviously need to make that intuitive. Creating a pseudo-button out of the letter a hidden within a paragraph of text is possible, but somewhat stupid.


The methods for attaching an event listener have changed significantly over the years as jQuery has developed, but this is the current accepted method, using on():



$(selector).on(event,action);

To listen for a “click” event on any elements with the class .clickme, and then log a message to the console containing the text of the element clicked on, you would do:



$(".clickme").on("click",function(){
console.log($(this).text());
});

You should be able to see that the action we’ve embedded here is an anonymous function which uses the this selector (which refers to whatever object jQuery is currently dealing with) – in this case, the thing that was clicked on. We then extract the text of that clicked object and log it to the console. Easy, right?


Stop The Default Action:


At some point, you’ll want to attach to something like a link or form submit button which usually does something else. In which case, it’s quite likely you don’t want that original action to be performed – instead, you want to do some fancy AJAX or special jQuery magic.


To prevent that default action from happening, we have a handy method called preventDefault. Obviously. Let’s see how that would work when dealing with a submit button for a form





$("#myForm").on("submit",function(event){
console.log(event);
event.preventDefault();
return false;
});


A few changes here – firstly, we’re attaching to the submit event instead of click. This is more appropriate when dealing with a form as the user might tab-space, hit enter, or hit a submit button – all of which would trigger the form’s default action. We’re also passing the event variable into the anonymous function, so we can refer to the event data. We’ve then used the event.preventDefault() in combination with return false to stop all the usual actions from completing.


In this case, it’s only logging the event to the console, but in reality you would probably have an AJAX handler here, which we’ll tackle in the next lesson.


Events Can Also Be Triggered By You


In the past two examples, we used the on method to listen to an event, but you can also manually trigger an event by calling it as a method instead. It’s difficult to see why you might use this to force a “click”, but makes more sense if we look at the focus event.


Focus is typically used with input fields to fire off a message when the user clicks in the box to enter text – an instructional message on the format to use, for instance. But you could also use it to force the user into the username field when the page has loaded – so they can immediately begin typing their login details.





$(document).ready(function(){
$('#username'.focus();
});


If you had also attached a focus event listener to that username field, it would also be triggered when you forced focus. Events can therefore be both triggered and listened for.



For now, practice by attaching to various events on the page – you can find a full listing of all the events available here – remember to use preventDefault if it’s a link or button, and see what output you get from the console about event data.


I’ll leave it there today as we near the end of this mini-series of jQuery tutorials. You should, by the end of it, be confident enough to throw some jQuery on your page and make it do something. Next week we’ll look at AJAX – an important part of the modern web that allows you to load and send requests in the background without interrupting the user.


As ever, feedback, questions, comments and problems welcome below, or post your questions over to our very own MakeUseOf Answers.


Image credit: Touchscreen via Shutterstock


The post jQuery Tutorial (Part 4) – Event Listeners appeared first on MakeUseOf.



Show the Number of Results When Using Google Search Tools



Google used to display the list of search tools in the left sidebar, below the list of specialized search engines. Now search tools are placed below the search box and use less space. Unfortunately, when you click "search tools" and select one of the features, Google no longer shows the approximate number of search results.






It might not seem obvious, but clicking the "Search tools" button again replaces Google's advanced search options with a line that includes the number of results and the time used by Google to generate the search results page. Clicking "Search tools" doesn't disable the advanced filters, you need to click "clear" to do that.






The number of search results is a very useful information because it shows if there's enough content for your query. If Google only returns 50-100 results, you may need to remove some of the keywords, fix some mistakes, disable some of the filters. It's sad to see that Google no longer displays the number of results in the mobile interface (for both smartphones and tablets) and you need to switch to the "classic" interface to find it.



Obviously, Google can't find the exact number of search results, so it only shows an approximation truncated to the first 3 significant digits, but even this imprecise number is useful.


Advanced Uses for Google's Site: Operator



You probably know that Google's site: operator lets you restrict results to a site or domain. Search for [site:cnn.com iran] to restrict the results for "Iran" to CNN's site, search for [site:googlesystem.blogspot.com gmail tips] to find Gmail tips from this blog. You can also use the site: operator for top-level domains and search for [site:fr debussy] or [site:edu ai].



Google's site: operator is a lot more powerful than that. You can leave out some components of the address and replace them with asterisks. For example, you can find results from addresses that match this pattern: maps.*.com. Unfortunately, Google doesn't show all the results that match the pattern.






You can also find results that have URLs which start with "news." like "news.cnet.com" or "news.discovery.com". Just search for [site:news.*].






What if you want to search Amazon's international sites? Instead of typing [site:amazon.com OR site:amazon.co.uk OR site:amazon.ca OR site:amazon.de OR site:amazon.fr], just search for [site:amazon.*].






Google's site: operator also works for directories. For example, you can find last year's posts about Gmail by searching for [site:googlesystem.blogspot.com/2012 gmail].



You can even enter URLs that include parameters and leave out the parameters. Here's a way to search the Google Maps help center: [site:support.google.com/maps/bin/answer.py inurl:"hl=en" 3d]. I've used the inurl: operator to restrict the results to English pages, but it's not necessary to do that.






How to restrict the results for [imap] to answers from Google's help centers? Search for: [site:support.google.com/*/answer imap].






These tricks work for image search, as well:









YouWave: Run Android On Windows [Paid]



CLICK HERE TO SEE FULL POST



Up until about a year ago, PC users had very limited options when it comes to running Android apps on Windows. Over the last few months, a couple of good applications have been released to install and run Android apps on Windows without having to install virtualization software. BlueStacks and WindowsAndroid are free programs available [...]

Windows System Control Center Adds Dozens Of Utility Tools To Your PC



Being a master of your system really means knowing what’s available to you under the hood and how to get to it. Nothing is truer when using Windows, as there are a lot of configurations available to you that can be unlocked through the registry or by other means. Windows 7 “God Mode” is a perfect example of what I’m talking about.


Sysinterals and NirSoft are just as heaven-sent, being two names that will resonate beautifully with Windows enthusiasts like myself. They put out some of the best alternative software that you’ll ever get your hands on, and I personally consider both suites to be huge contributors to the platform. Both have pumped out dozens of portable applications that truly unlock and polish certain elements of Windows. If you’re not familiar with any of their software, you need to be.


The program that I want to introduce you to today takes the power of Sysinternals and NirSoft and takes it a step further. Windows System Control Center takes managing those individual applications and makes it ridiculously easier.


Windows System Control Center


Windows System Control Center will work on any version of Windows past 2000 and comes available as a completely portable application. It allows you to install, update, and completely manage applications that you’d find in major system utility suites. The latest version focuses on the software made available by the Windows Sysinternals Suite and NirSoft Utilities.


Upon launching the application, you first need to fix your options. It’s great for them to immediately prompt the user with these options, because I’d almost always recommend that one of the first things you do with an application is look at the options and settings.



The General tab includes a lot of basic and aesthetic settings, as you can see above.



The Software tab is the most significant of the options, where you’re able to tweak the local storage path and live URL of both application suites. You’re also able to tick which pieces of Windows you’d like Windows System Control Center to be able to manage.


After Windows System Control Center has been tweaked to your liking, you will then have a massive list of applications available for you to download.



Be advised that every one of these applications is portable, and the Install button does nothing more than automatically extract each application from the archive that it’s in.



As the applications begin to “install,” you can check the folder that you set them to download to and see a heap of brand new executables.



Overall, Windows System Control Center is an awesome layer over two software suites that many Windows fans can’t live without. I’ve actually seen a Sysinternals batch script that gets their applications updated by command line, and NirLauncher is doing a great job of keeping that suite together as a group, but as of right now I definitely see Windows System Control Center as the best way to keep your applications as recent as possible. It’s a great management tool for these two software suites.


After handling downloads and updates, the main window of Windows System Control Center shows your entire library, by category, in the left pane and the applications that belong to each category in the right pane.



Windows System Control Center even offers its own console window for advanced users who are interesting in playing with the applications via command line.



Other than these small features, Windows System Control Center simply does its job of keeping your software fresh and easy to access.


If you’ve never used software from Systinternals or NirSoft, here’s a quick recap of each:


Windows Sysinternals


Sysinternals was actually created by the people at Microsoft to help power users like you and I get the most of their PC. Sysinternals software includes names like Autoruns, Process Monitor, and Process Explorer. Most of their software is very technical.


NirSoft Utilities


NirSoft is well-known for lightweight, niche applications of all sorts. Names like Mail PassView, CurrPorts, AdapterWatch, SiteShoter, and ShellExView are some of the most popular. NirSoft does a great job of pushing out applications with features that make your Windows experience much easier. While Sysinternals improves parts of Windows that already exist, NirSoft adds completely new functionality with many of their applications.


By itself, Windows System Control Center isn’t much. However, if you’re someone who already uses these two application suites or someone who is trying to make the most out of their system, Windows System Control Center is your way to constantly stay up-to-date with a massive amount of some of the best third-party software on the web.


Let us know what you think of Windows System Control Center, Sysinternals, and NirSoft in the comments.


The post Windows System Control Center Adds Dozens Of Utility Tools To Your PC appeared first on MakeUseOf.



RedditToGo Offers An Intuitive Reddit Experience For Windows 8



reddit for windows 8Browse Reddit intuitively, with columns. Reddit To Go is a Windows 8 app that opens every link you click in a column, allowing you to quickly browse from one story to the next. You can even see an open link right next to Reddit’s comments about it.


One of the most common criticisms of Reddit is that it’s confusing. Go to the site and you see a list of links; click those links and you’re taken away from Reddit. If you want to join the conversation around a link, you need to find the “Comments” button below the link. It’s simple enough for those who’ve been using the middle mouse button to open new links in a background tab since 2004, but for everyone else it’s understandably confusing.


Other apps try to help. Reditr, for Mac, Linux and Windows, embeds content for quick browsing. RedditToGo attempts to be a little more straight forward than that (spectacular) advanced tool, and I think it does a good job of making Reddit simpler.


Columns Make Reddit Better


Start up RedditToGo and you’ll be asked to sign in. Do so and you’ll be presented with your subreddits:


reddit for windows 8


Tap any of these to start browsing, or click the “Front Page” button to see the best of the subreddits you’ve collected. You can up- and down-vote articles, as usual. Whatever you’ll do, you’ll be presented with the usual collection of links. Tap one and you’ll be taken to the page, with the collection of links on the left:


reddit windows 8 app


You can quickly jump from one article to another, because the list of articles are on the right. Embedded support for a service like Readability would be nice, but isn’t offered – perhaps in a future update.


Tap the word “comments” while an article is open and you’ll see the comments to the right of the article – so you can see the story and check out what the hivemind has to say about it.


reddit windows 8 app


Of course, “self” posts on Reddit don’t have an article: they’re mostly just to start a conversation. Tap one of these posts and you’ll be take directly to the comments:


reddit windows 8 app


You can up- and down-vote comments, as usual, by hitting the arrows. You can leave your own comments as well, which will be up- and down-voted depending on whether or not you’re cool.


Configuration Options


There are a few notable settings here. The NSFW filter can block questionable material (ie, nudity) so set that according to your tastes. You can also set the number of comments/articles that are loaded when you first tap a subreddit or link:


reddit windows 8


If you’re using a Windows RT/8 tablet, congratulations: there aren’t many people with your bravery/curiosity/tolerance for wasted storage space. You’ll be happy to know that this app supports gestures:


reddit windows 8


I haven’t tested them myself, because I lack the aforementioned bravery/curiosity/tolerance for wasted space.


Finally, if you’re the sort of person who values the ability to slightly change the color scheme of the apps you’re using, you’re in luck – RedditToGo allows you to do just that.


reddit for windows 8


Other Reddit Clients


Like the idea, but don’t have access to Windows 8? There are Reddit clients for most platforms out there. Be sure to check out the previously mentioned Reditr, which works on all versions of Windows as well as OS X and Linux.


If you love your portable Apple device, check out Alien Blue, which James Bruce calls the best Reddit app for iOS. Android uses also have options, including the specatular Reddit Is Fun.


None of these are exactly like RedditToGo, but they’re all great in their own way. Check them out.


Conclusion


Is this app the prettiest one out there for Windows? Not really. It is, however, highly functional: after using it for a couple of days I have to say that my time-wasting has become much more efficient. That’s probably dangerous in and of itself, but whatever.


I really enjoy seeing the article list, articles and comments all from within one interface. There are other Reddit apps in the Windows 8 Store, but this one is the highest rated and (in my opinion) the most functional. Disagree? Make your recommendations in the comments below.


Of course, no app alone is going to make Reddit simple to use: you need to read the rules on every subreddit and lurk long enough to learn the culture. Our own Dave, a long-time Redditor, wrote Best of the Web, Delivered: The Reddit Manual to help guide anyone through the process of learning to use Reddit. Check it out if you’re confused by the entire premise of Reddit.


The post RedditToGo Offers An Intuitive Reddit Experience For Windows 8 appeared first on MakeUseOf.