I'm sing Highlight Js to render Code in QuillJs Editor.
I've used following libraries.
<script src="{{ asset('js/highlight.min.js') }}"></script>
<script src="{{ asset('js/quill.js') }}"></script>
<script src="{{ asset('js/quill-textarea.js') }}"></script>
<link rel="stylesheet" href="{{ asset('css/default.min.css') }}" />
<link rel="stylesheet" href="{{ asset('css/monokai-sublime.min.css') }}" />
hljs.configure({
languages: ["javascript", "ruby", "python", "php","json","xml","sql","css","html"]
});
quilljs_textarea('.quilljs-textarea', {
modules: {
syntax: true,
toolbar: toolbarOptions
},
theme: "snow"
});
The Following is result
Only Top element(div and class) is highlighted
Did I miss anything..
Related
guess it's a stupid question but I don't know a solution. I want to load a vue component and js file to a blade view.
When i put
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/selectize_settings.js') }}"></script>
it loads the selectize_settings.js file but not the vue. When i put defer
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/selectize_settings.js') }}"></script>
it loads the vue component but not the selectize_settings.js (ReferenceError: $ is not defined). I know that's because jquery hasn't been loaded through app.js when I load selectize_settings.js.
app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'selectize/dist/css/selectize.default.css'
window.$ = window.jQuery = require('jquery')
require('selectize');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
test.blade.php
<!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', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/selectize_settings.js') }}"></script>
<script src="https://kit.fontawesome.com/4262f4e15a.js" crossorigin="anonymous"></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">
<div class="control-group">
<label for="select-beast">Beast:</label>
<select id="select-beast" class="demo-default" placeholder="Select a person...">
<option value="">Select a person...</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<div class="vue-comp">
<example-component></example-component>
</div>
</div>
</body>
</html>
selectize_settings.js
$( document ).ready(function() {
$('#select-beast').selectize({
create: true,
sortField: {
field: 'text',
direction: 'asc'
},
dropdownParent: 'body'
});
});
ExampleComponent.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
I hope somebody can help. Greetings!
Try this in your app.js
//...
global.$ = global.jQuery = require('jquery');
//...
You may also remove defer attr
<script src="{{ asset('js/app.js') }}"></script>
Try this :
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
ok it works when you put defer to the js file as well!
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/selectize_settings.js') }}" defer></script>
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('js/script.js') }}"></script>
<link rel="stylesheet" href="{{ asset('css/app.css') }}" >
<link rel="stylesheet" href="{{asset('css/bootstrap-select.min.css')}}">
<link rel="stylesheet" href="{{asset('css/style.css')}}">
script.js
$('.selectpicker').selectpicker();
There are not errors in the console but options inside select tag are not showing
I am using this package to pass variables to javascript in Laravel 5.2, but I get:
all.js:56Uncaught ReferenceError: categories is not defined
In my controller I am trying to pass variables like this:
JavaScript::put([
'categories' => $numberOfViewsByCategory[0],
'categoryViews' => $numberOfViewsByCategory[1],
'chains' => $numberOfViewsByChain[0],
'chainViews' => $numberOfViewsByChain[1]
]);
I have set the path in the config file:
'bind_js_vars_to_this_view' => 'layouts.partials.foot',
And my partials.foot blade looks like this:
#section('foot')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ asset('js/zurb/zurb.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui/jquery-ui.min.js') }}"></script>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script type="text/javascript" src="{{ asset('js/jquery-filer/jquery-filer.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/editor/editor.js') }}"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"> </script>
<script src="{{ asset('js/all.js') }}"></script>
#stop
But when I do console.log(categories) in my all.js file, I get the above mentioned error.
the documentation says:
which view you want your new JavaScript variables to be prepended
to.
So I suppose that in your layout.blade.php you have something like #yield('footer') for the moment.
I would suggest editing your foot.blade.php like:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ asset('js/zurb/zurb.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-ui/jquery-ui.min.js') }}"></script>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script type="text/javascript" src="{{ asset('js/jquery-filer/jquery-filer.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/editor/editor.js') }}"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"> </script>
<script src="{{ asset('js/all.js') }}"></script>
And in your layout, to replace the #yield by an #include('partials.foot')
I am loading all of the below libraries and files, but for some reasons only the CSS is executing and none of the external js files. The scripts.js file holds all of my jQuery and it seems to be formatted properly. I'm not sure why the CSS would execute, but not the jQuery.
In chrome dev tools, everything below is loaded.
<head>
<!DOCTYPE html>
<meta charset=utf-8 />
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/spectrum.css') }}">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='scripts/spectrum.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='scripts/scripts.js') }}"></script>
</head>
This is a portion of the scripts.js file:
$("span.output").draggable({
stop: function(event, ui) {}
});
$('input[type=file]').change(
function() {
$('#submitbutton').click();
});
$("#text_submit").submit(
function(event) {
$("#text1").html($("#1").val());
$("#text2").html($("#2").val());
$("#text3").html($("#3").val());
$("#text4").html($("#4").val());
$("#text5").html($("#5").val());
$("#text6").html($("#6").val());
$("#text7").html($("#7").val());
$("#text8").html($("#8").val());
$("#text9").html($("#9").val());
$("#text10").html($("#10").val());
$("#slider1").show();
$("#slider2").show();
$("#slider3").show();
$("#slider4").show();
$("#slider6").show();
$("#slider7").show();
$("#slider8").show();
$("#slider9").show();
event.preventDefault();
});
You need to put your code inside script.js in JQuery's Dom Ready function, like this;
$(document).ready(function(){
// Your code here
});
For more info, http://api.jquery.com/ready/
Try the below, not declaring type="text/javascript" in your jquery loading way might also be an issue.
<head>
<!DOCTYPE html>
<meta charset=utf-8 />
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/spectrum.css') }}">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/spectrum.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
</head>
First, I am not good with javascript and jquery .I have video urls like this :
http://www.youtube.com/v/u62EpfeUrG4?version=3&f=videos&app=youtube_gdata
I am using jinja2 for templating (this code includes some JS for fancybox with images).
My problem is only with youtube videos.
And I wrote this code (Edited):
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="{{ url_for('static', filename='js/fancybox/lib/jquery.mousewheel-3.0.6.pack.js') }}"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="{{ url_for('static', filename='js/fancybox/source/jquery.fancybox.css') }}" type="text/css" media="screen" />
<script type="text/javascript" src="{{ url_for('static', filename='js/fancybox/source/jquery.fancybox.pack.js') }}"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="{{ url_for('static', filename='js/fancybox/source/helpers/jquery.fancybox-buttons.css') }}" type="text/css" media="screen" />
<script type="text/javascript" src="{{ url_for('static', filename='js/fancybox/source/helpers/jquery.fancybox-buttons.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/fancybox/source/helpers/jquery.fancybox-media.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='js/fancybox/source/helpers/jquery.fancybox-thumbs.css') }}" type="text/css" media="screen" />
<script type="text/javascript" src="{{ url_for('static', filename='js/fancybox/source/helpers/jquery.fancybox-thumbs.js') }}"></script>
<script type="text/javascript">$(document).ready(function() { $(".fancybox").fancybox();});</script>
<script type="text/javascript">$("a.fancytitle").fancybox({'titlePosition': 'inside','titleFormat': function() {return $('.fancytitle').attr('title');}});</script>
<script type="text/javascript">
$('.video').on('click', function(event) {
event.preventDefault();
$.fancybox({
'type' : 'iframe',
'href' : this.href,
'overlayShow' : true,
'centerOnScroll' : true,
'speedIn' : 100,
'speedOut' : 50,
'width' : 640,
'height' : 480
});
});
</script>
This is where I want to show an icon, that when I click on it, the fancybox frame should appear with the video .
{% if items.trailers %}
<a href="{{items.trailers.ytb_url}}" id="video" class="video">
<img class="trailer" src="{{url_for('static', filename='img/video.png')}}" title="{{items.title}}-{{items.trailers.ytb_title}}"/>
</a>
{% endif %}
This doesn't work , when I click on the image, it works without fancybox.
Any suggestions ?
Solution found :
(function ($) {
$(document).ready(function(){
$('a[href*=youtube]').each(function () {
var thisHref = this.href
$(this).fancybox({
"padding": 0,
"type": 'iframe',
"href" : thisHref+"&wmode=opaque;autoplay=1"
});
});
});
})(jQuery);