|
JavaScript - Document.onmousemove Question?
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. Similar Tutorials. 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? . I'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! 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>
Code: function writeCmd()
{
// var div = top.buttonFrame.document.getElementById("buttonList");
for(i=0;i<arrCtr;i++)
{
top.buttonFrame.document.getElementById('buttonList').innerHTML = '<input type="Button" value="' + buttonTXT[i] + '" id="' + buttonIDS[i] + '" name="' + buttonIDS[i] + '" class="submenu_special" onclick="top.contentFrame.document.forms[0].submit()" /><br />';
}
}
So I have a basic function here, and it works... except for one thing... My arrays have multiple elements, and innerHTML only lets one button get written (the last)... How can I append, vs. replacing with this function? Hello everyone, I am new I found this site while searching for help with my problem. I'm new to javascript and having a very hard time with the document.write. Can anyone tell me why I'm getting this error? Error: missing ) after argument list Source File: file:///G:/CINS%20157/tutorial.12/case1/clist.htm Line: 79, Column: 58 Source Code: document.write("<th id='sumTitle' colspan='2'>" Summary "</th>"); Then there is an arrow pointing between the S and u in Summary. Even if you could just tell me where to look for help with the answer that would be greatly appreciated. If it helps this is the code it is attached to: <script type="text/javascript"> document.write("<table border='1' cellspacing='1'>"); document.write("<tr>"); document.write("<th id='sumTitle' colspan='2'>" Summary "</th>"); document.write("</tr>"); document.write("<tr><th>" Contributors "</th>"); document.write("<td>"+amount.length+ "</td></tr>"); document.write("<tr>") document.write("<th>"); document.write(Amount); document.write("</th>"); document.write("<td>"+amountTotal()+"</td>"); document.write("</tr>"); document.write("</table>"); </script> Thanks in advance for any help you can give me. I really appreciate it. Hello, I have the following code, which I plan on using the datepicker with, however the code currently hangs up on the script references, as to my knowlege it looks ok, and I can't seem to find anything wrong with it: Code:
<html>
<head>
<script>
function open_cal() {
var str_html = ""
+ "<!DOCTYPE html>"
+ "<html lang='en'>"
+ "<head>"
+ "<meta charset='utf-8'>"
+ "<title>CALENDAR</title>"
+ "<link href=jq/jquery-ui.css rel=stylesheet type=text/css/>"
+ "<script src=jq/jquery.min.js type=text/javascript></script>"
+ "<script src=jq/jquery-ui.min.js type=text/javascript></script>"
+ "</head>"
+ "<body>"
+ "<p>Hello test</p>"
+ "</body>"
+ "</html>"
var j = window.open("","CALENDAR","width=200,height=250,status=no,resizable=yes,top=200,left=200")
j.document.write(str_html);
j.document.close();
}
</script>
</head>
<body>
<input onclick="open_cal()" type="button" value="Open" name="B1">
</body>
</html>
I need your help. Any ideas? Thanks very much in advance, J My code is here and it works ... However, I would like my dynamic table to show on the same page as my body and not on a new blank page. I have created a DIV and try playing around with the document.getElementById('monTab').innerHTML but it's not working out for me ... What am i missing ? Regards, Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>new Script - Javascript Cours 11</TITLE>
<META content="text/html"; charset="UTF-8" http-equiv="content-type">
<SCRIPT type="text/javascript">
function createTable(){
var Etudiant = new Array(Number(prompt("How many Students will you put in ?","")));
document.write("<table border=\"1\">");
for (var i=0; i<Etudiant.length; i++) {
Etudiant[i] = window.prompt("S'il vous plait entrez le nom d'un etudiant " + (i+1) + ".","")
alert("Nice to see you "+Etudiant[i]);
document.write("<td>"+Etudiant[i]+"</td>");
j = parseInt(prompt("Combien de notes voulez vous calculez ?"));
for (h=0;h<j;h++){
notes[h] = parseInt(prompt("S'il vous plait entrez la "+(h+1)+" note de "+Etudiant[i]));
document.write("<td>"+notes[h]+"</td>");
}
document.write("<tr>");
}
document.write("</tr>");
document.write("</table>");
document.getElementById('monTab').innerHTML=Etudiant;
}
</script>
<BODY>
<H1>Combien de note voulez vous cumulez ?</H1>
<br>
<br>
<input type="button" name="btnSubmit" value="TRY IT" onclick="createTable()">
<div id="monTab" size="10"> Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ... </div>
</BODY>
</HTML>
I found this line in one of the scripts on javascript.kit <code> if(document.layers|| document.getElementById|| document.all) </code> Could someone give me an idea on why this line would be used in a code? Thank you very much I'm working on a website that will basically embed a widget/frame sent by a handler into a user's current page. The user basically adds a script tag to where they would like the HTML to be. The script tag has their settings and is basically a document.write that calls all the code that we want displayed. So here's my problem. We have a map that we need to add in a specific section, and to get the map we have to call another script tag. So we end up having a script tag (map) embedded in another script tag (the code for the widget/frame) or we end up having to document.write inside a document.write. Now this works just fine and as expected in Firefox, Safari, and Chrome. However, Internet Explorer and Opera wait until the first document.write is completely finished before calling the embedded one. Of course the problem with this, is that it takes the map out of the document's flow and just appends it to the bottom left of the page. Since the rest of the page has already been called, there's no way to move the interior "map" script. Any ideas? Basically just trying to figure out how (if even possible) to render an embedded script tag in Internet Explorer and be able to place it properly. I've tried everything that I can think of, including AJAX and Google's unescape script. Any suggestions, I'd greatly appreciate it. Or even if you've encountered a similar problem, and know that it just isn't possible in IE or Opera, that would be fine too. Thanks in advance! Dear Great Coders, I am having some trouble to get the id of the parent of a document which is iframe1 here. As you can see it the <javascript> is residing in the javascript section. Do mind giving me some ideas? Yes, I know. I can insert the javascript on the top, but believe me i cant for some purpose because I am intergrating many other codes into it. <html> <iframe id="iframe1"> <html> <head> <javascript> </head> <body> </body> </html> </iframe> </html> Hello, I'm new to Javascript. I know how to make a script that when you click on a button it changes a variable. I also know that with document.write I can express this variable but I do not know how to refresh document.write! For example, if I have a var car =3 and when I click on a button car++ (or increases by 1 so it becomes 4 then 5 and so forth depending how many times you click the button) and I write document.write (car), it only shows the 3 and no matter how many times I click on the button, the 3 doesn't change. How can I get the document.write to show the updated variable? Thanks! So I want to have a button that when I click it will change this variable and that number will change live on the page. What is an alternative to document.write? I know I could use <p> in html </p> I would like to use JS though. I hope you can understand my question. I am 14yo and this is not for homework. I just wanna try and learn JS. I read document.write can cause me problems. But all I ever see is: <script type="text/javascript"> document.write("any words"); </script> what alternate could I use? Hello everyone. I'm having a little problem with creating a element in internet explorer. The element that I'm creating is a div with a few style attributes to to it. The div is suppose to cover the whole page almost like a black transparent window on the page. However it is not. The messed up part about this is that it works fine in Firefox, google chrome and I'm sure other browsers (though haven't tested) and when I go to apply the div in my actual code as javascript is suppose to when you tell it create it, it works fine. No problems whatsoever... I'm not to sure what I'm doing wrong here and it would be great if I could get some help with this. Thanks Code: function showPhotoUpload() {
var overlay = document.createElement("div");
overlay.setAttribute("style","z-index:3; background:#111111; width:100%; height:100%; position:absolute; top:0; opacity:0.5; filter:alpha(opacity:50);");
document.body.appendChild(overlay).lastChild;
}
I have this nice little piece of code that Bullant (CodingForum Senior Coder) helped me with. And it works flawlessly! I want to put it in the same document twice. I've tried to tweak the code so that each script is unique, but to no avail Both scripts work by themselves, but when placed together on the same page - the first one fails. Here is the test-site where it is being used: http://metrobilia.worldsecuresystems.com/stools.html# Here's what I'm doing (see below): Any help would be greatly appreciated! Code:
<head>
<link href="/stylesheets/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var picData = [
['images/template2/fpo1_templ2.jpg','URL_for_one'],
['images/template2/fpo2_templ2.jpg','URL_for_two'],
['images/template2/fpo3_templ2.jpg','URL_for_three']
];
//preload the images
var oPics = [];
for(i=0; i < picData.length; i++){
oPics[i] = new Image();
oPics[i].src = picData[i][0];
}
function swapImage(obj){
oImgSwap.src = oPics[obj.indx].src;
oImgSwap.parentNode.href = picData[obj.indx][1];
}
window.onload=function(){
oImgSwap = document.getElementById('imgSwap');
oLinks = document.getElementById('radiobs').getElementsByTagName('a');
for(i=0; i < oLinks.length; i++){
oLinks[i].indx = i;
oLinks[i].onclick=function(){
swapImage(this);
return false;
}
}
swapImage(oLinks[0]);
}
</script>
<script type="text/javascript">
var picDatab = [
['images/template2/fpo1_templ2b.jpg','URL_for_one'],
['images/template2/fpo2_templ2b.jpg','URL_for_two'],
['images/template2/fpo3_templ2b.jpg','URL_for_three']
];
//preload the images
var oPicsb = [];
for(i=0; i < picDatab.length; i++){
oPicsb[i] = new Image();
oPicsb[i].src = picDatab[i][0];
}
function swapImageb(obj){
oImgSwapb.src = oPicsb[obj.indx].src;
oImgSwapb.parentNode.href = picDatab[obj.indx][1];
}
window.onload=function(){
oImgSwapb = document.getElementById('imgSwapb');
oLinksb = document.getElementById('radiobsb').getElementsByTagName('a');
for(i=0; i < oLinksb.length; i++){
oLinksb[i].indx = i;
oLinksb[i].onclick=function(){
swapImageb(this);
return false;
}
}
swapImageb(oLinksb[0]);
}
</script>
</head>
<div class="graphics_templ2" style="padding-left:217px;">
<div class="selections">
<div>
<a href="">
<img src="" id="imgSwap" alt="" />
</a>
</div>
<div id="radiobs">
<div class="single_box">
<a href="#"><img src="/images/template2/sample_box_1_fpo.jpg" width="30" height="30" alt="Sample Box Fpo"></a>
<h2>Color 1</h2>
</div>
<div class="single_box">
<a href="#"><img src="/images/template2/sample_box_2_fpo.jpg" width="30" height="30" alt="Sample Box Fpo"></a>
<h2>Color 1</h2>
</div>
<div class="single_box">
<a href="#"><img src="/images/template2/sample_box_3_fpo.jpg" width="30" height="30" alt="Sample Box Fpo"></a>
<h2>Color 1</h2>
</div>
</div>
</div>
</div>
<div class="graphics_templ2" style="padding-left:15px;">
<div class="selections">
<div>
<a href="">
<img src="" id="imgSwapb" alt="" />
</a>
</div>
<div id="radiobsb">
<div class="single_box">
<a href="#"><img src="/images/template2/sample_box_1_fpob.jpg" width="30" height="30" alt="Sample Box Fpo"></a>
<h2>Color 1</h2>
</div>
<div class="single_box">
<a href="#"><img src="/images/template2/sample_box_2_fpob.jpg" width="30" height="30" alt="Sample Box Fpo"></a>
<h2>Color 1</h2>
</div>
<div class="single_box">
<a href="#"><img src="/images/template2/sample_box_3_fpob.jpg" width="30" height="30" alt="Sample Box Fpo"></a>
<h2>Color 1</h2>
</div>
</div>
</div>
</div>
What I'm trying to get are the tag ids separately after I call the callback function. I've been racking my brain for far too long on this one. Here is a shorter version of what I have. I'm using the array's length to count and break into their own lines. How do i get all 9 id="hover_[index]" separately using my array length? PHP Code: var info = Array("bla_1", "bla_2", "bla_3", "bla_4", "bla_5", "bla_6", "bla_7", "bla_8", "bla_9"); function callback(results, status) { if (status == myStatus) { for (var i = 0; i < results.length; i++) { send(results[i]); } } } function send(info) { document.getElementById('results').innerHTML += "<div id='hover_"+info.length+"'>Something</div>"; hover_target = document.getElementById('hover_'+info.length);// how do i get all 9 hover_[index] separately? someEvent.addDomListener(hover_target, 'mouseover', function() { // do something }); } Thank you so much in advance, Frank Code: document.getElemetById... is that it, or could be somehow done: Code: anyElement.getElemetById... ? Tryed and it did not work. I am writing some javascript that when the user clicks on a link, it hides or displays content inside a div tag. I have been trying to add some code that would only allow for one div tag to be displayed at a time. Here is where I originally got the code (http://www.willmaster.com/library/hi...-to-reveal.php) Whenever I run this code I get this error: Code: Error: document.getElementById(months[x]) is null Source File: /resources/default.js Line: 30 This is the JavaScript that runs when the user clicks the link: Code: <!--
function accordion(tid) {
var x;
var months = new Array();
months[0]="January";
months[1]="February";
months[2]="March";
months[3]="April";
months[4]="May";
months[5]="June";
months[6]="July";
months[7]="August";
months[8]="September";
months[9]="October";
months[10]="November";
months[11]="December";
for (x in months) {
document.getElementById((months[x])).style.display = "none";
}
if(document.getElementById(tid).style.display == "none") {
document.getElementById(tid).style.display = "";
} else {
document.getElementById(tid).style.display = "none";
}}
//-->
Here is where the javascript is activated from PHP Code: <a href=javascript:accordion('$month2');>$month2</a><br /> <div id='$month2' style='display: none';> Hello $month2 </div> Hi, I need to open a PDF file via a web page. Basically, I want to have a textbox where I type in a filename and then click submit and it will open that document. For example, I need to open a PDF document... I need to have a text box where I can input "test1" for example, click "GO" and it will add the "C:/test/" + textbox value + ".pdf" and open it in the browser. I could do it in PHP but this is going to run on a local machine with no serverside so I assume JS will be the way forward. Any ideas? Many Thanks MJFCAD i want to search the index.xml file throu diff input like combo box and input text shown in the search.html file and output the result in a tale. search.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Search</title> <script type="text/javascript" src="search%20xml/search%20xml%20with%20mouseover%20table/searchindex.js"></script> </head><body> <form name="frmMain" id="frmMain" action=""> <b>Search Document: <br> <br> <br> Choose Book <select name="Select1"> <option selected="">--All--</option> <option>b1</option> <option>b2</option> </select><br> <br> Choose year <select name="Select2"> <option selected="">--All--</option> <option>1979</option> <option>1980</option> </select><br> </b><br> <strong>Doc_No</strong> <input name="Text1" type="text"><br> <br> <strong>Subject</strong> <input name="Text2" type="text" style="width: 356px"><br> <br> <input value="Submit" onclick="searchIndex(); return false;" type="submit"> </form> </body> </html> index.xml Code: <?xml version="1.0" ?> <books> <book name="b1"> <year date="1979"> <Document Doc_No="17" Subject="s1" path="ta3amime\1979\17_1979.tif">17_1979_s1.tif</Document> <Document Doc_No="18" Subject="s2" path="ta3amime\1979\18_1979.tif">18_1979_s2.tif</Document> </year> <year date="1980"> <Document Doc_No="19" Subject="s3" path="ta3amime\1980\19_1980.tif">19_1980_s3.tif</Document> <Document Doc_No="6" Subject="s4" path="ta3amime\1980\6_1980.tif">6_1980_s4.tif</Document> <Document Doc_No="1" Subject="s5" path="ta3amime\1980\1_1980.tif">1_1980_s5.tif</Document> <Document Doc_No="7" Subject="s6" path="ta3amime\1980\7_1980.tif">7_1980_s6.tif</Document> <Document Doc_No="4" Subject="s7" path="ta3amime\1980\4_1980.tif">4_1980_s7.tif</Document> </year> </book> <book name="b2"> <year date="1979"> <Document Doc_No="8" Subject="s8" path="ta3amime\1979\8_1979.tif">8_1979_s8.tif</Document> <Document Doc_No="7" Subject="s9" path="ta3amime\1979\7_1979.tif">7_1979_s9.tif</Document> </year> <year date="1980"> <Document Doc_No="9" Subject="s10" path="ta3amime\1980\9_1980.tif">9_1980_s10.tif</Document> <Document Doc_No="1" Subject="s11" path="ta3amime\1980\1_1980.tif">1_1980_s11.tif</Document> <Document Doc_No="8" Subject="s12" path="ta3amime\1980\8_1980.tif">8_1980_s12.tif</Document> <Document Doc_No="14" Subject="s13" path="ta3amime\1980\14_1980.tif">14_1980_s13.tif</Document> <Document Doc_No="16" Subject="s14" path="ta3amime\1980\16_1980.tif">16_1980_s14.tif</Document> </year> </books> searchindex.js Code: window.onload = loadIndex;
function loadIndex() { // load indexfile
// most current browsers support document.implementation
if (document.implementation && document.implementation.createDocument) {
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.load("index.xml");
}
// MSIE uses ActiveX
else if (window.ActiveXObject) {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.load("index.xml");
}
}
// What would be the searchIndex() function ?????
// Result in a table
|
|||||||