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.
Related
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
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.
I´ve been reading some questions about this issue. Then I have checked the .js .css and bootstrap files I´m linking to my script to make the dropmenu work but it just doesn´t work.
My nav looks likes this:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="{{ path('homepage') }}">
<img id="logo" src="/images/logotipo.png">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Acción #1</li>
<li>Acción #2</li>
<li>Acción #3</li>
<li class="divider"></li>
<li>Acción #4</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="{{ path('signup_player') }}">
<span class="glyphicon glyphicon-user"</span>
Sign Up
</a>
</li>
<li>
<a href="{{ path('login_route') }}">
<span class="glyphicon glyphicon-log-in"></span>
Login
</a>
</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
My looks like this, and I think I have everything that is needed there:
<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> Squash Connection - Homepage </title>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="stylesheet" href="/css/522ed01_part_1_bootstrap-social_1.css" />
<link rel="stylesheet" href="/css/522ed01_part_1_bootstrap-theme_2.css" />
<link rel="stylesheet" href="/css/522ed01_part_1_bootstrap-theme.min_3.css" />
<link rel="stylesheet" href="/css/522ed01_part_1_bootstrap_4.css" />
<link rel="stylesheet" href="/css/522ed01_part_1_bootstrap.min_5.css" />
<link rel="stylesheet" href="/css/522ed01_part_1_font-awesome_6.css" />
<link rel="stylesheet" href="/css/522ed01_part_1_font-awesome.min_7.css" />
<link rel="stylesheet" href="/css/522ed01_part_1_jumbotron_8.css" />
</head>
At the end of the script I insert my tagas to add the .js files.
<script src="/js/dd00e43_jquery_1.js"></script>
<script src="/js/dd00e43_bootstrap.min_2.js"></script>
<script src="/js/dd00e43_part_3_bootstrap_1.js"></script>
This is how I source my .js, .css and bootstrap files with symfony and twig:
Stylesheets compiled with Assetic
{% block stylesheets %}
{% stylesheets 'css/*.css' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
Including Javascripts with Assetic
{% block javascripts %}
{% javascripts
'js/jquery.js'
'js/bootstrap.min.js'
'js/*.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
For me everything looks right, but I don´t know the reason why when the page is loaded and I click on the dropdown menu, it just doesn´t show the links to other pages.
Does anyone know why this could be happening or if I'm missing something and I'm not noticing?
Thanks.
It works fine for me when I reproduced it with CDNs in JSBin, link below.(resize view screen to test mobile/desktop versions)
http://jsbin.com/yameludede/edit?html,css,output
I would check where you source jQuery and Bootstrap from. Try the CDNs:
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />