I have a map where anyone can add a custom marker with info and images.
I want to create for each marker with more than 1 image, a slider.
Now each marker looks something like that:
I want that if there are multiple images for lets say for 'n' markers, I want to make all the images hidden except the first one and make a slider for each one of them.
This is the code now:
foreach (var _Data in Model)
{
<div class="popup" id="overlay-container-#_Data.Id">
<div class="overlay">
<div class="content"> #*Content <-Text->*#
<div class="close-btn" onclick="togglePopup(#_Data.Id)">×</div>
<h3><u>Category</u>: #_Data.category</h3><br />
<h5><u>Title</u>: #_Data.title</h5>
<u>Description</u>: <br /> <textarea disabled cols="50" rows="10" style="resize:none; background: none; border:hidden" class="accept-policy"> #_Data.remarks </textarea> <br />
<b>Urgence</b>: #_Data.statUrgence <br />
<br />
<div id="slideshow-container" style="height:200px; width:380px; display: flex; overflow: hidden;"> #*The Images*#
#{
string #path = #_Data.path;
string ImgPath = #path.Substring(#path.IndexOf("Files") - 1, (#path.Length - (#path.IndexOf("Files") - 1)));
string[] ImgPathArray = ImgPath.Split('\\');
string[] filePaths = Directory.GetFiles(#path); // _Data.path
foreach (var file in filePaths)
{
var temp = file;
List<string> set1 = path.Split('\\').Distinct().ToList();
List<string> set2 = temp.Split('\\').Distinct().ToList();
var diff = set2.Count() > set1.Count() ? set2.Except(set1).ToList() : set1.Except(set2).ToList();
<img style="display: block; margin-left: auto; margin-right: auto; width: auto;"
src="~/#string.Join("/", ImgPathArray).Remove(0,1)/#string.Join("", diff)" />
}
}
</div>
<br />
</div>
</div>
</div>
<script> #*Display markers*#
markers = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'https://ucarecdn.com/4b516de9-d43d-4b75-9f0f-ab0916bd85eb/marker.png' // => https://app.uploadcare.com/projects/c05bbeb5e1a61e862903/files/7110cd57-b0ee-4833-bcd1-ff0343dd01cc/?limit=100&ordering=-datetime_uploaded
})
})
});
map.addLayer(markers);
var marker = new ol.Feature(new ol.geom.Point([parseFloat(#_Data.coordLat), parseFloat(#_Data.coordLong)]));
marker.setId(#_Data.Id);
//console.log(marker.getId());
markers.getSource().addFeature(marker);
</script>
}
<style> #*Style for the marker's popuop*#
.popup .overlay {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.5);
z-index: 1;
display: none;
}
.popup .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
background: #fff;
width: auto;
height: auto;
z-index: 2;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.popup .close-btn {
position: absolute;
right: 20px;
top: 20px;
width: 30px;
height: 30px;
background: #222;
color: #fff;
font-size: 25px;
font-weight: 600;
line-height: 23.5px;
text-align: center;
border-radius: 50%;
}
.popup.active .overlay {
display: block;
}
.popup.active .content {
transition: all 300ms ease-in-out;
transform: translate(-50%, -50%) scale(1);
}
</style>
You can use Bootstrap Image slider (carousel).
For example, you have a list of image paths：
#{
List<string> imagePath = new List<string>() { "/images/img1.jpg", "/images/img2.jpg", "/images/img3.jpg" };
}
Then you can use carousel to load images:
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false" data-pause="hover">
<div class="carousel-inner" role="listbox">
#for (var i=0;i<imagePath.Count();i++)
{
var showClass = (i == 0 ? "active":"");
var path = imagePath[i];
<div class="item #showClass">
<div class="carousel-content">
<div style="margin: 0 auto">
<p>
<img src="#path" />
</p>
</div>
</div>
</div>
}
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only"> Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.carousel-content {
color: black;
display: flex;
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.carousel').carousel();
});
</script>
Result:
If you want to have a carousel effect, set data-interval="2000" (2s switch).
Is this what you want?
Related
I'm working on a simple HTML template for invoices, so the first part consists of logo at the right side and below it three columns, so HTML works very well, then I use HtmlToPdf C# library to convert this to pdf as:
var converter = new HtmlToPdf();
var today = DateTime.UtcNow;
var fileName = $"test- {today}";
var doc = converter.ConvertHtmlString(html);
using var ms = new MemoryStream();
ms.Position = 0;
doc.Save(ms);
var res = ms.ToArray();
doc.Close();
return File(res, "application/pdf", fileName);
So it generate the file correctly but for some reason it is not three column anymore, it make three different rows with one column each one:
Header snippet
#page {
background: #ffffff;
width: 878px;
margin: 0 auto;
margin-top: 40px;
display: block;
border: 1px solid #c4c7c7;
padding: 40px 40px 50px 40px;
position: relative;
z-index: 0;
}
.header__container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding-top: 20px;
}
.recipient__address {
padding-top: 60px;
width: 200px;
}
.shipper__address {
padding-top: 60px;
text-align: center;
}
.company__address {
right: 40px;
padding-top: 60px;
text-align: right;
}
<body>
<div id="page">
<div class="header__container">
<div>
<p class="recipient__address">
<strong>Ship From</strong><br /> {{ShipFromCompany}}
<br /> {{ShipFromAddressLineOne}}
<br /> {{ShipFromAddressLineTwo}}, {{ShipFromPostalCode}}<br /> {{ShipFromAttn}}
<br /> {{ShipFromPhone}}
</p>
</div>
<div>
<p class="shipper__address">
<strong>Shipper</strong><br /> {{ShipperCompany}} <br /> {{ShipperAttn}} <br /> {{ShipperAddressLineOne}} <br /> {{ShipperAddressLineTwo}}
</p>
</div>
<div>
<img src="images/company__logo.png" alt="logo" class="company__logo">
<p class="company__address">
<strong>Ship To</strong><br> {{ShipToCompany}}
<br> {{ShipToAddressLineOne}}
<br> {{ShipToAddressLineTwo}}, {{ShipToPostalCode}}<br> {{ShipToAttn}}
<br> {{ShipToPhone}}
<br>
</p>
</div>
<div>
<p>
<strong>Carrier:</strong>{{ShipToCarrier}}<br />
</p>
</div>
<div>
<p>
<strong>Due Date:</strong>{{ShipToDueDate}}<br />
</p>
</div>
</div>
</div>
</body>
How can I prevent it to create multiple rows when it converts to pdf document? Regards
I found the issue, apparently the htmltopdf conversion does not support CSS grid, so I changed to simple CSS as:
.header__container {
padding-top:80px;
}
.header__container::after {
content: "";
display: table;
clear: both;
}
.header__column {
float: left;
width: 33%;
}
Now it's working
I am working with ASP.NET Core 3.1 MVC and Bootstrap 4.4.1 and the default project template with DataTables.js (1.10.20 and css twitter bootstrap).
The first thing I must say is that I'm not good at all with css, so I think this could be the reason of this problem.
The following problem occurs when the screen has a lower resolution: (Tested resolution: 400x500)
I would like to know why this happened with the Fixed Footer and if there is a fix for this.
Thanks in advance for any assistance.
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
/* Provide sufficient contrast against white background */
a {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px; /* Vertically center the text there */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebApplication1</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand">WebApplication1</a>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />
<div class="table-responsive p-1">
<table class="table table-striped table-bordered" id="Table">
<thead>
<tr>
<th scope="col">
Name
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-middle">
Hello
</td>
</tr>
<tr>
<td class="align-middle">
World
</td>
</tr>
</tbody>
</table>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function () {
$('#Table').DataTable(
{
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/English.json"
}
});
});</script>
</div>
</main>
</div>
<footer class="border-top footer text-muted text-center">
<div class="container">
Footer
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js"></script>
</body>
</html>
I used CSS flex to reduce the change to your markup.
The change I did were:
I added class content to your main content.
I changed the style for body to have these styles
body {
display: flex;
flex-direction: column;
height: 100vh;
}
Then I added these, and also updated the style for your .footer
header {
flex: 0 0 50px;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
width: 100%;
line-height: 60px; /* Vertically center the text there */
}
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
/* Provide sufficient contrast against white background */
a {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
flex: 0 0 50px;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
width: 100%;
line-height: 60px; /* Vertically center the text there */
}
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand">WebApplication1</a>
</div>
</nav>
</header>
<div class="content container">
<main role="main" class="pb-3">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />
<div class="table-responsive p-1">
<table class="table table-striped table-bordered" id="Table">
<thead>
<tr>
<th scope="col">
Name
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-middle">
Hello
</td>
</tr>
<tr>
<td class="align-middle">
World
</td>
</tr>
</tbody>
</table>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function () {
$('#Table').DataTable(
{
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/English.json"
}
});
});</script>
</div>
</main>
</div>
<footer class="footer border-top footer text-muted text-center">
<div class="container">
Footer
</div>
</footer>
</body>
You can see it working here:
https://jsfiddle.net/8ba9cdxe/
you can change the position of the footer to static then it will be fixed.
Try remove posistion:absolute in footer class
.footer {
/*position: absolute;*/
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px; /* Vertically center the text there */
}
I have a project that contains several views with some "carousel".For example, this is one of the pages with some buttons. p1
and when I click, for example, at the first button "Ver mais" it shows this p2
So far so good! But if I get out of this "window" and click on another button "ver mais", it happens this, that is, the slide doesn't start on the first image.p3
My html code is this(I only post the code from two galleries of images because I have a few and it would become too extensive):
window.onload = function() {
$(document).ready(function() {
$('#data').after('<div id="nav"></div>');
var rowsShown = 5;
var rowsTotal = $('#data tbody tr').length;
var numPages = rowsTotal / rowsShown;
for (i = 0; i < numPages; i++) {
var pageNum = i + 1;
$('#nav').append('' + pageNum + ' ');
}
$('#data tbody tr').hide();
$('#data tbody tr').slice(0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function() {
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
css('display', 'table-row').animate({
opacity: 1
}, 300);
});
});
}
body {
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
width: 960px;
margin: 40px auto;
}
h2 {
font-size: 21px;
color: #008000;
font-weight: normal;
}
#ancora {
text-align: right;
color: black;
position: absolute;
top: 205px;
right: 200px;
text-decoration: underline;
}
#customers {
border-collapse: collapse;
}
#customers td,
#customers th {
border: 1px solid #ddd;
}
#customers tr:nth-child(even) {
background-color: #f2f2f2;
}
#customers tr:hover {
background-color: #ddd;
}
#customers th {
background-color: black;
color: white;
}
th,
td {
padding: 5px;
text-align: center;
}
.center {
text-align: center;
}
.btn-info {
color: #fff;
background-color: rgba(0, 128, 0, 1);
border-color: rgba(0, 0, 0, .075);
cursor: pointer !important;
}
.btn {
text-align: left;
}
.btn-info:hover {
color: #fff;
background-color: #10A125;
border-color: #10A125;
}
.btn-info:active:hover {
color: #fff;
background-color: #10A125;
border-color: #10A125;
}
.btn-info:focus {
color: #fff;
background-color: #10A125;
border-color: #10A125;
}
.container {
width: auto;
height: auto;
}
.body-content {
padding-left: 15px;
padding-right: 15px;
}
* {
-webkit-box-sizing: content-box;
}
.imagem {
width: 150px;
height: 150px;
object-fit: cover;
}
#data tr {
display: none;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
}
#data td,
#data th {
border: 1px solid #ddd;
}
#data tr:nth-child(even) {
background-color: #f2f2f2;
}
#data tr:hover {
background-color: #ddd;
}
#data th {
background-color: black;
color: white;
}
td {
width: 350px;
text-align: center;
}
a:-webkit-any-link {
color: white;
cursor: pointer;
text-decoration: underline;
}
#nav {
margin: 0 auto;
float: none;
display: table;
}
#nav a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid #ddd;
}
#nav a.active {
background-color: #008000;
color: white;
border: 1px solid #008000;
}
#nav a:hover:not(.active) {
background-color: #ddd;
}
#nav a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#nav a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.carousel-control.right {
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, 0) 100%);
}
.carousel-control.left {
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, 0) 100%);
}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Projetos de Jardim & Lazer</h2>
<a id="ancora" href="/Home/Index">Página Inicial</a>
<table id="data" style="width:100%">
<tbody>
<tr>
<th></th>
<th><strong>Tipo de relva</strong></th>
<th><strong>Descrição</strong></th>
<th><strong>Localidade</strong></th>
</tr>
<tr style="display: table-row;">
<td><img class="imagem" src="~/Imagens/Boticas1.jpg"></td>
<td><strong>DOMO® SCALA (PHILI)</strong></td>
<td>Boticas Hotel Art & Spa</td>
<td>Boticas - Vila Real</td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Ver mais</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Boticas Hotel Art & Spa</h4>
</div>
<div class="modal-body">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="~/Imagens/Boticas2.jpg" alt="DOMO® Smash" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Boticas3.jpg" alt="DOMO® Smash" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Boticas4.jpg" alt="DOMO® SCALA (PHILI)" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Boticas5.jpg" alt="DOMO® SCALA (PHILI)" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
DOMO® SCALA (PHILI)
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Próxima</span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr style="display: table-row;">
<td><img class="imagem" src="~/Imagens/Seia1.jpg"></td>
<td><strong>DOMO® MONZA</strong></td>
<td>Centro Escolar</td>
<td>Seia - Guarda</td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Ver mais</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Centro Escolar de Seia</h4>
</div>
<div class="modal-body">
<div id="carousel-example-generic1" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic1" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic1" data-slide-to="1"></li>
<li data-target="#carousel-example-generic1" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="~/Imagens/Seia2.jpg" alt="DOMO® MONZA" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Seia3.jpg" alt="DOMO® MONZA" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Imagens/Seia4.jpg" alt="DOMO® MONZA" style="width:568px; height:329px;">
<div class="carousel-caption">
</div>
</div>
DOMO® MONZA
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Próxima</span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
Any suggestions? Another question, where do I change the time of transition from an image to another?
I have a view displays review from the database Reviews Table. Brief information for each item is display at first (ReviewID, Author and Date Create), then if you click on the ReviewID, the Rating and Feedback is displayed in a pop-up. The problem is pop-up gives the same details(Rating and Feedback) as the first item displayed. The pictures below give a visual representation of the problem
When on you click on Review Number: 5002(This is the ReviewID (ID:5002) in the table) a pop up is produced display the ReviewID's Rating and Feedback
However if you click on Review Number: 5006 (ID:5006), the content on the pop-up is not the corresponding to 5006 but to 5002
Here is my code for the View
#{
ViewBag.Title = "Index";
Layout = "";
}
#model PagedList.IPagedList<Siza.Models.Review>
#using PagedList.Mvc;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon"s
type="image/png"
href="~/Content/favicon.ico" />
<title>Siza</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="~/Content/css/freelancer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/Content/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--Demo-->
<link rel="stylesheet" type="text/css" href="~/Content/css/normalize.css">
<style>
textarea {
overflow-y: scroll;
height: 100px;
resize: none;
}
.demo-3 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px
}
.demo-3 figure {
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:-50px
}
.demo-3 figure img {
display:block;
position:relative;
z-index:10;
margin:-15px 0
}
.demo-3 figure figcaption {
display:block;
position:absolute;
z-index:5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.demo-3 figure h2 {
font-family:'Lato';
color:#fff;
font-size:20px;
text-align:left
}
.demo-3 figure p {
display:block;
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0;
color:#fff;
text-align:left
}
.demo-3 figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
padding:29px 44px;
background-color:rgba(26,76,110,0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}
.full-width {
width: 100%;
}
.carousel-caption {
position: absolute;
top: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 100%;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
</style>
</head>
#foreach (var item in Model)
{
//Popup window content
<div id="reviewpopup" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: #Html.DisplayFor(modelItem => item.Rating)</h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li href="#reviewpopup">
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
<table class="table text-center width:50%">
<tr>
<td>
#Html.PagedListPager(Model, Page => Url.Action("StudentWellnessReviews",
new { Page, pageSize = Model.PageSize }))
Showing #Model.FirstItemOnPage to #Model.LastItemOnPage of #Model.TotalItemCount Reviews
</td>
</tr>
</table>
I really not sure how to solve this issue. Help would be greatly apprececiated
On HTML page there can be only one element with specific id. In your case I would add Model.ReviewId to the id attribute of your popup and href attribute of your <a> element.
#foreach (var item in Model)
{
//Popup window content
<div id="reviewpopup_#Model.ReviewID" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: #Html.DisplayFor(modelItem => item.Rating)</h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li>
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
Also href attribute in <li> element is invalid, so you should remove it.
Desired result would be
<div id="reviewpopup_1">
//div content here
</div>
and later
Review Number: #Html.DisplayFor(modelItem => item.ReviewID)
I managed to figure it out:) You can use the item.ReviewID as a div ID
{
//Popup window content
<div id="#item.ReviewID" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: </h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li>
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
I'm using nopcommerce 3.80 for my site and wanted to use vertical full width slides on home page. I used Jssor slider jquery in place of nivo by editing my Nivo slider plugin. I'm able to see a vertical slider at homepage now, but it is giving a horizontal scroll bar and the image is not extending to full width instead it is giving white blank space in the right side. And also the scrollbar is making the page in the right side with white space and below the slider also. Please see the attached image for reference. Below also is the jssor slider plugin. Any help would be appreciated.
#model Nop.Plugin.Widgets.NivoSlider.Models.PublicInfoModel
#{
Layout = "";
Html.AddScriptParts("~/Plugins/Widgets.NivoSlider/Scripts/jssor.slider-21.1.6.min.js");
#*Html.AddScriptParts("~/Plugins/Widgets.NivoSlider/Scripts/jquery.nivo.slider.js");
Html.AddCssFileParts("~/Plugins/Widgets.NivoSlider/Content/nivoslider/nivo-slider.css");
Html.AddCssFileParts("~/Plugins/Widgets.NivoSlider/Content/nivoslider/themes/custom/custom.css");*#
}
#using Nop.Web.Framework.UI
#helper RenderSliderLine(string pictureUrl, string text, string link, string dataTransition = "")
{
if (!string.IsNullOrEmpty(pictureUrl))
{
if (!string.IsNullOrEmpty(link))
{
<a href="#link">
<img src="#pictureUrl" data-thumb="#pictureUrl" data-transition="#dataTransition" alt="" title="#text" />
</a>
}
else
{
<img src="#pictureUrl" data-thumb="#pictureUrl" data-transition="#dataTransition" alt="" title="#text" />
}
}
}
<script type="text/javascript">
jssor_1_slider_init = function () {
var jssor_1_options = {
$AutoPlay: true,
$DragOrientation: 2,
$PlayOrientation: 2,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 1920);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
</script>
<style>
/* jssor slider arrow navigator skin 08 css */
/*
.jssora08l (normal)
.jssora08r (normal)
.jssora08l:hover (normal mouseover)
.jssora08r:hover (normal mouseover)
.jssora08l.jssora08ldn (mousedown)
.jssora08r.jssora08rdn (mousedown)
*/
.jssora08l, .jssora08r {
display: block;
position: absolute;
/* size of arrow element */
width: 50px;
height: 50px;
cursor: pointer;
background: url('~/Plugins/Widgets.NivoSlider/Content/nivoslider/themes/a08.png') no-repeat;
overflow: hidden;
opacity: .4;
filter: alpha(opacity=40);
}
.jssora08l {
background-position: -5px -35px;
}
.jssora08r {
background-position: -65px -35px;
}
.jssora08l:hover {
background-position: -5px -35px;
opacity: .8;
filter: alpha(opacity=80);
}
.jssora08r:hover {
background-position: -65px -35px;
opacity: .8;
filter: alpha(opacity=80);
}
.jssora08l.jssora08ldn {
background-position: -5px -35px;
opacity: .3;
filter: alpha(opacity=30);
}
.jssora08r.jssora08rdn {
background-position: -65px -35px;
opacity: .3;
filter: alpha(opacity=30);
}
</style>
<div class="slider-wrapper theme-custom" id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;">
<!-- Loading Screen -->
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
<div data-p="112.50" style="display: none;">
#RenderSliderLine(Model.Picture1Url, Model.Text1, Model.Link1)
</div>
<div data-p="112.50" style="display: none;">
#RenderSliderLine(Model.Picture2Url, Model.Text2, Model.Link2)
</div>
<div data-p="112.50" style="display: none;">
#RenderSliderLine(Model.Picture3Url, Model.Text3, Model.Link3)
</div>
<div data-p="112.50" style="display: none;">
#RenderSliderLine(Model.Picture4Url, Model.Text4, Model.Link4)
</div>
<div data-p="112.50" style="display: none;">
#RenderSliderLine(Model.Picture5Url, Model.Text5, Model.Link5)
</div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora08l" style="top:8px;left:8px;width:50px;height:50px;" data-autocenter="1"></span>
<span data-u="arrowright" class="jssora08r" style="bottom:8px;right:8px;width:50px;height:50px;" data-autocenter="1"></span>
<script type="text/javascript">jssor_1_slider_init();</script>
</div>