Solved

shopify (liquid) Java script help , please advice

Posted on 2014-01-05
8
595 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTML5 frame 5 25
jQuery for Each 12 21
Getting Random number with min and max value. 2 28
how can i get the sole odd and th sole even 2 16
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

809 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