We Keep Coding

position top in Jquery TipTip is not working properly

when i am trying to make it appear at the top of the content its not working properly,
i am using default position to make it appear at top. can anyone suggest me what can i do to fix it.
function price_breakdown_tooltip() {
$(".proposal_table_price_breakdown_tiptip").tipTip({ delay :200,
maxWidth : "200px",
defaultPosition: "right",
content: function (e) {
setTimeout( function(){
currentXhr = $.ajax({
url: '<?php echo site_url('ajax/getProposalPriceBreakdown') ?>',
type:'post',
data:{proposalId:price_breakdown_tiptip_proposal_id},
cache: false,
success: function (response) {
$('#tiptip_content').html(response);
//console.log('ffffggg')
}
});
},200);
return 'Loading...';
}
});
};
you can see in the image what problem i am facing when i am using position top click to see image

jQuery .on click event doesn't always fire on Ajax loaded content

I have a page where I dynamically load contents. Inside the $(document).ready I have similar event handlers:
$(document).on("click", ".content_button", function(e){
e.preventDefault();
e.stopPropagation();
// content
});
The problem is that the mouse click only recognised at around 90% of the clicks. It seems totally random. At other times I have to push the same button 4-5 times, and then it works. I have no error in the console, even the CSS part works every time:
div.content_button:active {
top: 2px;
}
I can't seem to find a solution. I use jQuery 1.11, it works like this on Win10, Win7, inside Firefox, and even on iPad or Android.
Do you have any ideas about what can be the problem?
Edit:
data.control contains the .content_button divs (buttons) in HTML.
And here is the part, which loads the buttons:
$.ajax({
url: 'worker.php',
async: false,
cache: false,
type: "POST",
data: { action:"update" },
dataType: "json",
success:function(data) {
if(data.actionresult == 1)
{
$('div#container').hide("slide", { direction: "down" }, 500);
$('div#container').promise().done(function() {
$('div#container').html(data.control);
$('div#container').show();
});
}
else
{
// handle error
}
}
});

$(document).ready(function(){
$(".content_button").on("click", function(e){
e.preventDefault();
e.stopPropagation();
// content
});
});
It must be done like this.

Have you tried with
$(function() {
var count = 0;
$('body').on('click', '.content_button', function() {
count++;
$('#count').html(count);
});
});
https://jsfiddle.net/byexstpq/

Ok, I have found the problem, it is this:
div.content_button:active {
top: 2px;
}
On mouseDown it moves 2 pixels, so it is possible that the link won't be there after a mouseUp - so technically the click event won't fire as the mouseUp happens over another element.
I hope this will help others.

Masonry items not reloaded when cliking ajax load more button

Hi everyone i have one problem about masonry items.
I have created this DEMO from codepen.io
In this demo you can see there is this javascript code:
$(window).load(function()
{
$( function() {
var $container = $('.posts-holder');
$container.masonry({
isFitWidth: true,
itemSelector: '.kesif-gonderi-alani'
});
});
});
I show only 10 posts when a page is opened. If user want to show other 10 posts then user needs to click (show more button). I created this ajax function for show more posts.
$('.showmore').live("click",function(event)
{
event.preventDefault();
var ID = $(this).attr("id");
var P_ID = $(this).attr("rel");
var URL=$.base_url+'diger_fotograflar_ajax.php';
var dataString = "lastid="+ ID+"&profile_id="+P_ID;
if(ID)
{
$.ajax({
type: "POST",
url: URL,
data: dataString,
cache: false,
beforeSend: function(){ $("#more"+ID).html('<img src="wall_icons/ajaxloader.gif" />'); },
success: function(html){
$("div.posts-holder").append(html).each(function(){
$('.posts-holder').masonry('reloadItems');
});
$("#more"+ID).remove();
}
});
}
else
{
$("#more").html('The End');// no results
}
return false;
});
this code working when clicking showmore button $('.posts-holder').masonry('reloadItems'); but collecting new posts in one place. But when I change the width of the page everything is improving.

I think that you can use $container.masonry(); after adding your elements, like this :
$("div.posts-holder").append(html).each(function(){
$('.posts-holder').masonry('reloadItems');
});
$container.masonry();
You can see it working here.
Hope that can help.

you have to use the appended method of masonry ... otherwise how would it know that you have added any new element.
Adding the elements simply wont align them as masonry doesnt have any event listner for new element added.
var el = $('<div class="kesif-gonderi-alani" style="height:300px;"></div>')
$container.masonry().append( el ).masonry( 'appended',el );
Hers is small demo on codepen http://codepen.io/knaman2609/pen/xbJMRY
Click on the button to append elements dynamically
http://masonry.desandro.com/methods.html

