ReferenceError: Taggle is not defined - javascript

I'm not understanding after including all the necessary libraries why I'm getting this error in firebug console?
My HTML code is as follows :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="formoid_files/formoid1/formoid-default-skyblue.css" type="text/css" />
<link href="http://localhost/smart/web/css/bootstrap.min.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet">
<link href="http://localhost/smart/web/css/font-awesome.min.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/ui-lightness/jquery-ui-1.10.0.custom.min.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/base-admin-3.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/base-admin-3-responsive.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/pages/plans.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/custom.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/bootstrap-multiselect.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/prettify.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/datepicker.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/projects.min.css" rel="stylesheet">
<link href="http://localhost/smart/web/css/taggle.min.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<style type="text/css">
.account-container1 {
width: 505px;
display: block;
margin: 60px auto 0 auto;
background: #f9f9f9;
border: 1px solid #d5d5d5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.account-container1 h1 {
margin-bottom: 0.4em;
color: #F90;
font-size: 32px;
}
</style>
<div class="main">
<div class="account-container1 stacked">
<div class="content clearfix">
<form action="contact_us.php" id="contact_us_form" role="form" class="form-horizontal col-md-12" method="post">
<h1>Admin Settings</h1>
<fieldset>
<div class="form-group">
<label for="email" class="col-lg-2">Email :<span style="color:#FF0000">*</span></label>
<div class="col-lg-10">
<div class="input textarea clearfix custom stackoverflow"></div>
</div>
</div>
<div align="center" class="login-actions">
<input type="submit" style="float:right" class="login-action btn btn-primary" name='submit' value="Send">
</div> <!-- .actions -->
</fieldset>
</form>
</div> <!-- /content -->
</div> <!-- /account-container -->
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://localhost/smart/web/js/libs/jquery-1.9.1.min.js"></script>
<script src="http://localhost/smart/web/js/libs/jquery-ui-1.10.0.custom.min.js"></script>
<script src="http://localhost/smart/web/js/custom/jquery-1.10.1.js"></script>
<script src="http://localhost/smart/web/js/custom/jquery-ui.js"></script>
<script src="http://localhost/smart/web/js/libs/bootstrap.min.js"></script>
<script src="http://localhost/smart/web/js/plugins/validate/jquery.validate.js"></script>
<script src="http://localhost/smart/web/js/Application.js"></script>
<script src="http://localhost/smart/web/js/demo/validation.js"></script>
<script src="http://localhost/smart/web/js/bootstrap-multiselect.js"></script>
<script src="http://localhost/smart/web/js/prettify.js"></script>
<script src="http://localhost/smart/web/js/custom/common.js"></script>
<script src="http://localhost/smart/web/js/bootstrap-datepicker.js"></script>
<script src="http://localhost/smart/web/js/custom/typeahead.js"></script>
<script src="http://localhost/smart/web/js/custom/rainbow-custom.min.js"></script>
<script src="http://localhost/smart/web/js/custom/scripts.js"></script>
<script src="http://localhost/smart/web/js/custom/taggle.js"></script>
<script src="http://localhost/smart/web/js/custom/taggle-ie8.js"></script>
<script src="http://localhost/smart/web/js/custom/taggle-ie9.js"></script>
<script language="javascript"></script>
</body>
</html>
The jQuery code is as follows from the file script.js:
/*global Taggle*/
(function() {
new Taggle($('.stackoverflow.textarea')[0], {
tags: ['or', 'like', 'stackoverflow']
});
}());
When I try to add tags to the text area with class stack overflow I'm getting the following error in firebug console :
ReferenceError: Taggle is not defined new Taggle($('.stackoverflow.textarea')[0], {

You are loading script.js before loading taggle.js, which means you're trying to use an object that hasn't been defined yet.
Try moving the <script src="http://localhost/smart/web/js/custom/scripts.js"></script> line after the other <script... lines.

Related

How to make 'Swipe div tag' in js / jQuery

I'm looking for new datetime picker look like datetime picker on android. I searched on google and found it.
https://nehakadam.github.io/AnyPicker/
But I don't know how it work. I want to make simple example like that. Anyone help me, please.
There is some examples in their GitHub repository in the demo folder.
<!DOCTYPE html>
<html>
<head>
<title>Time - AnyPicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="msapplication-tap-highlight" content="no" />
<style type="text/css">
body {
margin: 0px;
}
.input-cont {
width: 300px;
padding: 20px;
}
input {
width: 200px;
height: 30px;
padding: 3px 10px;
margin-bottom: 16px;
}
</style>
<link rel="stylesheet" type="text/css" href="../src/anypicker-font.css" />
<link rel="stylesheet" type="text/css" href="../src/anypicker.css" />
<link rel="stylesheet" type="text/css" href="../src/anypicker-ios.css" />
<link rel="stylesheet" type="text/css" href="../src/anypicker-android.css" />
<link rel="stylesheet" type="text/css" href="../src/anypicker-windows.css" />
<script type="text/javascript" src="vendors/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../src/anypicker.js"></script>
<script type="text/javascript">
$("#ip-android").AnyPicker(
{
mode: "datetime",
dateTimeFormat: "hh:mm aa",
theme: "Android"
});
});
</script>
</head>
<body>
<table class="input-cont">
<tr>
<td>Time : (Android)</td>
</tr>
<tr>
<td>
<input type="text" id="ip-android" readonly>
</td>
</tr>
</table>
</body>
</html>

Code from fiddle doesn't work locally

I found a simply tooltip in fiddle: http://jsfiddle.net/6L9j0v5y/1 and tried to use it locally but something goes wrong. I copied http://jsfiddle.net/6L9j0v5y/1/show frame source as well but there is the same effect(on page is only button and nothing happens when it is clicked).
I create file(by copying):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style type="text/css">
[data-style=mypops] + .popover {
background: #4194ca;
}
[data-style=mypops] + .popover.bottom .arrow:after {
border-bottom-color: #4194ca;
}
[data-style=mypops] + .popover-content {
}
.popovermenu {
list-style: none;
padding: 0px;
margin: 0px;
}
.popovermenu li {
}
.popovermenu li a {
color: #fff;
}
</style>
<title></title>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("#Pops").popover({
html: true,
content: function () {
return $('#popover-content').html();
}
});
});//]]>
</script>
</head>
<body>
<br>
<br>
<br>
<div class="col-sm-4">
<button tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus" data-placement="bottom" id="Pops" data-style="mypops">Click Me</button>
<div id="popover-content" class="hide">
<ul class="popovermenu">
<li>Action
</li>
<li>Another action
</li>
<li>Separated link
</li>
</ul>
</div>
</div>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "6L9j0v5y"
}], "*")
}
</script>
</body>
</html>
There is no error in console, how is it possible to check why it doesn't work?
It's because when on a local environment it treats the resource URLs as local files because it doesn't have the http / https protocols in front of the URLs.
It's not incorrect in doing that, when on a server it'll work fine, but locally it causes problems. Change the scripts to the following and it'll work fine.
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

Angular Module Config Breaks When I Add App Name

I'm setting up a config for the 'angular-oauth2' module, and when I run
angular.module('', ['angular-oauth2'])
.config(['OAuthProvider', function(OAuthProvider) {
OAuthProvider.configure({
baseUrl: '/api/v1',
clientId: null,
clientSecret: null // optional
});
}]);
my server runs fine and all is well, when I add the name of the app though ('fuse') it breaks:
angular.module('fuse', ['angular-oauth2'])
.config(['OAuthProvider', function(OAuthProvider) {
OAuthProvider.configure({
baseUrl: '/api/v1',
clientId: null,
clientSecret: null // optional
});
}]);
And I get this error in the console:
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=fuse&p1=Error%3A%20…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular.min.js%3A43%3A246)
I've looked in the html and low and behold the name of the app is 'fuse', so what's up with this error?
<html>
<head>
<base href="/app/">
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
<link rel="stylesheet" href="build/fuse.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
<script src="build/fuse.js"></script>
</head>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<body ng-app="fuse" md-theme="default" md-theme-watch
class="{{state.current.bodyClass || ''}}">
<!-- SPLASH SCREEN -->
<ms-splash-screen id="splash-screen" >
<div class="center">
<div class="logo">
<span></span>
</div>
<!-- Material Design Spinner -->
<div class="spinner-wrapper">
<div class="spinner">
<div class="inner">
<div class="gap"></div>
<div class="left">
<div class="half-circle"></div>
</div>
<div class="right">
<div class="half-circle"></div>
</div>
</div>
</div>
</div>
<!-- / Material Design Spinner -->
</div>
</ms-splash-screen>
<!-- / SPLASH SCREEN -->
<div id="main" class="animate-slide-up scrollable" ui-view="main" layout="column" ></div>
<floating-app-version></floating-app-version>
<!--<link href="build/styles.css" type="text/css" rel="stylesheet" />-->
<script src="build/common.js"></script>
<script src="build/vendor.js"></script>
<script src="/assets/app_config.js"></script>
<link rel="stylesheet" href="build/app.css" lazyload>
<script src="build/app.js"></script>
<script src="build/style.js"></script>
</body>
</html>

