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>
Related
I created a small nav to switch between different stylesheets using jquery, however once I moved my scripts out from the page and into a separate file they no longer respond.
$(document).ready(function() {
// teal stylsheet
$("#cssTeal").click(function() {
$("link[rel=stylesheet]").attr({href : "stylesheetteal.css"});
});
// pink stylesheet
$("#cssPink").click(function() {
$("link[rel=stylesheet]").attr({href : "stylesheetpink.css"});
});
// yellow stylesheet
$("#cssYellow").click(function() {
$("link[rel=stylesheet]").attr({href : "stylesheetyellow.css"});
});
});
<html>
<head>
<meta charset="UTF-8"/>
<title>Mission Statement</title>
<link href="stylesheetteal.css" rel="stylesheet" type="text/css" media="all" id="teal"/>
<link href="stylesheeetpink.css" rel="alternate stylesheet" type="text/css" media="all" id="pink"/>
<link href="stylesheetyellow.css" rel="alternate stylesheet" type="text/css" media="all" id="yellow"/>
<link href="scripts.js" rel="external" type="text/javascript"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui/jquery-ui.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="themes">
<div class="indiv"><a id="cssTeal" href="#teal"><img src="assets/tealcircle.png"></a></div>
<div class="indiv"><a id="cssPink" href="#pink"><img src="assets/pinkcircle.png"></a></div>
<div class="indiv"><a id="cssYellow" href="#yellow"><img src="assets/yellowcircle.png"></a></div>
</div>
The problem is the order of the loaded scripts and the tag you are using to load your custom scripts. You are using a link tag instead of a script tag.
Try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui/jquery-ui.min.js"></script>
<script src="scripts.js"></script>
Also add all the script tags just before the closing </body> tag. Scripts block content from loading, so you should add them last so they don’t block the rest of the content from being loaded.
Im working a C# MVC project. Datepicker stopped working and I narrowed it down to what is causing it but don't have a solution...
I change one line of code in the Layout page and it breaks the date picker. Specifically going from jquery-1.11.1.min.js to jquery-3.3.1.min.js
This layout works:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.timepicker.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datepicker.min.js"></script>
<script src="~/Scripts/mvcfoolproof.unobtrusive.min.js"></script>
<script src="~/Scripts/MvcFoolproofJQueryValidation.min.js"></script>
<link href="~/Content/jquery.timepicker.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" />
<link href="~/Content/Menu.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
This layout breaks datepicker:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.timepicker.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datepicker.min.js"></script>
<script src="~/Scripts/mvcfoolproof.unobtrusive.min.js"></script>
<script src="~/Scripts/MvcFoolproofJQueryValidation.min.js"></script>
<link href="~/Content/jquery.timepicker.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" />
<link href="~/Content/Menu.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
So the Datepicker doesn't pop a calendar below the input, just a thick white line above the input.
I haven't been able to resolve this. Help?
I needed Bootstrap.Datepicker v1.7.1....
It brought in some new .css files and overwrote some of what was in the project and now the datepicker calendar is working.
I neededthe new code in bootstrap-datepicker.css . The code I had was not up to date. Also needed the new code in bootstrap-datepicker.js and bootstrap-datepicker.min.js
I deleted everything else the Package Manager brought in and everything works as intended.
I've checked other answers on here and I don't think there's one that covers my problem. I am trying to include two JQuery plugins (Datepicker and Select2) and I just want to download them, include them in the head of my site and initiate them in...
$(document).ready(function() {
// HERE!
$('[data-toggle="datepicker"]').datepicker();
$(".js-example-basic-single").select2();
});
...as both suggest I should be able to do... but both give me a ReferenceError: require is not defined in the console and if I go into the .js files and comment out the offending line (as suggested in other answers) the plugin doesn't work at all and I just get an undefined function in the console.
I'm sure this is something simple that's simply outside of my understanding, if anyone can help, that would be great.
This is the head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- fonts -->
<link rel="stylesheet" type="text/css" href="/fonts/roboto.css" media="screen" />
<!-- end fonts -->
<link rel="stylesheet" type="text/css" href="/css/general.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/message_boxes.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/loading_screen.css" media="screen" />
<link href="/css/datepicker.css" rel="stylesheet">
<script type="text/javascript" src="/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="/js/retina.min.js"></script>
<script type="text/javascript" src="/js/jscolor.min.js"></script>
<script type="text/javascript" src="/js/datepicker.js"></script>
<script type="text/javascript" src="/js/general.js"></script>
<script type="text/javascript" src="/js/message_boxes.js"></script>
<script type="text/javascript" src="/js/loading_screen.js"></script>
<script type="text/javascript" src="/js/tipped.js"></script>
<link rel="stylesheet" type="text/css" href="/css/tipped.css" />
<link rel="stylesheet" type="text/css" href="/css/icheck_blue.css" />
<script type="text/javascript" src="/js/icheck.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
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.
So I am working on a simple image cropping function using pre-built Yahoo UI. However, it seems the cropping box or whatever it is called lies under the image, or maybe it's just transparent.
Here is my code, you can just copy and paste to inspect.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/resize.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/imagecropper.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/imagecropper/assets/skins/sam/imagecropper.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/resize/resize-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/imagecropper/imagecropper-min.js"></script>
<img id="yui_img" src="http://developer.yahoo.com/yui/examples/imagecropper/assets/yui.jpg">
<script>
(function(){var crop = new YAHOO.widget.ImageCropper('yui_img');})();
</script>
Here is the URL to the demo Yahoo provides
http://developer.yahoo.com/yui/examples/imagecropper/simple_crop_clean.html
Please help me. Thanks in advance!
This is the code that was working for me
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Simple Crop Interface</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/imagecropper/assets/skins/sam/imagecropper.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/resize/resize-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/imagecropper/imagecropper-min.js"></script>
<!--there is no custom header content for this example-->
</head>
<body class="yui-skin-sam">
<h1>Simple Crop Interface</h1>
<div class="exampleIntro">
<p>This example shows how to make an image croppable.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<img id="yui_img" src="http://developer.yahoo.com/yui/examples/imagecropper/assets/yui.jpg">
<script>
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var crop = new YAHOO.widget.ImageCropper('yui_img');
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>
When I removed the last script ie
<script>
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var crop = new YAHOO.widget.ImageCropper('yui_img');
})();
</script>
This code then the box dissappeared please check with your code. Maybe the javascript is essential or maybe ur missing some thing else. Better to keep all the js and css and try debugging removing one by one. You will get to know the specific point. And my code is hopefully working please let me know if it isn't. :)