I'm developing project with AngulaJS , Flask , Apache2.
My index page can't find css styles,jsscripts ,images and other sources.
That is from my head tag in HTML:
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"
type="text/javascript"></script>
<script src="/js/app.js"></script>
<script src="/js/services.js"></script>
<script src="/js/script.js"></script>
<script src="/js/controllers.js"></script>
<link rel="stylesheet" type="text/css" href="/css/custom.css">
<script type="text/javascript" src="/js/ui-bootstrap-tpls-0.14.3.min.js"></script>
What's going on? I'm noobie in development. So don't be mad.
Thanks for you attention!
Related
I am wondering how can i set up my current Theme that is designed using bootstrap and some css and js
I am using following css and js files in my theme and i don't want to put it in index.html like we did in angular 1 can any one tell me how to import all css and js effectively without compromising Angular 2 structure and behaviour.
<link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/bootstrap-select2/select2.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/switchery/css/switchery.min.css" rel="stylesheet" type="text/css" media="screen" />
<link href="theme/css/theme-icons.css" rel="stylesheet" type="text/css">
<link class="main-stylesheet" href="theme/css/theme.css" rel="stylesheet" type="text/css" />
<link href="theme/css/style.css" rel="stylesheet" type="text/css" />
Js files
<script src="assets/plugins/pace/pace.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/modernizr.custom.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/plugins/boostrapv3/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery/jquery-easy.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-unveil/jquery.unveil.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-bez/jquery.bez.min.js"></script>
<script src="assets/plugins/jquery-ios-list/jquery.ioslist.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-actual/jquery.actual.min.js"></script>
<script src="assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-select2/select2.min.js"></script>
<script type="text/javascript" src="assets/plugins/classie/classie.js"></script>
<script src="assets/plugins/switchery/js/switchery.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
I tried using ng2-bootstrap and bootstrap but can not get it working.
Your problem is your loading straight bootstrap along with jquery plugins instead of a something like angular-ui-bootstrap. Some boostrap stuff uses pure CSS(no compatibility issues) and others use jquery/ which can work iffy with Angular1/2 sometimes hence projects like angular-ui-bootstrap.
try the angular 2 version https://ng-bootstrap.github.io/
then load all the css files using webpack(just putting in the same css folder the current project css files are). Obviously you would need to change the existing bootstrap javascript code to angular-ui directives.
I got a little problem with jQuery here.
Basically, I include my pages in the index.php page. However, SOME jQuery is not working, while others are okay. All scripts used in all pages are loaded in the tag of index.php.
<head>
<meta charset="utf-8">
<title>Shy Shop</title>
<!--js-->
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>
<script type="text/javascript" src="js/light_box.js"></script>
<script type="text/javascript" src="js/search.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){jQuery(".inline").colorbox({inline:true, width:"50%"});});
</script>
<!--end js-->
<!-- Mobile Specific Metas ================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS ================================================== -->
<link rel="shortcut icon" href="Images/icons/favicon.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/colors.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/ddsmoothmenu.css"/>
<link rel="stylesheet" href="css/elastislide.css"/>
<link rel="stylesheet" href="css/home_flexslider.css"/>
<link rel="stylesheet" href="css/light_box.css"/>
<link href="../../../html5shiv.googlecode.com/svn/trunk/html5.js">
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
And this is how I include the rest of the files in index.php.
<?php
if(!isset($_REQUEST['pg']))
{
$pg = "home";
}
else
$pg = $_REQUEST['pg'];
if($pg=="shopguide")
include("faqs.php");
elseif($pg=="aboutus")
include("aboutus.php");
elseif($pg=="contactus")
include("contactus.php");
elseif($pg=="home")
include("home.php");
elseif($pg=="shop")
include("shop.php");
elseif($pg=="sitemap")
include("sitemap.php");
elseif($pg=="product")
include("product.php");
elseif($pg=="shoppingcart")
include("shoppingcart.php");
elseif($pg=="profile")
include("account.php");
elseif($pg=="orders")
include("orders.php");
elseif($pg=="wishlist")
include("mywishlist.php");
elseif($pg=="changepassword")
include("changepassword.php");
elseif($pg=="newmessage")
include("newmessage.php");
elseif($pg=="receivedmessages")
include("receivedmessages.php");
elseif($pg=="ordersummary")
include("ordersummary.php");
elseif($pg=="test")
include("test.php");
elseif($pg=="viewmessage")
include("viewmessage.php");
elseif($pg=="register")
include("register.php");
elseif($pg=="login")
include("login.php");
elseif($pg=="reseller")
include("reseller.php");
elseif($pg=="myaccount")
include("orders.php");
?>
An example of a working js in the included files is the jcarousel.min.js.
The accordion.js and light_box.js does not work with the included files, but they work when they are used in a single file.
Console says: Uncaught TypeError: undefined is not a function.
This issue may happen when you have same plugin/jquery files included
in other php files too. e.g. in index.php, you have some JS files, you
are including other PHP files which may also have same JS again. In
such cases, jQuery behaves like this. To check this, just check the
view source of generated html.
I am pretty new to jQuery and I have never been using fancybox before. I tried to install it, but it doesn't work. I used several test scripts I found, but still nothing. Here is my code:
In head I have following (Paths to all files are correct):
<script type="text/javascript" src="http://localhost/scripts/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script src="http://localhost/scripts/jquery-2.1.1.js" type="text/javascript"></script>
And in my test document:
<script type='text/javascript'>
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true
});
});
</script>
<a id="single_image" title="" href=""><img src="http://localhost/images/something.png" alt="" /></a>
But when I click on the image, nothing happens.
You are declaring your jquery script last. That include should be first, preceeded by any other script that uses jquery. nothing to do if it's on localhost or not.
<script src="http://localhost/scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript" src="http://localhost/scripts/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
I have been having the same issue when your jquery-2.1.1.js. Once I used fancybox's provided jquery-1.10.1.js it worked however I got curious and tried jquery-1.9.1.js and my document stopped rendering the results.
I don't know if it helps or you figured it out already but I thought I would add what I found.
I am fairly new to web developing, but I believe I have a conflict with my jQuery / javascripts (am not entirely sure which one). My site has a drop-down menu and an image selector. When both scripts are in there together they will not work. Whichever one comes first, is overide by the latter. I believe the 2 scripts that are actually causing the problem are "js/jquery-1.js" and "js/global-perf-minified.js" but here are all the scripts being used within my page:
<script src="js/jquery-1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/product.js" type="text/javascript"></script>
<script src="js/searchsuggest.js" type="text/javascript"></script>
<script src="js/full.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery_004.js"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/easing.js" type="text/javascript"></script>
<script src="js/slider.js" type="text/javascript"></script>
<link href="css/colorbox.css" type="text/css" rel="stylesheet">
<script src="js/jquery_007.js" type="text/javascript"></script>
<link href="js/cloud-zoom.css" type="text/css" rel="stylesheet">
<script src="js/cloud-zoom.js" type="text/javascript"></script>
<script type="text/javascript" src="js/utag_008.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script src="js/global-perf-minified.js" type="text/javascript"> </script>
<script type="text/javascript" src="js/product-minified.js"></script>
I saw some posts about adding a '.noconflict()' style but didn't seem to have much luck. I am willing to accept that I could just be inserting it wrong / picking up the wrong code for this. Any help is greatly appreciated! Thank you.
Possible duplicates:
<script src="js/jquery-1.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery_004.js"></script>
<script type="text/javascript" src="js/jquery_004.js"></script>
Declaring jquery many times....better check those and see if they are duplicates ;)
-----------------EDIT---------------------------
Now your code should looks like, with just one jquery:
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/product.js" type="text/javascript"></script>
<script src="js/searchsuggest.js" type="text/javascript"></script>
<script src="js/full.js" type="text/javascript"></script>
<script src="js/easing.js" type="text/javascript"></script>
<script src="js/slider.js" type="text/javascript"></script>
<link href="css/colorbox.css" type="text/css" rel="stylesheet">
<link href="js/cloud-zoom.css" type="text/css" rel="stylesheet">
<script src="js/cloud-zoom.js" type="text/javascript"></script>
<script type="text/javascript" src="js/utag_008.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script src="js/global-perf-minified.js" type="text/javascript"> </script>
<script type="text/javascript" src="js/product-minified.js"></script>
If you keep with problems then try putting just, two or three js, like this:
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
If works with this two, then adding the others until you find the one that is creating bugs or problems(conflicts) with the rest of your js ;)
Saludos.
I have the following code in the header of a website that I'm working on but they both seem to be in conflict with each other.
<link href="tq.css" rel="stylesheet" type="text/css" media="screen" />
<script src="framework/mootools.js" type="text/javascript"></script>
<script src="slideshow/js/slideshow.js" type="text/javascript"></script>
<script src="slideshow/js/slideshow.kenburns.js" type="text/javascript"></script>
<link href="slideshow/css/slideshow.css" rel="stylesheet" type="text/css" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
The Sideshow stops working whenever I add the lines below while the lightbox works. How can I fix it?
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
Use jQuery noConflict. Information about which can be found at: http://docs.jquery.com/Using_jQuery_with_Other_Libraries