<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
Related
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..
I've made a project in React and HTML5. Previously, to call my render function I had put my render into a global function like this:
window.shareRenderResetResult = function () {
ReactDOM.render(
<div> hello </div>,
document.getElementById('salut')
);
};
and I called it in my html page like this:
<script>
shareRenderResetResult();
</script>
Today, for an another project, I have do the same things but I now get a warning in my console:
Uncaught ReferenceError: shareRenderResetResult is not defined
at (index):207 (anonymous) # (index):207
I don't know what to do. Ideas?
my html page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>h</title>
<link rel="shortcut icon" href="">
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script type="text/babel" src="{{ url_for('static', filename='JS/test.js') }}"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='node_modules/materialize-css/bin/materialize.css') }}">
<script src="{{ url_for('static', filename='node_modules/materialize-css/bin/materialize.js') }}"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://use.fontawesome.com/0b3dc57bca.js"></script>
<link rel="shortcut icon" href="">
</head>
<body>
<div class="row">
<div id="salut">
</div>
</div>
<script>
console.log("what's wrong with you ?");
shareRenderResetResult();
</script>
</body>
</html>
i have put a console.log in my function but nothing appeared.
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);