|
JavaScript - Mouse Position
is it possible to make the mouse be at a given position on the screen using javascript for example i am writing a element resize script and i would like to have it so when u click on the resize button the cursor moves to the bottom right corner of the element for the starting position
Similar TutorialsError: Code: Error ``TypeError: window.event is undefined'' [x-] in file ``file:///C:/Users/Martyn%20Ball/Desktop/test.php#'', line 6, character 0. Code: Code: <html>
<head>
<title>Testing Javascript</title>
<script type="text/javascript">
function test() {
alert(window.event.clientX);
}
function doSomething(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
// posx and posy contain the mouse position relative to the document
// Do something with this information
}
</script>
</head>
<body>
X Position: <div id="x"></div>
Y Position: <div id="y"></div>
<br />
<a href="#" onMouseOver="test()">Test Link</a><br />
<a href="#" onClick="doSomething('y')">Type of Event</a>
</body>
</html>
(Taken from external website so I can understand how it works). Hi I have a control on the left side of the page which sits inside a div. The control reacts to where the mouse is positioned within the div. This works fine in IE but I cant get it working in Firefox. Heres what I have: Code: <div id="divcon" class="boxContentLeft" OnMouseMove="SetValues(event);">
function SetValues(event)
{
var ev=(!event)?window.event:event; //Moz:IE
if (ev.pageX) { //Mozilla or compatible
/* The absolute position of the control */
var MarqPos = GetAbsPosition(divcon);
alert('MarqPos x = '+MarqPos.x+'\nMarqPos y = '+MarqPos.y);
/* Relative to this div */
MousePointerDivX = ev.pageX-MarqPos.x;
MousePointerDivY = ev.pageY-MarqPos.y;
alert('MousePointerDivX = '+MousePointerDivX+'\nMousePointerDivY = '+MousePointerDivY);
/* Relative to the top left of the viewable area */
MousePointerClientX = ev.pageX;
MousePointerClientY = ev.pageY;
alert('MousePointerClientX = '+MousePointerClientX+'\nMousePointerClientY = '+MousePointerClientY);
}
else if(ev.clientX) { //IE or compatible
/* Relative to this div */
MousePointerDivX = window.event.x;
MousePointerDivY = window.event.y;
alert('MousePointerDivX = '+MousePointerDivX+'\nMousePointerDivY = '+MousePointerDivY);
/* Relative to the top left of the viewable area */
//MousePointerClientX = window.event.clientX;
//MousePointerClientY = window.event.clientY;
//alert('MousePointerClientX = '+MousePointerClientX+'\nMousePointerClientY = '+MousePointerClientY);
/* The absolute position of the control */
var MarqPos = GetAbsPosition(divcon);
alert('MarqPos x = '+MarqPos.x+'\nMarqPos y = '+MarqPos.y);
/* The mouse position relative to top left of page */
//MousePointerX = mouseX(window.event);
//MousePointerY = mouseY(window.event);
//alert('MousePointerX = '+MousePointerX+'\nMousePointerY = '+MousePointerY);
/* The control relative to the top left of the parent control */
//var OffsetLeft = marquees.offsetLeft;
//var OffsetTop = marquees.offsetTop;
//alert('OffsetLeft = '+OffsetLeft+'\nOffsetTop = '+OffsetTop);
}
else { //old browsers
return false;
}
setInterval("",20);
}
// Calculates the object's absolute position, and width and height
function GetAbsPosition(object) {
var position = new Object;
position.x = 0;
position.y = 0;
if( object ) {
position.x = object.offsetLeft;
position.y = object.offsetTop;
if( object.offsetParent ) {
var parentpos = GetAbsPosition(object.offsetParent);
position.x += parentpos.x;
position.y += parentpos.y;
}
}
position.cx = object.offsetWidth;
position.cy = object.offsetHeight;
return position;
}
Using IE only I didnt need to find out the position of the DIV within the page as I could just use 'window.event.x' which would return the x coordinate within the DIV. I dont think you can do that with Firefox so you have to get the coordinate of the mouse and then subtract the coordinates of the DIV. But when Im calling GetAbsPosition(divcon) I get Error: divcon is not defined. Can somebody please tell me why I can call GetAbsPosition from IE and it works but I get an error calling the same thing in Firefox. Thanks it works great in chrome and strangely enough internet explorer 8 but doesn't work in firefox Code: // Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false;
// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)
// Set-up to use getMouseXY function onMouseMove
document.onmousemove = DRAG;
// Temporary variables to hold mouse x-y pos.s
// Main function to retrieve mouse x-y pos.s
var tempX = 0;
var tempY = 0;
function DRAG(e)
{
if (!IE)
{ // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
else
{ // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
}
// catch possible negative values in NS4
if (tempX < 0){ tempX = 0; }
if (tempY < 0){ tempY = 0; }
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
var w = getW();
var h = getH();
if(tempX > (w-32)){tempX = w-32;}
if(tempY > (h - 32)){tempY = h-32; }
var newX = tempX-id.offsetWidth;
var newY = tempY-header.offsetHeight-id.offsetHeight;
if(newX < 0){newX = 0; }
if(newY < 0){newY = 0; }
document.getElementById('myx').innerHTML = newX;
document.getElementById('myy').innerHTML = newY;
id.style.left = newX+"px";
id.style.top = newY+"px";
Hi; I'd like to ask you a question; why my mouse cursor does not sit in the position of the leftmost and topmost of a bbcode form. Thanks. my form as following; bbcode form PHP Code: <form action="story_verify1.php" method="post" name="editform" onsubmit="return checkForm(this)"> <table id="editform"> <tr> <td id="story">My story</td> </tr> <tr> <td> <input type="button" class="button" value="bold" name="bold" onclick="javascript:tag('b', '[b]', 'bold*', '[/b]', 'bold', 'bold');" onmouseover="helpline('bold')" /> <input type="button" class="button" value="italic" name="italic" onclick="javascript:tag('i', '[i]', 'italic*', '[/i]', 'italic', 'italic');" onmouseover="helpline('italic')" /> <input type="button" class="button" value="underline" name="underline" onclick="javascript:tag('u', '[u]', 'underline*', '[/u]', 'underline', 'underline');" onmouseover="helpline('underline')" /> <input type="button" class="button" value="quote" name="quote" onclick="javascript:tag('q', '[quote]', 'quote*', '[/quote]', 'quote', 'quote');" onmouseover="helpline('quote')" /> <input type="button" class="button" value="code" name="code" onclick="javascript:tag('c', '[code]', 'code*', '[/code]', 'code', 'code');" onmouseover="helpline('code')" /> <input type="button" class="button" value="url" name="url" onclick="javascript:tag('url', '[url]', 'url*', '[/url]', 'url', 'url');" onmouseover="helpline('url')" /> <input type="button" class="button" value="img" name="img" onclick="javascript:tag('img', '[img]', 'img*', '[/img]', 'img', 'img');" onmouseover="helpline('img')" /> <br /> Font size: <select name="fontsize" onchange="font('[size=' + this.form.fontsize.options[this.form.fontsize.selectedIndex].value + ']', '[/size]'); this.selectedIndex=2;" onmouseover="helpline('fontsize')" class="form_elements_dropdown"> <option value="50%" >Tiny</option> <option value="75%" >Small</option> <option value="100%" selected="selected" >Normal</option> <option value="150%" >Large</option> <option value="200%" >Huge</option> </select> Font color: <select name="fontcolor" onchange="font('[color=' + this.form.fontcolor.options[this.form.fontcolor.selectedIndex].value + ']', '[/color]'); this.selectedIndex=0;" onmouseover="helpline('fontcolor')" class="form_elements_dropdown" > <option value="black" style="color:black">Black</option> <option value="silver" style="color:silver">Silver</option> <option value="gray" style="color:gray">Gray</option> <option value="maroon" style="color:maroon">Maroon</option> <option value="red" style="color:red">Red</option> <option value="purple" style="color:purple">Purple</option> <option value="fuchsia" style="color:fuchsia">Fuchsia</option> <option value="navy" style="color:navy">Navy</option> <option value="blue" style="color:blue">Blue</option> <option value="aqua" style="color:aqua">Aqua</option> <option value="teal" style="color:teal">Teal</option> <option value="lime" style="color:lime">Lime</option> <option value="green" style="color:green">Green</option> <option value="olive" style="color:olive">Olive</option> <option value="yellow" style="color:yellow">Yellow</option> <option value="white" style="color:white">White</option> </select> <br /> <input type="text" name="helpbox" size="75" class="helpbox" readonly="readonly"/> </td> </tr> <tr> <td> Post:***<br /> <textarea rows="10" cols="50" name="Content" class="form_elements_text" id="thread"> <?php echo trim(stripslashes($_SESSION['story_content'])); ?> </textarea> </td> </tr> <tr> <td colspan="2" class="security_check"> <?php $_SESSION['fvalue']=rand(0,9); echo $_SESSION['fvalue']; ?> + <?php $_SESSION['svalue']=rand(0,9); echo $_SESSION['svalue']; ?> = <input type="text" name="result" /> ** </td> </tr> <tr> <td colspan="2" id="post"> <input type="submit" name="Post" value="Post" class="button" /> <input type="submit" name="preview" value="Preview" class="button"/> <input type="reset" value="Reset" class="button" onclick="javascript:confirm_reset();"/> </td> </tr> </table> </form> bbcode.js PHP Code: //Variables for controlling opening and closing tags (function tag) var b = 2; var i = 2; var u = 2; var q = 2; var mail = 2; var url = 2; var img = 2; //Function for creating non-font tags function tag(v, tagadd, newbut, tagclose, oldbut, name) { var r = document.selection.createRange().text; rr = tagadd + r + tagclose; if(r) { document.selection.createRange().text = rr; } else { if (eval(v)%2 == 0) { eval("window.document.editform."+name+".value = newbut;"); var content = window.document.editform.content.value; window.document.editform.content.value = content + tagadd; window.document.editform.content.focus(); } else { eval("window.document.editform."+name+".value = oldbut;"); var content = window.document.editform.content.value; window.document.editform.content.value = content + tagclose; window.document.editform.content.focus(); } eval(v+"++;"); } } //Function for adding font color and size tags function font(bbopen, bbclose) { var r = document.selection.createRange().text; rr = bbopen + r + bbclose; if(r) { document.selection.createRange().text = rr; }else{ var post = document.editform.post; post.value += bbopen +r+ bbclose; post.focus(); } return; } function smilie (tag) { var myField; tag = ' ' + tag + ' '; if (document.getElementById('thread') && document.getElementById('thread').type == 'textarea') { myField = document.getElementById('thread'); } else { return false; } if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = tag; myField.focus(); } else if (myField.selectionStart || myField.selectionStart == '0') { var startPos = myField.selectionStart; var endPos = myField.selectionEnd; var cursorPos = endPos; myField.value = myField.value.substring(0, startPos) + tag + myField.value.substring(endPos, myField.value.length); cursorPos += tag.length; myField.focus(); myField.selectionStart = cursorPos; myField.selectionEnd = cursorPos; } else { myField.value += tag; myField.focus(); } } //Helpbox messages bold_help = "Bold text: [b]text[/b]"; italic_help = "Italic text: [i]text[/i]"; underline_help = "Underline text: [u]text[/u]"; quote_help = "Quote text: [quote]text[/quote] or [quote=name]text[/quote]"; code_help = "Code display: [code]code[/code]"; img_help = "Insert image: [img]http://image_url[/img]"; url_help = "Insert URL: [url]http://url[/url] or [url=http://url]URL text[/url]"; fontcolor_help = "Font color: [color=red]text[/color] Tip: you can also use color=#FF0000"; fontsize_help = "Font size: [size=50%]small text[/size]"; //Function for displaying help information // Shows the help messages in the helpline window function helpline(help) { var helpbox = document.editform.helpbox; helpbox.value = eval(help + "_help"); } //Function to confirm reset function confirm_reset () { if(confirm("If you continue you will loose everything you have entered so far. \n \n" + "Click OK to proceed and start again. \n \n Alternatively click cancel to continue " + "working on your post.")) { return true; } else { return false; } } //Check the form submission for errors function checkForm() { var subject = document.editform.subject; var post = document.editform.post; //Check to make sure post lengths are sensible if (subject.value.length < 2 && post.value.length < 2) { alert("This is a short post!" + " \n \n " + "We require that each post (and subject) \n" + "be at least 2 characters long. \n \n" + "Go back and try again."); return false; } else { if (subject.value.length < 2) { alert("We require that the subject \n" + "be at least 2 characters long. \n \n" + "Go back and try again."); return false; } else { if (post.value.length < 2) { alert("We require that each post \n" + "be at least 2 characters long. \n \n" + "Go back and try again."); return false; } else { return true; } } } } so basically I have a div that contains the image of a circle and I need to check if the mouse is touching the circle. what approach should I take to this? I need to call another function when the mouse leaves the circle (which will be a square speaking physically) I would assume it has to do with radius, but I am not really sure how to do this with a circle shape. thanks a ton! Hi all, I tried to create a mouse over effect using jquery. When user hovers #box1_trigger link, the #service_box1 div should change it's background position. The code i created is the following it's not working for some reason. html: Code: <div class="service_box box1" id="service_box1">
<a href="#" id="box1_trigger">
<h3>bla bla</h3>
<p>bla bla bla bla bla</p>
</a>
</div>
javascript: Code: <script type="text/javascript">
$(document).ready(function() {
$("#box1_trigger").hover(
function() {
$("#service_box1").stop().animate({backgroundPosition:"(0 -250px)"}, "slow");
},
function() {
$("#service_box1").stop().animate({backgroundPosition: "0 0"}, "slow");
}
);
});
</script>
css: Code: #service_box1{
width:318px; height:282px;
float:left;
background:url(images/services_panel.png) 0 0 no-repeat;
}
a#box1_trigger{
width:100%; height:100%;
float:left;
display:block;
}
Could you help me fix this please?? I've got to have a typo somewhere, but i can't seem to find it. I need a new pair of eyes to point it out for me. background: trying to code a mouseover link for a nav bar. everything is working( hyperlink, normal image shows up) but when i mouse over the image swap doesn't happen. I have 2 parts of code. 1st preloads images and does the swap function. loads in <head> See below: Code: <SCRIPT language="javascript" type="text/javascript">
if (document.images)
{
/* preload images */
var subcontractorsOn = new Image ();
subcontractorsOn.scr = "subcontractorsOn.gif";
var subcontractorsOff = new Image ();
subcontractorsOff.scr = "subcontractorsOff.gif";
}
function mouseOn (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "On.scr");
}
function mouseOff (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "Off.scr");
}
</SCRIPT>
2nd just calls the functions to preform the swap. this is in the <body> see code below Code:
<a href="subcontractors.htm" onMouseOut="mouseOn('subcontractors')"
onMouseOver="mouseOff('subcontractors')">
<img src="subcontractorsOff.gif" height="40" width="133" name="subcontractors" id="subcontractors" border="0" alt="subcontractors"></a>
any insight would be great. regards, Fatmann66 I'm new to javascript and am not sure why this works in firefox and not chrome. I am trying to create a script that keeps an object fixed horizontally while bing positioned absolute vertically. if I replace the toPP variable in document.getElementById('fire').style.top = toPP; with say '50px' it will move the element down 50 pxs, but how I have it currently it doesn't do anything in chrome Code: <script type="text/javascript" >
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
var x = 0 -document.documentElement.scrollTop;
var toP = String(x);
var toPP = toP + "px";
document.getElementById('fire').style.position = 'fixed';
document.getElementById('fire').style.top = toPP;
}
}
</script>
I need to convert a position:fixed element to position:absolute when the user resize their browser window below 1000px. Right now it does nothing. The element always keeps the fixed positioning even after resizing the window. Here's what I have right now: Code: <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<base href="http://www.area51entertainment.co/" />
<title>Emoto <?php echo "$section"; ?></title>
<meta charset="UTF-8" />
<meta name="verify-v1" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="Andrew McCarrick" />
<meta name="robots" content="index, follow" />
<style type="text/css">
body,html {
background: #FFFFFF; /* Old browsers */
color: #000000;
font-family: Verdana;
margin-right:auto;
margin-left:auto;
max-width:1000px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
</style>
<link rel="stylesheet" href="emoto/style.css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="http://www.area51entertainment.co/TouchIcon.png" />
<link rel="apple-touch-icon-precomposed" href="http://www.area51entertainment.co/TouchIcon.png" />
<link rel="image_src" href="./logo.png" />
<script language="javascript" src="emoto/float.js"></script>
</head>
<body>
<div class="wrapper">
<div id="header_float">
<div class="header_wrapper">
<div class="logo">
Picture
</div>
<div class="links">
Home | Settings | Notifications | Requests | Messages | Search Bar
</div>
<div class="links_right">
Profile Link/Sign-Out
</div>
</div>
</div>
<div class="content_wrapper">
Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 T
est2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2
</div>
</div>
</body>
</html>
style.css Code: a:link {color: #FFFFFF; text-decoration: none;}
a:visited {color: #FFFFFF; text-decoration: none;}
a:active {color: #FFFFFF; text-decoration: none;}
a:hover {color: #3399FF; text-decoration: none;}
.wrapper{
min-height: 2000px;
min-width: 1000px;
}
#header_float{
width: 100%;
min-width: 1000px;
height: 35px;
left:0;
right:0;
top:0;
position: fixed;
background: #49963A;
z-index: 1000;
}
.header_wrapper{
width: 1000px;
height: 35px;
margin-right:auto;
margin-left:auto;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
color: #FFFFFF;
}
.logo{
float: left;
width: 150px;
height: 25px;
font-size: 26px;
position: relative;
top: -1px;
left: 8px;
}
.links{
float: left;
width: 670px;
height: 25px;
position: relative;
top: 7px;
}
.links_right{
float: right;
width: 180px;
height: 25px;
position: relative;
top: 7px;
}
.content_wrapper{
position: relative;
top: 35px;
width: 995px;
min-height: 450px;
}
img{
border: 0px;
}
float.js Code: if (screen.availWidth<=999)
document.getElementById('header_float').style.position = 'absolute';
else
document.getElementById('header_float').style.position = 'fixed';
hi, when i mouseon an image, how can i make it so, the image i'm mousingon and a second image both fade into alternate images, and then fade back out to the original images when i mouseoff? here is an example- http://www.javascript-fx.com/develop...t/ifctest.html . any help would be most appreciated.
background: display 3-4 pictures and a generic parargraph. when you mouseover a picture the parargragh changes to the bio of the person pictured and doesn't change until a different picture is mouseovered or a reset butten is clicked. current code: i have adapted some code I found (thank you, donator) to basicly hide and unhide a span ID on mouseover. if functions as i want but the element id is hardcoded and i would like it to be dynamic on mouse location. not being that familair w/ coding and / or javascript; i'm stuck. Code: <script type="text/javascript">
var el;
var cpic; //elementId via mouse position
window.onload=function() {
el=document.getElementById('pic1');
el.onmouseover=function() {
changeText('hide','show')
}
}
function changeText(cl1,cl2) {
document.getElementById('span1').className=cl1;
document.getElementById('span2').className=cl2;
}
</script>
so the above works for 1 image, but as you can see "pic1" is hard coded. i figured i could define "cpic" to takes it's place, but i'm not sure how to get the elementId (i'm assuming it would be from the mouse position). if the above code is totaly the wrong approach let me know. it was just the first thing i found that seemed to do what i needed. on the HTML side "span1" is the default text and "span2" is the hidden mouseover text. i'm assuming that by adding 2 more pictures i'll need to add "span3" and "span4". i'll also have to find a way of hiding the other spans. I.E. if i go from pic2 to pic3 then, the pic2 text will have to be hidden before pic3 text is displayed. one thing i don't want to do is restrict the mouse to be focused on the picture to display the text. the text should change only when another picture is in focus or the rest button is clicked. any direction / suggestions would be a big help. regards, Fatmann66 I have a pop-up message box, that I'd like help changing to a mouse-over message box. Any help would be appreciated. Thanks Code: <style>
.msg { display:block; position:absolute; top:300px;
left:300px; width:350px; background-color:#eeeeff; border-style:solid;
border-width:1px; padding:15px 20px 5px 20px; }
.msgclose { text-decoration:none; font-size:0.9em;
font-variant:small-caps; margin-top:10px; }
</style>
<div id="popupMsg" class="msg">
You must read this message.<br>
This is a test message box <br />
<div style="width:100%; text-align:right;">
<a class="msgclose" href="#" onclick="document.getElementById('popupMsg').style.display = 'block';
return false;"><font color="#800000">Close Window</font></a>
</div>
I just want to know : the animation you know the eyes of the who follow the mouse I can not put it on my web how could I please help me thank you Hi frds , I have requirement that when ever I hover the mouse on image then the mouse pointer should be hand symbol , So for that I have written the code as <a style="cursor: hand;"> <img ....?</a> in IE it works fine but in Firefox it doesnot works Note : I have already used as <a href="#"> <img ....></a> but due to this , the screen is jumping when we click on image Thanks Raj I wrote this code for 1 image, and it is working perfectly fine: Code: function swapImage()
{
document.getElementById("linkedin").src = "images/glinkedin.png";
}
function restoreImage()
{
document.getElementById("linkedin").src = "images/linkedin.png";
}
the problem starts when I want to use this code for 4 images, can anyone correct it please: Code: function swapImage()
{
document.getElementById("linkedin").src = "images/glinkedin.png";
}
{
document.getElementById("facebook").src = "images/gfacebook.png";
}
{
document.getElementById("google").src = "images/ggoogle.png";
}
{
document.getElementById("twitter").src = "images/gtwitter.png";
}
function restoreImage()
{
document.getElementById("linkedin").src = "images/linkedin.png";
}
{
document.getElementById("facebook").src = "images/facebook.png";
}
{
document.getElementById("google").src = "images/google.png";
}
{
document.getElementById("twitter").src = "images/twitter.png";
}
How to mouse over the image then the words will appear below it?
Hi, Does anyone knows how to use this effect using javascript? http://www.modonline.com/ Really appreciate if someone can help me. Thank You, Nadun Hi I have a requirement....I have a timer on a page. If the user leave the page (mouse goes off of that page) the timer starts and continues...and when the user comes into that page(mouse over that page) the timer goes off/STOP....Is this can be done?? using javascript??? pls help... Hi, Wondering if anyone can help me out with some javascript. How do I check upon clicking a random object on the page that the object onmousedown is an image or not? Any help is much appreciated. -cantonboi |
|||||||