|
JavaScript - Show/hide Onclick
Hi there, I have a site which consists of the html page and css page. I have been trying to get the image at the top of the page to dissapear when the user clicks on the footer. Any suggestions on how I can do this? Below is my code, Thanks in advance.
HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { background-color: #CC6; } </style></head> <body> <div id="header-wrap"> <div id="header-container"> <div id="header"> <h1>JavaScript</h1> </div> </div> </div> <div id="ie6-container-wrap"> <div id="container"> <DIV STYLE="font-size:12pt" onmouseover="this.style.fontSize='16pt'" onmouseout="this.style.fontSize='12pt'"> <div id="content"> <h1>Mainframe</h1> <p>Enter the content of your website within this area.</p> </div></DIV> </div> </div> <div id="footer-wrap"> <div id="footer-container"> <div id="footer"> <center> <body onLoad="dateandtime()"> <script> var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday") var montharray=new Array("January","February","March","April","May","June","July","August","September","October","Novem ber","December") function getthedate(){ var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym<10) daym="0"+daym var hours=mydate.getHours() var minutes=mydate.getMinutes() var seconds=mydate.getSeconds() var dn="AM" if (hours>=12) dn="PM" if (hours>12){ hours=hours-12 } if (hours==0) hours=12 if (minutes<=9) minutes="0"+minutes if (seconds<=9) seconds="0"+seconds var cdate="<small><font color='#87ac6d' font size='2.5' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn +"</b></font></small>" if (document.all) document.all.clock.innerHTML=cdate else document.write(cdate) } if (!document.all) getthedate() function dateandtime(){ if (document.all) setInterval("getthedate()",1000) } </script> <span id="clock"></span> </center> </div> </div> </div> </body> </html> CSS: body { font: 62.5% Arial, Helvetica, sans-serif; color: #597347; margin: 0; padding: 0; background: #beffbf; } h1, h2 { color: #87ac6d; font-family: Tahoma, Arial, Geneva, sans-serif; margin: 20px 0 10px; } h1 { font-size: 2.5em; } p { margin: 10px 0; padding: 0; } blockquote { font-style: italic; } #header-wrap { position: fixed; top: 0; left: 0; width: 100%; } #header-container { height: 90px; background: url(../images/banner.jpg) repeat-x left bottom; } #header { width: 940px; margin: 0 auto; position: relative; } #header h1 { color: #beffbf; text-align: right; width: 290px; margin: 0; position: absolute; left: 476px; top: 32px; } #header h1 em{ color: #90b874; font-size: small; display: block; } #header ul { margin: 0; padding: 0; list-style: none; position: absolute; top: 35px; right: 0; } #header ul li { float: left; margin-right: 5px; } #header ul li a{ color: #90b874; font-weight: bold; font-size: 1.4em; margin-right: 5px; text-decoration: none; } #header ul li a:hover { color: #beffbf; } #container { width: 940px; margin: 0 auto; font-size: 1.4em; overflow: auto; padding: 90px 0 40px; } #content { float: left; width: 100%; } #sidebar { float: right; width: 275px; margin-top: 10px; } #footer-wrap { position: fixed; bottom: 0; left: 0; width: 100%; } #footer-container { height: 40px; background-color: #000; } #footer { width: 940px; margin: 0 auto; position: relative; } Similar TutorialsAlright, me having a very basic knowledge of js I'm looking for some help with(what I think should be) a simple hide/show of a set of divs. I've broken down the ccs/html I'm looking at on a test page here - http://www.grinnbarrett.net/test.html The js I have in the page had been what I tried to modify from a simple hide/show, but it's not doing what I want it to do (obviously). The goal is when you click on link 3, I want white3 to hide and all the other white divs to show, when you click on link 3, white 2 will hide and the other white divs will show, and so on. So basically it's revealing what div you click to. A lot of what I've found have been just toggles, but I'm not very confident in my ability to adjust code. Any and all help would be appreciated. hello.... i am needing help writing a function that when onclick it shows a specific element id and hides all the rest of the the ids i have php code that shows a list of colored boxes and when you click one it changes the color of a div... this works fine as i have used a changecss function... i have these colors in a database with their values and specific color names... what i am trying to do is when a color is clicked it will change the div and also print the color name.... i have made a php loop to print all the color names and i have the display as none... how can i add to the onclick function that changes the color to also put the display of the certain color name to "block" and then if you select another color it hides that one and shows the new color... any help is appreciated! i'm sorry if this is confusing Hey guys, I'm new to the forums, so if i post anything wrong let me know. I'm trying to use links to hide all the images, and show just ones from a certain category. I've used the img name attribute to group them and tried to do a function that shows only one img. here's the script... <script language="javascript"> function showone(x) { document.getElementByName('a').style.display='none'; document.getElementByName('b').style.display='none'; document.getElementByName('c').style.display='none'; document.getElementByName(x).style.display='block'; } </script> and the code... <a href="#" onClick="showone('a'); ">show CAT. A</a><br> <a href="#" onClick="showone('b'); ">show CAT. B</a><br> <a href="#" onClick="showone('c'); ">show CAT. C</a><br> <a href="#">show all cats</a><br> <br> <img name="a" src="imgs/a1.jpg" /><br> <img name="b" src="imgs/b1.jpg" /><br> <img name="a" src="imgs/a2.jpg" /><br> <img name="a" src="imgs/a3.jpg" /><br> <img name="b" src="imgs/b2.jpg" /><br> <img name="c" src="imgs/c1.jpg" /> Here's what it looks like... http://mattfalcone.com/tests/showhide.html except the links don't work like they should, and I can't figure out why. I'm an idiot with javascript, so if feel free to make fun of me, and if anyone knows how to get this simple function to work, please let me know and I'de appreciate it. 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, I have 4 radio buttons with separate div(s) I need to click on each radio button to show particular div(s) but I am not getting correct result Lease help HTML Code ---------- <input type="radio" name="list_prefer_c" id="list_prefer_c" value="1" onClick=\"get_radio_value(1);\" > <input type="radio" name="list_prefer_c" id="list_prefer_c" value="2" onClick=\"get_radio_value(2);\" > <input type="radio" name="list_prefer_c" id="list_prefer_c" value="3" onClick=\"get_radio_value(3);\" > <input type="radio" name="list_prefer_c" id="list_prefer_c" value="4" onClick=\"get_radio_value(4);\" > <div id="div1" style="display:none"> Facilities Management </div> <div id="div2" style="display:none"> <div style="font-weight:bold">Facilities Management, Contracting, MEP, Hydraulic Valves, trading etc… </div> <div id="div3" style="background-color:#00B0F0;display:none"> Facilities Management, Contracting, MEP, Hydraulic Valves, trading etc… </div> <div id="div4" style="background-color:#00B0F0;display:none"> Facilities Management,Contracting, MEP, Hydraulic Valves, Plumping, LV Switching, Fire alarm & Fire Fighting Trading etc… </div> JSCode -------- function toggleLayer(val) { if(val == 1) { document.getElementById('div1').style.display = 'block'; document.getElementById('div2').style.display = 'none'; document.getElementById('div3').style.display = 'none'; document.getElementById('div4').style.display = 'none'; } else if(val == 2) { document.getElementById('div1').style.display = 'none'; document.getElementById('div2').style.display = 'block'; document.getElementById('div3').style.display = 'none'; document.getElementById('div4').style.display = 'none'; } else if(val == 3) { document.getElementById('div1').style.display = 'none'; document.getElementById('div2').style.display = 'none'; document.getElementById('div3').style.display = 'block'; document.getElementById('div4').style.display = 'none'; } else if(val == 4) { document.getElementById('div1').style.display = 'none'; document.getElementById('div2').style.display = 'none'; document.getElementById('div3').style.display = 'none'; document.getElementById('div4').style.display = 'block'; } } I have a php page that essentially builds a pay report in the form of a table. The php side builds the page properly, though it took some time to get the table rows onmouseover and onmouseout functions to work for row highlighting. Now the issue is the table row's onclick function. Here is what the outputed html looks like. Code: <head>
<script type="text/javascript" language="javascript">
function HideShowDiv(divID)
{
if (document.getElementById(divID).style.display == "none")
{
document.getElementById(divID).style.display = "block");
document.writeln("show "+divID);
}
else
{
document.getElementById(divID).style.display = "none";
document.writeln("hide "+divID);
}
}
</script>
<STYLE>
<!--
tr { background-color: transparent}
.normal { background-color: transparent }
.highlight { background-color: #dcfac9 }
//-->
</style></head>
<body>
<!-- Start the main body DIV tag -->
<div id="PageBodyFrame" align="center">
<table width="80%">
<tr><td colspan="4">Georgetown Youth Baseball Association</td></tr>
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" onClick="HideShowDiv('HD1');">
<td align="left">James Beach</td>
<td align="center">1 Game(s)</td>
<td align="right">$22.5 owed</td>
<td align="center"><a href="pay_report.php?t=l&l=3&act=check&u=1">Cut Check</a></td>
</tr>
<!-- First hidden div embedded in the next row of main table -->
<tr><td colspan="4">
<div id="HD1" style="display:none;">
<table><tr>
<td align="center">Game Date</td>
<td align="center">Teams</td>
<td align="right">Fee</td></tr>
<tr>
<td align="center">2011-08-06</td>
<td align="center">Marin vs LBF</td>
<td align="right">\$22.50</td>
</tr></table></div></td></tr>
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" onClick="HideShowDiv('HD3');">
<td align="left">John Carpenter</td>
<td align="center">0 Game(s)</td>
<td align="right">$1.5 owed</td>
<td align="center"><a href="pay_report.php?t=l&l=3&act=check&a=3">Cut Check</a></td>
</tr>
<!-- Second Hidden div embedded in table row -->
<tr><td colspan="4">
<div id="HD3" style="display:none;">
<table><tr>
<td align="center">Game Date</td>
<td align="center">Teams</td>
<td align="right">Fee</td>
</tr>
<tr>
<td align="center">2011-08-06</td>
<td align="center">Assigner Fee</td>
<td align="right">\$1.50</td>
</tr></table></div></td></tr>
<tr>
<td colspan="2" align="right">Some Association of Baseball</td>
<td align="right">\$24</td>
<td align="center"></td>
</tr>
</table>
</div> <!-- Closes the main body div container -->
In my javascript function, the writeln() calls are for testing to see if the even is even firing. but nothing gets written to the page. Any thoughts on this would be greatly appreciated. Basically I want the row with the users name to be clickable which will show the details in the hidden div associated with the user. Hey all, I want a background image of a tick to appear in each coloured box in my attached image onclick. When another coloured box is clicked I want the image to show in that one and then hidden in the previous one clicked. There should be no ticks shown on page load. I'm clueless as to how to do this. Here's my code for the image attached: Code: <div class="colour-picker"> <div class="tick-off" id="red" onclick="changeclass();"> </div> <div class="tick-off" id="blue" onclick="changeclass();"> </div> <div class="tick-off" id="black" onclick="changeclass();"> </div> <div style="float: right; margin-right: 6px;">Choose colour:</div> </div> CSS: Code: .colour-picker {
float: right;
margin: 0 10px 0 0;
line-height: 30px;
text-shadow: #292929 2px 1px 1px;
font-size: 15px;
color: #FFF;
padding: 0px;
height: 32px;
font-weight: normal;
}
.colour-picker #red {
background-color: red;
width: 20px;
height: 19px;
display: block;
margin: 6px 2px 8px 2px;
float: right;
}
.colour-picker #blue {
background-color: blue;
width: 20px;
height: 19px;
display: block;
margin: 6px 2px 8px 2px;
float: right;
}
.colour-picker #black {
background-color: black;
width: 20px;
height: 19px;
display: block;
margin: 6px 2px 8px 2px;
float: right;
}
.colour-picker .tick-off {
background-image: none;
}
.colour-picker .tick-on {
background-image: url(images/colour-tick.png);
background-repeat: no-repeat;
background-position: center center;
}
Can anyone tell me how to do it? Thanks! Adam hi all im trying to hide a div on page load, ive used this. Code: <script type="text/javascript">
function hideDiv(){
document.getElementById('sidebar').style.display = "none";
}
hideDiv()
</script>
and this in the body tag Code: <body onload="javascript:hideDiv()"> it works fine hiding the div named sidebar, problem comes when i try to then use an Onclick event to show the hidden div, it just wont show. can this be done? please help if you can this work has to be in soon Im pretty new to JS so Im sure this is not the best way to go about this but it'll do for now, any suggestions welcome I have a script to show and hide various divs based on a function & var. The problem im having is that when ANY of the variables ('hate', 'ok' and 'love') are passed all 3 different feedback forms ('FeedbackHate', 'FeedbackOk' and 'FeedbackLove') appear, not just the one I want. here is the JS: Code: function sitesurveyswitch(emotion) {
var e = emotion;
document.getElementById('site_survey_hate').style.backgroundPosition = '0px 0px';
document.getElementById('site_survey_ok').style.backgroundPosition = '0px 0px';
document.getElementById('site_survey_love').style.backgroundPosition = '0px 0px';
document.getElementById('FeedbackHate').style.display = 'none';
document.getElementById('FeedbackOk').style.display = 'none';
document.getElementById('FeedbackLove').style.display = 'none';
if (e == 'hate')
document.getElementById('site_survey_hate').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackHate').style.display = 'block';
if (e == 'ok')
document.getElementById('site_survey_ok').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackOk').style.display = 'block';
if (e == 'love')
document.getElementById('site_survey_love').style.backgroundPosition = '-80px 0px';
document.getElementById('FeedbackLove').style.display = 'block';
}
and here is the code related to this function: Code: <div id="siteSurveyBox">
<span id="site_survey_hate" onclick="sitesurveyswitch('hate');return false;"></span>
<span id="site_survey_ok" onclick="sitesurveyswitch('ok');return false;"></span>
<span id="site_survey_love" onclick="sitesurveyswitch('love');return false;"></span>
</div>
<div id="FeedbackHate" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>
<div id="FeedbackOk" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>
<div id="FeedbackLove" style="display:none; margin-top:-28px;">
FEEDBACK FORM IS HERE
</div>
I don't know a lot about Javascript... still learning.. I am trying to create a show/hide effect that displays an image based on the users text input. I have coded this before for a list/menu and it works fine. With this particular project there are too many selections to choose from to put in a list/menu. I am trying to use if and else if statements to make this work. With the code the way it is only the first function on the list works. I tried just using repeating if statements and only the last function on the list works. Here is the code: Code:
<script type="text/javascript" >
function showSample() {
if (document.getElementById('input').value='SW001') {
document.getElementById('SW001').style.display='block';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW002') {
document.getElementById('SW001').style.display='none';
document.getElementById('SW002').style.display='block';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW003') {
document.getElementById('SW001').style.display='none';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='block';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW004') {
document.getElementById('SW001').style.display='block';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='none';
}
else if (document.getElementById('input').value='SW005') {
document.getElementById('SW001').style.display='none';
document.getElementById('SW002').style.display='none';
document.getElementById('SW003').style.display='none';
document.getElementById('SW004').style.display='block';
}
}
</script>
<style type="text/css">
<!--
#main {
width: 400px;
margin-right: auto;
margin-left: auto;
height: 125px;
}
#imageArea {
float: right;
width: 200px;
}
#formArea {
float: left;
width: 200px;
height: 125px;
}
.image {
height: 125px;
width: 125px;
margin-right: auto;
margin-left: auto;
display: none;
}
#SW001 {
background: url(../_images/Colorfil/SW0001.jpg) no-repeat center center;
}
#SW002 {
background: url(../_images/Colorfil/SW0002.jpg) no-repeat center center;
}
#SW003 {
background: url(../_images/Colorfil/SW0003.jpg) no-repeat center center;
}
#SW004 {
background: url(../_images/Colorfil/SW0004.jpg) no-repeat center center;
}
#SW005 {
background: url(../_images/Colorfil/SW0005.jpg) no-repeat center center;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="imageArea">
<div class="image" id="SW001"></div>
<div class="image" id="SW002"></div>
<div class="image" id="SW003"></div>
<div class="image" id="SW004"></div>
<div class="image" id="SW005"></div>
</div>
<div id="formArea">
<form action="" method="get">
<input type='text' name="input" id='input' />
<input name="" type="button" onclick="showSample(this.selectedIndex)"/>
</form>
</div>
</div>
</body>
</html>
Any help would be greatly appreciated! this is what im trying to do: http://www.linkstraffic.net/programm...d/movebox.html using this code: http://www.linkstraffic.net/programm...nd/movediv.php heres my code. can someone fix it? html: [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>Chris MacDonald - Javascript Assignment 2</title> <link href="styles/styles.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="java.js"></script> <div id="header"> <div id="logo"><img src="images/beat.png" /></div> </div> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="http://beatthreads.bigcartel.com/category/tees">Shirts</a></li> <li><a href="#">About Us</a></li> </ul> </head> <body> <div id="content"> <a href="#" onclick="interv=setInterval('ShowBox()',3);return false;">Upcoming Designs</a> <div id="coverlogin"> <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique cursus dui, a venenatis diam consectetur fermentum. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent aliquam ornare nunc non semper. Morbi blandit lectus non elit ultricies ultricies. Fusce mattis purus et eros ultrices et facilisis nulla consequat. Vestibulum tellus libero, tempor vel tincidunt nec, consectetur non ante. Donec sed malesuada felis. Mauris lorem lorem, ornare a rutrum quis, rutrum in mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <br/> <p align="left"><a href="#" onClick="interv=setInterval('HideBox()',3);return false;">X</a></p> </div> </div> </div> <div id="footer"> <div id="footertext">Beat Threads - 2010</div> </div> </body> </html> [CODE] javascript: // JavaScript Document var hh=0; var interv; //we show the box by setting the visibility of the element and incrementing the height smoothly function ShowBox() { //Depending on the amount of text, set the maximum height here in pixels if(hh==40) { clearInterval(interv); return; } obj = document.getElementById("coverlogin"); obj.style.visibility = 'visible'; hh+=2; obj.style.height = hh + 'px'; } function HideBox() { obj = document.getElementById("coverlogin"); if(hh==2) { obj.style.visibility = 'hidden'; obj.style.height = '0.1em'; clearInterval(interv); return; } hh-=2; obj.style.height = hh + 'px'; } [CODE] Can someone fix this for me? ok trying to get a Div tag to show if something is True and hide if something is False JS Code: unction eToggle(anctag,darg)
{
var ele = document.getElementById('Module1');
var ele = document.getElementById('Module2');
var ele = document.getElementById('Module3');
var ele = document.getElementById('Module4');
if("module1" + "module2" + "module3" + "module4" <40)
{
div.id.Failed = "block";
div.Failed = "Failed";
}
else
{
div.style.Passed = "block";
div.Passed = "show";
}
}
HTML Code: <div id="Fail" class="hidden" style="display: none"><b><i>You will need to Repeat the Semester!</b> <br /> </div> <div id="Passed" class="hidden" style="display: none"> <img src="faces.png" width="50" height="50"><b><i> "Good Job you passed the Semster!"</b></div> Hi guys, im new to forums and need some help with my website. I have embed a flash player known as: JW player into my website and put it into a div. Now my problem is I want javascript to hide the div containing the flash player for atleast a few seconds to display a loading image.gif. How would I set this up? Im not to familiar about using javascript so im not sure if its even possible. Anways thx for any help ore suggestions related to this subject. Hello, I'm trying to have a div be hidden on loading the page but when you click a link it will show the div... here's code I have but it doesn't show when you click the link... <script type="text/javascript"> function show(){ document.getElementById(test).style.display="block"; } </script> <div id="test" style="display:none;"> <p>Some text</p> </div> <a href="#" onclick="show(); return false;">Show</a> Hi all, Check this code: PHP Code: <a>text</a> <div id="pkg">pkg</div> <div id="table_pkg">table_pkg</div> I'd like to show table_pkg and hide pkg when I click on <a>text</a>. How can I do? Thank you very much Code: <html>
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
var noticecontent = document.getElementsByTagName("div");
for(var x=1; x < noticecontent.length; x++) {
name = noticecontent[x].getAttribute("name");
if (name == 'noticecontent') {
if (noticecontent[x].id == thechosenone) {
noticecontent[x].style.display = 'block';
}
else {
noticecontent[x].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<center>
<div id="parentdiv">
<div id="expandall">OPEN/CLOSE ALL</div>
<div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div>
<div id="noticecontent1" name="noticecontent" class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div>
<div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div>
<div id="noticecontent2" name="noticecontent" class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div>
<div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div>
<div id="noticecontent3" name="noticecontent" class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div>
</div>
</center>
</body>
</html>
can anyone help on "OPEN/CLOSE ALL" to show or hide all .noticecontent divs Hello, I have the folowing code but it seems to be broken between "SM Decision Support" and "Incident and Request Management". Does anyone know how I resolve ?. The idea is when somebody opens the page all the sections are hidden/uncollapsed and the user can collapse individually each section with a click or by hitting the expand/collapse all link. ------------ Have placed code in attachment as too long for this section I have a script that is to hide specific divs and show the one called, or at least that is what I would like to happen. Right now when I click the link to show my div it hides my entire page and display the item in quetion. When I parse the return from document.getelementbytagname('div') it shows that I have 8 elements on my page. Great, but I only want to turn off the ones that match the following reg exp: "/^F\d+$/" the rest of the page I want to be left in tact. So far the rabbit trail that I am going down is working out so great, can you advise a script that will let me hide all div elements that match a specific pattern: /^F\d+$/ I have two samples that I am working from. The first: Code: <script language=javascript type='text/javascript'>
function showDiv(pass) {
var divs = document.getElementsByTagName('div');
alert(divs.length);
var regExp = "/^F\d+$/";
for(i=0; i<divs.length; i++){//
var obj = document.getElementsById(pass).item(i);
if (obj){
var divIdName = obj.id;
alert(divIdName);
}
//myregexp = /regex/
alert(i);
if(divs[i].id.match(pass))//if they are 'see' divs
{
alert(divs[i].id.value);
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="visible";// show/hide
else if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.divs[i].visibility = 'visible';
} else if (!divIdName.match(pass) && document.getElementById()== regExp){
if (document.getElementById)
divs[i].style.visibility="hidden";
else if (document.layers) // Netscape 4
document.divs[i].visibility = 'hidden';
else // IE 4
document.all.divs[i].visibility = 'hidden';
} else { }
}
} //end function
</script>
The second example is closer to what I want to do, but I haven't been able to figure out how to dynamically load the array "var ids=new Array();" so that I can automate the script. The code for this page: Code: <script language="JavaScript">
//here you place the ids of every element you want.
//var ids=new Array('F256','F257','F258','F259');// etc...
var divs; // = document.getElementsByTagName('div');
var obj;
var divIdName;
var ids=new Array();
function switchid(id){
divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){//
obj = document.getElementsByName(id).item(i);
divIdName = obj.id;
alert(divIdName);
if(divIdName.match(/^F\d+$/))
{
ids[i] = divIdName;
}
alert(divs.length);
}
hideallids();
showdiv(id);
}
function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}
function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}
function showdiv(id) {
//safe function to show an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}
</script>
</head>
<body>
<div id="test" class="jobTitle_and_descriptionParent">
<div id="test1" class="jobListTitles">
<h5>Click one of the job titles to reveal the description on the right</h5>
<ol>
<li><a href="javascript:switchid('F256');">Breakfast Club Coordinator</a></li>
<li><a href="javascript:switchid('F257');">Bible Teacher</a></li>
<li><a href="javascript:switchid('F258');">Registration Coordinator</a></li>
<li><a href="javascript:switchid('F259');">Staff</a></li>
<li><a href="javascript:switchid('F260');">Assistant Counselor</a></li>
<li><a href="javascript:switchid('F261');">Drama Coordinator</a></li>
<li><a href="javascript:switchid('F262');">Special Services Assistant</a></li>
<li><a href="javascript:showDiv('F263')">Deans</a></li>
<li><a href="javascript:showDiv('F264')">Registration Workers</a></li>
<li><a href="javascript:showDiv('F265')">Counselors</a></li>
<li><a href="javascript:showDiv('F266')">Drama & Breakfast Club Assistants</a></li>
<li><a href="javascript:showDiv('F267')">Aunt & Uncle</a></li>
<li><a href="javascript:showDiv('F268')">Placement Coordinator</a></li>
<li><a href="javascript:showDiv('F269')">Activity Center Person</a></li>
<li><a href="javascript:showDiv('F270')">Social Worker/Psychologist</a></li>
</ol>
</div>
<div id='test3' class="jobDescriptions">
<div id="F256" name="F256" style="position: inherit; visibility:hidden;">
f256 Here
</div>
<div id="F257" name="F257" style="position: inherit;visibility:hidden;">
f257 Here
</div>
<div id="F258" name="F258" style="position: inherit;visibility:hidden;">
f258 Here
</div>
<div id="F259" name="F259" style="position: inherit;visibility:hidden;">
f259 Here
</div>
<div id="F260" name="F260" style="position: inherit;">
f260 Here
</div>
</div>
</div>
Been struggling with this for a couple days now and just not making any headway. Could you advise? Kevin Hi Chaps, I have a table of data, grouped by Month, Year and then ProjectID: - Month, Year - ProjectID - Job1 - Job2 The Month, Year row controls a collapsable row (ProjectID) and in turn, the ProjectID row controls the Job row(s). The problem I'm having is that if the Job row(s) is open, then 'close' the Month, Year row, the Job row(s) stay visible. How can I control all 'child' rows from the 'parent' Month, Year control? PHP Code: <?php $previousProject = ''; $previousMonth =''; if ($totalRows_rsInvPending > 0) { // Show if recordset not empty do { if ($previousProject != $row_rsInvPending['projid']) { if ($previousMonth != $row_rsInvPending['themonth']) { // for every Project, show the Project ID ?> <tr> <td colspan="18" class="highlight"><span class="blueBold"><a href="#" onclick="toggle2('month1<?php echo $row_rsInvPending['themonth'] ?>', this)"><img src="../../Images/plus.gif" border="0" /></a> <?php echo $row_rsInvPending['theyear'] ?> - </a></span><span class="blueNOTBold"><em><?php echo $row_rsInvPending['themonth'] ?></em></span></td> </tr> <?php $previousMonth = $row_rsInvPending['themonth']; } ?> <tr class="month1<?php echo $row_rsInvPending['themonth'] ?>" style="display:none"> <td colspan="20" class="highlight1"><span class="blueBold"><a href="#" onclick="toggle2('proj1<?php echo $row_rsInvPending['projid'] ?>', this)"><img src="../../Images/plus.gif" border="0" /></a> <?php echo $row_rsInvPending['projid'] ?> - </a></span><span class="blueNOTBold"><em><?php echo $row_rsInvPending['projtitle'] ?></em></span></td> </tr> <?php $previousProject = $row_rsInvPending['projid']; } ?> <tr class="proj1<?php echo $row_rsInvPending['projid'] ?>" style="display:none"> <td><?php echo $row_rsInvPending['jobname']; ?></td> Code: function toggle2(id, obj) {
var matchingElements = new Array();
if (document.getElementsByClassName) {
matchingElements = document.getElementsByClassName(id);
} else {
var elements = document.getElementsByTagName("tr");
for (i = 0; i < elements.length; i++) {
if (elements[i].className == id) {
matchingElements[matchingElements.length] = elements[i];
}
}
}
for (i = 0; i < matchingElements.length; i++) {
toggleDisplay(matchingElements[i], obj);
}
}
function toggleDisplay(element, obj) {
if (element.style.display == "none") {
element.style.display = "block";
obj.innerHTML = "<img src=\"../../Images/minus.gif\" border=\"0\">";
} else {
element.style.display = "none";
obj.innerHTML = "<img src=\"../../Images/plus.gif\" border=\"0\">";
}
}
I am quite confident with html but don't know javascript. I have some script to hide/unhide a div when clicking a link but it isn't quite what I want. Any help to modify it would be great. Code: <script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
I understand that this checks if a div is hidden or not and changes it. What I actually want is:- I have a string called $hiddendiv I want the function to hide the div $hiddendiv let $hiddendiv = (DivID) unhide(DivID) The code for this would be great. Thanks in advance. Ady |
|||||||