We Keep Coding

TypeError: $(...).progressbar is not a function

I got TypeError: $(...).progressbar is not a function when Gentelella - Bootstrap Admin Template Page Load. Its affect many Jquery process. How to Fixed it.
My Error Line : (custom.js)
// Progressbar
if ($(".progress .progress-bar")[0]) {
$('.progress .progress-bar').progressbar();
}
Footer Jquery Files
<!-- jQuery -->
<script src="{{url('vendors/jquery/dist/jquery.min.js')}}"></script>
<!-- Bootstrap -->
<script src="{{url('vendors/bootstrap/dist/js/bootstrap.min.js')}}"></script>
<!-- FastClick -->
<script src="{{url('vendors/fastclick/lib/fastclick.js')}}"></script>
<!-- NProgress -->
<script src="{{url('vendors/nprogress/nprogress.js')}}"></script>
<!-- bootstrap-wysiwyg -->
<script src="{{url('vendors/bootstrap-wysiwyg/js/bootstrap-wysiwyg.min.js')}}"></script>
<script src="{{url('vendors/jquery.hotkeys/jquery.hotkeys.js')}}"></script>
<script src="{{url('vendors/google-code-prettify/src/prettify.js')}}"></script>
<!-- Custom Theme Scripts -->
<script src="{{url('build/js/custom.min.js')}}"></script>

You need to use the below code
NProgress.start();
NProgress.done();
Reference document https://github.com/rstacruz/nprogress
I guess you are using nprogress.

try to order how jquery javascript etc are loaded... change order and moving it from bottom to head...

// Progressbar
$(document).ready(function(){
if ($(".progress .progress-bar")[0]) {
$('.progress .progress-bar').progressbar();
}
})

Add sticky sidebar

I'm trying to use sticky sidebar with theiaStickySidebar from Github projects. As it described in above link, this should be an easy work. I use below HTML construction:
<aside class="sidebar">
<div class="theiaStickySidebar">
...
</div>
</aside>
This all these scripts need to work.
And also using scripts mentioned at Github page as below:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="dist/ResizeSensor.min.js"></script>
<script type="text/javascript" src="dist/theia-sticky-sidebar.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content, .sidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 30
});
});
</script>
But this doesn't work currectly.
Have I done something wrong in this process?

Jquery selector seems wrong. Use .ssidebar or theiaStickySidebar depending on which one you want as the sidebar.
eg.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content, .ssidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 30
});
});
</script>

I just didn't delete extra class .content. For:
<aside class="sidebar">
<div class="theiaStickySidebar">
...
</div>
</aside>
Must use:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="dist/ResizeSensor.min.js"></script>
<script type="text/javascript" src="dist/theia-sticky-sidebar.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.sidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 30
});
});
</script>

Issue using jquery animate()

