How to convert following JS to JQuery?

Question

I'm having a hard time converterting the following JS to JQuery.

My project have a #HoverMe div where I hover it to display the content inside #hidden div.

I've a well working JS script from ( this question, by anied). I tried to re-write document.getElementById("HoverMe"); to $("#HoverMe").hover(function() { etc, but I can't go any further as my understanding in jQuery is zero.

This is how my divs look like

                      ------------     --------- _
                     |  #HoverMe   |  | #hidden |S| //hover #HoverMe to display #hidden                           
                      ------------    | --------|R|
                                      | car.name|O|       
                                      |---------|L|
                                      | car.name|L|
                                       ---------|B|
                                      | car.name|A|
                                      |---------|R|
                                      | car.name| |
                                       ---------|_|
<div>
    <div id="HoverMe" style="width: 100px; background: green">
        Car
    </div>
    <div id="hidden" style="overflow:auto; height:100px; position: absolute; background-color: red; display: none">

        @foreach (var car in Model.Car) { @* Where the #hidden list get its content *@
            <div>@car.Name</div>
       }

    </div>
</div>

How to convert following JS to JQuery?

    var hoverEle = document.getElementById("HoverMe");
    var popupEle = document.getElementById("hidden");
    var timeoutId;

    function showPopup() {
        var hoverRect = hoverEle.getBoundingClientRect(); // get the position of the hover element
        popupEle.style.left = (hoverRect.right + 16) + "px";
        popupEle.style.top = hoverRect.top + "px";
        popupEle.style.display = "block";
    }

    function hidePopup() {
        popupEle.style.display = "none";
    }

    hoverEle.addEventListener('mouseover', function () {
        showPopup();
    }, false);

    hoverEle.addEventListener('mouseout', function () {
        timeoutId = window.setTimeout(function () {
            hidePopup();
        }, 1500);
    }, false);

    popupEle.addEventListener('mouseover', function () {
        if (timeoutId) {
            window.clearTimeout(timeoutId);
        }
    }, false);

    popupEle.addEventListener('mouseout', function () {
        timeoutId = window.setTimeout(function () {
            hidePopup();
        }, 1500);
    }, false);

</script>

You're posting the same code asking the same thing. Take a look through your answers on the same question you asked and hour ago. Look at djxak's answer. — jeremykenedy, Oct 09 '16 at 05:41

score 1 · Answer 1 · answered Oct 09 '16 at 05:41

So, tips on converting JS to jQuery:

You can select elements using simple CSS selectors. So var hoverEle = document.getElementById("HoverMe"); becomes var hoverEle = $('#HoverMe');
Adding event listeners is done by leveraging the jquery .on method. So hoverEle.addEventListener('mouseover', function () { showPopup(); }, false); becomes (without any delegating) hovereEle.on('mouseenter', function () { showPopup(); });
CSS can be altered using the .css method
Simple hiding and showing can be toggled using .hide and .show methods.

Also, a great quick reference/cheatsheet for jQuery is https://oscarotero.com/jquery/

Added this for completeness's sake-- however, not sure if this is SO kosher since I answered it in the comment of another of OP's questions. To the moderators-- if this is problematic I'll gladly remove the answer. — Alexander Nied, Oct 09 '16 at 05:47

score 1 · Answer 2 · answered Oct 09 '16 at 07:37

to select elements using its id

this is you have done with js

var hoverEle = document.getElementById("HoverMe");
var popupEle = document.getElementById("hidden");

this is how you can do same thing like above using jQuery

var hoverEle = $("#HoverMe") // this select the element which its id="HoverMe"

like this , you can select other elements also. if it is id you should use # and if it is class you should use ..

follow is an example of using mouseenter an mouseleave using jQuery

$("#Hoverme").mouseenter(function(){
  $(this).css({"height":"auto"},1000); 
});


$("#Hoverme").mouseleave(function(){
  $(this).css({"height":"35px"},1000); 
});

div#Hoverme{
  width:100px;
  height:35px;
  overflow:hidden;
  }

ul li{
  list-style-type:none;
  cursor:pointer;
  background-color:orange;
  color:black;
  text-align:center;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="Hoverme">
   <ul>
     <li>one</li>
     <li>two</li>
     <li>three</li>
     <li>four</li>
     <li>five</li>
     <li>six</li>
   </ul>
<div>

above is a simple example of using mouseenter and mouseleave. this can do in various and nicely. get the idea and moderate it that fit for you.

How to convert following JS to JQuery?

2 Answers2

Linked