jQuery Pills VII – Selectors Resources List

In my opinion there is nothing more important in jQuery than knowing how to use selectors. It’s essential, we are going to lose a lot of time if we don’t use them in an right an efficient way.

If we are already fluent with CSS selectors everything is going to be easier, but it’s also true that being fluent it’s not easy to achieve and that we can’t pretend to explain everything in a single post. Therefore, our target in this post is to collect a list of interesting link related with jQuery selectors.

Links with references about selectors

Tools for practicing with jQuery selectors

VídeoTutoriales on jQuery selectors

Ans that’s all. In the next post we will play with new HTML5 elments like the sliders.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

jQuery Pills VI – Context Menu

In the previous chapter we learnt, in a broad way and with two examples, how to treat keyboard and mouse event. Today we are going on with this topic..

One of the most common features in wep apps is the use of conext menus when we click in the mouse’s right button. It’s not that complicated but it can be tricky as the browsers also have their own context menu:

See the Pen jQuery (Capturing mouse right click but showing browser’s context menu) by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

We could think that ( as we are treating code 3 and  this code is reserved for mouse’s right button ) with this code our context menu is going to be shown but, by default, the browser’s context menu prevails. In order to avoid that behavior we can do the following (there are many other ways):

 

See the Pen jQuery (How to show a context menu in the right way) by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

The keys are:

  • Handling contextmenu instad of click
  • Write the code return false to avoid the browrser to treat the event ( it would be the same using both event.prevendefault() and  event.stopPropagation() )

And that’s all maybe a little bit tricky but so simple. In the post we are going to review jQuery Selectors on of the most important things if you want to be fluent in this technology.

 

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

jQuery Pills V – The event Object

The main point in using jQuery or another similar library is to be able to transform our,static by default  websites, in living and dynamic entities. In order to achieve that we must capture and handle events.

The list of events we can capture is long and can be found here, and for capturing them we can choose between two ways:

Note: name_of_event must be replaced by an specific event name.

Sometimes, in addition to knowing the type of event, we will need more info. This info is held in the event object that is passed as a parameter to the anonymous callback function that is executed once the event is captured. This event object contains a lot of useful and important information (the full reference can be found here) like:

  • event.target : jQuery object where the event took place.
  • event.type: Type of the event
  • event.timeStamp: Information about the moment where the event took place.
  • event.which: Key or button used in keyboard or mouse events.
  • event.pageX: X offset, within the browser’s screen, where the event happened.
  • event.PageY: Y offset, within the browser’s screen, where the event happened. The origin of coordinates, point (0,0) is on the upper left corner of the browser

Let’s see how to use this information with two different examples; the first one will print on the screen the current position of the mouse pointer and the second one would allow use to move a div through the screen using some keys:

Let’s go with the first one, this time using codepen for showing the example working. The full code can be downloaded here:

See the Pen Mouse Movement by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

And the second example; moving a square through the screen using (s,z,x and c keys)

See the Pen Capturing Key events with jQuery and moving a div by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

And that’s all for the moment, in the next article we will explain how to display a context menu in our HTML webpage.

 

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

jQuery Pills IV – Three level nested menu

Fourth chapter on the jQuery serie.A very common usecase, a nested menu with three levels. The first level is horizontal, the second vertical and the last one is also showed in an horizontal way. Exactly as the image below:

nested_menus

The full code can be downloaded here aquí:

The HTML tree is very simple:

The CSS stylesheed

And the most importan part, the script defining the behavior:

That’s all. On the next chapter we will be working with event object properties.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

jQuery Pill III – Vertical Accordion

Here it is the third post on the jQuery Pills serie. Today we are going to create a vertical accordion, something similar to the image we can see below. Our target is to expand the section when the section’s header is clicked and collapse the other sections’ content at the same time:

vertical_accordion

The full code can be downloaded here.

The HTML code is very simple:

The corresponding DOM tree, very useful to know if we are going to use jQuery is like that:

dom_accordion

The CSS stylesheet:

And now the most importante part, the jQuery Script:

And that’s all. The next post ” A nested menu”.

 

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

jQuery Pills II – Sliding SideBar

Let’s move on with the second post in the jQuery Pills serie. In this post we are going to build the typical sliding sidebar. The full code of the example can be dowloaded here.

The HTML code, as the reste of the page is empty, is quite simple.

The position, the borders, the size and the color as set using CSS. It’s quite a simple stylesheet.

Once everything it’s at their place we can start to use  jQuery for modifying the website and get interaction. The script is just before body closing tag:

