JavaScript - Variable Button Position Linked To Mouseover Event

I've been looking for a solution to a dropdown menu problem where the button does not stay hovered when the list is navigated/as soon as the cursor leaves the button area.
At the moment the effect is setup using css sprites (locally) but I have seperate images also for the 2 states.

HTML
Code:

<dl class="dropdown">
<dt id="three-ddheader" onmouseover="ddMenu('three',1)" onmouseout="ddMenu('three',-1)"><div id="mainnav1"></div></dt>
<dd id="three-ddcontent" onmouseover="cancelHide('three')" onmouseout="ddMenu('three',-1)">
<ul><li>
<a href="page1.html" class="underline">Products 1</a>
<a href="page2.html" class="underline">Products 2</a>
<a href="page3.html" class="underline">Products 3</a>
<a href="page4.html" class="underline">Products 4</a>
<a href="page5.html" class="underline">Products 5</a>
<a href="page6.html" class="underline">Products 6</a>
<a href="page7.html">Products 7</a>
</li></ul></dd></dl>

CSS
Code:

#mainnav1 {width:218px; height:50px; background:url(../images/root/mainnav1.png)} #mainnav1:hover {background-position:0 -50px;} #mainnav1 a:active {background-position:0 -50px;}
#mainnav2 {width:218px; height:50px; background:url(../images/root/mainnav2.png)} #mainnav2:hover {background-position:0 -50px;} #mainnav2 a:active {background-position:0 -50px;}
#mainnav3 {width:218px; height:50px; background:url(../images/root/mainnav3.png)} #mainnav3:hover {background-position:0 -50px;} #mainnav3 a:active {background-position:0 -50px;}
#mainnav4 {width:218px; height:50px; background:url(../images/root/mainnav4.png)} #mainnav4:hover {background-position:0 -50px;} #mainnav4 a:active {background-position:0 -50px;}

