JavaScript - Buttons Load Slowly - Workaround How?

Hi,

I am trying to write a small web app that is used to do some plots for over-the-time-collected data (children's growth measurements). The current objective is to re-use entered data. As I do not want to store anything on the server (which would lead to all the annoying username-password-stuff), nor in cookies, I would like put measurements into a local file and reload them into the HTML entering form. I know and fully appreciate that javascript is not able to read or write files; it is on the other hand obvious that this can be bypassed if I upload the respective file to the server which returns it in an ajax fashion. My main question is now: Is it possible to do some kind of internal upload, that ends up in a read of a local file? Something like a <form method="post" action="localscriptname" ...> with an <input type="file"...> field?

Another (off-topic) question: My plots are in PDF format. I accidentally appended some data to the PDF file which did not cause any problems for the pdf readers. Can I rely on the fact that any pdf reader will ignore data after the %%EOF mark, but will keep it if a file is downloaded, directly opened by acroread or whatever, and later saved from the reader program? This would allow it to keep the plot and the raw data in one file and might be helpful for the not-so-computer-affine target audience of my program. Greetings!

Hi all

Is there a way to get the image(s) to load into the table after the page has loaded instead of the way I have it now?

I have 4 tabs, but I would like the imgs in tabs 2,3,4 to load after page load.

Example of how the tabs look.

Code:

    	  <div class="tabbertab">
            <h2>Australia_____</h2>
                      <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFCC">
                       <caption class="highlight_Red">澳洲&nbsp; Australia
                       </caption>
  <tr>
    <td><a href="pages/promotion.html#aus_ACE" rel="nofollow" target="_blank"><img src="pages/images/Pics/AUS/ace.jpg" alt="ACE / ATTC" width="110" height="69" border="0" align="left" class="ozimg_L"/> ...a few more images etc

the other tabs look the same.

LT

This script displays a link to a registration/login form that loads in a light box for Joomla.
I've been goin nuts trying to figure out how to get this to load on page load with a delay.
Anyone know how to get this done?
PHP Code:
<?php
JHTML::_('behavior.mootools');
$document = JFactory::getDocument();
$document->addStyleSheet(JURI::base() . 'media/system/css/modal.css');
$document->addScript(JURI::base() . 'media/system/js/modal.js');
$document->addScriptDeclaration("window.addEvent('domready', function() {SqueezeBox.initialize({});});");
$user = & JFactory::getUser();

$uri = JFactory::getURI();
$url = $uri->toString();
$return = base64_encode($url);

?>
<div id="lbframeid" style="position:absolute;top:1px;left:1px;height:0px;width:0px;overflow:hidden">
<a href="http://www.wowjoomla.com/"><h1>Joomla Login LightBox powered by WowJoomla.com</h1> </a>
</div>
<?php if ($user->get('guest')) :?>
   <a href="<?php echo JRoute::_('index.php?option=com_loginbox')?>" 
      onclick="SqueezeBox.fromElement(this); return false;"  
      rel="{handler: 'iframe', size: {x: 660, y: 500}}"><?php echo JText::_('SIGNUP_LOGIN')?></a>
   <?php else: ?>
<?php echo JText::sprintf( 'HINAME', $user->get('name') ); ?>
<br>
   <a href="javascript:void(0);" onclick="LB_onLogout(); return false;"><?php echo JText::_('LOGOUT')?></a>
<?php endif; ?>
<script type="text/javascript">
function LB_onLogout() {
   var form = new Element('form');
   form.setProperty('method', 'POST');
   form.setProperty('target', '_self');
   form.setProperty('action', 'index.php');
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'option');
   input.setProperty('value', 'com_user');
   form.appendChild(input);
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'task');
   input.setProperty('value', 'logout');
   form.appendChild(input);
   
   var input = new Element('input');
   input.setProperty('type', 'hidden');
   input.setProperty('name', 'return');
   input.setProperty('value', '<?php echo $return; ?>');
   form.appendChild(input);
   
   $E('body').appendChild(form);
   form.submit();
}
</script>

Hi guys,

I am trying to insert the following call into my page;

Code:

      <script type="text/javascript" defer="true">
