JavaScript - Grey Out Box On Form Not Resetting Properly

Hello there,

Can some one gimme source code for greying out a button on php page.
In my application i have one play button and one stop button in the html form. If i click play button it will update database with play and invoke a script. similarly with stop.
so while they are being played i want this play button to be greyed out.
or

is there any way that i can only show stop button while playing and play button while not playing the files.

HELP PLZZZZZZZZ

I was changing the code on the Grey Box script to pop up only the first time someone came to the page.


The original code that controls this is:

Code:

AJS.AEV(window, 'load', function() {GB_show("The Kinniebrew Group", "http://therdkgroup.com/id18.html"); 											
	 }
	 );

and to make it work just the first time someone visits the page I changed to read:

Code:

  AJS.AEV(document, 'load', function() {
          // look for our strangely named cookie: 
		  if ( document.cookie.indexOf("zz1rr_xxG") < 0 )
          {
              // if not found...
              document.cookie = "zz1rr_xxG=yes"; 
              // set it for next time...without expire so session only
              // and show the box:
              GB_show("The Kinniebrew Group", "http://therdkgroup.com/id18.html");
          }
      }
	  )

I had this line of code working but it doesn't now after I did something to it. does anyone have an idea how I can modify this to make it work?

My google maps is showing a grey box and no map?!

Please help me, I got my code from he http://www.powerhut.co.uk/googlemaps/custom_markers.php and uploaded everything to the right place but it's just grey?!

http://79.170.40.235/affordableappli...uk/contact.php