.dropdown {float:left;}
.dropdown dt {width:218px; height:50px; overflow:hidden;}
.dropdown dt:hover {background-position:0 -50px;}
.dropdown dd {position:absolute; overflow:hidden; width:218px; display:none; z-index:200;}
.dropdown ul {width:218px;}
.dropdown li {display:inline;}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#747474; text-decoration:none; background:#efefef; width:218px;}
.dropdown a:hover {background:#757575; color:#dddddd;}
.dropdown .underline {border-bottom:1px solid #d9d9d9;}

JS
Code:

var DDSPEED = 1;
var DDTIMER = 1;

// Mouse Events //
function ddMenu(id, d) {
    var h = document.getElementById(id + '-ddheader');
    var c = document.getElementById(id + '-ddcontent');
    clearInterval(c.timer);
    if (d == 1) {
        clearTimeout(h.timer);
        if (c.maxh && c.maxh <= c.offsetHeight) {
            return
        } else if (!c.maxh) {
            c.style.display = 'block';
            c.style.height = 'auto';
            c.maxh = c.offsetHeight;
            c.style.height = '0px';
        }
        c.timer = setInterval(function () {
            ddSlide(c, 1)
        }, DDTIMER);
    } else {
        h.timer = setTimeout(function () {
            ddCollapse(c)
        }, 0);
    }
}

// Collapse //
function ddCollapse(c) {
    c.timer = setInterval(function () {
        ddSlide(c, -1)
    }, DDTIMER);
}

// Cancel Collapse During Dropdown Selection //
function cancelHide(id) {
    var h = document.getElementById(id + '-ddheader');
    var c = document.getElementById(id + '-ddcontent');
    clearTimeout(h.timer);
    clearInterval(c.timer);
    if (c.offsetHeight < c.maxh) {
        c.timer = setInterval(function () {
            ddSlide(c, 1)
        }, DDTIMER);
    }
}

// Expand & Contract //
function ddSlide(c, d) {
    var currh = c.offsetHeight;
    var dist;
    if (d == 1) {
        dist = (Math.round((c.maxh - currh) / DDSPEED));
    } else {
        dist = (Math.round(currh / DDSPEED));
    }
    if (dist <= 1 && d == 1) {
        dist = 1;
    }
    c.style.height = currh + (dist * d) + 'px';
    if ((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)) {
        clearInterval(c.timer);
    }
}

I heard that it's something to do with the mouseover function but feel like I could be adding css and not changing some of the stuff already present governing the script, can anyone guide me?
Thanks!

Hi all, I've been trying to teach myself Javascript to figure out this problem, but I'm apparently not learning what I need to.

The objective is this:
I want to have a div appear below my mouse when mousing over different parts of my website.

I know how to swap out the background images, I know how to change the div's sizes... It's just that I'm using one div, and in order to get this right, I need it to be positioned in different places under the mouse each time the image changes.

I've got a cross-browser mouse-follow worked out, I just don't know how to edit the "divvx" and "divvy" variables when I mouse over the "boxtest" div.

Here is the code I'm working on, maybe I'm just missing something obvious?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var divvx=22, divvy=22;
function doMouseMove(e){
var posx=0;var posy=0;
var e=(!e)?window.event:e;//IE:Moz
if (e.pageX){//Moz
posx=e.pageX+window.pageXOffset;
posy=e.pageY+window.pageYOffset;
}
else if(e.clientX){//IE
if(document.documentElement){//IE 6+ strict mode
posx=e.clientX+document.documentElement.scrollLeft;
posy=e.clientY+document.documentElement.scrollTop;
}
else if(document.body){//Other IE
posx=e.clientX+document.body.scrollLeft;
posy=e.clientY+document.body.scrollTop;
}
}
else{return false}//old browsers
var mydiv=document.getElementById('curicon');
mydiv.style.left=(posx-divvx)+'px';
mydiv.style.top=(posy-22)+'px';
}
document.onmousemove=doMouseMove
function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}
</script>
<style type="text/css">
<!--
#curicon {
	background-image: url(resources/cursors/Inactive_Halo.png);
	height: 44px;
	width: 44px;
	position: absolute;
	top: -80px;
	left: -80px;
}
#boxtest {
	position: absolute;
	height: 100px;
	width: 400px;
	background-color: #0F0;
	left: 149px;
	top: 213px;
}
-->
</style>
</head>
<body>
<div id="curicon" name="curicon" style="position:absolute; left:-250px; z-index:2"></div>
<div id="boxtest" onMouseOver="MM_callJS('divvx=68')"></div>
</body>
</html>

Thanks, everyone. This has been driving me nuts for an entire week.

Hi,

ive just been debugging my script in IE, and came across this:

Code:

OrbitTool.prototype.handleMouseUp = function(e) {
  if (e.button == g_o3d.Event.BUTTON_LEFT) {
    this.mouseLeftDown = false;
  } else if (e.button == g_o3d.Event.BUTTON_MIDDLE) {
    this.mouseMiddleDown = false;
  }
};

its giving me an error on the second line, the error reads ('button' is null or not an object). does anyone know why this might be? im not a pro with javascript so my knowledge only stretches so far.

Simon
Reply With Quote

Hey folks,

I'm really wanting to mess around with doing something like the button at the bottom of this web page: http://www.major-confusion.co.uk/tut...sh-button.html

The button has a short looping animation that plays when the button is moused over. It could create a very cool effect.

Any JS gurus know if this or something similar can be done using JS and/or html5? I'm trying to avoid using flash at all costs.

Thanks in advance.

I have identical code in my index that works, so I'm just guessing the error is somewhere else, I know IE is not the best target to aim for - but I really want this to work in the windows default browser....

Here is the php page...
PHP Code:
<HTML>
    <HEAD>
        <TITLE>
            Family Home Page
        </TITLE>
        <SCRIPT TYPE="text/javascript" SRC="AddFamilyMemeber.js">
        </SCRIPT>
    </HEAD>
    <BODY>
        <TABLE>
            <TR>
                <TD>Father:</TD>
                <TD>
                    <SELECT ID="Father">
                        <?PHP
                            $con=mysql_connect("localhost","XXXX","XXXX");
                            if (!$con)
                            {
                                die('Could not connect: '.mysql_error());
                            }
                            mysql_select_db("XXXX",$con);
                            $result=mysql_query("SELECT * FROM FamilyMembers");
                            while ($row=mysql_fetch_array($result))
                            {
                                echo "<OPTION VALUE=\"".$row['ID']."\">".$row['FirstName']." ".$row['MiddleName']." ".$row['LastName']."</OPTION>";
                                echo "<BR/>\n";
                            }
                            mysql_close($con);
                        ?>
                    </SELECT>
                </TD>
            </TR>
            <TR>
                <TD>Mother:</TD>
                <TD>
                    <SELECT ID="Mother">
                        <?PHP
                            $con=mysql_connect("localhost","XXXX","XXXX");
                            if (!$con)
                            {
                                die('Could not connect: '.mysql_error());
                            }
                            mysql_select_db("XXXX",$con);
                            $result=mysql_query("SELECT * FROM FamilyMembers");
                            while ($row=mysql_fetch_array($result))
                            {
                                echo "<OPTION VALUE=\"".$row['ID']."\">".$row['FirstName']." ".$row['MiddleName']." ".$row['LastName']."</OPTION>";
                                echo "<BR/>\n";
                            }
                            mysql_close($con);
                        ?>
                    </SELECT>
                <TD>
            </TR>
            <TR>
                <TD>FirstName:</TD>
                <TD><INPUT TYPE="text" ID="FirstName"/></TD>
            </TR>
            <TR>
                <TD>MiddleName:</TD>
                <TD><INPUT TYPE="text" ID="MiddleName"/></TD>
            </TR>
            <TR>
                <TD>LastName:</TD>
                <TD><INPUT TYPE="text" ID="LastName"/></TD>
            </TR>
        </TABLE>
        <BUTTON TYPE="button" ONCLICK="Submit()">Submit</BUTTON>
        <BUTTON TYPE="button" ONCLICK="Abort()">Abort</BUTTON>
    </BODY>
</HTML>

and here is the javascript that works in the index but not here...
Code:

function Abort()
{
	document.location="AddFamilyMember.php";
};

When I load the page everything looks ok, but click on the abort button, and all that happens is that the little error symbol pops in the lower left of IE. The names of the two files are "AddFamilyMember.php" and "AddFamilyMember.js".

Sorry, but I honestly can't see where the problem is....

I am using 2 ajax functions in the program. One for login and one for logout.
The login one is showUser which is working correctly by using the form onsubmit method, however the logout button (IN BOLD) onclick method is not working. Pls help.


Code:

<form  onsubmit="showUser(document.getElementById('uid').value,document.getElementById('pass').value);return false;" >
  <div id="txt"><b>Enter your username </b>
    <input type="text" name= "username" id="uid">
    <br>
  <b>Enter your password</b> <input type="password" name="pass" id="pass">
  <br></div>
  <div id="txt1" style="display : none">help</div>
  <input type="submit" value="Login" /> 
 <input type="button" onclick="logout(document.getElementById('uid').value); return false; " name="logout" value="Logout" />
 <input type="button" value="Register" class="register"/>
</form>

Hi

I am generating a report on submit click.Due to size of data query execution takes some time to display result, in mean time if user press reload button on browser toolbar consequently same query request going to database and the performance become slow down. I am able to restrict user from clicking F5 and ctrl+R button but not reload button. I there any way to handle event on reload button? or can we disable reload button on submit?

Thanks in advance!

Code:

 
	 Quote:

	

	
		

			
				<html>
<head>
<script language="javascript">
var myWindow;
function christDoes(){
    mydWindow=open("secondary.html", "yes");
    }

    </script>
</head>
<body><form name="myform" method=POST ACTION="sake.html" ><CENTER>
<B>ENTER YOUR SUBJECT</B><INPUT TYPE="TEXT" NAME="subject">
<input type="button" name="ok" value="OK" onClick="christDoes()">
</form>
</body>
</html>
			
		

	
	

Code:

 
	 Quote:

	

	
		

			
				<html>