$('#query').autocomplete({
    serviceUrl:'service/autocomplete.ashx',
    minChars:1,
    delimiter: /(,|;)\s*/, // regex or character
    maxHeight:400,
    width:250,
    deferRequestBy: 0, //miliseconds
    params: { country:'Yes' }, //aditional parameters
    // local autosugest options:
    lookup: ['January', 'February', 'March', 'April', 'May'] //local lookup values
  });
</script>

It works fine in all browsers except ie(6,7,8) Code:

Internet Explorer can not open website. Operation Aborted.

I understand it is caused by the jquery autocomplete function loading before the page / DOM has fully loaded.

I tried adding Defer="true" to the script however this doesn't seem to work.

Could someone please tell me what i must add to the script so that it loads after the dom has fully loaded?

Thanks guys

George

hello, I created this program to hold 5 cd's and some information relating to them. I keep getting an error that says:
cannot find symbol
symbol : class ButtonListener
location: class inventoryprogram.InventoryProgram
ActionListener btnListen = new ButtonListener(); // create listener

here is the part of code with the actionlistener in it

[CODE]
private JPanel createButtonPanel()
{ // begin method createButtonpanel method
ActionListener btnListen = new ButtonListener(); // create listener
// create button objects
JButton nextButton = new JButton("Display Cd"); // create and label button
nextButton.setActionCommand("Next"); // action command for click
nextButton.addActionListener(btnListen);
nextButton.addActionListener(this);

JPanel panel = new JPanel();

panel.add(nextButton); // add next button to panel
return panel; // return panel
} // end method createButtonPanel
[ICODE]

Hi all,

I'm having trouble getting the following right:

Code:

<IMG border="0" onMouseOver=this.src="home2.gif" onMouseOut=this.src="home.gif" onClick=this.src="home2.gif" SRC="home.gif">

The idea is that after somebody clicks it, the button will remain home2.gif, but ofcourse if u mouseout after the click it will return to home.gif. Can somebody please help me with this problem?! I'm not really good at js, so I've been struggling with this for quite a few days !

Thnx alot!

Sjaroow

I'm Confused.
My HTML:

<form action="mail.php" class="contactForm" name="cform" method="post">
<div class="left">
<h1>Insurance Details</h1>
<label>Type of Cover:</label>
.
.
.
<span class="gender-missing"><br />Please select your gender.<br /></span>
<label>Gender:</label>
<input class="radio" id="gender" name="gender" type="radio" value="Male" />&nbsp;Male&nbsp;&nbsp;
<input class="radio" id="gender" name="gender" type="radio" value="Female" />&nbsp;Female&nbsp;&nbsp;

Script.js:

