How to fix trix editor in laravel 5.8 - javascript

I am trying to add trix editor in a form. It appears but the toolbar is disabled its not working. After some research i found that was in the header of my layout file so i moved it in the end of the body and removed "defer" and now trix editor is disappeared.
layout file
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
#yield('scripts')
</body>
</html>
field where i want trix editor
<div class="form-group">
<label for="content">Content</label>
<input id="content" type="hidden" name="content">
<trix-editor input="content"></trix-editor>
</div>
trix js and css
#section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.js"></script>
#endsection
#section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.css">
#endsection

--> composer require te7a-houdini/laravel-trix
--> php artisan vendor:publish --provider="Te7aHoudini\LaravelTrix\LaravelTrixServiceProvider"
--> php artisan migrate
In your page use like
<html>
<head>
#trixassets
</head>
<body>
<form method="POST" action="route('article.store')">
#csrf
#trix(\App\Article::class, 'content')
<input type="submit">
</form>
</body>
</html>

Here i made demo trix editor and it's working fine in laravel 5.8.14 v
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.css">
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
#if (Route::has('register'))
Register
#endif
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
Laravel
</div>
<trix-editor input="content"></trix-editor>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.js"></script>
</body>
</html>
Did you forget to add jquery ?

The link of js of trix code that you have mentioned in your section('scripts'), instead of including in 'scripts' section. Directly paste the link in your main HEAD section of html, may be its in layouts.app.
or you can also do the same as you have done but just change some code as like:
In your html, head section, add yield as like #YIELD('CSCRIPTS') just below other mentioned SCRIPT tag, make sure you use new name in yield.
In html, head section, you will also see other SCRIPT tag, there remove DEFER if it is there.
And finally, go to the blade where your SECTION belong and change it to #SECTION('CSCRIPTS').
Works well.
But also you will see the other script tag, there and remove DEFER keyword.
Other keep as it, works perfectly

Related

jQuery on-load fadeIn doesn't work for unknown reason

I want to make the body appear when the website loads. I tried lots of things but didn't work. I would be grateful for help.
var celyLogin = $(".container");
$(document).ready(function(){
/*! Fades in page on load */
$(".container").css('display', 'none');
$(".container").fadeIn(5000);
});
I tried changing from class to id, didn't work. I asked this question once but I had another issue with not putting . before "container". I don't know where's the issue. Please help. Here are CSS and HTML:
h1 {
display: block;
color: aliceblue;
text-align: center;
}
body {
background-color: #0c0c0c;
font-family: 'Fira Code', monospace;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.submit {
display: block;
margin: auto;
background-color: black;
color: white;
}
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="container">
<div>
<div>
<h1>WELCOME USER</h1>
<div id="UandP">
<h3>
Username: <input class="username" type="text" name="username">
</h3>
<h3>
Password: <input class="password" type="password" name="password">
</h3>
</div>
<input type="button" class="submit" value="Log In" name="submit" onclick="validate()">
</div>
</div>
</body>
<script scr="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script scr="script.js"></script>
</html>
You have a typo in both of your JavaScript imports. You typed scr instead of src.

CSS refuses to display on my page. Directory Issue? WebPack?

I'm sure its something simple but I've googled way too many different solutions to know where i went wrong now.
I plan to make this a full site in good time but i am still fresh. Any help is appreciated. Here's the header and nav followed by css I've been tinkering with
/*General Styles*/
body{
padding: 0;
margin: 0;
background-color: #007bff;
}
header nav #left{
background: #0f6674;
color: #f2f2f2;
padding-top: 50px;
min-height: 70px;
border-bottom: #c82333;
}
header nav {
color: #f2f2f2;
text-decoration: none;
font-size: 14px;
}
header ul{
padding: 0;
margin: 0;
}
header li{
float: left;
display: inline;
padding: 0 20px 0 20px;
}
/*Positions Container*/
.container{
position:relative;
width: 80%;
margin: auto;
overflow: hidden;
}
:
<!doctype HTML>
<html>
<head>
<title> Artistic Audio & Visual D.C. </title>
<meta name="description" content="Distributed Home Systems"/>
<meta name = "author" content ="Elishua S. Brown"/>
<meta name="authorURL" content="http://www.artavdc.com/index.html"/>
<!--Mobile Specific-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Internet Explorer-->
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/>
<!--Bootstrap-->
<link href="bootstrap.css" rel="stylesheet"/>
<!-- Reset page styles & Add Custom Styles-->
<link href="Styles.css" rel="stylesheet" />
<link href="Reset.css" rel="stylesheet" />
<script src="Homepage.js"> </script>
<title> Artistic Audio/Visual | Welcome! </title>
</head>
<body>
<header>
<!--Navigation Bar-->
<!--Add Logo to SRC-->
<img src= "src/img/Artav-logo-w.jpg" id="logo" alt="" />
<div id= NavBarImg"></div>
<nav>
<ul id="left">
<h1>You Imagine It, We Create It</h1>
<li>Artistic Home</li>
<li>Audio Installation</li>
</ul>
<ul id="right">
<li><input type="search" id="navSearch" placeholder="Search"></li>
<h2>Subscribe to Recieve Special Offers & Updates</h2>
<form>
<input type="text" placeholder="Company Name.."/>
<input type="email" placeholder="Email.."/>
<button type="submit">Subscribe</button>
</form>
<!--Add link to Appointment Request Form-->
<li>Request Appointment</li>
</ul>
</nav> <!--End Nav-->
To my knowledge, I've closed and used all tags properly. It must be something fairly simple, I'm not really sure.
You should use ./Reset.css when you want to include files that are in the same directory.
If your files are in another directory you should use ./css/Reset.css.
Also be aware that your files should be named with uppercase if you want it to work.
Based on your paths that you have left in comments you should include them like this:
./src/CSS/Styles.css

