Get records in auto suggestion search box - php

I want to get all the records in autocomplete search box.
And as well get complete record from database of selected keyword from autocomplete list.
Output here
http://appail.xyz/ajax-box-php-master/
How can i get complete record by selecting the keyword??
Thank in Advance...
Here is added my PHP, HTML Code.
PHP Code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote:'search.php?key=%QUERY',
limit : 10
});
});
</script>
.bs-example{
font-family: sans-serif;
position: relative;
margin: 50px;
}
.typeahead, .tt-query, .tt-hint {
border: 2px solid #CCCCCC;
border-radius: 8px;
font-size: 24px;
height: 30px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 396px;
}
.typeahead {
background-color: #FFFFFF;
}
.typeahead:focus {
border: 2px solid #0097CF;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 8px 0;
width: 422px;
}
.tt-suggestion {
font-size: 24px;
line-height: 24px;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #0097CF;
color: #FFFFFF;
}
.tt-suggestion p {
margin: 0;
}
<div class="panel panel-default">
<div class="bs-example">
<input type="text" name="typeahead" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Type your Query">
</div>
</div>
<?php
$key=$_GET['key'];
$array = array();
$con=mysqli_connect("localhost","appail_register","appail_register","appail_register");
$query=mysqli_query($con, "select * from login where username LIKE '%{$key}%'");
while($row=mysqli_fetch_assoc($query)){
$array[] = $row['username'];}
echo json_encode($array);
mysqli_close($con);
?>

Related

PHP Instant Search of MySQL Database using AJAX, Twitter Typeahead Fails

I am trying to implement an instant search on an html page using Twitter Typeahead, and it doesn't respond when text is typed into the search box, and there are no errors in chrome's javascript console.
All the code being used is totally simplified, so it seems very strange that this would be happening.
Any help would be greatly appreciated.
sql to create database:
CREATE DATABASE `library`;
USE `library`;
CREATE TABLE IF NOT EXISTS `books` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`title` varchar(100) NOT NULL,
`author` varchar(30) NOT NULL,
`isbn` varchar(30) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1_swedish_ci AUTO_INCREMENT=6;
INSERT INTO `books` (`id`, `title`, `author`, `isbn`) VALUES
(1, 'Learning PHP, MySQL & JavaScript', 'Robin Nixon', 'ISBN-13: 978-1491918661'),
(2, 'PHP and MySQL for Dynamic Web Sites', 'Larry Ullman', 'ISBN-13: 978-0321784070'),
(3, 'PHP Cookbook', 'David Sklar', 'ISBN-13: 978-1449363758'),
(4, 'Programming PHP', 'Kevin Tatroe', 'ISBN-13: 978-1449392772'),
(5, 'Modern PHP: New Features and Good Practices', 'Josh Lockhart', 'ISBN-13: 978-1491905012');
index.html
<html>
<head>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="typeahead.bundle.js"></script>
<script type="text/javascript">
window.onload = function() {
if (window.jQuery) {
alert("jQuery is loaded");
} else {
alert("jQuery is not loaded");
}
}
</script>
<title>AJAX PHP Search Engine Script for MySQL Database</title>
<style type="text/css">
.se-example {
font-family: sans-serif;
position: relative;
margin: 100px;
}
.typeahead {
background-color: #FFFFFF;
}
.typeahead:focus {
border: 1px solid #999999;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.typeahead, .tt-query, .tt-hint {
border: 1px solid #CCCCCC;
border-radius: 4px;
font-size: 16px;
height: 38px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 396px;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 8px 0;
width: 422px;
}
.tt-suggestion {
font-size: 16px;
line-height: 24px;
padding: 3px 20px;
}
.tt-suggestion p {
margin: 0;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #999999;
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="se-example">
<input id="searchbox" type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Search for Book Name..."/>
</div>
<script>
$(document).ready(function(){
$('#searchbox').typeahead({
remote: 'search.php?st=%QUERY'
});
console.log("typeahead fired");
});
</script>
</body>
</html>
search.php
<?php
$str = $_GET['st'];
$connection = mysqli_connect("localhost", "username", "password", "library");
$sql = "SELECT title FROM books WHERE title LIKE '%{$str}%'";
$result = mysqli_query($connection, $sql);
$array = array();
while($row = mysqli_fetch_assoc($result)) {
$array[] = $row['title'];
}
echo json_encode($array);
?>
Here is the index.html that works, but it uses the 10.4 version of typeahead (https://plugins.jquery.com/typeahead.js/0.10.4/):
<html>
<head>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="typeahead.bundle.min.js"></script>
<script type="text/javascript">
window.onload = function() {
if (window.jQuery) {
alert("jQuery is loaded");
} else {
alert("jQuery is not loaded");
}
}
</script>
<title>AJAX PHP Search Engine Script for MySQL Database</title>
<style type="text/css">
.se-example {
font-family: sans-serif;
position: relative;
margin: 100px;
}
.typeahead {
background-color: #FFFFFF;
}
.typeahead:focus {
border: 1px solid #999999;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.typeahead, .tt-query, .tt-hint {
border: 1px solid #CCCCCC;
border-radius: 4px;
font-size: 16px;
height: 38px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 396px;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 8px 0;
width: 422px;
}
.tt-suggestion {
font-size: 16px;
line-height: 24px;
padding: 3px 20px;
}
.tt-suggestion p {
margin: 0;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #999999;
color: #FF0000;
}
</style>
</head>
<body>
<div class="se-example">
<input id="searchbox" type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Search for Book Name..."/>
</div>
<script>
$(document).ready(function(){
// Instantiate the Bloodhound suggestion engine
var source = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url:'search.php?st=%QUERY',
wildcard: '%QUERY',
filter: function (results) {
// Map the remote source JSON array to a JavaScript object array
return $.map(results, function (result) {
return {
value: result
};
});
}
}
});
// Initialize the Bloodhound suggestion engine
source.initialize();
$('#searchbox').typeahead(null, {
display: 'value',
source: source.ttAdapter(),
limit:5
});
console.log("typeahead fired");
});
</script>
</body>
</html>