I have two issues:
Having a problem with Jquery's animate() not working smoothly on Chrome, Safari and Opera. The Jquery animate()function works fine in Firefox but does not run smoothly using the other browsers(Just pops up as opposed to raising smoothly)
When I click the button to activate the div it moves up but when I click to return the div to its normal state to slide back down, it does not work.
Any suggestions with rewriting my code/logic? Thank You!
Html:
<link rel="stylesheet" type="text/css" href="icons-portfolio/foundation-icons/foundation-icons.css">
<!-- CSS for resets -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!-- CSS for other styles -->
<link rel="stylesheet" type="text/css" href="css/components.css">
<!--*****Need JS Libraries in head ************ -->
<!--<script src="js/modernizr.custom.38675.js"></script>-->
<script src="js/modernizr.custom.79941.js"></script>
<!--
This script enables structural HTML5 elements in old IE.
http://code.google.com/p/html5shim/ -->
<!--[if lt IE 9]>
<script src = "//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Part 1: Wrap all page content here -->
<div class="wrap">
<header>
<div>
<h1 class="mainHeadNav">CSS3 Effects 'N Stuff</h1>
</div>
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub">
</header>
<!-- grid -->
<main class="grid_main">
<section class="userBox">
<div>
<figure class="user_photo_container">
<figcaption class="user_name">
<span>Menu</span>
</figcaption>
</figure>
<ul class="user_inner" id="main-dash">
<li>Back to Portfolio<i class="fi-photo"></i></li>
<li>Facebook<i class="fi-social-facebook"></i></li>
<li>Twitter<i class="fi-social-twitter"></i></li>
<li>Instagram<i class="fi-social-instagram"></i></li>
<li><a id="dashClick" href="#">Dashboard<i class="fi-page"></i></a></li>
</ul>
</div>
</section>
<section class="boxFeatures box1">
<div class="inspire">
<h2>Transition</h2>
</div>
</section>
<section class="boxFeatures box2">
<div class="inspire">
<h2>Hover & Scale</h2>
</div>
</section>
<section class="boxFeatures box3">
<div class="inspire">
<h2>Sideways Flip</h2>
</div>
</section>
<section class="boxFeatures box4">
<div class="inspire">
<h2>3D</h2>
</div>
</section>
<!-- Dashboard start -->
<div id="Dashboard">
<h2 class="dashTitle">Project Information</h2>
<div class="dashInnerAdd">
<p>
Welcome to my project CSS3 Effects N' Stuff! I started this project to develop different cool effects using the new CSS3 Properties. Feel free to fork over the repository and contribute! If you like the project and want to chat email me: amechiegbe#gmail.com
</p>
</div>
</div>
</main> <!-- end grid main-->
</div> <!--end wrap -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/application.js"></script>
Javascript:
$(function() {
//Modernizer Test
Modernizr.addTest("keyframe", Modernizr.testAllProps('animationName'));
Modernizr.prefixed('requestAnimationFrame', window, true);
// global functions
var dash = $('#Dashboard');
var dashBtn = $('#dashClick');
var clicked = false;
dashBtn.on('click',function (e) {
e.preventDefault();
if(clicked === true || clicked === false) {
dash.animate({"top":0}, 400, function () {
console.log('Up');
});
} else {
clicked = true;
dash.animate({"top":600}, 400, function () {
console.log('Down');
});
}
});
//make it height of document
dash.document.height();
});

Without your code it is hard to see which effect you are using or how you are easing it. You can use the properties of .animate to change the way it runs smoothly.
https://api.jquery.com/animate/
.animate( properties [, duration ] [, easing ] [, complete ] )
The default easing is Swing.
I would say to try linear... to me that is more "smooth".
http://api.jqueryui.com/easings/

Disable a html form submit button, to enable with a ticked checkbox

I am trying to disable a submit button, and have it be enabled when a checkbox is ticked. Simple example works on jsfiddle
http://jsfiddle.net/8YBu5/522/
But not when trying it in my template (with bootstrap etc).
My template has the checkbox
<input type="checkbox" id="checky">terms and conditions
Then the button
<input type="submit" value="Submit" id="submit" class="btn btn-success btn-lg btn-block">Submit</button>
Then the javascript. Does the javascript need to be at the top or something?
<script type="text/javascript">
$('#submit').attr("disabled","disabled");
$('#checky').click(function(){
if($(this).attr('checked') == true){
$('#submit').removeAttr('disabled');
}
else {
$('#submit').attr("disabled","disabled");
}
});
</script>
Anyone see where I'm going wrong?
Thanks
UPDATE
Thanks for all the suggestions, I've now tried adding the $(document).ready(function() { to the start of my script and changed .attr to .prop , still not working. Little more info: The button isn't disabled from the start, so maybe I'm not referencing the button properly in the function?
UPDATE2
I've tried adding an alert to see if my javascript is being run, but the alert doesn't show, what could this mean?
<script type="text/javascript">
$(document).ready(function() {
alert("Welcome");
$('submit').prop("disabled", true);
$('checky').click(function(){
if($(this).attr('checked') == true){
$('submit').prop("disabled", false);
}
else {
$('submit').prop("disabled", true);
}
});
});
UPDATE3 The javascript is now running, I've added two alerts, to see what is executing.
//<![CDATA[
$(window).load(function(){
$('#postme').attr("disabled","disabled");
$('#checky').click(function(){
if($(this).attr('checked') == true){
alert( "w" );
$('#postme').removeAttr("disabled");
}
else {
alert( "e" );
$('#postme').attr("disabled","disabled");
}
});
});//]]>
When I click the checkbox on or off, I get the e alert, telling me the if statement is always false. Any ideas why?
UPDATE4
The snippet works, just not in my page, alert 2 is always executed, never alert 1
Title
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row padding">
<div class="col-md-12">
<h1></h1>
</div>
</div>
<div class="row padding">
<form id="new_form" action="/page/" method="POST" >
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div class="panel-body">
<div class="col-md-12">
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Creator submission form</h3>
</div>
<div class="panel-body">
<div class="col-md-12">
</div>
</div>
</div>
<br>
<input type="checkbox" id="checky1">
<input type="submit" id="postme1" value="submit">
</form>
</div>
<div class="row padding">
<div class="col-md-12">
</div>
</div>
</div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#postme1').attr("disabled","disabled");
$('#checky1').click(function(){
if($(this).attr('checked') == true){
$('#postme1').removeAttr('disabled');
}
else {
$('#postme1').attr("disabled","disabled");
}
});
});//]]>
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/static/js/bootstrap.min.js"></script>
<div class="container">
<footer>
<hr>
</footer>
</div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#postme1').attr("disabled","disabled");
$('#checky1').click(function(){
if($(this).attr('checked') == true){
alert("1");
$('#postme1').removeAttr('disabled');
}
else {
alert("2");
$('#postme1').attr("disabled","disabled");
}
});
});//]]>
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>