$('.contactForm').submit( function(){
//statements to validate the form
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var digitNum = /^([0-9])/;

var num1 = document.getElementById('tel');
var num2 = document.getElementById('mobile');
var email = document.getElementById('email');
var dollarUnit = document.getElementById('amount_cover');
var gender = document.getElementsById('gender');


if((document.cform.gender[0].checked== false)&&(document.cform.gender[1].checked== false))
{$('.gender-missing').show();
} else {$('.gender-missing').hide();}
if((document.cform.smoke[0].checked== false)&&(document.cform.smoke[1].checked== false))
{$('.smoke-missing').show();
} else {$('.smoke-missing').hide();}
if((document.cform.residency[0].checked== false)&&(document.cform.residency[1].checked== false))
{$('.residency-missing').show();
} else {$('.residency-missing').hide();}

if (!filter.test(email.value)) {
$('.email-missing').show();
} else {$('.email-missing').hide();}
if (document.cform.name.value == "") {
$('.name-missing').show();
} else {$('.name-missing').hide();}
if (document.cform.address.value == "") {
$('.address-missing').show();
} else {$('.address-missing').hide();}
if (!digitNum.test(num1.value)) {
$('.tel-missing').show();
} else {$('.tel-missing').hide();}
if (!digitNum.test(num2.value)) {
$('.mobile-missing').show();
} else {$('.mobile-missing').hide();}
if (!digitNum.test(dollarUnit.value)) {
$('.cover-missing').show();
} else {$('.cover-missing').hide();}
if (document.cform.message.value == "") {
$('.message-missing').show();
} else {$('.message-missing').hide();}
if ((document.cform.name.value == "") || ((document.cform.gender[0].checked== false) && (document.cform.gender[1].checked== false)) || ((document.cform.smoke[0].checked== false) && (document.cform.smoke[1].checked== false)) || ((document.cform.residency[0].checked== false) && (document.cform.residency[1].checked== false)) || (!digitNum.test(dollarUnit.value)) || (!filter.test(email.value)) || (!digitNum.test(num2.value)) || (!digitNum.test(num1.value)) || (document.cform.message.value == "")){
return false;
}

if ((document.cform.name.value != "") && ((document.cform.gender[0].checked == true) || (document.cform.gender[1].checked == true)) && ((document.cform.smoke[0].checked== true) || (document.cform.smoke[1].checked== true)) && ((document.cform.residency[0].checked== true) || (document.cform.residency[1].checked== true)) && (digitNum.test(dollarUnit.value)) && (digitNum.test(num1.value)) && (digitNum.test(num2.value)) && (filter.test(email.value)) && (document.cform.message.value != "")) {
//hide the form
$('.contactForm').hide();

//show the loading bar
$('.loader').append($('.bar'));
$('.bar').css({display:'block'});

//send the ajax request
$.post('mail.php',{coverType:$('#coverType').val(),
coverRequired:$('#coverRequired').val(),
amount_cover:$('#amount_cover').val(),
terms:$('#terms').val(),
message:$('#message').val(),
name:$('#name').val(),
gender:$('#gender').val(),
status:$('#status').val(),
Birth_month:$('#Birth_month').val(),
days:$('#days').val(),
years:$('#years').val(),
smoke:$('#smoke').val(),
residency:$('#residency').val(),
email:$('#email').val(),
address:$('#address').val(),
tel:$('#tel').val(),
mobile:$('#mobile').val()},

//return the data
function(data){
//hide the graphic
$('.bar').css({display:'none'});
$('.loader').append(data);
});

//waits 2000, then closes the form and fades out
setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 5000);
setTimeout('$(".contact").animate({"marginLeft": "-=963px"}, "slow")',4900);

//stay on the page
return false;
}
});
//only need force for IE6
$("#backgroundPopup").css({
"height": document.documentElement.clientHeight
});

mail.php code:
<?php
//declare our variables

$coverType = $_POST['coverType'];
$coverRequired = $_POST['coverRequired'];
$amount_cover = $_POST['amount_cover'];
$terms = $_POST['terms'];
$message = stripslashes(nl2br($_POST['message']));

$name = $_POST['name'];
$gender = $_POST['gender'];
$status = $_POST['status'];
$Birth_month = $_POST['Birth_month'];
$days = $_POST['days'];
$years = $_POST['years'];
$smoke = $_POST['smoke'];
$residency = $_POST['residency'];

$email = $_POST['email'];
$address = $_POST['address'];
$tel = $_POST['tel'];
$mobile = $_POST['mobile'];

//get todays date
$todayis = date("l, F j, Y, g:i a") ;
//set a title for the message
$subject = "Message from Your Website";
$body = "PERSONAL DETAILS \nFull Name: $name \nGender: $gender \nMarital Status: $status \nBirth Date: $Birth_month $days, $years \nHave you smoke in the past 12 Months? $smoke \nU.S. Residency for at least 12 Months? $residency \n\nCONTACT DETAILS\nEmail Address: $email \nAddress: $address \nTelephone #: $tel \nMobile Number: $mobile \n\nINSURANCE DETAILS\nCover Type: $coverType \nCover Required: $coverRequired \nAmount: $amount_cover \nTerms(Years): $terms \nMessage: \n$message";

$headers = 'From: '.$email.'' . "\r\n" .
'Reply-To: '.$email.'' . "\r\n" .
'Content-type: text/plain; charset=utf-8' . "\r\n" .
'X-Mailer: PHP/' . phpversion();

//put your email address here
mail("me@myemail.com", $subject, $body, $headers);
?>
<!--Display a thankyou message in the callback -->
<div id="mail_response">
<h3>Thank you for your interest <?php echo $name ?>!</h3><br />
<p>We have received your personal information and we will forward it to the next available insurance agent .You can expect to hear from us within 24 hours.</p>
<br /><br />
<h5>Message sent on: </h5>
<p><?php echo $todayis ?></p>
</div>