Getting JavaScript code errors, can anyone help me?

I am getting a few errors within JavaScript. I am fairly new at JavaScript/Jquery. I have checked the errors over google and I understand the errors, however they still appear after attempting to troubleshoot these problems....
Errors are shown on this link:
JavaScript Console Errors
I have tried - Changing file directories, - changing file names, - adding JQuery CDN as first point of call in HTML as expected,- adding a Local Jquery file, - Adding Particles.js and Typed.Js in body tags, adding the js code within body.
HTML Code shown below:
<!DOCTYPE html>
<html>
<head>
<meta lang="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<link rel="stylesheet" href="stylesheet/normalize.css">
<link rel="stylesheet" href="stylesheet/bootstrap.min.css">
<link rel="stylesheet" href="stylesheet/c0nsec.min.css">
<!-- Scripts -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/particles.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/typed.js"></script>
<script type="text/javascript" src="js/c0nsec.min.js"></script>
<!-- My own js file -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<div id="particles-js"></div>
<!-- For full body paricles -->
<div class="container">
<section class="mainLanding">
<div class="row">
<div class="col-md-12 col-sm-12">
<h1 class="test"> ELLO WORLD M8</h1>
<div class="center">
<!-- For typed.js plugin -->
<span class="type"></span>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
CSS code shown Below:
/*======================*/
/* DEFAULT TEMPLATE*/
/*======================*/
html {
font-family: 'Source Sans Pro', Sans-Serif;
}
body {
background: #1f1f1f;
}
/* Particles JS tag */
#particles-js {
width: 100%;
height: 100%;
}
/*======================*/
/* HEADER */
/*======================*/
/*======================*/
/* HEADINGS */
/*======================*/
.test {
font-family: Source Sans Pro;
font-weight: 300;
color: #fff;
text-align: center;
font-size: 7vh;
}
/*======================*/
/* SECTIONS */
/*======================*/
.mainLanding {
position: relative;
top: 50vh;
width: 100vh;
height: 100vh;
left: 0;
right: 0;
}
/* Typed JS tags */
.center {
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
text-align: center;
width: 100%;
}
.center span {
font-family: Source Sans Pro;
font-size: 5em;
color: #fff;
}
JavaScript code shown below:
// Custom Typed.js scripts
$(function() {
$(".type").typed({
strings: [
"Hello World",
"We are C0nSec, we consult with security vulnerabilites",
"Our mission is to keep the internet safe from criminals"
],
typeSpeed: 70,
backDelay: 200,
loop: true
})
})

trying to horizontally align a countdown timer (first time coding/building)

