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.
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>
Her is an example:
I got a slider element and its initialization in index.html her
<head>
<meta charset="UTF-8">
<title>Simulation Animator</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/codemirror.css">
<link rel="stylesheet" type="text/css" href="css/darcula.css">
<link rel="stylesheet" type="text/css" href="../semantic/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script src="../semantic/dist/semantic.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="ui red labeled slider" id="speed_slider1" ></div>
<script>
var speedLabels = ["1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x"];
let speed = 1;
$('#speed_slider1').slider({
min: 1,
max: 10,
interpretLabel: function(value) {
return speedLabels[value];
}
});
</script>
</body>
In my js file I wanna get the current value of the slider
$("#speed_slider1").slider({
onChange: function(value){
console.log(value);
}
});
But on console it says
Uncaught TypeError: $(...).slider is not a function
Isn't it possible to put the Javascript code in a separate js file instead of having them in index.html? If possible how?
Furthermore, can the javascript code for initialization of this slider also put in the separate js file? If possible how?
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.
This question adds a CSS conditionally as the last CSS link (effectively overwriting all others), with this javascript:
<link rel="stylesheet" href="website/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="website/reveal/css/reveal.min.css">
<link rel="stylesheet" href="website/reveal/css/theme/simple.css" id="theme">
<!-- Conditionally add <link rel="stylesheet" href="website/reveal/css/print/pdf.css"> -->
<script type="text/javascript">
if (...) {
var lnk = document.createElement('link');
lnk.type='text/css';
lnk.href='website/reveal/css/print/pdf.css';
lnk.rel='stylesheet';
document.getElementsByTagName('head')[0].appendChild(lnk);
}
</script>
<link rel="stylesheet" href="website/highlight/highlight.css">
<link rel="stylesheet" href="website/optaplannerPresentation.css">
The problem is: It adds it as the last CSS link, overwriting the later 2 CSS files (including highlight.css). Is there a way to add it after the simple.css, but before the highlight.css?
Two options for you:
If the condition you're testing is using information immediately available and your script element doesn't use async or defer, this could be one of the rare cases where document.write is a reasonable option:
<link rel="stylesheet" href="website/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="website/reveal/css/reveal.min.css">
<link rel="stylesheet" href="website/reveal/css/theme/simple.css" id="theme">
<!-- Conditionally add <link rel="stylesheet" href="website/reveal/css/print/pdf.css"> -->
<script type="text/javascript">
if (...) {
document.write('<link type="text/css" rel="stylesheet" href="website/reveal/css/print/pdf.css">');
}
</script>
<link rel="stylesheet" href="website/highlight/highlight.css">
<link rel="stylesheet" href="website/optaplannerPresentation.css">
If you're using an async / defer script, or information that isn't avaialble inline, or you just don't want to use document.write, you can still do it: You can find the link that adds highlight.css via querySelector using an attribute-ends-with selector, then use its parentNode and the parent's insertBefore to insert the new link in front of it.
var lnk = document.createElement('link');
lnk.type='text/css';
lnk.href='website/reveal/css/print/pdf.css';
lnk.rel='stylesheet';
var highlight = document.querySelector('link[href$="highlight.css"]');
highlight.parentNode.insertBefore(lnk, highlight);
querySelector works in all modern browsers, and also IE8. It returns the first element that matches the CSS selector you give it. (There's also querySelectorAll, which returns a list of all matching elements.)
To do that, though, your code must be after the link for highlight.css (unless it's running async or in some event handler):
<link rel="stylesheet" href="website/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="website/reveal/css/reveal.min.css">
<link rel="stylesheet" href="website/reveal/css/theme/simple.css" id="theme">
<link rel="stylesheet" href="website/highlight/highlight.css">
<!-- Conditionally add <link rel="stylesheet" href="website/reveal/css/print/pdf.css"> -->
<script type="text/javascript">
if (...) {
var lnk = document.createElement('link');
lnk.type='text/css';
lnk.href='website/reveal/css/print/pdf.css';
lnk.rel='stylesheet';
var highlight = document.querySelector('link[href$="highlight.css"]');
highlight.parentNode.insertBefore(lnk, highlight);
}
</script>
<link rel="stylesheet" href="website/optaplannerPresentation.css">
Because JavaScript not executes with page rendering, so you need to add a place holder and then replace:
function changeCSS(cssFile) {
document.getElementById('stylesheetReplace').href='cssFile';
}
and placeholder for css:
<link rel="stylesheet" href="website/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="website/reveal/css/reveal.min.css">
<link rel="stylesheet" href="website/reveal/css/theme/simple.css" id="theme">
<link rel="stylesheet" href="" id="stylesheetReplace>
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.