<!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)
Related
I'm trying to implement ajax auto complete function to my HTML code, I want to put the result from the auto complete function into a table on my html page, the auto complete function is working and I get a drop down list but the table isn't created and I can't see any result in it.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DMC</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="page-header">
<h3 style="color:#00a2d1; font-size:30px; font-family: Impact, Charcoal, sans-serif; text-align: center;">
DMC</h3>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<div class="col-lg-offset-2">
<form>
<div class="form-group">
<div class="input-group">
<input id="txtSearch" class="form-control input-lg" type="text" placeholder="Search..." />
<div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
</div>
<table border='1' id="table_body"></table>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#txtSearch').autocomplete({
source: "post_search.php",
minLength: 1,
select: function(event, ui) {
var url = ui.item.id;
if (url != '#') {
location.href = url
}
var table = $("#table_body");
$.each(data, function(event, ui){
table.append("<tr><td>"+ui.item.value+"</td><td>"+ui.item.id+"</td>");
},
open: function(event, ui) {
$(".ui-autocomplete").css("z-index", 1000)
}
})
});
</script>
</body>
</html>
Try something like this hope it helps
<table border='1'>
<thead>
<tr>
<td>value</td>
<td>id</td>
</tr>
</thead>
<tbody id="table_body">
</tbody>
</table>
var data = ''; //initialize the data variable
$.each(data, function(event, ui){
data +=
"<tr>"+
"<td>"+ui.item.value+"</td>"+
"<td>"+ui.item.id+"</td>"+
"</tr>";
}
$('#table_body').html(data); //this will display your data to your body table
I used _renderMenu function and $.each function inside it and it worked like a charm.
here is the new code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DMC</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="page-header">
<h3 style="color:#00a2d1; font-size:30px; font-family: Impact, Charcoal, sans-serif; text-align: center;">
DMC</h3>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<div class="col-lg-offset-2">
<form>
<div class="form-group">
<div class="input-group">
<input id="txtSearch" class="form-control input-lg" type="text" placeholder="Search..." />
<div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
</div>
<table id="table_body" border='1'>
<thead>
<tr>
<th>City</th>
<th>Zip</th>
</tr>
</thead>
</table>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#txtSearch').autocomplete({
source: "post_search.php",
minLength: 3
}).data("ui-autocomplete")._renderMenu = function (ul, items) {
$("#table_body tbody tr").remove();
$.each( items, function( index, item ) {
console.log(item);
var table = $("#table_body");
if (item.id != '#') {
table.append("<tr><td>"+item.value+"</td><td>"+item.id+"</td>");
}
});
};
});
</script>
</body>
</html>
I'm trying to allow a pop up to display always when a user is basically unregistered and wishes to view the certain page. I saw an example of how to do it but I am completely stuck it's not appearing on my page. Any ideas?
Thanks!
Image: http://puu.sh/cr1Zz/1b5da28635.png
My code on that page(CSS is listed in the image above)
<?php
session_start();
include ('../includes/config.php');
include ('../includes/header.php');
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Honda | </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
<link href="../css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--start lightbox -->
<link rel="stylesheet" type="text/css" href="../css/jquery.lightbox.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.lightbox.js"></script>
<script>
// Initiate Lightbox
$(function() {
$('.gallery1 a').lightbox();
});
</script>
</head>
<body>
<div class='modalDialog'>You cannot view this page! Please register</div>
<!--start header-->
<div class="h_bg">
<div class="wrap">
<div class="wrapper">
<div class="header">
<div class="logo">
<img src="../images/logo.png">
</div>
<div class="cssmenu">
<ul>
<li><span>Home</span></li>
<li><span>About</span></li>
<li class="active" class="has-sub"><span>Gallery</span>
</li>
<li class="last"><span>Contact</span></li>
<div class="clear"></div>
<div class="search">
<h2>search</h2>
<form>
<input type="text" value="" placeholder="Enter Your search...">
<input type="submit" value="">
</form>
</div>
<?php
if(isset($_POST["submit"])){
if(!empty($_POST['user']) && !empty($_POST['pass'])) {
$user=$_POST['user'];
$pass=$_POST['pass'];
$pass = strip_tags($pass);
$pass = md5($pass); // md5 is used to encrypt your password to make it more secure.
$query=mysql_query("SELECT * FROM login WHERE username='".$user."' AND password='".$pass."'");
$numrows=mysql_num_rows($query);
if($numrows!=0)
{
while($row=mysql_fetch_assoc($query))
{
$dbusername=$row['username'];
$dbpassword=$row['password'];
}
if($user == $dbusername && $pass == $dbpassword)
{
session_start();
$_SESSION['sess_user']=$user;
/* Redirect browser */
header("Location: member.php");
}
} else {
echo "<div class='results'>Invalid username or password!</div>";
}
} else {
echo "All fields are required!";
}
}
?>
<div class="search1">
<h2>login/Register</h2>
<form action="" method="POST">
<label>Username:</label>
<input type="text" name="user" required />
<label>Password:</label>
<input type="password" name="pass" required />
<input type="submit" value="Login" name="submit" class="submit" />
<br><br>
<center>
<h2><p>Register</p></h2>
</center>
</form>
</div>
</div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- start content -->
<div class="footer_bg">
<div class="wrap">
<div class="wrapper">
<div class="footer2">
<div class="copy">
<p class="w3-link">© </p>
</div>
<div class="f_nav">
<ul>
<li>Skype</li>
<li>Linked in</li>
<li>Twitter</li>
<li>Facebook</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Although you include jQuery, the modal dialog is part of the jQueryUI. But that on its own won't solve your problem. You have declared a div with the class modalDialog, so I suppose this is the line to be shown in the dialog. I would suggest you to use id's instead of classes because a class covers multiple document objects, and you really want to show one dialog here. From the jQueryUI docs:
<div id="dialog" title="Please register">
<p>You cannot view this page! Please register</p>
</div>
Add the jQuery call:
$(function() {
$( "#dialog" ).dialog();
});
And that should work just fine
If you decide to go with the lightbox modal dialog your code should look like:
<div id="test-modal" class="white-popup-block mfp-hide">
<h1>lease register</h1>
<p>You cannot view this page! Please register</p>
<p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
</div>
To call the code use:
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
preloader: false,
focus: '#username',
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
How can i convert this to an wordpress new page. I tried to add it tru html but that didn't work. My dropdown is all mest up. Nothing seems to be good. Can anyone help me out please?
Are point me in the wright direction. Are show me a preview how i can fix this problem.
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Smoelenboek</title>
<link rel="stylesheet" href="css/bootstrap-theme.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/default.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/tablesorter.js"></script>
<script id="data" type="text/javascript" src="js/search.js" xmlData="data/raetexport.xml"></script>
</head>
<body>
<STYLE TYPE="text/css">
body { background-image:url('background-alert-ipad.jpg'); }
</style>
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<div id="controller">
<label class="control-label" for="searchinput"><Font color="#FFFFFF">Zoeken:</font>
<input type="text" id="term">
</label>
<div class="control-group">
<div class="controls">
<label class="control-label"><Font color="#FFFFFF">Opties:</font>
<select name="category" id="category">
<option value="none">Selecteer een optie</option>
<option value="roepnaam">Voornaam</option>
<option value="naamMedewerker">Achternaam</option>
<option value="team">Team</option>
</select>
</label>
</div>
</div>
</div>
</div>
</div>
<input name="Zoeken" type="button" id="searchButton" value="Search">
</fieldset>
</form>
<div id="result"> </div>
</body>
</html>
This was the correct fix.
Insert HTML Snippet WordPress plugin is the solution, It Adds HTML,
CSS and JavaScript code to your pages and posts easily. – user3599534
1 hour ago
Thank you.
How to search records in table . i want to search data using id. if that id is available in database then open edit.jsp if not exist then display any error message. i want to use jsp technology.
Search.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Upload Page</title>
<link rel="stylesheet" type="text/css" href="hicourt.css"/>
<script language="javascript" type="text/javascript">
</script>
<body onLoad="randomString()">
<form name="f1" method="post" action="edit.jsp">
<div id="wrapper">
<div id="banner">
</div>
<div id="navigation" align="center">
Search Registration Number
</div>
<div id="content_area">
<p class="contact"><label for="name"><span style="font-weight:bold">EDIT</span></label>
<input id="id" name="id" placeholder="Advocate Reg Number" required="" type="text">
</p>
<div style="text-align:center">
<input name="submit" id="submit" tabindex="10" value="EDIT" align="middle"type="submit">
</div> </div>
<div id="footer">
</div>
</div>
</form>
</body>
</html>
When this code runs you can see it doesn't render the programmatically added input field as a mobile styled element. I could force it to by adding all the classes that get put in when a page is rendered (commented out). Is there an easier way?
http://jsfiddle.net/mckennatim/KKTr4/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
</head>
<body>
<div id="thelists" data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<h3>Add List</h3>
<form>
<div data-role="controlgroup" id="addwhat">
<input type="text" name="inp0" class="inp" />
</div>
<div data-role="controlgroup" data-type="horizontal" class="aisubmit">
<input type="submit" data-theme="b" id="addinput" value="Add Input"/>
</div>
</form>
</div><!-- /content -->
</div><!-- /page -->
<script>
var ct =0;
$('body').on('click', "#addinput", function (e) {
ct++;
e.stopImmediatePropagation();
e.preventDefault();
//to add form elemnt you have to add all the class css stuff
//$('#addwhat').append('<input type="text" name="list' + ct + '" class="inp ui-input-text ui-body-c ui-corner-all ui-shadow-inset" />');
$('#addwhat').append('<input type="text" name="list' + ct + '"/>');
});
</script>
</body>
</html>
$('#thelists').trigger('create');
should do the trick.