Search bar with autocomplete or typeahead

I am trying to implement a search bar that will display some suggested text ahead of you when you are typing. I am following this tutorial http://mycodde.blogspot.com/2013/12/typeaheadjs-autocomplete-tutorial-ajax.html but i cant seem to get it right. Whenever I type a text, it does not suggest some text. Is there something that I am doing wrong?
My index.html
<!DOCTYPE>
<html lang="en">
<head>
<title>Typeahead.js Tutorial with Mysql Database</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.23.1" />
</head>
<link href="bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="typeahead.min.js"></script>
<script src="http://cdn.jsdelivr.net/typeahead.js/0.9.3/typeahead.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<style>
.tt-query,
.tt-hint {
width: 396px;
height: 30px;
padding: 8px 12px;
font-size: 24px;
line-height: 30px;
border: 2px solid #ccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
outline: none;
}
.tt-query {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999
}
.tt-dropdown-menu {
width: 422px;
margin-top: 12px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0097cf;
}
</style>
<script>
$(document).ready(function(){
$("#search").typeahead({
name : 'sear',
remote: {
url : 'connection.php?query=%QUERY'
}
});
});
</script>
<body>
<input type="text" name="search" id="search">
</body>
</html>
My connection.php
<?php
$con = new mysqli("localhost","root","","lab");
$result = $con->query("SELECT fname,lname FROM members LIMIT 0,10");
while ($row = $result->fetch_object()){
$user_arr[] = $row->fname;
$user_arr2[] = $row->lname;
}
$result->close();
echo json_encode($user_arr2);
?>

How I can do a cover with a big dynamic table in DOMPDF

