|
JavaScript - Custom Checkbox's + Showing Hidden Divs
I dont claim any of the JS below as my own.
link to an example page http://www.clansngamers.com/add_new_game.php You see the PS3 checkbox is standard: Working, It brings up the hidden div. The Xbox checkbox is coded exactly the same except it uses the custom checkbox image and it dont work. This is my problem. have tried to code this and failed asking for any help i suck at JS. The Code Im trying to add Code: function showMe(id){ var obj = document.getElementById(id);
if (obj.style.display == "none"){obj.style.display = "inherit";}
else {obj.style.display = "none";}
}
The basic layout Code: <input class="styled" name="foo" type="checkbox" id="foo" value="1" onclick="showMe('div1')" />
<input class="styled" name="bar" type="checkbox" id="bar" value="1" onclick="showMe('div2')" />
<div id='div1' style="display:none;">hidden content 1</div>
<div id='div2' style="display:none;">hidden content 2</div>
Custom Checkbox code Code: var checkboxHeight = "14";
var radioHeight = "14";
var selectWidth = "190";
document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');
var Custom = {
init: function() {
var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
for(a = 0; a < inputs.length; a++) {
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
span[a] = document.createElement("span");
span[a].className = inputs[a].type;
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
position = "0 -" + (checkboxHeight*2) + "px";
span[a].style.top = position;
} else {
position = "0 -" + (radioHeight*2) + "px";
span[a].style.backgroundPosition = position;
}
}
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
inputs[a].onchange = Custom.clear;
if(!inputs[a].getAttribute("disabled")) {
span[a].onmousedown = Custom.pushed;
span[a].onmouseup = Custom.check;
} else {
span[a].className = span[a].className += " disabled";
}
}
}
inputs = document.getElementsByTagName("select");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].className == "styled") {
option = inputs[a].getElementsByTagName("option");
active = option[0].childNodes[0].nodeValue;
textnode = document.createTextNode(active);
for(b = 0; b < option.length; b++) {
if(option[b].selected == true) {
textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
}
}
span[a] = document.createElement("span");
span[a].className = "select";
span[a].id = "select" + inputs[a].name;
span[a].appendChild(textnode);
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
if(!inputs[a].getAttribute("disabled")) {
inputs[a].onchange = Custom.choose;
} else {
inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
}
}
}
document.onmouseup = Custom.clear;
},
pushed: function() {
element = this.nextSibling;
if(element.checked == true && element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
} else if(element.checked == true && element.type == "radio") {
this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
} else if(element.checked != true && element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight + "px";
}
},
check: function() {
element = this.nextSibling;
if(element.checked == true && element.type == "checkbox") {
this.style.backgroundPosition = "0 0";
element.checked = false;
} else {
if(element.type == "checkbox") {
this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
} else {
this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
group = this.nextSibling.name;
inputs = document.getElementsByTagName("input");
for(a = 0; a < inputs.length; a++) {
if(inputs[a].name == group && inputs[a] != this.nextSibling) {
inputs[a].previousSibling.style.backgroundPosition = "0 0";
}
}
}
element.checked = true;
}
},
clear: function() {
inputs = document.getElementsByTagName("input");
for(var b = 0; b < inputs.length; b++) {
if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
inputs[b].previousSibling.style.backgroundPosition = "0 0";
}
}
},
choose: function() {
option = this.getElementsByTagName("option");
for(d = 0; d < option.length; d++) {
if(option[d].selected == true) {
document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
}
}
}
}
window.onload = Custom.init;
Similar TutorialsI have a form that has a checkbox that I want to base a hidden value on. If the checkbox is checked I want the hidden value to be 25. If not checked, I want the value to be 0. I am working with code someone else has written and I am fairly new to javascript and cannot get it to work. Here is the code on the form: <code> <td><input type="checkbox" name="binderdiscount" value="Yes" <?php /*?><?php if ($pgdata['binderdiscount']=='Yes') echo 'checked'; ?><?php */?> />I do not need a book;</td> <input type="hidden" name="binder_discount" value="0"> </code> and then in a separate page is all the javascript to process the form. I have this, but it is not working. <code> if(getControlValue(form.binderdiscount)==="Yes") {form.binder_discount.value=25;} </code> As I said, i am really new to javascript and I am working with someone else's code. All the research I have done has just confused me more about why it is not working. Any help would be greatly appreciated. Hi, i have a page with lots of checkboxes and hidden fields. When i tick a checkbox i want it to give the hidden filed a value. But give it no value if it is not ticked. For every checkbox i have a hidden field is with it. Both the checkbox and the hidden field send information. I have used some js scripts but they don't seem to work with more than one checkbox. Please can you help. Example: <input type="checkbox" name="box1" id="box1" value="4th July 2009,"> <input type="hidden" name="price1" id="price1" value="0"> So when box1 is ticked it then gives price1 a value. But if not ticked then the value remains at 0. I want it to give a value of 699. There will be about 100 checkboxes and hidden fields on the page. Also onclick behaviours do not work because it may still send the information if the checkbox is not checked. So for the next checkbox and hidden field i use box2 and price2. Thanks for your help. ok so here is my situation i have 4 hidden fields in a form called "searchform" Code: <input type="hidden" name="forumchoice[]" value="1" checked /> <input type="hidden" name="forumchoice[]" value="2" checked /> <input type="hidden" name="forumchoice[]" value="3" checked /> <input type="hidden" name="forumchoice[]" value="4" checked /> Now here's what i want to do: i have two checkbox Code: <input onclick="??????????" type="checkbox" name="checkbox1" id="checkbox1"/> <input onclick="??????????" type="checkbox" name="checkbox2" id="checkbox2"/> - when checkbox1 is checked, i want to activate the hidden inputs 1 & 2. if it is unchecked, then desactivate hidden inputs 1&2 - when checkbox2 is checked, i want to activate the hidden inputs 3 & 4. if it is unchecked, then desactivate hidden inputs 3&4 could someone help me with the "onclick" code i would need to do this ?? thanks a lot!! i'm trying to "post" the selected checkboxes (name and value) into a mysql database; i've search "docter google" for some answers and read that the "easiest" way to do this is to collect the checkboxes and put the values and names in to an hidden textfield ( function setvalue() ) and collect this textfield in a new page with php; but this doesn't work. it seems that the variable naamtest is empty (when i load a word into this var arv it does work) can someone find my error? Code: <script type="text/javascript">
function shift(which)
{
var counter = 0; // counter for checked checkboxes
var i = 0; // loop variable
var veck = "";// final url variable
var beginsaldo = 79;
var namen_array = "";
var va_array = "";
var namen = "";
var valu = "";
var input_obj = document.getElementsByTagName('input'); // get a collection of objects with the specified 'input' TAGNAME
for (i=0; i < input_obj.length; i++){ // loop through all collected objects
if (input_obj[i].type == 'checkbox' && input_obj[i].checked == true){ // if input object is checkbox and checkbox is checked then ...
counter++; // ... increase counter
var valcheck = input_obj[i].value; // waarde van de geselecteerde checkbox in variable steken
test = Number(valcheck); // absolute rekenwaarde van variable maken
beginsaldo -= test; //beginsaldo verminderen met de checkbox value
if (counter > 0){
var naam = input_obj[i].name + ' ';
var val = input_obj[i].value + ' ';
namen = namen + naam;
valu = valu + val;
namen_array = namen.split(" ");
va_array = valu.split(" ");
var naamtest = namen_array;
}}}
if (counter > 10){
alert ("u mag maar 10 renners selecteren");
var tr = which.parentNode;
while ( tr.tagName.toUpperCase() != "TR" )
{
tr = tr.parentNode;
if ( tr == null ) return; // something went very wrong!
}
var tds = tr.getElementsByTagName("td");
tds[0].getElementsByTagName("input")[0].checked = false;
}
else if (beginsaldo < 0){
alert ("uw saldo is te laag om dit uit te voeren");
var tr = which.parentNode;
while ( tr.tagName.toUpperCase() != "TR" )
{
tr = tr.parentNode;
if ( tr == null ) return; // something went very wrong!
}
var tds = tr.getElementsByTagName("td");
tds[0].getElementsByTagName("input")[0].checked = false;
}
else{
var tr = which.parentNode;
while ( tr.tagName.toUpperCase() != "TR" )
{
tr = tr.parentNode;
if ( tr == null ) return; // something went very wrong!
}
var tds = tr.getElementsByTagName("td");
if ( tds[0].getElementsByTagName("input")[0] == which )
{
tds[2].innerHTML = tds[0].innerHTML;
tds[0].innerHTML = " ";
tds[3].innerHTML = tds[1].innerHTML;
tds[1].innerHTML = " ";
tds[2].getElementsByTagName("input")[0].checked = true;
} else {
// this code is optional!!
tds[0].innerHTML = tds[2].innerHTML;
tds[2].innerHTML = " ";
tds[1].innerHTML = tds[3].innerHTML;
tds[3].innerHTML = " ";
tds[0].getElementsByTagName("input")[0].checked = false;
}
function setValue()
{
var arv = naamtest.join();
// This line converts js array to String
document.f2.arv.value=arv;
// This sets the string to the hidden form field.
}}}
</script>
I dynamically create a hidden form field with some javascript. It works fine, the field gets created and filled in with whatever the user types in the prompt popup. But even though I have specified type="hidden" it is still displaying the field contents at the bottom of my form. Code: var newvar = document.createElement('input');
newvar.setAttribute('name',varname);
newvar.setAttribute('type','hidden');
newvar.setAttribute('value',Prompt.show("Enter notes"));
document.mainform.appendChild(newvar);
Thanks for any help I would like to think I understand the fundamentals of JavaScript, but I am beating my head with this and it seems so simple. I am trying to set the current div as visible, then set the old div as not visible, then set the new div id as a variable so that it can be used next. all it is doing is setting the new div to visible, and not setting the variable to be used. here is my code. this is the function [code] var Gp; function setVisibility(id, visibility) { document.getElementById(id).style.display = visibility; document.getElementById(Gp).style.display = 'none'; Gp = id; } [code] this is the html [code] <div id="group_thumb"><a href="http://pinklightdesign.com/gallery/content/6389/thumb2.jpg" onclick="setVisibility('img_name1', 'inline');" rel="enlargeimage" rev="targetdiv:loopholder, trigger:click"><img src="http://pinklightdesign.com/gallery/content/6389/thumb1.jpg" width=68 height=90 /></a></div> <div id="group_thumb"><a href="http://pinklightdesign.com/gallery/content/6396/thumb2.jpg" onclick="setVisibility('img_name2', 'inline');" rel="enlargeimage" rev="targetdiv:loopholder, trigger:click"><img src="http://pinklightdesign.com/gallery/content/6396/thumb1.jpg" width=68 height=90 /></a></div> <div id="group_thumb"><a href="http://pinklightdesign.com/gallery/content/6403/thumb2.jpg" onclick="setVisibility('img_name3', 'inline');" rel="enlargeimage" rev="targetdiv:loopholder, trigger:click"> <div id='img_name1' style='display:none'>new 1 image</div> <div id='img_name2' style='display:none'>new image 2</div> <div id='img_name3' style='display:none'>new 1 image 3</div> [code] Any help would be greatly appreciated. Cheers - James Hi everyone, was wondering if someone would be able to help me out, and correct this, or suggest an alternative. I have hidden divs, and I have achieved easily and simply this with the following, but on click I want the other divs to hide so that they all can't be displayed at once, at the moment they just stack up on top of each other. I'm trying to keep it as simple as possible as i'm much the novice Code: <script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
}
</script>
and then
<a href="#" onclick="showhide('divname'); return(false);">
Thanks in advance Hi I found this code from here http://www.dynamicdrive.com/forums/s...ad.php?t=35776 And cant seem to get it to work. I want to show 2 drop downs and then a hidden div with the answer. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/chainedmenu.js"></script>
<script type="text/javascript" src="scripts/config2.js"></script>
<script type="text/javascript">
window.onload=function(){
var lastDiv = "";
document.getElementById('secondlevel').onchange=function(){
if (lastDiv)
document.getElementById(lastDiv).className = "hiddenDiv";
//if value of the box is not nothing and an object with that name exists, then change the class
if (this.value && document.getElementById(this.value)) {
document.getElementById(this.value).className = "visibleDiv";
lastDiv = this.value;}}}
</script>
<style type="text/css">
.hiddenDiv {
display:none;
}
</style>
</head>
<body onLoad="initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, 'saveit'); ">
<form name="listmenu0">
<div class="black1 bold">1. Select Product Range</div>
<div class="selects"><select name="firstlevel" style="width:250px;"></select></div>
<div class="black1 bold">2. Select Product Code</div>
<div class="selects"><select id="secondlevel" name="secondlevel" onchange="showDiv(this.value)" style="width:250px;"></select></div>
</form>
<div id="storesContent">
<div id="one" class="hiddenDiv">DIV1</div>
<div id="two" class="hiddenDiv">DIV2</div>
<div id="three" class="hiddenDiv">DIV3</div>
</div>
</body>
</html>
many thanks Roy how can I get my custom markers to show? I have got my code in place, everything works except, doesn't show my custom marker?! here is my code: Code: <script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
// A function to create the marker and set up the event window
// Dont try to unroll this function. It has to be here for the
function closure
// Each instance of the function preserves the contends of a
different instance
// of the "marker" and "html" variables which will be needed
later when the event triggers.
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
marker.image = "images/google-pin.png";
marker.shadow = "images/google-pin-shadow.png";
marker.iconSize = new GSize(90, 70);
marker.shadowSize = new GSize(90, 70);
markerOptions = { icon:marker };
});
return marker;
}
// Display the map, with some controls and set the initial
location
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(51.3992613899243,-1.32983778443008),
8);
// Set up three markers with info windows
var point = new GLatLng(51.4769752333875,-2.53517458867092);
var marker = createMarker(point,'<div style="width:240px">Some
stuff to display in the First Info Window. With a <a href="http://
www.econym.demon.co.uk">Link<\/a> to my home page<\/div>')
map.addOverlay(marker);
var point = new GLatLng(50.8391656924497,-0.154312843280554);
var marker = createMarker(point,'Some stuff to display in
the<br>Second Info Window')
map.addOverlay(marker);
var point = new GLatLng(50.8340528225749,-0.259947032613667);
var marker = createMarker(point,'Some stuff to display in
the<br>Third Info Window')
map.addOverlay(marker);
var point = new GLatLng(51.5168824045344,-2.6926718990779);
var marker = createMarker(point,'Some stuff to display in
the<br>Third Info Window')
map.addOverlay(marker);
var point = new GLatLng(50.954582894922,-0.145016932400171);
var marker = createMarker(point,'Some stuff to display in
the<br>Third Info Window')
map.addOverlay(marker);
}
// display a warning if the browser was not compatible
else {
alert("Sorry, the Google Maps API is not compatible with this
browser");
}
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
//]]>
</script>
I have another crossbrowser problem - using frames. I am trying to make this hidden right frame appear where it should in other browsers such as Firefox. It only works in IE at the moment. This is a cut down demo: http://www.aapress.com.au/demo/readt.../readtest.html It consists of a number of parts: readtest.html left.html rightframe.html right.html top.html The rightframe.html is the holder for right.html. I am not trying to simplify it, just make the right.html page appear in the rightframe.html in FF. I suspect it has something to do with the coding at the bottom of rightframe.html: Code: <script type="text/javascript">
function test()
{
testframe.internalid.innerHTML = maindiv.innerHTML;
}
window.setTimeout("test()", 1000);
</script>
Is it obvious? Hi, I have the following codes but my checkbox is not appearing. The values of the checkbox do print out in the alert. Can anyone tell me what is wrong with it? Thank you! Code: var table = document.getElementById('maintable');
var i; // iterator
var item; // pointer to item in received list
for(i = 0;
(item = contacts.ReturnValue.getNext()) != undefined;
++i) {
table.insertRow(i + 1);
var result = "<td>";
if(item.FirstName != undefined) {
result += item.FirstName.Value;
}
result += "</td><td>";
if(item.LastName != undefined) {
result += item.LastName.Value;
}
result += "</td><td>";
if(item.MobilePhoneGen != undefined) {
result += item.MobilePhoneGen.Value;
}
result += "</td><td>";
if(item.EmailGen != undefined) {
result += item.EmailGen.Value;
}
var td1 = document.createElement("td");
var chkbox = document.createElement('input');
chkbox.type='Checkbox';
table.rows[i + 1].innerHTML = result;
chkbox.value=item.MobilePhoneGen.Value;
td1.appendChild(chkbox);
alert(chkbox.value);
}
Hello all, hope all is well. I have a search function that displays hidden divs based on what the user has searched for. I would like the "search results" to be opened onto a new page; I have a feeling the results page would contain all the hidden divs and a form of JS would need to be used to "pass" the search data to the new page and thus perform the search and display the corresponding div. - Any help is appreciated here code and demo site below. 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">
<LINK rel="stylesheet" type="text/css" href="<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/php/fleet/includes/website.php";
include_once($path);
?>/php/font.css"></style>
</head>
<body>
<script type="text/javascript">
var showndiv=false;
function show() {
document.getElementById('fleet1').innerHTML="";
if (showndiv){document.getElementById(showndiv).style.display = 'none';
}
theval=Number(document.getElementById('tb').value);
switch (theval){
case 120:
showndiv='fleet2'
break;
case 121:
showndiv='fleet3'
break;
case 122:
showndiv='fleet4'
break;
default:
document.getElementById('fleet1').innerHTML="Sorry, nothing found"
return;
}
document.getElementById(showndiv).style.display = 'block';
}
</script>
<script type="text/javascript">
/////////////////////////////////////////////////////
// Between the quotation marks, list the id values of each div.
var IDvaluesOfEachDiv = "fleet2 fleet3 fleet4";
/////////////////////////////////////////////////////
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g," ");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/ +/g," ");
var IDlist = IDvaluesOfEachDiv.split(" ");
function ShowAllDivs() {
for(var i=0; i<IDlist.length; i++) {
document.getElementById(IDlist[i]).style.display = "";
}
}
function HideAllDivs() {
for(var i=0; i<IDlist.length; i++) {
document.getElementById(IDlist[i]).style.display = "none";
}
}
</script>
<form name="myForm">
<input type="text" id="tb">
<input type="button" value="Search" onclick="show()">
</form>
<div id="fleet1" style="display:block">
</div>
<div id="fleet2" style="display:none" class="fleetdiv"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0"
bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<TR>
<TD>
<TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
<TR>
<TH class="titlebg" bgcolor="#336699" width="16%">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="17%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
</TH>
</TR>
<TR>
<TD align="left" width="14%" bgcolor="#FFFFFF">
<FONT class="font">120<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=120"> <img
src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD>
<TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF">
<FONT class="font">W599 PTO</FONT>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">M920</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">OPTARE</font>
</TD>
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF">
<FONT class="font">B33F</font>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<font class="font"><a href="http://www.nctfleetlist.co.uk/main/netgreen.php"><font color="#348017">Network
Green</a></a></font>
</TD>
</tr></table>
</td>
</tr>
</table>
<table align="right">
<TR>
<TD>
<a href="javascript:HideAllDivs()" class="font"><nobr>X Close</nobr></a></div></td></tr>
</table>
<div id="fleet3" style="display:none"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0"
bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<TR>
<TD>
<TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
<TR>
<TH class="titlebg" bgcolor="#336699" width="16%">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="17%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
</TH>
</TR>
<TR>
<TD align="left" width="14%" bgcolor="#FFFFFF">
<FONT class="font">121<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=121"> <img
src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD>
<TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF">
<FONT class="font">W601 PTO</FONT>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">M920</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">OPTARE</font>
</TD>
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF">
<FONT class="font">B33F</font>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font>
</TD>
</tr></table>
</td>
</tr>
</table></div>
<div id="fleet4" style="display:none"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0"
bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<TR>
<TD>
<TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
<TR>
<TH class="titlebg" bgcolor="#336699" width="16%">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="17%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
</TH>
</TR>
<TR>
<TD align="left" width="14%" bgcolor="#FFFFFF">
<FONT class="font">122</FONT></TD>
<TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF">
<FONT class="font">W602 PTO</FONT>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">M920</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">OPTARE</font>
</TD>
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF">
<FONT class="font">B33F</font>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font>
</TD>
</tr></table>
</td>
</tr>
</table></div>
</body>
</html>
http://nctfleetlist.co.uk/div3.php Hello everyone, my 1st post here and my 1st day with javascript! I am having some problems with the below script: Code: <html>
<head>
<title></title>
<script type="text/javascript">
var electronics = ["mobiles", "hi-fi"];
var entertainment = ["books", "dvds",];
function check(checkboxid) {
document.getElementById(checkboxid).checked = "checked";
}
function visiblox(arrDiv, hs) {
var disp = (hs) ? "none" : "block";
for(var x = 0; x < arrDiv.length; x++) {
document.getElementById(arrDiv[x]).style.display = disp;
}
}
function chk(what, item) {
if(item) {
visiblox(what, false);
} else {
visiblox(what, true);
}
}
</script>
<style type="text/css">
<!--
.hide
{
display: block;
}
.hide
{
display: none;
}
-->
</style>
</head>
<body>
<img src="images/electronics.png" onclick="check('electronics');">
<input type="checkbox" id="electronics" onchange="chk(electronics, this.checked);" > <br>
<input type="checkbox" onclick="chk(entertainment, this.checked);"> Entertainment<br>
<br>
<br>
<div id="mobiles" class="hide">Mobiles</div><br>
<div id="hi-fi" class="hide">Hi-Fi</div><br>
<div id="books" class="hide">Books</div><br>
<div id="dvds" class="hide">DVD's</div><br>
</body>
</html>
Basically what happens is, when you select a checkbox it displays the relevant divs, this works fine with the entertainment checkbox in the code. What I am trying to achieve is use an image to trigger the checkbox (which will be hidden) and the run the chk code to display the divs What actually happens when you click the image the checkbox does become checked, however the divs do not display, if I uncheck the checkbox itself and then check the actual checkbox then it works. Basically getting very frustrated as I can't seem to see whats wrong! I am guessing that for some reason the check code stops the chk running, but I dont know why! Many thanks for any help Hello there !! I really hope someone can help me out with this.. ( im stuck for about 5 hours all ready!! ) most likely because im not so good in javascript...... I want to show multiple divs on select of a <option> box. So lets say there are 3 options Code: <select name="hoofd_pakket" onchange="showDivs('div',this)">
<option value="a">Alles in 1</option>
<option value="b">Internet + TV</option>
<option value="c">Internet + Bellen</option>
</select>
And a javascript function to show the div`s Code: function showDivs(prefix,chooser) {
for(var i=0;i<chooser.options.length;i++) {
var div = document.getElementById(prefix+chooser.options[i].value);
div.style.display = 'none';
}
var selectedvalue = chooser.options[chooser.selectedIndex].value;
if(selectedvalue == "a")
{
displayDivs(prefix,"a");
displayDivs(prefix,"c");
displayDivs(prefix,"d");
}
if(selectedvalue == "b")
{
displayDivs(prefix,"b");
displayDivs(prefix,"c");
}
if(selectedvalue == "c")
{
displayDivs(prefix,"d");
}
}
function displayDivs(prefix,suffix) {
var div = document.getElementById(prefix+suffix);
div.style.display = 'block';
}
And some divs to show Code: <div id="diva" style="display:none;">blabla</div> <div id="divb" style="display:none;">blabla</div> <div id="divc" style="display:none;">blabla</div> <div id="divd" style="display:none;">blabla</div> All works fine up to some point, when I choose lets say option 'b' first.. I get 2 divs. Thats good.. Then I choose option 'c' I get only one div. Thats good.. But if I choose option 'b' again, I get 3 divs instead of 2 !! It shoudnt show the div from from option 'c'.. Does anybody understand why?? Thanx allot !!! Hi, Sorry for the (HELP!) addition in the title, but i'm just stumped here. I am trying to show and hide div layers when I click on a button in a flash movie. The flash movie is in it's own div and the content below is also in it's own div. Is there a way to call the function from flash so that content in another div is affected? The code to show and hid layers in html is working and is he Code: //visible layers
function $_(IDS) { return document.getElementById(IDS); }
function setVisible( IDS ) {
var obj;
var sel = $_('divContent').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
obj = sel[i].id;
if (obj != IDS) { $_(obj).style.display = 'none'; }
else { $_(obj).style.display != 'block' ? $_(obj).style.display="block" : $_(obj).style.display="none"; }
}
}
window.onload = function() {
setVisible('BIO');
};
</script>
</head>
<body>
<div id="navigation">
<a href="#" onClick="setVisible('BIO'); return false;">Who I Am</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('News'); return false;">What's New</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('Portfolio'); return false;">Portfolio</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('Resume'); return false;">Resume</a>
</div>
<div id="divContent">
<div id="BIO" class='divElem'>
<p>This is my content for bio</p>
</div>
<div id="News" class='divElem'>
<pThis is my content for news</p>
</div>
<div id="Portfolio" class='divElem'>
<p><This is my content for portfolio </p>
</div>
<div id="Resume" class='divElem'>
<p>This is my content for resume</p>
</div>
</div>
</body>
Is there a way to call the function in flash on a button? Any help you can give would be GREATLY appreciated. Thanks and forever indebted. Gerry I'm tearing my hair out with this one and can't figure out why it won't work, and am hoping someone could help a Javascript noobie out. Basically, I need the script to hide two divs if one of the options in a <select> menu is selected. Here's the code I've got for the Javascript: Code: function typeoflisting() {
var selectform = document.getElementById('propertytype');
if (selectform.options[selectedIndex].value == "sell") {
document.getElementById('per_week').style.display = 'none';
document.getElementById('bond').style.display = 'none';
}
else {
document.getElementById('per_week').style.display = 'block';
document.getElementById('bond').style.display = 'block';
}
}
Here's the <select> form: Code: <select id="propertytype" name="propertytype" class="select" onchange="typeoflisting()"> <option value="lease">I'd like to lease a property to tenants</option> <option value="sell">I'd like to sell a property</option> <option value="share">I'd like to share a property</option> </select> And here's the first div I'm attempting to hide: Code: <div id="per_week" style="float: left;"> per week</div> And the second div I'm attempting to hide: Code: <div style="float: left; padding: 20px 20px 0px 0px;" id="bond"> <h3>Bond</h3> <input type="text" class="text" value="$"/> </div> Could anyone please tell me what I'm doing wrong? So here's what i want to do: i have 2 checkboxes, when Checkbox A is checked, i want to automatically check the checkbox B. When A is unchecked, then uncheck B how can i do that? thanks a lot ! Hi, If I have two check-boxes and one is already checked and then the is checked, how would I get it to uncheck the first one using JavaScript. Thanks, Cs1h Hi all I believe this to be a JS quesiton, but perhaps there is something here of CSS too? I have an "ecard" which is: - a <div id="outer_ecard"> wrapping an <iframe>... - is hidden by default (via a JS function that fires onload of the parent doc), .. - that gets its display and visibility turned on when the user clicks a link in the parent doc, ... - and then gets its display and visibility turned off again via a call to that same JS function in the parent doc that hid it in the first place by default. here is just the relevant snip of the hiding JS function - Code: elementToSet.style.display = "none"; elementToSet.style.visibility = "hidden"; everything works fine, *BUT* this issue: after the <div> disappears (the 2nd time, when the above snip is triggered in the iframe's parent via an onload event in the iframe doc)... then hyperlinks (in the parent file) that are geographically positioned underneath the <div id="outer_ecard"> do not work (i.e. they still think the ecard div is sitting on top of them (z-index:1). Can anyone advise me here? I need the links underneath the ecard to behave as though that div was never there. Thanks! -Govinda After searching the web most of the day, nothing has resolved this issue: Code: <!-- ALERT IS NEVER HIT -->
<html>
<input type="hidden" id="info" name="info" value="testInformation"/>
<script type="text/javascript">
var me = document.getElementById('info').value;
alert(me);
</script>
</html>
Code: <!-- ALERT SAYS "null" -->
<html>
<input type="hidden" id="info" name="info" value="testInformation"/>
<script type="text/javascript">
var me = document.getElementById('info');
alert(me);
</script>
</html>
Code: <!-- WORKS GREAT, BUT I NEED THE INPUT FIELD HIDDEN -->
<html>
<input type="text" id="info" name="info" value="testInformation"/>
<script type="text/javascript">
var me = document.getElementById('info').value;
alert(me);
</script>
</html>
Any idea how I can keep the input value "hidden" and have javascript still see the value? And yes, I've even tried using the "defer" method. |
|||||||