I have designed custom navbar/menu. It currently calls CSS from my style.css and the JS which is used is included in the PHP file using the following setup
<link rel="stylesheet" href="style.css" type="text/css">
<nav> ... </nav>
<script>
$(function () {
$('.toggle-menu').click(function (){
$('.exo-menu').toggleClass('display');
});
});
jQuery(document).ready( function ( $ ){
$(".change>a").hover( function () {
$(this)[0].click();
},
function () {
/* code for mouseout */
});
});
</script>
The internal JS seems to be causing a problem with the CSS loading.
Is there any way I can load the called CSS before the JS whilst keeping it as is, without putting the Javascript on a seperate .js sheet?
So far have tried:
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body onload="initNavigation()">
<nav> ... </nav>
<script>
function initNavigation() {
$(function () {
$('.toggle-menu').click(function (){
$('.exo-menu').toggleClass('display');
});
});
jQuery(document).ready( function ( $ ){
$(".change>a").hover( function () {
$(this)[0].click();
},
function () {
/* code for mouseout */
});
});
}
</script>
</body/>
and
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<nav> ... </nav>
<script>
window.onload=function(){
$(function () {
$('.toggle-menu').click(function (){
$('.exo-menu').toggleClass('display');
});
});
jQuery(document).ready( function ( $ ){
$(".change>a").hover( function () {
$(this)[0].click();
},
function () {
/* code for mouseout */
});
});
}
</script>
</body/>
Can anyone tell me where I have went wrong? i am thinking its the .ready part but if it is, not sure how to get rid of it without affecting how the JS works?
Might it make a difference if I moved the JS to the head and placed it below the CSS?
PaulMcF87PaulMcF87
asked Sep 26, 2017 at 10:10
-
1Why do you think the internal JS is causing a problem with the CSS loading? What kind of problem?user663031– user6630312017年09月26日 10:25:54 +00:00Commented Sep 26, 2017 at 10:25
-
Put the javascript just before the ending body tag.Rajendran Nadar– Rajendran Nadar2017年09月26日 10:30:06 +00:00Commented Sep 26, 2017 at 10:30
-
@Znaneswar your suggestion requires jQuery, but OP probably uses plain JS.Patrik Krehák– Patrik Krehák2017年09月26日 10:30:27 +00:00Commented Sep 26, 2017 at 10:30
1 Answer 1
Just use the onload event in your body tag and wrap your js in a function.
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body onload="initNavigation()">
<nav></nav>
<script>
function initNavigation() {
// your script goes here
}
</script>
</body>
6 Comments
PaulMcF87
I have tried this, and the options above. none seem to work.I am at a total loss,have no clue what else to try :-( lol
PaulMcF87
I have included the exact JS used in the question above
M.Go
In fact that you are using jQuery $(document).ready() should exactly do what you want. If not the problem may caused by something different. learn.jquery.com/using-jquery-core/document-ready Did you have any errors in your console or are you able to create a fiddle?
PaulMcF87
So as it is currently set up i should not need to use any sort of onload?.. I have no clue what is happening then. first time I load the site after clearing cache the menu displays all broken up as a list with bullet points, with no container. after refresh the menu is as it should be... Could it make a difference if I move the JS from the body to the head under the called CSS?
M.Go
sounds like you don't have any js problems. You better should provide a link to you little project.
|
default