I want to add a slider in the form tag. Right now all the pictures are together. i want to make it more user friendly. As you can see in my code i'm fetching all images from database. And i've override the input radio button on each image so that the user can select its image.
I've already tried to use the Slick library but its not good.
<style type="text/css">
/*
html, body {
margin: 0;
padding: 0;
}
*/
* {
box-sizing: border-box;
}
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
opacity: 1;
}
.img{
width: 10%;
}
</style>
<style media="screen">
.input-hidden {
position: absolute;
left: -9999px;
}
input[type=radio]:checked + label>img {
border: 1px solid #fff;
box-shadow: 0 0 3px 3px #090;
}
input[type=radio]:checked + label>img {
transform:
rotateZ(-10deg)
rotateX(10deg);
}
/* Stuff after this is only to make things more pretty */
input[type=radio] + label>img {
width: 115px;
height: 115px;
transition: 500ms all;
}
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<form action="preview.php" method="post" >
<?php
$result_model = mysqli_query($conn, "SELECT * FROM model ORDER BY id DESC ");
$result_metal = mysqli_query($conn, "SELECT * FROM metal ORDER BY id DESC ");
$result_stone = mysqli_query($conn, "SELECT * FROM stone ORDER BY id DESC "); ?>
<div >
<div class="input-group">
<p>Choose your Model:</p>
</div>
<div class="regular slider">
<?php
while($model = mysqli_fetch_assoc($result_model)){
?>
<!-- <input type="radio" name="model" id="model<?= $model['id'] ?>" class="input-hidden" value="<?= $model['id'] ?>" />-->
<!--
<label for="model<?= $model['id'] ?>">
-->
<img
src="images/<?= $model['image'] ?>"
alt="<?= $model['name'] ?>" style="width:50%;" />
<!-- </label>-->
<?php
}
?>
<!-- </div>-->
<!-- <br>-->
<div>
<!--
<div class="input-group">
<p>Choose your Metal:</p>
</div>
-->
<!--
-->
</div>
<br>
</div>
<div class="input-group">
<p>Choose your Metal:</p>
</div>
<div class="regular slider">
<?php
while($metal = mysqli_fetch_assoc($result_metal)){
?>
<!--
<input type="radio" name="metal" id="metal<?= $metal['id'] ?>" class="input-hidden" value="<?= $metal['id'] ?>" />
-->
<!-- <label for="metal<?= $metal['id'] ?>">-->
<img
src="images/<?= $metal['image'] ?>"
alt="<?= $metal['name'] ?>" />
<!-- </label>-->
<?php
}
?>
?>
<!-- </div>-->
<!-- <br>-->
<div>
<!--
<div class="input-group">
<p>Choose your Metal:</p>
</div>
-->
<!--
-->
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".regular").slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
});
</script>
</div>
</form>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I'm new for the PHP & I begin the project which was involving the PHP. my firm has a dynamic drop down. I can't insert the dynamic drop down data to the database.
Here's my index.php form.
<?php
//index.php
include('database_connection.php');
$query = " SELECT * FROM first_level_category ORDER BY first_level_category_name ASC ";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
?> <!DOCTYPE html> <style>
* { box-sizing: border-box; }
input[type=text], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; }
label { padding: 12px 12px 12px 0; display: inline-block; }
/* Set a style for the submit button */ .registerbtn { background-color: #4CAF50; color: white; padding: 10px 10px; margin: 2px 0; border: none; cursor: pointer; width: 50%; opacity: 0.9; }
.registerbtn:hover { opacity: 1; }
.container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; }
.col-25 { float: left; width: 30%; margin-top: 6px; }
.col-35 { float: left; width: 25%; margin-top: 6px; }
.col-75 { float: left; width: 30%; margin-top: 6px; }
div.ui-datepicker{ font-size:20px; float: left; width: 30%; margin-top: 6px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; }
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */ #media screen and (max-width: 600px) { .col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0; } </style>
<html> <head> <title>Bootstrap Multi Select Dynamic Dependent
Select box using PHP Ajax </title> <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" /> </head> <body> <br /> <div class="container"> <form action="action.php" method="post"> <h2 align="center">Multi Select Dynamic Dependent Select box using PHP Ajax</h2> <br /><br /> <div style="width: 500px; margin:0 auto">
<div class="form-group"> <div class="container"> <form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="policynumber">Policy Number</label>
</div>
<div class="col-75">
<input type="text" id="policynumber" name="pid" placeholder="Policy number...">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="date">Date</label>
</div>
<div class="ui-datepicker">
<input type="date" id="date" name="date" placeholder="date">
</div>
</div>
<div class="row">
<div class="col-25">
<label>Department</label> </div> <div class="col-75">
<select id="first_level" name="first_level" multiple class="form-control">
<?php
foreach($result as $row)
{
echo '<option value="'.$row["first_level_category_id"].'">'.$row["first_level_category_name"].'</option>';
}
?>
</select>
</div> </div>
<div class="row">
<div class="col-25">
<label>Supporting Documents</label> </div> <div class="col-75">
<select id="second_level" name="second_level" multiple class="form-control">
</select>
</div> </div>
<!--<div class="row">
<div class="col-25">
<label>First Level Category</label> </div> <div class="col-75">
<select id="third_level" name="third_level[]" multiple class="form-control">
</select> </div> </div>-->
<button type="submit" class="registerbtn">Submit</button> </div>
</form> </body> </html> <script> $(document).ready(function(){
$('#first_level').multiselect({ nonSelectedText:'Select First Level Category', buttonWidth:'400px', onChange:function(option, checked){ $('#second_level').html(''); $('#second_level').multiselect('rebuild'); $('#third_level').html(''); $('#third_level').multiselect('rebuild'); var selected = this.$select.val(); if(selected.length > 0) {
$.ajax({
url:"fetch_second_level_category.php",
method:"POST",
data:{selected:selected},
success:function(data)
{
$('#second_level').html(data);
$('#second_level').multiselect('rebuild');
}
}) } } });
$('#second_level').multiselect({ nonSelectedText: 'Select Second Level Category', buttonWidth:'400px', onChange:function(option, checked) { $('#third_level').html(''); $('#third_level').multiselect('rebuild'); var selected = this.$select.val(); if(selected.length > 0) {
$.ajax({
url:"fetch_third_level_category.php",
method:"POST",
data:{selected:selected},
success:function(data)
{
$('#third_level').html(data);
$('#third_level').multiselect('rebuild');
}
}); } } });
$('#third_level').multiselect({ nonSelectedText: 'Select Third Level Category', buttonWidth:'400px' });
}); </script>
Here's my Action.php code
//here's my action.php form
// Check connection if($connect === false){
die("ERROR: Could not connect. " . mysqli_connect_error()); }
if(isset($_POST["submit"]));
// Escape user inputs for security
$pid = $_POST['pid']; $date = $_POST['date']; $record1 = is_array('first_level'); $record2 = is_array('second_level');
// Attempt insert query execution $sql = "INSERT INTO saveditem (pid, date, department,supdoc) VALUES ('$pid', '$date','$record1','$record2')";
if(mysqli_query($connect, $sql)){
echo "Records inserted successfully."; } else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($connect); } // Close connection mysqli_close($connect); ?>
Can someone help me out?
try to var_dump($result) before you looping them to make sure your data is ready to use
<?php
var_dump($result);
foreach($result as $row)
{?>
<option value="<?php echo $row['first_level_category_id']; ?>"><?php echo $row['first_level_category_name']; ?></option>
<?php
}
?>
You can json_encode and json_decode. Encode the array and then insert into the database. if you need to fetch the array from the database, json_decode it.
More info:
https://www.php.net/manual/en/function.json-encode.php
https://www.php.net/manual/en/function.json-decode.php
Hello i have a difficulty in setting up the width for the input radio button.
As you can see i'm using a ui-grid-b. the problem here is in the ui-block-c.. where in block-c i'm insert the control group for the radio button. I want to set the width for radio button for id 'full' is 60%, radio button id'half' is 20% and for the radio button id'one' is 20%.. which mean it total 100% that equal to the width for the ui-controlgroup-controls. i want to use the maximum width for the ui-controlgroup-controls with the different width for each radio button
<style>
.ui-grid-b>.ui-block-a {
width: 25%;
}
.ui-grid-b>.ui-block-b, .ui-grid-b>.ui-block-c {
width: 15%;
}
.ui-grid-b>.ui-block-c {
width: 60%;
}
#myGroup {
font-size: 84%;
}
#myGroup .ui-controlgroup-label{
float: none;
display: block;
text-align: center;
width: 100%;
}
#myGroup .ui-controlgroup-label legend{
font-weight: bold;
font-size: 130%;
width: 100%;
margin-bottom: 8px;
}
#myGroup .ui-controlgroup-controls {
float: none;
display: block;
width: 100%;
}
#myGroup .ui-radio{
width: 33.33%;
}
#myGroup .ui-radio label{
text-align: center;
white-space: nowrap;
}
</style>
</head>
<body>
<div data-role="page" id="login">
<div data-role="header" style="background-color:rgba(4, 165, 52, 0.86);">
<h1 align="center">
Header
</h1>
</div>
<div data-role="content" class="content">
<div class="ui-grid-b">
<div class="ui-block-a">
<input type="text" value="Input"/>
</div>
<div class="ui-block-b">
</div>
<div class="ui-block-c">
<div id="myGroup" data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="false" data-theme="b" data-corners="false"> <!-- strength -->
<input type="radio" name="full" id="full" value="" />
<label for="full" >Full</label>
<input type="radio" name="half" id="half" value="" />
<label for="radio-view-b" >Half</label>
<input type="radio" name="one" id="one" value="" />
<label for="one" >One</label>
</fieldset>
</div>
</div>
</div>
</div>
<div class="footer" data-role="footer" data-position="fixed">
<h1 align="center"><i>Footer</i></h1>
</div>
</div>
I'm a newbie about css (as you can see how bad is my webpage) and I'm having problem to put some content at the center top of the page. In my webpage I also use bootstrap, because many people told me that it make easier creating nice css. The page is a View of CodeIgniter project, so, for this reason you will see some Php code:
Home_view.php
<!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">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" src="http://fancyapps.com/fancybox/source/jquery.fancybox.css"></script>
<script type="text/javascript" src="<?php echo base_url('/Fancybox/source/jquery.fancybox.js'); ?>"></script>
<script type="text/javascript" src="<?php echo base_url('/Fancybox/lib/jquery.mousewheel-3.0.6.pack.js'); ?>"></script>
<title>Private Area</title>
<link rel="stylesheet" href="<?php echo base_url('home_view_style.css');?>">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">
<img src="<?php echo base_url('Immagini/icon-prof.png'); ?>">
<h4>Benvenuto <!-- <?php echo $username; ?> --> </h4>
Logout
<a class="fancybox" data-fancybox-type="iframe" rel="group" href="http://www.istruzioneformazionelavoro.it/Engine/RAServeFile.php/f/corsi/84/Tabella_corsi_allegatoDD311.pdf">prova</a>
</div>
</div>
</div>
<div id="loader" style="margin-left: 300px;">
<div class="loader">
<?php echo form_open_multipart('materiale/inserisci');?>
<input type="file" name="userfile" size="20" />
<br />
<form class="form-inline">
<div class="form-group">
Nome<input type="text" class="form-control" name="Nome" size="20" />
</div>
<br />
<div class="form-group">
Descrizione<input type="text" class="form-control" name="Descrizione" size="20" />
</div>
<br />
<label for="tipo_libro"><input id="tipo_libro" type="radio" name="tipo" value="libro" checked/>Libro</label>
<br/>
<label for="tipo_guide"><input id="tipo_guide" type="radio" name="tipo" value="guide"/>Guida</label>
<br/>
<label for="tipo_video"><input id="tipo_video" type="radio" name="tipo" value="video"/>Video</label>
<br/>
<label for="tipo_animazioni"><input id="tipo_animazioni" type="radio" name="tipo" value="animazioni"/>Animazioni</label>
<br/>
<label for="tipo_registrazioni"><input id="tipo_registrazioni" type="radio" name="tipo" value="registrazioni"/>Registrazioni</label>
<br/>
<input type="submit" class="btn" value="Carica" />
<br/>
<br/>
<br/>
<br/>
</form>
<div>
<h3><span class="label label-success">Libri</span> </h3>
<?php
echo "<table>";
echo "<tbody>";
echo "</br>";
foreach ($libri as $row):
?>
<tr>
<td>
<div>
</br>
<img src="<?php echo base_url('Immagini/book.png'); ?>" />
<?php echo $row['nome']; ?>
<img src="<?php echo base_url('Immagini/button_close.png'); ?>"/>
</div>
</td>
</tr>
<?php
endforeach;
?>
<?php
echo "</tbody>";
echo "</table>";
?>
</div>
</br>
</br>
<div>
<h3><span class="label label-success">Guide</span> </h3>
<?php
echo "<table>";
echo "<tbody>";
echo "</br>";
foreach ($guide as $row):
?>
<tr>
<td>
<div>
</br>
<img src="<?php echo base_url('Immagini/guide.png'); ?>" />
<?php echo $row['nome']; ?>
<img src="<?php echo base_url('Immagini/button_close.png'); ?>"/>
</div>
</td>
</tr>
<?php
endforeach;
?>
<?php
echo "</tbody>";
echo "</table>";
?>
</div>
</br>
</br>
<div>
<h3><span class="label label-success">Video</span> </h3>
<?php
echo "<table>";
echo "<tbody>";
echo "</br>";
foreach ($video as $row):
?>
<tr>
<td>
<div>
</br>
<img src="<?php echo base_url('Immagini/video.png'); ?>" />
<?php echo $row['nome']; ?>
<img src="<?php echo base_url('Immagini/button_close.png'); ?>"/>
</div>
</td>
</tr>
<?php
endforeach;
?>
<?php
echo "</tbody>";
echo "</table>";
?>
</div>
</br>
</br>
<div>
<h3><span class="label label-success">Animazioni</span></h3>
<?php
echo "<table>";
echo "<tbody>";
echo "</br>";
foreach ($animazioni as $row):
?>
<tr>
<td>
<div>
</br>
<img src="<?php echo base_url('Immagini/animazioni.png'); ?>" />
<?php echo $row['nome']; ?>
<img src="<?php echo base_url('Immagini/button_close.png'); ?>"/>
</div>
</td>
</tr>
<?php
endforeach;
?>
<?php
echo "</tbody>";
echo "</table>";
?>
</div>
</br>
</br>
<div>
<h3><span class="label label-success">Registrazioni</span> </h3>
<?php
echo "<table>";
echo "<tbody>";
echo "</br>";
foreach ($registrazioni as $row):
?>
<tr>
<td>
<div>
<img src="<?php echo base_url('immagini/video.png'); ?>" />
<?php echo $row['nome']; ?>
<img src="<?php echo base_url('Immagini/button_close.png'); ?>"/>
</div>
</td>
</tr>
<?php
endforeach;
?>
<?php
echo "</tbody>";
echo "</table>";
?>
</div>
</br>
</br>
<div>
</div>
</div>
</div> <!-- end #container-->
</body>
</html>
I would like to have something similar to this:
I tried many ways, for example I tried this:
#top {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 23px;
text-align:center;
}
and the use into the div , but unfortunately with no results. I ask to have patience because I'm a newbie of css, and I'm having trouble to understand. In the end, if anyone can give me also aesthetic suggests I'll be happy, in this way I'll grow even more.
Update 2:
home_view_style.css
* {
box-sizing: border-box
}
html,
body {
margin: 0;
padding: 0;
}
body {
background-image: url("immagini/Opedia_lab_Logged.png");
background-size: cover;
font-family: "Trebuchet MS",Arial;
font-size: 14px;
}
.btn {
color: #fff;
background-color: #84ae6a;
border-color: #84ae6a;
position:absolute; // absolutely positioned
right: 100%;
}
a{
text-decoration: none;
}
#log {
margin: 60px 0px 0px 0px;
}
#log {
margin-top: 80px;
}
#log {
margin: 20px;
background: rgba(90,90,90,0.1);
border-radius: 20px;
padding: 20px;
text-align: center;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#side-nav {
padding: 20px 40px;
}
#viewport.open #side-nav, #side-nav {
width: 25%;
left: 0px;
}
#side-nav {
width: 40%;
left: -40%;
}
#side-nav {
width: 80%;
left: -80%;
-webkit-transition: 0.5s cubic-bezier(0.190,1.000,0.220,1.000);
transition: 0.5s cubic-bezier(0.190,1.000,0.220,1.000);
}
#side-nav {
position: absolute;
min-height: 100%;
top: 0px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#loader{
position: absolute;
top: 0;
left: 35%;
width: 30%;
text-align: center;
font: 14px ,Arial;
color: #5C5C5C;
background: #F2FFED;
padding: 10px;
}
/*.container {
width: 100%;
height: 300px;
background-color: rgba(255, 255, 255, .5);
position: absolute;
top: 20%;
left: 50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
*/
/*
.container {
width: 100%;
height: 300px;
background-color: rgba(255, 255, 255, .5);
position: absolute;
top: 20%;
left: 50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.inputs {
position: absolute;
top: 75%;
left: 50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.input.submit {
position: absolute;
top: 75%;
right: 70%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
*/
This is the problem I have created a page which get the variable and process on it and get the data from the database.
The data fetched is paginated by pagination function file.
I want to use a image loader when i click on page 2 the loading image should appear till the data is displayed and once the data is displayed the loading image should disappear.
Here are my files...
<?php
session_start();
if (isset($_GET["topic_name"]))
{
$_SESSION['topic_name']=$_GET["topic_name"];
$topicget = $_SESSION['topic_name'];
}
else
{
$topicget = 'Age';
}
//get the function
include_once('dbconnect.php');
include_once ('function.php');
$page = (int) (!isset($_GET["page"]) ? 1 : $_GET["page"]);
$limit = 15;
$startpoint = ($page * $limit) - $limit;
//to make pagination
$statement = "`topic`,`author`,`quote` WHERE ( quote.topics REGEXP '[[:<:]]{$topicget}[[:>:]]' and topic.topic_en= '{$topicget}')and quote.author_id=author.id";
$query = mysqli_query($con,"SELECT * FROM {$statement} LIMIT {$startpoint} , {$limit}");
if($query === FALSE) {
die(mysqli_error($con)); // TODO: better error handling
}
?>
<html>
<head>
<title>Pixster Quotes</title>
<link href="files/core_msnry.css" media="screen, print" type="text/css" rel="stylesheet">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="files/pagination.css" rel="stylesheet" type="text/css" />
<link href="files/grey.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="files/footer-distributed-with-address-and-phones.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#imgloader").hide(); //will hide the gif
$("#masonry").ajaxStart(function(){
$("#imgloader").show(); //when pagination is clicked, loader will show
})
$("#masonry").ajaxStop(function () {
$('#imgloader').hide();
});
});
</script>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.item {
position: absolute;
margin:10px;
margin-top:40px;
margin-left:0px;
margin-right:10px!important;
width: 300px;
height: auto;
float: left;
background: #ffff;
font-size:20px !important;
text-align:center;
display: block;
line-height: 1.42857143;
-webkit-box-shadow: 0px 0px 15px -9px rgba(28,27,28,1);
-moz-box-shadow: 0px 0px 15px -9px rgba(28,27,28,1);
box-shadow: 0px 0px 15px -9px rgba(28,27,28,1);
-webkit-filter: grayscale(00%);
-moz-filter: grayscale(00%);
-o-filter: grayscale(00%);
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.item:hover {
-webkit-box-shadow: 0px 0px 29px -12px rgba(0,0,0,0.85);
-moz-box-shadow: 0px 0px 29px -12px rgba(0,0,0,0.85);
box-shadow: 0px 0px 29px -12px rgba(0,0,0,0.85);
-webkit-transform: scale(1.005);
-moz-transform: scale(1.005);
-ms-transform: scale(1.005);
-o-transform: scale(1.005);
transform: scale(1.005);
}
.char a{
color:white;
}
#masonry{
height:auto; !important;
}
#imgloader{
margin:100px;
}
</style>
</head>
<body>
<!--header-->
<div style="height: 40px;" class="sticky-wrapper" id="bq-tn-id-sticky-wrapper">
<nav style="" id="bq-tn-id" class="bq-tnav navbar navbar-default bq-cookie-notice ng-scope" data-ng-controller="NavBarCtrl">
<div class="cl">
<div class="navbar-header">
<a class="brand" style="padding:0px 5px 0px 5px; color:white" href="#/"><span class="bqDesktopLogo"></span></a>
</div>
<div class="collapse data-ng-cloak navbar-collapse" data-ng-class="navBarClass()" data-ng-click="navCollapsed=true">
<ul class="nav navbar-nav">
<li class="bq-ni hidden-xs bq-nav-large" id="sl-bq-nav-home-t">Home</li>
<li class="bq-ni">Authors</li>
<li class="bq-ni">Topics</li>
</ul>
<ul class="nav data-ng-cloak navbar-nav navbar-right">
<li>
<form action="search.php" method="GET" class="navbar-form navbar-left bq-nav-large no-border bq-no-print navbar-left form-search ng-pristine ng-valid" style="padding-left:8px;margin-top:5px">
<div class="form-group bq-search">
<input class="s-btn fa-input fa fa-search" value=" " type="submit">
<input id="bq-search-input" placeholder="search" maxlength="80" name="q" class="s-fld-t input-medium search-query s-small" type="text">
</div>
</form>
</li>
</ul>
</div>
</div>
</nav></div>
<!--header ends-->
<div class="letter-navbar qs-blk" style="text-align: center; letter-spacing: 2px">
<span class="body bq-tn-letters"> <span id="bq-auth-lbl" class="bq-tn-wrap">Authors:</span>
<span class="char">
<?php
$chars = range('a', 'z');
foreach($chars as $eachChar){
echo ''.strtoupper($eachChar).' ';
}
?>
</span>
</span>
</div>
<center><img id="imgloader" src='../quotes/img/loading.gif'/></center>
<div id='masonry'>
<center> <h1><strong><?php echo $topicget; echo " related Quotes";?></strong></h1></center>
<?php
$Authorname='';
$quote='';
$tag='';
$NothingFound=true;
$count=1;
while ($row = mysqli_fetch_assoc($query)) {
$NothingFound=false;
$quote =$row['quote'];
$Authorname =$row['name'];
$tag =$row['topic_en'];
?>
<div class="item">
<?php echo $quote; ?><br>
<?php echo "Author:- {$Authorname}";?>
</div>
<?php $count++;
}?>
<?php if($NothingFound){?>
<div class="item">
<?php echo "NOTHING FOUND";?>
</div>
<?php } ?>
</div>
<script src='masonry.pkgd.min.js'></script>
<script>
var container = document.querySelector('#masonry');
var masonry = new Masonry(container, {
columnWidth: 50,
itemSelector: '.item'
});
</script>
<?php echo pagination($statement,$limit,$page);?>
<div style="margin-top:20px>"<?php include('footer.php');?></div>
</body>
</html>
Add a gif give it an id='imgloader'.
<script>
$(document).ready({
$("#imgloader").hide(); //will hide the gif
$("#masonry").click(function(){
$("#imgloader").show(); //when pagination is clicked, loader will show
$("#masonry").hide();// to hide your mess data
});
});
</script>
Edit 1
<script>
$(document).ready(function (){
$("#imgloader").hide(); //will hide the gif
$("#masonry").ajaxStart(function(){
$("#imgloader").show(); //loader will show
$("#masonry").hide();// to hide your mess data
});
$("#masonry").ajaxStop(function () {
$('#imgloader').hide();// loader will hide
$("#masonry").show();// to show your mess data
});
});
</script>
The problem in my code, it does not submit when I press submit although I checked the syntax 100 times and changed it the requirement. I think the problem here it's not work probably cause of submission
My HTML code:
<!DOCTYPE HTML>
<html>
<head>
<title>forms</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" />
<![endif]-->
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Sans:400,700'>
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Oleo+Script:400,700'>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<style type="text/css">
body, html {
height: absolute;
margin: 0;
-webkit-font-smoothing: antialiased;
font-weight: 100;
font-family: helvetica;
}
.tabs input[type=radio] {
position: relative;
top: -9999px;
left: -9999px;
}
.tabs {
width: 650px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 75px auto;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
border-radius: 2px 2px 0 0;
color: #14AA1E;
font-size: 24px;
font-weight: normal;
font-family: 'Oleo Script', serif;
background: #D4D3D3;
cursor: pointer;
position: relative;
top: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: rgba(255,255,255,0.5);
top: 0;
}
[id^=tab]:checked + label {
background: #f7f7f7;
color: black;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content], [id^=tab]:checked ~ [id^=tab-content] > div {
display: block;
}
.tab-content{
z-index: 2;
display: none;
text-align: center;
overflow: hidden;
width: 100%;
font-size: 20px;
line-height: 140%;
padding-top: 10px;
background-color: #f7f7f7;
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0)), url('images/bg01.png');
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0)), url('images/bg01.png');
background-image: -o-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0)), url('images/bg01.png');
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0)), url('images/bg01.png');
background-image: linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0)), url('images/bg01.png');
background-position: top left, top left;
background-repeat: repeat-x, repeat;
background-size: 100% 30em, auto;
padding: 15px;
color: black;
position: relative;
top: 53px;
left: 0;
box-sizing: border-box;
}
.tab-content div{
display: none;
-webkit-animation-duration: 1s;
-o-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
}
.chbox form input {
width: 10px;
height: 30px;
background: #fcfcfc;
border: 1px solid #ddd;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.1) inset;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.1) inset;
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
color: #888;
font-size: 16px;
}
</style>
</head>
<body class="no-sidebar">
<!-- Header -->
<div id="header-wrapper">
<header id="header" class="container">
<!-- Logo -->
<div id="logo">
<h1>HAC</h1>
<span>Humanitarian Aid Commission</span>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li class="current">T.A Form</li>
<li>Home</li>
</ul>
</nav>
</header>
</div>
<!-- Main -->
<!-- Content -->
<div class="main">
<div class="register span6">
<form action="" method="post">
<!--button 1-->
<button type="button" action = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Step One</button>
<div id="light" class="white_content">
<h2>Basic Info <span class="red"><strong>STEP 1</strong></span></h2>
<div id="D1">
<label for="p_name">Project Name</label>
<input type="text" id="firstname" name="p_name" >
<label for="p_loc">Location</label>
<input type="text" id="lastname" name="p_loc" >
<label for="p_desc">Project Description</label>
<input type="text" id="username" name="p_desc" >
<label for="Goals">Project Goals</label>
<input type="text" id="email" name="Goals" >
</div>
<div id="D2">
<label for="stdate">start date</label>
<input type="date" name="stdate">
<label for="enddate">end date</label>
<input type="date" name="enddate">
<label for="input_exp">inputs Expenses</label>
<input type="number" id="inputsExpenses" name="input_exp" >
<label for="Operating_exp">Operating expenses</label>
<input type="number" id="Operatingexpenses" name="Operating_exp" >
</div>
<!--<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="choose a password..."> -->
<button type="button" action = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Go to Step two</button>
</div>
<div id="fade" class="black_overlay"></div>
<!--button 2-->
<button type="button" action = "javascript:void(0)" onclick = "document.getElementById('light1').style.display='block';document.getElementById('fade1').style.display='block'">Step two</button>
<div id="light1" class="white_content">
<table>
<tr><td colspan="2">
<h2>staffing</h2></td>
</tr>
<tr>
<td><label for="sd_staff">number of Sudanese staff</label></td>
<td><input type="number" id="sd_staff" name="sd_staff" ></td>
</tr>
<tr>
<td><label for="int_staff">number of internationals staff: </label></td>
<td><input type="number" id="int_staff" name="int_staff" ></td>
</tr>
<tr>
<td colspan="2">
<h2>Partners</h2> </td>
</tr>
<tr>
<td><label>NGOs Partners</label></td>
<td><input type="checkbox" value="1" name="ch1"></td>
</tr>
<tr>
<td><label>Governmental partners</label></td>
<td><input type="checkbox" class="chbox" value="2" name="ch2"></td>
</tr>
<tr>
<td><label>COBs organization</label></td>
<td><input type="checkbox" class="chbox" value="3" name="ch3"></td>
</tr>
<tr>
<td><label>others</label></td>
<td><input type="checkbox" value="4" class="chbox" name="ch4"></td>
</tr>
<tr><td colspan="2">
<h3>beneficiaries :</h3>
</td>
</tr>
<tr>
<td><label>children</label></td>
<td><input type="checkbox" value="1" name="ch11"></td>
</tr>
<tr>
<td><label>Women</label></td>
<td><input type="checkbox" class="chbox" value="2" name="ch22"></td>
</tr>
<tr>
<td><label>Old men</label></td>
<td><input type="checkbox" class="chbox" value="3" name="ch33"></td>
</tr>
<tr>
<td><label>Refugees</label></td>
<td><input type="checkbox" value="4" class="chbox" name="ch44"></td>
</tr>
<tr>
<td><label>disabled</label></td>
<td><input type="checkbox" value="4" class="chbox" name="ch55"></td>
</tr>
<tr><td rowspan="2">
<button type="button" action = "javascript:void(0)" onclick = "document.getElementById('light1').style.display='none';document.getElementById('fade1').style.display='none'">Go to Step three</button>
</td>
</tr>
</table>
</div>
<div id="fade1" class="black_overlay"></div>
<!--button 3-->
<button type="button" action = "javascript:void(0)" onclick = "document.getElementById('light2').style.display='block';document.getElementById('fade2').style.display='block'">Step three</button>
<div id="light2" class="white_content">
<h2>Basic Info <span class="red"><strong>STEP 3</strong></span></h2>
<div id="D1">
<p>Submit this form now
</p>
</div>
<input type="submit" action = "TASubmit.php" >Submit</input>
</div>
<div id="fade2" class="black_overlay"></div>
</form>
</div>
</div>
<!-- Footer -->
<div id="footer-wrapper">
<footer id="footer" class="container">
<div class="row">
<div class="12u">
<div id="copyright">
<ul class="menu">
<li>© Website. All rights reserved</li><li>Design: Computer Science </li>
</ul>
</div>
</div>
</div>
</footer>
</div>
<!-- Javascript -->
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/scripts.js"></script>
</body>
</html>
And here's my PHP one:
<?php
$servername = "localhost";
$username = "root";
$password = "mkmbhs";
$dbname = "HACsys";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error )) {
die("connect error({$conn->connect_errno}) {$conn->connect_error}")
$p_name = mysql_real_escape_string($_POST['p_name']);
$p_loc = mysql_real_escape_string($_POST['p_loc']);
$p_desc = mysql_real_escape_string($_POST['p_desc'])
$Goals = mysql_real_escape_string($_POST['Goals'])
$stdate = mysql_real_escape_string($_POST['stdate'])
$enddate = mysql_real_escape_string($_POST['enddate'])
$input_exp = mysql_real_escape_string($_POST['input_exp'])
$Operating_exp = mysql_real_escape_string($_POST['Operating_exp'])
$sd_staff = mysql_real_escape_string($_POST['sd_staff'])
$int_staff = mysql_real_escape_string($_POST['int_staff'])
$ch1 = mysql_real_escape_string($_POST['ch1'])
$ch2 = mysql_real_escape_string($_POST['ch2'])
$ch3 = mysql_real_escape_string($_POST['ch3'])
$ch4 = mysql_real_escape_string($_POST['ch4'])
$ch11 = mysql_real_escape_string($_POST['ch11'])
$ch33 = mysql_real_escape_string($_POST['ch33'])
$ch44 = mysql_real_escape_string($_POST['ch44'])
$ch55 = mysql_real_escape_string($_POST['ch55'])
$Budget = $input_exp + $Operating_exp ;
$sql = "INSERT INTO hac_emp (proj_name,Location,Start _date,End_date,General_goals,Budget,inputs_expenses ,Operating_expenses,NGO_Partners,CBOs_Partners,Govern_Partners,other_Partners,Sd_emp,int_emp, p_desc)
VALUES ('$p_name','$p_loc',$stdate,$enddate,'$Goals',$Budget,$input_exp,$Operating_exp,$ch1,$ch3,$ch2,$ch4,$sd_staff,$int_staff,'$p_desc')";
$result = mysql_query($sql);
if (mysqli_query($conn, $sql)) {
echo "New record created successfully";}
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);}
mysqli_close($conn);
?>
it seems miss the url of page that have to process the form in the tag from.
<form action="myphppage.php" method="post">
You should write in the action attribute the destination url
Yep, try:
<form action="TASubmit.php" method="post">
..and you can remove the "action" attribute from your submit button.