You are viewing our Forum Archives. To view or take place in current topics click here.
[JavaScript] Stop element flickering onmouseover()
Posted:

[JavaScript] Stop element flickering onmouseover()Posted:

-Deano
  • Rated Awesome
Status: Offline
Joined: Aug 19, 201013Year Member
Posts: 5,238
Reputation Power: 532
Status: Offline
Joined: Aug 19, 201013Year Member
Posts: 5,238
Reputation Power: 532
I'm trying to implement a little interactive menu.
I am using onmouseover() to call a function that will change the view from this:
[ Register or Signin to view external links. ]
to this
[ Register or Signin to view external links. ]

Whenever I mouseover from the right hand side, it works fine. The menu changes and it doesn't glitch out on me. When I mouseover from the bottom, the element changes between the two rapidly; switching from "Menu" to "Home, etc." and back to "Menu" as if trying to be in both states at once.
I'm not really too sure why it is doing this because surely if my mouse is already on the element, it shouldn't be reverting back to the Menu.

HTML:
[ Register or Signin to view external links. ]

JavaScript:
[ Register or Signin to view external links. ]

CSS:
[ Register or Signin to view external links. ]


Any help is greatly appreciated :satisfied:
#2. Posted:
Ciao
  • TTG Addict
Status: Offline
Joined: Jun 23, 201310Year Member
Posts: 2,308
Reputation Power: 228
Status: Offline
Joined: Jun 23, 201310Year Member
Posts: 2,308
Reputation Power: 228
Using the MouseEnter function in javascript would essentially stop the flickering, and be sure you pre-load the <a> HTML code.

Javascript



var isMouseDown = false;

$("#parent-body td").on("mousedown", function() {
isMouseDown = true;
$(this).toggleClass("highlight");
return false;
}).mouseenter(function() {
if (isMouseDown) {
$(this).toggleClass("highlight");
}
});

$(document).on("mouseup", function() {
isMouseDown = false;
});
#3. Posted:
-Deano
  • Rated Awesome
Status: Offline
Joined: Aug 19, 201013Year Member
Posts: 5,238
Reputation Power: 532
Status: Offline
Joined: Aug 19, 201013Year Member
Posts: 5,238
Reputation Power: 532
ZZ9_x_iNepalZz wrote Using the MouseEnter function in javascript would essentially stop the flickering, and be sure you pre-load the <a> HTML code.

Javascript



var isMouseDown = false;

$("#parent-body td").on("mousedown", function() {
isMouseDown = true;
$(this).toggleClass("highlight");
return false;
}).mouseenter(function() {
if (isMouseDown) {
$(this).toggleClass("highlight");
}
});

$(document).on("mouseup", function() {
isMouseDown = false;
});


Is that jQuery? We aren't allowed to use any webkits or anything like that. We have to create our entire website using plain javascript, html and css.
Also, I don't really understand your code. Surely it is detecting whether the mouse is pressed? My menu needs to expand just by hovering the mouse over the div "menu".
#4. Posted:
Ciao
  • TTG Addict
Status: Offline
Joined: Jun 23, 201310Year Member
Posts: 2,308
Reputation Power: 228
Status: Offline
Joined: Jun 23, 201310Year Member
Posts: 2,308
Reputation Power: 228
It's regular javascript, and yes; that code is just to detect whether it's pressed or not; and prevent flickering.
#5. Posted:
-Deano
  • PC Master Race
Status: Offline
Joined: Aug 19, 201013Year Member
Posts: 5,238
Reputation Power: 532
Status: Offline
Joined: Aug 19, 201013Year Member
Posts: 5,238
Reputation Power: 532
ZZ9_x_iNepalZz wrote It's regular javascript, and yes; that code is just to detect whether it's pressed or not; and prevent flickering.


I still get the flickering error. Am I supposed to put this code within my menu() function or outside of it?
#6. Posted:
Nic
  • Retired Staff
