Jquery attaching hover to array elements

Question

I am looking at trying to place a hover() method onto each array element. Then when the cursor rolls over the character, it is copied into another div. I am kinda lost. Do you have suggestions?

<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquery.min.js">
</head>

<body>

<script type="text/javascript">
var str="one two three four five";
var a1 = new Array();
a1=str.split("");
//document.write(a1.join(" <br /> "));
//document.write(str.split("") + "<br />");

for (var i=0;i<a1.length;i++) {

    // for each array element attach hover method, when rollover then feed to over div magnifyView
    $("a1[i]").hover(function () {
      // put into magnifyView upon hover on array element
    });
}

</script>

<div id='stringToView'><script type="text/javascript">document.getElementById('stringToView').innerHTML = str;</script> </div>

<br /><br />
<div id='magnifyView' style="font-size:36px;"> what's here</div>

</body>
</html>

Your code actually doesn't do anything good. Probably you should dig a little deeper into basic javascript and jQuery. FYI: To hover an object there has to be a relation to the dom. — pex
– pex, Commented Oct 29, 2010 at 18:15
no the code doesn't do anything good but it has comments for what is supposed to happen. Do you know how to attach a method to an array element in javascript? I am not sure of the way to do that. that's why I am asking here. each array element needs to have hover(). — windsurf88
– windsurf88, Commented Oct 29, 2010 at 18:27
you can't attach an event handler to an array element. You could create a dom element from each array element and then bind the event. Let me try.. — pex
– pex, Commented Oct 29, 2010 at 18:33
... and you would do me a favor when having a look into a jQuery Tutorial. Hope my code helps you a little. — pex
– pex, Commented Oct 29, 2010 at 19:01

dotariel · Accepted Answer · 2010-10-29 18:09:20Z

1

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>

answered Oct 29, 2010 at 18:09

dotariel

1,6041 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

windsurf88 Over a year ago

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>

dotariel Over a year ago

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

windsurf88 Over a year ago

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>

pex · Accepted Answer · 2010-10-29 19:38:47Z

0

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.

answered Oct 29, 2010 at 19:38

pex

7,8214 gold badges34 silver badges41 bronze badges

6 Comments

windsurf88 Over a year ago

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 Over a year ago

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

windsurf88 Over a year ago

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

pex Over a year ago

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

windsurf88 Over a year ago

how could the array section that is displaying in the magnifyView div use the 'adjacent' 2-3 characters including spaces ?? any suggestions? irgendwelche Vorschläge? :)

|

pex · Accepted Answer · 2010-10-29 18:54:37Z

0

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"></script>
    <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.

edited Oct 29, 2010 at 18:54

answered Oct 29, 2010 at 18:46

pex

7,8214 gold badges34 silver badges41 bronze badges

2 Comments

windsurf88 Over a year ago

how could the array section that is displaying in the magnifyView div use the 'adjacent' 2-3 characters including spaces ??

windsurf88 Over a year ago

not just the .split("") or .split(" ") ?? any super suggestions?

Community · Accepted Answer · 2017-05-23 12:11:31Z

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>

Collectives™ on Stack Overflow

Jquery attaching hover to array elements

4 Answers 4

3 Comments

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related