What we do to achieve this is whenever a scroll event is fired, check if we have reached the bottom of the page, and if we are at the bottom, call our ajax function to load the content.
$(document).scroll(function(){
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
// Reached page bottom. Call the ajax function or any other foo here.
}
});
.scroll() is fired every time the user scrolls the page.
$(window).scrollTop() returns the number of pixels hidden ‘above’ when the page is scrolled.
$(window).height() gives the height of the window. Same as window.innerHeight
$(document).height() gives the total height of the page.
Hey, today is 31st December. So i guess this is my last post of the century, or watever. Here is a little treat for ya to geek with friends.
Just copy paste the below code into your browser’s url bar and hit enter.
javascript:function checkLove(love){if (love)alert("He he he, cool!");else{if(love != undefined) alert("Sorry, you must love me.");checkLove(confirm("Do you love me?"));}}checkLove();
Hi folks, today we are going to write a simple, yet useful jQuery plugin. The plugin we write is named The jQuery Placeholder plugin.
The problem:- A very useful feature that was introduced in HTML5 was the ‘placeholder’ attribute [W3C Spec] for forms. The placeholder attribute lets us specify a default value for textfields (and other form elements). The default value/placeholder text will be shown if the user hasn’t entered a value in the textfield. Sounds handy right? But the problem is that as HTML 5 is not widely supported, only few browsers support the placeholder attribute currently. (As you could imagine, Internet Explorer doesn’t support, yet.)
Our goal:- Simulate the placeholder effect in older browsers that don’t support HTML5 placeholders and if the browser supports placeholder attribute, then fall back and use the native support instead.
HTML5 Placeholder Effect
And the fun part:- We are writing a jQuery plugin to do that đ
In this post, we are going to implement the basic functionality and later we will look at progressively enhancing our plugin.
You can write your plugin code inside a text file and save it as file-name.js. But try sticking to the convention ‘jquery.pluginName.js’ when naming your plugin file. So we are going to save our placeholder plugin code in a file known as jquery.placeholder.js
Step 1: Laying The Foundation
Let us lay the foundation of our jQuery plugin. Once the foundation is laid, we can build our plugin over it easily.
Every jQuery plugin is added as a property of the jQuery.fn object. The name of the property is the name of our plugin.
$.fn.placeholder = function() {
// plugin code goes here
}
If you didn’t know already, $ is a shortcut to the jQuery object. In your script it is the same to use ‘jQuery‘ or just the ‘$’ sign. But $ sign might collide with other code or libraries used in the same page, so, as the jQuery Plugin authoring documentation recommends, it is better to use the name ‘jQuery‘ itself or explicitly assign the jQuery object to the $ symbol within the context of our plugin code as follows:-
That was it. We have laid the foundation. Now within out plugin function, $ will always refer to the jQuery object.
Now all we need to do is to add our plugin code to the foundation. You can invoke your plugin code on any element in your web page by calling the plugin method like this:-
<script type="text/javascript">
$(document).ready(function() { $('input').placeholder(); });
/* Only $('input').placeholder() is needed to invoke your plugin.
But leaving out $(document).ready() might give you unexpected results. */
</script>
Step 2: Writing the functional code of our plugin
I have divided the functional code into 3 parts:-
Step 2.1 – Show the placeholder text inside the textbox when the page is loaded
// Getting the value specified for the currently selected elements 'placeholder' attribute
var placeholderText = this.attr('placeholder');
if (this.val() == '') {
this.val(placeholderText);
}
The code is self explanatory. We fetch the placeholder text specified for the selected element and assign it to the variable placeholderText. For this we use the .attr() method, which returns the value of the specified attribute.
Then we are checking whether the text field is empty. If the text field is empty, set the previously fetched placeholder text as the value of the element. For both of this (checking and setting), we are using the jQuery method .val() which can get or set the ‘value’ property of any element that has a ‘value’ attribute.
Oh by the way, have you noticed that we are using just this instead of the usual $(this) that we usually use in our code. This is because, inside the immediate scope plugin function this itself refers to the jQuery object of the element it is invoked on. No need to wrap this inside $(). Don’t worry if it sounds fishy. We will soon see when to use $(this) instead of this.
Now the following text field will show the text ‘Name’ in it when the page is loaded.
Our textbox will appear like this in older browsers.
Step 2.2 – Hide the default (placeholder) text when the user clicks inside the textbox
Now when somebody clicks inside the textbox, we need the placeholder text to be hidden. The following code will do that.
this.click(function() {
// when someone clicks inside the text field, check if the user had
// entered anything inside the text box OR changed the default text.
// If the user hadn't entered anything, clear the textbox.
if ($(this).val() == placeholderText) {
$(this).val('');
}
});
You might have noticed that now we are using $(this) instead of just this. This is because, when inside callback functions, just using this will not refer to the jQuery object, we have to use $(this) to refer to the jQuery object. In this case we are using $(this) inside the callback function of the click method. (SPOILER: When a function is passed as an argument to another function, the passed function is called the callback function.)
Step 2.3 – Restore the placeholder text when the user clicks outside the textbox
Next we need to restore the placeholder text when the user clicks outside of the textbox (a.k.a when the textbox loses focus or is blurred, when said in technical terms, duh!)
this.blur(function() {
// If the textbox is empty, restore the placeholder text
if ($(this).val() == '') {
$(this).val(placeholderText);
}
});
That was it!! Now your plugin will show placeholder text even in older browsers (read Internet Explorer and the sort). But modern browsers like Firefox (3.7+) and Chrome/Safari (4.0+) supports HTML5 placeholder attribute natively. So in such cases, it is better to make our plugin code fall back and use the browser’s native placeholder support instead.
Step 3: If the browser natively supports HTML5 placeholder attribute, use it instead of our plugin code.
Ok, this step is easy.
var input = document.createElement('input');
if ('placeholder' in input) {
return this;
}
Add the above code as the first thing inside your plugin foundation. The code checks if the browser supports placeholder attribute for ‘input’ elements (<input type=” ” />). If the browser supports placeholder, we immediately exit from the placeholder function using the return statement. Note that we are returning this instead of just return; or return true; or anything like that. We did it because jQuery recommends we always return this when exiting our plugin code (This is to maintain a cool feature of jQuery known as chainability). So dont forget to add a return this; at the end of our plugin code too.
What is Next?
We have implemented a plugin with the bare minimum features. (still not bad, okay!). Our plugin has limitations. For example, it won’t work as we intend on password fields or won’t work at all in textareas. In the next post, we will see how we can enhance our plugin to support password fields and textareas and also add some more coolness to our already awesome plugin :).
Please let me know your questions and suggestions in the comment form below.
Also, if you like the post, please share it with your friends. If you don’t, just share it in Facebook okay ;), so the whole world will know how bad I write.
Here is a quick tip for ya. To run multiple instances of Firefox at the same time, do the following.
Linux
1. Run this command in Command Terminal : firefox -p -no-remote
2. The Firefox profile manager will open and ask you to choose the profile you want to use. If you already have more than 1 profile, click on the “Create Profile” button to create a new profile and once the new profile is created, select it and click “Start Firefox”
3. That’s all.
Windows
1. Open run prompt by pressing Windows key + R
2. Run this command in run : firefox.exe -P -no-remote (NB: -P is in CAPS)
3. The Firefox profile manager will open and ask you to choose the profile you want to use. If you already have more than 1 profile, click on the “Create Profile” button to create a new profile and once the new profile is created, select it and click “Start Firefox”
4. That’s all.
You can also edit the Firefox short cut in your desktop, quick launch (Windows) or panel (Linux) and add the text -p -no-remote to it, so that each time you open Firefox it will ask you to choose the profile you want to load.
What is this good for?
1. You can sign into multiple Gmail accounts (or other accounts for that matter) at the same time (One in each Firefox instance)
2. You can run multiple versions of Firefox at the same time. Just create a separate profile for each version and choose the correct profile when opening Firefox.
Did it solve a different problem for you? Let others know through the comments below.
Complete anonymity is not possible on the internet. Tor is the next best thing available. Tor is one of the best privacy softwares available. Tor is recommended by EFF, who is the biggest advocate of online privacy. TorButton will make it easy to make firefox use Tor. Though it is the best for privacy online, configuring Tor may be a bit of a pain for first timers. If you install Tor, it will install the TorButton Firefox addon also. To download Tor, visit the Tor website.
If Tor is the king of privacy, then NoScript is the king of security. NoScript protects you by blocking unauthorized sites from running scripts and programs in your computer. NoScript offers protection against cross site scripting attacks, router hacking, click jacking etc. NoScript is very much recommended, no matter you are a newbie or an experienced user.
WOT provides you information regarding websites’ trustworthiness based on ratings provided by a global community of users. Users rate websites based on their experiences, so you can know if you can trust a site before entering it. WOT will warn you about sites with low reputation (read it as dangerous websites) and hence will protect you from scams, phishing sites etc
Proxies are the easiest means to get basic anonymity on the web. By using a proxy, you can hide your IP address and thereby your exact physical location from the websites you visit. FoxyProxy will make firefox access sites through proxies, hence hiding information about you. FoxyProxy has advanced features and newbies may find it a lil complex. In that case, you can use Proxilla, which is relatively easy to use.
The tracking ability of normal cookies is low. So internet marketing and research groups have come up with a more persistent way to track users – Flash Cookies (aka LSO‘s). Flash cookies offer more storage – 100 kb, as opposed to the 4 kb offered by normal cookies – and can’t be removed as easily as normal cookies. An alarmingly large number of websites now use flash cookies to track users. BetterPrivacy can protect you from flash cookies.
It is not safe to use the same password with multiple sites. But keeping track of different complex passwords for different sites is difficult. Here is where password managers come to rescue us. Password managers can store login information securely and can make it easily and securely accessible for us. Roboform password manager offers everything you need – easy access, encrypted storage, form filling etc.
Secure Login is another powerful password manager offering lot of useful features and stuff.
Enigform protects our data and traffic by digitally signing our HTTP requests (including AJAX calls). The technique used is pretty impressive. It brings OpenPGP signing and encryption to HTTP traffic. Please keep in mind that Enigform can work its magic only if the website you are visiting runs on a mod_openpgp enabled Apache web server.
Are you logged into your email account and some other important websites and need to open a suspicious looking site. Doing that may compromise the your important accounts. Then CookieSwap is for you. This addon will let you switch your firefox’s profile, hence hiding the active cookies. This addon can also be used for signing into multiple gmail/yahoo accounts at the same time. This is a very useful addon which I previously reviewed here among 25 Incredibly Useful and Cool Firefox Addons for Geeks and Web Developers.
Every single website you visit is tracking you. They are spying you to know your personal details such as browsing habits, interests and even sexual orientation. With Ghostery, you can see who is tracking can learn more about them, such as their privacy policy etc. Ghostery also makes it easy to block tracking codes and cookies from sites of your choice.
This addon can close the current tab and forget everything about the visit. Close’n forget will delete the cookies, history and every information about that site. (This addon MAY not clear all the data about your visit. Please check if it is working as it should before you try something serious)
Now we come across shortened links every day in our life. Almost every link posted in twitter and email newsletters are now cloaked by some sort of a URL shortening service. It is really REALLY important to know where a URL is taking you before you click it. One normal looking wrong link can devastate you. The LongURL addon can find where shortened links take you. So be sure before you clink. (This addon don’t work with the latest version of firefox yet)
People always just love to watch over our shoulders and read the titles of our opened tabs. TabRenamizer is the solution against such prying eyes. With one click, you can rename your tab titles to something more.. serene.
Fission is not exactly a security or privacy addon. But it makes it easy for us to spot the domain name from the URL. Scammes and phishers (bad people) use URL’s closely matching to genuine ones to carry our phishing attacks. They may create a fake gmail login page at some location like www.google.com-accountLogin.some-domain-name.com. Such addresses are easy and inexpensive to create. Unsuspecting users may read only the www.google.com in front of the URL and type in their username and password thinking that it is the legitimate site.
The Fission addon can highlight the actual root domain, making it easy to recognize fake URL’s. See below how the fake URL is easily spottable with Fission enabled.
So have you used any of these addons? Do you know or recommend any other security/privacy addon? Please share your knowledge with others through the comments.
HTTPS Everywhere is a useful addon developed by the Electronic Frontier Foundation, the leading digital privacy advocacy group. This addon will enable secure connection when you connect to popular websites (if the sites actually support it). A version of this addon for Google Chrome browser also is available at the above link.
This is an amazing video that points out the ingredients to succeed in Web 2.0 business. The song itself is very interesting and I felt like humming along with it. If you have the slightest amount of geekness in you, you will LOVE this. Let me know what you think through the comments.
Hey guys, a lot of people (well, not so much đ ) have asked me what Firefox addons am I using. Here Iâm compiling a list of my 25 favorite Firefox addons. I cannot even think of surviving a day without most of them.
This is the first addon I always install when I freshly installs Firefox. AdBlock blocks annoying advertisements from websites and emails. Some people says blocking advertisements in websites is un-ethical and thereby we are attacking the ability of website owners to earn revenue from their efforts. Well, it is another whole talk, so itâs up to you. (Anyway I love it)
An incredible MUST HAVE for all web developers. This addon is like a Swiss knife and has a lot of functions. Believe me, if you have never used it before, you will thank me once you install it and feel it. It enables you to manage cookies, images, java, javascript.. No no, I cannot even list them. Try yourself.
Another incredible one. This one is a little difficult to get used to. But once you get used to it, you will bow to it. Incredible tool for debugging your layout, analyzing and optimizing your sites performance etc etc.
Like firebug, you may not like this addon on first bite, but if you are inclined to learning new stuff and taking notes, you will never again part with this addon. Very easy to save web pages, links and stuff. Every student who uses the internet for academic purposes in any way MUST have this. Once I downgraded my Firefox to an older version, just because Zotero was not working in the newer version of Firefox. (Now it is updated and works with the latest releases till date)
This is a simple but very useful addon. If a page fails to load, this addon will keep trying until the page is loaded. Very very useful if you have a slow or not-so-good internet connection. This one was my fav with AdBlock, but this addon is not compatible with Firefox 3.6. Iâm just hoping the author will update the addon soon.
Firesomething is not very useful, like the addons we discussed above. But I keep it for mere geek pleasure. This addon will let you change the name of your Mozilla Firefox to something else you like. It also has a set of preset random names. Right now, as of we speaking, the title of my Firefox reads â Mozilla SulpherMonkey. Isnât that hilarious? (watever, I love it). You can also change the Firefox logo in the About box.
Another pretty useful addon for web developers. Useful for analyzing your websiteâs performance based on several criteria. The best part is, it is developed by Yahoo!
A cool geeky addon. This addon can be used to fake your browserâs user agent. Sâpose if a website is allowing access to only Internet Explorer users, then this addon can help you. I have narrated another cool use of this addon in my previous post.
FEBE Stands for Firefox Environment Backup Extension. With this addon, you can all your addons, preferences, saved passwords and a lot more. Also you can restore your backups at a later time. I recommend this addon very much. I owe so much to this addon for saving me a lot of time, work and data. (You can also export all your installed addons as a single installable addon)
Another super-geeky addon. This addon will give different colors to different tabs. Will look really attractive if you work with a lot of tabs open. (After installing this addon, I even thought the default tab color is boring)
This tab will enable you to have and easily manage multiple profile in Firefox. Has other uses too. Suppose you have 50 tabs open in your browser and you have logged in you your GMail account. payPal account, blog and a few other sites. Suppose if you want to go out for a quick bite or something. It wonât be wise to leave the browser open and leave the computer if you are logged into many important site. And if you close all the tabs of just log out of those sites, it will be a chore to log back into each one of them when you come back. In that case use this addon and just switch to a different profile when you go out and you will be automatically logged out of all the sites. When you come back, just switch back to the previous profile, and you are logged in.
This addon lets us view the source of web pages in an easy to understand manner. Different regions â head, body, divs etc are given in different, easily distinguishable colors. Handy. (No, it doesnât highlight syntax)
ColorZilla is very useful for web designers. It comes with a color picker (eye dropper), with which you can find the hexadecimal color code of any element in a page.
Total validator is a one-stop all-in-one validator comprising a HTML validator, an accessibility validator, a spelling validator, a broken links validator, and the ability to take screenshots with different browsers to see what your web pages really look like. It is very easy to use too. The only problem is that it needs an internet connection to function.
This is an incredibly useful addon. It can be used to change the title and favicon of tabs opened in your Firefox window. You can rename all tabs with a shortcut. Comes in totally handy if you want to quickly hide what sites you have opened.
Locationbar 2 will can segment the url in your address bar for easier navigation to other parts of the same site. I have described a use of this addon in another post â 7 Points to Stay safe in the Social Web.
A cool geeky addon with which you can easily type in 1337, ROT13, Hexadecimal, Morse, Binary etc (and more) and type and encrypt text using DES and AES. This one is incredibly geeky and can be used to surprise your friends by quickly type in reverse or in 1337 (h4x0r) when you are chatting.
ScreenGrab enables you to quickly takes screenshots of web pages. The best feature is that we can even decide whether to take the screenshot of only the visible portion or whether the whole page.
24. <
a href=”https://addons.mozilla.org/en-US/firefox/addon/4664″>TwitterBar
Post tweets directly from your browser. Minimal user interface and clean.
Step 2: Switched my user agent to the ‘iPhone user agentâ
Step 3: Opened GMail as normal.
(Sorry if you were expecting more. but thatâs all)
Is there anything useful in this?
Yes. Besides just curiosity, this technique of switching user-agents are sometimes useful too.
How is it useful?
A lot of websites are optimized for mobile use. So if you visit them using a mobile user-agent, you will be presented with a low-weight version of the site. This is very useful when you are using a slow connection (not to mention if your computer is connected to the net using your phoneâs GPRS)
How much will I save?
Hmm, that depends. Just before writing this post, I accessed Gmail normally (without changing the user-agent). I measured the page load size â it was more than 2 Mb (WTF)
But when I accessed it with iPhone and Android user-agents, the page loaded in around 150 Kb.
Here see some more of the screenshots I captured with iPhone user-agent.
How many of those people you know doesnât have a Facebook account, or an Orkut or MySpace account? I wonât be surprised if you say your 90yr old grandmother is tweeting or your 3yr old brother is playing mafia wars in Facebook đ With the ever increasing participation of people in social networking sites, the more vulnerable their security is being. As this Mashable post says, a guy named Israel Hyman posted this status message in his twitter account saying heâs enjoying his excursion to Kansas city. Later, he returned home to see that his house had been burglarized.
Ok, now let me tell you how to stay (relatively) safe on the social web.
1. Use Strong Passwords
This is the most basic rule. A complex password may be difficult to remember, but it is worth it, believe me. If you know your dadâs high school sweetheartâs name, try it as password in his mail account or Facebook account. You have good chances. Personally my mother still uses my dadâs nickname as her Gmail password. Using simple, easily guessable passwords is most common in less tech savvy people, like your parents, uncles or high school principal. Recently, a social media website called TeensInTech was hacked and a lot of confidential information were compromised. Later after investigating the issue, the company said that their easily guessable password is what gave them in.
2. Avoid easily guessable Security Questions.
Almost all websites including social networking sites rely on security questions for the purpose of retrieving account access incase if password is forgotten. Using easy to guess security questions is a more common scenario than that of using simple passwords. There was this guy in my college I had a grudge against. I found out his email id from his Orkut profile page. It was a Gmail account. I tried the âforgot passwordâ option in Gmail. I was presented with the security question he had set â âWhat is my college?â đ You guess what happened next. There was another guy whose security question was âWhat is my country?â. I searched for his name in Google and found that most of the results were related to brazil. So I could easily guess that he was Brazilian. Even if that is not the case, any stupid can see that there are less than 300 countries in the world and it is only a matter of time before guessing the correct one.
Avoid questions like these:
My motherâs maiden name? â your relatives may know that.
What is my pet? â Your neighbors may know that.
My first teacher? â Some of your friends may know that.
Where did I first meet my boyfriend/spouse? â At least your boyfriend knows that đ
There are loads more. Besides these guessable questions, avoid questions which can have only a limited set of answers, like these:
Which month am I born in? â It is only a matter of trying the 12 possibilities.
My favorite flavor of ice cream?- It is more than easy to guess, unless you are some weird Eskimo chef đ
3. Share less / Share wisely
The main agenda of social networking sites is to make you feel like sharing the most. These sites will make you think that it is a good thing to share everything. You will be even given option to marks some of these information as âprivateâ, so that only those in your friends list will be able to see it. Believe me, you can trust no one. You wonât believe if I tell you the number of guys who have asked me to crack their girlfriendsâ mail id. I regret to say that I once cracked one of my best friendâs email account, just for fun. I felt terrible after doing so, so I confessed â after a few months!
Your personal information like zip code/postal code, mobile number, birthday etc can be used to retrieve your accounts if forget your password. So it is very important to to share wisely.
Try not to share the following information in social networking sites:
zip code
address/exact location
email address
mobile number
birthday
And other similar information.
4. Add people only you thoroughly know as your friends
Increasing our friends is one of the thing social networking sites have been doing all these days. Even 5th grade kids seem to have 999 friends. To increase our connections, these sites present several options â importing email contacts, friend suggestions etc. It is not rare getting friend requests from people we hardly know. Most of the time, we accept all the requests, just because we donât want to say no, and appear to an anti-social jerk. Sometimes you get friend requests from total strangers, and you will accept them just because he is from your state or district. Donât Do That.
There is this new kind of attack method crackers/hackers are using, called Social Engineering, where hackers gather your personal information and use it to access your online accounts, reset passwords etc. So as I said, when you get a friend request, examine his profile thoroughly and accept the request only if you are fully satisfied. Never accept the request if you have at least a lil bit doubt left.
No, itâs not done with yet.
Even if the friend request is from a close friend or a person you know very well, there is a good chance that you are being manipulated. It is easy for a hacker to create a copy of one of your friendâs profile and send the request. So when you get a friendâs request, first check whether heâs already in your friends list. If you already have the same friend in your list, bet one of them is fraud. If possible, call the friend and ask him whether he just send you a friend request.
5. Do not Over-Tweet.
Twitter is the most trendy social web service now. Every cat, cow and corporation now has twitter account. When it comes to posting status updates in twitter, people seem to think that it is okay to post anything. And they post information which wouldâve been kept confidential otherwise.
Know your audience (followers)
If you plan to tweet about utterly personal things, it is better to keep your tweets private. If you set your tweets to be private, your status updates wonât appear in the public timeline as you post them and will not be searchable. If your friend or brother wants to follow you, you will be asked to approve first and then only they will start getting your tweets.
Even if you are just comfortable with keeping your tweets public and wants to keep them so, then it is okay, but keep an eye on what you are posting.
6. Use the address bar to visit the site.
Trust the address bar.
Do not trust links.You may receive emails, saying âyou have one friend request, click this link to acceptâ or anything like that which can be extremely convincing. Do not click on links you receive in email to log into your social networking sites. These links may lead to bogus log in pages that may exactly look like the original login page. And once you enter your username and password into it, hoping to log into the original site, rest in peace.
Bu
t if you want to log into your Facebook account or Twitter account, use your browserâs address bar to type in the address of the site. Also before entering your login details in the site, make sure the address in the url is Facebook itself. Phishers (hackers) can employ addresses similar to the original site. So it is good to double check the address. For instance, I can create a fake Facebook login page in the address www.facebook.com.login.devildesigns.net. The address looks like a genuine one (www.facebook.com) in first look. But it is actually a sub-domain, which anyone can easily create. Only careful look can make out the difference. Tip: There is this Firefox addon which highlights the original root domain. See the screenshot below.
You can see the root domain (mozilla.com) is highlighted.
7. ..And finally, Trust No One.
Just keep in mind that everyone you meet online has a good chance of being a malicious user. Trust no one (even if heâs claiming to be ur dad. no no, uncle. okay?). The world wide web is a magical world where anyone can be everyone and everywhere. One can easily disguise as someone else. When next time you get a tempting friend request from a hot young lady, just keep in mind that probably it is some fat, balding guy with his âŚhâŚdâŚhangin s⌠e ⌠w c (guess it is enough đ )
Let me know your opinions/ideas through the comments.