jQuery script delayed by AJAX request - how to fix it?

I'm making a simple responsive Wordpress Theme and I want only one page there, and the content loaded via AJAX, so I have an AJAX function:
jQuery(document).ready(function(){
jQuery.ajaxSetup({cache:false});
jQuery("#mainnav a").click(function(){
var post_link = jQuery(this).attr("href");
jQuery("body").load(post_link);
return false;
});
});
It's meant to load entire pages content (entire body) on clicking menu links. And it works well.
But the problem is I have a jQuery script responsible for centering content div:
(function (jQuery) {
jQuery.fn.centerAlign = function() {
return this.each(function(i){
var w = jQuery(this).width();
var ow = jQuery(this).outerWidth();
var ml = (w + (ow - w)) / 2;
var h = jQuery(this).height();
var oh = jQuery(this).outerHeight();
var mt = (h + (oh - h)) / 2;
jQuery(this).css("margin-top", "-" + mt + "px");
jQuery(this).css("top", "50%");
jQuery(this).css("margin-left", "-" + ml + "px");
jQuery(this).css("left", "50%");
jQuery(this).css("position", "absolute");
});
};
})(jQuery);
jQuery(document).ready(function() {
jQuery("#content").centerAlign();
});
That script centers the #content div at reload instatly, so I mean there is no delay. The div is centered from the start.
Problem is when I combine that scripts, because after AJAX loads the entire body, #content div is not positioned for ~1 second (in top-left corner of the page) and then it comes back to its place. So jQuery script works with a delay.
I coulnd't find a solution for that problem, .on and .live don't work for me. I think I could just load each page content into a #content div, not entire "body", but I don't know how to make it.
I'd appreciate if you can help me with that, so it will just resize the #content div with animation, not position it from start.
EDIT:
Ok, I ended up with such code:
jQuery(function(){
jQuery("#mainnav a").click(function(e){
var content=jQuery("#content");
jQuery.ajax({
url: jQuery(this).attr('href'),
dataType: "HTML",
beforeSend: function(){
content.empty();
},
success: function(){
content.load();
},
error : function(){
content.html("<p>Przepraszamy, ale strona jest chwilowo niedostępna</p>");
},
});
e.preventDefault();
})
})
It should work, but the problem is that I can't figure out what should I put in that lines:
success: function(){
content.load();
It workd up to that point. I clears the #content div but when I put content.load("#content"); it loads entire page, with menu and footer. And I want to load just #content content.
EDIT:
Ok. Firebug shows that this code is working, but there is nothing shown within the #content div in broswer window.
jQuery(function(){
jQuery("#mainnav a").click(function(e){
var content=jQuery("#content");
var href=jQuery(this).attr('href');
var text = jQuery(this).find('#content').html();
jQuery.ajax({
url: jQuery(this).attr('href'),
dataType: "HTML",
beforeSend: function(){
content.empty();
},
success: function(){
content
.html(text)
.centerAlign();
},
error : function(){
content.html("<p>Content Unavailable</p>");
},
});
e.preventDefault();
})
})

I think you're on the right track with your new code, you just need to fill out your success function:
success: function( html ){
html = jQuery(html).find('#content').html();
content.html(html).centerAlign();
},
or perhaps (using th1rdey3's idea):
success: function( html ){
html = jQuery(html).find('#content').centerAlign().html();
content.html( html );
},

You could centerAlign #content before placing it inside body. Something like this
var $div = jQuery('<div/>').load(post_link);
$div.find('#content').first().centerAlign();
jQuery('body').html($div.html());
or only loading the content part
var $div = jQuery('<div/>').load(post_link);
jQuery('#content').first().html($div.find('#content').first().html());

JS page scroll didn't work

I wrote code something like
$.ajax({
type: 'POST',
url: form.attr('action'),
data: data,
dataType: 'html',
success: function(html){
$(html).hide().appendTo(parent.find("[data-interactions]")).show().stop().animate({
scrollTop: $(".vote_feedback_snippet:last-child").offset().top
}, 1500,'easeInOutExpo');
I above code when I click on post button it generates new HTML snippet at the bottom of the list
What I want:-
When new Html Snippet come it will scroll upto that snippet only
Can somebody help me

Try:
$(html).hide()
.appendTo(parent.find("[data-interactions]"))
.show('fast', function(){
$('html, body').animate({
scrollTop: $(".vote_feedback_snippet:last-child").offset().top
});
});

Using this plugin: http://demos.flesler.com/jquery/scrollTo/
will allow you to do this:
$.scrollTo(".vote_feedback_snippet:last-child")
It's always worked for me.