links in header looks like..
<link rel="icon" href="images/favicon.ico">
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/script.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.equalheights.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/tmStickUp.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script src="js/validjs.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="css/homestyle.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="css/side-slider.css" rel="stylesheet" type="text/css" media="screen">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery.side-slider.js"></script>
if i comment the below jq library..
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
then my stuck-container works on scroll down the page.. but my "username availability checker" plugin does not work.. :(
and... VICE-VERSA...
Please help me to get out of this prob...
You are using 2 libraries for your page weather only 1 library should be use in one website so please use only one library it will work fine.
Related
I'm trying to use a ready template that uses revolution slider in my vue-cli app, how can i use the external script of this template?
I've tried to import the scripts that the template used in the tag in index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Balad | Govt HTML Template</title>
<!-- CSS Files -->
<link href="css/custom.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link href="css/color.css" rel="stylesheet">
<link href="css/all.css" rel="stylesheet">
<link href="css/owl.carousel.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/slick.css" rel="stylesheet">
<link rel="icon" href="images/fav.png" type="image/png">
<!--Rev Slider Start-->
<link rel="stylesheet" href="js/rev-slider/css/settings.css" type='text/css' media='all' />
<link rel="stylesheet" href="js/rev-slider/css/layers.css" type='text/css' media='all' />
<link rel="stylesheet" href="js/rev-slider/css/navigation.css" type='text/css' media='all' />
<!--Rev Slider End-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<noscript>
<strong>We're sorry but brikma-website doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- JS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/custom.js"></script>
<!--Rev Slider Start-->
<script type="text/javascript" src="js/rev-slider/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="js/rev-slider.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.actions.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.carousel.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.kenburn.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.migration.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.navigation.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.parallax.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.slideanims.min.js"></script>
<script type="text/javascript" src="js/rev-slider/js/extensions/revolution.extension.video.min.js"></script>
</body>
</html>
and i past the body of the template in the vue js component that renderd by #app
the jquery work on the site, but there are other problems, the revolution slider Not displayed,
I also tried to use this packages with node modules but i have seen the work is hard with this way
and here is my project structure :
this folders in the public i put them there that index.html can reach them directly, this folders were in the template (all js and css ...)
I don't have any problems in console and with the build
I'm using Mottie keyboard https://github.com/Mottie/Keyboard. All the JS and CSS from this plugin added in index.html. My partial file is home.html in this file only i have keyboard code, but that was not working.
If i'm adding those CSS and JS files it was working in homepage but all the js files were rendering console also in GET method...
Below are my code.
index.html
<html lang="en" ng-app="CSI">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>AXA</title>
<!-- Bootstrap -->
<link href="docs/css/jquery-ui.min.css" rel="stylesheet">
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="dist/css/video-css.css">
<link rel="stylesheet" href="dist/css/keyboard.css">
<link rel="stylesheet" href="docs/css/demo.css">
<link rel="stylesheet" href="docs/css/tipsy.css">
<link rel="stylesheet" href="docs/css/prettify.css">
<link rel="stylesheet" href="dist/css/custom.css">
<script type="text/javascript" src="docs/js/jquery.min.js"></script>
<script type="text/javascript" src="docs/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="docs/js/bootstrap.min.js"></script>
<script type="text/javascript" src="docs/js/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.2.28/angular-route.js"></script>
<!-- project scripts -->
<script type="text/javascript" src="public/app/app.js"></script>
<script type="text/javascript" src="dist/js/jquery.keyboard.js"></script>
<script type="text/javascript" src="dist/js/jquery.keyboard.extension-typing.js"></script>
<script type="text/javascript" src="dist/js/jquery.keyboard.extension-autocomplete.js"></script>
<script type="text/javascript" src="dist/js/jquery.keyboard.extension-caret.js"></script>
<script type="text/javascript" src="docs/js/demo.js"></script>
<script type="text/javascript" src="docs/js/jquery.tipsy.min.js"></script>
<script type="text/javascript" src="docs/js/prettify.js"></script>
<script src="dist/js/custom.js"></script>
<script type="text/javascript" src="dist/js/wow.js"></script>
<script src="dist/js/touchswipe.min.js"></script>
<script type="text/javascript" src="dist/js/jquery.mousewheel.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
home.html
<input class="text" type="text" placeholder="Name"><i class="fa fa-keyboard-o icon" aria-hidden="true"></i>
I dont know why my code is not working... the keyboard is coming... if i add all the keyboard related scripts in home.html keyboard was coming but in browser console all the scripts are changed into GET requests and loading always whenever the page get refreshed.
Browser console
Any suggestion Any help.
Thankq in advance.
I need one help.I want to set config file which will keep all javascript file path and in index page it will called dynamically and include using angular.js or Javascript. I am explaining my file below.
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="Channabasavashwara">
<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>...:::WELCOME TO Channabasavashwara Institude of Technology:::...</title>
<link href="css/pace.css" rel="stylesheet">
<script src="js/pace.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/angularjs.js" type="text/javascript"></script>
<!--<script src="js/angularroute.js" type="text/javascript"></script>-->
<script src="js/angularuirouter.js" type="text/javascript"></script>
<script src="controller/loginRoute.js" type="text/javascript"></script>
<!-- GLOBAL STYLES - Include these on every page. -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic' rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel="stylesheet" type="text/css">
<link href="icons/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- PAGE LEVEL PLUGIN STYLES -->
<!-- THEME STYLES - Include these on every page. -->
<link rel="stylesheet" type="text/css" media="all" href="css/angular-datepicker.css" />
<link href="css/style22.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/plugins.css" rel="stylesheet">
<link href="css/chosen.css" rel="stylesheet">
<link href="css/load.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div ui-view>
</div>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.popupoverlay.js"></script>
<script src="js/shortcut.js"></script>
<script src="js/defaults.js"></script>
<script src="js/logout.js"></script>
</body>
</html>
As you can see here i have many javascript and css file links.Here i need i will set path in any other file , call them to this index.html and will include using Loop.Please help me.
You can do what you want using gulp or grunt. In case you are not using one of them yet, I suggest you to take a look at them.
For your specific case, there are several tools you can use. For example, for gulp, you can use this gulp-inject.
Was just wondering if someone could be able to help me out. I've come across a strange issue that i've never encountered and I have no idea how to solve it :
<head>
<title>Welcome to Edge Hill Computing</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="index.css"/>
<script type="text/javascript" src="global.js"></script>
<script type = "text/javascript" src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
</head>
my javascript file and my jquery file is imported here. Which "should" to the external jquery file. But it doesn't, i have to run the code from there with script tags. Any possible solution?
If it helps the code in the Global.js is this :
$(document).ready(function(){
$("#txtbox").keyup(function(){
var name = $('#txtbox').val();
$('#display').html((name));
});
});
global.js should be loaded after jQuery
Add your script tag after the jquery script references.
<head>
<title>Welcome to Edge Hill Computing</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="index.css"/>
<script type = "text/javascript" src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="global.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
</head>
<head>
<title>Welcome to Edge Hill Computing</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="index.css"/>
<script type = "text/javascript" src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="global.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
</head>
You need to process your code after jquery has loaded. I imagine when you were inserting it directly in the page it was below where you loaded jquery in the head tag.
Hi in the below code datepicker() is not working using jquery.But separately it's working fine.
After adding the code into my page it's not working this is my sample code.
html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Admission Form</title>
<link rel="stylesheet" href="css/admissionform.css">
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<script src="js/jquery.min.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.date-picker').datepicker();
});
</script>
<link rel="stylesheet" href="css/flexslider.css">
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
You have multiple calls to jQuery:
<script src="js/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
Leave only only call (before any use of jQuery). Also check DevTools console for other errors (if any).
Also, you have <input id="datepicker"> but call datepicker for class selector .date-picker
Input element is with ID datepicker but you have used the class selector to create datepicker
<input type="text" id="datepicker">
jQuery('.date-picker').datepicker();
use id selector
jQuery('#datepicker').datepicker();
Check Console for errors
You have used 2 jquery files which might also cause some issue