Rabbit W
asked on
Compare Items
1. I want to add the compare checkbox under the item. When user checks the checkbox, the image will be added to the bottom of the comparing area. The following code does not work. Please advise!
2. How to add the Compare link to the comparing area, which will be linked to the page with the four compared products. Click each product and then linked to the product page.
Thank you!
2. How to add the Compare link to the comparing area, which will be linked to the page with the four compared products. Click each product and then linked to the product page.
Thank you!
<%@ Page Language="VB" %>
<script language="vb" runat="server">
Sub Page_Load(sender As Object, e As EventArgs)
Dim strSQL
-------------
</script>
<style>
.empty-border {
padding-bottom: 100%;
border: 1px dashed #9c9c9c;
}
#compare-box-products {
box-shadow: 0 1px 2px 2px rgba(0, 0, 0, .2);
background-color: #fff;
position: fixed;
right: 0;
bottom: 0;
width: 558px;
padding: 10px;
pointer-events: all;
display: none;
}
.empty-border {
width: 110px;
height: 110px;
}
.compare-image-container img {
width: 108px !important;
height: 108px !important;
border: 1px dashed #9c9c9c;
}
</style>
<body >
<div class ="grid-top-spa"><asp:Label runat="server" ID="lblMessage" /> </div>
<asp:DataList ID="compare"
CellPadding="0"
CellSpacing="0"
RepeatDirection="Horizontal"
borderstyle= "none"
GridLines="None"
RepeatLayout="Table"
RepeatColumns="3"
ShowBorder="false"
runat="server" HeaderText="" HeaderStyle-BackColor="#fff" HeaderStyle-ForeColor="#FFFFFF" HeaderStyle-Font-Bold="true">
<ItemTemplate>
<table width="325px">
<tr>
<td> <a href="products.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>">
<div class="thumbnail"> <div class="thumbnail-img"><img style=" border: 1px solid gray;" src="<%=images/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg" class="img-p1" alt="" /> </div></div></a>
</td>
</tr>
<tr>
<td><%# DataBinder.Eval(Container.DataItem, "productname") %> </td>
</tr>
<tr><td><input type="checkbox" class="p1"> Compare Product</td></tr>
</table>
</ItemTemplate>
</asp:DataList>
<div id="compare-box-products">
<strong>Compare up to 4 Products</strong>
<br>
<br>
<div id="compare-box">
<div class="compare-image-container col-xs-3">
<div class="empty-border"> </div>
</div>
<div class="compare-image-container col-xs-3">
<div class="empty-border"> </div>
</div>
<div class="compare-image-container col-xs-3">
<div class="empty-border"> </div>
</div>
<div class="compare-image-container col-xs-3">
<div class="empty-border"> </div>
</div>
</div>
<div id="compare-box-row" class="col-xs-9">
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
$('.thumbnail input:checkbox').on('change', function() {
var elm_class= $(this).attr('class');
if (this.checked) {
$('#compare-box-products').slideDown();
$('.empty-border:first').replaceWith($('.img-' + elm_class)[0].outerHTML);
} else {
$('.compare-image-container .img-'+elm_class).replaceWith('<div class="empty-border"> </div>');
}
if( $('.thumbnail input:checkbox:checked').length === 0){
$('#compare-box-products').slideUp();
}
});
})
</script>
</body>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
The key to the answer here is in your compiled HTML code, the posted code will not help since we don't know how the data-list will be compiled, so the question remains the same, could you please post the compiled HTML code from the browser developer panel (hits F12 in your browser to open the developer then copy HTML the code and share it with us)?
ASKER
Here is
<head><style>
.empty-border {
padding-bottom: 100%;
border: 1px dashed #9c9c9c;
}
#compare-box-products {
box-shadow: 0 1px 2px 2px rgba(0, 0, 0, .2);
background-color: #fff;
position: fixed;
right: 0;
bottom: 0;
width: 558px;
padding: 10px;
pointer-events: all;
display: none;
}
.empty-border {
width: 110px;
height: 110px;
}
.compare-image-container img {
width: 108px !important;
height: 108px !important;
border: 1px dashed #9c9c9c;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head><body>
<div class="grid-top-spa"><span id="lblMessage"></span> </div>
<table id="compare" showborder="false" headertext="" style="border-style:None;border-collapse:collapse;" cellspacing="0" cellpadding="0">
<tbody><tr>
<td>
<table>
<tbody><tr>
<td> <a href="products.aspx?id=86">
<div class="thumbnail"> <div class="thumbnail-img"><img style=" border: 1px solid gray;" src="images/small/86.jpg" class="img-p1" alt=""> </div></div></a>
</td>
</tr>
<tr><td><input type="checkbox" class="p1"> Compare Product</td></tr>
</tbody></table>
</td><td>
<table>
<tbody><tr>
<td> <a href="products.aspx?id=433">
<div class="thumbnail"> <div class="thumbnail-img"><img style=" border: 1px solid gray;" src="images/small/433.jpg" class="img-p1" alt=""> </div></div></a>
</td>
</tr>
<tr><td><input type="checkbox" class="p1"> Compare Product</td></tr>
</tbody></table>
</td><td>
<table>
<tbody><tr>
<td> <a href="products.aspx?id=614">
<div class="thumbnail"> <div class="thumbnail-img"><img style=" border: 1px solid gray;" src="images/small/614.jpg" class="img-p1" alt=""> </div></div></a>
</td>
</tr>
<tr><td><input type="checkbox" class="p1"> Compare Product</td></tr>
</tbody></table>
</td>
</tr><tr>
<td>
<table>
<tbody><tr>
<td> <a href="products.aspx?id=103">
<div class="thumbnail"> <div class="thumbnail-img"><img style=" border: 1px solid gray;" src="images/small/103.jpg" class="img-p1" alt=""> </div></div></a>
</td>
</tr>
<tr><td><input type="checkbox" class="p1"> Compare Product</td></tr>
</tbody></table>
<div id="compare-box-products">
<strong>Compare up to 4 Products</strong>
<br>
<br>
<div id="compare-box">
<div class="compare-image-container col-xs-3">
<div class="empty-border"> </div>
</div>
<div class="compare-image-container col-xs-3">
<div class="empty-border"> </div>
</div>
<div class="compare-image-container col-xs-3">
<div class="empty-border"> </div>
</div>
<div class="compare-image-container col-xs-3">
<div class="empty-border"> </div>
</div>
</div>
<div id="compare-box-row" class="col-xs-9">
</div>
</div>
<script>
$(function() {
$('.thumbnail ').on('change', 'input:checkbox', function() {
var elm_class= $(this).attr('class');
if (this.checked) {
$('#compare-box-products').slideDown();
$('.empty-border:first').replaceWith($('.img-' + elm_class)[0].outerHTML);
} else {
$('.compare-image-container .img-'+elm_class).replaceWith('<div class="empty-border"> </div>');
}
if( $('.thumbnail input:checkbox:checked').length === 0){
$('#compare-box-products').slideUp();
}
});
})
</script>
<style type="text/css">
#livechat-compact-container,
#livechat-full {
right: 40px !important;
#livechat-eye-catcher {
left: 20px !important;
width: 250px !important;
#livechat-compact-container {
bottom: 50%!important;
right: -99px!important;
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
}
}
}
</style>
</body>
the coding.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
So how to fix it in order to make it work? Thank you!
<script>
$(function() {
$('.thumbnail ').on('change', 'input:checkbox', function() {
var elm_class= $(this).attr('class');
if (this.checked) {
$('#compare-box-products').slideDown();
$('.empty-border:first').replaceWith($('.img-' + elm_class)[0].outerHTML);
} else {
$('.compare-image-container .img-'+elm_class).replaceWith('<div class="empty-border"> </div>');
}
if( $('.thumbnail input:checkbox:checked').length === 0){
$('#compare-box-products').slideUp();
}
});
})
</script>
'.thumbnail ' is a div, and it hasn't 'checked' attribute
That true and he hasn't used the "checked" anywhere with div.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you! A little progress. Now the comparing area pops up, but still no image has been added.
I have modified the body area.
But how to modify the javascript in order to make it work? Thank yo u!
I have modified the body area.
<a href="products.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>">
<img src="<%=images/small/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg" alt="" /></a>
<div class="img-p"><div class="p"><input type="checkbox">compare</div></div>
But how to modify the javascript in order to make it work? Thank yo u!
$(function() {
$('body').on('change', 'input:checkbox', function() {
var elm_class = $(this).attr('class');
if (this.checked) {
$('#compare-box-products').slideDown();
$('.empty-border:first').replaceWith($('.img-' + elm_class)[0].outerHTML);
} else {
$('.compare-image-container .img-' + elm_class).replaceWith('<div class="empty-border"> </div>');
}
if ($('input:checkbox:checked').length === 0) {
$('#compare-box-products').slideUp();
}
});
})
</script>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Yes, I did. But the image won't be added.
ASKER
In the script, the image needs to be added to the datalist, but I do not how to fix it. Could you advise? Thank you!
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Yes, I followed your institutions, but had an error: Public member 'ItemIndex' on type 'DataRowView' not found.
Since I do not have itemindex. So I modified yours to mine. Please advise! Thank you!
Since I do not have itemindex. So I modified yours to mine. Please advise! Thank you!
ASKER
Thank you Zakaria! I am half way to the destination. Please advise!
ASKER
Per this line: input type="checkbox" class="p<%# Container.DataItem.ItemInd ex %>">
How to declare index variable and assign the value to it?
Thank you !
How to declare index variable and assign the value to it?
Thank you !
Hi Rabbit, Does this request is solved or not yet?
ASKER
Hi Zakaria, thank you so much for generously sharing your time and expertise!
I am almost there. You are super!
I am almost there. You are super!
ASKER
Thank you very much Zakaria! You are super like the rest of the experts! It is working now.
ASKER
Below is the code.
Open in new window