FIDDLE: http://jsfiddle.net/2patspw2/3429/
I am using featherlight as my modal box and am running lightslider inside of it. It runs fine the first time it is clicked, but them for some reason it seems to bug out and duplicate itself. I had thought it might be duplicate slides so I read light slider documentation and added this:
onSliderLoad: function(el) {
el.lightGallery({
selector: '.gal .lslide'
});
This didn't fix the problem, so then I tried doing an each() of function (index) like so:
$('.inline').each(function(index) {
$(document).on("click", '.modal', function() {
// relevant code
});
});
I bound it to a delegated event since I have to activate via an on:click. However the element still seems to duplicate itself?
HTML:
<a href=".inline" class="modal" data-featherlight>Inline</a>
<div class="inline">
<ul class="gal">
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg"> TEST!!!!
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg"> YEAH!!!
</ul>
</div>
<a href=".inline-two" class="modal" data-featherlight>Inline2</a>
<div class="inline-two">
<ul class="gal">
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg"> asfasdf
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg"> YEAH!!!
</ul>
</div>
jQuery:
$(document).each(function(index) {
$('.modal').on("click", function() {
$('.gal').lightSlider({
gallery: true,
item: 1,
loop: true,
thumbItem: 9,
slideMargin: 0,
enableDrag: false,
currentPagerPosition: 'left',
onSliderLoad: function(el) {
el.lightGallery({
selector: '.gal .lslide'
});
}
});
})
});
Why is the carousel essentially duplicate the navigation and bugging out?
Note I tried doing loop: false as well, and it didn't change anything.
Related
Installed lightGallery today on my site and here is the part of code:
<div class="portfolio-content">
<ul id="portfolio_filters" class="portfolio-filters">
<li class="active">
<a class="filter btn btn-sm btn-link grph active" data-group="graphics">Banners</a>
</li>
<li>
<a class="filter btn btn-sm btn-link" data-group="logo">Logo</a>
</li>
</ul>
<div id="portfolio_grid" class="portfolio-grid portfolio-masonry masonry-grid-3">
<figure class="gallery-graphics" data-src="images/bnrs/01-bnr.png" data-sub-html="<h4>Banner 1</h4>" data-groups='["graphics"]'>
<img class="img-responsive" src="images/bnrs/01-bnr.png">
</figure>
<figure class="gallery-logo" data-src="images/logo/01-logo.png" data-sub-html="<h4>Logo 1</h4>" data-groups='["logo"]'>
<img class="img-responsive" src="images/logo/01-logo.png">
</figure>
</div>
</div>
Single main container with id #portfolio_grid has 2 galleries with different selectors - 1 for banner images, 2 for logos. I want to see 2 different galleries on click showing 1/1 images each instead of 1/2, so I tried to understand lightGallery HTML markup instructions and wrote this code:
$('#portfolio_grid').lightGallery({
hash: false,
selector: '.gallery-graphics'
});
$('#portfolio_grid').lightGallery({
hash: false,
selector: '.gallery-logo'
});
which normally works for first gallery, but doesn't work for second. I tried to wrap <figure>...</figure> in divs with unique id, but in my case it breaks the site.
After this I tried another solution relating to lightGallery's own destroy() function and wrote this code which partially works only once - I have 1/1 image in first gallery and 1/1 image in second gallery. Second click on gallery image breaks the site.
var $lg = $('#portfolio_grid');
$lg.lightGallery({
hash: false,
selector: '.gallery-graphics'
});
$lg.on('onCloseAfter.lg', function(event) {
$lg.data('lightGallery').destroy('true');
$lg.lightGallery({
hash: false,
selector: '.gallery-logo'
});
});
How to make lightgallery work with single id and many different selectors? Please help.
Try this: (cleaning up both lightGalleries)
var $lg = $('#portfolio_grid');
$lg.lightGallery({
hash: false,
selector: '.gallery-graphics'
});
$lg.on('onCloseAfter.lg',function(event){
$lg.data('lightGallery').destroy('true');
});
$lg.lightGallery({
hash: false,
selector: '.gallery-logo'
});
$lg.on('onCloseAfter.lg',function(event){
$lg.data('lightGallery').destroy('true');
});
I'm having a strange problem when using fullCalendar along with Bootstrap, having the calendar rendered within a non active tab pane. I'm using the AgendaView, and it's initially displayed with the column for hours with just 1 pixel of width assigned to it.
It's placed within the "Operarios" tab.
But the biggest problem is when rendering the events. They all are displayed compressed at the top of the timetable.
Then if I resize the browser, or the frame, if I'm using Chrome Dev Tools or similar, then it's automatically re-rendered and it's correctly displayed.
You may check it out here:
https://codepen.io/luisapuyen/pen/RYXZPr
The HTML:
+ function($) {
$(function() {
var opcionesCalendario = {
selectable: true,
unselectAuto: false,
locale: 'es',
defaultView: 'agendaWeek',
header: false,
footer: false,
height: 400,
columnHeaderFormat: 'ddd',
eventColor: '#ffdc11',
views: {
agenda: { // name of view
titleFormat: '',
allDaySlot: false,
slotEventOverlap: false,
minTime: '07:00:00',
maxTime: '23:00:00',
slotDuration: '01:00:00',
footer: false
}
},
select: function(startDate, endDate, event, view) {
var evento = [{
start: startDate,
end: endDate
}];
$calendario.fullCalendar('addEventSource', evento);
console.log('selected ' + startDate.format() + ' to ' + endDate.format(), view);
}
},
$body = $('body'),
$tabs = $body.find('#tabs-panel-autovisita'),
$forms = $body.find('form'),
$operariosSel = $forms.filter('[name="operarios"]').find('select[name="operarios"]')
$calendario = $body.find('.calendario').fullCalendar(opcionesCalendario);
// INICIO
init();
function init() {
mostrarRangos();
$operariosSel.on('change', function() {
mostrarRangos();
});
}
function obtenerDiaInicial() {
return moment().isoWeekday(1);
}
function mostrarRangosOperarioCalendario(rangos) {
var diaInicialMoment = obtenerDiaInicial(),
diaMoment,
diaSemana,
eventos = [];
$.each(rangos, function(i, rango) {
diaSemana = +rango.dia_semana - 1;
diaMoment = diaInicialMoment.clone().add(diaSemana, 'days');
eventos.push({
start: moment(diaMoment.format('YYYY-MM-DD') + 'T' + rango.hora_inicio),
end: moment(diaMoment.format('YYYY-MM-DD') + 'T' + rango.hora_fin)
});
});
$calendario.fullCalendar('removeEvents')
$calendario.fullCalendar('renderEvents', eventos);
}
function obtenerRangosOperario(idOp) {
// ajax request that returns:
var res = JSON.parse('{"rangos":[{"dia_semana":"2","hora_inicio":"11:00:00","hora_fin":"13:00:00"},{"dia_semana":"1","hora_inicio":"09:00:00","hora_fin":"14:00:00"},{"dia_semana":"4","hora_inicio":"10:00:00","hora_fin":"17:00:00"},{"dia_semana":"3","hora_inicio":"14:00:00","hora_fin":"18:00:00"}],"ok":"1"}');
mostrarRangosOperarioCalendario(res.rangos);
}
function mostrarRangos() {
var idOp = +$operariosSel.val();
obtenerRangosOperario(idOp);
}
});
}(jQuery);
<div class="container">
<div class="row">
<div class="col-sm">
<h3>Configuración Auto-visitas</h3>
<nav>
<div class="nav nav-tabs" id="tabs-autovisita" role="tablist">
<a class="nav-item nav-link active" data-toggle="tab" role="tab" href="#general">General</a>
<a class="nav-item nav-link" data-toggle="tab" role="tab" href="#operarios">Operarios</a>
<a class="nav-item nav-link" data-toggle="tab" role="tab" href="#companyias">Compañías</a>
</div>
</nav>
<div class="tab-content">
<div class="tab-pane show active" id="general" role="tabpanel">
</div>
<div class="tab-pane" id="operarios" role="tabpanel">
<form method="post" name="operarios">
<div class="form-group">
<label>Operarios</label>
<select name="operarios" class="form-control dato">
<option value="0">Todos</option>
</select>
</div>
<div class="calendario dato"></div>
<button type="submit" class="btn btn-primary guardar">Guardar</button>
</form>
</div>
<div class="tab-pane" id="companyias" role="tabpanel">
</div>
</div>
</div>
</div>
</div>
I'm not sure whether it's a bug produced when using fullCalendar and Bootstrap together.
The only way I've found it works is having the calendar in the active pane at first. But since semantically it corresponds to the first tab to be the one which must be active, I'd like to find a better solution.
Any ideas?
Fullcalendar is failing to retrieve sizes and dimensions of elements because they are set to display: none. You can see that from computed styles on page refresh. Your events are supposed to have a top and bottom set but instead they receive a value of 0 for both.
This is why your events are all "displayed compressed at the top of the timetable".
A simple fix is to listen for a tab change event and re-render fullcalendar.
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
$calendario.fullCalendar( 'rerenderEvents' );
});
Here's a functioning example.
In React fullcalendar (version 5), I could not call the render or rerender method.
FullCalendar automatically updates size if it listens to window resize events. I just the trigger resize event when the calendar tab is visible with some delay.
Refer following code
setTimeout(() => window.dispatchEvent(new Event('resize')), 500)
So I have two lists, connected in one-direction so that items from one can go to the other, but nothing can move into the origin list. What kind of click function do i need so that I can move items back from where they came?
$(function() {
$( ".current-campaign , .past-campaigns, .new-campaign" ).sortable({
connectWith: ".new-campaign",
handle: ".panel-heading",
cancel: ".portlet-toggle",
placeholder: "panel-placeholder",
containment: "document",
delay: 150,
opacity: .75,
revert: 50,
start: function(e, ui){
ui.placeholder.height(ui.item.height());
}
});
New Campaign
<ul class="new-campaign">
</ul>
Past Campaigns
<ul class="past-campaigns">
<li>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"> Message
<a class="pull-right cancel" href="#"><i class="fa fa-times"></i></a></h3>
<span>Voiced by: Joe</span>
</div>
<div class="panel-body">
Message Copy
</div>
</div>
</li>
</ul>
I've tried doing something like this, but it doesn't work (albeit i'm no pro at javascript)
$( ".cancel ").click(function() {
$( this ).sortable( "cancel" );
});
You need to detach all of the elements on your second list and append the back to the first list. If order is important to you, then you need to create some ordering logic using something like a data-attribute that represents the order the elements on the first list were originally in.
For example:
<li data-order="1">...</li>
<li data-order="2">...</li>
<li data-order="3">...</li>
...
Use jQuery's detach function to remove an element from the DOM, but maintain a reference to it in memory so that you may insert it somewhere else.
Example:
var items = $('li').detach()
$('#someDivId').append(items)
Wrap that in a click function and you should be good to go. The jQuery documentation for the methods mentioned above can be found at:
Detach
Append
i'm working on a site which uses jquery v1.6.2. i want to show a cluetip using local content for all anchors of a given class. however the localcontent in the cluetip is only showing up for the first two anchors of this class. i have simplified the problem down to the following code: (jsfiddle here)
$(function() {
$('a.triggerxxx').cluetip({
activation: "click",
cluetipClass: "jtip",
local: true,
hideLocal: true,
sticky: true
});
});
<a class="triggerxxx" href="#" title="cluetip title" rel="div.cluetip-contentxxx">trigger text 1</a><br>
<a class="triggerxxx" href="#" title="cluetip title" rel="div.cluetip-contentxxx">trigger text 2</a><br>
<a class="triggerxxx" href="#" title="cluetip title" rel="div.cluetip-contentxxx">trigger text 3</a><br>
<a class="triggerxxx" href="#" title="cluetip title" rel="div.cluetip-contentxxx">trigger text 4</a>
<div class="cluetip-contentxxx">this content should show in all cluetips, but it only shows up in the first two</div>
is cluetip not meant to work this way, or am i doing something wrong?
Try this
$(function() {
$('a.triggerxxx').each(function(index) {
$(this).cluetip({
activation: "click",
cluetipClass: "jtip",
local: true,
hideLocal: true,
sticky: true
});
});
});
I am trying to toggle my class once clicked but i am having trouble doing so - if anyone can point out what i am missing or doing wrong that would be great.
<a class="rGroupIcons icon-plus addUsersToGroup float_right" href="#" data-bind="attr: { 'data-user-id': ID()}"></a>
<div class="Roles fade in" data-bind="foreach: $parent.Roles()">
<a style="display: none;" class="roleType btn addUsersWithGroupRole" data-bind="text: RoleTypeName, attr: { 'data-roletype-id': RoleId() }"></a>
</div>
Javascript
$(document).on('click', '.addUsersToGroup', function (event) {
$(".addUsersToGroup", $(this)).toggleClass("icon-plus icon-minus");
});
You just need to use $(this) as at the moment you are looking for .addUsertsToGroup within the element addUsertsToGroup
$(document).on('click', '.addUsersToGroup', function (event) {
$(this).toggleClass("icon-plus icon-minus");
});
Working example here http://jsfiddle.net/domjgreen/NLYNK/