The code I have is like this, I use CodeIgniter and DOMPDF library but between pages I have a full blank page (I don't want this), I have something just like my image.
Anyone can help me? Really thanks.
$language = $this->input->cookie('language');
if (!isset($language))
{
$language = $core_settings->language;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="Author" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#page {
margin: 0;
}
.pages {
margin: .5in;
}
.other-pages{
padding:60px;
}
.first-page {
margin: 0in;
background-color: black;
height: 100%;
width: 100%;
position:absolute;
background-image: url('https://www.example.com/wp-content/uploads/2015/09/example-cover1.jpg');
background-position: bottom center;
background-repeat: no-repeat;
background-size: 100%;
}
.first-page + * {
page-break-before: always;
}
// CUSTOM STYLE //
#page {
background: #ffffff;
width: 100%;
margin: 0 auto;
margin-top: 0px;
display: block;
z-index: 0;
}
.headline {
color: #4d5357;
font-weight: lighter;
font-size: 48px;
margin: 20px 0 0 0;
}
.terms {
width: 400px;
margin: 0 0 40px 0;
font-size: 12px;
color: #a1a7ac;
line-height: 180%;
}
.terms strong {
font-size: 16px;
}
.recipient-address {
padding-top: 60px;
width: 200px;
}
.company-logo {
right: 40px;
top: 40px;
float:right;
max-height:70px;
}
.company-address {
width: 200px;
color: #a1a7ac;
position: absolute;
right: 0px;
top:70px;
text-align: right;
}
.status {
position: absolute;
top: -50px;
left: -50px;
text-indent: -5000px;
width: 128px;
height: 128px;
}
.Open {
background-image: url(<?php echo base_url(); ?>assets/blackline/img/<?=$language;?>/status-open.png);
}
.Sent {
background-image: url(<?php echo base_url(); ?>assets/blackline/img/<?=$language;?>/status-sent.png);
}
.Paid {
background-image: url(<?php echo base_url(); ?>assets/blackline/img/<?=$language;?>/status-paid.png);
}
.Overdue {
background-image: url(<?php echo base_url(); ?>assets/blackline/img/<?=$language;?>/status-overdue.png);
}
hr {
clear: both;
border: none;
background: none;
border-bottom: 1px solid #d6dde2;
}
.total-due {
float: right;
width: 250px;
border: 1px solid #d6dde2;
margin: 20px 0 40px 0;
padding: 0;
border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
text-align: right;
}
.total-heading {
background: #e7ebee;
color: #63676b;
text-shadow: 0 1px 1px #ffffff;
padding: 8px 20px 0 0;
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.08);
border-bottom: 1px solid #d6dde2;
}
.total-heading p, .total-amount p {
margin: 0; padding: 0;
}
.total-amount {
padding: 8px 20px 8px 0;
color: #4d5357;
font-size: 24px;
margin:0;
}
table.tablesorter {
width: 100%;
text-align: left;
border:0;
margin: 0px 0 0 0;
color: #a1a7ac;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
margin: 0;
}
table.tablesorter thead tr.header {
background: #e7ebee;
color: #4d5357;
text-shadow: 0 1px 1px #ffffff;
padding-left: 20px;
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.08);
border-bottom: 1px solid #d6dde2;
}
table.tablesorter thead tr.header th{
font-size: 11px;
height:30px;
border-bottom: 1px solid #d8dcdf;
text-align: left;
padding-left:10px;
}
.round{
border: 1px solid #d6dde2;
border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
}
table.tablesorter tbody td {
padding: 10px;
vertical-align: top;
font-size: 11px;
}
table.tablesorter tbody tr.even td {
background: #f6f8f9;
}
.custom-terms {
padding:20px 10px;
}
.sum{
width:50%;
padding:5px 10px;
}
.margin{
padding:5px 10px;
height:20px;
}
</style>
</head>
<body>
<div class="pages first-page"></div>
<div class="other-pages">
<h2>Lorem ipsum dolor...</h2>
<div class="round">
<table id="table" class="tablesorter" cellspacing="0" >
<thead>
<tr class="header">
<th width="5%">#</th>
<th width="95%">Tarea</th>
</tr>
</thead>
<tbody>
<?php $i = 0; $sum = 0; $row=false; ?>
<?php foreach ($tasks as $task):?>
<tr <?php if($row){?>class="even"<?php } ?> >
<td><?php echo $i; ?></td>
<td><?php echo $task->name; ?><?php echo strip_tags($task->description); ?></td>
</tr>
<?php $i++; endforeach; $row = true; ?>
</tbody>
</table>
</div>
</div>
</body>
</html>

