JavaScript - Radio Buttons: How Open Pdf File Smaller Than Full Screen?

There is a stand-alone, full-screen slide show code published at

http://www.javascriptkit.com/script/...ow/index.shtml

I would like to know how to set the size of the show to less than full-screen, and how to integrate the show with other web content.

I have following JavaScript code, aim to open full window. It works fine except Firefox in one of my computers, in which the width is not full.

Could someone help me to sort out?


Quote:
; function openFullWin(urlPara)
<!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<!-- This is to open a full size normal browser window with focus. -->
<!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
{ ; var newUrl = ('http'==urlPara.substr(0, 4)) ? urlPara : ('http://' + urlPara)
; var windowFeatures = 'copyhistory=yes,directories=yes,location=yes,menubar=yes,modal=no,resizable=yes,scrollbars=yes,stat us=yes,toolbar=yes,width='
+ screen.availWidth + ',height=' + screen.availHeight + ',left=0,top=0'
; var winNew = window.open(newUrl, '', windowFeatures)
; this.blur()
; winNew.focus()
}

Dear Experts,

I am very new for javascript so I am not even sure it is possible or not.

The situation is like this,

I have a page, which is actually a photo gallery with a table having 3 rows. First row shows the full screen size pic. Second row displays the Caption of that image and third row shows thumbnail view of six different images and the previous and next button.

this is the sample layout:

<table>
<tr>
<td colspan=8>
Full size image will be shown in this cell
</td>
</tr>
<tr>
<td colspan=8>
Caption of the image will be displayed here
</td>
</tr>
<tr>
<td>Previous Button</td>
<td>Pic1 thumbnail view</td><td>Pic2 thumbnail view</td><td>Pic3 thumbnail view</td>
<td>Pic4 thumbnail view</td><td>Pic5 thumbnail view</td><td>Pic6 thumbnail view</td>
<td>Next Button</td>
</td>
</tr>

My requirement is whenever the user click on the thumbnail view, which is in the 3rd row, the corresponding full screen size pic should open in 1st row of the table.
As my photo gallery should be having more than 6 pics, lets take 20 pics, I want to show only 6 thumbnails in 3rd row at a time. Whenever user press "Next" button the 3rd row having 6 thumbnails should show other 6 thumbnails and previous button should show previous 6 thumbnails.

I have a guess that it can be done using arrays, but how????? I have no idea. So please if you have any guesses it will be nice if you can post the entire code here as I will not be in a position to work on the hints given by you.

Thanks in advance.

Charles

I have a popup(telerik radwindow) which is in iframe.And i wnt that popup to be opened at the center of the screen and not at the center of iframe.
If I scroll the page it should reamain at the center of the screen.


Thanx in advance

On my website I have a radio button as any other normal radio button.

<input type="radio" name="crime" value="4" id="4" class="submit">

is there any way to get rid of this radio button and click something for example
<tr>
<td>Blah blah</td>
<td>Blah Blah</td>
</tr>

is there any code i can put in the <tr> tag so if i click that section it will act as a radio button and when its selected change the background of the tr section.

On my website I have a radio button as any other normal radio button.

<input type="radio" name="crime" value="4" id="4" class="submit">

is there any way to get rid of this radio button and click something for example
<tr>
<td>Blah blah</td>
<td>Blah Blah</td>
</tr>

is there any code i can put in the <tr> tag so if i click that section it will act as a radio button and when its selected change the background of the tr section.

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>

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.

I'm creating a unit converter program using radio buttons and i can't seem to get one aspect working. i can't seem to get another set of radio buttons to display. the way the program is supposed to work is there will be 3 radio buttons saying to convert length, weight, and volume. if the user selects to convert weight, another set of radio buttons will appear with 2 options, to convert from pounds to kilograms, or kilograms to pounds. then the user enters the number in a text box and clicks to convert button. my problem is getting the second set of radio buttons to display. I have no clue how to get this to work. to get a better understanding of whats going on, here is the program without the radio buttons that i created. i'm trying to use radio buttons in place of the prompting message.

Code:

