We Keep Coding

Open Jquery-ui Tooltip only on click

I've this code
function DrawTipsProgress(postid, ajaxurl) {
var data = {
action: 'ajax_action',
post_id: postid
}
jQuery('#dashicon-' + postid).on("click", function () {
jQuery.post(ajaxurl, data, function(response) {
jQuery('#dashicon-' + postid).tooltip({
position: { my: 'center bottom' , at: 'center top-10' },
tooltipClass: "myclass",
content: response
});
jQuery('#dashicon-' + postid).tooltip('open');
});
});
}
On first click, it work as aspected.
If later I try to hover again the button without click it the tooltip popup again, and the click just do the ajax call but doesn't open the tooltip.

The tooltip is triggered on hover. In your code, it is not being bound to the element until the 'click' event occurs, so it's not really the click causing it to display... it's the hover following the click. I believe what you need to do is use enable and disable. Here is an example fiddle.
http://jsfiddle.net/ecropolis/bh4ctmuj/
Anchor text
$('a').tooltip({
position: { my: 'center bottom' , at: 'center top-10' },
tooltipClass: "myclass",
disabled: true,
close: function( event, ui ) {
$(this).tooltip('disable');
/* instead of $(this) you could also use $(event.target) */
}
});
$('a').on('click', function () {
$(this).tooltip('enable').tooltip('open');
});

How to call jQuery Lightbox with AJAX

How can I call jQuery Lightbox2 with AJAX.
I am using this function for my project.
$(document).ready(function() {
$(".paylasimi-goster").click(function() {
event.preventDefault();
var id = $(this).data("id");
$.ajax({
url: "gonderiyi_goster.php?msg_id=" + id,
type: 'get',
beforeSend: function() {
$("#loader").fadeIn(100);
},
}).done(function(data) {
$("#loader").fadeOut(100);
$(".sidebar").fadeIn().find(".sidebar-content").animate({
"right": 0
}, 200).html(data);
imgResize(jQuery, 'smartresize');
});
});
$(".sidebar").click(function() {
$(".sidebar-content").animate({
"right": "-565px"
}, 200, function() {
$(".sidebar").fadeOut();
})
});
$(".sidebar-content").click(function(e) {
e.stopPropagation();
});
});
Also I have created this DEMO from jsfiddle. In this jsfiddle you can see there white div. Click any white div then see the right sidebar. So in the sidebar have one image. The problem is here : Lightbox2 does not work when you click on the image.
How can I call Lightbox2 with ajax.

The issue here is the e. stopPropagation() on the .sidebar-content click event which is preventing the lightbox from triggering. You can remove that altogether and inside the .sidebar click event instead call:
$(".sidebar").click(function(e){
var preventClick = $(".sidebar-content");
if (!preventClick.is(e.target) && preventClick.has(e.target).length === 0){
//run the hide animate function + callback
$(".sidebar-content").animate({"right":"-200px"},200,function(){
$(".sidebar").fadeOut();
});
};
});
FIDDLE

jQuery pagination - Applying class to items

I am trying to design a pagination system in jQuery. The bit I am stuck on is when I click on different page number links, I want it to move the "active" class to the newly clicked page.
In the example page "1" has the active class. When I click "2" I want the active class to move to "2" and be removed from "1".
http://jsfiddle.net/qKyNL/24/
$('a').click(function(event){
event.preventDefault();
var number = $(this).attr('href');
$.ajax({
url: "/ajax_json_echo/",
type: "GET",
dataType: "json",
timeout: 5000,
beforeSend: function () {
$('#content').fadeTo(500, 0.5);
},
success: function (data, textStatus) {
// TO DO: Load in new content
$('html, body').animate({
scrollTop: '0px'
}, 300);
// TO DO: Change URL
// TO DO: Set number as active class
},
error: function (x, t, m) {
if (t === "timeout") {
alert("Request timeout");
} else {
alert('Request error');
}
},
complete: function () {
$('#content').fadeTo(500, 1);
}
});
});
I'm quite new to jQuery and could do with some help. Can anyone please give me some guidance on how to do this?

You could check addClass method here and removeClass method here

Remove the current active li and add the active class to the one you clicked.
Add those two lines in your click event handler
$('#pagination li.active').removeClass("active");
$(this).parent().addClass("active");

Create a Jquery animation like Flipboard popup

I want to implement a Jquery/JS animation like the Flipboard popup animation.
When user clicks on an image, the image will expand to a certain size and its white background expands until it occupies the whole screen.
Once the animation is done the page content will be loaded.
http://flipboard.com/
Any help regarding this will be appreciated.
Thanks a lot!

Codrops did it a few months back, I can't really write out all the code for you here but give this article a read.

<script>
//Finally I found the answer. This is the full code.
$(document).ready(function() {
$('.box').click(function(e){
if( $('div').hasClass('overlay')==false ){
//event.preventDefault();
var $box = $(this);
$('<div class="overlay"></div>').prependTo($box);
var $overlay = $('.overlay');
$overlay.css( {
'position' : 'absolute',
'background-color' : 'white',
'width' : $box.outerWidth(true),
'height' : $box.outerHeight(true),
'left' : $box.offset().left,
'top' : $box.offset().top,
'z-index' : 99999999
});
//$($placeholder).insertAfter('.box');
$overlay.animate({
width: $(document).width(),
height: $(document).height(),
left: '0px',
top: '0px'
}, 500, function() {
//reset the overlay
$overlay.css({'width': ''});
$overlay.css({'height': '1500px'});
//ajax
$.ajax({
type: "POST",
url: "../ajax/get_event.php",
data: "firstname=clint&lastname=eastwood",
success: function(resp){
// we have the response
$overlay.html(resp);
$('.window').fadeIn(200);
},
error: function(e){
alert('Error: ' + e);
}
});
});
}else{
//click only on overlay to exit
var $target = $(e.target);
if ( $target.is('.overlay') ) {
$('.overlay').remove();
}
}
});//end box click
});//end of jquery
</script>

Codrops have just posted a plugin to do this, and instructions on how to use it. Theres a particularly cool demo of the plugin here.

Apply animate to new elements that have been added dynamically

The code i current have is this.
function update (){
latest_id = $('#image:first').data('position'); /* == 12 */
$.ajax({
type: "POST",
url: "../web/update/" + latest_id + "",
success: function(data) {
$('#my_like').after(data);
$('.newly-added').animate({"margin-left": "+=66px"}, "fast");
},
error: function(response) {
alert("failed");
},
});
}
setInterval(function() {
update();
}, 4000);
But because the element has been newly added it doesn't receive the new animate part. I done some research and found .live but that needs something to start it, e.g a click.

Fixed, there was a issue with jquery I was including.