I tried a template where I put the layout in a folder (/views/layout) and named it mainlayout.blade.php.
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<meta name="description" content="Ogani Template">
<meta name="keywords" content="Ogani, unica, creative, html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Web | {{ $title }}</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght#200;300;400;600;900&display=swap" rel="stylesheet">
<!-- Css Styles -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="css/elegant-icons.css" type="text/css">
<link rel="stylesheet" href="css/nice-select.css" type="text/css">
<link rel="stylesheet" href="css/jquery-ui.min.css" type="text/css">
<link rel="stylesheet" href="css/owl.carousel.min.css" type="text/css">
<link rel="stylesheet" href="css/slicknav.min.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<!-- Js Plugins -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script src="js/mixitup.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Then, I create the first page to simulate on how the pages interact. Let's call it PAGE 1 (/views/Frontend)
#extends('Layout.mainlayout')
<!DOCTYPE html>
<html lang="zxx">
<body>
<!-- Listing -->
#foreach ($blog as $post)
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="blog__item">
<div class="blog__item__pic">
<img src="img/blog/blog-2.jpg" alt="">
</div>
<div class="blog__item__text">
<ul>
<li><i class="fa fa-calendar-o"></i> May 4,2019</li>
<li><i class="fa fa-comment-o"></i> 5</li>
</ul>
<h5>{{ $post["title"] }}</h5>
<p>{{ $post["writings"] }} </p>
Selengkapnya <span class="arrow_right"></span>
</div>
</div>
</div>
#endforeach
As you can see, I tried to simulate where I picked data from a 'database', called the 'slugs' and 'writings' variable. To demonstrate this, I build PAGE 1 ROUTE
Route::get('/blog', function () {
$blog_posts = [
[
"title" => "Judul Post 1",
"slug" => "judul-post-1",
"author" => "Author 1",
"images" => "Gambar 1",
"writings" => "Tulisan 1",
],
];
return view('FrontEnd.blog', [
"title" => "Blog",
"blog" => $blog_posts
]);
});
From that one, I tried to redirect it to another page, let's call it PAGE 2 (/views/Frontend)
#extends('Layout.mainlayout')
<!DOCTYPE html>
<html lang="zxx">
<body>
<!-- Content -->
<!-- Content End -->
</body>
To connect those pages, I create PAGE 2 ROUTE, where I use the slugs to name the web page
Route::get('/blog/{slug}', function ($slug) {
return view('FrontEnd.blogdetails', [
"title" => "Blog Details"
]);
});
==================================================================================
My question is, Why is the layout is not applied on PAGE 2? When I tried to access the PAGE 2 independently (basically changes it as the 'home' page), the layout applies/work. Where did I go wrong?
Thanks in advance!
I don't get it, why you are using <!DOCTYPE html> on every inner page. Let me explain how its done correctly.
You need to define a layout under views/layouts let's call it.
<!-- resources/views/layouts/app.blade.php -->
<html>
<head>
<title>App Name</title>
</head>
<body>
<div class="container">
<!-- this is where content will be shown -->
#yield('content')
</div>
</body>
</html>
Now, on the controller we are returning the view.
return view ('frontend.blog.index',compact('data'));
Nex, on this blade file we need to extend the layout.
<!-- resources/views/frontend/blog/index.blade.php -->
#extends('layouts.app')
#section('content')
<p>This is my body content.</p>
#endsection
In this way, you could solve the layout mystery.
For detail, visit https://laravel.com/docs/9.x/blade#defining-a-layout.
Some of the issues I notice on your code:
you are missing the yield field example #yield('content')
next on your view file you need to call #section('content') ... #endsection
#PS:(you can replace content text with body or anything you like.)
Related
I am creating a empty grid with gridstack.js and them adding new elements thougth its API. The new items are visualized correctly. They and are re-sizable, but I can not drag them around the grid. I tried to use enable() and also enableMove(true, true) but it seem have no effect.
This example only contains one elements, but i pretend to add more when it works.
This is the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="/static/css/jquery-ui.min.css" rel="stylesheet">
<link href="/static/fonts/css/fontawesome-all.css" rel="stylesheet">
<link href="/static/css/energy.css" rel="stylesheet">
<link href="/static/css/icons.css" rel="stylesheet">
<link rel="stylesheet" href="/static/css/gridstack.min.css" />
</head>
<body>
<header>
</header>
<main>
<article class="container-fluid">
<div class="slot big text-center">
<div class="grid-stack"></div>
</div>
</article>
</main>
<footer></footer>
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.11/lodash.min.js" integrity="sha256-7/yoZS3548fXSRXqc/xYzjsmuW3sFKzuvOCHd06Pmps=" crossorigin="anonymous"></script>
<script src="/static/js/jquery-3.3.1.js"></script>
<script src="/static/js/jquery-ui.js"></script>
<script src="/static/js/materialize.min.js"></script>
<script src="/static/js/clipboard.min.js"></script>
<script type="text/javascript" src='/static/js/gridstack.min.js'></script>
<script type="text/javascript" src='/static/js/gridstack.jQueryUI.min.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$Grid = $('.grid-stack');
$Grid.enableMove(true, true);
$Grid.gridstack(
{
}
);
const widget = '<div data-widget-source="/widgets/1/" class="widget" style="background-color: red;"></div>';
$Grid.data('gridstack').addWidget(
widget,
1, 1, 1, 1,false,
1,12,1,12, id ="slot_1"
);
});
</script>
</body>
</html>
The div pased to the addWidget function should have this structure to work correctly:
<div >
<div class="grid-stack-item-content" >
... your stuff here..
</div>
</div>
try this code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Owl Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</script>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>
I'm trying to use owl carousel in my new project but it seems the owl carousel isn't working, i have tried with the above code dont know where im going wrong please can any one help me so that it will help me to fix the issue, since im new to this field im unable to solve the issue,please can any one help me out in this
remove <script src="jquery.min.js"></script> from last
and initialize Carousel like below
jQuery(document).ready(function() {
jQuery(".owl-carousel").owlCarousel({
});
});
or try this code
jQuery(document).ready(function() {
jQuery(".owl-carousel").owlCarousel({});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Owl Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
</body>
</html>
I have a silly problem I think, but I've tried several answers found on the net and nothing works so far.
I'd just like to have an id=modal
Here's the code:
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Le Cabinet</title>
<link rel="shortcut icon" href="img/logo-min.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="css/style-sheet.css">
<link rel="stylesheet" href="css/mystyles.scss">
</head>
<body>
<main>
<div class="container">
<section class="columns">
<div>
<button onclick="toggleClass()" class="button is-rounded is-info is-hidden-tablet section__btn__info">Plus d’infomartions...</button>
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<section class="modal-card-body">
<p class="modal-card-title modal__title"></p>
</section>
</div>
</div>
</div>
</section>
</div>
</main>
</body>
<script type="text/javascript" src="js/burger.js"></script>
</html>
script:
const modal = document.getElementById('modal');
console.log('modal', modal);
function toggleClass() {
modal.classList.toggle('is-active');
}
And modal return null,I can't get the id.
I don't see where you inject/insert your script.
You have to inject/insert your script at the bottom of your body, because when you call document.getElementById if the script is at the top, the html is not load so we can't find your id like :
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- My super html -->
<script src="path/to" type="text/javascript"></script>
</body>
</html>
HTML entities(®,©,€.. etc) not getting displayed correctly when using knockout bindings.
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- This is a *view* - HTML markup that defines the appearance of your UI -->
<!--Data appearing via binding-->
<p>Product name: <strong data-bind="text: productName"></strong></p>
<!--Static data-->
<p>Product name:<strong>ABC®EFG</strong></p>
<script src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/knockout-3.4.0.js"></script>
<script src="js/script.js" charset="utf-8"></script>
</body>
</html>
Javascript(script.js):
function AppViewModel() {
this.productName = ko.observable("ABC®EFG");
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
Output:
Changing the binding from text to html fixed the issue.
<p>Product name: <strong data-bind="html: productName"></strong></p>
I'll preface this by saying that I'm fairly new to Javascript in general, but I'm getting there. I've got an app that's written with Node.js, Express, and uses Bootstrap for the front end.
I'm trying to use Selectize to gain some additional functionality with one of my forms, but I can't get it to work at all. The text input field is present, but it's lacking the functionality/styling that I'm looking for. I'm using Handlebars for templating, and I think my issues may have something to do with that.
I'm lost at this point, and any advice would be super useful.
Here's my simple testing page:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/stylesheets/styles.css" type="text/css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Open+Sans|Roboto:300|Lora:700" rel="stylesheet" type="text/css">
<!-- Icon -->
<link href="/images/favicon.ico" rel="icon">
<!-- Selectize.js -->
<link href="/stylesheets/selectize.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Testbed2</h1>
<br>
<div class="demo">
<input type="text" value="test" class="demo-default selectized" id="input-tags" tabindex="-1" style="display: block;">
</div>
<script>
var data = [ "option 1", "option 2", "option 3" ];
var items = data.map(function(x) { return { item: x }; });
$('#input-tags').selectize({
delimiter: ',',
persist: false,
maxItems: 2,
options: items,
labelField: "item",
valueField: "item",
sortField: 'item',
searchField: 'item'
});
</script>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.6.14/selectize.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
To keep your code style and place your scripts at the end of your document, you can try this:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/stylesheets/styles.css" type="text/css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Open+Sans|Roboto:300|Lora:700" rel="stylesheet" type="text/css">
<!-- Icon -->
<link href="/images/favicon.ico" rel="icon">
<!-- Selectize.js -->
<link href="/stylesheets/selectize.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Testbed2</h1>
<br>
<div class="demo">
<input type="text" value="test" class="demo-default selectized" id="input-tags" tabindex="-1" style="display: block;">
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.6.14/selectize.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
var data = [ "option 1", "option 2", "option 3" ];
var items = data.map(function(x) { return { item: x }; });
$('#input-tags').selectize({
delimiter: ',',
persist: false,
maxItems: 2,
options: items,
labelField: "item",
valueField: "item",
sortField: 'item',
searchField: 'item'
});
</script>
</body>
</html>
This way will prevent a jquery error but I'm unfamiliar with selectize to know if this script is working as you intended.