<!DOCTYPE html>
<html>
    <head>
        <title> Conversions of Weight and Length</title>
        
        <script type="text/javascript">
        
        function clearMe() 
        { 
            var _s=top; 
            var _d=_s.document; 
            _d.open(); 
            _d.write(""); 
            _d.close(); 
        } 
        function main()
        {
                      
            
            var repeat = confirm("Do you want to perform another conversion ? \r" + "<p><b>Note:</b> Pressing OK allows for another conversion, and pressing CANCEL exits</p>");
            
            if(repeat==true)
                {
                    convert();
                }
            else 
                {
                    alert("Your program has been terminated!");
                    self.close();            
                }
        }
            
        
       
        function convert()
        {
            var unit, direction, value, result, original_units, new_units;
            document.write("<br/><br/>")
            document.write("Weight and Length conversion menu" + "<br/><br/>");
            document.write("1. convert length" + "<br />");
            document.write("2. convert weight" + "<br />");
            document.write("3. convert volume" + "<br />");
              
                   unit = window.prompt("select conversion type: ");
              
              if ((unit<0) || (unit>3))
              {
                  alert("Select Menu option 1, 2, or 3!");
                  unit = window.prompt("Select conversion type: ");
              }
              switch (unit)
              {
                  case '1':
                     direction = choose_direction("<br /><br />1. Feet to meters<br />" , "2. Meters to feet <br />");
                      if (direction =='1')
                          {
                              original_units = "meters"; new_units = "meters";
                             
                          }
                          else {
                              new_units = "feet"; original_units = "meters";
                          }
                          break;
                  case '2':
                      direction = choose_direction("<br /><br />1. Pounds to kilograms <br />", "2. Kilograms to pounds <br /> <br />"); 
                      if (direction =='1')
                          {
                             original_units = "pounds"; new_units = "kilograms";
                             
                          }
                          else {
                              new_units = "pounds"; original_units = "kilograms";
                          }
                          break;
                  case '3':
                      direction = choose_direction("<br /><br />1. Gallons to liters<br />", "2. Liters to gallons <br /><br />");
                      if (direction =='1')
                          {
                             original_units = "gallons"; new_units = "liters";
                             
                          }
                          else {
                              new_units = "gallons"; original_units = "liters";
                          }
                          break;
                          
                          
              
              }
               value = window.prompt("Enter value to be converted:")
              
              
              switch(unit)
              {
                  case '1':
                      result = feet_meters(value, direction);
                      break;
                  case '2':
                      result = pounds_kilograms(value, direction);
                      break;
                  case '3':
                      result = gallons_liters(value, direction);
                      break;
              }
              document.write(value + original_units + " = " + result + new_units);
                          
        }
        function choose_direction(option1, option2)
        {
             var direction;
            document.write(option1);
            document.write(option2);
            do
            {
                window.prompt("Select a conversion direction");
                return direction;
            }
            while ((direction!='1') || (direction !='2'));
                              
        }
        function pounds_kilograms(value, direction)
        {
            if (direction == '1')
               return parseFloat(value)/parseFloat(2.2046);
            
            else
                return parseFloat(value)*parseFloat(2.2046);
        }
        function gallons_liters(value, direction)
        {
            if (direction == '1')
                return parseFloat(value)*parseFloat(3.7854);
            else
                return parseFloat(value)/parseFloat(3.7854);
        }
        function feet_meters(value, direction)
        {
            if (direction == '1')
                return parseFloat(value)/parseFloat(3.2808);
            else
                return parseFloat(value)*parseFloat(3.2808);
        }
        
        </script>
    </head>
    <body>
        <h1> weight and length conversion </h1>
        <script type="text/javascript">
          convert();            
           main();
        </script>
        
    </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

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

Hi all,

I hope you can help

I have some code which:

1) Opens a URL (e.g. google.com) in a hidden iframe, then
2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded...

This works exactly as I need.

What I'd like to do is the following:

1) Open a URL (e.g. google.com) in a hidden iframe, then
2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe
3) The address bar of the full-screen iframe should be my domain (obviously!)

Here's what I have so far...

Hidden iframe -> New URL Code:

Code:

<html>
<body>
	<script type="text/javascript">

		var page_body = document.getElementsByTagName('body');
		var myframe = document.createElement('iframe');
		var id = Math.random();
		myframe.setAttribute('id', 'myFrame'+id);
		myframe.src = 'http://google.com';  //First open Google in hidden iframe 
		myframe.setAttribute('frameborder', '0')
		myframe.setAttribute('width', '0');
		myframe.setAttribute('height', '0');
		if (myframe.attachEvent)
			{
				myframe.attachEvent('onload', function()
					{
						top.location = 'http://yahoo.com';  //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html 
					});
					}
		else if (myframe.addEventListener)
			{
				myframe.addEventListener('load', function()
					{
						top.location = ('http://yahoo.com');
					}, false);
					}
		page_body[0].appendChild(myframe);

	</script>
</body>
</html>

I have an example of some code which displays the full screen iframe, but my problem is...

...I can't figure out how to redirect to this after the hidden iframe has loaded

Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded:

Code:

<html>
<head>
	<script type="text/javascript">
 		function sendParams() {
 			document.body.style.overflow = "hidden";
 		}
	</script>
</head>
<body>
	 <!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar --> 
	<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>

I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas.

If you can help, you'll have some serious gratitude and good karma thrown your way!

Best wishes, and thanks in advance,
Paul

Hi, I'm a year 11 student studying GCSE computing. I'm doing a project and I need to conduct some primary resarch, so I would be grateful if someone could explain to me how to go about coding radio buttons in a HTML web page which uses JavaScript.
Thank you!

Hello,
I'm currently trying to figure out how I can make each radio button call a different page. For example If i click on radio button 1 and click submit it will take me to www.website1.com and if I click radio button 2 and click submit it will take me to www.website2.com. I would really appreciate your help

Thank you
Eric