Problem is the thank you message loads in a new page. BUt if I delete this line: var gender = document.getElementsById('gender'); The form run properly, when submit button is click, it will hide the forms and replace by a thank you message but problem is the data send in the email is not the right value eg. in Gender: I select Female. BUt I receive Male as value. Why is that?
for live demo: http://gbv.lifeandhealthbenefits.com/
for full Script Code: http://gbv.lifeandhealthbenefits.com/js/scripts.js

Hey guys,

I'm a noob with javascript and I only know simple HTML coding, so I have become stuck. I can program in other languages though, so I understand the principles. That being said, I have become stuck with something.

My aim is to have a series of page where text is displayed, and then two or more buttons. Once a button is clicked, I want the screen to clear and it displays the next lot of text, followed by some more buttons.
Once they are pushed, it continues on.

So basically, each section has its own code that it pushes, plus its own buttons which lead to other sections. I am not trying to make a choose your own adventure book, but the layout is basically one of these.

I can do this in another language by simply having a few sections. Inside each section, it retrieves the option and proceeds. However, when I am trying to do this, I am getting confused.

The way my other programming experience tells me to write it, I would write a function which is called for each section, and it would display the text, the buttons, and return to the main function in the program.

However, because the buttons are in HTML, I cannot put code for the new buttons instead the functions. If I put the code inside the body of HTML, it will automatically be displayed. I cannot write an if statement to determine which buttons are displayed.


Can you please give me some advice around this? I hope I have made myself clear enough to be understood!!

One other thing I should mention, I really want to be able to do this in a single HTML file instead of calling other files. I think this would work fine by using frames and multiple HTML files, but I would prefer not to unless I really need to. One file would be much better for me.

Thanks!


Below is the basic code I am working from. It displays the first section with some text, displays two buttons and it goes to the next section on a button click.



Code:

<html>

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

function button1()
{
document.write("Button 1 was pushed. Insert text here. Choose from two new buttons below:");
}

function button2()

{
document.write("Button 2 was pushed. Insert text here. Choose from two new buttons below:");
}

</script>
</head>



<body>

<form>
<input type="button" value="Button1" onClick="button1()" />
<input type="button" value="Button2" onClick="button2()" />
</form> 

</body>
</html>

I've been looking around and all the validation stuff I've seen doesn't work for what I have.

Here is what I am trying to do:
The user selects the Heads or Tails radio button for the first flip and then selects heads or tails radio button for the 2nd flip. The script then randomly flips two coins and compares it to what the user selected and if they are the same the user wins and if not then they lose.

So there would be 4 buttons total, two Heads and two Tails. The first set of Heads and Tails needs to be assigned to "guess1" and the 2nd set is "guess2".

So if the user clicks Tails for Flip1 and Heads for Flip2 then Tails is assigned to guess1 and Heads is assigned to guess2.

Right now the script just assumes the user is selecting heads for both flips.

Code:

<html> 
<head>
<title>Guess Two Coin Tosses</title>

<script>

function flip5(){
	
	//Input
	var guess1 = document.getElementById('guess1').value
	var guess2 = document.getElementById('guess2').value
	var flip1 = Math.floor(Math.random() * 2)
	var flip2 = Math.floor(Math.random() * 2)
	var outcomes

	if (flip1 == 0) flip1 = 'Heads';
		else flip1 = 'Tails';
	if (flip2 == 0) flip2 = 'Heads';
		else flip2 = 'Tails';

	//Processing
	if (flip1.toUpperCase() == guess1.toUpperCase()) {
	   if (flip2.toUpperCase() == guess2.toUpperCase()) 
	      outcomes = 'win win';
	   else 
	      outcomes = 'win lose';
	}
	else { // here we lost the first
	   if (flip2.toUpperCase() == guess2.toUpperCase())
	      outcomes = 'lose win';
	   else 
	      outcomes = 'lose lose';
	}

	//Output
	document.getElementById('flip1').value = flip1
	document.getElementById('flip2').value = flip2
	document.getElementById('outcomes').value = outcomes
}
	

</script>

</head>

