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
});
});
});
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');
});
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.
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.
I've used the following code to init the bootstrap popover.
Markup
<a class="help_popup" rel="popover" data-popover-content="#apiSearchTips" data-placement="bottom">
<span class="icon fw-stack fw-lg add-margin-left-1x" stylZ="font-size:10px">
<i class="fw fw-circle fw-stack-2x"></i>
<i class="fw fw-question fw-stack-1x fw-inverse"></i>
</span>
</a>
<div id="apiSearchTips" class="hide help-popover-content" >
//Popover content
</div>
Code
$('a[rel="popover"]').popover({
container: 'body',
html: true,
trigger:'click',
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
}).click(function(e) {
e.preventDefault();
});
This does not work unless I change the selector attribute to a different one rather than rel="popover". For an example say I change it to data-trigger="popover" and it works. Why does this happen?
My HTML page contains:
<a id="show" href="monlien1" onclick="show()"> Facebook</a>
<a id="show" href="monlien2" onclick="show()"> Twitter</a>
<a id="show" href="monlien3" onclick="show()"> Google</a>
I want to show the href attribute for each click. For example if I click on "Facebook", it will show monlien1, on "Twitter" monlien2, etc.
I tried this but it shows only the value of the first link, monlien1, even if I click on "Twitter" or "Google".
function show(){
var lien=$('#show').attr('href');
alert(''+lien+'');
}
How can I do this?
Start using classes (you shouldn't have the same ID multiple times, it will cause issues) also, pass in this as an argument:
<a class="show" href="monlien1" onclick="show(this)"> Facebook</a>
<a class="show" href="monlien2" onclick="show(this)"> Twitter</a>
<a class="show" href="monlien3" onclick="show(this)"> Google</a>
function show(obj) {
var lien = obj.href;
alert(''+lien+'');
}
Edit: Thanks #FelixKling -- the equivalent to $('#show').attr('href') is obj.getAttribute('href'). obj.href will return a full URL not the actual value of the href attribute.
You cannot have multiple elements with same ID. $('#show') will always select the first elements with that ID.
Give the elements a class and use jQuery to bind the event handler:
<a class="show" href="monlien1"> Facebook</a>
<a class="show" href="monlien2"> Twitter</a>
<a class="show" href="monlien3"> Google</a>
and
$('.show').click(function() {
alert($(this).attr('href'));
});
Learn about jQuery and event handling: http://learn.jquery.com/events/.