JQuery-Focus

Now what comes to your mind when you hear the word Focus?? Some might say that it is got to do with directing our attention towards something. That’s fair enough. And you might be knowing that there was a film released last year with the same Name starring Will Smith!

Focus has go relevance not only in Hollywood or the Oxford Dictionary but also in JQuery as well.

Have you ever observed that while filling out a form, the input field gets highlighted once you place a cursor on it?? Looks appealing right? This is done with a mix of JQuery and CSS. And let me tell you that the code behind it is not too difficult at all.

We first use the “focus” action of JQuery in order to direct our attention to the fields of the form. And then we apply the css action of JQuery in order to add a color to it. Sound’s simple right?

The code would appear to be something like this-

$(document).ready(function(){

$(‘input’).focus(function(){

$(‘input’).css(‘outline-color’,’red’);

});

});

 

 

Advertisements

JQuery CDN Issue

 

Every programming language or a script requires a library in order  for the developer to experience all the the functions and features of the language. A library is a resource which has got lot of useful and important information which allows programs to execute properly.  All major programming languages require you to include the libraries before writing the program.

For Example in the C language-

# include <stdio.h>

 

In C++

 

# include <iostream>

 

JQuery (which itself is a library of the Javascript programming language) also requires a library in order for the JQuery code to function in the web browser. It can be either downloaded from the Internet or we can specify a url which would access that resource (CDN). Google is one of the hosting providers which hosts  JQuery libraries.

While working with JQuery you might have observed that sometimes the CDN fails to load. You might have used the latest JQuery CDN but still it does not work.

The main reason it does not work is because the JQuery file is linked before we place the JQuery CDN in the header section of the html file.

Something like this-

We are taking an Instance where we are using the JQuery libraries hosted by google and assuming that the JQuery file we have written is named as “script.js”

In the HTML File,

Capture

 

 

 

Which is wrong.

 

This would be the solution in order to avoid this problem.

Steps:

1.First place the JQuery CDN on the header section of the HTML file

2. Then use the script tag to link to your JQuery File.

 

Capture

And it works!!

JQuery-Hide Action

JQuery is a library of the JavaScript Programming Language.  It was introduced in order to make a website more dynamic. HTML and CSS which are the core languages for web development generate static content.

JQuery makes the website more fun and interactive for the end user. You can have buttons on the website which get highlighted or glow once the mouse is over them. It can also do animations, sliding panels  and many other things. In order to perform them, JQuery provides certain actions. The official motto of JQuery is to “Write Less Do More”. And this is exactly how JQuery works. With lesser number of statements, it can display a perceivable output.

There is a hide action in JQuery, which hides an element during an event. The event can be a time when you click on an element or hover over it. Today let’s see what happens when use a hide action with a click event.

Let’s suppose we have a  Blue Box

Capture

And we click the element. Then what is going to happen is, the box will disappear form the screen since we used the hide action on the click event. Let’s see how the code for this looks like.

$(document).ready(function(){

$(‘div’).click(function(){

$(‘div’).hide();

});

});

The above code basically means  that once the HTML document has loaded. And we click on the element, the concerned element disappears.