I am working on a bootstrap and php , i am using jquery to add animation to and hover effects, i added scriptwith other scripts files in footer , but due to this file my php login code stop working ,i remove it and my code start working but hover effect on my thumbnails vanished, i only added login functionality yet . when i remove jquery-latest.min link from my code , thumbnails having hover animation stop working but php code works fine , how can i remove this conflict from my code ?? i am adding these as header and footer. In short both codes are fine but not working with each other.
<!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">
<meta name="description" content="Bootstrap 3 Tutorial from auto-hire.com">
<meta name="author" content="BootstrapBay.com">
<title>Auto Hire Edge</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link href="css/screen.css" rel="stylesheet">
<script src="js/respond.js"></script>
<link href="js/bootstrap.js" rel="javascript">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
</head>
<body>
this is footer , it has latest jquery link , wherever i added this , my php code stop working , buttons seem to un clickable
<!-- Fixed footer -->
<div class="navbar navbar-default " role="navigation">
<div class="navbar-text pull-left">
<p>© 2015 AutoHireEdge.</p>
</div>
<div class="navbar-text pull-right">
<a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
<a href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</div><!--container-->
</body>
</html>
Here is my thumbnail code:it only work due to jquery latest.min file , added above in footer , if i remove that , hover effevt vanished
<div class="container">
<div class="container">
<!---------------------------->
<div class="text-center">
<label class="row">Features</label>
<h1><strong>Auto Hire Edge</strong></h1>
</div>
<!--thumbnail-1---->
<ul class="thumbnails" id="hover-cap-4col">
<li class="span3">
<div class="thumbnail">
<div class="caption">
<h1>Tap To Register</h1>
<p><a href="#" class="btn btn-inverse" rel="tooltip" title="Preview"><i class="icon-eye-open"></i></a> <a href="#" rel="tooltip" title="Visit Website" class="btn btn-inverse"><i class="icon-share"></i></a></p>
</div>
<img src="images/img-thum1.jpg" alt="">
</div>
</li>
</ul>
</div>
</div><!-- /.container -->
this is working fine , but when i add php functionality , it stop working with each other: here is my php files of code
<html>
<?php
include 'core/init.php';
include 'includes/head.php';
include 'includes/aside.php';
if(empty($_POST)===false)
{
$username= $_POST['username'];
$password= $_POST['password'];
if(empty($username)===true || empty($password)===true) {
$errors[]='you need to enter user name and passwords';
}
//check user exists or nots
else if(user_exists($username)===false){
$errors[]='we cant find the user with this name. have u registered?';
}
else if(user_active($username)===false){
$errors[]='you haven\' t activated your account yet';
}else{
//check for string length
if(strlen($password) >32)
{
$errors[]='password is too long';
}
$login=login($username,$password);
if($login===false){
$errors='this combination is false';
}
else
{
//set sessions
$_SESSION['user_id']=$login;
//redirect to home page
header('Location:index.php');//redirects to home page with logged inn
exit();
}
}
}
else
{
$errors[]='no data received';
}
include 'includes/header.php';
if(empty($errors)===false){
?>
<h2>we tried you to login but...</h2>
<?php
echo output_errors($errors);
}
include'includes/footer.php';
?>
</html>
file 2: loggedin
<!--added to index.php-->
<div id="wrapper">
<div class="navbar navbar-default navbar-fixed-top pull-right ">
<a href="#menu-toggle" class="btn btn-primary btn-lg " id="menu-toggle" ><span class="glyphicon glyphicon-tasks"></span>Menu </a>
<img src="images/logo.png" alt="auto-hire-edge">
<div class="loginbutton">
<li> <h4> <?php echo $user_data['first_name']; ?> </h4></li>
<li><button class="btn btn-sm"><a href="logout.php">Logout</a></button></li>
<li><a href="register.php">Register</a></li>
</div>
<!----includes menu list ----->
</div>
</div>
<?php include 'includes/overall/head.php'; ?>
<?php include 'core/init.php'; ?>
<?php //include 'includes/header.php'; ?>
<?php include 'includes/aside.php';
include 'includes/slider.php';
include 'includes/customer-thumbs.php';
?>
<?php
include 'includes/footer.php';
?>
<div id="wrapper">
<div class="navbar navbar-default navbar-fixed-top pull-right ">
<a href="#menu-toggle" class="btn btn-primary btn-lg " id="menu-toggle" ><span class="glyphicon glyphicon-tasks"></span>Menu </a>
<img src="images/logo.png" alt="auto-hire-edge">
<div class="loginbutton">
<form action="login.php" method="post" >
<ul id="login">
<li><input type="text" name="username" placeholder="Username" ></li>
<li><input type="password" name="password" placeholder="Password"></li>
<li><button type="submit" class="btn btn-sm" id="submit">Login</button></li>
<li><a href="register.php">Register</a></li>
</ul>
</form>
</div>
<!----includes menu list ------>
</div>
</div>
