|
JavaScript - Hide/unhide Div, Only 1 Allowed Open At A Time
Hi, I'm currently using some javascript to hide and unhide div's.
I've been messing around and searching about trying to find something which will only allow one of the hidden div's open at a time. When a new link is clicked, the last div open closes. Unfortuanatly I haven't found anything yet, so I am wondering if anyone on this board can help please? The script I am using is: Code: <script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
<style type="text/css">
.hidden {
display: none;
}
.unhidden {
display: block;
}
</style>
and the mark-up: Code: <p><a href="javascript:unhide('test1');">Testing 1</a></p>
<div id="test1" class="hidden">
<p>Testing :)</p>
</div>
<p><a href="javascript:unhide('test2');">Testing 2</a></p>
<div id="test2" class="hidden">
<p>Testing again :)</p>
</div>
I hope I have been clear, appreciate any help given. Similar TutorialsHello... i am very noob in JavaScript, but... i have been searching for this very long time now, and i have google after it for some hours now... So... i wanna to open late us say... "www.name.com/test.php" We will get to the domen, but in the adress will it still stay "www.name.com/index.php", how can i do this? I know this will work because i have seen it on one pages, but i don't remember the adress to the site, so can you please help me with this, and give me a example. I am new to Javascript, and so far I have been fortunate enough to get my code to work. What I have is a page full of hidden images, and checkboxes to unhide the desired images. What I would like is for the page to scrollintoview when that image is unhidden. I can do one or the other, but I can't seem to get them to work together. Any insight would be appreciated. Code:
<html>
<head>
<script type="text/javascript">
var divs1 = ["div1",];
var divs2 = ["div2",];
var divs3 = ["div3",];
var divs4 = ["div4",];
var divs5 = ["div5",];
var divs6 = ["div6",];
function visiblox(arrDiv, hs) {
var disp = (hs) ? "none" : "block";
for(var x = 0; x < arrDiv.length; x++) {
document.getElementById(arrDiv[x]).style.display = disp;
}
}
function chk(what, item) {
if(item) {
visiblox(what, false);
} else {
visiblox(what, true);
}
}
</script>
<style type="text/css">
<!--
.show
{
display: block;
}
.hide
{
display: none;
}
-->
</style>
</head>
<body bgcolor="PaleGoldenrod" onload="document.forms[0].reset()">
<p><center><img src="top_f_3.png" alt="Overall Performance" /></center></p>
<form name="myform" action="checkboxes.asp" method="post">
<center>
<input type="checkbox" onclick="chk(divs1, this.checked);"> | v1 |
<input type="checkbox" onclick="chk(divs2, this.checked);"> | v2 |
<input type="checkbox" onclick="chk(divs3, this.checked);"> | v3 |
<input type="checkbox" onclick="chk(divs4, this.checked);"> | v4 |
<input type="checkbox" onclick="chk(divs5, this.checked);"> | v5 |
<input type="checkbox" onclick="chk(divs6, this.checked);"> | v6 |
</center>
</form>
<div id="div1" class="hide">
<p> <center> <img src="f3_v1.png" alt="V1"/> </center> </p>
</div>
<div id="div2" class="hide">
<p> <center> <img src="f3_v2.png" alt="v2" /> </center> </p>
</div>
<div id="div3" class="hide">
<p> <center> <img src="f3_v3.png" alt="v3" /> </center> </p>
</div>
<div id="div4" class="hide">
<p> <center> <img src="f3_v4.png" alt="v4" /> </center> </p>
</div>
<div id="div5" class="hide">
<p> <center> <img src="f3_v5.png" alt="v5" /> </center> </p>
</div>
<div id="div6" class="hide">
<p> <center> <img src="f3_v6.png" alt="v6" /> </center> </p>
</div>
</body>
</html>
I'd like to know if there are ways to hide/unhide fields like radio options, text fields & others by using JavaScript. If so how do I do it? I do know I will have to check the form every time. Is there a need to refresh the form? Will the refresh clear all the selections? Things I'd like to hide: 1. Upon the selection of a radio option, another radio option will appear. 2. Upon the selection of a radio option, a text field will appear. Sorry for asking so many questions. But I just got to know that I need to use JavaScript in my application and I have no idea how and where to start, just bumping around, & hoping that God will drop some hint. I'm creating a website where I would like to create some kind of tabbed pages. To do that I wrote a javascript where I create an array of all the divs I use to create the pages and then sets them all on style="display: none;" except the one I clicked which should get style="display: block;" But I can't seem to get it to work... This is the script itself: Code: var state = 'none';
var i;
var divs = new Array();
divs[0] = document.getElementById(div1);
divs[1] = document.getElementById(div2);
divs[2] = document.getElementById(div3);
divs[3] = document.getElementById(div4);
divs[4] = document.getElementById(div5);
function showhide(layer_ref) {
divs[0].innerHTML="some contents";
for (i=0;i<divs.length;i++)
{
if(divs[i] == document.getElementById(layer_ref))
{
state = 'block';
}
else
{
state = 'none';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + divs[i] + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[divs[i]].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(divs[i]);
hza.style.display = state;
}
}
}
And this is part of the html of the page: Code: <head>
<script type="text/javascript" src="scriptShowHide.js"></script>
</head>
<div id="navigation">
<ul class="tabContainer2">
<li><a class="orange" href="#" onclick="showhide('div1');">Tab1</a></li>
<li><a class="orange" href="#" onclick="showhide('div2');">Tab2</a></li>
<li><a class="orange" href="#" onclick="showhide('div3');">Tab3</a></li>
<li><a class="orange" href="#" onclick="showhide('div4');">Tab4</a></li>
<li><a class="orange" href="#" onclick="showhide('div5');">Tab5</a></li>
</ul>
</div>
<div id="div1" style="display: block;">This is the content of tab1</div>
<div id="div2" style="display: none;">This is the content of tab2</div>
<div id="div3" style="display: none;">This is the content of tab3</div>
<div id="div4" style="display: none;">This is the content of tab4</div>
<div id="div5" style="display: none;">This is the content of tab5</div>
Can anyone help me plz, I've been staring at this for hours... hey all- i have been thinking about how i wanted to tackle this for a while now, and it is now "down to the wire"... so in my page i have two nav bars, one for js enabled and one for js disabled... they are styled accordingly (the js disabled is display:inherit; and the js enabled is display:none now i may need to tweak those styles after i get the script working, but that i can toy with after i get this working... anyways- my pages get the navbar inherited from a master page- so my thought was (to prevent loops) make a nav bar that had all js disabled links and a navbar that had all js enabled... then in my code i put in this script Code: <script type="text/javascript">
document.getElementById("Nav_Menu_JS_Content").style.display = "inherit";
document.getElementById("Nav_Menu_Content").style.display = "none";
</script>
now i am not amazing with js but i figured this would work... i get an error thrown every time though Quote: Microsoft JScript runtime error: Unable to get value of the property 'style': object is null or undefined now i assume (i am watching in debug) that this is because it is hitting the script before the rest of the page writes... but if i move the script below then the script never fires... ? here are the two nav bar ID's Note: i encapsulated the menus in <div>s and targeted the divs to ensure that there were no conflictions with my asp Code: <div id="Nav_Bar_Menu_Content" class="Nav_Menu"> ......... <div id="Nav_Menu_JS_Content" class="Nav_Menu_JS"> Can anyone help? i'm trying to find some references and resources on how to hide a link at a certain time and show the link again at a certain time. eg: from 12pm to 2pm the link will be display, users are able to click the link. after 2pm the link will not be displayed[hide] or the when click on the link error message will be shown. plz help. thanks! Can someone help me please? here is the script i'm working on: <script type="text/javascript"> function open_win() { window.open("Blank"); } </script> </head> </script> <form name = "myform"> <select name = "numberWindows" onchange = "openThem()"> <option value = "0">Choose....</option> <option value = "5">5</option> <option value = "10">10</option> <option value = "15">15</option> <option value = "20">20</option> <option value = "25">25</option> <option value = "30">30</option> <option value = "35">35</option> <option value = "40">40</option> </select> </form> <script type = "text/javascript"> var i; function openThem() { var val = parseInt(document.myform.numberWindows.value); for (i =0; i < val; i++) { open_win();} } </script> </body> </html> The script currently asks for the amount of tabs to open then opens them when the amount is selected. What i need to do is slow down the time between each open window to like 1000 millisecs i have tried using thread.sleep but then it only opens 1 tab. I am new to javascript and on my webpage i have a javascript for my rollover images and on the webpage i also have a form that i want validated and whenever i add validation in only one of the javascripts work how do i get both of them to work at the same time on the same page?
i have a form with several headings, then for each heading i have a list of items with a select box filled with numbers. For each heading a maximum of items is allowed, so the user should change the values in the dropdowns and not be allowed to continue until they are less than or equal to their maximum limit. To complicate this, there will be more than one headings on the page, but each one with a different name/id. Eg: Heading 1 Title 1 DROPDOWN1 Title 2 DROPDOWN2 Title 3 DROPDOWN3 So here the max is 10, so the values cannot exceed 10 Heading 2 Title 1a DROPDOWN1 Title 2a DROPDOWN2 Title 3a DROPDOWN3 Title 4a DROPDOWN4 So here the max is 10, so the values cannot exceed 14 thanks In some cases toPrecision(X) will result in an integer value, which is the expected result. However, it is typical in some fields to always follow the integer value with a decimal and zero (i.e 522 --> 522.0). Technically, this would be incorrect since it would imply an extra digit of precision that does not exist. However, this is often disregarded, provided there are sufficient number of digits (i.e. precision of 5+). That said, is there any way to force an integer result to have a trailing ".0"? Using Javascript / jQuery, I'm trying to produce a series of dropdowns ("<select>") that have their options filtered as the user selects from them. For example: DROPDOWNS Field 1: - value_1 - value_2 Field 2: - value_3 Field 3: - value_4 - value_5 COMBINATIONS - value_1, value_3, value_5 - value_1, value_3, value_4 - value_2, value_3, value_5 When a user selects Field 3 - value_4, the unavailable options will be removed - ie, Field 1 - value_2 (there is no combination that allows value_2 and value_4 to be selected together). I have an array of the allowed combinations like this (although I can tweak the structure if necessary): Code: var combinations = [["value_1", "value_3", "value_5"], ["value_1", "value_3", "value_4"], ["value_2", "value_3", "value_5"]]; When a option is changed all the current entries are removed and only the allowed combinations added back in. Where I'm struggling is with how to find which combinations are acceptable based on what has already been selected. I'd really appreciate any pointers or just a fresh perspective on this because I seem to be going round in circles! Thanks! Hi, I want to restrict opening my popup window if it is already opened. For simple scenario, it is quite possible to do but in my case -- 1) When parent page is opening popup window, it is getting refreshed (required from client for some reason). 2) Once submit button is clicked from popup window, again parent page is getting refreshed (again its a requirement from client side). With these 2 conditions, I lost my saved value from variable and hence new popup is keep coming when the action is same. Currently I am using below code to open popup [CODE] function OpenWindow() { if(winPop && !winPop.closed) { alert("Popup is already open"); } else { winPop = window.open('MyPopupPage.aspx'); } } [CODE] Please help me to get rid of this problem. Thanks in advance. - Bhasker Hi Code: var err_str="";
function validate_grid(value,id,ind)
{
$("#result").html(" ").show();
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
alert(err-str);
here ind==1 is from_time and ind==2 is to_time,i need to validate time as to_time must be always greater than from-time,if condition fails an alert msg should populate.time format is[05:00]as it is in string format im unable to do the validation for it.(ex:from-time=08:00 to-time=07:59 condition fails) thank you. Hello im using dhtmlx grid in this cells i have from time and to time (i.e ind==1 and ind==2) i need to validate time where to-time must be greater than from-time else it should alert an message,i have writeen a normal Regular expression for the time validation.as the time is i string format i.e[05:00],please can any one send me code for that. Code: var err_str="";
function validate_grid(value,id,ind)
{
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
hi im using dhtml xgrid where i need to do validation for time ,(from-time and to-time i.e ind==1 and ind==2 ) to-time must be greater than from-time else i need to alert a message to-time must be greater than from-time. can any one send me the code for it time format is[05:00]. Code: var err_str="";
function validate_grid(value,id,ind)
{
$("#result").html(" ").show();
if(ind==1 || ind==2)
{
var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
if(!patt.test(value))
{
mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
if(err_str!="")
err_str+="\n"+(ind+1)+".Enter numbers and : only..";
else
err_str=(ind+1)+".Enter numbers and : only";
return false;
}
else
{
mygrid.setCellTextStyle(id,ind,"background-color:white;");
return true;
}
}
}
I do write some php, but have not much idea about JavaScript. I use window.open to open 10 pages simultaneously. I prefer to open them with a time delay from each other to put less load on the target server. This is my code with no delay. (I played around with setTimeout but can't get it to work.) PHP Code: <a href='http://www.".$new[9]."' onclick="window.open('http://www.".$new[0]."/'); window.open('http://www.".$new[1]."/'); window.open('http://www.".$new[2]."/'); window.open('http://www.".$new[3]."/'); window.open('http://www.".$new[4]."/'); window.open('http://www.".$new[5]."/'); window.open('http://www.".$new[6]."/'); window.open('http://www.".$new[7]."/'); window.open('http://www.".$new[8]."/')\" target='new300/'>Open 10</a> 1 down vote favorite I do have the countdown script (see link below) to display the time between current time and the date given in real-time. However, I want to achieve to display the time difference between a given start and end time. Right now, it calculates from the current server time to the end time. I want to be able to set up my own start time and end time. Here is what I have: http://jsfiddle.net/BgEtE/ thank you for help I'm not really a Java writer, so I don't know how to do this myself, though I imagine it would be pretty simple. I am looking to add a script to a webpage that allows users to input a time manually, and have it converted to GMT/Zulu time and display the converted time. I have seen a lot of time zone conversion scripts online, but they all just convert whatever the current system time is to another time zone. I am looking for a script that allows users to convert a time and show the zulu time, for times other than the current time. The time zone the inputed local time would be in is +4:30 (Kabul). I don't really care about style or aestehtics, just a simple script I can insert into a web page to have a time input field. The converted output time can appear in another field, a popup bubble, etc, again style isn't really an issue. It's really just to help people in my job who need to know what the GMT/Zulu time was for certain local times after the fact. One would think it shouldn't be that hard to just subtract 4:30 in your head, but apparently it is. Sorry if just asking for code outright like this is frowned upon. hi, can some one help me how to get the time and date difference? given two time and date with the following format like in textbox A: 2011-05-03 17:35:47.0 and textbox B: 2011-05-03 16:35:47.0 then the output would be: 0 days, 1 hour, 0 minutes, 0 seconds regards, verve This is my first time doing JavaScript I don't what I did wrong here, but the problem its not showing up the current date and time. Code: <script language = "JavaScript" type="text/javascript">
now = new Date();
localtime = now.toString();
utctime = now.GMTString();
document.wite("<b>localtime</b>" + localtime + "</br>");
document.write("<b>utctime</b>" + utctime);
</script>
This is what supposed to look like I have tried using different browser chrome,IE9,Maxtor, and Opera my OS is Win7 |
|||||||