|
JavaScript - Array Items And Visibility Issue
I am making a framework to easily set up javascript tabs that toggle content. For example, the button "homeButton" toggles the "home" section. This is a fragment of my code and I am having two problems with it:
Code: for (var i = 0 in tabs) {
document.getElementById(tabs[i] + "Button").onclick = function() {
hideAll(tabs);
document.getElementById(tabs[i]).style.visibility = 'visible';
}
}
Problem number 1: Regardless of which button I click, it always registers as the last button. Problem number 2: The hideAll(tabs), another function in the program works, but Code: document.getElementById(tabs[i]).style.visibility = 'visible'; doesn't. I get left with a blank page. Any help is greatly appreciated. BTW when I use something like Code: document.getElementById(tabs[0]).style.visibility = 'visible'; outside of the for loop, it works fine. I'm quite stumped. Julian Similar TutorialsHi, I am new to development in javascript. I want to remove items in an array by passing index values. The index values may have 1 or more values. For example, i have the following array var arr1=new Array("aa","bb","cc","dd","ee","ff"); var index = new Array(); index[] = 3; index[] = 5 Using the above index values, i want the output as "aa","bb","cc","ee" when i used the slice function, i am not getting the desired output like the one above. Can someone please help me out? Thanks Raja hi this is my code: <HTML> <HEAD> <script language="JavaScript"> function show(){ if (document.getElementById("menu2").style.visibility = "hidden") { document.getElementById("menu2").style.visibility = "visible"; } } function hide(){ document.getElementById("menu2").style.visibility = "hidden"; } </script> <style type="text/css"> #menu {position:absolute; left:0;top:0; z-Index:0;font-family:arial; font-size:14px; color:blue; visibility:visible} #menu2 {position:absolute; left:0;top:27; z-Index:0;font-family:arial; font-size:14px; color:blue; visibility:hidden} </style> </HEAD> <BODY> <div ID="menu" onmouseover="show()"> <table border="1" bgcolor="#FFCC00"><tr><td>File</td></tr></table> </div> <div ID="menu2" onmouseout="hide()"> <table border="1" bgcolor="#FFCC00"><tr><td>New</td></tr></table> </div> </BODY> </HTML> Now i want the second layer to appear when i hover over the first, which it does. however i want it so that when i move my cursor away from the second layer it dissapears but the problem is it doesn't seem to work. any help apreciated. thanks I'm not sure why this code executes the first if condition. What should I be doing instead? <!DOCTYPE html> <head> <style> #test { visibility:hidden; } </style> <script type="text/javascript"> function read(ID) { if(document.getElementById(ID).style.visibility == '') alert("why does this pop up?"); else if(document.getElementById(ID).style.visibility == 'hidden') alert("this is what I would expect"); else alert("never reached"); } </script> </head> <body> <form><input type="button" value="test" onclick="read('test');""> <p id='test'> testing visibility</p> </body> </html> I had some help last week with a brands a to z list which shows a div containing list of brands starting with the relevant letter onclick. It works pretty well with one flaw. The brand links within the div seem to activate the toggle function. My wish is that the layer is shown when a letter is clicked but then hides on div onMouseOut so that a different letter can be selected. Here is by code; Javascript; Code: function toggle_visibility(o,id) {
var obj = document.getElementById(id);
obj.style.display=(obj.style.display == 'block')?'none':'block';
if (obj.style.display!='none') {
obj.style.left=zxcPos(o)[0]+20+'px';
obj.style.top=zxcPos(o)[1]+20+'px';}
}
function zxcPos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}
Here is a sample of my a to z table; Code: <table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename20');">U</a></td>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename21');">V</a></td>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename22');">W</a></td>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename23');">X</a></td>
</tr>
<tr>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename24');">Y</a></td>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename25');">Z</a></td>
</tr></table>
And here is an example of the Brand name div ; Code: <div id="uniquename21" onMouseOut="toggle_visibility('null','uniquename21');" style="display:none; position:absolute; border-style: solid; background-color: white; padding: 5px;">
<a href="Manufacturer-view.asp?ManID=43">VPX</a><br>
<a href="Manufacturer-view.asp?ManID=44">Vyomax</a>
</div>
You can view the site on my test page; http://www.dp-development.co.uk/ProteinStop/site/ (Brand menu on the left nav) Thank you for any help you can give I have a question: how can you use a drop down box to show another drop down box? Here is my code below. Code: <html>
<head>
<script type="text/javascript">
"use strict";
function showlist()
{
var list=document.getElementById("id1");
var newlist=list.options[list.selectedIndex].value;
if (newlist==="Opt1")
{
document.getElementById("one").style.visibility="visible";
document.getElementById("two").style.visibility="hidden";
}
if (newlist==="Opt2")
{
document.getElementById("two").style.visibility="visible";
document.getElementById("one").style.visibility="hidden";
}
}
</script>
<style type="text/css">
select.a{visibility:hidden;}
</style>
</head>
<body>
<select id="chooseboxtoshow">
<option value="Opt1">Option 1</option>
<option value="Opt2">Option 2</option>
</select><br />
<select display="none" id="one" class="a">
<option value="1a">Option 1a</option>
<option value="1b">Option 2a</option>
</select><br />
<select display="none" id="two" class="a">
<option value="2a">Option 1b</option>
<option value="2b">Option 2b</option>
</select><br />
<input type="button" value="Show new list" onclick="showlist()">
</body>
</html>
Does anyone have ideas on how I can do it? Thanks! I'm trying to implement a visibility on or off function for extra inputs when a radio button that is "yes" inside a table... it's so "Are you married?" "Yes" "No" (no is default checked) when you hit yes I want 3 more rows like a collapse or extend feature...within the same table. So basically what I want is the table to grow.. If you select "yes" then 3 more rows will be displayed that have other inputs available... do I need to construct these extra rows in javascript? or can I referance some html to do something? ..I'm just kinda lost and brain farted out today I think... any help much appreciated. Thanks! How can i change div visibility if for example index.php?site=news&show=angels http://mmwebstudio.eu/prace/2/ i have tryed to use: Quote: function MM_showHideLayers() { //v9.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible'v=='hide')?'hidden':v; } obj.visibility=v; } but i cannot use position absolute for my news( height of main div wont be spread) pls help Hi there! I would REALLY appreciate any help! I've got a script that toggles the visibility of a div on "dashboard.html": Code: $(document).ready(function(){
$("#add_networks_wrapper, .remove_box").hide();
$(".toggle_add_networks").show();
$('.toggle_add_networks').click(function(){
$("#add_networks_wrapper, .remove_box").slideToggle();
});
});
On "dashboard.html" it works great. The div "add_networks_wrapper" is hidden until I click the link that toggles it. What I need is a link from a different html page (say "account.html" or whatever) to open "dashboard.html" with the hidden div's visible. Any help would be very appreciated! hi all, i have some code that is not registering. thinking i'm missing something obvious, but i sure can't see it. can someone else's eyes peruse this for me? thanks! code for the combo box: PHP Code: select name="country" size="1" id="country" style="position:absolute; left:451px; top:260px; width:176px; color:#00008B; font-family:Arial; font-weight:bold; font-size:13px; z-index:13" onChange="PhoneMask();"> <option value="1">United States</option> <option value="2">Australia</option> <option value="3">China</option> <option value="4">Mexico</option> <option value="5">United Kingdom</option> </select> code for the different labels i want to display: PHP Code: /*THIS SECTION IS FOR THE DIFFERENT PHONE NUMBERS OF THE VARIOUS COUNTRY CHOICES*/ <div id="phoneLabelUS" style="position:absolute; left:10px; top:225px; width:207px; height:15px;" align="left"> <font style="font-size:12px" color="#FF0000" face="Arial"><b> *Telephone Number </b></font><font style="font-size:12px" face="Arial"><b><span class="style9">(xxx-xxx-xxxx)</span> </b></font></div> <div id="phoneLabelAU" style="position:absolute; left:10px; top:225px; width:207px; height:15px; visibility: hidden;" align="left"><font style="font-size:12px" color="#FF0000" face="Arial"><b>*Telephone Number </b></font><font style="font-size:12px" face="Arial"><b><span class="style9"> (xx-xxxx-xxxx)</span></b></font></div> <div id="phoneLabelOTHER" style="position:absolute; left:10px; top:225px; width:207px; height:15px; visibility: hidden;" align="left"> <font style="font-size:12px" color="#FF0000" face="Arial"><b> Telephone Number</b></font></div> /*------------------------------------------------------------------------------------*/ here is my PhoneMask() function: PHP Code: function PhoneMask() { if (document.getElementById("country").value == "1") { document.getElementById("phoneLabelOTHER").style.zIndex = 50; document.getElementById("phoneLabelOTHER").style.visibility = 'hidden'; document.getElementById("phoneLabelAU").style.zIndex = 50; document.getElementById("phoneLabelAU").style.visibility = 'hidden'; document.getElementById("phoneLabelUS").style.zIndex = 51; document.getElementById("phoneLabelUS").style.visibility = 'visible'; } elseif (document.getElementById("country").value == "2") { document.getElementById("phoneLabelOTHER").style.zIndex = 50; document.getElementById("phoneLabelOTHER").style.visibility = 'hidden'; document.getElementById("phoneLabelAU").style.zIndex = 51; document.getElementById("phoneLabelAU").style.visibility = 'visible'; document.getElementById("phoneLabelUS").style.zIndex = 50; document.getElementById("phoneLabelUS").style.visibility = 'hidden'; } else { document.getElementById("phoneLabelOTHER").style.zIndex = 51; document.getElementById("phoneLabelOTHER").style.visibility = 'visible'; document.getElementById("phoneLabelAU").style.zIndex = 50; document.getElementById("phoneLabelAU").style.visibility = 'hidden'; document.getElementById("phoneLabelUS").style.zIndex = 50; document.getElementById("phoneLabelUS").style.visibility = 'hidden'; } } hi all, i am using this javascript code which i found on a random website to create a tooltip style popup. in my head is: Code: <script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
</script>
<style type="text/javascript">
#twittericon {
position: fixed;
bottom:148px;
left: 6%;
width: 33px;
height:29px;
z-index: 49;
}
#tweet{
position:fixed;
bottom:178px;
left: 3%;
max-width:310px;
color:#333333;
font-family:Arial Narrow,Arial,Sans-serif;
font-size:12px;;
z-index:6000;
visibility: hidden;
}
</style>
in my body is: Code: <div id="twittericon" onMouseOver="showmenu('tweet')" onMouseOut="hidemenu('tweet')">
<a href="http://twitter.com/bubblejam" target="_blank">
<img src="http://nang-nang.net/tumblr/blog/twit-bird.gif" width="33" height="29" /></a>
</div>
<div id="tweet">
(latest tweet generating code)
</div>
this creates a little bird, which displays latest tweet when rolled-over. you can see a working example of this he http://nang-nang.net/tumblr/blog/try.html my question a (1) can i add something to the javascript to create a delay when onMouseOut so that the tweet doesn't disappear immediately? also (2) could i also add something to the javascript to create a visual effect when onMouseOver or onMouseOut occurs? like a fade in effect? or slide up effect? i've been playing around with scriptaculous effects but i'm not sure how to combine that script with my script above. an answer to (1) at least would be very much appreciated! I am creating a website as part of a university project. as part of this i am trying to make a menu in the top right. after looking around i have found javascript top be the best way to do this. how would i go about making it so that when i click on one div (called map) a separate div (called mapMenu) visibility is toggled. thanks Hey everyone, I am normally very good at debugging these kinds of things but I've had a long day and am obviously overlooking something very, very simple. If anyone can spot it that would be fantastic. JavaScript Code: <script type="text/javascript">
function toggle (id) {
if (document.getElementById('sub_' + id).style.display == 'none') {
document.getElementById('sub_' + id).style.display = '';
document.getElementById('icon_' + id).src = 'images/collapse.gif';
} else {
document.getElementById('sub_' + id).style.display = 'none';
document.getElementById('icon_' + id).src = 'images/expand.gif';
}
}
</script>
HTML Code: <div id="sub_0"><div style="padding-left: 0px;"><img src="images/point.gif"> Biology</div>
<div style="padding-left: 0px;"><img src="images/point.gif"> <a href="products.php?cid=4">Chemistry</a></div>
<div style="padding-left: 0px;"><img src="images/point.gif"> <a href="products.php?cid=5">Earth/Space</a></div>
<div style="padding-left: 0px;"><img src="images/expand.gif" id="icon_6" onclick="javascript:toggle('6');" title="Click to Expand/Collapse"> <a href="products.php?cid=6">Physics</a></div>
<div id="sub_6" style="display: none;"><div style="padding-left: 10px;"><img src="images/point.gif"> <a href="products.php?cid=10">Kinimatics</a></div>
<div style="padding-left: 10px;"><img src="images/expand.gif" id="icon_12" onclick="javascript:toggle('12');" title="Click to Expand/Collapse"> <a href="products.php?cid=12">Dynamics</a></div>
<div id="sub_12" style="display: none;"><div style="padding-left: 20px;"><img src="images/point.gif"> <a href="products.php?cid=11">Newton's Laws</a></div>
<div style="padding-left: 20px;"><img src="images/point.gif"> <a href="products.php?cid=13">Special Forces</a></div>
<div style="padding-left: 20px;"><img src="images/expand.gif" id="icon_14" onclick="javascript:toggle('14');" title="Click to Expand/Collapse"> <a href="products.php?cid=14">Momentum</a></div>
<div id="sub_14" style="display: none;"><div style="padding-left: 30px;"><img src="images/point.gif"> <a href="products.php?cid=15">Impulse</a></div>
</div></div><div style="padding-left: 10px;"><img src="images/expand.gif" id="icon_16" onclick="javascript:toggle('16');" title="Click to Expand/Collapse"> <a href="products.php?cid=16">Energy</a></div>
<div id="sub_16" style="display: none;"><div style="padding-left: 20px;"><img src="images/point.gif"> <a href="products.php?cid=17">Collisions</a></div>
</div><div style="padding-left: 10px;"><img src="images/point.gif"> <a href="products.php?cid=21">Waves</a></div>
<div style="padding-left: 10px;"><img src="images/expand.gif" id="icon_18" onclick="javascript:toggle('18');" title="Click to Expand/Collapse"> <a href="products.php?cid=18">Optics</a></div>
<div id="sub_18" style="display: none;"><div style="padding-left: 20px;"><img src="images/point.gif"> <a href="products.php?cid=19">Mirrors</a></div>
<div style="padding-left: 20px;"><img src="images/point.gif"> <a href="products.php?cid=20">Lenses</a></div>
</div></div><div style="padding-left: 0px;"><img src="images/point.gif"> <a href="products.php?cid=2">Mathematics</a></div>
<div style="padding-left: 0px;"><img src="images/point.gif"> <a href="products.php?cid=7">Fine Arts</a></div>
</div> </div>
Expected Result: The icon changes to expand or collapse based on the visibility of the following <div>. Actual Result: Shows content and changes icon to collapse but when clicking on the collapse icon the <div> does not disappear and the icon just disappears in IE. In firefox clicking on the expand icon simply causes the icon to disappear. You can view what is happening he http://www.onacd.ca/products.php It is the navigation on the left. I'm going to continue to try and figure it out - but any suggestions would be great. I'm dying here. Perhaps I need a nap. Luke I have that image at the top of my website. What I want to do is have it be a link that toggles a div somewhere else on the board. I have been using this code: Code: <input type="checkbox" name="thebox" onclick="javascript:toggleDiv('block');">Toggle Block
<div id="searchbock">*search form here, obviously*</div>
<script language="javascript">
function toggleDiv(id)
{
var div = document.getElementById(id);
var current = div.style.display;
if (current == 'none')
div.style.display = 'block';
else
div.style.display = 'none';
}
</script>
But the checkbox is rather ugly and I would much rather use my custom image. Thoughts? So, I have a list of items that need to have a new preset list item appear based on what day it is. I have the date script working (to test, change the first case to some random date and change the third case to todays date - 10192010 - It will fire that document.write). What I need the cases to do though, is set the visibility of certain list items. This is just an example, there will be around 20 list items in the final project. As you can see in the first two cases, I've tried a couple different routes to no avail. Any help would be fantastic. The Code (class references are irrelevant to this example, they belong to the final project): Code: <html>
<head>
<script type="text/javascript" language="JavaScript">
/*
Count up from any date script-
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free scripts here!
*/
function getToday(yr,m,d){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var simpledate=todaym+""+todayd+""+todayy
var firstItem=document.getElementById("listOne");
var secondItem=document.getElementById("listTwo");
var thirdItem=document.getElementById("listThree");
switch(simpledate){
case "10192010":
firstItem.style.visibility="visible";
secondItem.style.visibility="hidden";
thirdItem.style.visibility="hidden";
break;
case "10202010":
document.getElementById("listOne").style.visibility="visible";
document.getElementById("listTwo").style.visibility="visible";
document.getElementById("listThree").style.visibility="hidden";
break;
case '10212010':
document.write("This code works...why can't I change an elements style within this case block also?")
break;
default:
document.write("Something is wrong")
}
}
//enter the count up date using the format year/month/day
getToday(2010,07,26)
</script>
</head>
<body>
<div id="theList">
<ul class="rounded">
<li id="listOne" style="display:block;" class="arrow"><a href="#kliwComic-MvPDualBoot"><font size="1px">11/17/10 - </font>MvP: Dual Boot</a></li>
<li id="listTwo" style="display:block;" class="arrow"><a href="#kliwComic-MvPTouchScreen"><font size="1px">11/18/10 - </font>MvP: Touch Screen</a></li>
<li id="listThree" style="display:block;" class="arrow"><a href="#kliwComic-MvPVista"><font size="1px">11/19/10 - </font>MvP: Vista</a></li>
</ul>
</div>
</body>
</html>
I'm a bit of a hack at this. Any input is greatly appreciated. Thanks again. Every year or two, I want to do something SIMPLE via JS, and each time it's like i've never been there before I simply want a button to show/hide something on click, and I THINK I'm close, but it's not quite working. Here's what I'm toying with. Code: <html>
<head>
<script type="text/javascript">
function showHide("idName") {
if(document.getElementById("idName").style.visibility=="hidden") {
document.getElementById("idName").style.visibility=="visible";
}
else {
document.getElementById("idName").style.visibility=="hidden";
}
}
</script>
</head>
<body>
<button type="button" onclick="showHide(1)">Click Me!</button>
<div id="1" "style=visibility:hidden;"><p>this is the stuff.</p></div>
</body>
</html>
How do I get the button to make that div (in)visible?? ~Mo Hi all I'm a real newbie to Java script, I've literally been teaching myself for about 2 days now, but I've come across a bit of a problem which I'm sure is easy to fix so I was hoping for some pointers. Heres the problem: What I'm trying to do is create a document which allows you to select a size of box from a drop down menu, and then select a size of product to go into the box on a second drop down. The products on the second drop down menu will be allocated based on the box size that you've selected to make sure that you can only choose products which will fit in the box you've selected. In order to do this I've set up a 2D array, which lists each product and which boxes they will fit in using 0 for no and 1 for yes. When you select a box size from the drop down a value appears in a text box next to it (1, 2, 3, or 4) and what I need to do is use the number which appears in this text box to pull data from the array to populate the next drop down list. i.e. If option 2 appears from the first drop down selection then the second drop down should be populated with data from column 2 of array (In this example 1212, 1515, and 2020 would be shown in the second drop down) Im having trouble with the Java script to pull the values from the html text box in order to manipulate the array. If you look at the function 'top_biochill_addOption_list()' you will see that the second drop is populated here from row [itop2][3] of the array, which means the second drop down is permenantly populated as if option 3 had been selected from the first drop down. I need to get the value selected from the first drop down as a variable and replace the '3' in the above statement with that variable to get this to work but I have no idea how to go about that. Hopefully all will become clear when you see the code. As I say, I am very new to Javascript so I'm sure this code is probably messy and inefficient, but with that in mind I'd appreciate replies being in simplified terms so I can understand what you're getting at, or if anything gets re-written then a brief explaination of whats going on would be handy so I can understand what the code is actually doing! Thanks Code:
<html>
<head>
<script type="text/javascript">
var linebreak = "<br />";
//Code to prints out the current product matrix
function print_top_biochill_list(){
var topx=0
var topy=0
for (topi=0;topi<top_biochill.length;topi++)
{
document.write(top_biochill[topx][topy]+" "+top_biochill[topx][topy+1]+" "+top_biochill[topx][topy+2]+" "+top_biochill[topx][topy+3]+" "+top_biochill[topx][topy+4]+"<br />");
var topx=topx+1;}}
//Code to create Drop Down Menu to select top Biochill
function top_biochill_addOption(selectbox,text,value ){
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);}
//Code to populate Top Biochill Drop Down Menu based on which size EPS is selected
function top_biochill_addOption_list(selectbox){
var itop2=0
for (var itop=0; itop < top_biochill.length;++itop){
if (top_biochill[itop2][3]==1){
top_biochill_addOption(document.top_biochill_drop_list.top_biochill_list, top_biochill[itop][0], top_biochill[itop][0]);
itop2=itop2+1
}}}
function addtop_biochill(){
}
</script>
</head>
<body onLoad="addtop_biochill();top_biochill_addOption_list()";>
<script type="text/javascript">
//Creates an array to describe top biochill
var top_biochill = new Array();
{
//0=Name, 1=EPS10, 2=EPS15, 3=EPS30, 4=EPS45
top_biochill[0] = new Array(1212,1,1,1,1 );
top_biochill[1] = new Array(1515,1,1,1,1 );
top_biochill[2] = new Array(2020,0,1,1,1 );
top_biochill[3] = new Array(3015,0,0,1,1 );
top_biochill[4] = new Array(3020,0,0,0,1 );
top_biochill[5] = new Array(3040,0,0,0,1 );
}
//Runs the prints the matrix code
print_top_biochill_list();
</script>
<!--Select EPS Size Drop Down Menu-->
<form name="box_size" onsubmit="CheckForm()">
<select name="box_size_jump_menu" onchange="document.box_size.EPSshowvalue.value=this.value">
<option value=0>Please select a Box Size</option>
<option value=1>EPS 10</option>
<option value=2>EPS 15</option>
<option value=3>EPS 30</option>
<option value=4>EPS 45</option>
</select>
<input type="number" name="EPSshowvalue">
<script type="text/javascript">
top_biochill_addOption_list();
</script>
</form>
<!--Select Top Biochill Drop Down Menu-->
<FORM name="top_biochill_drop_list" onsubmit="CheckForm()">
<SELECT NAME="top_biochill_list" onchange="document.top_biochill_drop_list.top_biochill_showvalue.value=this.value">
<Option value="" >Select Biochill</option>
</SELECT>
<input type="text" name="top_biochill_showvalue"><br>
</form>
</body>
</html>
I checked the code for hours and I can't figure out why the form doesn't work. Please, I need help, I need to finish this page. Inside the input form there is a div using visibility:hidden. The div works perfectly when it is selected (show or hide), not problem. The problem is when press the send button the form doesn't send anything, not respond, do nothing!. Any help? Not sure if this is the proper way to use the ".style.visibility" I am writing a Flash Card script to help me learn Spanish. My problem is that even though I am setting the visibility to hidden in the beginning, when the page loads I still get the "Answer box" displayed for half a second which ruins the reason for having my program !!! Here is the javascript - Code: <script type="text/javascript" >
function start() {
document.getElementById("theAns").style.visibility = "hidden";
} // end of function
function show_Ans(targetID) {
document.getElementById(targetID).style.visibility = "visible";
} // end of function
function hide_Ans(targetID) {
document.getElementById(targetID).style.visibility = "hidden";
} // end of function
</script>
<!-- Using a linked stylesheet -->
<link rel="STYLESHEET" type="text/css" href="/sys/lang.css">
</head>
<body onload="start(); ">
<!-- Taken Menu code OUT -->
<div class="card_box_main card_box1">
<h1><?php echo "Say The English Equivelent Of:"; ?></h1>
<div class="in_box card_box1_in">
<div class="card_words">
<p><?php echo "$word"; ?></p>
</div> <!-- End div: card_words -->
</div> <!-- End div: card_box1 -->
</div> <!-- End div: card_box_main -->
<span class="guide" onmouseover="show_Ans('theAns')" onmouseout="hide_Ans('theAns')" >Show Answer</span>
<div id="theAns" class="card_box_main card_box1">
<h1><?php echo "Answer:"; ?></h1>
<div class="in_box card_box1_in">
<div class="card_words">
<p><?php echo "<br>".$row['eng']; ?></p>
</div> <!-- End div: card_words -->
</div> <!-- End div: card_box1 -->
</div> <!-- End div: card_box_main -->
I am using Moz FF 7.0.1 Here is the link to what I have working. http://expert-world.net/sys/cards2.php?a=span&b=animal As I said I get the answer displayed for half a second as the page loads. Is there a way to keep the hidden data REALLY hidden until I mouse over the link ? Thanks. . I have a php web page with a list box. I select 4 items in the list and then submit to another php file to do some processing with those selected items. Then that script calls the original script - here's my question: Is there anyway to keep the four items selected when the original page is called again? Right now only one of the items is selected. I was thinking if the itemindex is 'remembered' then maybe the other items can be too? Or no? Thanks |
|||||||