I am trying to figure out a way I can have a toggle for my menu icon at the top of my web app. Basically a user can click the menu icon and it opens up an off-canvas panel and the menu icon turns to an close(x) icon giving the user a choice to close the panel. So far I have got the panels to open the way I want them to but I can't get the icons to change and function properly. Here is what I have so far.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<link rel="manifest" href="manifest.json">
<!-- Tags to allow users to save to phone in fullscreen -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- /// -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/pwrpg.css">
<title>Hello, world!</title>
</head>
<body>
<header id="header" class="bg-success">
<div class="left-head">
<div class="navbutton"><span class="icon-menu"></span> | Close</div>
</div>
<div class="logo-head">
Logo
</div>
<div class="right-head">
<div class="chatbutton">Open | Close</div>
</div>
</header>
<div id="wrapper">
<div id="sidebar-left">
<ul>
<li>Index</li>
<li>Page</li>
</ul>
</div>
<div id="sidebar-right">right sidebar</div>
<div id="main">
Page 1 Back
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="js/pwrpg.js"></script>
</body>
</html>
CSS
#header {position: relative;height:50px; display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;}
.left-head, .logo-head, .right-head { -ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;}
.left-head{text-align: left;max-width: 20%;}
.logo-head{text-align: center;max-width:60%;}
.right-head{text-align: right;max-width:20%;}
.navbutton {display:none;}
.chatbutton {display:none;}
.navbutton {display:block;padding: 5px 10px;}
.chatbutton {display:block;padding: 5px 10px;}
.icon-menu {font-size:36px;}
JS
/* Main Navigation on Handheld Devices */
function openNav() {
document.getElementById("sidebar-left").classList.add("transition-in");
document.getElementById("sidebar-right").classList.remove("transition-in");
}
function closeNav() {
document.getElementById("sidebar-left").classList.remove("transition-in");
}
/* Chat Box on Handheld Devices */
function openChat() {
document.getElementById("sidebar-right").classList.add("transition-in");
document.getElementById("sidebar-left").classList.remove("transition-in");
}
function closeChat() {
document.getElementById("sidebar-right").classList.remove("transition-in");
}
window.addEventListener('click', function(e){
if (document.getElementById('main').contains(e.target)){
document.getElementById("sidebar-left").classList.remove("transition-in");
document.getElementById("sidebar-right").classList.remove("transition-in");
} else{
}
})
https://jsfiddle.net/23Lu2k8m/
Related
Just wanted to ask a quick question with my jquery code. just started using Jquery/JS and I feel like there is a cleaner way to do this. It does fade to "and much more" but when it goes back, its not a fade its more of a switch.
$(document).ready(function() {
setInterval(swapText, 4000);
function swapText(){
$("#profile-text-fade").fadeOut(500, function() {
$(this).fadeIn(1000).delay(2000);
$(this).html('and much more!');
$(this).fadeIn(2000, function () {
$(this).html('In the making, Soon to show all the work I can crate!');
});
});
}
});
body {
background-color: #FFC85E;
}
.aligh {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.jumbotron_resize {
padding-top: 18%;
padding-bottom: 10em;
margin-bottom: 10em;
background-color: #FFC85E;
font-size: 1.2em;
}
h1, p{
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Profile Test Page">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Salvador Cervantes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel='stylesheet' type:'text/css' href='../CSS/main.css'>
<title>
Test page
</title>
</head>
<body>
<div class="align">
<div class="jumbotron jumbotron-fluid jumbotron_resize">
<div class="container">
<h1 class="display-3">test Profile</h1>
<p id='profile-text-fade' class="lead">In the making, Soon to show all the work I can crate!</p>
</div>
</div>
<footer>
<div>
<p>© 2017
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src='../js/main.js'></script>
</body>
</html>
Now what I'm trying to do is to fadeout the text that is on the webpage and replace it with "and much more!" and then fade back to the original text of "in the making...". right now, the last part just snaps back to place and dones't fade. Any help would be amazing!
Thank you
Your text is not fading in as you don't fade it out. ie it does: $("#div").fadeIn().fadeIn()
Change your last fadeIn to:
$(this).fadeOut(500, function() {
$(this).fadeIn(2000, function () {
$(this).html('In the making, Soon to show all the work I can crate!');
You might like to consider a refactor to create a list of messages and then simply loop through them. This will also be re-usable and allow you to add more messages without lots of nasty callback-chaining, eg:
var msgs = ["msg1", "msg2"];
var indx = 0;
$("#div").text(msgs[indx]);
setInterval(function() {
$("#div").fadeOut(
500,
function() {
indx++;
if (indx>=msgs.length) indx=0;
$(this).text(msgs[indx]);
$(this).fadeIn(500);
});
}, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>initial message</div>
I think this is what you needed edited your code, you have to fadeOut it before the last fadeIn, (i have slightly increased the interval for some smooth effect)
$(document).ready(function() {
swapText();
setInterval(swapText, 6000);
function swapText(){
$("#profile-text-fade").stop();
$("#profile-text-fade").fadeOut(1500, function() {
$(this).html('and much more!');
$(this).fadeIn(1500);
$(this).fadeOut(1500, function () {
$(this).fadeIn(1500);
$(this).html('In the making, Soon to show all the work I can crate!');
});
});
}
});
body {
background-color: #FFC85E;
}
.aligh {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.jumbotron_resize {
padding-top: 18%;
padding-bottom: 10em;
margin-bottom: 10em;
background-color: #FFC85E;
font-size: 1.2em;
}
h1, p{
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Profile Test Page">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Salvador Cervantes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel='stylesheet' type:'text/css' href='../CSS/main.css'>
<title>
Test page
</title>
</head>
<body>
<div class="align">
<div class="jumbotron jumbotron-fluid jumbotron_resize">
<div class="container">
<h1 class="display-3">test Profile</h1>
<p id='profile-text-fade' class="lead">In the making, Soon to show all the work I can crate!</p>
</div>
</div>
<footer>
<div>
<p>© 2017
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src='../js/main.js'></script>
</body>
</html>
My class fixed-content appears to be stopping onmouseover from changing an images which uses src.this
The html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blah</title>
<link href="https://fonts.googleapis.com/css?family=Mada:900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet">
<script src="https://use.fontawesome.com/07f9f0d505.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="fixed-content col-md-1 hidden-sm-down">
<div class="row">
<div class="col-md-12 firstSideMenuElement">
<img class="sideMenu" src="images/Desmond_blank-01.png" onmouseover="this.src='images/Desmond_mouseover-01.png'" onmouseout="this.src='images/Desmond_blank-01.png'">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The css
.fixed-content{
top: 0;
/*bottom:0;*/
right: 0;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
When I remove this class from the html the onmouseover works correctly.
UPDATE:
This code is at https://sonjadorlas.github.io/Website/desmond.html
The sidebar menu, which contains four images should change slightly onmouseover. When I scroll down the page, this menu is fixed as I want. But when I mouseover the icons in the sidebar menu again, they do not change. If I scroll back to the top of the page, the behaviour is correct again on mouseover.
SOLUTION:
/* SIDE BAR */
.fixed-content{
top: 0;
right: 0;
z-index: 100;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
Thanks
I think your problem has to do with the z-index on your .fixed-content. You need to make sure that the z-index puts it's position above the other content.
Try adding something like this:
.fixed-content{
z-index: 10;
}
I want to change the markdown height to fill div height but I can't make it.
I have the following files -
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-markdown.min.css" rel="stylesheet">
<link href="admin.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="md-editor active half-width">
<textarea id="target-editor" class="target-editor-twitter md-input"> </textarea>
</div>
<div id="result" class="half-width">
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-markdown.js"></script>
<script src="assets/js/markdown.js"></script>
<script src="assets/js/to-markdown.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
window.onload = function(){
$('#target-editor').markdown({
savable:true,
onShow: function(e){
e.hideButtons("cmdPreview");
},
onSave: function(e) {
alert("Saving '"+e.getContent()+"'...")
},
onChange: function(e){
var content = e.parseContent()
$('#result').html(content);
}
});
};
admin.css
body, html{
height:100%;
}
.half-width{
width:50%;
float:left;
height:100%;
padding:10px;
margin:0;
position:relative;
}
and the output is -
How to change markdown height to fill div height?
Look at snippet
window.onload = function(){
$('#target-editor').markdown({
savable:true,
onShow: function(e){
//e.hideButtons("cmdPreview");
e.$textarea.css('resize','vertical');
e.$textarea.css('height', ($(".md-editor").height()-90)+'px');
},
onSave: function(e) {
alert("Saving '"+e.getContent()+"'...")
},
onChange: function(e){
var content = e.parseContent()
$('#result').html(content);
}
});
};
$(window).resize(function(){
$("#target-editor").height(($(".md-editor").height()-90)+'px');
});
body, html{
height:100%;
}
.half-width{
width:50%;
float:left;
height:100%;
padding:10px;
margin:0;
position:relative;
}
.md-editor>.md-header {
margin-left: 5px;
}
.md-editor {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.2.1/js/bootstrap-markdown.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.2.1/css/bootstrap-markdown.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="half-width">
<textarea id="target-editor" class="target-editor-twitter md-input" data-provide="markdown-editable" rows="20"> </textarea>
</div>
<div id="result" class="half-width">
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Collecting Data for Database</title>
<meta name="description" content="">
<meta name="author" content="AleR">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="skeleton.css">
<!-- <link rel="stylesheet" href="backbone.css"> -->
<style>
#container{
width:90%;
margin: 40px auto 0 auto;
}
h1 {color:lightgreen;}
</style>
<style>
body {background-color:lightgreen; color: green;}
h1 {color: lightgreen;}
p {color: lightgreen;}
header {
margin-top: -25px;
margin-left: -500px;
height: 100px;
width: 10000px;
background-color: green;
}
nav{background-color: green; height: 100%;
width: 100%;}
aside{background-color: green; height: 100%;
width: 100%;}
</style>
</head>
<header></header>
<nav></nav>
<aside></aside>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div id="container" align="center">
<form action="final.php" method="post">
<div class="row">
<div class="six columns">
<label for="Age">Category</label>
<input class="u-full-width" type="text" name="Category">
<label for="Qualifications">Qualifications</label>
<input class="u-full-width" type="text" name="Qualifications">
<label for="Experience">Experience</label>
<input class="u-full-width" type="text" name="Experience">
</form>
</div>
</div>
<form action="final.php" method="post">
<input class="button-primary" type="submit" value="Submit">
</form>
</div>
</body>
</html>
In the first code set I am running into the normalize and skeleton css pages being recognized. Aside from this the submit button works but will not write to my databse.
PHP TO
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Audio Search</title>
<meta name="description" content="">
<meta name="author" content="AlexR">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="skeleton.css">
<!-- <link rel="stylesheet" href="backbone.css"> -->
<style>
#container{
width:90%;
margin: 40px auto 0 auto;
}
background{
color: green;
}
</style>
<style>
body {background-color:lightgreen;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div id="container">
<form>
<div class="row">
<div class="six columns">
<p>Thank you for your name and e-mail.</p>
<?php
error_reporting(E_ALL);
DEFINE('DB_USERNAME', '*****');
DEFINE('DB_PASSWORD', '*****');
DEFINE('DB_HOST', 'localhost');
DEFINE('DB_DATABASE', '*****');
echo "here!";
if (isset($_REQUEST['Experience'])){
$Age = $_REQUEST['Age'];
$Qualifications = $_REQUEST['Qualifications'];
$Experience = $_REQUEST['Experience'];
#echo "Thanks for your submission.";
$dbc = mysqli_connect(DB_HOST,DB_USERNAME,DB_PASSWORD,DB_DATABASE) OR die ('Could not connect to MySQL: '.mysqli_connect_error());
$q = "INSERT INTO `FinalForm`(`Age`, `Qualifications`, `Experience`) VALUES ('$Age','$Qualifications','$Experience' )";
$r = mysqli_query($dbc,$q);
# ^^^ Search submit results window
if ($r){echo "Results below";} else {echo "Your search found zero results";};
}
?>
</form>
</div>
<div>
</div>
</html>
Not sure why the PHP is not running but the code seems clean to me.
PHP FROM
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Audio Shop Data Retrieval</title>
<meta name="description" content="">
<meta name="author" content="AlexR">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="skeleton.css">
<!-- <link rel="stylesheet" href="backbone.css"> -->
<style>
#container{
width:90%;
margin: 40px auto 0 auto;
}
h1 {color:lightgreen;}
</style>
<style>
body {background-color:lightgreen; color: green;}
h1 {color: lightgreen;}
p {color: lightgreen;}
header {
margin-top: -25px;
margin-left: -500px;
height: 100px;
width: 10000px;
background-color: green;
}
</style>
</head>
<header><h1>Audio Supply Retrieval</h1></header>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div id="container" align="center">
<form>
<div class="row">
<div class="six columns">
<?php
error_reporting(E_ALL);
DEFINE('DB_USERNAME', 'arr07598');
DEFINE('DB_PASSWORD', 'Minty!23');
DEFINE('DB_HOST', 'localhost');
DEFINE('DB_DATABASE', 'arr07598')
$dbc = mysqli_connect(DB_HOST,DB_USERNAME,DB_PASSWORD,DB_DATABASE) OR die ('Could not connect to MySQL: '.mysqli_connect_error());
$q = "SELECT * FROM `FinalForm` ORDER BY `Category` ASC";
$r=#mysqli_query($dbc,$q);
if ($r) {
echo '<table><tr><td><b>Age</b></td><td><b>Qualifications</b></td><td><b>Experience</b></td></td>';
while($row=mysqli_fetch_array($r,MYSQLI_ASSOC)){
echo "<tr><td>$row[NameID]</td><td>$row[Age]</td><td>$row[Qualifications]</td><td>$row[Experience]</td></tr>";
}
echo "</select>";
};
echo "<p>";
?>
</form>
</div>
<div>
</div>
</body>
</html>
Your input type submit is in another form that has only it as an input field. You'll need a submit button in your first form - the one you want to submit
I have tried to work this out but not getting anywhere with it. Basically I would like my custom spinner loader image to appear first for few seconds then it fades out and then the Div with id=home should then fadeIn with all its contents.
I have tried several approach but not close to desired result. If there is any useful link that would help please post link.
My HTML page:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" type="text/css" href="css/mystyles.css"/>
<link rel="stylesheet" href="css/mytheme.min.css" />
<link rel="stylesheet" href="css/structure-1.3.2.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="js/myscript.js"></script>
</head>
<body>
<div class="css-loader-icon"><img src="css/images/loader.gif"/></div>
<!-- Page: home -->
<div id="home" data-role="page" data-position="fixed" data-theme="a" data-title="My first app">
<div data-role="navbar" data-mini="true">
<ul>
<li><a href="#home" class="css-hnav" >Home</a></li>
<li><a href="#home" class="css-hnav" >Contact</a></li>
</ul>
</div><!-- navbar -->
<div data-role="content" class="css-listview">
<ul class="css-ul-list">
My Blogs
Tweet with me
</ul>
</div>
</div><!-- page -->
JS:
$(function() {
$(".css-loader-icon").fadeOut(2000, function() {
$("#home").fadeIn(1000);
});
});
CSS:
.css-loader-icon {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#content {display:none;}
Well try with loader icon displaying instead of hiding it in CSS and hiding #home div.
display:none;
#home{ display:none;}
Then your js will hide loader gif after 2 secs and show #home div. As gif is already hidden you are not able to feel the effect.