|
JavaScript - Why Use Preventdefault() For Dragging Elements?
Hi,
I was trying to code a draggable div, but ran into a weird behavior until I added "return false;" or rather "preventDefault();" to my onmousedown function. Now, I wonder why I need to prevent the default action for onmousedown triggered on a div. I understand what it usually does (e.g. preventing a form from submitting, etc.) But what default action is actually being prevented in this case? Thanks for your help. Here's the script: Code: <script type="text/javascript">
var dragging = false;
var draggable;
window.onload = function() {
draggable = document.getElementById('draggable');
draggable.onmousedown = function(e) {
dragging = true;
if (e.preventDefault) e.preventDefault(); else e.returnValue = false;
}
}
window.onmousemove = function(e) {
if (!e) e = window.event;
if (dragging) {
draggable.style.left = e.clientX - 30 + 'px';
draggable.style.top = e.clientY - 30 + 'px';
}
}
window.onmouseup = function() {
dragging = false;
}
</script>
And the HTML code: Code: <div id="draggable"></div> Similar TutorialsHey guys, I had a client ask me to frankenstein two HTML5 themes together to achieve having both a countdown clock and snow effect on a "coming soon" page. You can see it he EXSAPIEN - A New Graphic Novel The problem I'm having now is that the social media buttons are not clickable (The links work on my iPhone, but not on my laptop.) I have been able to EITHER display the snow, OR make the links work, but not both at the same time. This code seems to be the piece that is making the difference (specifically, the Code: event.preventDefault(); toward the end): Code:
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.z = 1000;
scene = new THREE.Scene();
scene.add(camera);
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );
for (var i = 0; i < 500; i++) {
particle = new Particle3D( material);
particle.position.x = Math.random() * 2000 - 1000;
particle.position.y = Math.random() * 2000 - 1000;
particle.position.z = Math.random() * 2000 - 1000;
particle.scale.x = particle.scale.y = 1;
scene.add( particle );
particles.push(particle);
}
container.appendChild( renderer.domElement );
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if( userAgent.match( /iPad/i ) || userAgent.match( /iPhone/i ) || userAgent.match( /iPod/i ) )
{
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'touchstart', onDocumentTouchStart, false );
document.removeEventListener( 'touchmove', onDocumentTouchMove, false );
}
else if( userAgent.match( /Android/i ) )
{
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'touchstart', onDocumentTouchStart, false );
document.removeEventListener( 'touchmove', onDocumentTouchMove, false );
}
else
{
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
}
setInterval( loop, 1000 / 60 );
$('canvas').parent().addClass('snow');
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
I learned jscript back in 1999, so with all the new technology, multi-touch etc, that has come about in the meantime, I am effectively a n00b again. :/ Please help! What can I do here that will allow the snow effect to run while still keeping the social media links clickable?? Is there any other code I can provide that would be useful in solving the problem? Thank you!! Hi, I was wondering if anyone could help me out with a script I'm trying to create/customize. The idea is to scroll an image by dragging of the mouse (like you have with Google maps for example), instead of the scrollbars. Right now I'm using a script that does the job perfectly fine under IE, but not so much under FireFox, and definitely not under Chrome. Some additional code is probably needed but I have no clue how to write proper JavaScript. Everything I try gives errors and leaves me baffled. Here's a hands-on example of what I mean (works only under IE!): http://home.wanadoo.nl/r.a.dekk/kaart/kaart.html This is the script I'm using now: Quote: <!-- <script type="text/javascript"> document.onmousedown = function(){ var e=arguments[0]||event; var x=document.body.scrollLeft+e.clientX; var y=document.body.scrollTop+e.clientY; document.onmousemove=function(){ scroll(x-e.clientX, y-e.clientY); return false; } document.onmouseup=function(){ document.onmousemove=null; } return false; } </script> //--> Any help will be appreciated. Thanks. Hi everyone, I'm putting together a family tree type organization chart and looking to be able to drag it around to view different parts similar to google maps. I believe javascript is the way to handle this but need some help pointing me in the right direction. Any help would be greatly appreciated. Thanks, Mike 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 Ok so I have these Input boxes and select boxes on my form. I have them input this way: Code: <input type="text" name="monto[]"> So I can then parse the many that get added and removed when I submit the form, this way PHP see's them as an array. Now I have used this in the past to cycle through my inputs to check values and such on them, but with these [] it doesn't work. Code: var changeCheck = document.getElementsByName('check');
for(i=0; i<changeCheck.length; i++)
{
var enter = new Number(getEl('dueitem' + changeCheck[i].value));
if(changeCheck[i].checked == true) {
final = enter + final;
}
}
Is there a way to cycle all these elements when they are as []. Even if it's cycle them by name, though I never had a determined amount I always have the same names for the 12 different fields there are. Alright,ill go straight to the problem. I want to get all the elements with a certain tag.However i can only get the first one. my code: Code: function getTags(tag) {
var x = document.getElementsByTagName(tag);
var y = x.length;
for(var i = 0; i <= y;i++) {
return x[i];
}
}
What am I doing wrong here. I'm trying to generate this code into my listOfSquares UL using javascript: Code: <a href="#" id="square0"><li class="square"></li></a> This is my complete code: Code: <html">
<head>
<title>Squares</title>
<style>
li.square {
width: 26px;
height: 26px;
border: 1px solid black;
display: block;
float: left;
margin: 5px;
background-color: #39F;
}
div#squares {
width: 725px;
margin: 50px;
background-color: #CCC;
float: left;
}
div#form {
width: 700px;
text-align: center;
clear: both;
margin: 50px 50px 0 50px;
}
</style>
<script>
<!--
function generateSquare() {
var number = 0;
var squareID = "square" + number;
var container = document.getElementById('listOfSquares');
var linked = document.createElement('a');
linked.setAttribute('href', '#');
linked.setAttribute('id', squareID);
container.insertBefore(linked, container.firstChild);
addToElement(squareID);
}
function addToElement(elementID){
var new_element = document.createElement('li');
new_element.setAttribute('class', 'square');
document.getElementById(elementID).innerHTML=new_element;
}
//-->
</script>
</head>
<div id="form">
<form>
<input type="button" value="Generate Square" onclick="generateSquare()" />
</form>
</div>
<body>
<div id="squares">
<ul id="listOfSquares">
</ul>
</div>
</body>
</html>
Im working on a function where i need to return the active elements ID. the element will have class="main" id="1" onmouseover="showSub()"> Would someone be able to write me a simple function which simply puts the elements ID number in an alert box? I can figure out the rest i need from that . Thanks, Tom Hi, I got a table with hundreds of rows...and I want the user to be able to hide a single one by clicking on the table row. How can I do this without typing in hundreds of ids like 1,2,3,4,5... Since you can't get elements by class and ids have to unique I'm not sure how to do this. Also the order of the rows will change when they get updated so it would end up being a mess of unordered ids. Thanks. Hi all, iv'e been trying to get round this for 2 days and still nothing. What i want to do is to be able to outline elements on a page when hovered over... simple you might think. which it is. Then with the id of the item outlined when right clicked, and chose an option, other things happen. The menu side is sorted, and the hover outline is sorted. But iv'e been trying to put them both together but it wont work! This is the closest iv'e gotten, whcih runs sooooo slow. Code: $(document).ready(function() {
function elementHover(){
$("*").bind("mouseover", function(event) {
var element = $(event.target);
if($(element).attr("rel")!="rightClickMenu"){
$(element).addClass('outline-element');
if( ($(element).attr("id")!="") && (typeof $(element).attr("id") != "undefined") ){
getElementObj($(element));
$("[id!='" + $(element).attr("id") + "']").hover(function(){
$("#" + $(element).attr("id")).removeClass('outline-element');
});
}else{
return "";
}
}else{
return "";
}
});
}
elementHover();
});
the big problem being this var element = $(event.target); if i changed it to var element = $(event.target); alert($(element).attr("id")); it would open the dialog box about 10 times spitting all kinds of results. Any help would be much appreciated. I have a webpage which has the prototype library in it as well as my own script. I just started on it, but I've already run into issues using the for... in loop. I'll admit, I'm a complete noob at javascript, so this is probably something pretty simple. Code: function prepareToolBar()
{
//define toolbar tool names
var toolbar = [
'line',
'circle',
'ellipse',
'square',
'rectangle',
'text'];
for (var i in toolbar)
{
var tmp = document.createElement("p");
tmp.appendChild(document.createTextNode(toolbar[i]));
document.body.appendChild(tmp);
}
}
addLoadEvent(prepareToolBar);
function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof oldonload != 'function')
{
window.onload = func;
} else {
window.onload = function() { oldonload(); func(); }
}
}
Below is the output on the page from the function: Code: circle
ellipse
square
rectangle
text
function (iterator, context) { var index = 0; iterator = iterator.bind(context); try { this._each(function (value) {iterator(value, index++);}); } catch (e) { if (e != $break) { throw e; } } return this; }
function (number, iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var index = - number, slices = [], array = this.toArray(); while ((index += number) < array.length) { slices.push(array.slice(index, index + number)); } return slices.collect(iterator, context); }
function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var result = true; this.each(function (value, index) {result = result && !!iterator(value, index);if (!result) {throw $break;}}); return result; }
function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var result = false; this.each(function (value, index) {if ((result = !!iterator(value, index))) {throw $break;}}); return result; }
function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var results = []; this.each(function (value, index) {results.push(iterator(value, index));}); return results; }
function (iterator, context) { iterator = iterator.bind(context); var result; this.each(function (value, index) {if (iterator(value, index)) {result = value;throw $break;}}); return result; }
function (iterator, context) { iterator = iterator.bind(context); var results = []; this.each(function (value, index) {if (iterator(value, index)) {results.push(value);}}); return results; }
function (filter, iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var results = []; if (Object.isString(filter)) { filter = new RegExp(filter); } this.each(function (value, index) {if (filter.match(value)) {results.push(iterator(value, index));}}); return results; }
function (object) { if (Object.isFunction(this.indexOf)) { if (this.indexOf(object) != -1) { return true; } } var found = false; this.each(function (value) {if (value == object) {found = true;throw $break;}}); return found; }
function (number, fillWith) { fillWith = Object.isUndefined(fillWith) ? null : fillWith; return this.eachSlice(number, function (slice) {while (slice.length < number) {slice.push(fillWith);}return slice;}); }
function (memo, iterator, context) { iterator = iterator.bind(context); this.each(function (value, index) {memo = iterator(memo, value, index);}); return memo; }
function (method) { var args = $A(arguments).slice(1); return this.map(function (value) {return value[method].apply(value, args);}); }
function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var result; this.each(function (value, index) {value = iterator(value, index);if (result == null || value >= result) {result = value;}}); return result; }
function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var result; this.each(function (value, index) {value = iterator(value, index);if (result == null || value < result) {result = value;}}); return result; }
function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var trues = [], falses = []; this.each(function (value, index) {(iterator(value, index) ? trues : falses).push(value);}); return [trues, falses]; }
function (property) { var results = []; this.each(function (value) {results.push(value[property]);}); return results; }
function (iterator, context) { iterator = iterator.bind(context); var results = []; this.each(function (value, index) {if (!iterator(value, index)) {results.push(value);}}); return results; }
function (iterator, context) { iterator = iterator.bind(context); return this.map(function (value, index) {return {value: value, criteria: iterator(value, index)};}).sort(function (left, right) {var a = left.criteria, b = right.criteria;return a < b ? -1 : a > b ? 1 : 0;}).pluck("value"); }
function () { return [].concat(this); }
function () { var iterator = Prototype.K, args = $A(arguments); if (Object.isFunction(args.last())) { iterator = args.pop(); } var collections = [this].concat(args).map($A); return this.map(function (value, index) {return iterator(collections.pluck(index));}); }
function () { return this.length; }
function () { return "[" + this.map(Object.inspect).join(", ") + "]"; }
function (iterator, context) { iterator = iterator.bind(context); var result; this.each(function (value, index) {if (iterator(value, index)) {result = value;throw $break;}}); return result; }
function (iterator, context) { iterator = iterator.bind(context); var results = []; this.each(function (value, index) {if (iterator(value, index)) {results.push(value);}}); return results; }
function (object) { if (Object.isFunction(this.indexOf)) { if (this.indexOf(object) != -1) { return true; } } var found = false; this.each(function (value) {if (value == object) {found = true;throw $break;}}); return found; }
function () { return this.map(); }
function reverse() { [native code] }
function forEach() { [native code] }
function () { this.length = 0; return this; }
function () { return this[0]; }
function () { return this[this.length - 1]; }
function () { return this.select(function (value) {return value != null;}); }
function () { return this.inject([], function (array, value) {return array.concat(Object.isArray(value) ? value.flatten() : [value]);}); }
function () { var values = $A(arguments); return this.select(function (value) {return !values.include(value);}); }
function (sorted) { return this.inject([], function (array, value, index) {if (0 == index || (sorted ? array.last() != value : !array.include(value))) {array.push(value);}return array;}); }
function (array) { return this.uniq().findAll(function (item) {return array.detect(function (value) {return item === value;});}); }
function () { return [].concat(this); }
function () { var results = []; this.each(function (object) {var value = Object.toJSON(object);if (!Object.isUndefined(value)) {results.push(value);}}); return "[" + results.join(", ") + "]"; }
As you can see, it shows the 6 elements in the array that I want, but it also shows random elements. By the way, I can fix this by changing it to a normal for loop, but I want to know what I'm doing wrong. I put this at the end of my code thinking that after the div displays (id = 'link_container') I can eliminate (id = 'link_container') from memory when the script ends so there's a place for another div (id = 'link_container') when/if there's onkeyup event. Wouldn't this little script remove any element with an id = 'link_container' ? <script type="text/javascript"> var deleteDiv = document.getElementById('link_container'); document.body.removeChild(deleteDiv); </script> Hi, I am trying to display some xml elements that are formatted like this: Code: <line> <route> <dirs>1. Head west on Calzada Roosevelt</dirs> <time>4.6 km - about 15 mins</time> <dirs>2. Continue on Carretera Interamericana/Pan American Hwy</dirs> <time>15 km - about 12 mins</time> <dirs>3. Look for turnoff at San Lucas and follow signs from there</dirs> <time>13.5 km - about 15 mins</time> </route> </line> using this js: Code: for (var a = 0; a < lines.length; a++) {
routeInfo = lines[a].getElementsByTagName("route");
for (var p = 0; p < routeInfo.length; p++) {
var time = GXml.value(routeInfo[p].getElementsByTagName("time")[0]);
var dirs = GXml.value(routeInfo[p].getElementsByTagName("dirs")[0]);
way+='<b>'+dirs+'</b>'+'<br>'+time+'<br>';
("way" eventually gets passed as the text to display) Which works OK (as you can see here if you select from Guatemala City to Antigua), but the problem is that it only shows the first set of directions, ie Code: <dirs>1. Head west on Calzada Roosevelt</dirs> <time>4.6 km - about 15 mins</time> I can see that this is because of the [0] in the getElementsByTagName - if I change it to 1 or 2 it shows the 2nd or 3rd set of directions. But I want it to show all of them... and I thought that being in a loop it would, but I'm obviously missing something. Any ideas? Thanks in advance. I tried the following code based on a post I saw somewhere else about summing all the elements of an array together. When I tried it though I couldn't seem to get it working. Can someone please point out what I did wrong or tell me a different way to sum array elements together? Thanks. Code: <script type="text/javascript">
Array.prototype.sum = function() {
for (var i = 0, L = this.length, sum = 0; i < L; sum += this[i++]);
return sum;
}
var myArray=[1,2,3,4,5];
document.write(myArray.prototype.sum);
</script>
Hi There I am trying to create some ajax/javascript to append the scriptaculous Draggable to a number of div elements with a className of draggable. The problem is i need to get the id's of each element to make them draggable, as simply making all div elements on the page draggable would effect other elements on the page which I dont want to be so. I need to:- 1.create a collection of div elements with className - draggable 2. make a list of all the element id's 3. make all elements with said id's draggable I have left out the draggable part from the code, I have simply been trying to get the element id's to display so far Code: var dv;
var dh;
dv = document.getElementsByTagName('div');
if (dv.className == 'draggable')
{
for (var i = 0; i <= dv.length; i++)
{
dh = dv[i].getAttribute('id');
for (var j = 0; j <= dh.length;j++)
{
document.getElementById('content').innerHTML = dh[j].getAttribute('id');
}
}
}
else
{
alert ("no id");
}
I keep getting the alert message "no id" loaded
Ok so I have these elements on my page: Code: <input type="text" size="5" name="val[]" value="'.$NotaMaxima.'"> I want to loop through each one and take their number add it to another number set in a variable elsewhere and then alert that number. The amount of these elements on the page changes constantly, so I can't count on that. It has to loop through each one to find the values. I tried this: Code: var els,i,asig;
els=document.getElementsByTagName('val');
for(i in els) {
asig = parseInt(els[i].value) - parseInt(asig);
}
alert(asig);
But no go, any ideas? Hi again!! This is my code to add and delete dynamic rows and auto calculate the amount field by multiplying qty and rate. PHP Code: <form name="staff_reg" action="<?php echo $_SERVER['PHP_SELF']."?".$_SERVER['QUERY_STRING']; ?>" method="post" enctype="multipart/form-data"> <table width="100%" border="0" cellspacing="0" cellpadding="2"> <table border="0" cellpadding="1" cellspacing="0" class="normal-text" align="left"> <tr align="center"> <td width="10" class="forhead" style="white-space:nowrap;"> </td> <td width="92" class="forhead" style="white-space:nowrap;">Qty</td> <td width="94" class="forhead" style="white-space:nowrap;">Rate</td> <td width="94" class="forhead" style="white-space:nowrap;">Amount</td> </tr> </table> <tr align="left"> <td class="forhead" style="white-space:nowrap;"><input type="button" value="Add Row" onClick="addRow('dataTable')" > <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" ></td> <table border="0" id="dataTable" cellpadding="1" cellspacing="0" class="normal-text"> <tr> <td width="10" class="forhead" style="white-space:nowrap;"><input type="checkbox" name="chk[]"/></td> <td width="92" class="forhead" style="white-space:nowrap;"> <input type="text" name="qty[]" style="width:80px;" onblur=""> </td> <td width="94" class="forhead" style="white-space:nowrap;"> <input type="text" name="rate[]" style="width:80px;" value=""></td> <td width="94" class="forhead" style="white-space:nowrap;"> <input type="text" onblur="getValues('qty[]','rate[]','amt[]')" name="amt[]" style="width:80px;"></td> </tr> </table> <table border="0"> <tr> <td>Total:</td> <td><input type="text" name="total[]" style="width:80px;" value=""></td> </tr> <tr> <td colspan="2"> <input name="Submit" type="submit" value="Save" style="text-decoration:none" /> <input type="reset" value="Cancel" onclick="window.location.href='<?php echo $_SERVER['PHP_SELF'];?>'"> </td> </tr> </form> <script type="text/javascript"> function getValues(objName,objName2,objName3) { var var3 = ""; var arr = new Array(); arr = document.getElementsByName(objName); arr2 = document.getElementsByName(objName2); arr3 = document.getElementsByName(objName3); for(var i = 0; i < arr.length; i++) { for(var i = 0; i < arr2.length; i++) { for(var i = 0; i < arr3.length; i++) { var obj1 = document.getElementsByName(objName2).item(i); var var2 = obj1.value; var obj = document.getElementsByName(objName).item(i); var var1 = obj.value; var obj3 = document.getElementsByName(objName3).item(i); var var3 = obj3.value; var var4 = var1 * var2; document.getElementsByName(objName3).item(i).value=var4; } } } } function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for(var i=0; i<colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = table.rows[0].cells[i].innerHTML; //alert(newcell.childNodes); switch(newcell.childNodes[0].type) { case "text": newcell.childNodes[0].value = ""; break; case "checkbox": newcell.childNodes[0].checked = false; break; case "select-one": newcell.childNodes[0].selectedIndex = 0; break; } } } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if (null != chkbox && true == chkbox.checked) { if (rowCount <= 1) { alert("Cannot delete all the rows."); break; } table.deleteRow(i); rowCount--; i--; } } } catch(e) { alert(e); } } </script> I would like to know that how can I show the value of all the elements in array "amount" in total field?? Hi I wanted to create multiple check box and once check box is clicked user should able to enter text and submit so i created this but when check box toggle it keep creating text areas. i wanted to create 1 text area per one check box also i need to store each text area value to data base. how can i correct this to achieve my needs PHP Code: <script type="text/javascript"> function validate(chk){ if (chk.checked == 1){ var htmlText = "<textarea name='area' cols='40' rows='5'></textarea>"; var newElement = document.createElement('div'); newElement.id = 'text'; newElement.innerHTML = htmlText; var fieldsArea = document.getElementById('text'); fieldsArea.appendChild(newElement); }else {} } </script> <form> <label>option1 <input type=checkbox name=chk1 onclick="return validate(chk1);"></label> <label>option2 <input type=checkbox name=chk2 onclick="return validate(chk2);"></label> </form> <div id="text"></div> Sorry for the language errors Regards. Hi, onClick on a select element, I am trying to hide or show two different table rows. It does not seem to be working on internet explorer Thanks for any help! Code: function showMe (a, box) {
document.getElementById(a).style.display = "table-row";
document.getElementById(a+"2").style.display = "table-row";
}
function hideMe (a, box) {
document.getElementById(a).style.display = "none";
document.getElementById(a+"2").style.display = "none";
}
Code:
<tr><td><b>Account Type:</b><br><small>(If you are both a club and college coach, please select college coach)</small>:</td><td><SELECT NAME="type" size="3"><OPTION VALUE="coach" onClick="hideMe('hide', this)" >Coach/Manager</OPTION><OPTION VALUE="college_coach" onClick="showMe('hide', this)">College Coach</OPTION>
</SELECT></div>
</td></tr>
<tr id="hide" style="display:none;"><td><b>College:</b></td><td colspan="2"><input type="text" name="college" value=""></td></tr>
<tr id="hide2" style="display:none;"><td><b>Title:</b></td>
<td><select name="gender" size="1">
<option VALUE="men" >Men's</option><option VALUE="women" >Women's</option><option VALUE="both" >Men's and Women's</option>
</select></div>
</td>
<td><select name="title" size="1"><OPTION VALUE="head" >Head Coach</OPTION><OPTION VALUE="assistant" >Assistant Coach</OPTION>
</select></div>
</td></tr>
here is the live demo if you would like to see it: http://new.maddogmania.com/application/register.php hello, would anyone be able to share with me a concept of how to build a vertical navigation bar that allows you to hover over the section and a hidden area with links would appear? thank you |
|||||||