I use Bootstrap to display a popover, until there is with all this code below everything works normal.
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
I only need to load the content of the page via ajax, then I changed the code because when I load the content dynamically I need to delegate events, changed the code and it looked like this:
$('body').on('click','.emoticons',function()
{
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
});
Now my troubles started. The code works however when I click the first time it does not work, so it works when I click more than once on the link. What to do?
What's happening is that when you are clicking on the .emoticons and executing your popover function, it is at that moment that you are binding it to your click. That's why it doesn't work the first time, but it works afterwards. It starts listening to the click event after that.
Ideally, the solution is to run the .popover function when the new content is loaded (on your AJAX callback).
If you want to just copy paste my code and see if it works, you can do this:
$('body').on('click','.emoticons',function()
{
// Convert this element into a popover and then display it
$(this).popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {
return $('.emoticonimg').html();
}
}).popover('toggle');
});
But, I would NOT recommend this code specifically, since you are re-initializing your popover every time you click on it.
It's better and more clear if you bind all popovers after your AJAX request is done:
$.ajax( "BlaBlaBla.php" )
.done(function() {
// Convert all emoticons to popovers
$(".emoticons").popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {
return $('.emoticonimg').html();
}
});
});
It doesn't work the first time because the first click if firing off the body onclick handler which binds your popover.
Try something like this in your $(document).ready() function.
$(".emoticons").click(function(){
$(this).popover({
html : true,
placement : 'bottom',
animation : true,
delay: { show: 100, hide: 500 },
content: function() {return $('.emoticonimg').html();
}
});
});
Related
I am using jquery qtip2
I want its behaviour just like bootstrap tooltips where
on hover tooltip shows up , also in DOM
on mouseout tooltip hides, removed from DOM as well
Objective:
My objective is I am using lots of qtips, and they are taking unnecessary space in DOM and I want qtip2 to create dom element only when it is active.
JSFIDDLE: https://jsfiddle.net/bababalcksheep/5unavg0q/4/
Can't seem to make it work.Should it not be feature by default. Am I missing something from Docs ?
HTML:
Hover here!
JS:
$(document).ready(function() {
$('.qtiptxt').qtip({
prerender: false,
overwrite: true,
hide: {
event: 'mouseout'
},
events: {
hide: function(event, api) {
var target = api.elements.target;
var targetOptions = api.options;
// Destroy it immediately
api.destroy(true);
//re initialize using existing options
$(target).qtip(targetOptions);
}
}
});
});
It seems I did miss the docs. Here is the solution
https://jsfiddle.net/bababalcksheep/5unavg0q/7/
$(document).ready(function() {
//
// from https://github.com/qTip2/qTip2/wiki/Events-Guide#delegation-on--live--delegate
//
$('.qtiptxt').on('mouseover', function(event) {
$(this).qtip({
prerender: false,
overwrite: true,
show: {
event: event.type,
ready: true
},
hide: {
event: 'mouseout'
},
events: {
hidden: function(event, api) {
// Destroy it immediately
api.destroy(true);
}
}
}, event);
});
//
//
});
Semantic-ui ver. 2.0.8.
I currently use the following method to load dynamic content in a pop-up
JAVASCRIPT
var popupContent = null;
var popupLoading = '<i class="notched circle loading icon green"></i> wait...';
$('.vt').popup({
inline: true,
on: 'hover',
exclusive: true,
hoverable: true,
html: popupLoading,
variation: 'wide',
delay: {
show: 400,
hide: 400
},
onShow: function(el) { // load data (it could be called in an external function.)
var then = function(r) {
if (r.status) {
popupContent = r.data; // html string
} else {
// error
}
};
var data = {
id: el.dataset.id
};
ajax.data('http://example.site', data, then); // my custom $.ajax call
},
onVisible: function(el) { // replace popup content
this.html(popupUserVoteContent);
},
onHide: function(el) { // replace content with loading
this.html(popupLoading);
}
});
HTML
<h2 data-id="123" class="vt">10</h2>
<div class="ui popup" data-id="123"></div>
There 's a way to simplify the whole process?
For example with a element.popup ('refresh') after loading the new content?
I tried:
JAVASCRIPT
...
if (r.status) {
$('.ui.popup[data-id="123"]').html(r.data);
}
...
but it does not work.
I also tried using (replace) data-content into h2.vt but nothing.
The only improvement that comes to mind is to make the code a little cleaner (you only really need the onShow event, which fires before the popup shows) and avoid using a global variable (popupContent).
That said, the main idea is mostly the same - when the popup is supposed to show, you replace its content with some fake content (the loading animation), then trigger $.ajax and update the popup content as soon as the request completes.
var popupLoading = '<i class="notched circle loading icon green"></i> wait...';
$('.vt').popup({
inline: true,
on: 'hover',
exclusive: true,
hoverable: true,
html: popupLoading,
variation: 'wide',
delay: {
show: 400,
hide: 400
},
onShow: function (el) { // load data (it could be called in an external function.)
var popup = this;
popup.html(popupLoading);
$.ajax({
url: 'http://www.example.com/'
}).done(function(result) {
popup.html(result);
}).fail(function() {
popup.html('error');
});
}
});
Is there a way to set a fancybox to open whenever a separate fancybox closes?
I have tried the following
$('a.linkEditClass').fancybox({
href: "#editClassPanel",
closeClick: false,
autoDimensions: true,
autoScale: false,
afterClose: function() {
$.fancybox({
href: "#classInfoPanel"
});
}
});
But this doesn't seem to be doing anything. Here is my other fancybox code for reference
$('a#linkClassInfo').fancybox({
href: "#classInfoPanel",
// maxHeight: 350,
// maxWidth: 425,
closeClick: false,
autoDimensions: false,
autoScale: false
});
They both target div's.
When you close fancybox, it takes a little while for it to clean up and complete the closing process so, opening another fancybox while the clean up process is running may trigger a js error that voids the second box from opening.
Just give it a little bit of time and it should work so
afterClose: function () {
// wait for this box to close completely before opening the next one
setTimeout(function () {
$.fancybox({
href: "#classInfoPanel"
});
}, 300);
}
See JSFIDDLE
I try to add content on the fly to a CarouFredSel slider. The content is inserted fine but CourFredSel does not recognize the new content. Is there a way to tell the slider that the slide count has changed?
jQuery(document).ready(function() {
jQuery('#carousel').carouFredSel({
items: 4,
direction: "left",
responsive: true,
infinite: false,
circular: false,
scroll: {
items: 2,
duration: 1000
},
next: {
button: "#slider-button-next",
key: "right",
onBefore: function () {
loadAdditionalContent();
}
},
prev: {
button: "#slider-button-prev",
key: "left"
},
auto: {
play: false
}
});
});
function loadAdditionalContent () {
jQuery('#carousel').trigger('insertItem', ['<img src="http://dummyimage.com/200x200" class="added" />']);
}
Here is a fiddle that describes the problem: http://jsfiddle.net/bg0xyj8k/
there is nothing wrong with your code:
fix this in jsfidle: use external reference without https: http://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js
I did some changes in your code, did not understanding what are you trying to do there.
jQuery( "#slider-add-items" ).click(function() {
loadAdditionalContent();
});
function loadAdditionalContent () {
id++;
jQuery('#carousel').trigger('insertItem', ['<img src="http://dummyimage.com/200x200" class="added" id="'+ id +'" />']);
}
http://jsfiddle.net/bg0xyj8k/2/
UPDATE
- be more precise when you are asking someting
FIX 1: insert at next click before fist visible element - http://jsfiddle.net/bg0xyj8k/3/
FIX 2: insert on last position of the slider when next clicked - http://jsfiddle.net/bg0xyj8k/4/ - result => infinite next click
I used to work with tinymce, but it causes lot of troubles when I want to put it to fancybox (fails with second start of fancybox window). Cleditor doesn't work too (displays "true" instead of editor). Is there any editor which will work without making any strange tricks?
Edit:
$('.fancybox_with_wysiwyg').fancybox({padding: 1, scrolling: 'no',
beforeShow: function () { tinymce.execCommand('mceToggleEditor', false, 'fbwysiwyg'); },
beforeClose: function () { tinymce.EditorManager.execCommand('mceRemoveControl', true, 'fbwysiwyg'); }
});
Edit2 (fixed callbacks)
$('.fancybox_with_wysiwyg').fancybox({
padding: 1,
scrolling: 'no',
onComplete : function() {
tinyMCE.execCommand('mceToggleEditor', false, 'fbwysiwyg');
},
onCleanup : function() {
tinyMCE.execCommand('mceRemoveControl', false, 'fbwysiwyg' );
}
});
Solution (thanks to Thariama)
$('.fancybox_with_wysiwyg').fancybox({padding: 1, scrolling: 'no',
onComplete: function () { tinymce.execCommand('mceAddControl', false, 'fbwysiwyg'); },
onClosed: function () { tinyMCE.execCommand('mceRemoveControl', false, 'fbwysiwyg' ); }
});
>I used to work with tinymce, but it causes lot of troubles when I want to put
>it to fancybox (fails with second start of fancybox window).
The simple solution for this case is to shut down tinymce correctly before you reinitialize it the second time.
To shut your editor instance down call
tinyMCE.execCommand('mceRemoveControl', false, 'fbwysiwyg' );
Update: You need to use
$('.fancybox_with_wysiwyg').fancybox({padding: 1, scrolling: 'no',
beforeShow: function () { tinymce.execCommand('mceToggleEditor', false, 'fbwysiwyg'); },
beforeClose: function () { tinyMCE.execCommand('mceRemoveControl', false, 'fbwysiwyg' ); }
});
CKEditor definately works as I've been working on putting it inside a Fancybox this afternoon :)
The problem you may encounter is when a modal window plugin removes and recreates the textarea within the modal. In this case you will need to re-bind the WYSIWYG when the textarea is shown.