I have noticed that this error happened when I use:
plugins: ["interaction", "timeGrid"],
and disapear when I use
plugins: ["dayGrid"],
can anyone explain why ?
html page
<link
href="https://unpkg.com/#fullcalendar/core#4.4.0/main.min.css"
rel="stylesheet"
/>
<link
href="https://unpkg.com/#fullcalendar/daygrid#4.4.0/main.min.css"
rel="stylesheet"
/>
<script src="https://unpkg.com/#fullcalendar/core#4.4.0/main.min.js"></script>
<script src="https://unpkg.com/#fullcalendar/daygrid#4.4.0/main.min.js"></script>
import <script src="https://unpkg.com/#fullcalendar/interaction#4.4.0/main.min.js"></script>
Related
I'm struggling my head for 5 hrs to get out of this issue, I've put some <script> tags in the index.html file that resides in the public folder.
I want them to execute after the Browser has rendered the HTML completely, I know this is very basic question, but the problem is, I'm converting an HTML template to React, and it heavily uses animations, which I can't afford to write in react again from start. Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Galaxy App</title>
<!--CSS-->
<link href="asset/css/icofont.min.css" rel="stylesheet" />
<link href="asset/css/linearicons.min.css" rel="stylesheet" />
<link href="asset/css/magnific-popup.min.css" rel="stylesheet" />
<link href="asset/css/animsition.min.css" rel="stylesheet" />
<link href="asset/css/bootstrap.min.css" rel="stylesheet" />
<link href="asset/css/swiper.min.css" rel="stylesheet" />
<link href="asset/css/styles.css" rel="stylesheet" />
<link href="asset/css/main.css" rel="stylesheet" />
<link href="asset/css/homepage.css" rel="stylesheet" />
<!--Theme CSS-->
<link href="asset/css/theme.css" rel="stylesheet" />
<link href="asset/css/responsive.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="asset/js/polyfill.min.js"></script>
<script src="asset/js/jquery.min.js"></script>
<script src="asset/js/jquery.viewport.min.js"></script>
<script src="asset/js/jQuerySimpleCounter.min.js"></script>
<script src="asset/js/jquery.magnific-popup.min.js"></script>
<script src="asset/js/animsition.min.js"></script>
<script src="asset/js/isotope.pkgd.min.js"></script>
<script src="asset/js/bootstrap.bundle.min.js"></script>
<script src="asset/js/rellax.min.js"></script>
<script src="asset/js/swiper.min.js"></script>
<script src="asset/js/smoothscroll.js"></script>
<script src="asset/js/svg4everybody.legacy.min.js"></script>
<script src="asset/js/TweenMax.min.js"></script>
<script src="asset/js/TimelineLite.min.js"></script>
<script src="asset/js/typed.min.js"></script>
<script src="asset/js/vivus.min.js"></script>
<script src="asset/js/main.js"></script>
<!-- Theme JS -->
<script src="asset/js/theme.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="asset/js/cutsom.js"></script>
</body>
</html>
I manually checked by logging the document.getElementById() in the last script, and it returns undefined/null because at that time the HTML is not rendered completely, even though I've put the scripts at the end of file.
it works if I add setTimeout in my script, and it captures the elements perfectly.
So what should I do to only load all the scripts when my HTML has been rendered completely.
One way to accomplish this is to emit an Event from React.
Add this to your main react component:
useEffect(() => {
const event = new Event('rendered')
document.dispatchEvent(event)
}, [])
Listen for the event on the page:
<script>
document.addEventListener('rendered', function() {
// start animation
}, false)
</script>
So I have a view that the css and js is not loading:
The controller:
return view('home.news')
->with("news", $news);
the route:
Route::get('/news/{id}', ['as'=>'home.news','uses'=>'HomeController#news']);
And I have used asset to get the data from css and js
css:
<link rel='icon' sizes="16x16" href="icon/favicon-icon.png" type='image/x-icon'>
<link rel="stylesheet" href="{{asset('node_modules/bulma/css/bulma.min.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('node_modules/swiper/css/swiper.min.css')}}">
<link rel="stylesheet" href="{{asset('node_modules/#fortawesome/fontawesome-free/css/all.min.css')}}">
<link rel="stylesheet" href="{{asset('styles/packages.css')}}" type=" text/css">
<link rel="stylesheet" href="{{asset('styles/general.css')}}" type=" text/css">
<link rel="stylesheet" href="{{asset('styles/jquery-ui.css')}}" type=" text/css">
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
#yield("css")
js:
<script src="{{asset('node_modules/swiper/js/swiper.min.js')}}"></script>
<script src="{{asset('js/swipers.js')}}"></script>
<script src="{{asset('js/navbar.js')}}"></script>
<script src="{{asset('js/jquery.js')}}"></script>
<script src="{{asset('js/jquery-ui.js')}}"></script>
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<script type="text/javascript">
AOS.init();
</script>
Any help would be appreciated, Thank you!
probably it's because wrong path for your files.
your css and js folders should be inside the public folder of your laravel project.
if it's not working yet you can replace "asset" with "url".
hi I want to use EasyUI GridView and Tab in Asp.net MVC4 and I put two Grid in a Tab.
but I have problem with it.
I added these Script and css in My Layout:
<link href="#Url.Content("~/Content/kendo/2013.1.319/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2013.1.319/kendo.blueopal.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2013.1.319/kendo.rtl.min.css")" rel="stylesheet" type="text/css" />
<link href="~/Content/1-ui.core.css" rel="stylesheet" />
<link href="~/Content/2-ui.theme.css" rel="stylesheet" />
<link href="~/Content/3-ui.datepicker.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="#Url.Content("~/Scripts/kendo/2013.1.319/jquery.min.js")"> </script>
<script src="#Url.Content("~/Scripts/kendo/2013.1.319/kendo.all.min.js")"> </script>
<script src="#Url.Content("~/Scripts/kendo/2013.1.319/kendo.aspnetmvc.min.js")"> </script>
<script src="#Url.Content("~/Scripts/kendo.modernizr.custom.js")"> </script>
<script src="~/Scripts/jquery-ui-1.9.2.min.js"> </script>
<script src="~/Scripts/jquery.ui.datepicker-cc.js"> </script>
<script src="~/Scripts/calendar.js"> </script>
<script src="~/Scripts/jquery.ui.datepicker-cc-fa.js"> </script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"> </script>
and I added in My Index these :
<script src="~/Scripts/MapScript/Sld.js"></script>
<script src="~/Scripts/MapScript/proj4js-compressed.js"></script>
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAl9RMqSzhPUXAfeBCXOussRSPP9rEdPLw3W8siaiuHC3ED5y09RTJKbutSNVCYFKU-GnzKsHwbJ3SUw'></script>
<script src="~/Scripts/MapScript/ToolsMenu.js"></script>
<link href="~/Content/MapStyle/MStyle.css" rel="stylesheet" />
<script src="~/OpenLayers.js"></script>
<script src="~/Scripts/MapScript/LoadMap.js"></script>
<script src="~/Scripts/mootools-core-1.4-full.js"></script>
<script src="~/Scripts/mootools-more-1.4-full.js"></script>
and in My page that I want to load EasyUI GridView I added these:
<link href="~/Scripts/easyui-1.3.6/themes/icon.css" rel="stylesheet" />
<link href="~/Scripts/easyui-1.3.6/themes/default/easyui.css" rel="stylesheet" />
<link href="~/Scripts/easyui-1.3.6/themes/default/easyui-rtl.css" rel="stylesheet" />
but when I Load My page, first the Tab is not loaded and with reClick on its Link , it loaded.
I think it for conflicting between jqueries that added?????!!!
note: when I create this page without index and Layout ,there isn't no problem
what is the problem??
Try using $.noConflict() in order to avoid conflict between different js files.
see here :- http://api.jquery.com/jquery.noconflict/
NOTE :- Try including required js and css files at one place.
Load Mootools before jQuery. Then, use either
document.id("id_of_element")
or enclose any Mootools classes in
( function () {
$ = document.id;
this.MyClass = new Class({
...
});
})();
This will solve any conflicts between jQuery and MooTools, at least.
I have a html file where I instance a new Javascript object. It that code I dynamically create some dojo components. I have the CSS style included in the HTML file. But the components doen't get the correct look. Am I missing something?
Here is some of my code:
Creation of a component:
var buttonToolbar = new dijit.Toolbar({});
buttonToolbar.addChild(
new dijit.form.Button({
label: "1x1 layout",
onClick: function() { mv.createLayout(1, 1);},
iconClass: "myIcon1",
class: "dhButton"
})
);
HTML head:
<link rel="stylesheet" href="css/main-demo.css" media="screen" />
<link rel="stylesheet" href="js/vendor/dh/medview/css/medview.css" media="screen" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/widget/Dialog/Dialog.css" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
</script>
<script type="text/javascript">
dojo.addOnLoad(function(){
//new object creation
}
);
});
</script>
You have to add class claro to the body tag like this.
<body class="claro">
Guide : https://dojotoolkit.org/reference-guide/1.9/dijit/themes.html
And check again that you have set parseOnLoad in dojoConfig like this.
dojoConfig = {
parseOnLoad: true
};
Note : If you use parseOnLoad: true you should not use parser.parse() See more here.
Using the plugin from: Famspam's Facebox
however I seem to be encountering some issues getting it to open. The following is my head contents:
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Prepotence</title>
<link rel="stylesheet" href="style2.css" type="text/css"/>
<script src="/src/jquery.js" type="text/javascript" charset="utf-8"></script>
<link href="/src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/src/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : '/src/loading.gif',
closeImage : '/src/closelabel.png'
})
})
</script>
</head>
And whenever I attempt to open anything with code similar to:
Link
Absolutely nothing shows up, at all.
$(function(){
$('a[rel*=facebox]').facebox({
loadingImage : '/src/loading.gif',
closeImage : '/src/closelabel.png'
});
});
I've checked it and it's working fine, you can change both $ to jQuery if you're using other frameworks $-related :)
Cheers
G.