ansaurus

Question

Jquery attaching hover to array elements

Answer 1

+1 A:

Build out an HTML element for each of your items in the array, and assign it a class.

<span class="canHover">...array</span>

Then you can attach to the hover event of all of them with jQuery:

<script type="text/javascript">
   $(function(){
     $('.canHover').hover(function() {
          // Your hover code here...
     });
   })

</script>

XSaint32 2010-10-29 18:09:20

for (var i=0;i<a1.length;i++) { // for each array element attach hover method, when rollover then feed to over div magnifyView // put into magnifyView upon hover on array element $(function(){ $('.canHover').hover(function() { // Your hover code here... //mouseover document.getElementById('stringToView').innerHTML = a1[i]; //mouseoff document.getElementById('stringToView').innerHTML = ""; });}</script>

windsurf88 2010-10-29 18:22:03

You don't need to $('.canHover') inside your loop.

XSaint32 2010-10-29 18:26:05

get nothing stilll...<script type="text/javascript">var str="one two three four five";var a1 = new Array();a1=str.split(""); $(function(){ $('.canHover').hover(function() { // Your hover code here... document.getElementById('magnifyView').innerHTML = a1[i]; document.getElementById('magnifyView').innerHTML = ""; });</script><div id='stringToView'><span class="canHover"><script type="text/javascript">document.getElementById('stringToView').innerHTML = a1;</script> </span></div><br /><br /><div id='magnifyView' style="font-size:36px;"> what's here</div>

windsurf88 2010-10-29 18:34:55

Answer 2

A:

Here's a quick but working approach.. Have fun ;)

<html>
  <head>
    <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript" charset="utf-8">
    $(function() {
      var str       = "one two three four five",
          array     = str.split(""),
          viewPort  = $('<div />', { id: 'stringToView' });

      for(var objId in array) {
        var obj = $('<span/>', { text: array[objId] }).hover(function() {
          var clone = $(this).clone();
          $('#magnifyView').html(clone);
        }).appendTo(viewPort);
      }

      $('body').prepend(viewPort);
    });
    </script>
  </head>
  <body>
    <div id='magnifyView' style="font-size:36px;"> what's here</div>
  </body>
</html>

EDIT: A little explanation: I go through your array and wrap each letter with a span. Probably it would work without the span but now you can handle them later with a simple $('#stringToView span'). Every letter then get's it's hover binding and is been appended to a Holder (<div id="stringToView"></div> - that was your naming ^^) which gets prepended to the body.

pex 2010-10-29 18:46:42

Lucky you that I'm bored :)

pex 2010-10-29 18:52:40

Yes -- your code helped me a lot! still need more!

windsurf88 2010-10-29 20:22:33

Answer 3

A:

A slightly more concrete example of the code from XSaint32

Link to working jsbin.com sample: http://jsbin.com/4054602/25/

You would want to generate some html as described (and the display div) that you would bind the hover event to - please note, you can't bind directly to a JavaScript array as there isn't any UI element that would represent it on the screen:

<body>
  <ul class="canHover">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <div id="stringToView"></div>
</body>

Then, to wire up your hover event:

<script type="text/javascript">
  $(function(){ // delay execution until DOM is fully constructed
    $(".canHover li").hover(           // bind to the children LI elements
      function() {                     // mouseEnter event first
        var text = $(this).text();     // copy 'hovered' text value
        $("#stringToView").text(text); // set the value in the div
      },
      function() {                     // mouseLeave event second
        $("#stringToView").text("");   // clear the value from the div
      }
    );
  });
</script>

Goyuix 2010-10-29 19:00:36

thanks for your answer! new to JS, I am.

windsurf88 2010-10-29 20:21:01

Answer 4

A:

By the way: If you're looking for a jQuery text-magnify plugin, you should have a look at http://plugins.jquery.com/project/jMagnify

and for demonstration: http://www.senamion.com/blog/jMagnify.html

I think this is just what you're trying to do. Good luck.

pex 2010-10-29 19:38:47

yes -- that's a good one. I started with that but got lost. With that jQuery text-magnify plugin, I could not get the characters to flow into the magnifer graphic div or change the hover so the effects would contain the text in the graphic. have you looked at that plugin?

windsurf88 2010-10-29 20:18:53

I added this effect... it did not work...$('#mag').jMagnify({ centralEffect: {'background': 'url(MagLens1.png) no-repeat 100% 50%'}, lat1Effect: {}, lat2Effect: {}, lat3Effect: {}, resetEffect: {} }); });

windsurf88 2010-10-29 20:19:32

any suggestions for ?

windsurf88 2010-10-29 20:19:51

what is a good online jQuery tutorial or even tutorials that teach advanced topics? do you know any ?

windsurf88 2010-10-29 20:42:54

@windsurf88: have a look at the plugin source. It's a good approach and you could build on top of it. Can't help you with good jQuery tutorials - you might just ask google.

pex 2010-10-30 15:57:52

ansaurus

tags:

views:

answers:

Jquery attaching hover to array elements

related questions