I have a site using Grey Box pop up ( http://therdkgroup.com/) . It automatically pops up when you go to any of the 5 pages on the site.

Is it possible to add a cookie to it so that it only pop up the first time someone comes to any one of the pages? If so, can you point me in the right direction on how to solve this??

So I've been working on this code for the day, and when I choose one radio button and click convert, it gives me the value and disables the box that shows the value. When I go to click the other radio button to do another conversion, it freezes up. I really am just trying to figure out how to make this code functionable whether you choose one radio button and do the conversion, or you want to do the other conversion without stalling out. I can't seem to find the bugs since I'm a newbie.

Code:

var $ = function (id) {//enables you to use $ instead of all the blah blah blah nonsense
    return document.getElementById(id);
}


var temperature = function (){//This function converts the value the user provides


if($("to_celcius").checked == true)//if checked, then do this conversion
	{
		$("degrees_celcius").disabled = true;
		var far = parseFloat($("degrees_fahrenheit").value );
		
		if(isNaN(far))//if its not a number then it gives the alert to enter a valid temperature
		{
		alert("Please enter a valid temperature.")
		return;
		}
		
		
		var far_cel =Math.round((far-32) * 5/9);//conversion assigned to variable
		
		$("degrees_celcius").value = far_cel;
		
		
		}else  ($("to_fahrenheit").checked ==true)//if the other radio button isn't clicked, then this conversion
		{
		$("degrees_fahrenheit").disabled = true;
		var cell = parseFloat($("degrees_celcius").value);
		
		if(isNaN(cell))//if its not a number then it gives the alert to enter a valid temperature
		{
		alert("Please enter a valid temperature.")
		return;
		}
		
		var cel_far = Math.round(cell * 9/5 + 32);
		
		$("degrees_fahrenheit").value = cel_far;//conversion variable equals the value of text box "degrees_fahrenheit"
		
	}
}

function reset()//resets the text box fields
{
	$("foofoo").reset();
	
}

	
window.onload = function(){//handles all the onload activities
$("convert").onclick = temperature;
$("convert").onchange = temperature;
//$("to_celcius").onchange = reset;
//$("to_fahrenheit").onchange = reset;

}

Code:

<body>
<form id="foofoo" name="foofoo">
  <div id="content">
    <h1>Convert temperature</h1>
	
       
    <input type="radio"   name="conversion_type" id="to_celcius"  />From Fahrenheit to Celcius<br />
    <input type="radio"   name="conversion_type" id="to_fahrenheit"  />From Celcius to Fahrenheit<br />
	
	
	
	
    <br />
     
    <label>Degrees Fahrenheit:</label>
    <input type="text" id="degrees_fahrenheit" name="cat"  class="disabled"  /><br />
    <label>Degrees Celcius:</label>
    <input type="text" id="degrees_celcius" name="poo"   class="disabled" /><br />
    <br />

    <input type="button" id="convert" value="Convert" /><br />
    <br />        
  </div>
   </form>  
</body>

Hello everybody,

how can i grey out a whole page, and focus attention on a div only?
are there any good scripts?

please help.

EDIT:

actually what i want to do is: click a button grey out all my page and show a loading gif load, thru ajax, content from external source turn off grey and loading gif update current page content.

Hello all,

First time back here in a while, but I'm trying to get proficient in JS.

I want to make my input element reset its value attribute to blank, which is originally set to "your e-mail". You know the effect you see on forms that have text in them, then with the onclick attribute, you can clear the text in the box.

So, after looking around trying to find out what to do, here's what I've attempted.
HTML
Code:

<form id="emailbox" name="form1" method="post" action="">
    	<div>
            <input type="text" name="go" id="go" value="your e-mail" onclick="removeText()"/>
            <input type="submit" value="Join" />
        </div>
    </form>

JS:
Code:

<script type="text/javascript">
function removeText(){
	var form = document.getElementById['emailbox'];
	var name = form.elements['go'].value;	
}
</script>

What do I do next to complete my objective?

I have a page where a user can select (via check boxes) several categories. Each category is related to a set of possible options (radio buttons) that have numeric values. When one of the options (radio button) is selected, the amount will appear in a text box (input type="text"). The numeric value in the text box will update depending on what category options are selected. However, when the checkbox is deselected, the radio boxes in the <div> are not displayed and I need to remove (reset) the radio button values from the value seen in the text box.

Here are some snippets to hopefully expound on what I would like to do.

Code:

<script type="text/javascript"> 
var amountNotice = 0;

function notice(options)	
{						
	amountNotice = parseInt(options);
	calculateTotal(); 
}	

function calculateTotal()
{
	totalAmount = amountNotice;
	document.getElementById("total").value = totalAmount.toFixed(2); 	
}	 

function toggle(chkbox, group, associatedValues) 
{ 
    var visSetting;
	if (chkbox.checked == true)
	 	document.getElementById(group).style.display =  "inline"; 
	else
	{
		document.getElementById(group).style.display =  "none";
		uncheckRadio(associatedValues);
	} 
    document.getElementById(group).style.display = visSetting; 
} 

function uncheckRadio(associatedValues)
{

	for(var i = 0; i < document.getElementById(associatedValues).length; i++)
	{
		if (associatedValues[i].checked == true)
			associatedValues[i].checked == false;
	}
		calculateTotal(); 
}
</script>


<style type="text/css"> 
	#groupNotice {display: none} 
</script>
.
.
<input type="button" onClick="calculateTotal()" value="Calculate"><br>
<div id="groupNotice">
	<b>Required Notice</b>:&nbsp;&nbsp;
	<input type="radio" name="Note" onClick="notice(this.value)" value="0"> None
	<input type="radio" name="Note" onClick="notice(this.value)" value="2"> Prior Day ($2)
	<input type="radio" name="Note" onClick="notice(this.value)" value="2"> Prior Call ($2)<br>
</div>
<form name="CostEstimate" method="post" action="calculator.php">
<input type="checkbox" onclick="toggle(this, 'groupNotice', 'Note'); display('groupNotice','inline')" name="Notice" value=""> Notice
</form>

Everything works except for my uncheckRadio function - not sure if I am identifying the elements correctly, or if I need a totally new approach. My thinking is that the function must be accessed by the checkbox onClick call. Previously I had tried calling uncheckRadio from the notice function before I recognized is was not an appropriate location. Any assistance is greatly appreciated.

- c

Hello everyone,

I am completely new to javascripts. I want to have a count down timer on my webpage. I already found a script, but it does not do everything I want it to do.
I couldn't find a script that did everything I need. I need it to do the following things:

- Use the time zone GMT+1
- Reset everyday at a specific time
- From 15:00 till 17:30: A countdown (so it shows 2 hours and 30 minutes from the start and count's down to 0 (which will be 17:30)
- During 15:00 till 17:30 it shows: "The game is playing"
- Once it is 17:30 I want it to reset and countdown till the next day 15:00
- From 17:30 till 15:00 next day it says: "The game will start in"

So it is actually 2 countdown clocks in one javascript. One countdown from 15:00 to 17:30 (whilst the game is playing) and one directly starting after it from 17:30 till 15:00 next day. But both are displayed on the same spot.
The countdown will be in text. No buttons or fancy images etc.

Hope you can help me out. Thanks

Code:

<html>
<head>

<script type = "text/javascript">

function getSeconds() {
var now = new Date();
var time = now.getTime();  // time now in milliseconds
var midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0); // midnight 0000 hrs
// midnight - change time hh,mm,ss to whatever time required, e.g. 7,50,0 (0750)
var ft = midnight.getTime() + 86400000;  // add one day
var diff = ft - time;  
diff = parseInt(diff/1000);
if (diff > 86400) {diff = diff - 86400}
startTimer (diff);
}


var timeInSecs;
var ticker;

function startTimer(secs){
timeInSecs = parseInt(secs);
ticker = setInterval("tick()",1000); 
tick(); // to start counter display right away
}

function tick() {
var secs = timeInSecs;
if (secs>0) {
timeInSecs--;
}
else {
clearInterval(ticker); // stop counting at zero
//getSeconds();  // and start again if required
}

var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
var result = ((hours < 10 ) ? "0" : "" ) + hours + " hours " + ( (mins < 10) ? "0" : "" ) + mins
                  + " minutes " + ( (secs < 10) ? "0" : "" ) + secs + " seconds";
document.getElementById("countdown").innerHTML = "The game will start in " + result;
}


</script>

</head>

<body onload = "getSeconds()">

<span id="countdown" style="font-weight: bold;"></span>

</body>
</html>

Reply With Quote




01-07-2015, 10:11 PM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts

First of all, move your JavaScript where it belongs: Just before the </body> tag. Then you don't need stuff such as onload='....'

Here's my attempt at it: Code:

<!DOCTYP html>
<html>
<head>
    <title>Game play starts at 17:30</title>
</head>

<body>
Other stuff...<br/><br/>

<span id="countdown" style="font-weight: bold;"></span>

<br/><br/>Other stuff...<br/><br/>

<script type="text/javascript">
var timer = null;

function tick( )
{
    var msg = document.getElementById("countdown");
    var now = new Date();
    var yr = now.getFullYear(); var mon = now.getMonth(); var dy = now.getDate();
    var startat = new Date(yr,mon,dy,15,0,0);
    var endat = new Date(yr,mon,dy,17,30,0);
    if ( now.getTime() < startat.getTime() )
    {
        msg.innerHTML = "The game will start at 17:30";
    } else if ( now.getTime() > endat.getTime() )
    {
        msg.innerHTML = "The game started at 17:30";
    } else {
        var sec = Math.floor( ( endat.getTime() - now.getTime() ) / 1000 );
        var min = Math.floor ( sec / 60 );
        sec %= 60;
        var hr = Math.floor ( min / 60 );
        min %= 60;
        if ( min < 10 ) min = "0" + min;
        if ( sec < 10 ) sec = "0" + sec;
        msg.innerHTML = "The game will start in " + hr + ":" + min + ":" + sec;
    }
}
tick(); // immediate start
timer = setInterval( tick, 1000 ); // every second
</script>

</body>
</html>

I am having trouble with figuring a way to set my loop up to reset values of the different coin values. Example, when I put in 78, and click calculate, it tells you how much of each coin would be given back. My problem is that I set it up and run it, but when I put different values in back to back to calculate, some of the fields don't reset. I just need some ideas or logic behind what I need to do.

Code:

var change_out = function(){

	
	do {
	var money = document.getElementById("cents").value;
	
	if (money >= 25)
	{
	var quarters = parseInt(money / 25);
	var foo = parseInt(money - (quarters * 25));
	document.getElementById("quarters").value = quarters;
	
		
	
			if (foo >= 10)
			{
			var left = parseInt(foo / 10);
			var wow = parseInt(foo - (left * 10));
			document.getElementById("dimes").value = left;
			if(wow==0)return;
		
			
			
					if (wow >= 5)
					{
					var dumb = parseInt(wow / 5);
					var pop = parseInt(wow - (dumb * 5));
					document.getElementById("nickels").value = dumb;
					document.getElementById("pennies").value = pop;
			
					}else{document.getElementById("pennies").value = wow;}
					
			
			}else if (foo >= 5){
				var dumb = parseInt(foo / 5);
				var pop = parseInt(foo - (dumb * 5));
				document.getElementById("nickels").value = dumb;
				document.getElementById("pennies").value = pop;
				
				}else{document.getElementById("pennies").value = foo;}
			
			
	
	}else if (money >= 10){
		var left = parseInt(money / 10);
		var wow = parseInt(money - (left * 10));
		document.getElementById("dimes").value = left;
		
				if (wow > 5){
				var dumb = parseInt(wow / 5);
				var pop = parseInt(wow - (dumb * 5));
				document.getElementById("nickels").value = dumb;
				document.getElementById("pennies").value = pop;
				document.getElementById("quarters").value = "";
		
				}else{document.getElementById("pennies").value = wow;}
				
	}else if (money >= 5){
		var dumb = parseInt(money / 5);
		var pop = parseInt(money - (dumb * 5));
		document.getElementById("nickels").value = dumb;
		document.getElementById("pennies").value = pop;
		document.getElementById("quarters").value = "";
		document.getElementById("dimes").value = "";
		
	}else{
	document.getElementById("pennies").value = money;
	document.getElementById("quarters").value = "";
	document.getElementById("dimes").value = "";
	document.getElementById("nickels").value = "";
	
	
	
	
	}
	
	
	
	}while(isNaN(money))}

Hi All,

I m newbie on JavaScript Coding.

I have Form where the there are 4 radio buttons.

Requirement is OnClick of Each radio buttons, some Div must Greyed out.

<input type="radio" name="cf_basic_type" value="Apartment" checked="checked" />Apartment
<input type="radio" name="cf_basic_type" value="Villa" />Villa
<input type="radio" name="cf_basic_type" value="Independant" />Independant house
<input type="radio" name="cf_basic_type" value="Plot" />Plot</div>

and Grey Part of Form is:

Area Size:<input type="text" name="cf_area_size" id="cf_area_size" /></div>
Plot Size:<input type="text" name="cf_area_length" id="cf_area_length" />
<input type="text" name="cf_area_width" id="cf_area_width" />


so for Plot radio selected the 'Area Size' must be greyed out but when others radio button selected is must be active

For Apartment radio selected or Villa radio selected, Plot Size must be greyed out.

Hope that makes clear.... Its very Urgent kindly help me with this..

Thnks in Advnce

Hello! I am playing with CSS3 transitions to show/hide a DIV element. The application will be for a newsletter which will allow a user to show and hide article content. There will be multiple articles.

I have a <DIV id="article1" class="content"> and the default height is 0px. When someone clicks the "show/hide article" link I set the height to 250px. A CSS transition on the content class (height) adds a smooth change from 0px to 250px.

I have rigged up a simple Javascript function so that when someone clicks the "show/hide article" link, it checks the height of the DIV. If the div is 0px, it should expand the content, if not, it should shrink it.

It works when you click the link the first time (i.e. the content div height is set to 250px and the transition works). But when you click it again, it does not set the height to 0px in order to hide the content.

I think there is something wrong with the validation of document.getElementById(articleID).style.height ?

Any ideas? Thank you!

Code:
Code:

<!DOCTYPE html>

<html land="en">
<head>


	<script language="javascript" type="text/javascript">

		
		function showhideContent(articleID) {
			
			
			if(document.getElementById(articleID).style.offsetHeight = '0px'){			

				document.getElementById(articleID).style.height = '250px';
									
			}


			else{
			
				document.getElementById(articleID).style.height = '0px';

			}
	

		}

	</script>



	<style type="text/css">
		p {
			margin:10px;
			font-size:12px;				
		}
		h1 {
			margin:10px;			
		}
		body {
			background-color:lightgrey;
			font-family:Arial;
			font-size:12px;			
		}
		#newsletter {
			width:500px;
			border:solid;
			border-width:1px;
			border-color:black;		
			background-color:white;
			text-align:left;
			font-size:11px;	
		}
		#header {
			height:125px;			
		}
		#footer {
			height:50px;
			background-color:#330033;			
		}
		#headerbar{
			background-color:lightblue;	
			height:35px;
			overflow:hidden;
			font-size:12px;
			-webkit-transition: background-color 1s;
		}
		#headerbar:hover{
			background-color:#3399FF;

		}

		.content{
			background-color:white;	
			height:0px;
			overflow:hidden;
			-webkit-transition: height 0.5s ease-in-out;
		}		
		#expand{
			background-color:red;
		}
	</style>

