|
JavaScript - Help - Script To Show & Hide Multiple Divs
Hi, I am new to javascript so any help would be much appreciated.
I found the following script online to show/hide a login div. <script language="JavaScript" type="text/javascript"> function login(showhide){ if(showhide == "show"){ document.getElementById('popupbox').style.visibility="visible"; }else if(showhide == "hide"){ document.getElementById('popupbox').style.visibility="hidden"; } } </script> It works really well but I have other div I would also like to show/hide. Is it possible to have a variable in the function that I could pass the name of the div to show/hide. I have a ul list that I am using for a navigation menu and I would like to be able to click on items in the list to show different div's. I assume this is possible, so could someone please give me an indication of how to do it as I have been trying for a few days now and no joy. Thanks, James Similar TutorialsI am using the following code to show / hide form elements within a div based upon the drop down choice. Does anyone know how this code can be amended to use multiple drop downs within one form? Code: <html>
<head>
<title>Show and Hide</title>
<script>
//*********************************************
// Function that Shows an HTML element
//*********************************************
function showDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = ""; //display div
}
//*********************************************
// Function that Hides an HTML element
//*********************************************
function hideDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = "none"; // hide
}
//*****************************************************************************
// Function that Hides all the Div elements in the select menu Value
//*****************************************************************************
function hideAllDivs()
{
//Loop through the seclect menu values and hide all
var selectMenu = document.getElementById("selectMenu");
for (var i=0; i<=selectMenu.options.length -1; i++)
{
hideDiv(selectMenu.options[i].value);
}
}
//*********************************************
// Main function that calls others to toggle divs
//*********************************************
function toggle(showID)
{
hideAllDivs(); // Hide all
showDiv(showID); // Show the one we asked for
}
</script>
</head>
<body onload="hideAllDivs();">
<select id="selectMenu" onchange="toggle(this.options[this.options.selectedIndex].value)">
<option value="formNumber1"> Show Form 1 </option>
<option value="formNumber2"> Show Form 2 </option>
<option value="formNumber3"> Show Form 3 </option>
<option value="formNumber4"> Show Form 4 </option>
</select>
<div id="formNumber1"> I am Form Number one. Any content within this div will be showed</div>
<div id="formNumber2"> I am Form Number two. Any content within this div will be showed</div>
<div id="formNumber3"> I am Form Number three. Any content within this div will be showed</div>
<div id="formNumber4"> I am Form Number four. Any content within this div will be showed</div>
</body>
</html>
Thanks in advance! I am trying to create a questionnaire that only reveals some of the questions when certain answers to previous questions are given. i.e. if the answer to question 1 is Yes, then question 2 appears under it. If the answer is No then question 3 appears instead. At the moment, however, is does nothing. I know the javascript I'm using should work, as I have used it on a website before, but not in this context. Can anyone see what I'm doing wrong? The javascript I have writen for this is: Code: <script>
function showdiv(name){
var obj = (document.getElementById)? document.getElementById(name) : eval("document.all[name]");
if (obj.style.display=="none"){
obj.style.display="";
}else{
obj.style.display="none";
}
}
</script>
The CSS is: Code: #q1 {
}
#q2 {
display:none;
margin-top: 10px;
}
#q3 {
display:none;
margin-top: 10px;
}
and the HTML is: Code: <div id="main">
<div id="q1">
<p>This is question 1</p>
<input type=button value="No" onclick="showdiv('q2');"/>
<input type=button value="Yes" onclick="showdiv('q3');"/>
</div>
<div id="q2">
<p>This is question 2</p>
<input type=button value="Yes"/>
<input type=button value="No"/>
</div>
<div id="q3">
<p>This is question 3</p>
<input type=button value="Yes"/>
<input type=button value="No"/>
<input type=button value="Maybe"/>
</div>
</div>
Hi guys, another day, another problem I have a select: Code: <label for="tiers">Number of tiers</label> <select name="tiers" id="tiers" onchange="showtiers()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> So depending what the user will choose, I want to show below divs: Code: <div class="tier" id="tier_1" style="display:block">
<label for="tier1">Tier 1</label>
<select name="item" id="tier1" onchange="recalculate(this)">
<option value="0">Please choose1</option>
</select>
</div>
<div class="tier" id="tier_2" style="display:none">
<label for="tier2">Tier 2</label>
<select name="item" id="tier2" onchange="recalculate(this)">
<option value="0">Please choose2</option>
</select>
</div>
<div class="tier" id="tier_3" style="display:none">
<label for="tier3">Tier 3</label>
<select name="item" id="tier3" onchange="recalculate(this)">
<option value="0">Please choose3</option>
</select>
</div>
<div class="tier" id="tier_4" style="display:none">
<label for="tier4">Tier 4</label>
<select name="item" id="tier4" onchange="recalculate(this)">
<option value="0">Please choose4</option>
</select>
</div>
As you can see, on page load you can only see select/div nr 1, three others are hidden. How can I make that happen? I'm trying with below code placed in the head: Code: function showtiers() {
var dropdownIndex = document.getElementById('tiers').selectedIndex;
var dropdownValue = document.getElementById('tiers')[dropdownIndex].value;
if (dropdownValue == 2) {
document.getElementById(tier_2).style.display = 'block';
document.getElementById(tier_3).style.display = 'none';
document.getElementById(tier_4).style.display = 'none';
}
if (dropdownValue == 3) {
document.getElementById(tier_2).style.display = 'block';
document.getElementById(tier_3).style.display = 'block';
document.getElementById(tier_4).style.display = 'none';
}
if (dropdownValue == 4) {
document.getElementById(tier_2).style.display = 'block';
document.getElementById(tier_3).style.display = 'block';
document.getElementById(tier_4).style.display = 'block';
}
}
If someone could point out what am I doing wrong I'd really appreciate it. Hello all, I'm still learning java. I have the concept of hide/show down, but want I want to do is when a div is shown, all the other divs are hidden, and when I click on another div to show, the other one hides, etc. This is my code for jquery show/hide: Code: <script type="text/javascript">
$(document).ready(function(){
$('#{field_label}').hide();
$('input#show{field_label}').click(function(){
$('#{field_label}').show('fast');
});
$('input#close{field_label}').click(function(){
$('#{field_label}').hide('fast');
})
});
</script>
What do I need to add so that the previous DIV that was open, auto closes when a NEW DIV is enabled to show. Much appreciated Coders! I have a page where it has anchors going to different parts of the page and i have a list of links at the top to go to each anchor. when you click on the links to each part of the page it shows the "back to top, next, back" buttons. I have 7 different links, so i need to have this happen 7 times, I only want the "back to top, next, and back" buttons to be shown when the user clicks on the link to that specific anchor, or the next/back button to that anchor from another one. I have been doing this with the div hide/show javascript however it makes me have to change sooo much information to do this.. There has got to be an easier way.. It would take me forever to finish doing this to all of them, i need a better way to achieve this. There's too much code that its confusing. this is my current javascript: var ie = (document.all) ? true : false; function hideID(objID){ var element = (ie) ? document.all(objID) : document.getElementById(objID); element.style.display="none" } function showID(objID){ var element = (ie) ? document.all(objID) : document.getElementById(objID); element.style.display="block" } And this is just one of the links: <li><a onclick="showID('1939top'); showID('1939next');hideID('1940top'); hideID('1941top'); hideID('1942top'); hideID('1943top'); hideID('1944top'); hideID('1945top');" href="#1939">1939</a></li> And this is one of the back to top/next button codes: <a href="#1940"><span id="1939next" class="next-back" onclick="hideID('1939next'); hideID('1939top')"><div class="arrow-down"></div></span></span></a> <a href="#top"><span id="1939top" class="timeline-b2top" onclick="hideID('1939top')">Top</span></a><a name="1939" id="1939"></a> This code has always been a huge problem for me, not only does it take forever to change the effects and all, but it is VERY messy and I really need some help on how to code it lol. Thanks so much. Hi ya all, how can I show / hide the content of sub divs based on whether the input is != or = and be able to repeat this. I tried to hide the sub divs using , onclick if bla bla = '' ; Code: document.getElementById('hideme').innerHTML = '';
which works, but once I try to enter a new input, then nothing happens, even if the content of the sub divs is = input thx Trying to get the divs to switch style properties when selected form select menu. Any help would be great! Code: <script type="text/javascript">
function showstuff(element){
if(document.getElementById(element).style.display = 'block')
{
document.getElementById(have).style.visibility="block";
document.getElementById(look).style.visibility="none";
}
else if(document.getElementById(element).style.visibility = 'block')
{
document.getElementById(look).style.visibility="block";
document.getElementById(have).style.visibility="none";
}
}
</script>
<select name="type" onchange="showstuff(this.value);">
<option value="look">Look</option>
<option value="have">Have</option>
</select>
<div id="have" style="display:block;">Have</div>
<div id="look" style="display:none;">Look</div>
Let me start by saying I'm a noob to JavaScript. What I'm trying to do for my website is have a select menu that shows the number of div's that's selected. I found a JS that I could do that with, but it only toggles, not change specifically what's selected. So if you click the wrong one, it doesn't work right. Here's what I got: Code: <body>
<script type="text/javascript">
function toggle_visibility(){
for(var i = 0,len = arguments.length;i < len; i++){
var e = document.getElementById(arguments[i]).style,d = e.display;
e.display = (d == "block") ? "none" : "block";
}
}
</script>
<select name="select" id="select">
<option>0</option>
<option onclick="toggle_visibility('1');" >1</option>
<option onclick="toggle_visibility('1','2');">2</option>
<option onclick="toggle_visibility('1','2','3');">3</option>
<option onclick="toggle_visibility('1','2','3','4');">4</option>
</select><br>
<div id="1" style="display: none;">Test1</div>
<div id="2" style="display: none;">Test2</div>
<div id="3" style="display: none;">Test3</div>
<div id="4" style="display: none;">Test4</div>
</body>
Any help would be appreciated, cause I'm lost. I have a page that has 26 divides one for each letter A-Z. I have the script written so that when you click on the link for one letter it shows that divide and hides the rest. However, I think there has got to be an easier way to do this because the code is so long! It works great but takes forever to write! Does anyone have any suggestions to reduce the size of this code? Code: Javascript: (Short and simple code)
function showstuff(divID){
document.getElementById(divID).style.visibility="visible";
document.getElementById(divID).style.display="block";
window.location.hash="names";
}
function hidestuff(divID){
document.getElementById(divID).style.visibility="hidden";
document.getElementById(divID).style.display="none";
}
HTML: (WHAT A CLUSTER!)
<a href="javascript:showstuff('adivide');hidestuff('bdivide');hidestuff('cdivide');hidestuff('ddivide');">A</a>
So I have 26 functions being called for each click! There must be a simpler way to do this. Perhaps I can write a function that calls all 25 hidestuff() functions and then I can add the one showstuf(). Hello, I'm working on a top menu consisting of MENU A, MENU B and MENU C each with it's own drop down submenu on a separate layer. I'm using ShowContent and HideContent to display the submenus onmouseover. So on mouseover it shows "LayerA" and hides "LayerB" and "LayerC." The problem I'm having is that it will only hide one of the layers. Which ever one is listed first. I'm sure the problem lies in HideContent('LayerB','LayerC') but I don't know how to resolve it. Any help would be much appreciated. Here is the script I'm using: <script type="text/javascript" language="JavaScript"><!-- function HideContent(d) { if(d.length < 1) { return; } document.getElementById(d).style.display = "none"; } function ShowContent(d) { if(d.length < 1) { return; } document.getElementById(d).style.display = "block"; } function ReverseContentDisplay(d) { if(d.length < 1) { return; } if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; } else { document.getElementById(d).style.display = "none"; } } //--></script> And here is my menu: <td><a href="XXXX" onmouseover="ShowContent('LayerA'); HideContent('LayerB','LayerC')">MENU A</a> </td> <td><a href="XXXX" onmouseover="ShowContent('LayerB'); HideContent('LayerA','LayerC')">MENU B</a> </td> <td><a href="XXXX" onmouseover="ShowContent('LayerC'); HideContent('LayerA','LayerB')">MENU C</a> </td> So I am trying to hide content and show it when selected with a select box. The first select box works fine no problems. However I added a second one with two options, and it will not work at all. If I use the same name it messes up, and if I make a new name, it does nothing at all. ShowNext function is the new one I added that doesn't work. PHP Code: <script type="text/javascript"> function ShowReg(op) { document.getElementById('public').style.display='none'; document.getElementById('alliance').style.display='none'; switch (op) { case 1 : document.getElementById('public').style.display="block"; break; case 2 : document.getElementById('alliance').style.display="block"; break; default : break; } } function ShowNext(op) { document.getElementById('randomwin').style.display='none'; document.getElementById('setentry').style.display='none'; document.getElementById('highestlevel').style.display='none'; document.getElementById('question').style.display='none'; switch (op) { case 1 : document.getElementById('randomwin').style.display="block"; break; case 2 : document.getElementById('setentry').style.display="block"; break; case 3 : document.getElementById('highestlevel').style.display="block"; break; case 4 : document.getElementById('question').style.display="block"; break; default : break; } } </script> PHP Code: <tr><td><b>Privacy:</b></td><td> <select name="privacy" id="choice" onChange="ShowReg(this.selectedIndex)"> <option value="error">Select One</option> <option value="public">Public</option> <option value="alliance">Alliance Only</option> </select> </td></tr></table><br /> <div id="public" style="display:none"> <p><b>Contest will be made Public for all players to use.</b> </div> <div id="alliance" style="display:none"> <p><b>Contest will be made available to only alliance members.</b> </div> <tr><td><b>Type:</b></td><td> <select name="contype" id="choice" onChange="ShowNext(this.selectedIndex)"> <option value="error">Select One</option> <option value="randomwin">Random Draw</option> <option value="setentry">Marked Entry</option> <option value="highestlevel">Highest Level</option> <option value="question">Answer Question</option> </select></td></tr></table><br /> <div id="randomwin" style="display:none"> <p>Random draw selected </div> <div id="winner" style="display:none"> <p>Select Entry number to auto win: <select name="entrypick"> <option value="5">Entry 5</option> <option value="6">Entry 6</option> <option value="7">Entry 7</option> <option value="8">Entry 8</option> <option value="9">Entry 9</option> <option value="10">Entry 10</option> <option value="11">Entry 11</option> <option value="12">Entry 12</option> <option value="13">Entry 13</option> <option value="14">Entry 14</option> <option value="15">Entry 15</option> <option value="16">Entry 16</option> <option value="17">Entry 17</option> <option value="18">Entry 18</option> <option value="19">Entry 19</option> <option value="20">Entry 20</option> <option value="21">Entry 21</option> <option value="22">Entry 22</option> <option value="23">Entry 23</option> <option value="24">Entry 24</option> <option value="25">Entry 25</option> <option value="26">Entry 26</option> <option value="27">Entry 27</option> <option value="28">Entry 28</option> <option value="29">Entry 29</option> <option value="30">Entry 30</option> </select> </div> So, I'm using a lot of js and I needed to find a work around to get it all working together, so I'm using InsertContent and RemoveContent to control several divs that I have. In this case it is 4 divs, but in other situations I'll have up to 10. My problem is that when the user starts with the first div displayed, the other 3 swap just fine, however, when clicking through the set of links, once the user gets to the 3rd link that is supposed to swap out the divs all the divs show up except the first, and the same happens on the fourth link. This is my js for the div swap functionality: Code: <script type="text/javascript">
<!--
function InsertContent(tid) {
if(document.getElementById(tid).style.display == "none") {
document.getElementById(tid).style.display = "";
}
else {
document.getElementById(tid).style.display = "none";
}
}
function RemoveContent(tid) {
if(document.getElementById(tid).style.display == "") {
document.getElementById(tid).style.display = "none";
}
else {
document.getElementById(tid).style.display = "";
}
}
//-->
</script>
These are the html links: Code: <div class="listimg"><a href="javascript:RemoveContent('view2','view3','view4'); InsertContent('view1'); swapimg(0); " ><img src="../assets/images/nokia/nokia01_thumb.jpg" id="item0" alt="" style="opacity:.99;" /></a></div>
<div class="listimg"><a href="javascript:RemoveContent('view1','view3','view4'); InsertContent('view2'); swapimg(1); "><img src="../assets/images/nokia/nokia02_thumb.jpg" id="item1" alt="" /></a></div>
<div class="listimg"><a href="javascript:RemoveContent('view1','view2','view4'); InsertContent('view3'); swapimg(2);"><img src="../assets/images/nokia/nokia03_thumb.jpg" id="item2" alt=""/></a></div>
<div class="listimg"><a href="javascript:RemoveContent('view1','view2','view3'); InsertContent('view4'); swapimg(3);"><img src="../assets/images/nokia/nokia04_thumb.jpg" id="item3" alt=""/></a></div>
And these are the divs that are being removed and added: Code: <div id="view1" style="display: " > <a href="../assets/images/nokia/nokia01_big.jpg" class="thickbox" title="Windowcling" rel="gallery-art" >view larger1</a> </div> <div id="view2" style="display:none" > <a href="../assets/images/nokia/nokia02_big.jpg" class="thickbox" title="Windowcling2" rel="gallery-art2" >view larger2</a> </div> <div id="view3" style="display:none" > <a href="../assets/images/nokia/nokia03_big.jpg" class="thickbox" title="Windowcling3" rel="gallery-art3" >view larger3</a> </div> <div id="view4" style="display:none" > <a href="../assets/images/nokia/nokia04_big.jpg" class="thickbox" title="Windowcling2" rel="gallery-art4" >view larger4</a> </div> Any help would be greatly appreciated. Thank you in advance! Hi to All, I have a table that contains many rows, some in italian with code <td nome='riga_i'> and some in english with code <td name='row_e'>. I have created two buttons with different background flags: italy and uk, so when one pushes the button with flag uk, the html page will be reloaded with only english rows, and when one pushes the button with flag it, the same page is reloaded containing only italian rows. All the code posted here works well, but I think that the code can be better because to reach this result I had to dupplicate the same function and I don' t like this. Here the code: <html> <head> <script type="text/javascript"> function toggle(name) { tr=document.getElementsByTagName('tr') for (i=0;i<tr.length;i++){ if (tr[i].getAttribute(name)){ if (tr[i].style.display=='none'){tr[i].style.display = '';} else {tr[i].style.display = 'none';} } } } // function toggle(nome) { tr=document.getElementsByTagName('tr') for (i=0;i<tr.length;i++){ if (tr[i].getAttribute(nome)){ if (tr[i].style.display=='none'){tr[i].style.display = '';} else {tr[i].style.display = 'none';} } } } </script> </head> <body onload="toggle('name');"> <table> <tr nome="riga_i"> <td>REQUISITI RELATVI AL SERVIZIO</td> <td> </td> <td><input type="button" onclick="toggle('nome');toggle('name');" style="background-image: url(../images/flag_uk.jpg); background-color:Transparent;" /></td></tr> <tr name="row_e"> <td> </td> <td>REQUIREMENTS RELATED TO THE SERVICE</td> <td><input type="button" onclick="toggle('name');toggle('nome');" style="background-image: url(../images/flag_italy.jpg); background-color:Transparent;" /></td></tr> .... .... and so on.... ..... </table></html> To better the code I have tried in this way but without success ... <html> <head> <script type="text/javascript"> function toggle(this) { if (this=='nome' || this=='name'){ tr=document.getElementsByTagName('tr') for (i=0;i<tr.length;i++){ if (tr[i].getAttribute(this)){ if (tr[i].style.display=='none'){tr[i].style.display = '';} else {tr[i].style.display = 'none';} } } } } </script> </head> Thanks in advance !!! Hi I am trying when a user chooses an airline from dropdown seen here that two additional drop downs appear for departing airport and arrival airport. I have coded it to work when one chooses American Airlines from drop down, but I need different departing and arrival airports to appear for the various a user may choose. Anyone know how that can be done? thanks Hey everyone. I have a simple hide/show script that is doing what I want, but I was wondering if there is an easier way around having to specify show and hide requirements "onclick" each time. Here is what I've got: Javascript: Code: <script type="text/javascript">
function show(boxid) {
document.getElementById(boxid).style.display="block";
}
function hide(boxid) {
document.getElementById(boxid).style.display="none";
}
</script>
HTML: Code: <body onload="hide('homePoster1'); hide('homePoster2'); hide('homePoster3'); hide('homePoster4'); hide('filmDesc1'); hide('filmDesc2'); hide('filmDesc3'); hide('filmDesc4'); ">
<div id="homePoster1"><img src="img/posters/babystory.gif" width="419" height="419" /></div>
<div id="homePoster2"><img src="img/posters/converse.gif" width="419" height="419" /></div>
<div id="homePoster3"><img src="img/posters/cookingchannel.jpg" width="419" height="419" /></div>
<div id="homePoster4"><img src="img/posters/culturesofresistance.jpg" width="419" height="419" /></div>
<div class="filmDescAll">
<h2>Film 1 title</h2>
<div id = "filmDesc1">Film 1 description</div>
<div class="more"><a href="#" onclick="show('filmDesc1'); hide('filmDesc2'); hide('filmDesc3'); hide('filmDesc4');
show('homePoster1'); hide('homePoster2'); hide('homePoster3'); hide('homePoster4');">+ more info</a></div>
</div>
<div class="filmDescAll">
<h2>Film 2 title</h2>
<div id="filmDesc2">Film 2 description</div>
<div class="more"><a href="#" onclick="show('filmDesc2'); hide('filmDesc1'); hide('filmDesc3'); hide('filmDesc4');
show('homePoster2'); hide('homePoster1'); hide('homePoster3'); hide('homePoster4');">+ more info</a></div>
</div>
<div class="filmDescAll">
<h2>Film 3 title</h2>
<div id="filmDesc3">Film 3 description</div>
<div class="more"><a href="#" onclick="show('filmDesc3'); hide('filmDesc1'); hide('filmDesc2'); hide('filmDesc4');
show('homePoster3'); hide('homePoster1'); hide('homePoster2'); hide('homePoster4');">+ more info</a></div>
</div>
<div class="filmDescAll">
<h2>Film 4 title</h2>
<div id="filmDesc4">Film 4 description</div>
<div class="more"><a href="#" onclick="show('filmDesc4'); hide('filmDesc1'); hide('filmDesc2'); hide('filmDesc3');
show('homePoster4'); hide('homePoster1'); hide('homePoster2'); hide('homePoster3');"class="more4">+ more info</a></div>
</div>
Hi, I'm trying to use the code from DHTMLGoodies' show/hide script, from he http://www.dhtmlgoodies.com/index.ht..._content_slide but I want to use it for two different classes in my HTML, as I have two sizes of header buttons (I have a taller button to cope with text that is too long to fit in one line, as it wraps around). I have created the CSS styles as given on the website, but I have made a second style, to display the taller button, but I would like to know how to make the javascript work with it. Currently I have: Code: /*********** DHTML_GOODIES SLIDING TEXT START ***********/
div#thincolumn .dhtmlgoodies_question, div#thincolumn .dhtmlgoodies_question_big {background: url(images/thincolblue.jpg) no-repeat top left;height: 32px;color:#FFFFFF;padding:8px 14px 0 14px;font:bold 1.1em Arial, sans-serif;overflow:hidden;cursor:pointer;}
div#thincolumn .dhtmlgoodies_question_big {background: url(images/thincolblue2.jpg) no-repeat top left;height:50px;}
div#thincolumn .dhtmlgoodies_answer{ /* Parent box of slide down content */
/* Start layout CSS */
width:150px;
/* End layout CSS */
visibility:hidden;
height:0px;
overflow:hidden;
position:relative;
}
div#thincolumn .dhtmlgoodies_answer_content, .dhtmlgoodies_answer_content_big { /* Content that is slided down */
padding:1px;
font-size:1em;
position:relative;
}
/*********** DHTML_GOODIES SLIDING TEXT END ***********/
(div#thincolumn is the column that I place the buttons in). I added a new style, .dhtmlgoodies_question_big, to style the taller buttons, but I don't know how to change the Javascript so that it works on these divs as well as the normal, dhtmlgoodies_question divs. Near the end of the Javascript it says: Code: if(divs[no].className=='dhtmlgoodies_question'){
Is it possible to put an "or" in there and have something like Code: if(divs[no].className=='dhtmlgoodies_question')or(divs[no].className=='dhtmlgoodies_question_big'){
Please forgive my ignorance, I am fine with CSS and HTML, but I have never used Javascript before, and searching for "Javascript" and "or" on Google obviously didn't produce the result I was looking for! I don't even know if it's possible to use "or" in Javascript. I have tried duplicated the entire Javascript like this: Code: <script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var dhtmlgoodies_slideSpeed = 60; // Higher value = faster
var dhtmlgoodies_timer = 10; // Lower value = faster
var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
function showHideContent(e,inputId)
{
if(dhtmlgoodies_slideInProgress)return;
dhtmlgoodies_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);
objectIdToSlideDown = false;
if(!answerDiv.style.display || answerDiv.style.display=='none'){
if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId){
objectIdToSlideDown = numericId;
slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
}else{
answerDiv.style.display='block';
answerDiv.style.visibility = 'visible';
slideContent(numericId,dhtmlgoodies_slideSpeed);
}
}else{
slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
dhtmlgoodies_activeId = false;
}
}
function slideContent(inputId,direction)
{
var obj =document.getElementById('dhtmlgoodies_a' + inputId);
var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height>contentObj.offsetHeight){
height = contentObj.offsetHeight;
rerunFunction = false;
}
if(height<=1){
height = 1;
rerunFunction = false;
}
obj.style.height = height + 'px';
var topPos = height - contentObj.offsetHeight;
if(topPos>0)topPos=0;
contentObj.style.top = topPos + 'px';
if(rerunFunction){
setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
}else{
if(height<=1){
obj.style.display='none';
if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);
}else{
dhtmlgoodies_slideInProgress = false;
}
}else{
dhtmlgoodies_activeId = inputId;
dhtmlgoodies_slideInProgress = false;
}
}
}
function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;no<divs.length;no++){
if(divs[no].className=='dhtmlgoodies_question'){
divs[no].onclick = showHideContent;
divs[no].id = 'dhtmlgoodies_q'+divCounter;
var answer = divs[no].nextSibling;
while(answer && answer.tagName!='DIV'){
answer = answer.nextSibling;
}
answer.id = 'dhtmlgoodies_a'+divCounter;
contentDiv = answer.getElementsByTagName('DIV')[0];
contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
contentDiv.className='dhtmlgoodies_answer_content';
contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
answer.style.display='none';
answer.style.height='1px';
divCounter++;
}
}
}
window.onload = initShowHideDivs;
</script>
<!-- END OF SLIDING TEXT JAVASCRIPT -->
and Code: <script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var dhtmlgoodies_slideSpeed = 60; // Higher value = faster
var dhtmlgoodies_timer = 10; // Lower value = faster
var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
function showHideContent(e,inputId)
{
if(dhtmlgoodies_slideInProgress)return;
dhtmlgoodies_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);
objectIdToSlideDown = false;
if(!answerDiv.style.display || answerDiv.style.display=='none'){
if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId){
objectIdToSlideDown = numericId;
slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
}else{
answerDiv.style.display='block';
answerDiv.style.visibility = 'visible';
slideContent(numericId,dhtmlgoodies_slideSpeed);
}
}else{
slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
dhtmlgoodies_activeId = false;
}
}
function slideContent(inputId,direction)
{
var obj =document.getElementById('dhtmlgoodies_a' + inputId);
var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height>contentObj.offsetHeight){
height = contentObj.offsetHeight;
rerunFunction = false;
}
if(height<=1){
height = 1;
rerunFunction = false;
}
obj.style.height = height + 'px';
var topPos = height - contentObj.offsetHeight;
if(topPos>0)topPos=0;
contentObj.style.top = topPos + 'px';
if(rerunFunction){
setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
}else{
if(height<=1){
obj.style.display='none';
if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);
}else{
dhtmlgoodies_slideInProgress = false;
}
}else{
dhtmlgoodies_activeId = inputId;
dhtmlgoodies_slideInProgress = false;
}
}
}
function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;no<divs.length;no++){
if(divs[no].className=='dhtmlgoodies_question_big'){
divs[no].onclick = showHideContent;
divs[no].id = 'dhtmlgoodies_q'+divCounter;
var answer = divs[no].nextSibling;
while(answer && answer.tagName!='DIV'){
answer = answer.nextSibling;
}
answer.id = 'dhtmlgoodies_a'+divCounter;
contentDiv = answer.getElementsByTagName('DIV')[0];
contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
contentDiv.className='dhtmlgoodies_answer_content_big';
contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
answer.style.display='none';
answer.style.height='1px';
divCounter++;
}
}
}
window.onload = initShowHideDivs;
</script>
<!-- END OF SLIDING TEXT JAVASCRIPT -->
but now it only works for the taller buttons (which the second piece of Javascript refer to). I think it might be possible to just use one instance of the original code, and some "or" operators, but I'm not sure. Any help would be very much appreciated. Helloo Im new to javascript.. I need help badly... here are two tabless. 1. information of a friend. 2nd table i get when i click da image (ADD ANOTHER FRIEND) but, on validation and submission.. the second table is not showing upp... When i once click ADD FRIEND.. i want the table to show up on reload and validation.... Thanks Here is my code <? if (isset($_POST['submit'])) { if (!$frndname) { $frndname_error = 1; $problems=1; } if (!$frndcity) { $frndcity_error = 1; $problems=1; } ///doo db stuff insertion } ?> <!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"> function showTable() { var table = document.getElementById("myTable"); if (table) table.style.display = "block"; var div = document.getElementById("frndimg"); if(div) div.style.display = "none"; } </script> </head> <body> <form action="" method="POST" name="form1"> <?php if(!isset($_POST['submit']) or $problems) { ?> <table> <tr> <td colspan="2"> <table width="21%"> <tr> <td width="3%" align="left" valign="top"> </td> <td colspan="2"> <b class="referralheading"> YOUR FRIEND'S INFORMATION: </b> </td></tr> <tr> <td width="3%" align="left" valign="top"> </td> <td width="16%"><? if ($frndname_error) { echo ("<font color='#FF0000'>Name:</font>"); } else { echo ("Name:"); }?> <b><font color="#FF0000">*</font></b><br> <input type="text" name="frndname" id ="frndname" value="<?php echo $frndname; ?>" maxlength=45 size=25></td> <td width="81%" colspan="3">City: <b><font color="#FF0000">*</font></b><br><input type="text" id="frndcity" name="frndcity" value="<?php echo $frndcity; ?>" maxlength=45 size=25> </td> </tr> </table></td></tr> <tr> <td width="4%" align="left" valign="top"> </td> <td > <div style="float:left;cursorointer;"> <img src="images/referral_add_friend.jpg" width="190" height="28" onClick="showTable()" title="Click to add another friend" id="frndimg"> </div> </td></tr> <tr> <td colspan="2"> <table width="100%" id="myTable" style="display:none;"> <tr> <td width="4%" align="left" valign="top"> </td> <td colspan="2"> <b class="referralheading"> YOUR FRIEND'S INFORMATION: </b> </td></tr> <tr> <td width="4%" align="left" valign="top"> </td> <td width="53%"> NAme: <b><font color="#FF0000">*</font></b><br> <input type="text" name="frnd1name" id ="frnd1name" value="<?php echo $frnd1name; ?>" maxlength=45 size=25></td> <td width="47%" colspan="3">City: <b></b><br><input type="text" id="frnd1city" name="frnd1city" value="<?php echo $frnd1city; ?>" maxlength=45 size=25> </td> </tr> <tr> <td width="4%" align="left" valign="top"> </td> <td>Phone Number: <b></b><br> <input type="text" name="frnd1phone" id ="frnd1phone" value="<?php echo $frnd1phone; ?>" maxlength=45 size=25></td> <td colspan="3">Email: <br><input type="text" id="frnd1email" name="frnd1email" value="<?php echo $frnd1email; ?>" maxlength=45 size=25> </td> </tr> <tr><td> </td></tr> </table> </td></tr> <tr> <td><input type="image" src="images/submit_referral.jpg" height="30" width="173" border="0" alt="Submit Form" value="submit"></td></tr> <tr><td> </td><td align="center" class="referralheading"> Fields Marked With * Are Required</td></tr> </table> <? } ?> </form> </body> </html> Im using the following script: Code: <script type="text/javascript">
function unhide(hiddentext) {
var item = document.getElementById(hiddentext);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
<style type="text/css">
.unhidden { display: block; }
.hidden { display: none; }
</style>
to hide and unhide a block of text on my page, using onclick events. the problem is its not allowing me to use it multiple times in a page. when i use a second instance of it, both stop working. the above demonstrated script is working with the following elements: middle (approx) of page: Code: <td class="desc_cell"><strong>Download Station</strong><br />
17" Macbook Pro<br /><a href="javascript:unhide('itemlist');" onclick="changeText(this,'Hide Item List');" id="text1link"]Old Text>Click Here For Full Item List</a><div id="hiddentext" class="hidden">list of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes here</div>
</td>
bottom of page: [code]<p align="center" style="citylist">Allen Park MI, Anchor Bay Gardens MI, Anchor Bay Harbor MI, Anchor Bay Shores MI, Andersonville MI,<a href="javascript:unhide('hiddentext');" onclick="changeText(this,' View Less...');" id="text1link"]Old Text>View More...</a></p><div id="hiddentext" class="hidden">Armada MI, Auburn Heights MI, Auburn Hills MI, Austin Corneorth Farmington MI, Northville MI, Norton MI, Novi MI, Oak MI, Oak Grove MI, Oak Park MI, Oakley Park MI, Oakwood MI, Orchard Lake MI, Ortonville MI, Oxbow MI, Oxford MI, Perry Lake Heights MI, Pleasant Ridge MI, Plymouth MI, Point Lakeview MI, Pontiac MI, Preston Coom MI, Wolcott Mills MI, Wolverine Lake MI, Wood Creek Farms MI, Woodhaven MI, Wyandotte MI, Yates MI, and many more!</div> I found this script on a tutorial site but it had no summary of browser compatibility or any other issues. I know absolutely nothing about javascript and, although it works fine when I test it, I would appreciate it very much if someone else would review this page and give me feedback. Code: <head>
<script type="text/javascript">
lastone='empty';
function showIt(lyr)
{
if (lastone!='empty') lastone.style.display='none';
lastone=document.getElementById(lyr);
lastone.style.display='block';
}
</script>
</head>
<body>
<!--links-->
<a href="JavaScript:;" onClick="showIt('divID1')" ">link1</a>
<a href="JavaScript:;" onClick="showIt('divID2')" ">link2</a>
<a href="JavaScript:;" onClick="showIt('divID3')" ">link3</a>
<a href="JavaScript:;" onClick="showIt('divID4')" ">link4</a>
<!--layers-->
<div id="divID1" style="display:none;">content1</div>
<div id="divID2" style="display:none;">.content2</div>
<div id="divID3" style="display:none;">..content3</div>
<div id="divID4" style="display:none;">...content4</div>
</body>
Here is a demo of it in action: http://www.mousegrey.com/layers.html |
|||||||