I am trying to run a function as soon as the user lands on the page. I have the following head section:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="Resources/css/normalize.css">
<link rel="stylesheet" type="text/css" href="Resources/css/ionicons.min.css">
<link rel="stylesheet" type="text/css" href="Resources/css/animate.css">
<link rel="stylesheet" type="text/css" href="Resources/css/style.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
function sayOK() {
alert('ok');
}
window.onload = sayOK;
</script>
</head>
Why doesn't sayOK() run?
Your sample code ran fine in testing. You can try moving your script to the footer, just before your closing body tag.
jQuery offers a good onload mechanism, and if you want cross-browser reliability, that would be where I start. Don't reinvent the wheel.
https://learn.jquery.com/using-jquery-core/document-ready/
This is a portable way of running your code as soon as the page is loaded:
function documentReady (cb) {
if (document.readyState !== 'loading') {
cb();
} else {
document.addEventListener('DOMContentLoaded', cb);
}
}
documentReady(function () {
// YOUR CODE GOES HERE
});
It works. Try try to create a separate file, for example ok.html, and open it in any browser. It should show the message.
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.
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>
Here is my index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>title</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<link href=assets/css/elegant-icons.min.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/bootstrap.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/theme.css rel=stylesheet type=text/css media="all"/>
<link rel=stylesheet type=text/css href="assets/css/style.css"/>
</head>
<body>
<div id="inc"></div>
<div class=main-container>
<section class="no-pad coming-soon fullscreen-element">
</section>
</div>
<script src=assets/js/jquery.min.js></script>
<script src=assets/js/bootstrap.min.js></script>
<script src=assets/js/smooth-scroll.min.js></script>
<script src=assets/js/scripts.js></script>
<script>
$(function(){
$("#inc").load("header.html");
});
</script>
</body>
</html>
If I copy-paste the content of header.html page after the body, then everything works fine.
when I tried to include the header.html page using .load() function then the CSS won't work properly.
Here is the online sample codepen
if I include the content of div="inc" from an external file like header.html than drop-down menu will overlap each other.
Hope this helps.
Your scripts.js file contains
$(window).load(function(){
"use strict";
// Align Elements Vertically
alignVertical();
alignBottom();
$(window).resize(function(){
alignVertical();
alignBottom();
});
// Isotope Projects
});
The scripts.js file you have provided is trying to add some styling to the header.html.
but it's not doing the expected behaviour because the scripts.js file is loading before the header.html file.
Just add this at the end after your header content
<script src=assets/js/scripts.js></script>
This will let the header.html content load first and than scripts.js
Also here is the github repo code structure
https://github.com/siddhartharora02/jsLoad
Try this
<link href="../assets/css/elegant-icons.min.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../assets/css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../assets/css/theme.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" type="text/css" href="../assets/css/style.css"/>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/smooth-scroll.min.js"></script>
<script src="../assets/js/scripts.js"></script>
For your original issue,
If you want to include html content dynamically, here is a method to do it,
HTML,
<link data-include="includes/header.html">
JS,
$('link[data-include]').each(function(){
var el = $(this),
template = $(this).data('include');
$.get(template, function(data){
$(el).replaceWith(data);
});
});
Hope this will help!
Try this,
Now you can include any partial content as you want.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>title</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=X-UA-Compatible content="IE=edge">
<link href=assets/css/elegant-icons.min.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/bootstrap.css rel=stylesheet type=text/css media="all"/>
<link href=assets/css/theme.css rel=stylesheet type=text/css media="all"/>
<link rel=stylesheet type=text/css href="assets/css/style.css"/>
</head>
<body>
<link data-include="header.html">
<div class=main-container>
<section class="no-pad coming-soon fullscreen-element">
</section>
</div>
<script src=assets/js/jquery.min.js></script>
<script src=assets/js/bootstrap.min.js></script>
<script src=assets/js/smooth-scroll.min.js></script>
<script src=assets/js/scripts.js></script>
<script>
$(function(){
$('link[data-include]').each(function(){
var el = $(this),
template = $(this).data('include');
$.get(template, function(data){
$(el).replaceWith(data);
});
});
});
</script>
</body>
</html>
Try using like this,
$(document).ready(function() {
$.get('header.html').success(function(data){
var headerHTML = data;
$('#inc').html(headerHTML);
});
});
How about this:
Instead of using a load method, use an iframe
<iframe id="inc" src="header.html" style="border:0; overflow:auto;"></iframe>
Edit
<iframe id="inc" src="header.html" class="hidden"></iframe>
css
iframe.hidden {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: hidden;
}
iframe.hidden.load {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: block;
}
JS
!!! Here trigger means the trigger when you want it to load such as onClick, onMouseover, etc !!!
Requires jQuery
$('iframe.hidden').trigger(function() {
$(this).addClass('load');
});
I have a situation if user scroll down in browser on home page and perform action on any event that takes him to another page or route , the scroll bar position is same as home page. How can i keep Scroll bar at top whenever user redirected to different pages ? I tried autoscroll in below code but that does not seems to be working Any suggetion will be appreciated. Thanks
index.html
<!DOCTYPE html>
<html ng-app="riskAssessmentApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>Risk Assessment</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- bootstrap.css contains normalize, so it needs to go first -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="bower_components/orcit-theme/dist/styles/bootstrap.css">
<link rel="stylesheet" href="bower_components/orcit-theme/dist/styles/kendo.bootstrap.css">
<link rel="stylesheet" href="bower_components/orcit-theme/dist/styles/kendo.common-bootstrap.css">
<link rel="stylesheet" href="bower_components/orcit-theme/dist/styles/orcit.css">
<link rel="stylesheet" href="bower_components/bac-multiselect/bacMultiselect.css">
<link rel="stylesheet" href="styles/site.css">
<link rel="stylesheet" href="styles/bootstrap-override.css">
<link rel="stylesheet" href="styles/kendo-override.css">
<link rel="stylesheet" href="styleNew/multiselect-treeview.css">
<link rel="stylesheet" href="styleNew/main.css">
<link rel="stylesheet" href="styles/style.css">
<!-- endbuild -->
</head>
<body>
<div ui-view autoscroll="false"></div>
<!-- build:js scripts/scripts.js -->
<script src="bower_components/orcit-bower/src/jquery/dist/jquery.js"></script>
<script src="bower_components/orcit-bower/src/angular/angular.js"></script>
<script src="bower_components/orcit-bower/src/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/orcit-bower/src/angular-off-click/offClick.js"></script>
<script src="bower_components/orcit-bower/src/angular-resource/angular-resource.js"></script>
<script src="bower_components/orcit-bower/src/spin.js/spin.js"></script>
<script src="bower_components/orcit-bower/src/angular-spinner/angular-spinner.js"></script>
<script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/accordion/accordion.js"></script>
<script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/bindHtml/bindHtml.js"></script>
<script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/collapse/collapse.js"></script>
<script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/modal/modal.js"></script>
<script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/position/position.js"></script>
<script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/tooltip/tooltip.js"></script>
<script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/transition/transition.js"></script>
<script src="bower_components/orcit-bower/src/angular-ui-router/angular-ui-router.js"></script>
<script src="bower_components/orcit-bower/src/angular/angular.min.js"></script>
<script src="bower_components/orcit-bower/src/kendo/js/kendo.web.min.js"></script>
<script src="bower_components/orcit-bower/src/kendo/js/kendo.all.min.js"></script>
<script src="bower_components/bac-multiselect/bacMultiselect.js"></script>
<script src="bower_components/kendo-multiselect-treeview/kendo-multiselect-treeview.js"></script>
</body>
</html>
scroll.js
angular.module('riskAssessmentApp').run(function($rootScope, $anchorScroll) {
/* scroll to the top of the page after the route successfully changes */
$rootScope.$on('$routeChangeSuccess', function() {
$anchorScroll();
});
});
You can use $anchorScroll to scroll to top of the page everytime the route is changed.
angular.module('YOUR_APP')
.run(function($rootScope, $anchorScroll) {
/* scroll to the top of the page after the route successfully changes */
$rootScope.$on('$routeChangeSuccess', function() {
$anchorScroll();
});
})
.config(function($uiViewScrollProvider) {
$uiViewScrollProvider.useAnchorScroll();
});
Below code resolved my issue..
angular.module('Your-App').run(function($rootScope,$window) {
/* scroll to the top of the page after the route successfully changes */
$rootScope.$on('$viewContentLoaded', function(){
$window.scrollTo(0, 0);
});
});
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>