Solved

shopify (liquid) Java script help , please advice

Posted on 2014-01-05
8
580 Views
Last Modified: 2014-01-06
Hi,

This is an shopify ecommerce.

We trying to display name when mouse is taken over an image .

Its working below the thumbnail and we need to display it within the thumbnail.

Please check the attached images .

The js we are using is below.

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
  .tooltip {
	display:none;
	position:absolute;
	border:1px solid #333;
	background-color:#161616;
	border-radius:5px;
	padding:10px;
	color:#fff;
	font-size:12px Arial;
}
  
</style>

<script type="text/javascript">
$(document).ready(function() {
// Tooltip only Text
 
$('.masterTooltip').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo($(this))
        .fadeIn('slow').css({top:$(this).find("img").offsetTop , left:$(this).find("img").offsetLeft});
  
}, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
}).mousemove(function(e) {
  //var mousex = e.pageX - 100; //Get X coordinates
  // var mousey = e.pageY - 100; //Get Y coordinates
  $('.tooltip').css({top:$(this).find("img").offsetTop , left:$(this).find("img").offsetLeft})
});
});

</script>

Open in new window


Thanks
needed-js.jpg
current-js.jpg
0
Comment
Question by:magento
  • 4
  • 4
8 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
jQuery has an offset object you need to use unless you get the DOM object from the image

Demo

).mousemove(function(e) {
  var img = $(this).find("img"),top=img.offset().top, left = img.offset().left;
    $('.tooltip').css({top:top+100 , left:left+100}); // should be set after a timeout
  });

Open in new window

0
 
LVL 5

Author Comment

by:magento
Comment Utility
Hi ,

I copied your script but i getting the name of the 1st image in 2nd image.

Please see the screen

Thanks
js-coming-to--next-article.png
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Please see my updated demo

http://jsfiddle.net/mplungjan/SR32E/

I do not understand what you have in your tipText, but data attributes must be all lowercase
0
 
LVL 5

Author Comment

by:magento
Comment Utility
Hi ,

I still getting issues , kindly check my url .

http://www(dot)thesrk(dot)com/pages/artists-test

Open in new window


Thanks
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
Comment Utility
Remove the +100

http://jsfiddle.net/mplungjan/SR32E/

$(function() {
// Tooltip only Text
 
  $('.masterTooltip').hover(function(){
      var img = $(this).find("img"),
      top=img.offset().top, left = img.offset().left;

      // Hover over code
        var title = $(this).attr('title');
        $(this).data('tiptext', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo($(this))
        .fadeIn('slow').css({top:top , left:left});
  
  }, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
  }).mousemove(function(e) {
  var img = $(this).find("img"), top=img.offset().top, left = img.offset().left;
    $('.tooltip').css({top:top, left:left}); // should be set after a timeout
  });
});

Open in new window

0
 
LVL 5

Author Comment

by:magento
Comment Utility
Hi,

I did the changes still it shows like previous .

Please advice.

Thanks
0
 
LVL 5

Author Comment

by:magento
Comment Utility
Thanks for ur help.

Changed the value to top:top-5, left:left-140 and this fixed the issue.

Its really a great help and appreciate it . Thank you very much.

I just noticed sometimes instead of text a black blur is showing .Please advice on that.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
I do not get what this is supposed to do

        $(this).data('tiptext', title).removeAttr('title');

but if you do not remove it, you will lose your text
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now