Uncaught ReferenceError: jQuery is not defined (jQuery ALREADY defined) - javascript

I'm trying to use jScrollPane, and I'm getting jQuery is not defined.
We all know the universal answer to this: load jQuery first, however, i'm loading it before, and i'm intializing jScrollPane on $(document).ready() (I'm using jquery, how can it not be there?)
Here's my markup:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans" type="text/css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<script type="text/javascript" url="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" url="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<!-- Jscrollpane so we can style scroll bar cross-browser -->
<!-- styles needed by jScrollPane -->
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
</head>
And here is my script
$(document).ready(function() {
/* Setting up the dropdown */
var dropdown = new DropdownMenu();
dropdown.run();
/* Setting scrollbar */
$('#dropdown-menu .content').jScrollPane();
});
What may be happening? All I can find around the web is telling me to initialize jquery first, but it is initialized.

Why url attribute instead of src in your script tag reference? I don't think it's a valid syntax.
Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
Try:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

Related

Modal form doesn't work

I found nice modal form at http://www.bootply.com/60244, but when I try run it in my code I get empty content after click on "Launch Modal". Probably I don't have some stylesheet or library.
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic&subset=latin,latin-ext" type="text/css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Anyone know what I need to run it? On bootply everything is fine.
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
<!DOCTYPE html>
<html lang="en">
...
</html>
I found the reason - Bootstrap v2.3.1, I using 3.3+.

Bootstrap js not loading on Live server

I have searched the other questions but I do not get anything that really solves my problem. I downloaded a template that I want to use as a small portfolio for myself. On my local server everything works fine. But when I upload it to a live server something goes wrong. I believe the problem is with the Bootstrap.js or bootstrap-theme.css
Some functions are not running and dont display at all. Such as the loading bar when you open the site, backgrounds, some images and arrows.
I have done the following.
Checked all the paths to make sure they are correct.
Made sure that it is not a cache issue.
Tried to run it in private view (still the same problem)
Checked the firefox error log but all scripts seem to load.
Here is the template demo - http://designova.net/presence/index01.html
Here is my live version - codethis.co.za
Here is the code in the head and the js at the bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Code This - Beautiful Website Design and More</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://www.codethis.co.za/bootstrap/js/jquery.js" type="text/javascript"></script>
<script src="http://www.codethis.co.za/bootstrap/js/bootstrap.js" ></script>
<script src="http://www.codethis.co.za/javascripts/jquery.easing.1.3.js" type="text/javascript"></script>
<!-- Standard Favicon-->
<link rel="shortcut icon" href="images/favicon/favicon.ico">
<!-- Standard iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="57x57" href="images/touchicons/apple-touch-icon-57-precomposed" />
<!-- Retina iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="114x114" href="assets/touchicons/apple-touch-icon-114-precomposed" />
<!-- Standard iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="72x72" href="assets/touchicons/apple-touch-icon-72-precomposed" />
<!-- Retina iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="144x144" href="assets/touchicons/apple-touch-icon-144-precomposed" />
<!-- Bootstrap CSS Files -->
<link href="http://www.codethis.co.za/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="http://www.codethis.co.za/bootstrap/css/bootstrap-theme.css" rel="stylesheet">
<!-- Custom Fonts Setup via Font-face CSS3 -->
<link href="http://www.codethis.co.za/fonts/fonts.css" rel="stylesheet">
<!-- CSS files for plugins -->
<link href="http://www.codethis.co.za/stylesheets/pace.preloader.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/animate.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/owl.carousel.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/owl.theme.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/magnific-popup.css" rel="stylesheet" >
<link href="http://www.codethis.co.za/stylesheets/jquery.tweet.css" rel="stylesheet"/>
<link href="http://www.codethis.co.za/stylesheets/foliohover.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/fancymenu.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/intro.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/pricing.css" rel="stylesheet">
<!-- Main Template Styles -->
<link href="stylesheets/main.css" type="text/css" rel="stylesheet">
<!-- Main Template Responsive Styles -->
<link href="stylesheets/main-responsive.css" type="text/css" rel="stylesheet">
<!-- Main Template Retina Optimizaton Rules -->
<link href="stylesheets/main-retina.css" type="text/css" rel="stylesheet">
<!-- LESS stylesheet for managing color presets -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- LESS JS engine-->
<script src="http://www.codethis.co.za/less/less-1.5.0.min.js" type="text/css"></script>
<script src="http://www.codethis.co.za/javascripts/modernizr.custom.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="bootstrap/js/html5shiv.js"></script>
<script src="bootstrap/js/respond.min.js"></script>
<![endif]-->
<style>
.full-height{
height: 100%;
}
</style>
</head>
and at the bottom
<!-- JS Plugins -->
<script src="javascripts/pace.min.js"></script>
<script src="javascripts/retina.js"></script>
<script src="javascripts/device.min.js"></script>
<script src="javascripts/owl.carousel.js"></script>
<script src="javascripts/waypoints.min.js"></script>
<script src="javascripts/jquery.tweet.js"></script>
<script src="javascripts/okvideo.js"></script>
<script src="javascripts/jquery.mixitup.js"></script>
<script src="javascripts/flexslider.js" ></script>
<script src="javascripts/jquery.magnific-popup.js"></script>
<script src="javascripts/smooth-scroll.js"></script>
<script src="javascripts/form-validation.js"></script>
<script src="javascripts/classie.js"></script>
<script src="javascripts/fancymenu-rollin.js"></script>
<!-- Scroll Animations Setup -->
<script src="javascripts/wow.js"></script>
<script src="javascripts/animations-init.js"></script>
<!-- Custom Scripts Setup -->
<script src="javascripts/carousel-init.js" ></script>
<script src="javascripts/portfolio.js"></script>
<script src="javascripts/intro.js"></script>
<script src="javascripts/main.js"></script>
Please could someone help me with what is going on here
Your page is riddled with 404 errors, which means either (1) your paths are not correct, or (2) the files do not exist on the server.
Something to look at would be whether you are using relative paths or absolute paths for your JS, CSS, and image assets. Remember:
paths that start with a / will resolve to http://codethis.co.za/<path>
paths that do not start with a / will resolve relative to whatever the current path is
Perhaps you are missing a subfolder in your paths?
First of all you seem to have a problem loading some of your fonts (cross-origin) It should not be linked with your problem, but you should fix it.
You also have a :
Uncaught ReferenceError: $ is not defined
which could be relative to something with your JQuery, and this could explain a lot if you're using it heavily.
From what I see in network I don't have any missing images.
Thibaut

Uncaught TypeError: Cannot read property 'PhotoSwipe' of undefined in javascript

I'm trying to implement swiping of image using html and javascript for phonegap application, following this demo PhotoSwipe there it works fine, but after adding into my project, not able to swipe the images. and even linked the js files correctly still i get this error in logcat "Uncaught TypeError: Cannot read property 'PhotoSwipe' of undefined at file:///android_asset/www/examples/01-default.html:26"
any idea on my issue? Thanks.
swipe code
<title>PhotoSwipe</title>
<meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="styles.css" type="text/css" rel="stylesheet" />
<link href="css/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8" src="js/cordova-1.9.0.js"></script>
<script type="text/javascript">
<script type="text/javascript">
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
}(window, window.Code.PhotoSwipe));
</script>
<script type="text/javascript" src="js/cordova-1.9.0.js"></script>
<script type="text/javascript" src="/libs/klass.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe.jquery-3.0.5.min.js"> </script>
<script type="text/javascript" src="js/code.photoswipe.jquery-3.0.5.js"></script>
<script type="text/javascript" src="js/code.photoswipe-3.0.5.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe-3.0.5.js"></script>
<script type="text/javascript" src="photoswiper.js"></script>
}
Add the js files before the script that you have written, it might be the cause of the problem because the photoswipe features that you are trying to use in the script have not been loaded and hence are not available yet.

