Here's the website: carrotcrunchpvp.comule.com. The website is made for 16 : 9 but thats besides the point - It doesnt seem to want to go to any of the navigation links, you cant touch scroll and you cant used the keyboard (most importantly...). I've tried changing the version of jquery around to an older version but it doesn't fix anything.
I'm getting this popping up in the console when I click a direction (for e.g):
KeyboardEvent.key value "Left" is obsolete and will be renamed to "ArrowLeft". For more help https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent.key
and
Calctheta is not define which is part of the intialisation.js http://carrotcrunchpvp.comule.com/intialisation.js
It doesn't work in Chrome either...
You can not initialise the plugin before including it. You are including your file initialisation.js before than fullPage.js.
This is not exclusive of fullpage.js, this is like so for any other plugin or javascript function.
The initialization inclusion should be at the end, just after any plugin being initialized there.
<title>Catholic Professional Standards</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="jquery.fullPage.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="media_queries.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<script src="jquery.fullPage.js" type="text/javascript"></script>
<script src="loadingscreen.js" type="text/javascript"></script>
<script src="intialisation.js" type="text/javascript"></script>
Related
I want to make a calendar view in javascript. I'm using this plugin, but the theme won't show, just trying to use standard theme. Does anyone know why?
https://fullcalendar.io/docs/theming
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.css">
<script>
$(function() {
$('#calendar').fullCalendar({
themeSystem : "standard",
dayClick: function() {
alert('a day has been clicked!');
}
})
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
https://jsfiddle.net/03d1ahwy/
The problem is that
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.css">
must be changed to
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.css" media="print">
(i.e. you must add the attribute media="print" to the link tag)
otherwise you'll always get the print layout, even on-screen. See here for more details about the "media" attribute.
Once you add that, it tells the print CSS to only take over when the user is trying to print the page, and lets the standard theme be used in the in-browser version.
Demo: https://jsfiddle.net/40f1z3ts/
P.S. If you just want to use the standard theme, you don't actually need to write themeSystem : "standard", in your code at all - this is the default value, so you can just omit it.
P.P.S. Of course if you want to use any other themes you have to set the theme system appropriately and include the relevant CSS files in your page.
looks like you are having problems with the libraries
download full calendar from here:
https://fullcalendar.io/download
make a folder and name it "lib" add fullcalendar.min.css, fullcalendar.print.min.css and moment.min.js inside it and use the next headers
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='lib/fullcalendar.min.css' rel='stylesheet' />
<link href='lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/fullcalendar.min.js'></script>
Edit:
for bootstrap 4 theme add:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
for jquery-ui theme add:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
Error I recieve:
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'modal'
The minute I apply the links for the fullcalendar, modals break.
Any reason for this?
I also did verify modals only broke when the javascript/stylesheets were added [I tested the calendar without and modal ran]
<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
If I define my calendar links before all my bootstrap it breaks the calendar saying it isn't supported as well.
So something with bootstrap and the fullcalendar either fights or overwrites each other.
My other local files
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
<script src="CSS/font-awesome-free-5.0.6/on-server/js/fontawesome-all.js"></script>
<link href="CSS/bootstrap-theme.css" rel="stylesheet" />
<link href="CSS/bootstrap-theme.min.css" rel="stylesheet" />
<link href="CSS/bootstrap.css" rel="stylesheet" />
<link href="CSS/bootstrap.min.css" rel="stylesheet" />
<link href="CSS/maxcdn.bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/ajax.jquery.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/JavaScript.js"></script>
<link href="CSS/Main.css" rel="stylesheet" />
<script src="Scripts/Splitter.js"></script>
<link href="CSS/Oxygen.css" rel="stylesheet" />
<link href="CSS/passionOne.css" rel="stylesheet" />
<link href="CSS/netdna_3.2.0_bootstrap.min.css" rel="stylesheet" />
<link href="CSS/4.2.0_font-awesome.min.css" rel="stylesheet" />
I think i remember having this issue a long time ago. I actually went into my conflicting file and looked for similar words. I think I would try naming everything in full calendar that is named modal, to modaltwo. Just a find and replace on the entire file. See if that works for you.
So a warning to people like me who like to call modal.show() from vb.net code... the required lib jquery file can't be referenced with fullcalendar.
The bootstrap jquery files are all you need.
At this very moment I can't determine why the lib jquery file caused this bootstrap modal javascript break.
so I did the following links for fullcalendar [plus all my bootstrap files]:
<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script> <!-- need to calendar title -->
<%--<script src='lib/jquery.min.js'></script>--%>
<script src='fullcalendar.min.js'></script>
so that I could use a javascript function call to show a modal like so
<script type="text/javascript">
function openmodal() {
$('#myModal').modal('show');
}
</script>
I have been looking at different forums that include this error and trying different things that I have read to get rid of this error. I have tried removing any duplicate libraries, and changing the order in which they appear, but nothing has seemed to worked for me. I am using a bootstrap theme
scrollreveal.min.js:1 Uncaught TypeError: Cannot set property 'sequence' of
undefined
at e.reveal (scrollreveal.min.js:1)
at jquery.js:53
at jquery.js:75
I am not sure what to do to get rid of it, any help would be great. Thanks in advance.
Below is what I have in the head section
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic'
rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/creative.min.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
And this is what I have at the end of the body.
<!-- Bootstrap core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollReveal.js/3.3.6/scrollreveal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/creative.min.js"></script>
<script src="js/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
The error is not "self explanatory"...
But the line where the error fired, line #75 of jquery.js (A custom JS file, not the library), was containing a closure syntax: })(jQuery); that was not needed.
Replacing it by }); fixed the issue for that line.
Then, the same issue fired on 3 other lines... But after those lines also fixed, the page worked as expected without error.
"Closure" itself is already well explained in this SO answer.
I Have Problem With ext-3.3.1 Tree.
I use it in my project but sometimes the browser show this error and fail to load the page.
I take a picture of the errors and It's here and the html is here.
I really think it made by a bug ! anyone can help?
I hope you can help me it really made me mad.
Kind regards
The order of javascript file included in Head tag is important. the order should be like the following:
<script type="text/javascript" src="../../resources/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../resources/ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../../resources/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../resources/ext/resources/css/xtheme-gray.css" />
<link rel="stylesheet" href="../../resources/openlayers/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="../../resources/app/theme/style.css" type="text/css" />
<script src="../../resources/openlayers/build/OpenLayers.js"></script>
<script src="../../resources/geoext/build/GeoExt.js"></script>
So I'm pretty new to web design and Dreamweaver, but I've managed to put something fairly solid together. The only problem I'm having is that my two main javascripts for images - one slider and one lightbox gallery - are canceling each other out. If one works, the other cannot. Here's the code at the head. Any advice?
<!-- Style sheets themes for the Nivo Slider -->
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/themes/pascal/pascal.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/themes/orman/orman.css" type="text/css" media="screen" />
<!-- Main Styles Sheet for the Primento theme -->
<link rel="stylesheet" href="styles.css">
<!-- Google Webfonts - Other fonts can be installed - http://www.google.com/webfonts -->
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:400,400italic,700' rel='stylesheet' type='text/css'>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/smooth-scroll.js"></script>
<!--script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script-->
<!--script src="js/jquery.validate.js" type="text/javascript"></script-->
<!-- Nivo Slider -->
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<script src="engine/js/jquery.min.js" type="text/javascript"></script>
<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
Try removing the second instance of jquery. That is likely re-initializing the jQuery object, causing the page to fail.
You only need one instance of jQuery on the page. It looks like the plugins you are using are older (i.e. pre-1.9), so you should try an older version of jQuery. If 1.7.x doesn't work, try a 1.8.x version. Version 1.9 removes several features that may prevent the plugins from working.