<body>
<h3>Predict the Futu  Guess Two Coin Flips</h3>
Enter Heads for Heads, Tails for Tails! Case does not matter!
<p/>Your Guess for Flip-1: 
<input type=radio id="guess1" size="5" value="Heads" />Heads
<input type=radio id="guess1" size="5" value="Tails" />Tails
<p/>Your Guess for Flip-2: 
<input type=radio id="guess2" size="5" value="Heads" />Heads
<input type=radio id="guess2" size="5" value="Tails" />Tails
<p/>Flip-1: 
<input type="text" id="flip1"  size="5" value="???" />
<p/>Flip-2: 
<input type="text" id="flip2"  size="5" value="???" />

<p/><input type="button" value="Flip Two!" 
 onclick="flip5()" />
<p/>Outcomes: 
<input type="text" id="outcomes" size="20" value="" />
<hr>
</body>
</html>

Im trying to configuere a form that
a. a radio buttons that allow the user to choose between quarters, nickels, dimes and pennies.
and show image when click on my radio button
im confused on how to get the image to display whenthey click on the radio button

hello, this is my first attempt in javascript. im trying to make custom radio buttons here is the code i have:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	
	<head>
		
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		
		<title>Untitled Document</title>
		
		<style type="text/css">
		
			.hide {display:none;}
		
			.radio {width:16px;height:16px;}
		
		</style>
		
		<script type="text/javascript">
			
			// declare variables or different states
			var off = 'images/check-off.png';
			var on = 'images/check-on.png';
			var radioImage = document.createElement('img');
			
			function replaceRadios(){
				
				var radios = document.getElementsByName('radio1');
				
				radios.type = 'radio'
				
				for (r = 1; r < radios.length; r++) {
					
					// if radio is checked configure the img src to var on
					if (radios[r].type = 'radio' && radios[r].checked) {
						
						radioImage.src = on;	
						radioImage.className= 'radio on';
								
					} else {
							
						// otherwise configure the img src to var normal/off and give it a class of radio
						radioImage.src = off;
						radioImage.className= 'radio off';

					}
						
					// give the image an id of radio
					radioImage.className = 'radio';
					
					radioImage.onclick= radioStates;
							
					radios[r].parentNode.insertBefore(radioImage,radios[r]);
						
					// hide the radio button to show image
					radios[r].className = 'hide';
				
					}
					
				}
					
				function radioStates(r) {
				
					var radios = document.getElementsByName('radio1');
				
					if (radios.checked = true) {
				
						radioImage.setAttribute("class", "radio on");
						radioImage.src = on;
					
					} else if (radios.checked = false) {
					
						radioImage.setAttribute("class", "radio off");
						radioImage.src = off;
						
					} else {
					
						radioImage.setAttribute("class", "radio off");
						radioImage.src = off;
						
					}
					
    			}	
		
				setTimeout("replaceRadios()", 0);
		
		</script>
		
	</head>
	
	<body>
	
		<form name="radiotest">
	
			<input type="radio"  id="radio1" class="radio" name="radio1" />
	
			<input type="radio"  id="radio2" class="radio" name="radio1" />
	
			<input type="submit" id="submit" name="submit" />
	
		</form>
	
	</body>

</html>

If anyone could help me, I would greatly appreciate it.

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 have a simple frame that looks like this
http://i307.photobucket.com/albums/n...aker/help2.jpg

i have 3 pages (side.html, page1.html and page2.html) the above picture has side.html and page1.html loaded on default, what i want to do is whenever i click on the page 1 button, page1.html will load on the right side and when i click on page 2 button, page2.html will load

i cant figure out what the code for this is and googling for the solution isn't getting me anywhere

help please

Hi,

I have buttons like these:
PHP Code:
<button type="button" onclick="izdas()">I&#382;das</button> 
<button type="button" onclick="miestas()">Miestas</button> 
<button type="button" onclick="map()">&#381;emėlapis</button> 
<button type="button" onclick="infantry()">Kariuomen&#279;</button> 
<button type="button" onclick="biuld()">Statiniai</button> 


How I can add images on them?? Size would be 100x20px.

Also, I would e thankful if someone would help me position them in one vertical line.

Thanks in advance...

On custom button images, how do you give them the effect that they're "pushed" when the user clicks them and "unpushed" when the user lets his finger off the mouse button? I'm guessing it's some type of rollover effect, but I'm not sure how it's done.