Solved

shopify (liquid) Java script help , please advice

Posted on 2014-01-05
8
588 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
ID: 39758971
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
ID: 39759222
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
ID: 39759296
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
ID: 39759465
Hi ,

I still getting issues , kindly check my url .

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

Open in new window


Thanks
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 39759864
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
ID: 39759937
Hi,

I did the changes still it shows like previous .

Please advice.

Thanks
0
 
LVL 5

Author Comment

by:magento
ID: 39760008
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
ID: 39760588
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

911 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

20 Experts available now in Live!

Get 1:1 Help Now