Your javascript code should be
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#postme').attr("disabled","disabled");
$('#checky').click(function(){
if($(this).attr('checked') == true){
$('#postme').removeAttr('disabled');
}
else {
$('#postme').attr("disabled","disabled");
}
});
});//]]>
</script>
</head>
<body>
<input type="checkbox" id="checky">terms and conditions
<input type="submit" id="postme" value="submit">
</body>
</html>
This snippet is working fine for me.
Update
Use this as click event handler of the checkbox
$('#checky').click(function(){
if($(this).prop('checked')){
$('#postme').removeAttr('disabled');
}
else {
$('#postme').attr("disabled","disabled");
}
});

JSFiddle is a lovely resource. One of the lovely things it does is provide the wrapper for JQuery for you!
Have a little read of this:
Launching Code on Document Ready
To ensure that their code runs after the browser finishes loading the document, many JavaScript programmers wrap their code in an onload function:
window.onload = function() {
alert( "welcome" );
}
Unfortunately, the code doesn't run until all images are finished downloading, including banner ads. To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event:
$( document ).ready(function() {
// Your code here.
});

Make sure your include your <script> after the rest of your html. Or you can wrap it in:
$(document).ready(function() {
// your code here
});
Also you should use .change instead of .click, in case the user uses the keyboard to check the checkbox.

Wordpress + jScrollPane

Good evening, i'm trying to use jScrollPane in a Wordpress template and i'm going crazy, always shows a "non-skinned" scrollbar...
This code is loaded in the header.php, .portfolio-post-content contains only text:
<script type="text/javascript" charset="utf-8">
$(function() {
$('.portfolio-post-content').jScrollPane();
});
</script>
The element in style.css:
.portfolio-post-content { width:130px; float:left; overflow: auto; height: 500px; }
The HTML out:
<!-- Main Page Content Begin -->
<div id="main">
<div id="page-content" class="portfolio-container main-container-single-portfolio" style="position:relative;">
<div class="container sidebar-left single-project">
<!-- Media Begin -->
<div class="portfolio-post-media twelve columns"></div>
<!-- Media End -->
<!-- Content Begin -->
<div class="portfolio-post-content four columns">text...</div>
<!-- Content End -->
The header file loads jScrollPane.css before the other .js files.
It sounds like a problem related to the nested div elements.
Thanks,

1:
<script type="text/javascript" charset="utf-8">
var $ = jQuery.noConflict();
$(function() {
$('.portfolio-post-content.four.columns').jScrollPane();
});
</script>
2: http://www.radiospeck.it/barchitects/wp-content/themes/spacing/js/jquery.mousewhell.js?ver=3.4.2
Not loaded
3:
.portfolio-post-content.four.columns {
height: 200px;
}
you can test with:
jQuery('.portfolio-post-content.four.columns').css({
height: '200px'
}).jScrollPane();