If you are a frequent user of Internet and browse different websites on a regular basis, then you must have noticed those pop up windows emerging on your screen, displaying some options, questions or alert messages while exploring a website. Pop ups are prominently being used on websites to generate responses or capture the user attention. Many website owners have seen an incredible uplift in their sales after using pop up dialogue windows on their site.
Today, we have tons of ways to create pop up windows for our site visitors. Thanks to the emergence of HTML5 and jQuery, these days, web designers have more innovative ways to create impressive pop ups, while making sure their content is well organized. The latest version of the HTML markup language has provided webmasters with better tools and coding processes to keep things valid. They have learned new methods to not only add custom attributes, but also a new API known as “Dataset API”.
In this post, I will explain you the entire process of creating a popup with the help of HTML5 dataset API and jQuery. I hope you like it and bookmark it for the future reference.
Table of Contents
Understanding the basics of Dataset API
For a long time, developers were compelled to store their data on DOM elements. For this, they had either had to add data to the “class names” or “rel attributes”. Though, they had the facility to create their own attributes, but that process was quite daunting. This practice of storing data led to the generation of code invalidity simply because custom attributes were not compatible enough to meet the project demands. The situation was quite annoying for developers. But, with the advent of HTML5 developers learned the ways of adding custom attributes along with the Dataset API to streamline their work processes.
Along with so many necessary features that HTML5 brings forth, it has also introduced data attributes and the dataset API. Let us now discuss about both of these features one by one.
Also known as custom data attributes, data attributes are HTML strings that allow us to store anything on a website JavaScript to make sure your users feel engaged with your website. The name of data attributes starts with ‘data-‘. That’s the reason why they are referred as data-* attributes.
The example below will help you gain a better understanding on the working of data attributes.
[code lang=”html”]
<div id="mylist" class="user_xyz list-size_5 maxweight_100"></div>
[/code]
In this line of JavaScript code, I have full authority to define the maximum number of messages and I can ignore those that are older than 100 days. However, as you can see in the above line of code: the class attributes looks too messy. The HTML5 data attributes help to perform the same task in a relatively simple and easy manner as shown in the code below:
[code lang=”html”]
<div id="mylist" data-user="xyz" data-list-size="5" data-maxweight="100"></div>
[/code]
But as you’ll add more attributes to the class, it will become too cumbersome. Fortunately, the dataset API makes it easy for us to manage data attributes.
Using the Dataset API we can get, set, or even delete the attribute values on HTML elements. This API returns the DOMStringMap object along with the object keys that are named without ‘data-‘ prefix. So, if you want to separate any attribute name by using a hyphen, then the name should be converted to camelCase. Look at the following example:
[code lang=”javascript”]
var obj = document.getElementById("mylist").dataset;
[/code]
Now the dataset API will return following object in the variable ‘obj’ as follows:
[code lang=”javascript”]
{
user: "xyz",
listSize: "5",
maxweight: "100"
}
[/code]
In the above code, the data-user attribute is being written as user Dataset API attribute, data-list-size is written as listSize and data-maxweight as maxweight.
NOTE: The advantage of using HTML5 dataset property is that it not only helps to manage the complexity of data attributes, but is also compatible with modern browsers like Firefox, Opera, IE, etc. And thus, the dataset API can be accessed easily on any browser that supports HTML5.
How to create pop up using dataset API and jQuery
[code lang=”html”]
<script type="text/javascript">
$(document).ready(function() {
// Get The Selected Data From Div Element
$("#btn1").click(function() {
var _msg = $(this).attr(‘data-msg’);
$("div").data("message", _msg);
});
// Get The Selected Data From Div Element
$("#btn2").click(function() {
var data = $("div").data("message");
$(".message-screen").text(data);
});
});
</script>
<body>
<button id="btn1" data-msg="Good Morning">Select Data in to Div </button>
<br>
<button id="btn2">Get The Selected Data From Div Element</button>
<div class="message-screen"></div><!–popup container–>
<div class="black-overlay"></div><!–div used for overlay–>
</body>
[/code]
Browser Compatibility:
- IE 9 or 9+
- Firefox 35 or 35+
- Chrome 31 or 31+
- Safari 7.1+
- Opera 27+
Conclusion
Owing to the increasing complexity in maintaining the work flow of websites and applications, it has become essential for web masters to learn new innovative tricks to make the most out of the available information. Using the old techniques such as “class names” and “rel attributes” and storing elements on DOM will yield you nothing except increasing the workload.
But, HTML5 dataset API has brought an entirely new technique that helps us managing data in the manner most effective. API is also very easy to use They work great in creating sales generating popups that are also supported by all the modern desktop and mobile browsers. You can start using API for you next project anytime and discover its magic for yourself.