This is my first time building a website. I picked a free bootstrap 3 theme and started editing it from there to try and get the hang of it all. So far it has been going well but I am having problems trying to horizontally center the countdown timer on my site (http://romy.landofthelegend.com/index.php?cID=1)
I tried fidgeting with the HTML, js, and CSS but if there is change the timer will still be aligned left but have a word-break instead.
var finalDate = '2017/04/14';
$('div#counter').countdown(finalDate)
.on('update.countdown', function(event) {
$(this).html(event.strftime('<div class=\"half\">' +
'<span>%D <sup>days</sup></span>' +
'<span>%H <sup>hours</sup></span>' +
'</div>' +
'<div class=\"half\">' +
'<span>%M <sup>mins</sup></span>' +
'<span>%S <sup>secs</sup></span>' +
'</div>'));
});
.main-content-tablecell {
display: table-cell;
vertical-align: bottom;
z-index: 700;
}
.main-content-tablecell .row {
position: relative;
padding-top: 4.2rem;
padding-bottom: 15rem;
}
.main-content-tablecell #counter {
margin-bottom: 4.2rem;
}
.main-content-tablecell #counter:before,
.main-content-tablecell #counter:after {
content: "";
display: table;
}
.main-content-tablecell #counter:after {
clear: both;
}
.main-content-tablecell #counter .half {
float: left;
}
.main-content-tablecell #counter span {
float: left;
text-align: right;
color: #FFFFFF;
font-family: "roboto-black", sans-serif;
font-size: 12rem;
line-height: 1;
padding: 0;
margin-bottom: 1.5rem;
}
.main-content-tablecell #counter span sup {
font-family: "roboto-bold", sans-serif;
font-size: .17em;
color: rgba(255, 255, 255, 0.3);
top: -3.6em;
right: 1em;
}
.main-content-tablecell h1 {
font-size: 4.2rem;
line-height: 1.143;
color: #FFFFFF;
margin-bottom: 1.2rem;
max-width: 600px;
position: relative;
}
.main-content-tablecell p {
color: rgba(255, 255, 255, 0.3);
font-family: "roboto-regular", sans-serif;
font-size: 1.8rem;
max-width: 400px;
<div class="row">
<div class="col-md-2 col-md-offset-5">
<div class="col-twelve">
<div id="counter">
<div class="center-div">
<span class="inner">94 <sup>days</sup></span>
<span class="inner">23 <sup>hours</sup></span>
</div>
<div class="center-div">
<span class="inner"> 40 <sup>mins</sup></span>
<span class="inner">03 <sup>secs</sup></span>
</div>
</div>
</div>
</div>
</div>
please try to make it as simple as possible with explaining, since I am still learning :)
Thank you in advance!
I would suggest first go over bootstrap css and understand grid system and existing components structure. Try to reuse what is already. http://getbootstrap.com/css/#overview
<!DOCTYPE html>
<html lang="en">
<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 -->
<title>Bootstrap</title>
<!-- Bootstrap -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="contianer"> <!-- Boostrap main contianer (Bootstrap requires a containing element to wrap site contents and house in grid system.) http://getbootstrap.com/css/#overview-container-->
<div class="row">
<div class="col-md-2 col-md-offset-5">
<div class="col-twelve">
<div id="counter" class="text-center"></div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="http://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>
<script>
var finalDate = '2017/04/14';
$('#counter').countdown(finalDate)
.on('update.countdown', function(event) {
$(this).html(event.strftime('<div>' +
'<span>%D <sup>days</sup></span>' +
'<span>%H <sup>hours</sup></span>' +
'</div>' +
'<div class=\"half\">' +
'<span>%M <sup>mins</sup></span>' +
'<span>%S <sup>secs</sup></span>' +
'</div>'));
});
</script>
</body>
</html>

JQuery script with html and css

I have these files in the same folder:
index.html
style.css
script.js
I want the nav#menu be nav#menu.sticky on top when I scroll. It should be like http://iconmonstr.com/ but nothing. I only know html and css.
index.html
<!DOCTYPE html>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<header id="main-header">
<h1>Title</h1>
<h2>Slogan</h2>
</header>
<nav id="menu">
</nav>
<section id="main-section">
</section>
<footer id="main-footer">
© 2014 Copyright
</footer>
style.css
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: sans-serif;
}
body {
margin: 0;
}
h1 {
font-size: 3em;
margin: 0;
}
h2 {
font-size: 2em;
margin: 0;
}
#main-header {
background: #08c;
color: #fff;
height: 10em;
padding: 2em;
text-align: center;
}
#menu {
background: red;
height: 3em;
width: 100%;
}
.sticky {
position: fixed;
top: 0;
}
#main-section {
border: 0.1em solid #ccc;
color: #444;
height: 1000px;
}
#main-footer {
font-size: 0.75em;
text-align: center;
margin: 1em;
}
script.js
$(document).ready(function() {
var menu = $("#menu");
var pos = menu.position();
$(window).scroll(function() {
if ($(window).scrollTop() >= pos.top) {
menu.addClass("sticky");
} else {
menu.removeClass("sticky");
}
});
});
You're using jQuery in script.js but you don't include the library.
You have malformed html code.
Try following code. It's working for me.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
<body>
<header id="main-header">
<h1>Title</h1>
<h2>Slogan</h2>
</header>
<nav id="menu">
</nav>
<section id="main-section">
</section>
<footer id="main-footer">
© 2014 Copyright
</footer>
<script src="script.js"></script>
</body>
</html>
What I've changed?
I've added body and head tags,
I've put script which include jQuery from CDN in head tag but you can include this just before including your script and it can be loaded locally, not from CDN,
I've move your script tag to the end because it's generally good practice. Briefly speaking page is rendered faster.
In addition, you wrote "The script doesn't work and in the developer tools of Firefox and Chrome in the section Javascript I don't see anything.". You should see in the console tab in Chrome: "Uncaught ReferenceError: $ is not defined".
On the future: you should paste the code much earlier.
old:
Try this:
<script src="script.js" type="application/javascript"></script>
Information for downvoters:
in HTML 4.x type attribute should be specified. In html5 is optional.
When you type
<script src="script.js"></script>
in HTML document, you create a "relationship" (browser loads JS and parses it accordingly)
Same goes for CSS files. If they are in same page, they can interact (you can set CSS classes by JS on elements)
Beginner gave an example of how to provide function to your javascript file.
When adding files to your html source, you must use html syntax.
<script src="script.js">
/**
* Additional code may even go here
*/
</script>
Follows this syntax.
When adding the css file you'll want to continue to use html syntax as well.
<link href="style.css" rel="stylesheet" type="text/css">

Categories