<head>
<script language="javascript">
function me(){
displayColor();
}
function displayColor() {
function newWindow(strWin,strURL,intX,intY,intWidth,intHeight){
winChild =window.open(strURL,strWin,'left=' + intX + ', screenX =' + intX + ', top=' + intY + ', screenY=' + intY + ', width=' + intWidth + ', height=' + intHeight + ', scrollbars=yes, toolbar=yes');

}

function closeChild(){
    if(winChild){
         winChild.close();
    }
}


var m=0;
var fSubject = self.opener.document.forms[0].subject.value;
	if(fSubject.length>0){
	if(isNaN(fSubject)){fSubject="";}
	else{opener.alert("Please enter figure");}
	numSub=parseInt(fSubject);
	if(numSub==5){var strSub="abcde";}
	self.document.write("<center>" +"ENTER SUBJECT HERE" +"</center><br>");
	var mercy="<HTML><BODY>"
	mercy +="<CENTER>"
	sub=new Array(strSub.length);
	for(var i=0; i<sub.length; i++){
	m++;
	mercy +=m +"<input type='text' name='sub[i].toLowerCase()'>" +"<BR>";
	opener.alert("You have entered" +m +"subjects");
	}
	}
	mercy +="</CENTER></FORM></BODY></HTML><BR></BR>";
	self.document.write(mercy +"<BR>");
	self.document.bgColor="pink";
	newWindow();

document.write("<center><input type=\"button\"  name=\"  submit\"  value=\"SUBMIT\" onClick=newWindow('winChild','child.htm',100,100,200,200)><center>");
}

</script>
</head>
<body onload='me()' onFocus="closeChild();" onUnLoad="closeChild()">

<form></form>
</body>
</html>
			
		

	
	

Code:

 
	 Quote:

	

	
		

			
				<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
var winGrandChild;
function newWindow(strWin,strURL,intX,intY,intWidth,intHeight){
winGrandChild =window.open(strURL,strWin,'left=' + intX + ', screenX =' + intX + ', top=' + intY + ', screenY=' + intY + ', width=' + intWidth + ', height=' + intHeight + ', scrollbars=yes, toolbar=yes');
}
function closeGrandChild(){
    if(winGrandChild){
         winGrandChild.close();
    }
}
//-->
</SCRIPT>

</HEAD>


<BODY onFocus="closeGrandChild();" onUnload="closeGrandChild();">
<form>
<INPUT type="button" value="Open Window" name=button1 onClick=newWindow('winGrandChild','grandchild.htm',200,200,200,200)>
<form>
</BODY>
</HTML>
			
		

	
	

can somebody please tell me what need done. Everything is working fine except for the button created in javascript that is in the second window which is to open the third window. Thanks.

I have a html page with a lot of thumbnails. The idea is that when the user clicks on an image the onClick event is to display another detailed form and deliver to that form the name of the image in a variable. In the detailed php-form there is a query to MySQL to retrieve a record. The record will be retrieved by a Query based on the name of the picture.
Apparently the PHP cannot do the job. I had an idea to make the thumbnail page as a form and to use use a hidden field with the thummnail name which should be carried on with the $_POST array through the submit button but i do not want to have a submit button. The more elegant way is just by clicking the picture the detailed page is opened and the variable is transferred
where my php code can make use of the variable for the query.
I have never used java before so you have to excuse for the lack of knowledge.
Can anyone gie me an idea how i should implemnt this
Best regards
MSP

I have a html page with a lot of thumbnails. The idea is that when the user clicks on an image the onClick event is to display another detailed form and deliver to that form the name of the image in a variable. In the detailed php-form there is a query to MySQL to retrieve a record. The record will be retrieved by a Query based on the name of the picture.
Apparently the PHP cannot do the job. I had an idea to make the thumbnail page as a form and to use use a hidden field with the thummnail name which should be carried on with the $_POST array through the submit button but i do not want to have a submit button. The more elegant way is just by clicking the picture the detailed page is opened and the variable is transferred
where my php code can make use of the variable for the query.
I have never used java before so you have to excuse for the lack of knowledge.
Can anyone gie me an idea how i should implemnt this
Best regards
MSP

