|
JavaScript - Hide/show The Following Div If Clicked?
I know that this can be done using .hide/.show... I don't know how to say this but if you'll look at the code:
Code: <div id="isclickable"> klasdlkasdklaklsjd <div id="weeeee"> trolololololol </div> </div> <div id="isclickable"> klasdlkasdklaklsjd <div id="weeeee"> trolololololol </div> </div> The div having an id of "weeeee" will show if id="isclickable" is clicked.. but not all divs having "weeeee" should show but instead what is inside the div "isclickable" is there a way to attain this without creating multiple scripts and ids? Thanks> Similar TutorialsHi All, I dont know how to display a HTML form when user click on a radio button. I have two forms in a page, when user click on a radio button that correspond to its form, the other form will be hidden. I have the idea to use if...else statement. But I dont know what code to be inserted in an onClick event. I also not sure whether this is logic or not, whether this can be done or not. Pls help me how to accomplish this. I attach the sample of my code here. Thanks in advance. Code: <html>
<head>
<script type="text/javascript" src="funIndex.js">
</script>
</head>
<body>
<h4>CPI</h4>
<!--Choose Single or Multiple Series-->
<form name="choose" action="main.html" method="post">
<input type="radio" name="series" value="single" onClick="what code to insert here"/> Single Serie <br/>
<input type="radio" name="series" value="multiple" onClick="what code to insert here" /> Multiple Series <br/>
</form>
<!--To calculate Single Serie-->
<script type="text/javascript">
if (document.choose.name.value == "single")
{
</script>
<form name="cpi">
<table border="1">
<tr>
<td colspan="2">Single</td>
</tr>
<tr>
<td>Country</td>
<td><select name="country">
<option value="Malaysia">Malaysia</option>
<option value="Thailand">Thailand</option>
<option value="Singapore">Singapore</option>
<option value="Indonesia">Indonesia</option>
</select>
</td>
</tr>
<tr>
<td>Current</td>
<td><select name="current" >
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
</select>
</td>
</tr>
<tr>
<td>Base</td>
<td><select name="base">
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
</select>
</td>
</tr>
<tr>
<td><input type="button" value="Enter" onclick="calIndex(document.cpi.current.options.selectedIndex,document.cpi.base.options.selectedIndex)">
</td>
</tr>
<tr>
<td>Index</td>
<td><input type="text" name="idx" id="idx2" /></td>
</tr>
</table>
</form>
<!--To calculate multiple series-->
<script type="text/javascript">
}
else if (document.choose.name.value == "multiple")
{
</script>
<form name="cpi2">
<table border="1">
<tr>
<td colspan="2">Multiple</td>
</tr>
<tr>
<td>Country</td>
<td><select name="country">
<option value="Malaysia">Malaysia</option>
<option value="Thailand">Thailand</option>
<option value="Singapore">Singapore</option>
<option value="Indonesia">Indonesia</option>
</select>
</td>
</tr>
<tr>
<td>Current From</td>
<td><select name="current" >
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
</select>
</td>
</tr>
<tr>
<td>Current To</td>
<td><select name="current" >
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
</select>
</td>
</tr>
<tr>
<td>Base</td>
<td><select name="base">
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
</select>
</td>
</tr>
<tr>
<td><input type="button" value="Enter" >
</td>
</tr>
</table>
</form>
<script type="text/javascript">
}
</script>
</body>
</html>
I want to show the div when a button is clicked. And the div will enter the page by sliding in (from the left of the page). When it got clicked again, the div will dissapear by sliding out from the page. Any suggestions? Thank You. hi, the following function shows a list of Counties populates by a PHP page: Code: $.getJSON('http://www.mypubspace.com/dashtest/countyjson.php', function(data){
var myhtml = '<ul>';
for(i=0; i<data.length; i++) {
myhtml += '<li>' + data[i].County + '</li>';
}
myhtml += '</ul>';
$("#countyshow").html(myhtml);
});
I would like to now, when a user clicks on a County, they are shown a list of pubs based on that County (so, I'll create a new PHP page WHERE County = 'County' or something?!) at the moment, when a user clicks on a County this function is passed: Code: function gopublist(event)
{
var stackLayout = document.getElementById('stackLayout').object; // Replace with id of StackLayout
stackLayout.setCurrentView('view4');
}
So, passing a value through so I can modify the SQL in the PHP page to filter the counties?! Please help? Dear Experts, I am very new for javascript so I am not even sure it is possible or not. The situation is like this, I have a page, which is actually a photo gallery with a table having 3 rows. First row shows the full screen size pic. Second row displays the Caption of that image and third row shows thumbnail view of six different images and the previous and next button. this is the sample layout: <table> <tr> <td colspan=8> Full size image will be shown in this cell </td> </tr> <tr> <td colspan=8> Caption of the image will be displayed here </td> </tr> <tr> <td>Previous Button</td> <td>Pic1 thumbnail view</td><td>Pic2 thumbnail view</td><td>Pic3 thumbnail view</td> <td>Pic4 thumbnail view</td><td>Pic5 thumbnail view</td><td>Pic6 thumbnail view</td> <td>Next Button</td> </td> </tr> My requirement is whenever the user click on the thumbnail view, which is in the 3rd row, the corresponding full screen size pic should open in 1st row of the table. As my photo gallery should be having more than 6 pics, lets take 20 pics, I want to show only 6 thumbnails in 3rd row at a time. Whenever user press "Next" button the 3rd row having 6 thumbnails should show other 6 thumbnails and previous button should show previous 6 thumbnails. I have a guess that it can be done using arrays, but how????? I have no idea. So please if you have any guesses it will be nice if you can post the entire code here as I will not be in a position to work on the hints given by you. Thanks in advance. Charles 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> 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 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>
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. 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? 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 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 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! 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 Im looking for a way to show hide text box on select option change PHP Code: <select name="letter_type" id="lt"> <option value="Registered">Registered</option> <option selected="selected" value="Unregistered">Unregistered</option></select> <input name="textfield7" id="regty" type="text" accesskey="1" tabindex="1" size="20" /> i wana show that text box if user select "Registered" from select option. any help would be great sorry for language errors. Thanks Hi Guys! I found one great solution for show/hide JQuery but i can't figure out how to make JS,css and html code all together, so please if anybody can make that code together for me and post me here! -Thanks in advance!!! here is code with example: http://jsfiddle.net/9XmVT/14/ Hi, fairly new to js. I have an image Code: <img src="uploading.png" /> I want to be able to have this hidden as default then when i submit my page <form action="handleupload.php"> it appears Hi I'm new to this forum, and i need help with something, i think its easy to make but... i am making video blogging website and i need someone to make Hide or show menu, for example: When someone click on: Season 1 (it should show) Episode 1 Episode 2 Episode 3... (and when someone click on episode it should show text (usually <iframe... )) ty in advance and i can share 5$ on paypal if you make it right and easy to use, if I have it post in wrong category just transfer topic pls Best regards I want some thing that when i click a button it shows a div then hides the button. I found this: Code: <script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
<input type=button name=type value='Show Layer' onclick="setVisibility('sub3', 'inline');";><input type=button name=type value='Hide Layer' onclick="setVisibility('sub3', 'none');";>
<div id="sub3">Message Box</div>
But it has two buttons that show and then hide the div, i only want one that shows the div then hides the button. Please help. 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 Alright, 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. |
|||||||