Solved

shopify (liquid) Java script help , please advice

Posted on 2014-01-05
8
609 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
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
 
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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

Suggested Solutions

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!
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

734 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