|
JavaScript - Auto Hide/unhide Via Javascript
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"> Similar TutorialsI 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'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... 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. 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. I'm creating an interface. RIght now I have an introduction video in a div that is hidden when you click off of it. What I want to happen is for the div to automatically hide when the video is finished playing, so the user doesn't have to click on anything. I've tried multiple things and the div still just stays there until you click off of it. Also, I'm looking to have the div only show up on the user's first visit. This is an urgent matter. Any help is appreciated. Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
// checks for first-time visitors
var firstvisit=getCookie("firstvisit");
if (firstvisit==null || firstvisit==""){
// here is where you would show the video container and start playing it
$('#mydiv').show();
document.getElementById('myvideoelement').play();
setCookie("firstvisit","true",365);
} else {
$('#mydiv').hide();
}
* * * *// check when video is finished, then hide mydiv
* * * *$("#myvideoelement").bind("ended", function() {
* * * * * $('#mydiv').hide();
* * * *$(".fancybox").fancybox();
* * * *});
});
</script>
script>
function getCookie(c_name){
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
*{
*x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
*y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
*x=x.replace(/^\s+|\s+$/g,"");
*if (x==c_name)
* {
* return unescape(y);
* }
*}
}
function setCookie(c_name,value,exdays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
</script>
<script type="text/javascript">
document.onclick=check;
function check(e){
var target = (e && e.target) || (event && event.srcElement);
var obj = document.getElementById('mydiv');
if(target!=obj){obj.style.display='none'}
}
</script>
Hello, I don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible. I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading: Code: <td class="smallDesc"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td> The Javascirpt is the Facebook Share button that basically allows users that have Facebook to share the page there currently on in their Facebook status by pressing the button, but if there not logged in it shows the login page, not a problem just continue the script. The current button i which is what i want to load automatically in the PHP file is located here, to test the functionalilty just click "Share" button in blue.. http://watch-movies-online.anyfilman...-Movie-17.html To summarise, i would like the above Javascript code to execute automatically upon pageload of this PHP file.. http://www.watch-movies-online.anyfi...p://google.com. If that could be done, and if this also is possible.. i would like for the "Share" button on the external page that is loaded from the Javascript code above to be clicked automatically so in effect when ever someone visits the PHP page after clicking "Click Here to Watch/Stream 2012 Online For Free" on this page it will automatically load the Facebook Share box, and automatically click the "Share" Button and then close the page if possible, but not required. Please feel free to ask any questions, i'll be happy to answer. Thanks in advance. Best Regards, Jonathan. Hi, I know very little about javascript, but it seems like what I need to do is simple, so I'm hoping someone here could help. In my online store.... I have a <div> called "prodprice" which houses a dynamically loaded price {tag_saleprice}. When the price is $0.00, I want the <div> to be hidden. When the price is anything other than $0.00, I want it to be visible. I have no idea how to code it, but it seems like the general logic would be something like this: <div id="prodprice" style="display:none">{tag_saleprice}</div> document.getElementById('prodprice') If prodprice="$0.00" .style.display = "block"; Am I totally off base? I just have no idea what to do and I have an impatient client! Thank you so much. New assignment. This is the code i have below already supplied now. not exactly correct yet but want to just get something to work from i need to insert an embedded script element in head section of document, purpose os to hide htmlcode and csscode frames to provide more screen space to hide 2 frames i am to change value of rows attribute in demo frameset to "100,1,*" id of the frameset object is demo Code: <title>Web Design Demo Control Buttons</title>
<link href="title.css" rel="stylesheet" type="text/css" />
<script src="demo.htm" type="text/javascript"></script>
<script type="text/javascript">
function showPreview(id,x,y) {
object=document.getElementById(id);
object.style.visibility="hidden";
top.FrameName.rows = "100,1,*";
}
</script>
just for your reference here is the demo part Code: <html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 6
Case Problem 3
Web Design Demo
Filename: demo.htm
Supporting files: css.htm, html.htm, title.htm
-->
<title>HTML Demo</title>
</head>
<frameset rows="100,210,*" id="demo" name="demo">
<frame name="title" id="title" src="title.htm" scrolling="no" />
<frameset cols="*,*">
<frame name="code1" id="code1" src="html.htm" />
<frame name="code2" id="code2" src="css.htm" />
</frameset>
<frame name="output" id="output" />
</frameset>
</html>
how does this look so far just remember the top code is what i am working on what should i change and add? suggestions anyone? I do not understand javascript at all. For about eight years I've had a UDM javascript menu on each of about 200 pages. It consists of a bunch of files that live in the top of my website and are called to each page by four lines of script. I have had only to edit appearance and links in one file. Instructions were to leave the others alone. The present version of the UDM menu is not free, as the old one was, and if I did buy it I'm not at all sure I'd be able to cope with it. Unless the names of the new files matched those of the old ones, I'd have to go in and edit each page individually. My problem is that IE9 doesn't display the menu, but does display its background, so there's a big beige block on the top left of every page. It looks bad. Would I be able to add to one of the files something like a conditional comment such as "If IE9 display none"? I would be truly grateful for any ideas that would help me fix this. My site is http://fay.iniminimo.com/ Thank you so much for your interest. Fay Hello, I have a shopping cart that calculates shipping on products based on weight. What I'm wanting to do is use Javascript to scan the contents of the visitors shopping cart for a particular word, as well as scan the quantity of the product in the cart. The condition: If the product name = some string I want to compare AND if the quantity < some number I want to compare. If these two conditions are met, I wan't to hide a shipping option called 'Free Shipping' once the user clicks the Estimate Shipping & Tax button. Here is a link to the websites cart.php page: All Commercial Furniture.com - Shopping Cart The platform we use is a little limited, so they don't give us access to their PHP files. Having to find a workaround for right now. Please let me know if you need any info. Any point in the right direction would be great. Thanks Hi to all, i have a javascript on my websute that i want to hide from all users , i want put it on a database mysql and recall it, in order to hide the code, how I can make? you have some idea? please help me. so basically i have javascript code that i've been trying to write. When "Other" is selected in the form's drop down box, its supposed to show the textarea, otherwise its supposed to stay hidden. I made a seperate HTML page so whomever views this didn't have to scroll through my other javascript code / html / php lol... anyhow here it is Code: <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
<script type="text/javascript">
function update2(f,s,h) {
var first=$('#'+f).val();
var hidden=$('#'+h);
if(first=="other") {
hidden.css('display','block');
else {hidden.css('display','none');}
}
</script>
</head>
<body bgcolor="#002E2F">
<form name="Manager" method="post">
<table border="0" style="background-color:#f4fbee" width="651" height="25" cellpadding="3" cellspacing="3">
<tr>
<td width="651"><font face="verdana" size="2">Please tell us how you were referred to RSIC</font></td>
</tr>
<tr>
<td width="651">
<form action="">
<select name="referred" id="referred" onchange="update2('referred','othertextarea','otherp');">
<option value="select" selected="selected">Select...</option>
<option value="AttendRSIC">Attended RSIC Event</option>
<option value="AttendIndus">Attended Industry Event</option>
<option value="RefRSIC">Referred by RSIC Staff / Board</option>
<option value="CurrentRSIC">Current RSIC business partner</option>
<option value="RefThird">Referred by a third party that does business with RSIC</option>
<option value="other">Other</option>
</select>
</td
</tr>
<tr>
<td width="651"><font face="verdana" size="2">If you selected "Other" on the previous field, please describe below</font></td>
</tr>
<tr>
<td width="651">
<p id="otherp" style="display:none;">
<textarea name="othertextarea" id="othertextarea" rows="5" cols="78">
</textarea>
</p>
</td>
</tr>
</table>
Any help is appreciated, thanks everyone! I'm making a multiple choice test, it all must be on the same page but the user must not be able to see the next question until they finish the first and click continue. Is this possible in Javascript by manipulating form object or something else? Thanks for any suggestions. hey i need help of all u guys.Actually the problem is that when i am loading this html page i just want the sign in page to appear and on click of cancel button i want a page to appear and on click of login button i get log in page..but the problem is that whenever i load my html page i get the sign in page and the page that is present on the cancel page..i tried showing and hiding and tried but i dnt know what more to do...please help me out.. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="styling.css"/>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
window.onload = function() { document.getElementById('first_div').style.display = 'none';}
function toggle(link, div1id, div2id)
{
var div1 = document.getElementById(div1id);
var div2 = document.getElementById(div2id);
if (div1.style.display == 'none')
{
$('#third_div').hide();
div1.style.display = 'block';
div2.style.display = 'none';
link.innerHTML = 'Login';
} else {
$('#third_div').hide();
div1.style.display = 'none';
div2.style.display = 'block';
link.innerHTML = 'signin';
}
}
function toggleImg(divId)
{
$('#first_div').hide();
$('#second_div').hide();
$('#third_div').show();
}
</script>
</head>
<body>
<div id="first_div" class="container">
<label for="username">
<span>Username:*</span>
<input type="text" class="text" id="user" placeholder="Username" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label for="password">
<span>Password:*</span>
<input type="password" class="text" id="pass" placeholder="Password" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label>
<input type="checkbox" name="remember" id="remember" class="checkbox" value="1" tabindex="3" /> Remember Me?
</label>
<label>
<input type="submit" name="submit" class="button1" id="doLogin" value="Sign in" />
</label>
</div>
<div id="second_div" class="container1">
<label for="username">
<span>
Username:*</span>
<input type="text" id="username" class="text" placeholder="Username" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label for="password">
<span>Password:*</span>
<input type="password" id="password" class="text" placeholder="Password" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label for="repass">
<span>Re-Password:* </span><input type="password" id="repass" class="text" placeholder="Re-password" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label for="email_id">
<span>Email-Id:</span><input type="text" id="email_id" class="text" placeholder="Verify email-id" maxlength="24" onFocus="this.style.borderColor='#B0E0E6';" onBlur="this.style.borderColor='#D3D3D3';"/>
</label>
<label><input type="submit" name="submit" class="button1" value="Submit" /></label>
</div>
<div id="third_div" class="image">
<img src="https://gs1.wac.edgecastcdn.net/8019B6/data.tumblr.com/tumblr_m2rdcqQLrA1qcb6kno1_500.jpg" />
</div>
<div class="header">
<button class="button_cancel" onclick="toggleImg('third_div');">Cancel</button>
<button class="button_sign" id="sign" onclick="toggle(this,'first_div', 'second_div'); return false;">Sign_in</button>
</div>
</body>
</html>
I wanted it according to this website https://www.tumblr.com Hey, I wonder how I'm going to do when it comes to the function of "show/hide" with JavaScript. My question is: I'm working on a web form. The following question is on the form: "Was ITK used?", and you're supposed to be able to pick "Yes" or "No" (by radio buttons), and this I've already fixed with no issues. But what I CAN'T do, for some strange reason, is that when you've clicked "Yes" on that question, it should appear another question: "Does customer have ITK in their network?", and when that comes up you're supposed to choose between "Yes"/"No" with radio buttons there as well. BUT if you click "No" on the first question (Was ITK used?), the other question (Does customer have ITK in their network?) shouldn't appear... Do you understand what I mean? How do I do this? Thanks in advance! Hi all, I am newbie to JS. I have the below task. Please advise. I have a result set of a query being displayed on a page. (5000+ rows). I have to provide a search capability, a search box which will enable to enter a position ID number and the entered position ID by the user should be selected from the results in a different color. Can you please help me with the above. Thanks in advance No Jquery plz As you can see that I want to remove this advertisement area (denoted by 1) via some java code. Now one can observe that this advert is hosted in the 'main-content' id & wrapped in 'inner' class. One cannot remove/hide id but CAN remove/hide the class which also will remove/hide the advert area placed within this class. Hi, I have three tables and I want show one table at one time. At the bottom of one table I need to have "next" and "previous" links to go other two tables.Can you please help me. Thank You. Hi, I have been developing a show/hide feature on my companies web site for some time. I have so much code as to where I am confused when I need to add another slide function. I have provided the URL below to the page where the code exists. http://www.pjm.com/markets-and-opera...assistant.aspx This is where I get lost with the huge amount of code that I have. If you take a look under the second slider named "Electricity Markets" there is another slider underneath named "Energy Market". I need to add three more sliders right underneath in the same format under "Energy Market" If anyone can assists with this that would be great. I should have organized the code a lot better, so now I get lost within the code now. BTW, the show/hide feature really does not display well in Firefox, please try in IE. Thanks! http://www.suttonsilver.co.uk/client...on-calculator/ Please visit the above website, Click on a Injury Type (try Minor Head Injury) on the right hand side (the human figure) Then click on the Calculate button and you will see a "calculated" figure appear, if you then click on another injury type then calculate it again, another Div will show. If two "You could be entitled up..." DIVs pop up, the previous, initially calculated 'result' should be removed and replaced by the new 'result'. Can anyone help me do this? Also.. as a side note, does anyone have a solution for when clicking calculate, two divs show up... (i.e. a 'result' and a 'contact us form'). Cheers Chris SS |
|||||||