I have route
Route::get("/prodByCat/{category_id}", "ProductController#productsByCategory")->name("product.productsByCategory");
and function
public function productsByCategory($category_id){
$products = Product::where('category_id', $category_id)->get();
return view("cat", compact("products"));
in my template i have only
#extends("index")
#section("content")
#foreach($products as $product)
{{ $product->name }}
#endforeach
#endsection
Problem is - links to bootstrap and custom css doesn't inherits. I tried to create another controller and new template file. But nothing works, except deleting {category_id} from Route. Why passing {category_id} conflicts with links to css files?
I tried composer dump-autoload and reboot computer.All other templates work properly.
My index template
<!DOCTYPE html>
<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="">
<title>#yield("title")</title>
#yield("css")
<!-- Bootstrap core CSS -->
<link href="files/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="files/shop-homepage.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
#include("layouts._shopNav")
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-3">
#yield('category')
</div>
<!-- /.col-lg-3 -->
<div class="col-lg-9">
#yield("carousel")
<div class="row">
#yield("content")
</div>
<!-- /.row -->
</div>
<!-- /.col-lg-9 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="fixed-bottom py-3 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Some writing<br></p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="files/jquery/jquery.min.js"></script>
<script src="files/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
The problem is that the wrong path of the css files. You can use
{{ asset('files/jquery/jquery.min.js') }}
to make sure that the path is correct.
Related
I'm going to create a website using Spring.
So I created a jsp file, but no matter how I change the source code from today, the jsp file will not be updated.
This is my jsp code
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
</head>
<body id="page-top">
<!-- jQuery 사용을 위한 include, 항상 최상단에 위치해 있어야 함 -->
<jsp:include page="common/jQuery.jsp"/>
<!-- servletPath가 만약 true라면 아래 진입 -->
<!-- Page Wrapper -->
<div id="wrapper">
<!-- 사이드 네비바 파일을 가져와서 include 시켜줌, 사이드 네비바는 무조건 div id 가 wrapper안에 있어야 함 -->
<jsp:include page="common/side_nav.jsp"/>
<c:if test="${ pageName eq 'noticePage' }">
<script>
$(document).ready(function() {
$("#accordionSidebar").children(".nav-item").eq(0).removeClass("active");
$("#accordionSidebar").children(".nav-item").eq(2).addClass("active");
$('#summernote').summernote({
height: 500,
lang: "ko-KR"
});
});
</script>
</c:if>
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Top bar 부분을 가져와서 사용함, Top bar는 무조건 content안에 있어야 함-->
<jsp:include page="common/top_bar.jsp"/>
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h4 class="m-0 font-weight-bold text-primary">공지사항항항</h4>
</div>
<div class="card-body" style="height:auto">
<form method="post">
<input type="text" placeholder="제목"/>
<div id="summernote"></div>
</form>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Footer 부분 이건 content-wrapper 제일 아래에 위치시키도록 하자-->
<jsp:include page="common/footer.jsp"/>
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- 맨위로 올라가게 해주는 토글 버튼과 우측 상단로그아웃 부분. 이건 항상 body의 제일 아래부분에 있도록 위치시키자 -->
<jsp:include page="common/logout_scroll.jsp"/>
<!-- summernote cdn 시작-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.js"></script>
<!-- summernote cdn 끝 -->
</body>
</html>
I checked the page source on Google Chrome, but the tag was not added to the source after rebooting the local server many times.
I searched a lot and found that source freezing occurred.
So I checked the work file in the following path, but the work file is empty.
C:\dev\apache-tomcat-9.0.58-windows-x64\apache-tomcat-9.0.58\work
Also, I checked the work file in the following path, but it is also empty.
C:\workspace3\.metadata\.plugins\org.eclipse.wst.server.core\tmp1\work
How can I solve this problem?
Can't figure out how to set this animated canvas as the website background of my portfolio page.
any help would be appreciated. or how do I place the div with text over the canvas?
so it sits nice and flush....................
<!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.0">
<title>Portfolio</title>
<link rel="icon" type="image/x-icon" href="image/favicon.ico">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js" crossorigin="anonymous"></script>
<nav>
<!-- De checkbox -->
<input type="checkbox" id="check">
<label for="check" id="checkbox">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<!-- logo en de Buttons in de nav bar -->
<img src="image/logo.png" alt="logo">
<ul>
<li>Home</li>
<li>Projects</li>
<li>About me</li>
<li>Contact</li>
</ul>
</nav>
</head>
<body>
<div id="particles-js">
<script>
particlesJS.load('particles-js', 'particles.json', function() {
console.log('particles.json loaded ...');
});
</script>
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hey, I'm makkerheineken.</div>
<div class="text-2">Front-End & Back-end Develeper.</div>
</div>
</div>
</section>
</div>
</body>
</html>
You could give the canvas the same size as the screen, add a div with the same size but positioned absolutely, and then put the rest of your elements inside this div.
I'm encountering a problem today: I just created a new blade view that displays my HTML, but my CSS doesn't work! I tried several ways like putting it directly on the page, putting it outside my layout, nothing to do... it works on all my other pages that are exactly the same place on my workspace.
Here is my blade file:
#extends('layouts.default')
#section('content')
<section class="blog-outer-area mt-5">
<div class="content-area">
<div class="blog-area-sec">
<!-- Start: Blog Sec -->
<div class="blog-sec">
<div class="container">
<!-- Start:Blog Area -->
<div class="blog-inner-area row">
<!-- Start:Blog Left Content-->
<div class="col-lg-8 left">
<div class="item-box">
<div class=" img-holder">
<img src="template/img/home-blog-1.jpg" alt="">
</div>
<div class=" img-holder">
<img src="template/img/home-blog-1.jpg" alt="">
</div>
<div class="info-text-holder">
<h4>{{ $article->titre }}</h4>
<span>{{ $article->created_at->format('d/m/Y') }}</span>
<p>{{ $article->description }}</p>
<ul class="social-icon-simple">
<li><i class="fa fa-facebook"></i></li>
</ul>
</div>
</div>
</div>
<!-- End:Blog Left Content-->
<!-- Start:Blog Right Content-->
<div class="col-lg-4 ">
<div class="right">
<input type="text" name="search" class="search-btn" placeholder="Search Here">
<!-- Start:Recent Posts-->
<h5>Recent posts</h5>
<ul class="recent-post">
<!-- Start:Post 1-->
<li>
<div class="row">
<div class="col-lg-5">
<img src="template/img/blog-4.jpg" alt="">
</div>
<div class="col-lg-7">
<div class="text">
<p>Stetina savours Tour de France return</p>
</div>
</div>
</div>
</li>
<!-- End:Post 1-->
<!-- Start:Post 2-->
<li>
<div class="row">
<div class="col-lg-5">
<img src="template/img/blog-5.jpg" alt="">
</div>
<div class="col-lg-7">
<div class="text">
<p>Top Fitness Gear to Help You Workout</p>
</div>
</div>
</div>
</li>
<!-- End:Post 2-->
<!-- Start:Post 3-->
<li>
<div class="row">
<div class="col-lg-5">
<img src="template/img/blog-6.jpg" alt="">
</div>
<div class="col-lg-7">
<div class="text">
<p>The Southern Ocean is the 'newest' named ocean</p>
</div>
</div>
</div>
</li>
<!-- End:Post 3-->
</ul>
<!-- End:Recent Posts-->
</div>
</div>
<!-- End:Blog Right Content-->
</div>
<!-- End:Blog Area -->
</div>
</div>
<!-- End: Blog Sec -->
</div>
</div>
</section>
#endsection
My Layout integrations:
<link type="text/css" rel="stylesheet" href="template/css/bootstrap.min.css"><!-- Bootstrap -->
<link type="text/css" rel="stylesheet" href="template/font-awesome/css/font-awesome.min.css"><!-- font-awesome -->
<link type="text/css" rel="stylesheet" href="template/css/animate.min.css"><!-- Animation -->
<link type="text/css" rel="stylesheet" href="template/css/flexslider.css"><!-- FlexSlider CSS -->
<link type="text/css" rel="stylesheet" href="template/css/style.css"><!-- Light Theme Core CSS -->
<!-- Google Fonts here -->
<link href="template/css/fonts/poppins.css" rel='stylesheet' type='text/css'>
<link href="template/css/fonts/open-sans.css" type='text/css'>
<link href="template/css/fonts/lato.css" rel='stylesheet' type='text/css'>
My workspace looks like this:
Try this
<link type="text/css" rel="stylesheet" href="/template/css/bootstrap.min.css"><!-- Bootstrap -->
<link type="text/css" rel="stylesheet" href="/template/font-awesome/css/font-awesome.min.css"><!-- font-awesome -->
<link type="text/css" rel="stylesheet" href="/template/css/animate.min.css"><!-- Animation -->
<link type="text/css" rel="stylesheet" href="/template/css/flexslider.css"><!-- FlexSlider CSS -->
<link type="text/css" rel="stylesheet" href="/template/css/style.css"><!-- Light Theme Core CSS -->
<!-- Google Fonts here -->
<link href="/template/css/fonts/poppins.css" rel='stylesheet' type='text/css'>
<link href="/template/css/fonts/open-sans.css" type='text/css'>
<link href="/template/css/fonts/lato.css" rel='stylesheet' type='text/css'>
I am developing a Spring Boot application and using Thymeleaf Templating. I am new to this and need a little guidance. I have a index.html file which is the main view which should be displayed. Inside the index.html file i have two fragments, a header and a footer which display as well. What i am having trouble with is inserting more fragments into the index.html file. I want to insert another fragment which displays a navigation top bar as well as a second fragment that displays a side navigation menu. I am looking to include the topnavbar right below the header fragment and the side nav menu on the left side of screen. How do i go about doing this? Thank you.
Index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head lang="en">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, 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" href="../static/css/main.css"
th:href="#{css/main.css}" media="screen"/>
<title>Spring Boot | Web Application</title>
</head>
<body>
<div class="container">
<div class="row" th:include="header :: banner"></div>
<div class="row">
<div class="col-sm-3"><hr /></div>
<div class="col-sm-9 text-center">col-sm-8</div>
</div>
<div class="row">
<div class="col-sm-12"><hr /></div>
</div>
<div class="row" th:include="footer :: copy"></div>
</div>
<!-- jQuery, Popper.js, 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>
</body>
</html>
i'm a web devoper from Italy...I have a problem with loading with href
example:
i have one.html with this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>dkrMobile</title>
<!--caricamento librerie-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
</head>
<body>
<!-- LOGIN -->
<div data-role="page" id="loginPage">
<div data-role="content">
<div style=" text-align:center">
<img style="width: 70%;" src="http://www.laboncloud.it/dkrmobile/css/images/logdkr.png">
</div>
<form action="#pageFile">
<div data-role="fieldcontain">
<label for="userNameLogin">
Username
</label>
<input name="" id="userNameLogin" placeholder="" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="passwordLogin">
Password
</label>
<input name="" id="passwordLogin" placeholder="" value="" type="password">
</div>
<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch="trues">
Login
</a>
</form>
</div>
</div>
</body>
</html>
and the two.html with this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>dkrMobile</title>
<!--caricamento librerie-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
<script type="text/javascript" src="js/tolito-1.0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/tolito-1.0.5.min.css" />
<!--css userinterface-->
<link rel="stylesheet" href="css/ui.css" />
</head>
<body>
<div data-role="page" id="loadingPage">
<div data-role="content">
<h1>caricamento di tutti i contenuti in corso</h1>
<a data-role="button" data-theme="a" data-transition="fade" href="#pageFile">skip</a>
</div>
</div>
<div data-role="page" id="pageFile">
<div data-role="content">
<h1>dueeee</h1>
</div>
</div>
<!-- FILE-->
</body>
</html>
now if tap on login - the two.html will no be loaded.
want a demo?
here the demo
if I click on skip in two.html dont show nothing (if I refresh the page it start work).
the only way is data-ajax="false" ? why?
This is not an error. To understand this problem you must understand how jQuery Mobile works.
Multi HTML template can't be mixed with multi page template. For example when working with several HTML pages, only first one can have more then one page. When jQuery Mobile loads other HTML files it will strip HEAD (we dont need it because first HTML HEAD content is already loaded into the DOM) and it will load ONLY first page it can find in a file, every other page will be discarded.
data-prefetch will not help you here. Also you are initializing it incorrectly, data-prefetch attribute don't have a value, it is just data-prefetch, example:
<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch>Login</a>
If you want to find out more how jQuery Mobile handles multiple HTML and multiple page templates or what are they take a look at this ARTICLE or THIS one. To be transparent they are my personal blog articles. Everything you need to know can be found there.
Basically solution to your problem would be to have all pages inside a single HTML file, or you should brake two.html into two separate HTML files. you decide what is a best solution for you.