Summernote and Codemirror not working?

I am currently trying to make codemirror and summernote work, I have followed a online tutorial but there seems to be a problem with the file dependencies. My code is. I have taken the online file urls from summernote's example page, so it should work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Code editor</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet"/>
<link href="css/summernote.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.min.css">
<!-- Add custom CSS here -->
</head>
<body>
<div class="row">
<br />
<div class="container">
<div class="col-lg-12">
<form action="">
<div class="form-group">
<label for="">Descriptions</label>
<textarea id="description" rows="10" class="form-control"></textarea>
</div>
</form>
</div>
</div>
</div>
<!-- /.end Footer -->
<!-- /.end container -->
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/summernote.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#description').summernote({
height: 400,
codemirror: {
theme:'monokai'
}
});
});
</script>
</body>
</html>
Any help would be appreciated.... thanks
Refer the following code snippet, it's working perfectly fine for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>summernote</title>
<!-- include jquery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- include libraries BS3 -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<!-- include codemirror (codemirror.css, codemirror.js, xml.js, formatting.js)-->
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/blackboard.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
<!-- include summernote -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.1/summernote.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.1/summernote.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.summernote').summernote({
height: 200,
tabsize: 2,
codemirror: {
theme: 'monokai'
}
});
});
</script>
</head>
<body>
<textarea class="summernote"><p>Seasons <b>coming up</b></p></textarea>
</body>
</html>
Then point the cdn urls to the local file system url where the files are being located.
Use prettifyHtml: false to disable summernote formatting your code
$scope.summernoteOptions = {
height: 690,
focus: true,
prettifyHtml: false,
codemirror: {
theme: 'default',
mode: "text/html",
lineNumbers: true,
tabMode: 'indent'
}
};

Can't get jQuery scrollTop to work

Im trying to make a jQuery script that makes a nav bar appear after scrolling down the page 800px.
This is the file:
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('#fixedBar').fadeIn();
} else {
$('#fixedBar').fadeOut();
}
});
Here's the CSS:
#fixedBar {
display: none;
position: fixed;
background-color: rgba(255,255,255,.9);
top: 0;
left: 0;
width: 100%;
height: 80px;
}
Im not too sure why this jQuery isn't doing anything. All help is appreciated.
Here is the HTML in use:
<div id="fixedBar">
<h1>Company</h1>
</div>
Heres the head
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Links to JS/CSS/Fonts -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../css/style.css" media="screen"/>
<link rel="stylesheet" href="../css/jquery.maximage.css" type="text/css" media="screen" title="CSS" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/navView.css" />
<link rel="icon" type="image/ico" href="../img/favicon.ico"/>
<title>George | New Website</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../js/navBar.js" type="text/javascript"></script>
<script src="../js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="../js/jquery.maximage.min.js" type="text/javascript"></script>
<script src="../js/modernizr.custom.25376.js"></script>
</head>
Just checked the js folder and it contains the file navBar.js which has the jQuery code.
It's working fine for me: http://jsfiddle.net/8kzdx9wz/
<div id="fixedBar">nav bar</div>
Is your HTML written correctly and do you have enough content to scroll down to 800px on the page?

Categories