Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am trying to build my own workout tracking tool. I have built my front end with bootstrap studio. I am figuring out how to use firebase and its authentication tool. Its working but only in a plain html file. The one I created with BSStudio doesnt want to work. I hope somebody can help me out.
First I used a js file for every page, but I handle it now from just one file.
Its called backend.js. :
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
// User is signed in.
alert("logged in")
document.getElementById("user_div").style.display = "block";
document.getElementById("login_div").style.display = "none";
document.getElementById("logoutsucceed").style.display = "none";
document.getElementById("logoutfailed").style.display = "block";
var user = firebase.auth().currentUser;
if (user != null) {
var email_id = user.email;
document.getElementById("user_para").innerHTML = "Welcome User : " + email_id;
}
} else {
// No user is signed in.
alert("logged out")
document.getElementById("user_div").style.display = "none";
document.getElementById("login_div").style.display = "block";
document.getElementById("logoutsucceed").style.display = "block";
document.getElementById("logoutfailed").style.display = "none";
}
});
document.getElementById('btlogin').onclick = function () {
login();
};
document.getElementById('btlogout').onclick = function () {
logout();
};
function login() {
alert("try to login")
var userEmail = document.getElementById("email_field").value;
var userPass = document.getElementById("password_field").value;
firebase.auth().signInWithEmailAndPassword(userEmail, userPass).catch(function (error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
alert("Error : " + errorMessage);
// ...
});
}
function logout() {
alert("logged out")
firebase.auth().signOut();
href = "index.html"
}
function register() {
alert("register command")
}
Here is my working page:
<html>
<head>
<title>Firebase Login</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="login_div" class="main-div">
<h3>Firebase Web login Example</h3>
<input type="email" placeholder="Email..." id="email_field" />
<input type="password" placeholder="Password..." id="password_field" />
<button id="btlogin">Login to Account</button>
</div>
<button onclick="window.location.href = 'homepage.html';">Hier klicken</button>
<div>
</div>
<div id="user_div" class="loggedin-div">
<h3>Welcome User</h3>
<p id="user_para">Welcome to Firebase web login Example. You're currently logged in.</p>
<button id="btlogout">Logout</button>
</div>
<script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
[config from firebase]
};
firebase.initializeApp(config);
</script>
<script src="assets/js/backend.js">
</script>
</body>
</html>
And my bsstudio created page (which doesnt work). I have 100% put the same firebase config, so thats not the problem:
<!DOCTYPE html>
<html>
<head>
login()
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Login - FitBy</title>
<meta name="description" content="A gym website by Kevin Kumar. Providing various gym tools from workout tracking to informative blogs.">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Actor">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css">
<link rel="stylesheet" href="assets/fonts/simple-line-icons.min.css">
<link rel="stylesheet" href="assets/css/beautiful-danger-alert.css">
<link rel="stylesheet" href="assets/css/beautiful-success-alert.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
<link rel="stylesheet" href="assets/css/Profile-Card.css">
<link rel="stylesheet" href="assets/css/smoothproducts.css">
<link rel="stylesheet" href="assets/css/untitled.css">
</head>
<body>
<nav class="navbar navbar-light navbar-expand-lg fixed-top bg-white clean-navbar" style="margin-bottom: 0;">
<div class="container"><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1" style="float: right;"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="text-left align-self-start order-1" style="position: absolute;float: left;margin-bottom: 0px;"></div>
<div class="collapse navbar-collapse" id="navcol-1"><span class="navbar-text" style="min-width: 220px;"><a class="navbar-brand logo" href="#" style="margin-right: 0;">FitBy</a><a class="navbar-brand logo" href="#"
style="transform: scale(-1,1);margin-right: 0;margin-left: 0px;padding: 0;font-family: Actor, sans-serif;font-size: 30px;">K</a><a class="navbar-brand logo" href="#"
style="margin-right: 0;margin-left: -2px;font-family: Actor, sans-serif;font-size: 30px;">K</a><a class="navbar-brand logo" href="#" style="margin-left: 2;padding: 0;margin-right: 0;">nowledge</a></span>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="/features.html">Features</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="/forum.html">Forum</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="/blog-post-list.html">Blog</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="/about-us.html">About Us</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="/contact-us.html">Contact Us</a></li>
<li class="nav-item dropdown show"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="true" href="#">my account</a>
<div class="dropdown-menu show" role="menu">
<div class="col"><img id="userprofileimg" src="assets/img/scenery/image1.jpg" style="margin: 0;padding: 0px;background-position: 100%;margin-left: auto;margin-right: auto;"></div>
<h6 class="dropdown-header" role="presentation">Overview</h6><a class="dropdown-item" role="presentation" href="/userpage.html">My Information</a><a class="dropdown-item #lblogout" role="presentation"
href="/login.html">Login</a><a class="dropdown-item" role="presentation" id="lbregister" href="registration.html">Register</a><a class="dropdown-item" role="presentation" id="lbLogout" href="logout.html">Logout</a>
<h6 class="dropdown-header" role="presentation">Tracking</h6><a class="dropdown-item" role="presentation" href="tracking-dashboard.html">Tracking Dashboard</a><a class="dropdown-item" role="presentation" href="#">Create
Workout</a><a class="dropdown-item" role="presentation" href="#">Excercises</a>
<h6 class="dropdown-header" role="presentation">Blog</h6><a class="dropdown-item" role="presentation" href="#">My Posts</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<main class="page login-page">
<section class="clean-block clean-form dark">
<div class="container">
<div class="block-heading">
<h2 class="text-info">Log In</h2>
<p>Welcome!</p>
</div>
<div id="login_div">
<form>
<div class="form-group"><label for="email">Email</label><input class="form-control item" type="email" id="email"></div>
<div class="form-group"><label for="password">Password</label><input class="form-control" type="password" id="password"></div>
<div class="form-group">
<div class="form-check"><input class="form-check-input" type="checkbox" id="checkbox"><label class="form-check-label" for="checkbox">Remember me</label></div>
</div><button class="btn btn-primary btn-block" id="btlogin" type="button">Log In</button>
</form>
</div>
</div>
<div id="user_div">
<div class="alert alert-success beautiful" role="alert" id="succeed"><Strong>Success!</Strong> You are logged in! To add more details just open your Overview (link)</div>
</div>
</section>
</main>
<footer class="page-footer dark">
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>Get started</h5>
<ul>
<li>Home</li>
<li>Sign up</li>
</ul>
</div>
<div class="col-sm-3">
<h5>About us</h5>
<ul>
<li>Company Information</li>
<li>Contact us</li>
<li>Reviews</li>
</ul>
</div>
<div class="col-sm-3">
<h5>Support</h5>
<ul>
<li>FAQ</li>
<li>Help desk</li>
<li>Forums</li>
</ul>
</div>
<div class="col-sm-3">
<h5>Legal</h5>
<ul>
<li>Terms of Service</li>
<li>Terms of Use</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<p>© 2020 Copyright Text</p>
</div>
</footer>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/chart.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script src="assets/js/smoothproducts.min.js"></script>
<script src="assets/js/theme.js"></script>
<script src="assets/js/backend.js"></script>
</body>
</html>
The input fields - email and password, have different id in HTML and bsstudio.
In backend.js change var userEmail = document.getElementById("email").value and var userPass = document.getElementById("password").value; and run with bsstudio. Ideally it should work. If it doesn't do post your output( even if it gives error).
Related
This question already has answers here:
Bootstrap navbar: nothing is displayed on smaller devices
(1 answer)
bootstrap 4 nav doesn't display hamburger on resize
(2 answers)
Closed 1 year ago.
I have html code, when I resize the browser screen I have a problem that the toggle button is not displayed (it is transparent) when I click on it the navigation bar items are not showing at allScreenshot of my web
<html>
<head>
<title>
profile
</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="../css/bootstrap/bootstrap.css">
<!-- w3 CSS-->
<link rel="stylesheet" href="../css/W3.css">
<!-- profile CSS-->
<link rel="stylesheet" href="../css/accueil.css">
<!-- flaticon CSS-->
<link rel="stylesheet" href="../icons/font/flaticon.css">
<!--Scripts-->
<!-- JQuery script-->
<script src="../js/jQuery.js"></script>
<!-- Bootstrap script-->
<script src="../js/bootstrap/bootstrap.bundle.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="accueil.html">
<h4>LOGO</h4>
</a>
<!--Collapse button -->
<button type="button" class="navbar-toggler"
data-bs-toggle="collapse" data-bs-target="#coll_target"
aria-controls="coll_target" aria-expanded="false"
aria-label="Toggle Navbar" >
<span class="navbar-toggler-icon" ></span>
</button>
<!--Collapse Div -->
<div class="collapse navbar-collapse" id="coll_target">
<div class="mx-auto"></div>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link"><span><i class="flaticon-ringing" style="color: white;"></i></span></a></li>
<li class="nav-item"><a class="nav-link"><span><i class="flaticon-email" style="color: white;"></i></span></a></li>
<li class="nav-item"><a class="nav-link"><span><i style="color: white;" class="flaticon-down-arrow"></i></span></a></li>
<li class="nav-item"><a class="nav-link"><span><i style="color: white;" class="flaticon-translation"></i></span></a></li>
<li class="nav-item"><a class="nav-link"><span><i class="flaticon-settings" style="color: white;"></i></span></a></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
You should read the documentation here https://getbootstrap.com/docs/5.0/getting-started/introduction/
I assume you have basic knowledge in CSS and HTML , In order to use Bootstrap, you first need to integrate it into your development environment correctly, Either by loading it remotely or by download and use it locally;
Long story short your pages should look like this:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<!---include navbar components to demonstrate what you need----->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap has a lot of responsive classes that suit your need
hello there I want to try on this like the gallery button and user side dropdown on the left side and its not show on mobile mode when the screen minimize but show on the top like ackta ltd the complete code is on snippet but i try many time to do but its can't solved to me please help me in this query if you people want pic i will upload the pic for you but i think the snippet code is enough for you pepole
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap All in One Navbar</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merienda+One">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="assets/css/headerstyle.css" rel="stylesheet">
<script>
function myFunction() {
var x = document.getElementById("navbarCollapse");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "display";
}
}
</script>
</head>
<body>
<nav class="navbar navbar-expand-xl navbar-light bg-light">
<i class="fa fa-cube"></i>Ackta LTD UK</b>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse" id="navbarCollapse" onclick="myFunction()">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<div class="navbar-nav">
<a class="nav-link " href="index.php"><i class="fa fa-home"></i> Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="index.php"><i class="fa fa-upload"></i> Upload</a>
<div class="nav-item dropdown">
<i class="fa fa-user-circle"></i> About
<div class="dropdown-menu">
<a class="dropdown-item" href="privacypolicy.php">Privacy Policy</a>
<a class="dropdown-item" href="termofuse.php">Terms & Use</a>
<a class="dropdown-item" href="team.php">Teams</a>
<a class="dropdown-item" href="contact.php">Contact Us</a>
</div>
</div>
</div>
<div class="d-none d-lg-block ">
<div class="navbar-nav ml-auto ">
<div class=" container pr-5 ">
<button type="button" class="btn btn-outline-primary btn-sm btn-block "><i class="fa fa-file-image-o" aria-hidden="true"></i> Gallery</button>
</div>
<div class="nav-item dropdown pr-5">
<img src="assets/i/face.png" class="avatar" alt="Avatar"> Paula Wilson <b class="caret"></b>
<div class="dropdown-menu">
<i class="fa fa-user-o"></i> Profile</a>
<i class="fa fa-calendar-o"></i> Calendar</a>
<i class="fa fa-sliders"></i> Settings</a>
<div class="dropdown-divider"></div>
<i class="material-icons"></i> Logout</a>
</div>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>
I am having tremendous difficulty coding with java script. My Java script file is using nodejs, which means i cant perform any DOMS. For examples this code here:
var form = document.getElementsByClassName('nav-item');
console.log(form.length);
There are 4 nav-items which are displayed in the developer tools on the browser but the length is 0, where it should be 4. Why is this happening? Is there a way to disable nodejs or switch ? I know nodejs is server side, so how do i disable it or create another js file that is in client side?
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="boot.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="boot.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Creates the navbar links-->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Subjects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link float-right" href="#">Sign Up</a>
</li>
</ul>
</div>
</nav>
<br>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox">Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
BOOT.JS FILE:
var form = document.getElementsByClassName('nav-item');
console.log(form.length);
Try loading your script at the end of the file instead of the header. The DOM has not loaded when you run the script. Either that or put it inside this event:
document.addEventListener("DOMContentLoaded", function(event) {
var form = document.getElementsByClassName('nav-item');
console.log(form.length);
});
I,m going to design admin panel for my application.I divided my home into containers. I want to show detail of clicked items in Images.html and Categories.html . when I click on menu item in 2nd container(also called side bar).I want to show detailed of images and categories but my switchView function is not working, I don,t know why I,m unable to show content of images.html and categories.html using views, but I,m unable to access my next html page,s data.Please Sincere attention here.
Here is my admin.html(home page) code:
<!DOCTYPE html>
<html class="h-100">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="stylesheet.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.2/firebase-app.js"></script>
</head>
<body class="h-100">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Wallpaper App Admin
</a>
<div class="dropdown navbar-right">
<button
id="user-email"
class="btn btn-secondary dropdown-toggle"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
probelalkhan#gmail.com
</button>
<div
class="dropdown-menu"
aria-labeledby="user-email"
>
<a class="dropdown-item" id="btn-logout" href="#">
Logout
</a>
</div>
</div>
</div>
</nav>
<div class="row h-100 bg-light">
<div class="col-lg-2 bg-secondary">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#" onclick="switchView('images.html')">
<span class="text-dark">Images</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="switchView('categories.html')">
<span class="text-dark">Categories</span>
</a>
</li>
</ul>
</div>
<div class="col-lg-10">
<div class="container" id="container">
<h1>Images</h1>
</div>
</div>
</div>
<script src="app.js"></script>
<script>
firebase.auth().onAuthStateChanged(function(user){
if(!user){
window.location.href = "index.html";
}
});
</script>
</body>
</html>
Here is my app.js:
var firebaseConfig = {
apiKey: "AIzaSyA0nFgIbrXfWULyd9QJPZd60qfRhfAzC0Y",
authDomain: "mywallpaperapp-8ed57.firebaseapp.com",
databaseURL: "https://mywallpaperapp-8ed57.firebaseio.com",
projectId: "mywallpaperapp-8ed57",
storageBucket: "mywallpaperapp-8ed57.appspot.com",
messagingSenderId: "900270634824",
appId: "1:900270634824:web:4dfbcc86520c6f637ba57d"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.auth.Auth.Persistence.LOCAL;
$("#btn-login").click(function(){
var email = $("#email").val();
var password = $("#password").val();
var result = firebase.auth().signInWithEmailAndPassword(email, password);
result.catch(function(error){
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode);
console.log(errorMessage);
});
});
$("#btn-logout").click(function(){
firebase.auth().signOut();
});
function switchView(view){
$.get({
url:view,
cache: false,
}).then(function(data){
$("#container").html(data);
});
}
The Problem in this block of code beacuse my switchView function is not working to access images.html and categories.html, although I coded it perfectly:
<div class="col-lg-2 bg-secondary">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#" onclick="switchView('images.html')">
<span class="text-dark">Images</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="switchView('categories.html')">
<span class="text-dark">Categories</span>
</a>
</li>
</ul>
</div>
Please Sincere Attention here. I,ll be very Thankful to you.
change your switchView function as below:
function switchView(view){
$.get({url: view, cache: false},function(data){
$("#container").html(data);
});
}
I was just following the tutorial at linda.com and faced problem
I have index bootstrap.js and are being used in different folder
I think this is file location problem....or not.
I attached a photo of my project
structure
and my index code is like this
<!doctype>
<html>
<head>
<title>Happy Card---Home</title>
<meta charset="utf-8">
<meta http-equiv="X-US-Compatible" content="Chrome">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/mystyle.css">
<link rel="stylesheet" href="js/myscript.js">
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<link href="https://fonts.googleapis.com/css?family=Chewy|Covered+By+Your+Grace|Dancing+Script|Graduate|Great+Vibes|Orbitron|Oswald|Permanent+Marker|Saira+Extra+Condensed" rel="stylesheet">
</head>
<body id="Home">
<section class="container">
<?php include "_/component/php/header.php"?>
<div class="content row">
<section class="main col col-lg-8">
</section><!---main--->
<section class="sidebar col col-lg-4">
</section><!---sidebar--->
</div><!---content--->
</section><!---container--->
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/myscript.js"></script>
</body>
$(function(){
$('ul.nav il.dropdown').hover(function(){
$('.dropdown-menu',this).fadeIn();
}, function(){
$('.dropdown-menu',this).fadeout('fast');
});
});
<!doctype>
<html>
<head>
<title>Happy Card---Home</title>
<meta charset="utf-8">
<meta http-equiv="X-US-Compatible" content="Chrome">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="css/mystyle.css">
<link rel="stylesheet" href="js/myscript.js">
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
</head>
<body id="Home">
<section class="container">
<?php include "_/component/php/header.php"?>
<div class="content row">
<section class="main col col-lg-8">
</section><!---main--->
<section class="sidebar col col-lg-4">
</section><!---sidebar--->
</div><!---content--->
</section><!---container--->
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/myscript.js"></script>
</body>
<footer>
</footer>
</html>
And header is like this
<div class="content row">
<div class="col-lg-12">
<header class="clearfix">
<section id="branding">
</section><!---branding-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile
display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-
expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Batam Tour &
Living Info</a>
</div>
<!-- Collect the nav links, forms, and other content for
toggling -->
<div class="collapse navbar-collapse" id="bs-example-
navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home <span class="sr-only">(current)
</span></a></li>
<li>About us</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown" role="button" aria-haspopup="true" aria-
expanded="false">Batam Tour <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>ATTRACTION</li>
<li>SHOPPING MALL</li>
<li>THINGS TO DO</li>
<li role="separator" class="divider"></li>
<li>RENT CAR</li>
<li role="separator" class="divider"></li>
<li>HAPPY CARD</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown" role="button" aria-haspopup="true" aria-
expanded="false">Living Info <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>REAL ESTATE</li>
<li>BUSINESS ENVIRONMENT</li>
<li role="separator" class="divider"></li>
<li>BUSINESS CONSULTING</li>
<li role="separator" class="divider"></li>
<li>LIVING Q&A</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control"
placeholder="Search">
</div>
<button type="submit" class="btn btn-
default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header><!---header-->
</div><!---column-->
</div><!---content-->
You have two typos
il instead of li and fadeout instead of fadeOut and you unnecessary load myscript.js as a <link rel="stylesheet" - you can remove that line
If I add the JS and CSS and insert your header it works:
$(function() {
$('ul.nav li.dropdown').hover(function() {
$('.dropdown-menu', this).fadeIn();
}, function() {
$('.dropdown-menu', this).fadeOut('fast');
});
});
$(function() {
$('ul.nav li.dropdown').hover(function() {
$('.dropdown-menu', this).fadeIn();
}, function() {
$('.dropdown-menu', this).fadeOut('fast');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Chewy|Covered+By+Your+Grace|Dancing+Script|Graduate|Great+Vibes|Orbitron|Oswald|Permanent+Marker|Saira+Extra+Condensed" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<section class="container">
<div class="content row">
<div class="col-lg-12">
<header class="clearfix">
<section id="branding">
</section>
<!---branding-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile
display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria- expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Batam Tour &
Living Info</a>
</div>
<!-- Collect the nav links, forms, and other content for
toggling -->
<div class="collapse navbar-collapse" id="bs-example-
navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home <span class="sr-only">(current)
</span></a></li>
<li>About us</li>
<li class="dropdown">
Batam Tour <span class="caret"></span>
<ul class="dropdown-menu">
<li>ATTRACTION</li>
<li>SHOPPING MALL</li>
<li>THINGS TO DO</li>
<li role="separator" class="divider"></li>
<li>RENT CAR</li>
<li role="separator" class="divider"></li>
<li>HAPPY CARD</li>
</ul>
</li>
<li class="dropdown">
Living Info <span class="caret"></span>
<ul class="dropdown-menu">
<li>REAL ESTATE</li>
<li>BUSINESS ENVIRONMENT</li>
<li role="separator" class="divider"></li>
<li>BUSINESS CONSULTING</li>
<li role="separator" class="divider"></li>
<li>LIVING Q&A</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-
default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</header>
<!---header-->
</div>
<!---column-->
</div>
<!---content-->
<div class="content row">
<section class="main col col-lg-8">
</section>
<!---main--->
<section class="sidebar col col-lg-4">
</section>
<!---sidebar--->
</div>
<!---content--->
</section>
<!---container--->