Hi,

I have a variable:

Code:

var step = 5;

that is referenced by this function:


Code:

function animate(d) {
        if (d>eol) {
          return;
        }
        var p = poly.GetPointAtDistance(d);
		if (k++>=180/step) {
          map.panTo(p);
          k=0;
        }
        map.panTo(p);
        marker.setPoint(p);
		if (supportsCanvas) {
          if (poly.GetIndexAtDistance(d)>lastVertex) {
            lastVertex = poly.GetIndexAtDistance(d);
            if (lastVertex == poly.getVertexCount()) {
              lastVertex -= 0;
            }
            while (poly.getVertex(lastVertex-2).equals(poly.getVertex(lastVertex-1))) {
              lastVertex-=1;
            }
            angle = bearing(poly.getVertex(lastVertex-2),poly.getVertex(lastVertex-1) );
            plotcar();

          }
        }
        
	if(!paused){
		setTimeout("animate("+(d+step)+")", tick);
	} else {
		continueStep=d+step;	
	}
}

and I would like for the user to have the option of setting that variable using radio buttons- say to 5, 7 or 10

is it possible?

Hi forum,

I am trying to attach an event to a dynamically produced button, and then use
stopPropagation and preventDefault.
Code:

function chapter12_nodeOne() {
    
    //create an element
    var element = document.createElement('input');
    //set some attributes
    element.setAttribute('type', 'button');
    element.setAttribute('value', 'submit');
    element.setAttribute('id', 'myBtn');
    //appendd the element into a DIV
    document.getElementById('myDiv').appendChild(element);
    //uses EventUtil to attach an event listener
    EventUtil.addHandler(element, 'click', function() {
        alert('event attached');
    });

    var flag = confirm('prevent default behavior of button?');
    if (flag) {
        var el = document.getElementById('myBtn');/////////////////////////(1)
        var ev = el.onclick;
    }
}

var EventUtil = {
    addHandler: function(element, type, handler) {
        //check if the element and the browser support DOM Level 2 event attachment
        //if the user is not browsing with IE
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        }
        //if user is browsing with IE
        else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        }
        //if user is using a browser that only supports DOM Level 0 event attachment 
        else {
            element["on" + type] = handler;
        }
    },

    removeHandler: function(element, type, handler) {
        //check if the element and the browser support DOM Level 2 event attachment
        //if the user is not browsing with IE
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        }
        //if user is browsing with IE
        else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        }
        //if user is using a browser that only supports DOM Level 0 event attachment 
        else {
            element["on" + type] = null;
        }
    }
};

But when debugging I see under el on the line marked with (1) that the onclick event is null. What am I doing wrong?!
PS:the event is attached, when I click on the button I get an alert message

Code:

<fieldset class="submit" style="padding-left: 200px;">
	<?php if ($site_exist >= 1){
			echo "<input type=\"submit\" name=\"submit\" value=\"Update\">";
		} else { echo "<input type=\"submit\" name=\"submit\" value=\"Submit\">";} ?>
<!-- This is the button I am having trouble with. -->
		<input type="button" name="delete" value="Delete"
			onClick="return confirmSubmit()">
</fieldset>
</form>
		<script type="text/javascript"><!--
			function confirmSubmit(){
				var agree=confirm("Are you want to delete this site from our index?");
				if (agree) return true ;
				else return false ; } // -->
		</script>

Not entirely sure which forum this should go in, since the problem could probably be fixed with HTML, PHP or Javascript. Anyway, I have the confirmation window working. What I need is for the button to post a variable (siteDelete = 'true') when it is pressed. I would prefer to do that part without javascript, but I want the data to be posted after and only after the confirmation window returns true. I can do that with a submit button, but I'm not sure what code to use and where to use it when using a non-submit button.

is it possible to capture the control.event or element.event that was fired to invoke the onbeforeunload event.

for example, if a button is clicked and it causes the onbeforeunload event to fire can i determine which button was clicked.

thanks

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>