I have a set of jquery tabs for top navigation (tabs are just text links, not "graphical" tabs). When you click a link, I want a fancybox to open containing an external html file. This is not happening. No fancy box is launching. Below is my code. Could you guys/gals let me know what I am doing wrong and how to fix? I'm having trouble figuring it out. Thanks.
Scripts:
<link rel="stylesheet" href="../css/jquery.fancybox.css" type="text/css" />
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script language="javascript" src="../js/fancybox/jquery.fancybox.js"></script>
HTML:
<script type="text/javascript">
$(document).ready(function() {
$("#lesson-tabs").tabs();
$(".tabs-content").fancybox({
'type':'iframe',
'maxWidth' : 580,
'maxHeight' : 390,
'fitToView' : false,
'width' : 500,
'height' : 300,
'autoSize' : false
});
});
</script>
<div class="overhide" id="lesson-tabs">
<ul>
<li>
<span class="fun2learn-add" ></span>
<a href="lessons/addition1.html" class="first-class2 tabs-content" >Addition</a>
</li>
<li>
<span class="fun2learn-subtract" ></span>
Subtraction
</li>
</ul>
</div>
lessons/addition1.html code for fancybox:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Just try it!</title>
<style>
div {font-family:Arial, Helvetica, sans-serif;font-size:16px;}
.blkstyle {display:block;}
input[type=submit] {margin-top:10px;}
</style>
</head>
<body>
<div>
<p>If you have 14 apples, Justin has 12 and Mary gives you 7 more apples, but only gives Justin 3 apples, how many apples would you and Justin have altogether?</p>
<form>
<span class="blkstyle"><input type="radio" name="apples" /><label>24</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>42</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>36</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>16</label></span>
<input type="submit" value="Answer" />
</form>
</div>
</body>
</html>
lessons/subtraction1.html code for fancybox:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Just try it!</title>
<style>
div {font-family:Arial, Helvetica, sans-serif;font-size:16px;}
.blkstyle {display:block;}
input[type=submit] {margin-top:10px;}
</style>
</head>
<body>
<div>
<p>Jamie has 38 lives left in play for his new video game.
He loses 6 lives on level Nine and 5 lives on level Twelve.
He hasn't gained anymore lives until level Twenty, where he gets 4 more,
but loses 1 life in play. How many lives does Jamie have left in play?</p>
<form>
<span class="blkstyle"><input type="radio" name="apples" /><label >26</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>30</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>22</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>16</label></span>
<input type="submit" value="Answer" class="blkstyle"/>
</form>
</div>
</body>
</html>
Related
I am currently in the process of creating a form and was wondering if there is a way to save radio button information within the function send data. Is there a specific method or technique that I can use to achieve this?
<!DOCTYPE html>
<head>
<base target="_top">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Form</title>
</head>
<body>
<div class="container">
<br>
<h1>Custom HTML Forms to Google Sheet</h1>
<br>
<div id="form">
<form>
<div class="form-group">
Are you a freshman, sophomore, junior, or senior?
<br>
<input type="radio" name="class" value="freshman"> Freshman
<br>
<input type="radio" name="class" value="sophomore"> Sophomore
<br>
<input type="radio" name="class" value="junior"> Junior
<br>
<input type="radio" name="class" value="senior"> Senior
</div>
<div id="completion-msg" style="display: none;">
Thank you for completing this form!
</div>
</div>
<script>
function send_data(){
const form_data = document.getElementsByClassName("form-data"); //retrieve filled form data
let i;
const data = [];
for(i=0; i<form_data.length; i++){
data.push(form_data[i].value);
}
google.script.run.saveData(data); // send to google app script
document.getElementById("form").style.display = "none"; // make form invisible
document.getElementById("completion-msg").style.display = "block";
}
</script>
</body>
I've read other post that indicate the or tags were left unclosed or had something placed after the tag. Am unsure of any other cause as I get errors for Stray End Tags from Line 78 to Line 96 (Starting from ng switch OS)
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Lab 3.4 - Registration Form Web App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5
elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the
page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<!-- jQuery – required for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- All Bootstrap plug-ins file -->
<script src="js/bootstrap.min.js"></script>
<!-- Basic AngularJS -->
<script src="js/angular.min.js"></script>
</head>
<body>
<h1>Phone Cloud Registration App</h1>
<form>
<!--Note to self: Labels are associated with input's id and not name attirbute-->
<p>
<label for="username">Enter username: </label>
<input type="text" id ="username" data-ng-model="username"/>
</p>
<p>
<label for="password">Enter password: </label>
<input type="text" id="password" data-ng-model="password"/>
</p>
<p>
<label for="rpassword">Re-enter password: </label>
<input type="text" id="rpassword" data-ng-model="rpassword" />
<span data-ng-show="rpassword != password" data-ng-model-options = "{updateOn: 'blur'}">Password does not match the above.</span>
</p>
<br/>
<h2>Phone Operating System</h2>
<!--Radio Buttons-->
<input type="radio" name="OS" value="Android" data-ng-model="OS" required/>Android
<input type="radio" name="OS" value="IOS" data-ng-model="OS"/>IOS
<input type="radio" name="OS" value="Windows" data-ng-model="OS"/>Windows
<p>Phone Model</p>
<label for="phoneModel">
Select phone model:
</label>
<!--Drop Down List -->
<div>
<select name = "phoneModel" id = "phoneModel">
<div data-ng-switch = "OS">
<div data-ng-init = "AndroidModels = ['HTC 8X','Samsung Galazy 7','Sony Xperia Z5']" data-ng-switch-when = "Android">
<option data-ng-repeat = "a in AndroidModels">{{a}}</option>
</div>
<div data-ng-init = "IOSModels = ['Iphone 6','Iphone 6s','Iphone 6s Plus']" data-ng-switch-when = "IOS">
<option data-ng-repeat="b in IOSModels">{{b}}</option>
</div>
<div data-ng-init = "WindowsModels =['HTC One M9','Microsoft 950','Microsoft 950XL']" data-ng-switch-when="Windows">
<option data-ng-repeat = "c in WindowsModels">{{c}}</option>
</div>
</div>
</select>
</div>
<br/>
<p>Summary</p>
<ul>
<li>Username: {{username}}</li>
<li>OS: {{OS}}</li>
<li>Phone: {{phoneModel}}</li>
</ul>
</form>
</body>
</html>
*EDIT: Issue was with nesting <div> tags and any other tag that isn't <option> within the <select> tag. THANK YOU SO MUCH KIND SIR.
You should only have option or optgroup elements directly nested in a select element.
The permitted content of a select element from MDN:
Zero or more <option> or <optgroup> elements.
Remove all of the other elements from inside your select and at the same time I'd recommend removing the whitespace from attributes such as:
data-ng-switch = "OS" should be data-ng-switch="OS".
I am using the switch class from foundation-zurb and I am using the example from their website, but the inside labels for the inactive/active settings are not working. The code is below:
<p>Above/Below</p>
<div class="switch">
<input class="switch-input" id="Above/Below" type="checkbox" name="ABSwitch">
<label class="switch-paddle" for="Above/Below">
<span class="switch-active" aria-hidden="true">A</span>
<span class="switch-inactive" aria-hidden="true">B</span>
</label>
</div>
The A and B on the respective active/inactive settings of the switch do not show up.
Try something like this:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" rel="stylesheet" />
</head>
<body>
<p>Above/Below</p>
<div class="switch">
<input class="switch-input" id="Above/Below" type="checkbox" name="ABSwitch">
<label class="switch-paddle" for="Above/Below">
<span class="switch-active" aria-hidden="true">A</span>
<span class="switch-inactive" aria-hidden="true">B</span>
</label>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.1.1/js/foundation.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Astro Tools</title>
<meta charset="utf-8">
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<link rel="stylesheet" href="js/jquery.mobile-1.4.3.min.css" type="text/css"/>
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.3.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Astrophoto Tools</h1>
</div>
<div data-role="content">
<p>
Welcome to Astrophoto Tools. These simple calcualting tools will help you to avoid Star Trials.
</p>
<ul data-role="listview" data-inset="true">
<li>Basic Tool</li>
<li>Advanced Tool</li>
<li>Help</li>
<li>About</li>
</ul>
</div>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
///////////////////////////////////////////////////////////////////////////////
Here is the basic.html
////////////////////////
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title>jQuery Mobile Web App</title>
<link rel="stylesheet" href="js/jquery.mobile-1.4.3.min.css" type="text/css"/>
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.3.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#lens").on("keyup", function () {
var lens = $(this).val();
//var fullframe = 0; // initialize the sum to zero
var fullframe = 600 / lens;
$('#fullframe').val(fullframe.toFixed(2));
var apsccanon = 600 / (lens * 1.6);
$('#apsccanon').val(apsccanon.toFixed(2));
var apscnikon = 600 / (lens * 1.5);
$('#apscnikon').val(apscnikon.toFixed(2));
var apscolympus = 600 / (lens * 2.0);
$('#apscolympus').val(apscolympus.toFixed(2));
});
});
</script>
<style type="text/css">
body,td,th {
color: #CCC;
}
</style>
</head>
<body>
<div data-role="page" id="page" data-theme="b">
<div data-role="header">
<h3 style="color:#3CF">Astrophoto Tool</h3>
</div>
<div data-role="content">
<div align="center" style="color:#0F0">No Star Trails Exposure</div>
<p align="center" style=" color:#FFFF00">Rule 600 </p>
</div>
<div data-role="content" data-theme="b">
<form action="">Lens: Focal Length (mm)
<br>
<input type='text' id='lens' style="color:#FF6"/>
<br>Full Frame: (Time in Seconds)
<br>
<input type='text' id='fullframe' value="" style="color:#0F0" readonly>
<br>APS-C (Canon): (Time in Seconds)
<br>
<input type='text' id='apsccanon' value="" style="color:#0F0" readonly />
<br>APS - C (Nikon/Sony/Pentax): (Time in Seconds)
<br>
<input type='text' id='apscnikon' value="" style="color:#0F0" readonly />
<br>APS - C (Olympus/Panasonic): (Time in Seconds)
<input type='text' id='apscolympus' value="" style="color:#0F0" readonly />
<input name="Reset" type="reset" value="Reset">
</form>
</div>
<div data-role="footer">
<h4 style="color:#3CF">© Ranjan Mitra 2015</h4>
</div>
</div>
</div>
</body>
</html>
When I run the basic.html it works without a problem but whenever I click the link to basic.html in the index.html the calculations do not work at all. Where am I going wrong? please help.
////////////////////////////////////////////////////////////////////////
You are missing the value=""in your first <input>
<input type='text' id='lens' ???? style="color:#FF6"/>
<br>Full Frame: (Time in Seconds)
I have a login jsp page where users can login in to my web application, I have also a sign Up form where user can register if they are not members. I'm trying to do the login and sign up forms in one JSP called login.jsp. Login part works fine However, I am unable to display the sign up form when a user clicks on the signup button.
Here is the login.jsp:
<%#page import="java.util.Enumeration"%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Login and Registration Form with HTML5 and CSS3" />
<meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style3.css" />
<link rel="stylesheet" type="text/css" href="css/animate-custom.css" />
<script type="text/javascript">
function submit(){
if(validateForm()) {
document.loginForm.submit();
}
}
function checkSubmit(e)
{
if(e && e.keyCode == 13)
{
document.forms[0].submit();
}
}
function validateForm()
{
var c=document.forms["loginForm"]["name"].value;
if (c==null || c=="")
{
alert("Username must be filled out");
return false;
}
var d=document.forms["loginForm"]["password"].value;
if (d==null || d=="")
{
alert("Password must be filled out");
return false;
}
return true;
}
</script>
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="">
<strong>« Previous Demo: </strong>Responsive Content Navigator
</a>
<span class="right">
<a href=" http://tympanus.net/codrops/2012/03/27/login-and-registration-form-with-html5-and-css3/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<h1> Login to view Cricket Fixtures and scores</h1>
<nav class="codrops-demos">
Demo 1
Demo 2
Demo 3 <!-- index.html3 b4 need to change to login.jsp -->
</nav>
</header>
<section>
<div id="container_demo" >
<!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4 -->
<a class="hiddenanchor" id="toregister"></a>
<a class="hiddenanchor" id="tologin"></a>
<div id="wrapper">
<div id="login" class="animate form">
<form method="get" id = "loginForm" name="loginForm" action="/CricketWebApplication/LoginServlet" autocomplete="on">
<h1>Log in</h1>
<p>
<label for="username" class="uname" data-icon="u" > Your username </label>
<input id="username" name="name" onKeyPress="javascript:return checkSubmit(event)"/>
</p>
<p>
<label for="password" class="youpasswd" data-icon="p"> Your password </label>
<input id="password" name="password" onKeyPress="javascript:return checkSubmit(event)"/>
</p>
<p class="keeplogin">
<input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
<label for="loginkeeping">Keep me logged in</label>
</p>
<p class="login button">
<input type="submit" value="Login" />
</p>
<p class="change_link">
Not a member yet ?
Join us
</p>
</form>
</div>
<div id="register" class="animate form">
<form action="/CricketWebApplication/LoginServlet" autocomplete="on">
<h1> Sign up </h1>
<p>
<label for="usernamesignup" class="uname" data-icon="u">Your username</label>
<input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" />
</p>
<p>
<label for="emailsignup" class="youmail" data-icon="e" > Your email</label>
<input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="mysupermail#mail.com"/>
</p>
<p>
<label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>
<input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/>
</p>
<p>
<label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>
<input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/>
</p>
<p class="signin button">
<input type="submit" value="Sign up"/>
</p>
<p class="change_link">
Already a member ?
Go and log in
</p>
</form>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
Use javascript to switch the css of the div from display: none; to display: block;
<script>function unhideDiv()
{
document.getElementById('divid').style = "display: block;";
}
</script>
<div style='display: none;' id='divid'>...</div>
<input type='button' onClick='unhideDiv()' />
Or lookup fancier jquery methods. They've got div-popups and everything now.