How do I implement and use eyecon's bootstrap-datepicker?

I visited Eyecon and downloaded the datepicker. I got three folders. 'css', 'js' and 'less'. I have included the bootstrap-datepicker.js and the latest jquery.js and linked the .css in the head:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="../css/datepicker.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap-responsive.css">
</head>
<body>
<div class="well">
<!--What should I enter here and where/how do I call the function?-->
</div>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
</body>
</html>
As one can see, I'm already working with the bootstrap library and have therefore also included that.
My question now is: how do I implement and call the date picker function?
$('element').datepicker(); where element is some class, id etc.
http://jsfiddle.net/6kk3k/1/
HTML
<input type="text" class="datepicker">
jQuery
$('.datepicker').datepicker();

Jquery conflicting in head section - Bootstrap and Supersized

I am struggling a bit with conflicting jquery in my head section of my site.
The problem happens when if I put the bootstrap jquery underneath then it stops working and the supersized DOES work.
But then when I swap them around it is visa versa, supersized DOESN'T work and bootstrap DOES.
This is my current head section
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/1140.css">
<link rel="stylesheet" href="/css/ie.css">
<!-- Bootstrap (for mobile navigation) -->
<link href="/css/bootstrap.css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width:480px)">
<link href="/css/bootstrap-responsive.css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width:480px)">
<!-- supersized sytlesheets -->
<link rel="stylesheet" href="/css/supersized.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/theme/supersized.shutter.css" type="text/css" media="screen" />
<script src="js/vendor/modernizr-2.6.1.min.js"></script>
<!-- supersized scripts (can't go in the bottom as it stops working -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<!--bootstrap has to go below min jquery for it to work and above supersized-->
<script src="/js/bootstrap/jquery.js"></script>
<script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
When I look in the bootstrap/jquery.js file, I cannot get my head round it as it is just all block text.
Anybody got any solutions? I am only using the bootstrap for mobile version also, so is there a way I can just include the jquery at a certain width, for example 480 - (which is when I disable the supersized anyway).
I also have script at the bottom of the document also and maybe this could be affecting this also??
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>')</script>
<script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Bootstrap Scripts -->
<script src="/js/bootstrap/bootstrap-transition.js"></script>
<script src="/js/bootstrap/bootstrap-dropdown.js"></script>
<script src="/js/bootstrap/bootstrap-collapse.js"></script>
<!-- Bootstrap scripts end -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
Basically, just due to trial and error, supersized won't work at the bottom for some reason and has to go in my head section.
And when bootstrap works then the supersized will not.
Please let me know a way to get past this and if there is something I have done wrong in my head section that is causing this.
Thanks

Categories