And that’s all. In the next post we will code an “Accordion” effect.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

jQuery Pills I – Show an image description when enter with the mouse inside it

I love  jQuery, It’s powerful, easy and having a lot of selectors in common with CSS it’s faster to learn if you have a previous knowledge of HTML & CSS.

That’s why I teach it during my MarkUp Languages course. With a little theory and using  jQuery we get straight to the point creating examples as practical as possible.

With this post I’m starting a serie of jQuery practical examples on the web. For these examples I have template as an starting point with jQuery correctly referenced and loaded. You can find this template here.

For this first post we are going to code an example where a long description of an image will be shown (partially overlapped with the image ) when the mouse it’s over it

The full example can be fully downloaded here and includes the following files:

  • index.html : The main webpage where we are going to use jQuery
  • styles. css: The webpage stylesheet used for positioning the different elements
  • js/jquery-3.1.1.min.js: the jQuery library (inside the js folder)
  • img/image.png: The image with the description to be shown once the mouse is over it.

The HTML is quite basic and inside the head we need to specify that we are going to use jQuery.

Within the body tag the HTML content

The CSS stylesheet is also simple:

And lastly the jQuery script:

And that’s all…a common effect so easy to be done. The next one an sliding side bar.

 

 

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Solving Wifi Problems when updating to Ubuntu 16.04

It’s a long story but I will try to be brief…after updating to Ubuntu 16.04 from Ubuntu 14.04 I started to suffer random connectivity problems with unknown root causes.

I review a lot forums and I tried a lot of different workarounds but, at then end, the solution was to change to WICD from the default newtwork manager.No problem since then.

The deatiled instructions can be found here:

https://help.ubuntu.com/community/WICD

Sumarizing….

Hope to be useful.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Types of Joins in the relational Model (MySQL)

JOIN operation is a main concept in the relational model. If you don’t REALLY understand how it works, using this kind of databases is going to be difficult. If you’re looking for a simple definition “a join is a combination of tables that  links common information”.

But threre’s a problem, there are several join types each one with a different meaning. To make thing easier we’re going to focus the post  on MySQL. Other DBMS (DataBase Management Systems) might differ slightly so we’ll need to review documentation.

We’re going to  use this model:

Model Relacional - Relación 1:N

Relational Model – 1:N (One to Many) Relation

The previous image show a One to Many relation between clients and vehicles. Each client owns one or more vechiles and vehicles can be owned by one or zero client (suppose it comes from the scrap)

Table’s initial content:

Contenido inicial de la tabla clientes.

Clients

As we see, 9 clients from“00001” to “00010” (“00007” not included está)

Contenido inicial de la tabla vehículos.

Vehicles

16 vehicles but 2  with no owner and only  8 clients own a vehicles, client “00008”  doesn’t have any vehicle.

With this date we’ll review the following kind of joins:

  • INNER JOIN aka “normal join”
  • LEFT JOIN
  • LEFT JOIN with null values
  • RIGHT JOIN
  • RIGHT JOIN with null values
  • NATURAL JOIN
  • FULL OUTER JOIN
  • FULL OUTER JOIN with null values

INNER JOIN aka “normal join”

The result is:

Resultado del Inner Join o join normal

Resultado del Inner Join o join normal

In this case tables’ order around the JOIN clause doesn’t matter and the INNER is optional. What do we obtain?  14 rows, one for each vehicle with an owner. Both clients without a car and vehicles without an owner are not shown up.

I’m only showing codClient and plate fields beacuse a better post presentation reason.

LEFT JOIN

Let’s practice with two queries in order to explain it:

First query’s result:

Left Join de Clientes

Left Join with clients

Show all the clients, even those without a car and for those that own a car one row for car. As you can see client “00008”  doesn’t have any car.

Second query’s result:

Left Join con Vehículos

Left Join with vehicles

All the vehicles are shown up, even those without owner “0011 ABC”  and “5566 ABC”.

LEFT JOIN with NULL VALUES

First query’s result:

Left Join con Clientes y valores nulos

Left Join with clients and null values

Only cients with no vehicle. It also can be donde with a subquery.

Second query’s result:

Left Join con Vehículos y valores nulos

Left Join with vehicles and null values

Only cars with no owner.It also can be donde with a subquery.

RIGHT JOIN

It’s  LEFT JOIN analogous but in this case we get every row from the table on the right side of the join.

First query’s result:

Right Join con Vehículos

Right Join with vehicles

As we see we get every vehicle,even those with no owner. For those with an ownner, owner’s data if shown.

Second query’s result:

