Remove download, share, autoplay button from lightGallery - lightgallery

I've been trying to removes these button for a few hours and couldn't get it to work. Following is what I have so far.
<script type="text/javascript">
lightGallery(document.getElementById("lightgallery"), {
selector: '.tilter',
download: false,
share: false
});
</script>
<div id="lightgallery" class="col-12 col-xl-9 col-xxl-12">
<div class="row row-15 row-md-30 gutters-10 gutters-md-30" data-lightgallery="group">
<div class="col-6 col-lg-4">
<div class="tilter"><a class="figure-classic" href="/images/sport-1.jpg" data-lightgallery="item"><img src="/images/sport-1.thumb.jpg" alt="" width="400" height="300"></a></div>
</div>
<div class="col-6 col-lg-4">
<div class="tilter"><a class="figure-classic" href="/images/sport-2.jpg" data-lightgallery="item"><img src="/images/sport-2.thumb.jpg" alt="" width="400" height="300"></a></div>
</div>
<div class="col-6 col-lg-4">
<div class="tilter"><a class="figure-classic" href="/images/sport-3.jpg" data-lightgallery="item"><img src="/images/sport-3.thumb.jpg" alt="" width="400" height="300"></a></div>
</div>
<div class="col-6 col-lg-4">
<div class="tilter"><a class="figure-classic" href="/images/sport-4.jpg" data-lightgallery="item"><img src="/images/sport-4.thumb.jpg" alt="" width="400" height="300"></a></div>
</div>
</div>
</div>

Related

How to make prettier format HTML like this?

What prettier rules do I need to make the formatting like this. To keep the tags on new lines and the text between them?
<template>
<div class="row">
<div class="col-sm-6 col-lg-8">
.col-sm-6 .col-lg-8
</div>
<div class="col-6 col-lg-4">
.col-6 .col-lg-4
</div>
</div>
<div class="row">
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
</div>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</template>

ASP.net Core Basic Modal Does Not Show Properly

I've been trying to get a basic modal pop up to show, but not having any luck. With fade on I see the page contents shift to the left, but the modal is invisible. When fade removed I see the modal over the entire screen. I have no idea why its doing what its doing. Hopefully someone here can see what I'm doing wrong.
<!-- START: Header Banner -->
<div>
<img src="/img/default-header-img.jpg" class="img-responsive">
</div>
<!-- END: Header Banner -->
<!-- Message board area -->
<br>
<div class="container">
<div class="strap-card strap-person">
<h2 class="mb20">Message Board</h2>
<p>Welcome #User.Identity.Name, Let's get started...</p>
</div>
</div>
<!-- END: Message board -->
<div class="container">
#*Method 1*#
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
#*End Method 1*#
<div class="row">
<div class="col-md-6">
<div class="strap-card strap-person text-center">
<div class="strap-card-text">
<div id="templates">
<h4>Select a Template</h4>
<form id="frmTemplates" asp-action="return false" class="strap-form mb60">
<select id="selTemplates" asp-for="TemplateId" asp-items="Model.Templates" class="form-control"></select>
<br />
<button type="button" id="btnStart" name="button" value="Start" #(ViewBag.DisableRangeStart == true ? "disabled='disabled'" : "") class="btn btn-primary">Start</button> <button type="button" id="btnStop" name="button" value="Stop" class="btn btn-primary">Stop</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="strap-card strap-person text-center">
<div class="strap-card-text">
<div id="environment">
<h4>Environment Description</h4>
<br />
<span id="templateDesc">#Html.Raw(Model.TemplateDesc)</span>
</div>
</div>
</div>
</div>
</div>
</div>
#section scripts {
<script>
$(function ()
{
$("#btnStart").click(function (e)
{
$("#loadingModal").modal();
setTimeout(function () { $("#loadingModal").modal("hide") }, 300000);
});
$("#btnStop").click(function (e)
{
});
});
</script>
}
I've tried placing the modal code in different areas but the results are the same.
I tried putting everything in jsfiddle for testing, but I have no idea how to use that site.

Try to make a test with code below:
<h1>Test</h1>
<!-- START: Header Banner -->
<div>
<img src="/img/default-header-img.jpg" class="img-responsive">
</div>
<!-- END: Header Banner -->
<!-- Message board area -->
<br>
<div class="container">
<div class="strap-card strap-person">
<h2 class="mb20">Message Board</h2>
<p>Welcome #User.Identity.Name, Let's get started...</p>
</div>
</div>
<!-- END: Message board -->
<div class="container">
#*Method 1*#
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
#*End Method 1*#
<div class="row">
<div class="col-md-6">
<div class="strap-card strap-person text-center">
<div class="strap-card-text">
<div id="templates">
<h4>Select a Template</h4>
<form id="frmTemplates" asp-action="return false" class="strap-form mb60">
<select id="selTemplates" class="form-control"></select>
<br />
<button type="button" id="btnStart" name="button" value="Start" #(ViewBag.DisableRangeStart == true ? "disabled='disabled'" : "") class="btn btn-primary">Start</button> <button type="button" id="btnStop" name="button" value="Stop" class="btn btn-primary">Stop</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="strap-card strap-person text-center">
<div class="strap-card-text">
<div id="environment">
<h4>Environment Description</h4>
<br />
#*<span id="templateDesc">#Html.Raw(Model.TemplateDesc)</span>*#
</div>
</div>
</div>
</div>
</div>
</div>
#section scripts {
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(function ()
{
$("#btnStart").click(function (e)
{
$("#loadingModal").modal();
setTimeout(function () { $("#loadingModal").modal("hide") }, 300000);
});
$("#btnStop").click(function (e)
{
});
});
</script>
}

Web page layout with bootstrap-4.1.2

My goal is to get like this.
I use bootstrap-grid.min.css from bootstrap-4.1.2
What do I do wrong? My code
<div class="wrapper d-flex flex-column" style="min-height: 100vh;">
<section class="main d-flex flex-grow-1">
<div class="container-fluid d-flex align-items-stretch">
<div class="row">
<div class="col-md-3">
<div class="menu">
Aside
</div>
</div>
<div class="col-md-9">
<div class="text">
Main
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
Footer
</footer>
</div>

You need to make changes in your structure. I have made some changes for you, please see if it serves the purpose.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<header class="footer">
Header
</header>
<div class="wrapper d-flex flex-column" style="min-height: calc(100vh - 24px);">
<section class="main d-flex flex-grow-1">
<div class="container-fluid">
<div class="row" style="height:100%;">
<div class="col col-md-3" style="background-color:blue;">
<div class="menu">
Aside
</div>
</div>
<div class="col col-md-9" style="background-color:pink;">
<div class="text">
Main
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
Footer
</footer>
</div>

Angular 2 click event is not displaying and not working

I am trying to put a click event in an anchor tag but the event is not showing in chrome.
below is the html
<div class="col-md-4 col-sm-6 col-xs-12 paddInner" *ngIf="module.valid">
<div class="row marLeftRight_0">
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="dashboard-icon ">
<img src="./assets/img/icon/Merchant_onboarding_03.png" alt="MerchantBoarding" />
</div>
</div>
<div class="col-md-8 col-sm-8 col-xs-8" >
<div class="dvIndexInnerHeader">
<a (click)="goTomethod()">ABC</a>
</div>
<p class="pSections">
asasasa
</p>
</div>
</div>
</div>
component.ts
public goTomethod() {
this.module.goTomethod();
}

Accordions collapse by default in mobile and expanded by default in desktop Bootstrap 3 responsive

I am creating few accordions using bootstrap 3. My requirement is all accordions should be expanded by default in 1024 resolution and above. on click it should hide
But in mobile devices it should be in collapse mode by default. on click it should expand
Here is my code:
<div class="panel-group" id="accordion">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 verticalBelowSpacing10px">
<!-- Asia Starts-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseSix">
Asia
</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse in">
<!-- panel content starts-->
<div class="panel-body">
<!-- flags-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">China
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">India
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Thailand
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Singapore
</div>
</div>
</div>
<!-- panel content ends-->
</div>
</div>
<!-- Asia ends-->
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 verticalBelowSpacing10px">
<!-- europe starts-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Europe
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse in">
<!-- panel content starts-->
<div class="panel-body">
<!-- flags-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Germany
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">The Netherlands
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Denmark
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Italy
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">France
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Belgium
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Sweden
</div>
</div>
</div>
<!-- panel content ends-->
</div>
</div>
<!-- europe ends-->
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 verticalBelowSpacing10px">
<!-- middle east north africa starts-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Middle East and North Africa
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<!-- flags-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">UAE
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Israel
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Saudi Arabia
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px">Egypt
</div>
</div>
</div>
<!-- flags-->
</div>
</div>
<!-- middle east north africa ends-->
</div>
</div>
<!-- 1st row ends-->
</div>
http://jsfiddle.net/monicaRegal/q5rLx1dn/1/embedded/result/
Thank you
Monica Mandal

Try this:
$(document).ready(function(){
var windowWidth = $(window).width();
if(windowWidth <= 1024) //for iPad & smaller devices
$('.panel-collapse').removeClass('in')
});

In your css:
#media (max-width: 768px)
{
.collapse.in {
display: none;
}
}

Abdulla's answer almost worked for me, however, I had to use collapse() instead of removeClass('in')
jQuery(document).ready(function(){
var windowWidth = jQuery(window).width();
if(windowWidth <= 1024) { //for iPad & smaller devices
jQuery('.panel-collapse').collapse()
}
});

Try This.
function adjustCollapseView(){
var desktopView = $(document).width();
if(desktopView >= "1024"){
$("#accordion a[data-toggle]").attr("data-toggle","");
$("#accordion .collapse").addClass("in").css("height","auto")
}else{
$("#accordion a[data-toggle]").attr("data-toggle","collapse");
$("#accordion .collapse").removeClass("in").css("height","0")
$("#accordion .collapse:first").addClass("in").css("height","auto")
}
}
$(function(){
adjustCollapseView();
$(window).on("resize", function(){
adjustCollapseView();
});
});