another question about pro

Hello Corrado Prever,

Sorry, I’m currently on a one week trip without my computer, so i can’t test anything !

However you are right, it is linked to the fact images are not in the DOM when page loads.

I will think about the solution and try it as soon as I have my computer back !

Sorry for the delay,

Best regards,
Thomas.

Thank you so much Thomas, take your time and have good trip.

Another thing, WPML support team finally solved the issue related compatibility WPML vs your renamer plugin.

They have sent to me and also to you (maybe to Jordy) the patched version of the free plugin.

I tested and is working fine, so please just update in the next release, tell also Jordy about that.

IF you do not have the file let me know i will send to you.

Hi there

Any news on that?

—-However you are right, it is linked to the fact images are not in the DOM when page loads—-

Hello Corrado Prever,

Sorry for the late reply, would it be possible to see a page where the problem occurs ?

I have a few ideas on why it couldn’t work and how to fix it but I need to see it live first !

Best regards,
Thomas

Hi Tomas

I have now activated the lazy load, you can see here …

https://www.corradoprever.com/test3/fotografia/birmania-2011/bagan/

After the line 4 of photos the tooltip stop to work because all the images after that line are not in the dom during the loading page.

The code of the script is

jQuery('img.attachment-thumbnail').hover(

  	          function()  {
		jQuery(this).parent().removeAttr('title');					
		title = jQuery(this).attr('title');
		alt = jQuery(this).attr('alt');
		 jQuery(this).removeAttr('title');
 		 jQuery(this).removeAttr('alt');
   		 jQuery('<p class="tooltip"></p>').text(title).appendTo('body').fadeIn('slow');
     },
	 	  function() {													
 		jQuery('.tooltip').remove();
		jQuery(this).attr('title',title);
 		jQuery(this).attr('alt',alt );
     })
	 
	 .mousemove(function(pos) {
         var xx = pos.pageX + 20,
             yy = pos.pageY + 10;
         jQuery('.tooltip').css({
             top: yy,
             left: xx,
         })
     });

Hello Corrado Prever,

I had a look at your website, could you try to add this code in your javascript :

   
// Your script here
 
$('.entry-content').bind('DOMNodeInserted', function(element){
        // Your script here again
});

Note that I’ve used the default ‘.entry-content’ selector here, you should write the one you are actually using on your website.

It should normally rerun your script everytime the nodes are inserted inside the DOM.

Cheers,
Thomas

• This reply was modified 7 years, 3 months ago by Thomas.

Hi Thomas, thank you for the answer but not solved yet.

.entry-content is ok as used in my template also.

It is better then before as the event is registered but start other problems, need to modify my script.

I will work on it, your idea is a good one

• This reply was modified 7 years, 3 months ago by Corrado Prever.

Hi Thomas
It was quite a complicated issue, anyway I wrote a new script with 3 functions (mousenter, mouseleave, mousemove) using a correct ‘on’ event and using a father selector + a child secondary selector.
It works perfectly now also with lazyload and not yet loaded thb images.

jQuery(".entry-content").on('mouseenter', 'img.attachment-thumbnail', function() {
				miotitolo = mioalt = jQuery(this).attr('alt');
				jQuery(this).parent().removeAttr('title');			 
 				jQuery(this).removeAttr('title');
				jQuery(this).removeAttr('alt');
				jQuery('<p class="tooltip"></p>').text(miotitolo).appendTo('body').fadeIn('slow');
});
jQuery(".entry-content").on('mouseleave', 'img.attachment-thumbnail', function() {
				jQuery('.tooltip').remove();
				jQuery(this).attr('title',miotitolo);
				jQuery(this).attr('alt',mioalt );
});
 
jQuery(".entry-content").on('mousemove', 'img.attachment-thumbnail', function(pos) {
  				var xx = pos.pageX + 20;
				var yy = pos.pageY + 10;
				jQuery('.tooltip').css({
										top: yy,
										left: xx,
										});
 				}); 

• This reply was modified 7 years, 3 months ago by Corrado Prever.
• This reply was modified 7 years, 3 months ago by Corrado Prever.

Hello Corrado Prever,

Oh did your last answer worked ?

Best regards,
Thomas

Hi there, your last answer actually didn’t, but with the re-script now is ok.

Yeah that’s what I meant !

Now that I see your answer it is indeed obvious haha !

This issue often happens with $(‘.something’).on(‘click’, function() {}); too, that you can then replace by $(document).on(‘click’, ‘.something’, function() {}); to make it work on ajax loaded content.

But yeah, you found it before me !

I’m marking it as solved then,

Cheers,
Thomas

Sure is solved now!

Make me learning something more ??

Regards