I'm really new to Javascript, I am building a webpage and wanted the navbar to change size when the user scrolls down. This was only possible by using Javascript.
I referenced the .js file in my HTML file and added an onscroll event to the navbar with a function that I defined in the Javascript file. Thing is, the styling doesn't apply. I already checked if the function is actually being called by adding a console.log();. I found out the function is being called but the styling won't apply for some reason.
Here is my HTML
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Remote Homework') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Stylesheet from initial build, located in public folder -->
<link rel="stylesheet" href="{{ asset('style.css') }}" type="text/css">
</head>
<body>
<div id="app">
<nav id="navbar" onscroll="navbarSizing()" class="navbar navbar-expand-md navbar-light bg-white shadow-sm sticky-top">
<!-- Use container-fluid to arrange navbar items from edge to edge -->
<div class="container">
<a class="navbar-brand" href="{{ route('home') }}#content1">
<img src="{{ asset('images/better_logo.png') }}" alt="Logo" style="width:105px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{{ route('home') }}#content1">{{ __('Home') }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('home') }}#content2">{{ __('Info') }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('home') }}#content3">{{ __('Contact') }}</a>
</li>
#auth()
#endauth
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#endif
<!-- only gets called when user is logged in -->
#else
<li class="nav-item">
<!-- put the route for the 'public' questions here-->
Question Feed
</li>
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('questions.overview') }}">{{ __('My questions') }}</a>
<!--<a class="dropdown-item" href="{{ route('pages.dashboard') }}">{{ __('Dashboard') }}</a>-->
<a class="dropdown-item" href="{{ route('questions.create') }}">{{ __('Ask a question') }}</a>
<hr class="dropdownmenu-hr">
<a class="dropdown-item"
href="{{ route('logout') }}"
onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
>
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
<!-- main content of the page -->
#yield('content')
</main>
<!-- the footer of the page -->
#include('pages.footer')
</div>
<script src="index.js"></script>
</body>
</html>
Here is my JS file
function navbarSizing() {
let element = document.getElementById("navbar");
element.style.color = "blue";
console.log("This works!");
}
Can somebody see the problem? I've been stuck with this issue for hours. Thanks in advance!
First problem is that since nav does not have a scrollbar, so it will not get event on scrolling. Try adding event handler on body element.
Second, the style color that you are applying is not visible in nav element, because it applies on text color, and nav element does not have any text, it contains other elements. As you said that you want to change size, try, for example:
element.style.height = "500px";
If you want to change css of the element, use can use jQuery. Here is the simple example to change the css using jQuery. I hope it helps to answer you or give you an idea.
function navbarSizing() {
let element = $("#navbar").find('ul');
element.css('background-color', 'red');
console.log("This works!");
}
In this example, it is changing the background color. So first of all you have to find the correct element to apply the css. So, if you want to change text color of li, so first you need to find the li children of the ul element.
For more reference, you can read doc from https://api.jquery.com/. Also, include jQuery in your html as
Related
I have a Django Landing page + few extra description pages.
I store the navbar with bootstrap 4 scrollspy in the base.html file what points on IDs on the home.html.
When I am on the home page it works like in the official bootstarp example.
1.ERROR
But when I go to other pages it just puts this URL out "http://127.0.0.1:8000/home/services/#pricing" and stay under the "http://127.0.0.1:8000/home/services/" URL.
I get a terminal ERROR message as well:
Not Found: /docs/4.3/dist/js/bootstrap.bundle.min.js
[13/Jan/2020 16:16:35] "GET /docs/4.3/dist/js/bootstrap.bundle.min.js HTTP/1.1" 404 2509
I have seen:
Bootstrap scrollspy when accessing from another page but this is bootstrap 3
and Twitter Bootstrap Scrollspy not working at all and this one is some very old version of bootstrap (+6 years ago)
2.ERROR
In the original example the navbar area where it send the user is highlighted. Mine not highlighted at all.
3. ERROR
The navbar not stay on the top when I scroll or go to any of the navbar elements by clicking on them.
If I implement any of the following than it covers the first few lines of the page.
To keep the navbar above these lines I use <div class="godown-60" id="godown"></div> lien of code.
I have tried class=" ":
Fixed navbar
fixed-top
sticky-top
base.html
<body>
<header>
<nav id="navbar-example2" class="navbar navbar-static-top navbar-light bg-light">
<a class="navbar-brand" href="{% url 'home' %}" > HOME PAGE </a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
</ul>
</nav>
...
home.html
<body>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
<h4 id="about">About</h4>
AboutTest
<p>...</p>
<h4 id="services">Services</h4>
ServicesTest
<p>...</p>
<h4 id="pricing">Pricing</h4>
PricingTest
<p>...</p>
</div>
...
This example have solved ERROR 1 and 3 (2 wasn't that important)
https://getbootstrap.com/docs/4.0/examples/navbar-top-fixed/#
ERROR 1 solution, bey using specified address (these can be actual URL's on the site or libraries as well)
href="home/help/#main"
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
<title>Fixed top navbar example for Bootstrap</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/navbar-top-fixed/">
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="navbar-top-fixed.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="home/help/#main">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- this solves ERROR 3 -->
<!-- having a separated section -->
<main role="main" class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs ยป</a>
</div>
</main>
<!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
I just completed freshly installing Laravel on a VPS, relocated the public folder to the public_html folder and redirected all associated files to point to here.
Going to the default domain loads bootstrap correct, and the welcome page displays with the bootstrap formatting, I auto-generated the login/register auth pages and navigating to those doesn't utilize bootstrap formatting, logging the error that http://web.com/js/app.js ERROR 404: Not Found
Like I said, this is fresh install, except everything that was in the public folder was migrated to public_html and I edited the index.php accordingly. I've been trying to search up other people with the same issue on here except they all seem to have issues with bootstrap generally while the error with bootstrap only occurs on other pages for me, making their solutions useless. Although anyone familiar with Laravel will already know what it looks like, here's the app.blade.php file that is used to format the auxiliary pages.
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('../js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('../css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#endif
#else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
#yield('content')
</main>
</div>
</body>
</html>
I'd already done a bit of editing with the routing to the JS and CSS links, adding ../ to see if that'd help as opposed to the auto-generated js/app.js but to no avail. Any help would be appreciated.
I'm having problems fixing Laravel log out button.
Registering and login in it's fixed but when i try to click on the username for the dropdown menu Logout button it's not showing.
Doesn anyone else have / had the same problem ?
public function __construct()
{
$this->middleware('guest')->except('logout');
}
This is on my loginController
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
This is on my app.blade.php
Auth::routes();
Route::get('/home', 'HomeController#index')->name('home');
on the routes is this.
write this all code in your app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" 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>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
and write code in youe web.php
Route::get('/', function () {
return view('welcome');
});
Auth::routes();
I downloaded bootstrap and configured it in my Django application and everything was good after sometime the JavaScript stopped working but the CSS is working. I don't know what is wrong with it. The JavaScript stopped after sometime of development after first of all working well.
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width ,initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Fon Desmond Ade">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% static 'tzuzz/css/bootstrap.min.css' %}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-secondary">
<a class="navbar-brand" href="#" style="color: white">Tzuzz</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link nav-item" style="color: white" href="{% url 'tzuzz:login' %}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: white" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: white" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: white" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<br> {% block body %} {% endblock %}
</body>
<footer style="padding-top: 70px" class="fixed-bottom">
<div class="card w-90">
<div class="card-body">
{% block footer %} {% endblock %}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="{% static 'todo/js/bootstrap.js' %}"></script>
</footer>
</html>
I was trying to make a navigation bar for my web page following bootstraps template. I've attached it to my base.html.twig file for a Symfony project. It works fine besides the drop down menu which when clicked does not diplay
Here's my twig document
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Health Centre Ireland{% endblock %}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="{{ asset('css/styles.css') }}"/>
{% block stylesheets %}{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('redcross.ico') }}" />
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" a href="#">Health Centre Ireland</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarsExampleDDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only"></span> </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Calender</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Message Board</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">My Profile</a>
<a class="dropdown-item" href="{{ logout_path('main') }}">Log Out</a>
<a class="dropdown-item" href="#">Delete Profile</a>
</div>
</li>
</ul>
</div>
</nav>
</body>
I have tried to put JavaScript at the bottom of my document before I close out the body and html, but this makes the content of the page besides the navbar disappear. Any help would be greatly appreciated, thank you
You need to add javascript like indicated in the official documentation of bootstrap (https://getbootstrap.com/docs/4.0/getting-started/introduction/)
<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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
Yes, you could need to load also de JavaScript files from bootstrap possibly.
Sometines but, it's only necessary a CSS file to make work the dropdowns. Make sure the properties from the CSS you are using appears in the CSS file you added from bootstrap. Maybe is the wrong CSS.