Flexslider in Drupal 7 breaks JQuery - javascript
I've been working with Flexslider in Drupal 7, but when I try to create a page with a slider, the JQuery on the entire page stops working.
flexslider.load.js?no0zdc:41
Uncaught TypeError: $(...).flexslider is not a function
That's the error message that I receive. I've already uploaded the javascript library files provided by WooThemes and I've checked to make sure that they have been uploaded to the correct folder (/sites/all/libraries/flexslider/).
I'm a bit stuck. My best guess is that there is a conflict in the way JQuery is being called on the page since JQuery works on every other page, so for reference, I have posted some code from my header below:
EDIT
Full header below:
<head profile="http://www.w3.org/1999/xhtml/vocab">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="Sample content" about="/sample-content" property="dc:title">
<link rel="shortcut icon" href="/misc/favicon.ico" type="image/vnd.microsoft.icon">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="width">
<meta name="Generator" content="Drupal 7 (http://drupal.org)">
<link rel="canonical" href="/sample-content">
<link rel="shortlink" href="/node/114">
<title>Sample content | ILIAS Solutions</title>
<link type="text/css" rel="stylesheet" href="/sites/default/files/css/css_pbm0lsQQJ7A7WCCIMgxLho6mI_kBNgznNUWmTWcnfoE.css" media="all">
<link type="text/css" rel="stylesheet" href="/sites/default/files/css/css_IoEPASs8P-5r05g2SNWObjq4Z3L1qnpf6AUHzJOv_Mw.css" media="all">
<link type="text/css" rel="stylesheet" href="/sites/default/files/css/css__OGyo-ZLPb2eWR69kov4bKl5fA7ngglWR1B1kbenDy4.css" media="all">
<link type="text/css" rel="stylesheet" href="/sites/default/files/css/css_MnXiytJtb186Ydycnpwpw34cuUsHaKc80ey5LiQXhSY.css" media="all">
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" media="all">
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="all">
<link type="text/css" rel="stylesheet" href="/sites/default/files/css/css_9vS7KTziVXM6cOtv0jZFlm30ZZXGCzz9d4oZYdJnbf4.css" media="all">
<link type="text/css" rel="stylesheet" href="/sites/default/files/css/css_X2KZyy7-i2nDSO3slgqaJQDJe_rcOgl-_DFA2q0nlLI.css" media="all">
<link type="text/css" rel="stylesheet" href="/sites/all/themes/startupgrowth_lite/fonts/lato-font.css?no15n3" media="all">
<link type="text/css" rel="stylesheet" href="/sites/all/themes/startupgrowth_lite/fonts/sourcecodepro-font.css?no15n3" media="all">
<link type="text/css" rel="stylesheet" href="/sites/all/themes/startupgrowth_lite/fonts/ptserif-blockquote-font.css?no15n3" media="all">
<!--[if (IE 9)&(!IEMobile)]>
<link type="text/css" rel="stylesheet" href="/sites/all/themes/startupgrowth_lite/ie9.css?no15n3" media="all" />
<![endif]-->
<link type="text/css" rel="stylesheet" href="/sites/default/files/css/css_AbpHGcgLb-kRsJGnwFEktk7uzpZOCcBY74-YBdrKVGs.css" media="all">
<!-- HTML5 element support for IE6-8 -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="/sites/all/modules/jquery_update/replace/jquery/1.10/jquery.min.js?v=1.10.2"></script><style type="text/css"></style>
<script type="text/javascript" src="/misc/jquery.once.js?v=1.2"></script>
<script type="text/javascript" src="/misc/drupal.js?no15n3"></script>
<script type="text/javascript" src="/sites/all/modules/jquery_update/replace/ui/ui/minified/jquery.ui.core.min.js?v=1.10.2"></script>
<script type="text/javascript" src="/sites/all/modules/jquery_update/replace/misc/1.9/jquery.ba-bbq.min.js?v=1.2.1"></script>
<script type="text/javascript" src="/sites/all/modules/jquery_update/replace/misc/1.9/overlay-parent.js?v=1.0"></script>
<script type="text/javascript" src="/sites/all/modules/admin_menu/admin_menu.js?no15n3"></script>
<script type="text/javascript" src="/sites/all/modules/admin_menu/admin_menu_toolbar/admin_menu_toolbar.js?no15n3"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery(document).ready(function($) {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$("#toTop").addClass("show");
} else {
$("#toTop").removeClass("show");
}
});
$("#toTop").click(function() {
$("body,html").animate({scrollTop:0},800);
});
});
//--><!]]>
</script>
<script type="text/javascript" src="/sites/all/themes/startupgrowth_lite/js/jquery.mobilemenu.js?no15n3"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery(document).ready(function($) {
$("#main-navigation ul.main-menu, #main-navigation .content>ul.menu").mobileMenu({
prependTo: "#main-navigation",
combine: false,
nested: 1,
switchWidth: 760,
topOptionText: Drupal.settings.startupgrowth_lite['topoptiontext']
});
});
//--><!]]>
</script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery(document).ready(function($) {
var map;
var myLatlng;
var myZoom;
var marker;
});
//--><!]]>
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script><script src="https://maps.gstatic.com/maps-api-v3/api/js/20/10/main.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery(document).ready(function($) {
if ($("#map-canvas").length) {
myLatlng = new google.maps.LatLng(Drupal.settings.startupgrowth['google_map_latitude'], Drupal.settings.startupgrowth['google_map_longitude']);
myZoom = 13;
function initialize() {
var mapOptions = {
zoom: myZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: myLatlng,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById(Drupal.settings.startupgrowth['google_map_canvas']),mapOptions);
marker = new google.maps.Marker({
map:map,
draggable:true,
position: myLatlng,
url: "https://www.google.com/maps/dir//40.726576,-74.046822/#40.726576,-74.046822"
});
google.maps.event.addListener(marker, "click", function() {
window.open(this.url, "_blank");
});
google.maps.event.addDomListener(window, "resize", function() {
map.setCenter(myLatlng);
});
}
google.maps.event.addDomListener(window, "load", initialize);
}
});
//--><!]]>
</script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery(document).ready(function($) {
var headerHeight = $("#header").height();
$(window).scroll(function() {
if(($(this).scrollTop() > headerHeight) && ($(window).width() > 767)) {
$("body").addClass("onscroll");
$("body").css("paddingTop", (headerHeight)+"px");
if( $(this).scrollTop() > headerHeight+40 ) {
$("body").addClass("show");
}
} else {
$("body").removeClass("onscroll");
$("body").removeClass("show");
$("body").css("paddingTop", (0)+"px");
$("body.logged-in").css("paddingTop", (64)+"px");
}
});
});
//--><!]]>
</script>
<script type="text/javascript" src="/sites/all/themes/startupgrowth_lite/js/meanmenu/jquery.meanmenu.min.js?no15n3"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery(document).ready(function($) {
$("#main-navigation .sf-menu, #main-navigation .content>ul.menu, #main-navigation ul.main-menu").wrap("<div class='meanmenu-wrapper'></div>");
$("#main-navigation .meanmenu-wrapper").meanmenu({
meanScreenWidth: "767",
meanRemoveAttrs: true,
meanMenuContainer: "#header-inside",
meanMenuClose: ""
});
});
//--><!]]>
</script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery(document).ready(function($) {
$(window).load(function() {
$("#highlighted-bottom-transparent-bg").css("backgroundColor", "rgba(255,255,255,0.8)");
});
});
//--><!]]>
</script>
<script type="text/javascript" src="/sites/all/themes/startupgrowth_lite/js/jquery.browser.min.js?no15n3"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\u002F", "pathPrefix":"", "ajaxPageState":{"theme":"startupgrowth_lite", "theme_token":"Cv8zpIqC1NrJFXXv3ef0_APXlwgYfd8ijffT8WgyKoc", "js":{"sites\u002Fall\u002Fmodules\u002Fflexslider\u002Fassets\u002Fjs\u002Fflexslider.load.js":1, "sites\u002Fall\u002Fmodules\u002Fjquery_update\u002Freplace\u002Fjquery\u002F1.10\u002Fjquery.min.js":1, "misc\u002Fjquery.once.js":1, "misc\u002Fdrupal.js":1, "sites\u002Fall\u002Fmodules\u002Fjquery_update\u002Freplace\u002Fui\u002Fui\u002Fminified\u002Fjquery.ui.core.min.js":1, "sites\u002Fall\u002Fmodules\u002Fjquery_update\u002Freplace\u002Fmisc\u002F1.9\u002Fjquery.ba-bbq.min.js":1, "sites\u002Fall\u002Fmodules\u002Fjquery_update\u002Freplace\u002Fmisc\u002F1.9\u002Foverlay-parent.js":1, "sites\u002Fall\u002Fmodules\u002Fadmin_menu\u002Fadmin_menu.js":1, "sites\u002Fall\u002Fmodules\u002Fadmin_menu\u002Fadmin_menu_toolbar\u002Fadmin_menu_toolbar.js":1, "\u002F\u002Fmaxcdn.bootstrapcdn.com\u002Fbootstrap\u002F3.3.2\u002Fjs\u002Fbootstrap.min.js":1, "0":1, "sites\u002Fall\u002Fthemes\u002Fstartupgrowth_lite\u002Fjs\u002Fjquery.mobilemenu.js":1, "1":1, "2":1, "https:\u002F\u002Fmaps.googleapis.com\u002Fmaps\u002Fapi\u002Fjs?v=3.exp\u0026sensor=false":1, "3":1, "4":1, "sites\u002Fall\u002Fthemes\u002Fstartupgrowth_lite\u002Fjs\u002Fmeanmenu\u002Fjquery.meanmenu.min.js":1, "5":1, "6":1, "sites\u002Fall\u002Fthemes\u002Fstartupgrowth_lite\u002Fjs\u002Fjquery.browser.min.js":1}, "css":{"modules\u002Fsystem\u002Fsystem.base.css":1, "modules\u002Fsystem\u002Fsystem.menus.css":1, "modules\u002Fsystem\u002Fsystem.messages.css":1, "modules\u002Fsystem\u002Fsystem.theme.css":1, "misc\u002Fui\u002Fjquery.ui.core.css":1, "misc\u002Fui\u002Fjquery.ui.theme.css":1, "modules\u002Foverlay\u002Foverlay-parent.css":1, "modules\u002Ffield\u002Ftheme\u002Ffield.css":1, "modules\u002Fnode\u002Fnode.css":1, "modules\u002Fsearch\u002Fsearch.css":1, "modules\u002Fuser\u002Fuser.css":1, "sites\u002Fall\u002Fmodules\u002Fviews\u002Fcss\u002Fviews.css":1, "sites\u002Fall\u002Fmodules\u002Fadmin_menu\u002Fadmin_menu.css":1, "sites\u002Fall\u002Fmodules\u002Fadmin_menu\u002Fadmin_menu_toolbar\u002Fadmin_menu_toolbar.css":1, "modules\u002Fshortcut\u002Fshortcut.css":1, "sites\u002Fall\u002Fmodules\u002Fctools\u002Fcss\u002Fctools.css":1, "\u002F\u002Fmaxcdn.bootstrapcdn.com\u002Ffont-awesome\u002F4.2.0\u002Fcss\u002Ffont-awesome.min.css":1, "\u002F\u002Fmaxcdn.bootstrapcdn.com\u002Fbootstrap\u002F3.3.2\u002Fcss\u002Fbootstrap.min.css":1, "sites\u002Fall\u002Fthemes\u002Fstartupgrowth_lite\u002Fjs\u002Fmeanmenu\u002Fmeanmenu.css":1, "sites\u002Fall\u002Fthemes\u002Fstartupgrowth_lite\u002Fstyle.css":1, "sites\u002Fall\u002Fthemes\u002Fstartupgrowth_lite\u002Ffonts\u002Flato-font.css":1, "sites\u002Fall\u002Fthemes\u002Fstartupgrowth_lite\u002Ffonts\u002Fsourcecodepro-font.css":1, "sites\u002Fall\u002Fthemes\u002Fstartupgrowth_lite\u002Ffonts\u002Fptserif-blockquote-font.css":1, "sites\u002Fall\u002Fthemes\u002Fstartupgrowth_lite\u002Fie9.css":1, "sites\u002Fall\u002Fthemes\u002Fstartupgrowth_lite\u002Flocal.css":1}}, "overlay":{"paths":{"admin":"node\u002F*\u002Fedit\u000Anode\u002F*\u002Fdelete\u000Anode\u002F*\u002Frevisions\u000Anode\u002F*\u002Frevisions\u002F*\u002Frevert\u000Anode\u002F*\u002Frevisions\u002F*\u002Fdelete\u000Anode\u002Fadd\u000Anode\u002Fadd\u002F*\u000Aoverlay\u002Fdismiss-message\u000Auser\u002F*\u002Fshortcuts\u000Aadmin\u000Aadmin\u002F*\u000Abatch\u000Ataxonomy\u002Fterm\u002F*\u002Fedit\u000Auser\u002F*\u002Fcancel\u000Auser\u002F*\u002Fedit\u000Auser\u002F*\u002Fedit\u002F*", "non_admin":"admin\u002Fstructure\u002Fblock\u002Fdemo\u002F*\u000Aadmin\u002Freports\u002Fstatus\u002Fphp"}, "pathPrefixes":[ ], "ajaxCallback":"overlay-ajax"}, "flexslider":{"optionsets":{"flexslider_default_thumbnail_slider":{"namespace":"flex-", "selector":".slides \u003E li", "easing":"swing", "direction":"horizontal", "reverse":false, "smoothHeight":true, "startAt":0, "animationSpeed":600, "initDelay":0, "useCSS":true, "touch":true, "video":false, "keyboard":true, "multipleKeyboard":false, "mousewheel":0, "controlsContainer":".flex-control-nav-container", "sync":"", "asNavFor":"#flexslider-1", "itemWidth":210, "itemMargin":5, "minItems":0, "maxItems":0, "move":0, "animation":"slide", "slideshow":false, "slideshowSpeed":"7000", "directionNav":true, "controlNav":false, "prevText":"Previous", "nextText":"Next", "pausePlay":false, "pauseText":"Pause", "playText":"Play", "randomize":false, "animationLoop":false, "pauseOnAction":true, "pauseOnHover":false, "manualControls":""}}, "instances":{"flexslider-1":"flexslider_default_thumbnail_slider"}}, "startupgrowth_lite":{"topoptiontext":"Select a page", "google_map_latitude":"40.726576", "google_map_longitude":"-74.046822", "google_map_canvas":"map-canvas"}, "admin_menu":{"destination":"destination=node\u002F114", "hash":"37d586808ca3270fdd2a560149caab90", "basePath":"\u002Fadmin_menu", "replacements":{".admin-menu-users a":"0 \u002F 1"}, "margin_top":1, "toolbar":[ ]}});
//--><!]]>
</script>
<script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/maps-api-v3/api/js/20/10/common.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/maps-api-v3/api/js/20/10/util.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/maps-api-v3/api/js/20/10/stats.js"></script></head>
I hope I've provided sufficient information. Any help would be greatly appreciated.
Related
Phonegap - Javascript don't working
I have a problem, when i try to make a phonegap build and test it on my android phone javascript don't run.
I have simple config.xml file, and there is a preview of my index.html's head :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>My app</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src = "phonegap.js" > </script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=yes">
<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="Mobile_style.css"><link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link href='https://fonts.googleapis.com/css?family=Quicksand:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src = "phonegap.js" > </script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
// do your thing!
}
</script>
<script type="text/javascript">
window.onload = function()
{
MY JS CODE
}
</script>
</head>
<body onload="onBodyLoad()">
MY HTML
</body>
I have two html files, the index.html and the game.html, i have the same links and scripts in the game's head.
i have try to put my code on the but thats not working.
I have search some hours but i can solve the problem.
Thanks for your help !
You should include only one version of jquery. Also you don't need both cordova.js and phonegap.js, choose one script.
Your code may look much more cleaner:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>My app</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="Mobile_style.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link href='https://fonts.googleapis.com/css?family=Quicksand:700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("Device is ready");
}
</script>
</head>
<body>
MY HTML
</body>
</html>
Loading .js file in Firefox and IE
on Chrome and Opera, the website works perfectly. When I open it in Firefox and IE it is not loading the .js files. My php code looks like this: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title id="titlebank">WEBSITE</title> <link rel="SHORTCUT ICON" href="images/icon.ico"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/simple-line-icons.css"> <link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css"> <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script> <script src="https://cdn.socket.io/socket.io-1.3.5.js"></script> <script type="text/javascript" src="js/noty/packaged/jquery.noty.packaged.min.js"></script> <script type="text/javascript" src="js/progressbar.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/kickstart.js"></script> <script type="text/javascript" src="chat/chat.js"></script> <link rel="stylesheet" href="chat/chat.css" type="text/css" /> <script type="text/javascript">
javascript runtime error object doesn't support property or method 'tabs'
Whenever i load my page this error got hit.
My code is:
<head runat="server">
<title>Jai Jinendera</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css"/>
<link rel="stylesheet" href="css/flexslider.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<script src="js/selectivizr-min.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css">
<![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="js/all-in-one-min.js"></script>
<script src="js/setup.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel.js" type="text/javascript">
$(window).load(function () {
$('.flexslider').flexslider();
});
$(function () {
$('#work').carouFredSel({
width: '100%',
scroll: 1,
auto: false,
pagination: false,
prev: '.prev_item',
next: '.next_item'
});
$("#work").touchwipe({
wipeLeft: function () { $('.next_item').trigger('click'); },
wipeRight: function () { $('.prev_item').trigger('click'); }
});
});
$(window).load(function(){
$('#demo-side-bar').removeAttr('style');
});
</script>
<style type="text/css">
.demobar {
display:none;
}
#demo-side-bar {
top:53px!important;
left:90%!important;
display:block!important;
}
</style>
</head>
It says error in client/js/setup.js-line 10 column 5
and 10th line of setup.js is
$('.tabs').tabs({ fx: { opacity: 'toggle', duration: 'fast'} });
I see two problems in your <script> declarations:
You have included jquery.min.js twice, once from a location on your server and once from Google's CDN. Remove the latter. (Or remove the former and move the latter up to replace it.)
A <script> element should either reference an external script or contain content of its own, but not both.
You need to move the code out of your jquery.carouFredSel.js script element:
<script src="jquery.carouFredSel.js" type="text/javascript"></script>
...and then include that code in a new script element:
<script>
$(window).load(function () {
...
</script>
P.S. I don't know what you have in all-in-one-min.js, but it clearly isn't actually all in one or you wouldn't need the other scripts.
one jquery function is disabling the other
<!DOCTYPE html>
<!--
-->
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8" />
<title>F.E.G | Admin Dashboard </title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<script src="js/text_class.js" type="text/javascript"></script>
<script src="web/assets/plugins/flot/jquery.flot.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/bmain172.js"></script>
<script src="/js/text_class.js" type="text/javascript"></script>
<script src="/freedomtextim/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/freedomtextim/jquery-ui.js"></script>
<link href="freedomtextim/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="web/assets/plugins/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="freedomtextim/assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="freedomtextim/assets/css/style.css" rel="stylesheet" />
<link href="web/assets/css/style-responsive.css" rel="stylesheet" />
<link href="web/assets/css/themes/default.css" rel="stylesheet" id="style_color" />
<link href="web/assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css" />
<link href="#" rel="stylesheet" id="style_metro" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL STYLES -->
<link href="web/assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet" rel="stylesheet" type="text/css" />
<link href="web/assets/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" type="text/css" />
<link href="web/assets/plugins/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="web/assets/plugins/jqvmap/jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
<!-- END PAGE LEVEL STYLES -->
<link href="/freedomtextim/jquery-ui.css" rel="stylesheet" type="text/css">
<script>$(function () {
$(document).tooltip({
position: { my: "left+15 center", at: "right center"},
content: function () {
return $(this).prop('title');
},
show: null,
close: function (event, ui) {
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(400, 1);
},
function () {
$(this).fadeOut("400", function () {
$(this).remove();
})
});
}
});
}); </script>
<script src="web/assets/plugins/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="web/assets/plugins/breakpoints/breakpoints.js" type="text/javascript"></script>
<script src="web/assets/scripts/app.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function() {
App.init(); // initlayout and core plugins
Index.init();
Index.initJQVMAP(); // init index page's custom scripts
Index.initKnowElements(); // init circle stats(knob elements)
Index.initPeityElements(); // init pierty elements
Index.initCalendar(); // init index page's custom scripts
Index.initCharts(); // init index page's custom scripts
Index.initChat();
Index.initDashboardDaterange();
Index.initIntro();
});
</script>
<style type="text/css">
label {
display: inline-block;
width: 5em;
}
.red {
color: red;
}
}</style>
</head>
Inside the app.js file.
var handleSidebarMenu = function () {
jQuery('#sidebar .has-sub > a').click(function (e) {
var last = jQuery('.has-sub.open', $('#sidebar'));
last.removeClass("open");
jQuery('.arrow', last).removeClass("open");
jQuery('.sub', last).slideUp(200);
var sub = jQuery(this).next();
if (sub.is(":visible")) {
jQuery('.arrow', jQuery(this)).removeClass("open");
jQuery(this).parent().removeClass("open");
sub.slideUp(200, function () {
handleSidebarAndContentHeight();
});
} else {
jQuery('.arrow', jQuery(this)).addClass("open");
jQuery(this).parent().addClass("open");
sub.slideDown(200, function () {
handleSidebarAndContentHeight();
});
}
e.preventDefault();
});
}
You need to put your jQuery code after you've included jQuery. <script src="web/assets/plugins/jquery-1.8.3.min.js" type="text/javascript"></script> <!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip --> <script src="web/assets/plugins/breakpoints/breakpoints.js" type="text/javascript"></script> <script src="web/assets/scripts/app.js" type="text/javascript"></script> <script> // Your code here </script>
Inserting customized Scroll Text
I have downloaded and customized a scroll bar (with text), but I can't integrate it with my website.
Basically this is the code for the scroll bar:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery custom scrollbar demo</title>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="jquery.mCustomScrollbar.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
})(jQuery);
</script>
</head>
And I need to put in a page with this code
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" media="all">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<script type="text/javascript" src="js/jquery.transform.js"></script>
<script type="text/javascript" src="js/jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/forms.js"></script>
<script type="text/javascript" src="js/switcher.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/sprites.js"></script>
<script type="text/javascript" src="js/googleMap.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
It gives an error:
$("#content_1").mCustomScrollbar is not a function
You need to add the "jquery.mCustomScrollbar.js" to the page.
And the "jquery.mCustomScrollbar.css" to get the same styles.
Now add at the first line:
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
You must add the jquery custom scrollbar, before you run the "$("#content_1").mCustomScrollbar()" function, and after the jquery library.
<script src="jquery.mCustomScrollbar.js"></script>