</head>

<meta charset="UTF-8">

<body>
	
	<center>
	<div id="newsletter">
		
		<section id="header">			
			<img src="newsletter_header_test.jpg">
		</section>
		

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis augue, nec cursus metus. Proin dictum, 

velit vel vulputate vulputate, ante sem iaculis risus, at faucibus nibh tellus et ante. Vivamus quis enim nec arcu 

dictum molestie non quis ipsum.
<br><br>
Proin vel mi eget sapien tincidunt pretium et non eros. Nullam vitae lacus at tortor volutpat feugiat. Vivamus 

venenatis risus in urna aliquet laoreet tempus diam consequat. Praesent viverra placerat venenatis. Quisque arcu 

nisl, congue sed blandit ut, suscipit eu velit. Nam quam massa, sollicitudin et elementum at, tempus nec eros. 

Etiam eget tortor condimentum metus accumsan dignissim eu sed sem.
</p>





		<article>
			<section id="headerbar">
				<div style="float:left;">
					<h1>Introducing: the first article</h1>
				</div>
				<div style="float:right;">
					<p>
					<a id="expand" href="#" onClick="javascript:showhideContent

('article1');return false;">Show/Hide Article</a>
					</p>
				</div>	
			</section>
			<div>
				<section id="article1" class="content">
					<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis augue, nec cursus metus. Proin dictum, 