Search results "floating" over rest of the page?

I am made a instant search feature for my website as you can see here: harrisonbh.com/chatterr/instant_search/ but the search results just push down the content.
index.php
<html>
<head>
<title>Search Box</title>
<link rel="stylesheet" href="style.css"/>
<script src="../js/jquery-1.9.1.js"></script>
<script src="index.js"></script>
</head>
<body>
<?php
//include 'connect.php';
include '../core/database/connect.php';
?>
<span id="box">
<input type="text" id="search_box"><button id="search_button">Search</button>
</span>
<div id="search_result">
</div>
Rest of content
</body>
</html>
index.js
$(document).ready(function(){
var left = $('#box').position().left;
var top = $('#box').position().top;
var width = $('#box').width();
$('#search_result').css('left', left).css('top', top+32).css('width', width);
$('#search_box').keyup(function(){
var value = $(this).val();
if(value != ''){
$('#search_result').show();
$.post('search.php', {value: value}, function(data){
$('#search_result').html(data);
});
} else {
$('#search_result').hide();
}
});
});
search.php
<?php
//include 'connect.php';
include '../core/database/connect.php';
$value = $_POST['value'];
$search_query = mysql_query("SELECT username FROM users WHERE username LIKE '$value%'");
while ($run = mysql_fetch_array($search_query)){
$username = $run['username'];
echo '<a href=#>'.$username.'</a><br/>';
}
?>
body{
font-family: arial;
font-size: 12px;
color: #333;
background:#fff;
}
input{
padding: 5px;
border: 0px;
font-family: arial;
font-size: 12px;
color: #333;
background:#fff;
box-shadow: 0 0 5px rgba(210, 210, 210, 210);
}
button{
padding: 5px;
border: 0px;
font-family: arial;
font-size: 12px;
color: #fff;
background:#4aaee7;
/*box-shadow: 0 0 5px rgba(210, 210, 210, 210);*/
}
button:hover{
background:#fff;
color: #333;
box-shadow: 0 0 5px rgba(210, 210, 210, 210);
cursor: pointer;
}
#search_result{
}
/*#search_result {
font-size: 12px;
padding: 5px;
box-shadow: 0 0 5px rgba(210, 210, 210, 210);
background: #fff;
color: #333;
position: absolute;
display: none;
}*/
a {
background:#4aaee7;
color: #fff;
text-decoration: none;
padding: 5px;
margin-top: 5px;
margin-bottom: -14px;
display: block;
}
a:hover{
background: #fff;
color: #4aaee7;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
li {
padding: 5px;
}
I'm not sure if i should be using position: absolute; or what to fix this. What do you think that I should do? Thanks.
Just enclose you input text field and search button in <div style="float:left;">
I mean, like this:
<div style="float:left;">
<span id="box">
<input type="text" id="search_box"><button id="search_button">Search</button>
</span>
<div id="search_result">
</div>
</div>

IE-only css affect only the page in IE, and not in other browsers

My webpage that I am working on works fine in other browsers except IE. I am using IE 10 (the preview version) so I can use shadows, and the <br /> isn't working so I made an IE-specific css so that if the browser is IE, it loads the IE css. Well, when I go to change the margins for the .homepagetable, it also applies the css to the other browsers. The difference between main.css and all-ie-only.css is the .homepagetable.
Index.php
<? include("inc/incfiles/header.inc.php"); ?>
<?
$reg = #$_POST['reg'];
//declaring variables to prevent errors
$fn = ""; //First Name
$ln = ""; //Last Name
$un = ""; //Username
$em = ""; //Email
$em2 = ""; //Email 2
$pswd = ""; //Password
$pswd2 = ""; //Password 2
$d = ""; //Sign up Date
$u_check = ""; //Check if username exists
//registration form
$fn = strip_tags(#$_POST['fname']);
$ln = strip_tags(#$_POST['lname']);
$un = strip_tags(#$_POST['username']);
$em = strip_tags(#$_POST['email']);
$em2 = strip_tags(#$_POST['email2']);
$pswd = strip_tags(#$_POST['password']);
$pswd2 = strip_tags(#$_POST['password2']);
$d = date("y-m-d"); // Year - Month - Day
if ($reg) {
if ($em==$em2) {
// Check if user already exists
$u_check = mysql_query("SELECT username FROM users WHERE username='$un'");
// Count the amount of rows where username = $un
$check = mysql_num_rows($u_check);
if ($check == 0) {
//check all of the fields have been filled in
if ($fn&&$ln&&$un&&$em&&$em2&&$pswd&&$pswd2) {
// check that passwords match
if ($pswd==$pswd2) {
// check the maximum length of username/first name/last name does not exceed 25 characters
if (strlen($un)>25||strlen($fn)>25||strlen($ln)>25) {
echo "The maximum limit for username/first name/last name is 25 characters!";
}
else
{
// check the length of the password is between 5 and 30 characters long
if (strlen($pswd)>30||strlen($pswd)<5) {
echo "Your password must be between 5 and 30 characters long!";
}
else
{
//encrypt password and password 2 using md5 before sending to database
$pswd = md5($pswd);
$pswd2 = md5($pswd2);
$query = mysql_query("INSERT INTO users VALUES ('','$un','$fn','$ln','$em','$pswd','d','0')");
die("<h2>Welcome to Rebel Connect</h2>Login to your account to get started.");
}
}
}
else {
echo "Your passwords don't match!";
}
}
else
{
echo "Please fill in all fields";
}
}
else
{
echo "Username already taken.";
}
}
else {
echo "Your e-mails don't match!";
}
}
?>
<?
//Login Script
if (isset($_POST["user_login"]) && isset($_POST["password_login"])) {
$user_login = preg_replace('#[^A-Za-z0-9]#i', '', $_POST["user_login"]); // filter everything but numbers and letters
$password_login = preg_replace('#[^A-Za-z0-9]#i', '', $_POST["password_login"]); // filter everything but numbers and letters
$password_login=md5($password_login);
$sql = mysql_query("SELECT id FROM users WHERE username='$user_login' AND password='$password_login' LIMIT 1"); // query the person
//Check for their existance
$userCount = mysql_num_rows($sql); //Count the number of rows returned
if ($userCount == 1) {
while($row = mysql_fetch_array($sql)){
$id = $row["id"];
}
$_SESSION["id"] = $id;
$_SESSION["user_login"] = $user_login;
$_Session["password_login"] = $password_login;
exit("<meta http-equiv=\"refresh\" content=\"0\">");
} else {
echo 'That information is incorrect, try again';
exit();
}
}
?>
<table class="homepageTable">
<tr>
<td width="60%" valign="top">
<h2>Already a member? Login below.</h2>
<form action="index.php" method="post" name="form1" id="form1">
<input type="text" size="25" name="user_login" id="user_login" placeholder="username" />
<br />
<input type="password" size="25" name="password_login" id="password_login" placeholder="password" />
<br />
<input type="submit" name="button" id="button" value="Login to your account!">
</form>
</td>
<td width="40%" valign="top">
<h2>Sign up below...</h2>
<form action="#" method="post">
<input type="text" size="25" name="fname" placeholder="First Name" value="<? echo $fn; ?>">
<input type="text" size="25" name="lname" placeholder="Last Name" value="<? echo $ln; ?>">
<input type="text" size="25" name="username" placeholder="Username" value="<? echo $un; ?>">
<input type="text" size="25" name="email" placeholder="Email" value="<? echo $em; ?>">
<input type="text" size="25" name="email2" placeholder="Re-enter Email" value="<? echo $em2; ?>">
<input type="password" size="25" name="password" placeholder="password" value="<? echo $pswd; ?>">
<input type="password" size="25" name="password2" placeholder="Re-enter Password" value="<? echo $pswd2; ?>"><br />
<input type="submit" name="reg" value="Sign Up!">
</form>
</td>
</tr>
</table>
</body>
</html>
header.inc.php
<?
include ("inc/scripts/mysql_connect.inc.php");
session_start();
if (!isset($_SESSION["user_login"])) {
}
else
{
header("location: home.php");
}
?>
<html>
<head>
<if !IE>
<link href="css/main.css" rel="stylesheet" type="text/css">
<if IE>
<link rel="stylesheet" type="text/css" href="css/all-ie-only.css" />
<title>Rebel Reach - PHS Student Social Network</title>
</head>
<body>
<div class="headerMenu">
<div id="wrapper">
<div class="logo">
<img src="img/find_friends_logo.png">
</div>
<div class="search_box">
<form method="get" action="search.php" id="search">
<input name="q" type="text" size="60" placeholder="Search..." />
</form>
</div>
<div id="menu">
Home
About
Sign Up
Login
</div>
</div>
</div>
<br />
<br />
<br />
<br />
main.css
* {
margin: 0px;
padding: 0px;
font-family: Arial;
font-size: 12px;
background-color: #eff5f9
}
.headerMenu {
background-image:url(../img/menu_bg.png);
height: 56px;
border-bottom: 0px;
width: 100%;
position:fixed;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
padding-top: 0px;
padding-bottom: 0px;
background-image:url(../img/menu_bg.png);
}
.logo {
margin-left: 0px;
width: 125px;
}
.logo img {
padding-top: 7px;
width: 150px;
height: 38px;
background-image:url(../img/menu_bg.png);
}
.search_box {
background-image: url(../img/menu_bg.png);
position: absolute;
top: 13px;
margin-left: 150px;
border:inset 2px
}
#search input[type="text"] {
background: url(../img/search-white.png) no-repeat 10px 6px #666;
outline: none;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
width: 350px;
padding: 6px 15px 6px 35px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
margin-bottom: 0px;
margin-top: 0px;
}
#search input[type="text"]:focus {
background: url(../img/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 350px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
#media screen and (max-width:1280px) {
#menu {
background-image:url(../img/menu_bg.png);
position:absolute; top:0px; right:0px;
height: 37px;
padding-top: 16px;
margin-right: 4%;
}
}
#media screen and (min-width:1280px) {
#menu {
background-image:url(../img/menu_bg.png);
position:absolute; top:0px; right:0px;
height: 37px;
padding-top: 16px;
margin-right: 6%;
}
}
#media screen and (min-width:1400px) {
#menu {
background-image:url(../img/menu_bg.png);
position:absolute; top:0px; right:0px;
height: 37px;
padding-top: 19px;
margin-right: 10%;
}
}
#media screen and (min-width:1920px) {
#menu {
background-image:url(../img/menu_bg.png);
position:absolute; top:0px; right:0px;
height: 37px;
padding-top: 19px;
margin-right: 25%;
}
}
#menu a {
color: #ffffff;
text-decoration: none;
font-size: 14px;
background-image:url(../img/menu_bg.png);
background-repeat: no-repeat;
padding-top: 16px;
padding-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
}
#menu a:hover {
color: #ffffff;
text-decoration: none;
font-size: 14px;
background-image:url(../img/menu_bg_hover_mouse_over.png);
background-repeat: no-repeat;
padding-top: 16px;
padding-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
}
h2 {
font-family: Arial;
font-size: 18px;
padding: 5px;
color: #0084C6;
}
input[type="text"] {
background-color: #FFFFFF;
border: 1px solid #E2E2E2;
font-size: 15px;
padding: 5px;
width: 300px;
margin-bottom: 3px;
margin-top: 3px;
outline:none;
}
input[type="text"]:hover {
border: 1px solid #0084C6;
}
input[type="password"] {
background-color: #FFFFFF;
border: 1px solid #E2E2E2;
font-size: 15px;
padding: 5px;
width: 300px;
margin-bottom: 3px;
margin-top: 3px;
outline:none;
}
input[type="password"]:hover {
border: 1px solid #0084C6;
}
input[type="submit"] {
background-color: #006fc4;
border: 1px solid #00508d;
font-size: 15px;
color: #FFFFFF;
padding: 5px;
margin-bottom: 3px;
margin-top: 3px;
border-radius: 7px;
}
.homepageTable {
padding: 10px;
}
all-ie-only.css
* {
margin: 0px;
padding: 0px;
font-family: Arial;
font-size: 12px;
background-color: #eff5f9
}
.headerMenu {
background-image:url(../img/menu_bg.png);
height: 56px;
border-bottom: 0px;
width: 100%;
position:fixed;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
padding-top: 0px;
padding-bottom: 0px;
background-image:url(../img/menu_bg.png);
}
.logo {
margin-left: 0px;
width: 125px;
}
.logo img {
padding-top: 7px;
width: 150px;
height: 38px;
background-image:url(../img/menu_bg.png);
}
.search_box {
background-image: url(../img/menu_bg.png);
position: absolute;
top: 13px;
margin-left: 150px;
border:inset 2px
}
#search input[type="text"] {
background: url(../img/search-white.png) no-repeat 10px 6px #666;
outline: none;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
width: 350px;
padding: 6px 15px 6px 35px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
margin-bottom: 0px;
margin-top: 0px;
}
#search input[type="text"]:focus {
background: url(../img/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 350px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
}
#media screen and (max-width:1280px) {
#menu {
background-image:url(../img/menu_bg.png);
position:absolute; top:0px; right:0px;
height: 37px;
padding-top: 16px;
margin-right: 4%;
}
}
#media screen and (min-width:1280px) {
#menu {
background-image:url(../img/menu_bg.png);
position:absolute; top:0px; right:0px;
height: 37px;
padding-top: 16px;
margin-right: 6%;
}
}
#media screen and (min-width:1400px) {
#menu {
background-image:url(../img/menu_bg.png);
position:absolute; top:0px; right:0px;
height: 37px;
padding-top: 19px;
margin-right: 10%;
}
}
#media screen and (min-width:1920px) {
#menu {
background-image:url(../img/menu_bg.png);
position:absolute; top:0px; right:0px;
height: 37px;
padding-top: 19px;
margin-right: 25%;
}
}
#menu a {
color: #ffffff;
text-decoration: none;
font-size: 14px;
background-image:url(../img/menu_bg.png);
background-repeat: no-repeat;
padding-top: 16px;
padding-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
}
#menu a:hover {
color: #ffffff;
text-decoration: none;
font-size: 14px;
background-image:url(../img/menu_bg_hover_mouse_over.png);
background-repeat: no-repeat;
padding-top: 16px;
padding-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
}
h2 {
font-family: Arial;
font-size: 18px;
padding: 5px;
color: #0084C6;
clear: both;
}
input[type="text"] {
background-color: #FFFFFF;
border: 1px solid #E2E2E2;
font-size: 15px;
padding: 5px;
width: 300px;
margin-bottom: 3px;
margin-top: 3px;
outline:none;
}
input[type="text"]:hover {
border: 1px solid #0084C6;
}
input[type="password"] {
background-color: #FFFFFF;
border: 1px solid #E2E2E2;
font-size: 15px;
padding: 5px;
width: 300px;
margin-bottom: 3px;
margin-top: 3px;
outline:none;
}
input[type="password"]:hover {
border: 1px solid #0084C6;
}
input[type="submit"] {
background-color: #006fc4;
border: 1px solid #00508d;
font-size: 15px;
color: #FFFFFF;
padding: 5px;
margin-bottom: 3px;
margin-top: 3px;
border-radius: 7px;
}
.homepageTable {
padding: 10px;
}
You should definitely listen to #SDC's comment regarding security flaws. That's a far more significant issue than cross-browser compatibility.
Aside from that, your code isn't working because this:
<if !IE>
<link href="css/main.css" rel="stylesheet" type="text/css">
<if IE>
<link rel="stylesheet" type="text/css" href="css/all-ie-only.css" />
isn't valid.
IE10 should be compliant with the same standards as other browsers. It sounds like IE10 is running in quirks mode at the moment. Dropping a <!DOCTYPE> in immediately before your <html> should fix the problem. Then, you don't need to use your conditionals.
If you're still stuck on the idea of using conditionals, try something like:
<link href="css/main.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/all-ie-only.css" />
<![endif]-->
But, this includes both main.css and all-ie-only.css.

Categories