|
JavaScript - Hidden Text To Reveal On Certain Conditions..
Hi I have the following code. What I want to do is for certain questions to remain hidden inless certain conditions are met, then they appear to be answered. I am thinking with the <div> but not sure how. I also thought maybe with css but cant write a if statement in css so that a no go.
Please help. Code: <tr><td align="left">Do you own a Yorkie?<br /> <input type="radio" name="owner" value="yes" /> Yes <input type="radio" name="owner" value="no" checked="checked" /> No<br /> <!-- If answer is no above the below questions are hidden, if yes then they appear -->> <div id="breeders"> How many? <select name="qnty" size="1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5+</option></select> Are you a breeder? <input type="radio" name="breeder" value="yes" checked="checked" /> Yes <input type="radio" name="breeder" value="no" /> No</div></td></tr> JavaScript Code: I am using a onload within the form opening tag Code: function showDiv() {
if(document.forms[2].owner.value == "yes") {
document.getElementById('breeders').style.visibility = 'visible';
}
else
document.getElementById('breeders').style.visibility = 'hidden';
}
Similar TutorialsI am not sure how to word this but I want an effect similar to this:
http://www.sean.co.uk/a/webdesign/ja...disappear.shtm
http://www.dynamicdrive.com/dynamici...tchcontent.htm
Only is it possible to have multiple links in a list and have the content (when you click on the link to make the hidden content appear) appear below all the links--instead of right below the link that was clicked on? Because I noticed that the hidden content appears right below the link. It said on the first website that you could "Use CSS to change the position of the material to be displayed or hidden. You could use that to overlay instructions on the whole screen in a pop-up window, for example." Is that the same thing as what I am wanting to do? So how would I go about doing that? Anything similar to that would be great. i am new at all of this so sorry for any confusion. Also thanks in advance.. Is it possible to scrape displayed text you can't find in html source code ? The text shows up only when you click a link, but is still not visible in source code. That link has got a userid and is used as a variable in function ShowUserPhone(userid). If someone knows how to solve this mystery, please help. I added http://www.mediafire.com/file/9eo72u...wUserPhone.txt file as available .js source linked to that smart page. I've also put some comments there about URL original location. Here is the main function where the process started I guess: Code: function ShowUserPhone(userid){
var UserPhoneLink=document.getElementById("UserPhoneLink");
var UserPhone = document.getElementById("UserPhone");
if(document.images){
(new Image()).src="/pp-owners-list-click-counter.asp?UserId="+escape(userid)+"&counterType=detailsphone";
}
if (UserPhoneLink){
UserPhoneLink.style.display="none";
}
if (UserPhone){
UserPhone.style.display="block";
}
}
Please help. I need for the form to do the following: when age is greater than or equal to 65 enter "yes" in the hidden field when age is less than 65 enter "no" in the hidden filed return true Create a page processAge.htm that Writes the message on the page Hi name. At age # you may retire. or Hi name. At age # you are not ready to retire. Get to work. name is the name entered on the form. # is the age entered on the form. Java: Code: <script type="text/javascript">
/* <![CDATA[ */
function validateSubmission() {
var retValue = true;
if (document.forms[0].name.value == "") {
window.alert("You did not fill in one of the following required fields: Name or Age.");
retValue = false;
}
}
function checkForNumber(fieldValue) {
var numberCheck = isNaN(fieldValue);
if (numberCheck == true) {
window.alert("You must enter a numeric value!");
return false;
}
}
/* ]]> */
</script>
Body: Code: <form action="processAge.htm" method="get" onsubmit="makeList(); return validateSubmission(); "> <table frame="border" rules="cols" > <tr> <td valign="top"> <h2>Retirement</h2> <p>Name<br /> <input type="text" name="name" size="40" /></p> <p>Age<br /> <input type="text" name="age" size="40" onchange="return checkForNumber(this.value);" /></p> <p style="text-align: center"><input type="submit" value="Send" /><input type="reset" /> <input type="hidden" name="Retirement" /></p> </td></tr> </table> </form> Process Page: Code: <script type="text/javascript">
/* <![CDATA[ */
document.write("<h1>Your form has been submitted!</h1><h2>You entered the following data:</h2>");
var formData = location.search;
formData = formData.substring(1, formData.length);
while (formData.indexOf("+") != -1) {
formData = formData.replace("+", " ");
}
formData = unescape(formData);
var formArray = formData.split("&");
for (var i=0; i < formArray.length; ++i) {
document.writeln(formArray[i] + "<br />");
}
/* ]]> */
</script>
Thanks for any help! Hello, I use a iplocator api, which is javascript and gives out the city name, country and zipcode output PHP Code: <script language="JavaScript" src="http://www.somesite.com/somefile.js?key=apikey"></script> <script language="JavaScript"> <!-- document.write(ip2location_isp() + ', ' + ip2location_city() + ', ' + ip2location_zip_code() + ', ' + ip2location_net_speed()); //--> </script> my question or where i need help is that, i would like to output each of those as a hidden text field, so later i can store into mysq database with POST method from the hidden field. thank you in advance for your time n help Hey everyone, I'm a little new to JS coding but I am trying to design a simple system that I hope you can help me with. Basically, I want to know which is the best approach to this problem, or a direction where I can find info about it. The web application I designed uses basic PHP with basic JS and very basic Ajax which populates some divs with MySQL data. I went with a more "Web 2.0" approach instead of having a page for everything; I wanted to create dynamic pages. That's the gist of how the site works... OK. The issue is I have a table that is populated via a PHP script pulling from a MySQL database. This works fine. What I need is a way (via some clickable region on each <tr> element maybe?) to expand each table "row" to show a form to do some database updates. I don't need the full CRUD, just Read/Update and I am trying to write it as simple as possible. I do not need help on the form, I just need a direction or suggestion on how to accomplish the act of displaying the form, or call it the "expanding rows which reveal a web form for database interaction". I have seen some nice Ajax ways, but I am only a beginner when it comes to those techniques and am not in the habit of taking work from other people and using it on something I am creating (and I learn more this way too; the whole "teach a man to fish vs. give a man a fish") Option#1: What I was thinking was a way to "hide" the form which could already exist on every row, but then "show" it via an expand function? Option#2: Or maybe a generic hidden div that has the form on it, placed on the next row down when clicked,.. but then how would the form know which row to edit via MySQL? I think option 1 sounds better..... Again, I need help on making this form pop up on each table row. Any help or direction would be greatly appreciated. Sample code follows: Code: <table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Number</th>
<th>Address</th>
<th>Email</th>
<th>Alt Number</th>
</tr>
</thead>
<tbody>
//<!--Some PHP code that populates all table rows, every row is a row in the database like below-->//
<tr>
<td onclick="javascriptfunction(this)">foo</td>
<td>bar</td>
<td>data</td>
<td>from</td>
<td>MySQL</td>
<td>Database</td>
</tr>
<div id="PopUpForm">
<form id="form_id" name="form_name" action="foo.php" method="post">
<input type="hidden" name="id" value="//<!--Value of MySQL ID-->//"/>
<table title="myTable" style="margin: auto; display:hidden">
<tr class ="theader2"><th colspan="2">TEST TABLE</th>
</tr>
<tr>
<td class="header">Some Field: </td>
<td class="selector"><select name="foo" style="width: 150px;" id="foo">
<option value="" selected="selected">-- Select Value --</option>
<tr>
<input type="submit" value="Submit" class="btn"/>
</form>
</div>
//<!--Some PHP code ends here-->//
</tbody>
Any help would be greatly appreciated =) I want to be able to load a different background image depending on the time of day. I have the code below which does work for nanaimo-morning image if before 8 am and after 8 am it will load the nanaimo-daytime image. I have tried but I can't seem to add another condition where after 8 pm it will load another imaged called nanaimo-night.png Yes, I am rather new at this, any help is greatly appreciated <code> <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <script language="JavaScript"> function determineBackground() { var currentTime = new Date(); if (currentTime.getHours() < 8) { document.body.background = 'images/nanaimo-morning.png'; } else { document.body.background = 'images/nanaimo-daytime.png'; } } </script> </head> <body onload="determineBackground()"> </body> </html> </code> Hiya, Not sure how to put this, here goes: I'm trying to create a form to receive customer complaints. I'm fine with the basic form structure, but would like a drop-down box or radio buttons allowing the user to state which country in the UK they are emailing from. The options are, England, Scotland, Wales and N Ireland. For example, a user fills a form in with their complaint, and selects Scotland from the drop-down/radio buttons. When the users clicks on the submit button, the script should then send an acknowledgement email to the user, and send the form details of the user to the Scottish email address of the organisation. Likewise for England, Wales and N Ireland. I'm looking at doing this all client-side. Any help would be gratefully appreciated. Many Thanks Snarf1974 FYI: THIS IS NOT HOMEWORK! Hi all, I am trying to make an all-in-one function that can use local storage and provide 4 functions: (1) read data (2) write data (3) erase specific data (4) erase all data Here's the code block I have (with alerts in place of the local storage code for debugging): Code: var storage = function (name, value) {
if (name) {
if (value === null) {
return alert('erase');
} else {
if (value != null) {
return alert('write');
} else {
return alert('read');
}
}
} else {
return alert('nuke');
}
};
I want to use it like this: storage(); - erases ('nukes') everything storage('abc'); - reads data stored as 'abc' storage('abc', 'newvalue'); - stores 'newvalue' as 'abc' storage('abc', null); - erases data stored as 'abc' only It seems to work, but I have a funny feeling about trusting the difference between "==" and "===" to make it work. Am I wrong? Is there a real difference between == and === and am I doing this correctly? Thanks! -- Roger Hi! I am trying to check and see if three fields are empty and if they are then to alert the user saying to fill in one of the three fields. I tried this: Code: if (StreetNumber.value.length == 0) {
if (StreetName.value.length == 0) {
if (City.value.length == 0) {
alert("Please enter a street number, street name, or city.");
StreetNumber.focus();
return false;
}
}
}
and this: Code: if (StreetNumber.value.length == 0 && StreetName.value.length == 0 && City.value.length == 0) {
alert("Please enter a street number, street name, or city.");
StreetNumber.focus();
return false;
}
Neither one works. Not sure what I am doing wrong. Thanks in advance! Hey all, Okay, Here is what i would like to do. I have a calculator he http://www.nico-online.co.uk/calculator/calc1.html which after some help from Dormilich - got working! Now, I would like to set up some conditions, so if the use selected 'Mountainbike' then, the script will perform a different calculation to if they select the 'Rennrad' option. Okay, so I was thinking an If..else..if..else statement would probably be best after reading up This is what I have come up with: Code:
<script language="JavaScript">
function Framesize()
{
var a = parseFloat(BikeSizer.Insleg.value);
if(BikeSizer.Biketype.value = "Mountainbike")
{
b = (a * 0.572);
c = Math.round(b);
BikeSizer.FramesizeCM.value = c;
d = (a * 0.226);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
}
else if (BikeSizer.Biketype.value = "Trekking-, Reise- oder Cityrad")
{
b = (a * 5);
c = Math.round(b);
BikeSizer.FramesizeCM.value = c;
d = (a * 5);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
}
else{
b = (a * 10);
c = Math.round(b);
BikeSizer.FramesizeCM.value = c;
d = (a * 10);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
}
}
</script>
So, I'm not too sure if I can set the Menu values as recongnisable values! Here are the values I have: <select name="Biketype" style="font-size:11px;"> <option>Mountainbike</option> <option>Trekking-, Reise- oder Cityrad</option> <option>Rennrad</option> </select> Anyone out there offer any insight? Am I going horribly wrong somewhere? Apologies for the stupidness , I am quite new to JS! Thanks in advance Never mind. I found a solution to get it working. I still don't know why it occurred, but I don't have the time to fulfill my curiosity like I could when I was a teenager. Hi I am trying to write a JavaScript conditional statement for 4 conditions I currently have: Code: var teamId=obj.id.substring(0, 1);
var indx=obj.id.substring(obj.id.indexOf('_')+1);
var id=indx.substring(0, indx.length-1);
var anotherTab = (indx.indexOf('a') >= 0) ? id + 'b' : id + 'a';
var anotherTab2 = (indx.indexOf('c') >= 0) ? id + 'b' : id + 'c';
var anotherTab3 = (indx.indexOf('d') >= 0) ? id + 'b' : id + 'd';
document.getElementById(teamId+'tab_' + indx).className = 'selected';
document.getElementById(teamId + 'tab_' + anotherTab).className = '';
document.getElementById(teamId + 'tab_' + anotherTab2).className = '';
document.getElementById(teamId + 'tab_' + anotherTab3).className = '';
if (indx==id+'a')
{
show (teamId+'basketballInfo_'+id);
hide(teamId + 'soccerInfo_' + id);
hide(teamId + 'footballInfo_' + id);
hide(teamId + 'baseballInfo_' + id);
}
else if(indx==id+'b')
{
hide(teamId + 'basketballInfo_' + id);
show(teamId + 'soccerInfo_' + id);
hide(teamId + 'footballInfo_' + id);
hide(teamId + 'baseballInfo_' + id);
}
else if(indx==id+'c')
{
hide(teamId + 'basketballInfo_' + id);
hide(teamId + 'soccerInfo_' + id);
hide(teamId + 'baseballInfo_' + id);
show(teamId + 'footballInfo_' + id);
}
else
{
hide(teamId + 'basketballInfo_' + id);
hide(teamId + 'soccerInfo_' + id);
hide(teamId + 'footballInfo_' + id);
show(teamId + 'baseballInfo_' + id);
}
}
I am trying to turn one tab on and have the others turned off until another tab is clicked on. It works fine if I have all 4 conditions but I need to be able to also have 3, 2, and 1. What would be an easy way to do so? Need to append a hidden value to a floating div that is made via javascript. I tried the most obvious way but I am getting mismatch error in debug. .HTML Code: <input type="hidden" id="desc1" value="blah blah blah" /> .JS Code:
var item;
var image;
var description;
function one(){
item = document.getElementById("product1");
image = document.getElementById("i1");
description = document.getElementById("desc1");
expand();
}
function expand() {
//changes css of the div
item.innerHTML = "";
item.style.position = "absolute";
item.style.top = "27%";
item.style.left = "21.3%";
item.style.width = "952px";
item.style.height = "610px";
item.appendChild(image);
image.height = "300";
image.width = "400";
image.align = "left";
image.id = "cenimage";
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "form.html");
ifrm.setAttribute("frameborder", "0");
ifrm.setAttribute("scrolling", "no");
ifrm.style.width = 950+"px";
ifrm.style.height = 300+"px";
item.appendChild(ifrm);
// mismatch error !!
var x = description.value;
item.appendChild(x);
}
Hey guys! How are ya? Gettin' right to the point, I need a help! I already created a javascript code to hide my div when click on close "[x]". What I need to do is get it movin' around the website here's the code: it's between <head></head> Code: <script language=javascript type='text/javascript'>
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'hidden';
}
else { // IE 4
document.all.hideShow.style.visibility = 'hidden';
}
}
}
function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
}
</script>
and it's between <body></body> Code: <div id="hideShow"> <img src="../imagens/tela01CQ_07.jpg" alt="teste"/><a href="javascript:hidediv()">[x]</a></div> and it's in CSS Code: #hideShow {
position:absolute;
margin: 300px 110px;
}
thx! After searching the web most of the day, nothing has resolved this issue: Code: <!-- ALERT IS NEVER HIT -->
<html>
<input type="hidden" id="info" name="info" value="testInformation"/>
<script type="text/javascript">
var me = document.getElementById('info').value;
alert(me);
</script>
</html>
Code: <!-- ALERT SAYS "null" -->
<html>
<input type="hidden" id="info" name="info" value="testInformation"/>
<script type="text/javascript">
var me = document.getElementById('info');
alert(me);
</script>
</html>
Code: <!-- WORKS GREAT, BUT I NEED THE INPUT FIELD HIDDEN -->
<html>
<input type="text" id="info" name="info" value="testInformation"/>
<script type="text/javascript">
var me = document.getElementById('info').value;
alert(me);
</script>
</html>
Any idea how I can keep the input value "hidden" and have javascript still see the value? And yes, I've even tried using the "defer" method. Hi all I believe this to be a JS quesiton, but perhaps there is something here of CSS too? I have an "ecard" which is: - a <div id="outer_ecard"> wrapping an <iframe>... - is hidden by default (via a JS function that fires onload of the parent doc), .. - that gets its display and visibility turned on when the user clicks a link in the parent doc, ... - and then gets its display and visibility turned off again via a call to that same JS function in the parent doc that hid it in the first place by default. here is just the relevant snip of the hiding JS function - Code: elementToSet.style.display = "none"; elementToSet.style.visibility = "hidden"; everything works fine, *BUT* this issue: after the <div> disappears (the 2nd time, when the above snip is triggered in the iframe's parent via an onload event in the iframe doc)... then hyperlinks (in the parent file) that are geographically positioned underneath the <div id="outer_ecard"> do not work (i.e. they still think the ecard div is sitting on top of them (z-index:1). Can anyone advise me here? I need the links underneath the ecard to behave as though that div was never there. Thanks! -Govinda hello, This seems very basic, but I am running into a complication. What I would like to do is check if a certain div is displayed or hidden (really doesnt matter which) then set a map zoom level based upon that. here is my current function. function closeDirections(){ gdir.clear(); if(document.getElementById("river").style.display="none"){ map.setZoom(16); hideID('river'); showID('main'); } if(document.getElementById("main").style.display="none"){ map.setZoom(12); hideID('main'); showID('river'); } } Also here is a link to my map, just in case. map I have tried several variations, but from what I can tell with every instance, it only examines the first and never considers the second "if". I thought to rememdy this issue by using if/else...same issue. The only thing I could think is a nested if statements, but I am not sure what to use as a parent if. I have searched for a while, but cannot seem to find something like an .is_hidden(). Something that I could see if its true/false. Any help would be very much appreciated. Hello. The link below is the result of a product search on a website. It displays 2 results. However, the actual results (picture & information) that are displayed on the web page are not present in the "Page Source". For example, if you search the page source for the string '860723' (which is one of the product numbers visible on the web page) it is not there. What is going on here? It looks to me like dummy images & information in the HTML are first loaded by the browser, and then that dummy info gets replaced by the real information via a javascript function. Is that what's going on? http://www.lightsamerica.com/metro/s...mber:SL9469-8; I'm trying to retrieve that information by downloading the source in my PHP program. The problem is that the information I want isn't present in the source. It stands to reason that the information is somehow being sent to the browser because I can see it... any ideas? Thanks for your time, -Scott I have a hidden field whose value is a text string, "xyz". I want to write the value to the page so that the user can see it but not edit it. Can't I just use document.write(form.field.value)? Why isn't it working?
Hi guys, I have a javascript drop-down navigation bar on my website. While I am creating the website, the drop-down have no problem overlaying the javascript (embed with flash) photo gallery in Firefox. But when I tested it in IE, it did not overlay the javascript script and the drop-down was covered by the photo gallery instead. I tried methods like Z-index, using Div etc but it still doesn't work on Internet Explorer. I tested on Safari, Opera and Firefox doesn't seem to have any problem. Here is my links to my CSS use for my website. Really need help, have no idea what I did wrong. Can anyone advise me what to do? Thank you so much!!!! Much appreciated!!! Working Website: http://17thstop.sg/demo CSS Files: http://17thstop.sg/demo/styles.css http://17thstop.sg/demo/css/default.advanced.css http://17thstop.sg/demo/css/default.css http://17thstop.sg/demo/css/dropdown.css 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">
<!-- #BeginTemplate "index.dwt" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" ></link>
<link rel="icon" type="image/gif" href="animated_favicon1.gif" ></link>
<title>Four Musketters Studio</title>
<script type="text/javascript" src="gallery/swfobject.js"></script>
<!-- Menu CSS and JS -->
<link href="css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->
<!-- End of Menu and JS -->
</head>
<body>
<div id="content">
<h1><a href="index-blueprint.htm"><span>Four Musketeers</span> Studio</a></h1></div>
<!-- Start of Menu -->
<div id="contentmenu"><ul id="nav" class="dropdown dropdown-horizontal">
<li><a href="index.htm">Home</a></li>
<li class="dir">About Us
<ul>
<li><a href="about_us.htm">The Four Musketters</a></li>
<li class="dir">The Team
<ul>
<li><a href="darren.htm">Darren</a></li>
<li><a href="jon.htm">Jonathan</a></li>
<li><a href="hweek.htm">Hwee Key</a></li>
<li><a href="gavin.htm">Gavin</a></li>
</ul>
</li>
<li><a href="./">Clients</a></li>
<li><a href="./">Testimonials</a></li>
<li><a href="./">Press</a></li>
<li><a href="./">FAQs</a></li>
</ul>
</li>
<li class="dir">Services
<ul>
<li><a href="cne.htm">Event & Commercial Photography</a></li>
<li><a href="portrait.htm">Portrait Photography</a></li>
<li><a href="wedding.htm">Wedding Photography</a></li>
<li><a href="studio.htm">Rental of Studio</a></li>
<li><a href="./">Training & Consulting</a></li>
</ul>
</li>
<li><a href="gallery3/gllery.htm">Gallery</a></li>
<li><a href="./">Events</a></li>
<li><a href="./">Careers</a></li>
<li><a href="./" class="dir">Contact Us</a>
<ul>
<li><a href="contact.htm">Enquiry Form</a></li>
<li><a href="locationc.htm">Contact Us & Location</a></li>
</ul>
</li>
</ul>
</div>
<!-- End of Menu -->
<div id="content1">
<!-- #BeginEditable "BodyContent" -->
<div id="flashcontent">AutoViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash here.</a> </div>
<!-- #EndEditable -->
<script type="text/javascript">
var fo = new SWFObject("gallery/autoviewer.swf", "autoviewer", "100%", "100%", "8", "#181818");
fo.addVariable("xmlURL", "gallery/gallery.xml");
//Optional Configuration
//fo.addVariable("langOpenImage", "Open Image in New Window");
//fo.addVariable("langAbout", "About");
//fo.addVariable("xmlURL", "gallery/gallery.xml");
fo.write("flashcontent");
</script></div>
<div id="footer">
<p id="links">
Copyright © 2010 − Four Musketters Studio · Your Number 1 Choice.
</p>
<p>
<a href="#">Home</a>
<a href="#">Practice</a>
<a href="#">Attorneys</a>
<a href="#">Accidents</a>
<a href="#">News</a>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
</p>
</div>
</body>
<!-- #EndTemplate -->
</html>
|
|||||||