onmousedown() with onmouseover()

Discussion in 'JavaScript' started by orionoreo, Oct 3, 2009.

0
  1. #1
    so I have a situation where say I have two divs side by side, If i click on the left div I call a function with onmousedown(). The thing is if the user holds down that click and drags to the right div I want another function to happen, but only in this situation. If the user just hovers over the right nothing should happen.

    In my mind I'm thinking something like onmousedown() WITH onmouseover() at the same time
     
    orionoreo, Oct 3, 2009 IP
  2. kabir_stud

    kabir_stud Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    yes this can work if u use bth functions 2gthr wth an condition in an if() lik if(mouseover()&&mousedown)
     
    kabir_stud, Oct 4, 2009 IP
  3. orionoreo

    orionoreo Peon

    Messages:
    145
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    but we can't have if() condition for an div tag can we?
     
    orionoreo, Oct 4, 2009 IP
  4. FilmFiddler

    FilmFiddler Greenhorn

    Messages:
    54
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    23
    #4
    That sort of thing needs a few event handlers, actually ...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Click & Hover</title>

<script type="text/javascript">
var clicked_left = false;

function clickedLeft(e) {
  document.getElementById("msg_clicked").innerHTML =
    "Click-Left status: Have clicked the left div";
  clicked_left = true;
}
function hoveredRight(e) {
  if (clicked_left)
    document.getElementById("msg_hovered").innerHTML =
      "Hover-Right status: Now hovering the right div, while dragging from left div";
}
function resetAll(e) {
  document.getElementById("msg_clicked").innerHTML = "Click-Left status: none";
  document.getElementById("msg_hovered").innerHTML = "Hover-Right status: none";
  clicked_left = false;
}
function resetRight(e) {
  document.getElementById("msg_hovered").innerHTML = "Hover-Right status: none";
}
window.onload = function() {
  document.getElementById("left").onmousedown = clickedLeft;
  document.getElementById("right").onmouseover = hoveredRight;
  document.getElementById("right").onmouseout = resetRight;
  document.getElementById("wrap").onmouseup = resetAll;
}
</script>

<style type="text/css">
#wrap  { position: relative; overflow: auto; }
#left, #right { float: left; width: 200px; height: 200px;
         margin: 20px; border: 1px solid black; }
#left  { background: red; }
#right { background: green; }
#msg_clicked { color: red; }
#msg_hovered {color: green; }
</style>

</head>
<body>
<div id="wrap">
  <div id="left">left</div>
  <div id="right">right</div>
</div>
<p id="msg_clicked">Click-Left status: none</p>
<p id="msg_hovered">Hover-Right status: none</p>
</body>
</html>
    Code (markup):
     
    FilmFiddler, Oct 6, 2009 IP