Status: Offline
Joined: Jun 08, 201013Year Member
Posts: 2,466
Reputation Power: 1070
Motto: I've been watching you all day.
Motto: I've been watching you all day.
Status: Offline
Joined: Jun 08, 201013Year Member
Posts: 2,466
Reputation Power: 1070
Motto: I've been watching you all day.
Long story short: the onmouseover and onmouseout events are terrible. Which is why at this point people generally switch to jQuery and use the respective jQuery functions. Especially because you want mouse events to work no matter what, as they are the most important events.

The onmouseover and onmouseout events fire every time you go over/leave the menu, but unfortunately also for all child elements, which explains the flickering. Remove the child elements (<ul>, <li> and <a>) and it will work just fine. But that would make for a lousy menu.

Because you are not allowed to use jQuery, I suppose you need to search the web for a JavaScript snippet that will properly handle the 2 JavaScript events, but I can imagine it's going to be more code than you might be comfortable with.

Alternatively, whoever said you cannot use jQuery, turn on smart-ass mode and tell them you don't need JavaScript at all, and simply achieve a similar effect with nothing but CSS3.


HTML

<div id="menu">
    <ul>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Order</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>


CSS

#menu {
    background-color: #c9f5ff;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    overflow: hidden;
    -webkit-transition: height 250ms;
    -moz-transition: height 250ms;
    -o-transition: height 250ms;
    transition: height 250ms;
}

#menu:hover {
    height: 90px;
}

#menu ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

#menu a {
    text-decoration: none;
}


It's not the most ideal as it requires you to update CSS depending on the content, but it might just do depending on your assignment. Make sure the "height" and "line-height" properties for "#menu" are equal at all times, and the hover's "height" property should be the menu's "line-height" multiplied by the amount of items in your menu. Also, Google for the CSS transition property for more info on what's possible, my code is nothing but basics.
#7. Posted:
-Deano
  • Rated Awesome
Status: Offline
Joined: Aug 19, 201013Year Member
Posts: 5,238
Reputation Power: 532
Status: Offline
Joined: Aug 19, 201013Year Member
Posts: 5,238
Reputation Power: 532
Nic wrote Long story short: the onmouseover and onmouseout events are terrible. Which is why at this point people generally switch to jQuery and use the respective jQuery functions. Especially because you want mouse events to work no matter what, as they are the most important events.

The onmouseover and onmouseout events fire every time you go over/leave the menu, but unfortunately also for all child elements, which explains the flickering. Remove the child elements (<ul>, <li> and <a>) and it will work just fine. But that would make for a lousy menu.

Because you are not allowed to use jQuery, I suppose you need to search the web for a JavaScript snippet that will properly handle the 2 JavaScript events, but I can imagine it's going to be more code than you might be comfortable with.

Alternatively, whoever said you cannot use jQuery, turn on smart-ass mode and tell them you don't need JavaScript at all, and simply achieve a similar effect with nothing but CSS3.


HTML

<div id="menu">
    <ul>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Order</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>


CSS

#menu {
    background-color: #c9f5ff;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    overflow: hidden;
    -webkit-transition: height 250ms;
    -moz-transition: height 250ms;
    -o-transition: height 250ms;
    transition: height 250ms;
}

#menu:hover {
    height: 90px;
}

#menu ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

#menu a {
    text-decoration: none;
}


It's not the most ideal as it requires you to update CSS depending on the content, but it might just do depending on your assignment. Make sure the "height" and "line-height" properties for "#menu" are equal at all times, and the hover's "height" property should be the menu's "line-height" multiplied by the amount of items in your menu. Also, Google for the CSS transition property for more info on what's possible, my code is nothing but basics.


Thanks, that's useful. It's just a part of our course marking criteria that we aren't allowed to use jQuery. It wants us to learn the actual javascript for things instead of using libraries.
Jump to:
You are viewing our Forum Archives. To view or take place in current topics click here.