Right Join con Clientes

Right Join with clients

Every client (once for each vehicle owned) even those clients with no vehicles (“00008”).

RIGHT JOIN with null values

First query’s result:

Right Join con vehículos y valores nulos

Right Join with vehicles and null values

Only vehicles without owner (null values for client related fileds)

Second query’s result:

Right Join con clientes y valores nulos

Right Join with clients and null values

Only client with no car. (null values for vehicle related fields)

COMPARING LEFT JOIN AND RIGHT JOIN RESULTS IS VERY IMPORTANT. WE NEED TO SEE THE ANALOGY BETWEEN THEM.

NATURAL JOIN

Result:

Natural Join

Natural Join

It’s the same result as when INNER JOIN is used. NATURAL JOIN USES COLUMNS WITH THE SAME NAME IN BOTH TABLES. If not we may get unwanted results.  LEFT or RIGHT can also be added after NATURAL and before  JOIN.

OUTER JOIN

MySQL doesn’t support  FULL OUTER JOIN but it can be done using another type of query:

Result:

Outer Join

Outer Join

All the client even those with no vehicle, all the vehicles even those with no owner and one for row for each client-vehicle relation.

This alternative query can fail.Please read this post for further information.

FULL OUTER JOIN with NULL values

As in the previous case:

Result:

Full Outer Join con valores nulos

Full Outer Join with null values

Vehicles without owner and clients without vehicle.

From  WikiMedia Commons

For further info MySQL docs.

 

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Understaning Foreign keys with MySQL

From WikiMedia Commons

Foreign Keys are a basic concept in the relational database model. In an easy way a foreign key is one or more fields that references fields from other table allowing to set relationships between them.

If we are looking for a formal definition we can use Wikipedia but for now we’ll be using an example:

Relational Model - One to Many RelationShip 1:N

Relational Model – One to Many RelationShip 1:N

This is a One To Many RelationShip 1:N among “clients” and “vehicles”. A client has one or many vehicles and a vehicle is owned by 0 or 1 clients (0 if taken from junk)

“ClientCod” it’s the foreign key in the table “vehicles” and references  “clientCod”  field in the table “clients”, being  this field the primary key in this table. Both fields, primary and foreign keys are used to establish the relationship between those two tables. We must take into account that every “clientCod” value in the “vehicles” table will be present in the “clients” table. This is called referencial integrity.

But, What happnes if we delete a client or if we update the “clientCod” field in the clients table? How does it affect “vehicles”?. In MySQL we have 5 options:

  • RESTRICT : The Default option. Neither delete nor update will be allowed if the a client’s  “clientCod”  already exists in the “vehicles” table.
  • NO ACTION: Like RESTRICT. Allowed for compatibility with the SQL standard.
  • CASCADE : If a client is removed all the client’s vehicles will also be removed and if I update a client’s “clientCod” this update will be propagetd to “vechicles” table.
  • SET NULL: If a client is deleted the  “clientCod” of this client’s vehicles will be set to NULL (this field must allow NULL values) the same if I update the “clientCod” field in the “clients” table
  • SET DEFAULT: Fo both queries, delete and update, a default value is placed in the “clientCod” field for the “vehicles” table.Not valid for InnoDB or  NDB tables.

Let’s see an example with  RESTRICT, NO ACTION , CASCADE y SET NULL:

SQL code for table creation:

We must choose one of the options showed between brackets.

Queries for the example:

Initial content for the tables:

Contenido de la tabla clientes

Clients

Contenido de la tabla vehículos

Vehicles

If I use  ON DELETE RESTRICT and  ON UPDATE RESTRICT (default options) or ON DELETE NO ACTION y ON UPDATE NO ACTION  I will get (in both cases) the following error:

If I use  ON DELETE CASCADE and  ON UPDATE CASCADE every vehicle owned by the client  “00007” will be deleted and in those vechiles with “clientCod” equal to “00008” this value will be updated to “11111”.

Tabla clientes con operaciones en cascada

Clients with CASCADE

Tabla vehículos con operaciones en cascada

Vehicles with CASCADE

If I use ON DELETE SET NULL and  ON UPDATE SET NULL the clients table will remain as the previous case but,  in the vehicles table the  “codClient” will be set to  NULL for those vechicles owned by the clients “00007” or “00008”.

Tabla vehículos con la opción SET NULL

Vehicles with SET NULL

Choosing one or other option is a design decision that must be carefully made  before the creation of the database.

Ihe following post we wll talk about another basic concept in the relational database model: “Different types of Join”

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS