How do I get the ID of the current element(s) visible with Owl Carousel v2? - owl-carousel-2

How do I get the ID of the current element(s) visible with Owl Carousel v2?
$('.owl-carousel').on('dragged.owl.carousel', function(e) {
// get id; only one slide visible in this case
});
<div class="owl-carousel owl-theme">
<div class="item" id='1'><h4>1</h4></div>
<div class="item" id='2'><h4>2</h4></div>
<div class="item" id='3'><h4>3</h4></div>
<div class="item" id='4'><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
The callback would return "1" if the first slide is visible.

Related

Vue v-for is displaying more than one image on click

I am using vue to show a photo that is being pulled from a mysql DB.
I loop through the images but when I click to show, all the images show instead of just the one that I want to show (the single image button I clicked). How do I get only one image to show up at a time?
UPDATED
<div>
<div v-for="(image, index) in images" :key="index">
<div class="dropdown">
<div>
<a class="dropdown-item preview-link" #click="togglePreview(index)">
Preview
</a>
</div>
</div>
<div v-if="currentIndex === index" class="modal-dialog modal-dialog-centered modal-md" role="image" style="max-width: 700px;">
<div class="modal-content" style="overflow: hidden;">
<div class="modal-header">
<h5 class="modal-title">{{image.title}}</h5>
<button type="button" class="close modal-close-button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img :src="'/storage/images/' + image.name + '.jpg'">
</div>
</div>
</div>
</div>
</div>
In my vue methods:
togglePreview(index) {
this.currentIndex = this.currentIndex === index?-1:index
},
Vue Data
data() {
return {
currentIndex: -1,
}
},

Vue: method is not a function within inline-template component tag

I have this component:
<template>
<div class="modal fade modal-primary" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="ImageLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg animated zoomIn animated-3x">
<div class="modal-content">
<ais-index index-name="templates"
app-id="BZF8JU37VR"
api-key="33936dae4a732cde18cc6d77ba396b27">
<div class="modal-header">
<algolia-menu :attribute="category"
:class-names="{ 'nav-item__item': 'nav-color', 'nav-item__link': 'nav-link', 'nav-item__item--active': 'active'}">
</algolia-menu>
</div>
<div class="modal-body">
<div class="container">
<ais-results :results-per-page="10" inline-template>
<div class="row">
<div class="col-6" v-for="result in results.slice(0, 5)" :key="result.objectID">
<div class="card" #click="getTemplate(result)">
<img class="img-fluid" v-lazy="result.image"/>
<div class="card-body">
<p>{{ result.description }}</p>
</div>
<div class="card-footer">
<small>Created: {{ result.created_at }}</small>
</div>
</div>
</div>
<div class="col-6" v-for="result in results.slice(5, 10)" :key="result.objectID">
<div class="card">
<img class="img-fluid" v-lazy="result.image"/>
<div class="card-body">
<p>{{ result.description }}</p>
</div>
<div class="card-footer">
<small>Created: {{ result.created_at }}</small>
</div>
</div>
</div>
</div>
</ais-results>
</div>
</div>
</ais-index>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</template>
<script>
import Algolia from '#/components/algolia/menu';
export default {
components: {
"algolia-menu": Algolia,
},
data() {
return {
category: 'category',
};
},
methods: {
getTemplate(result) {
console.log(result)
}
}
}
</script>
I have a click listener on the .card div within my <ais-results> tag which calls my getTemplate method. But, whenever I click on that element, it produces this error:
imageModal.vue?8d74:85 Uncaught TypeError: _vm.getTemplate is not a
function
at click (imageModal.vue?8d74:85)
at invoker (vue.runtime.esm.js:2023)
at HTMLDivElement.fn._withTask.fn._withTask
Why is this happening? I have tried #click.native as well, but that didn't work.
The issue is that you’re using an inline template for your <ais-results> component tag, so the data references within that tag are scoped to the <ais-results> instance. This means Vue is looking for a getTemplate method on the <ais-results> component, but not finding it.
In your case, instead of directly calling getTemplate, you could emit an event with the result data and then listen for the event on the <ais-results> tag.
Below is a simplified example where clicking on the .card div in the inline template will emit a card-click event (#click="$emit('card-click', result)"). The <ais-results> tag has a listener for that event (#card-click="getTemplate"), so when the card-click event is fired, the getTemplate method will be called with the result data being passed automatically.
<ais-results :results-per-page="10" inline-template #card-click="getTemplate">
<div class="row">
<div class="col-6" v-for="result in results.slice(0, 5)" :key="result.objectID">
<div class="card" #click="$emit('card-click', result)">
...
</div>
</div>
</div>
</ais-results>

how to bind another event into the close button in sweet alert2 modal in angular5

I am trying to add another code while closing of sweet alert2 modal.Because while closing sweet alert2 modal,it removes the content first then only it removes the modal container.So the problem is it first showing a blank container before closing of the modal.How can I solve this issue?
modal.component.ts
<swal #reqCallSwal (beforeOpen)="beforeOpen($event)" (open)="onOpen($event)" [showConfirmButton]="false" [showCancelButton]="false" [showCloseButton]="true" customClass="reqCallModalSwtOuter" (close)="modalReset($event)" [allowOutsideClick]="false">
<ng-container *swalPartial>
<!--<div class="scrollbarToggle"></div>-->
<div id="rcyc-modal-requestCall" *ngIf="apiResponseBStatus && apiResponseCStatus">
<section class="content_section">
<div class="l-container-wrapper">
<div class="l-container intro-header leadinto">
<div class="l-container row">
<div *ngIf="apiResponseBStatus" class="body-copy">
<div class="headline-block c01_D intro-header leadinto">
<!-- <h4 *ngIf="apiResponseB?.field_sub_header" [title]="apiresponseB?.field_sub_header | convertHtml" [innerHtml]="apiResponseB?.field_sub_header"></h4> -->
<h1 *ngIf="apiResponseB?.title" [title]="apiresponseB?.title | convertHtml" class="headline" [innerHtml]="apiResponseB?.title"></h1>
</div>
<p *ngIf="apiResponseB?.field_summery" [innerHtml]="apiResponseB?.field_summery"></p>
</div>
<div class="row is-10-2">
<div class="column is-9 lead_form_right">
<form id="requestCallFormId" name="requestCallForm" [formGroup]="lead_gen_form" novalidate autocomplete="false">
<fieldset>
<div class="basic-form_group lead_form_field">
<!-- name_sec -->
<div class="row is-6-6">
<div class="column is-6 form_fields formContainer">
<label class="basic-form_label form_label basic-form_label-required">First Name</label>
<input id="firstNameId" class="basic-form_input basic-form_input-half" type="text" formControlName="firstname" pattern="[a-zA-Z ]*" placeholder="First Name" maxlength="30">
<span *ngIf="!lead_gen_form.controls.firstname.valid && !fnameWhitespaceError && lead_gen_form.controls.firstname.touched" >This field is required</span>
<span *ngIf="fnameWhitespaceError" [innerHtml]="fnameValidationMsg"></span>
</div>
<div class="column is-6 form_fields formContainer">
<label class="basic-form_label form_label basic-form_label-required">Last Name</label>
<input id="lastNameId" class="basic-form_input basic-form_input-half" type="text" formControlName="lastname" pattern="[a-zA-Z ]*" placeholder="Last Name" maxlength="60">
<span *ngIf="!lead_gen_form.controls.lastname.valid && !lnameWhitespaceError && lead_gen_form.controls.lastname.touched" >This field is required</span>
<span *ngIf="lnameWhitespaceError" [innerHtml]="lnameValidationMsg"></span>
</div>
</div>
<!-- name_sec -->
</div>
</div>
</fieldset>
</form>
<div class="row is-6-6">
<!-- <p class="succ" *ngIf="succmsg">THANK YOU FOR REGISTERING</p> -->
<div class="column is-6">
<div class="row is-6-6">
<div class="column is-6 submit_btn">
<input type="submit" id="submitId" (click)="leadGenSubmit()" [disabled]="lead_gen_form.invalid || zipcodereq || emailErr || countryerr || fnameWhitespaceError || lnameWhitespaceError || lead_gen_form.controls.country.value==0" value="Submit">
</div>
<div class="column is-6 clear_btn">
<input type="reset" id="resetId" (click)="ngOnInit()" value="Clear">
</div>
</div>
</div>
<div class="column is-6"></div>
</div>
<div *ngIf="apiResponseCStatus" [innerHtml]="apiResponseC.field_summery"></div>
</div>
<div class="column is-3"></div>
</div>
</div>
</div>
</div>
</section>
</div>
</ng-container>
</swal>
<!-- <button (click)="modalOpen()">click</button> -->
in the above code I am added my angular templates into the sweet alert2 modal with the help of 'swalpartial' directive.I also changed the animation of opening and closing of modal with the help of css animation.
**modal.css**
div.swal2-show{
/*-webkit-animation: fadein 1.3s;
animation:fadein 1.3s;*/
-webkit-animation:zoomin 0.5s ease-in;/* Safari, Chrome and Opera > 12.1 */
-moz-animation:zoomin 0.5s ease-in;/* Firefox < 16 */
-ms-animation:zoomin 0.5s ease-in;/* Internet Explorer */
-o-animation:zoomin 0.5s ease-in;/* Opera < 12.1 */
animation:zoomin 0.5s ease-in;
}
div.swal2-hide {
-webkit-animation:zoomin 0.5s ease-out;
animation:zoomout 0.5s ease-in;
}
the animation works nicely,but when I close the modal it gets blank and then the animation will work.I found the reason after I pass an event into the close() of sweet alert2 modal.When closing the modal it removes a div element by default whose class name is 'swal2-content' where all my modal contents are inside this div then only it removes all class related to sweet alert2.How can I prevent removing of 'swal2-content' class firstly while closing the modal?

Selenium WebDriver click child element

I'm using selenium and I want to click a child element with 2 as value.
This is the full code:
<div class="dialer-keypad">
<div class="dialpad-row">
<div class="key">
<div class="value">1</div>
<div class="letters"></div>
</div>
<div class="key">
<div class="value">2</div>
<div class="letters">ABC</div>
</div>
<div class="key">
<div class="value">3</div>
<div class="letters">DEF</div>
</div>
</div>
<div class="dialpad-row">
<div class="key">
<div class="value">4</div>
<div class="letters">GHI</div>
</div>
<div class="key">
<div class="value">5</div>
<div class="letters">JKL</div>
</div>
<div class="key">
<div class="value">6</div>
<div class="letters">MNO</div>
</div>
</div>
</div>
So my question is How can I click this element?
<div class="value">2</div>
You should be able do this quite succinctly with XPath:
//*[contains(#class, 'value') and text()='2']
Alternatively, assuming that the markup was static you could target the element using specific indices. For example:
.dialpad-row:first-child .key:nth-child(2) .value
Simply use xpath
//div[contains (#class,'value') and contains (text(),'2')]

bootstrap textarea with panel

I am having issues making the text area fill the width of the panel any ideas??
My code is below
<div class="panel panel-primary">
<div id="div_EssentialInformation" class="panel-heading">Essential information</div>
<div id="content" style="display:none;">
<div class="panel-body">
<textarea class="form-control" rows="3" style="resize:none;"></textarea>
</div>
<div class="panel-footer clearfix">
<div class="pull-right">
<a id="btn_edit" class="btn btn-primary">Edit</a>
<a id="btn_save" class="btn btn-danger" style="display:none">Save</a>
</div>
</div>
</div>
</div>
i have a script that toggles the display of the content div, below is the js script
$("#div_EssentialInformation").click(function () {
$("#content").slideToggle(500);
})
I am getting this
Add this to your css
textarea {
width: 100% !important;
}