"Compare Products"
Bootstrap 4.1.1 Snippet by Nishant kumar

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<title>Product Comparision using jquery</title>
<link rel="icon" href="../../images/icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/w3.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/Compare.js"></script>
</head>
<body>
<div class="w3-container w3-center">
<a href="http://www.itwebsource.com/"><h4>←back to Nishant Website</h4></a>
</div>
<div class="w3-center">
<h1>Product Comparision Demo</h1>
</div>
<div class="w3-container">
<div class="w3-row-padding">
<div class="w3-col l3 m6 relPos w3-center ">
<div class="selectProduct w3-padding" data-title="Nexus5" data-id="Nexus 5" data-size="4.9"" data-weight="130 g" data-processor="2.3 GHz, Quad Core, Qualcomm Snapdragon 800" data-battery="2300 mAH">
<a class="w3-btn-floating w3-light-grey addButtonCircular addToCompare">+</a>
<img src="https://www.yaantra.com/ItemImages/Catalog/Products/ThumbNail/RCOne0054_4.jpg" class="imgFill productImg">
<h4>Oneplus 6</h4>
</div>
</div>
<div class="w3-col l3 m6 relPos w3-center">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* W3.CSS 2.7 by Jan Egil and Borge Refsnes */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
audio,canvas,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}
dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}sub{bottom:-0.25em}
img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}
hr{-moz-box-sizing:content-box;box-sizing:content-box}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
button,input,select,textarea{font:inherit;margin:0}
button{overflow:visible}button,select{text-transform:none}
button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input[type=checkbox],input[type=radio]{padding:0}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}
input[type=search]{box-sizing:content-box;-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0}pre,textarea{overflow:auto}
/* End extract from normalize.css */
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
h1,h2,h3,h4,h5,h6,.w3-slim,.w3-wide{font-family:"Segoe UI",Arial,sans-serif}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
.w3-serif{font-family:"Times New Roman",Times,serif}
h1,h2,h3,h4,h5,h6{font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}
hr{height:0;border:0;border-top:1px solid #eee;margin:20px 0}
img{margin-bottom:-5px}a{color:inherit}
table{border-collapse:collapse;border-spacing:0;width:100%;display:table}
table,th,td{border:none}.w3-table-all{border:1px solid #ccc}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/// <reference path="jquery-1.12.3.js" />
(function ($) {
var list = [];
/* function to be executed when product is selected for comparision*/
$(document).on('click', '.addToCompare', function () {
$(".comparePanle").show();
$(this).toggleClass("rotateBtn");
$(this).parents(".selectProduct").toggleClass("selected");
var productID = $(this).parents('.selectProduct').attr('data-title');
var inArray = $.inArray(productID, list);
if (inArray < 0) {
if (list.length > 2) {
$("#WarningModal").show();
$("#warningModalClose").click(function () {
$("#WarningModal").hide();
});
$(this).toggleClass("rotateBtn");
$(this).parents(".selectProduct").toggleClass("selected");
return;
}
if (list.length < 3) {
list.push(productID);
var displayTitle = $(this).parents('.selectProduct').attr('data-id');
var image = $(this).siblings(".productImg").attr('src');
$(".comparePan").append('<div id="' + productID + '" class="relPos titleMargin w3-margin-bottom w3-col l3 m4 s4"><div class="w3-white titleMargin"><a class="selectedItemCloseBtn w3-closebtn cursor">&times</a><img src="' + image + '" alt="image" style="height:100px;"/><p id="' + productID + '" class="titleMargin1">' + displayTitle + '</p></div></div>');
}
} else {
list.splice($.inArray(productID, list), 1);
var prod = productID.replace(" ", "");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard PRO React

Questions / Comments: