We Keep Coding

Bootstrap Notify Duplicate Notifications After Consequent AJAX Calls

I'm using the most recent release of Bootstrap Notify (v3.1.5) to show status messages after an AJAX call. It works as expected in the first call. After the first execution, every time the notify is called, its shows the previous notifications message.
Example:
1st call = 1 Notify message; 2nd call = 2 Notify messages; 3rd call =
3 Notify messages; ...
Bootstrap Notify Initialisation:
$.notify({
icon: icon,
title: title,
message: message
}, {
type: type,
allow_dismiss: true,
newest_on_top: false,
placement: {
from: "top",
align: "right"
},
offset: 20,
spacing: 10,
z_index: 100000,
delay: delay,
timer: 1000,
mouse_over: true,
animate: {
enter: 'animated fadeInDown',
exit: 'animated fadeOutUp'
}
});
How can i solve this issue?

Solved my issue. After some debugging i realized that the event was being triggered multiple times and that cause the notifications to pop up repeatedly. Really big rookie mistake...

you can prevent by using get all notifications length and prevent it.
if notify greater than 0 return false;
let notifylength = document.querySelectorAll('.bootstrap-notify-container');
if(notifylength.length !== 0){
return false;
}

Set fancybox to open on a different fancybox close

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

jQuery does not work when reload the page content via ajax

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();
}
});
});

AnythingSlider Fx Transition Flicker

On the first rotation of slides there is small flicker that occurs during the Fx transition. It seems to only occur on the first rotation of slides & goes away after the first repeat.
Demo Page: http://dl.dropbox.com/u/12310886/Work/anythingslider/slide_left.html
Any ideas? I haven't been able to figure it out so far.
Thanks in advance!

Try changing your mode to fade (demo):
$(function () {
$('#slider').anythingSlider({
mode: 'fade',
autoPlay: true,
delay: 2000,
pauseOnHover: false,
buildStartStop: false,
buildArrows: false
}).anythingSliderFx({
'.left .content-wrapper': ['left']
}, {
timeIn: 300,
timeOut: 350,
stopRepeat: true
});
});

Which wysiwyg editor works fine with fancybox?

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.