|
JavaScript - Onmousemove And Referencing A <div Id> Underneath Another <div Id>
Hello, I've been writting HTML since last friday and javascript since yesterday. And I'm stuck on my first project.
My functions for mouse_move / up / down all control the movement of a box. So you can click a box and move it anyway. It then snaps to an invisible grid. However there are multiple boxes on the screen so if you move it to a spot where another box already resides, then that box needs to swap places. This is what the mouse_over function tries to do. When I click the first box it stores the position of that box that was clicked. If I release the mouse button whilst hoovering over another box I want the other box to take the stored positions of the first box. However what I think is happening is the mouseover function is applying the new position to the box I'm moving, as I guess this is the first layer the mouse is over. Is there anyway I can reference the layer underneath using onmouseover. Sorry if this is jibberish. Thank you very much. Code:
<script language="javascript">
var x;
var y;
var org_top;
var org_left;
var diff_org_top;
var diff_org_left;
var element;
var element2;
var being_dragged = false;
var swap = false;
function mouse_over(ele_name2)
{
if (swap = true)
{
element2 = ele_name2;
document.getElementById(element2).style.top = org_top;
document.getElementById(element2).style.left = org_left;
swap = false;
element2 = null
}
}
function mouse_move(event)
{
x=event.pageX;
y=event.pageY;
if(being_dragged = true)
{
document.getElementById(element).style.top = y-diff_org_top +'px';
document.getElementById(element).style.left = x-diff_org_left +'px';
}
}
function mouse_down(ele_name)
{
being_dragged = true;
swap = false
element = ele_name;
document.getElementById(element).style.cursor = 'move';
org_top = document.getElementById(element).style.top;
org_left = document.getElementById(element).style.left;
diff_org_top = y-org_top.substring(org_top.length-2,org_top);
diff_org_left = x-org_left.substring(org_left.length-2,org_left);
}
function mouse_up()
{
being_dragged = false;
document.getElementById(element).style.cursor = 'auto';
if (x < 317)
{
document.getElementById(element).style.left = Math.floor(x / 316 - 1) * 316 +'px';
}
else
{
document.getElementById(element).style.left = 0+'px';
}
element = null;
swap = true;
}
</script>
Similar TutorialsI'm writing a JavaScript Equation Editor / Whiteboard App, and i seem to be having a problem with one line of JavaScipt Code.... The Equation Editor is hosted live he http://kevinjohnson.clanteam.com/JsE...ionEditor.html Code: var AddMathElement = "<img src='" + Object.id + ".PNG' id='" + CurrentEquation + Elements + "' class='MathElement' onMouseDown='MoveImage(this, event);'>"; I have used the DOM Inspector (i'm using firefox) to look at the onMouseDown= event code, and it should work.... However, when i try to drag a Math Element Image to a different location (after it has been added to the page by clicking on the Math Element Keyboard), it does nothing. I looked on the Error Console, and there is nothing there. I looked at the Node value in the DOM inspector, and it is as it should be. I have also tried changing and removing some double quotes and single quotes, as that has worked in the past on similar code snippets. When a user pushes their mouse down on a DOM element I want to allow them to move it, so I would like to setup an on mouse move function. The code i have is: Code: var newHeader = document.createElement("div");
newHeader.id = "header" + tabID;
newHeader.className = "windowHeader";
newHeader.onmousedown = 'desktop.onmousemove = moveWindow('+tabID+');';
newHeader.onmouseup = 'desktop.onmousemove = null;';
newWindow.appendChild(newHeader);
However it doesn't work hence why I'm here... Any help appreciated! Hi I am trying to make a function run if the mouse is moved over the document but when using the object onmousemove it seems to run the code even if the mouse is still over then document, how can I make it so if the mouse is over the document but isn't moving then don't run the code but once the mouse moves run the code? This is the code I made to handle the mouse move collections. Code: function onmove(func) {
var oldonmove = document.onmousemove;
if(typeof document.onmousemove != 'function') {
document.onmousemove = func;
} else {
document.onmousemove = function() {
oldonmove();
func();
};
}
}
And to use it you would do this. Code: <script type="text/javascript">
/* Alert A Message Everytime The User Moves Their Mouse */
onmove(function(){ alert('You Moved!'); });
</script>
But with this code it runs even when the user doesn't move their mouse and the notification box pops up every second as the code seems to think a still mouse is a moving mouse. I was thinking about having a run once system but that would mean if the mouse moves it runs once and then if the mouse moves again the code will not run as it has already ran before. If anyone can help me please reply, Thank You. DJCMBear. I've just finished coding a navigation bar on my website in CSS so the Parent links reveal drop down child links below. It works fine on all pages except for my home where I have an issue with my featured box. I'm using SmoothGallery 2.0 but my menu options don't show over it when I'm the home page, they get cut off and the last few options end up underneath. Is this an issue with trying to use CSS over Javascript? Is it possible to have my menu items show over my javascript? Shall I use a different menu method? or is it an issue with the javascript itself? -Thanks Hi all, I'm wondering if what I'm trying to do here is even possible but I'd appreciate your thoughts on it. Code: <script type="text/javascript">
function test() {
var arrays = {
one: ['1', '2', '3'],
two: ['a', 'b', 'c']
}
var foo = 'one';
alert(arrays.(foo));
}
test();
</script>
I've tried numerous variations of the alert line with evals, brackets and jQuery syntax but always seem to get the error: Code: XML filter is applied to non-XML value ({one:["1", "2", "3"], two:["a", "b", "c"]})
Which makes me think I'm either attempting something stupid or only missing my target slightly. The code will be running within a jQuery project up if that helps in any way. Hi there. I have a table which I would like to be highlighted with the click of a button, but I can't seem to reference it correctly. I can make the <td> clickable and function, but when I try to apply it to the button I can't make it reference the td cell, rather than change the background color of the button. The function is: function roll(obj){ obj.style.backgroundColor == "pink" ? obj.style.backgroundColor = "#e5e5e5" : obj.style.backgroundColor = "pink"; } Html: <td style="background-color:#e5e5e5;"><img onmousedown="roll(this);" src="images/plus.png" title="Highlight Lot" /></td> Thanks a lot!! :) Years ago I created HTML that employs checkboxes and textboxes. I am now writing JS with the intention of adding flexibility and limiting redundancy. I am not sure I truly understand how to correctly interact the two though. For example, one of my scripts have arrays that contain the names of the checkboxes and textboxes, with a 'for' loop to document.write() them to references within the HTML code. This does not seem to be working for me though. Here is what I have thus far (in short): Code: <script language="javascript">
var teamNames = new Array(3);
teamNames[0]="South Africa";
teamNames[1]="Mexico";
teamNames[2]="Uruguay";
for (i=0; i<=31; i++) {
document.write("<p>" + teamNames[i] + "<\/p>");
}
</script>
</head>
<body>
<tr><td>Jun 11</td><td><input type="checkbox"
name="teamNames[0]" value="teamAbbr[0]"></td>
</body>
I've left out a lot of the code (to include the teamAbbr array, but you get the points. I've tried moving the JS within the HTML body and playing with the reference syntax, but nothing so far. Any help would be great! Hello, On a simple form, there is a radio button group with two radio buttons, a text box, and a submit button. The first radio button is checked(selected) by default. The text box input has the onChange event handler so that if the text is changed, the second radio button will be checked(selected). The problem is the input radio name contains a hyphen that breaks the JavaScript and the name can not be changed. What is the correct syntax for referencing a hyphenated form input radio name in the onChange event? Here is the form that works correctly with no hyphen in the input radio name: Code: <form name="myFormGood" action="" onsubmit="return false;"> Good Form with no hyphen in radio button name<br> <input name="radio1" type="radio" value="4" checked> First Option<br> <input name="radio1" type="radio" value="5"> Second Option<br><br> Change the text to select the Second Option<br> <input type="text" name="text1" onChange="document.myFormGood.radio1[1].checked = 'true';" size="10" value=" "><br><br> <input type="button" name="submit" value="It Works!"> </form> Here is the form that breaks the JavaScript because it has a hyphen in the input radio name: Code: <form name="myFormBad" action="" onsubmit="return false;"> Bad Form with hyphen in radio button name breaks JavaScript<br> <input name="radio-1" type="radio" value="4" checked> First Option<br> <input name="radio-1" type="radio" value="5"> Second Option<br><br> Change the text to select the Second Option. Nothing Happens.<br> <input type="text" name="text1" onChange="document.myFormBad.radio-1[1].checked = 'true';" size="10" value=" "><br><br> <input type="button" name="submit" value="It Doesn't Work!"> </form> . SOURCE: Here Code: 1 document.onmousemove = mouseMove;
2
3 function mouseMove(ev){
4 ev = ev || window.event;
5 var mousePos = mouseCoords(ev);
6 }
7
8 function mouseCoords(ev){
9 if(ev.pageX || ev.pageY){
10 return {x:ev.pageX, y:ev.pageY};
11 }
12 return {
13 x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
14 y:ev.clientY + document.body.scrollTop - document.body.clientTop
15 };
16 }
#1: How is it that "mouseMove" is assigned to "document.onmousemove" from right-to-left? What exactly is taking place here? #3: How can "mouseMove" be declared as a function afterwards? #3: I periodically see "e" being placed in functions. Is "ev" taking the place for "e"? If so is "ev" or "e" a global object? Where do they initially come from and how do they work? . What are these used for? How are they done in JS? Any refs online?
|
|||||||