velit vel vulputate vulputate, ante sem iaculis risus, at faucibus nibh tellus et ante. Vivamus quis enim nec arcu 

dictum molestie non quis ipsum.
<br><br>
Proin vel mi eget sapien tincidunt pretium et non eros. Nullam vitae lacus at tortor volutpat feugiat. Vivamus 

venenatis risus in urna aliquet laoreet tempus diam consequat. Praesent viverra placerat venenatis. Quisque arcu 

nisl, congue sed blandit ut, suscipit eu velit. Nam quam massa, sollicitudin et elementum at, tempus nec eros. 

Etiam eget tortor condimentum metus accumsan dignissim eu sed sem. Quisque ultricies volutpat mauris, nec cursus 

<br><br>
sapien laoreet ut. Maecenas volutpat porta enim et tincidunt. Sed vel lectus eget dolor dictum ultrices in in 

mauris. Praesent laoreet velit vitae est vulputate a varius lorem eleifend.
					</p>
				</section>	

			</div>
		</article>
	





<br>
	






	
	<br>

	
	
	<section id="footer">			
		<p>footer</p>
	</section>

		
	</div>
	</center>	
	

</body>
	
</html>

So I need some help with figuring out how to reset both my text boxes when I click a different radio button so that I can give another value in the textbox area. I am trying to do it without a reset button. Any helpful ideas? I am just confused with the process of resetting the values of both the text boxes in the code.Hmmm......lol I feel like the answer is to put it inline in the <input> tag...

