Develop Reference

Lightslider bugging out inside featherlight on second click

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.

WebUI Popover cannot set title using html element

I gave up on Bootstrap popover, and went looking. I found WebUI Popover which has all the functionality i am looking for.
But I am having trouble setting the title of the popover using the html content of an element on the page. I get undefined in console.log() and the title loads empty. The html I am trying to access is dynamically created.
Where I think there is a bug in the plugin is that the content loads perfectly from another element on the page.
I have a FIDDLE here.
My WebUI Popover code is:
// Popover Menu initialize
$('.icon-popover-menu').webuiPopover({
placement: 'left',
trigger: 'click',
closeable: true,
multi: false,
animation: 'pop',
cache: 'false',
type: 'html',
width: '220',
title: function() {
return $(this).closest('td.row-icon').find('.btn-row-popover-menu-head').html();
},
content: function() {
return $(this).closest('td.row-icon').find('.btn-row-popover-menu-body').html();
}
});
// Hide popover when screen changes size
$(window).on('resize', function() {
WebuiPopovers.hideAll();
});
$(window).on('scroll', function() {
WebuiPopovers.hideAll();
});
A sample of my HTML is:
<table class="fiddle">
<tr>
<td class="row-icon">
<button class="icon-popover-menu ion-fw btn-row-popover-menu">BTN</button>
<div style="display:none;">
<div class="btn-row-popover-menu-head">
<span>THIS IS THE TITLE</span>
</div>
<div class="btn-row-popover-menu-body">
<div class="input-group" role="group">
<a class="btn btn-app btn-icon-menu btn-popover-first" href="#">
EDIT
</a>
<a class="btn btn-app btn-icon-menu-danger" href="#">
DELETE
<br>
<span class="transaction-menu-legend">DELETE</span>
</a>
</div>
</div>
</div>
</td>
</table>
Any help is appreciated.

title: function() {
return $(event.target).closest('td.row-icon').find('.btn-row-popover-menu-head').html();
},
This works fine. By doing $(this) you are trying to access the title element of the popover which obviously has no closest td.row-icon. Hence it is undefined.

JQuery UI sortable - possible to cancel specific elements?

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

Sliding images loaded by append()

Got an annoying bug i can't fix.
I append a div and put the slider markup inside
$(article_box).append('[MARKUP]');
$('#screenshot-carousel').carouFredSel({
responsive: true,
// scroll: { fx: "crossfade", duration: "1500" },
items: {
width: 580
},
auto: false,
prev : {
button : ".event .prevPhoto",
key : "left"
},
next : {
button : ".event .nextPhoto",
key : "right"
}
});
Here markup is:
<div class="photo-block" id="'+id+'">
<i class="icon-red icon-in-nav icon-remove"></i>
<div class="controls">
<p class="slides-counter"><span id="the_num">0</span> из <span id="out_of">0</span></p>
</div>
<ul id="screenshot-carousel" class="fixclear">
<li><a class="prettyPhoto_transparent" href="<?php echo Yii::app()->request->baseUrl; ?>/fileuploader/index.html?iframe=true&height=600"><img src="/images/quotes/addImages600.jpg" alt=""></a></li>
<li id="additional"><a class="prettyPhoto_transparent" href="<?php echo Yii::app()->request->baseUrl; ?>/fileuploader/index.html?iframe=true&height=600"><img src="/images/quotes/addImages600.jpg" alt=""></a></li>
</ul>
</div>
What i get: the code inserts the markup, and i can see it in browser code viewer (images are there and i can open them in separate tab), but i can't see images in slider. Slider doesn't show slides, actually. All i see is control buttons. There is no bug shown in console , so the code seems to be clear, but what's wrong with showing slides/images?

Isotope hide on click

My site has all elements displayed by default.
Isotope has the inbuilt method 'filter' - ie show ONLY this.
I'd like to make a function where I hide/show an element based on clicking on a button on screen - ie hide ONLY this (and show the others) / unhide this (and show the others).
Here's what I'm doing code-wise.
var music = $('#music').isotope();
$('nav button').on('click', function () {
music.isotope({
filter: "div." + $(this).attr("class")
});

With filtering, the filter parameter must match items in your HTML markup, if not the filter will not return anything.
FIDDLE DEMO: http://jsfiddle.net/XWVhc/1/
I can only provide an alternate example as you have not provided any html markup so that we could debug your current code, however, I'll explain how this works.
HTML FOR FILTERS:
Here we have a few simple buttons that will filter our items with the data-filter attribute attached to each button.
<div id="filter-buttons-holder">
<div class="filter-button" data-filter=".dog">DOG</div>
<div class="filter-button" data-filter=".cat">CAT</div>
<div class="filter-button" data-filter=".foo">FOO</div>
<div class="filter-button" data-filter=".bar">BAR</div>
<div class="filter-button selected" data-filter=".dog, .foo, .cat, .bar">SHOW ALL</div>
</div>
HTML FOR ISOTOPE ITEMS:
Here's the markup for our isotope items, notice that each item has a class of isotope-item and also has a class of what 'category' it belongs too, you can add multiple classes and it will still filter as expected.
<div id="module-columns-holder" class="isotope">
<a href="/" class="dog isotope-item">
<div><h1>DOG</h1></div>
</a>
<a href="/" class="cat foo isotope-item">
<div><h1>CAT</h1></div>
</a>
<a href="/" class="dog isotope-item">
<div><h1>DOG</h1></div>
</a>
<a href="/" class="foo isotope-item">
<div><h1>FOO</h1></div>
</a>
<a href="/" class="bar isotope-item">
<div><h1>BAR</h1></div>
</a>
</div>
JAVASCRIPT FILTERING
Here we set up our isotope container, notice the last data attribute is a filter, this is effectively what you're after, however you can specify which 'category' you want to filter on initially.
//Setup isotope for filters
var isotopeContainer = $('#module-columns-holder');
isotopeContainer.isotope({
itemSelector: '.isotope-item',
layoutMode : 'fitRows',
animationOptions : {
queue : false,
duration : 750,
easing: 'linear'
},
filter: '.dog, .cat, .foo, .bar'
});
CLICK EVENT FOR FILTERS
You can attach a filter to the buttons we created earlier so that you can have live filtering
$('#filter-buttons-holder .filter-button').on('click',function(){
var filters = $(this).data('filter');
var parent = $(this).closest('#filter-buttons-holder');
parent.find('.selected').removeClass('selected');
$(this).addClass('selected');
isotopeContainer.isotope({ filter: filters });
return false;
});
Hope this helps