Code:

<body>

  <div id="content">
    <h1>Convert temperature</h1>
        
    <input type="radio" name="conversion_type" id="to_celcius" onclick="document.getElementById('degrees_celcius').disabled=this.checked;"  />From Fahrenheit to Celcius<br />
    <input type="radio" name="conversion_type" id="to_fahrenheit" onclick="document.getElementById('degrees_fahrenheit').disabled=this.checked;"  />From Celcius to Fahrenheit<br />
    <br />
    
    <label>Degrees Fahrenheit:</label>
    <input type="text" id="degrees_fahrenheit" class="disabled" /><br />
    <label>Degrees Celcius:</label>
    <input type="text" id="degrees_celcius"  class="disabled"/><br />
    <br />
   
    <input type="button" id="convert" value="Convert" /><br />
    <br />        
  </div>
  
</body>

Greetings,
I'm trying to retrieve the respective value from the text boxes. Unfortunate the value i retrieve and added always point to the first text box.

Can anyone out there help me with these.

Thanks in advance.

Code:

<td align='center'>
<input name='txtQty[]' type='text' id='txtQty[]' size='5' value='$od_qty' class='box'/><br></br>
<input type='image' name='btnAdd' src='library/cart add.png' onclick=\"document.getElementById('txtQty[]').value++;\"/>
<input type='image' name='btnSubtract' src='library/cart remove.png' onclick=\"document.getElementById('txtQty[]').value--;\"/>
<input name='hidTpcd[]' type='hidden' value='$od_tpcd'/>
</td>

Regards,
Juz