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.
Related
I check my website using gtmetrix and my website is recommended for fewer HTTP requests and reduce DNS lookups. So I must to combining combining many external Javascript scripts into one
In my layout default like this
For css :
<link rel="shortcut icon" href="/content/assets/img/favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="/content/libs/materialize/css/materialize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="/content/assets/style/style.min.css?v=#currentVersion">
<link rel="stylesheet" href="/content/assets/style/style-responsive.min.css?v=#currentVersion">
<link rel="stylesheet" href="/content/assets/style/custom-form-materialize.css">
<link href="/Content/dist/social-share/sharetastic.css" rel="stylesheet" />
<link rel="stylesheet" href="/content/assets/style/happy.min.css?v=#currentVersion">
For js :
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/Content/dist/social-share/sharetastic.min.js"></script>
<script src="/Content/assets/script/jquery.twbsPagination.min.js"></script>
<script src="/Content/libs/materialize/js/materialize.min.js?v=#currentVersion"></script>
<script src="/Content/assets/script/select2.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="/Content/assets/script/rendercomponent.js"></script>
<script type="text/javascript" src="/Content/assets/script/script.min.js?v=#currentVersion"></script>
<script src="/Content/assets/script/share-content.js?v=#currentVersion"></script>
<script src="/Content/assets/script/jcanvas.min.js" type="text/javascript"></script>
<script src="/Content/assets/script/happy.min.js?v=#currentVersion" type="text/javascript"></script>
How can I combining many external Javascript scripts into one?
If combining them into one won't impact the website? JS and CSS websites are not problematic?
Success Man's comment is the correct answer. Webpack or another bundler will allow you to combine js files and reduce the number of requests.
Hi I'm trying to use summernote but it won't fully load.
i have link all scripts and styles what it need.
<!-- Bootstrap3 core CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- include libries(jQuery, bootstrap3, fontawesome) -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src='../js/jquery-1.11.1.min.js'></script>
<script src="../js/bootstrap.min.js"></script>
<!-- include summernote css/js-->
<link href="../css/summernote.css" />
<link href="../css/summernote-bs3.css" />
<script src="../js/summernote.min.js"></script>
<script src="../js/summernote.js"></script>
then i use JS of summernote
<script>
$( document ).ready(function() {
$('#summernote').summernote({height: 300});
});
</script>
and there is my html
<textarea id="summernote" cols="30" rows="10" class="form-control"></textarea>
and after that i get this
http://screenshot.cz/WO3ZQ/
i have no icons here. But everything works but it looks horrible.
I was trying to found solution and i found if I'm using bootstrap icons, i put them into and summernote use tag. Maybe it is the problem. I don't know.
updated your jsfiddle check it out now
http://jsfiddle.net/pW4d8/1/
$(document).ready(function() {
$('#summernote').summernote({height: 300});
});
works just fine..
The issue was with the js resources.
edit::
this in <head> works fine:
<script src="//code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>
<link href="/css/result-light.css" type="text/css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js" type="text/javascript"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<script src="http://podivej.se/js/summernote.min.js" type="text/javascript"></script>
<link href="http://podivej.se/css/summernote.css" type="text/css" rel="stylesheet" />
<link href="http://podivej.se/css/summernote-bs3.css" type="text/css" rel="stylesheet">
To summarize because I've just encountered the same problem, summernote just need to load his .js file BEFORE his own .css!
i have some js and css files now my requirement to keep these link in xml files and apply on aspx page when page get load can anybody please help to do this
css Links :
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" />
<link rel="stylesheet" href="ed/bootstrap/css/bootstrap.css">
js links :
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/waypoints.min.js"></script>
xml File: i am not suer the way of writing xml file is correct or not
<editor>
<template1>
<theme id="1" name="default">
<css><link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" />
<link rel="stylesheet" href="ed/bootstrap/css/bootstrap.css"/>
</css>
<js>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/waypoints.min.js"></script>
</js>
</theme>
</template1>
</editor>
I'm assuming you want the browser to dynamically load these files after being passed the XML file?
If so then use a combination of ajax to load the xml file, then something like Modernizr.load to load the files.
http://modernizr.com/docs/#load
If the xml file is used on the server-side I guess just print the various links and scripts into your header before it's sent to the browser.
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 managed to install foundation using their steps on their website
http://foundation.zurb.com/docs/rails.php
I have followed their steps carefully and managed to get my homepage with the orbit image scroller working. However if i try and work with the javascript Reveal or Clearing components, they do not seem to work. I get no error in my console when debugging.
Has anyone come across this or have any idea why this could be happening.
My application.js looks like this
//= require jquery
//= require jquery_ujs
//= require foundation/app
//= require foundation
//= require_tree .
My source looks like this
<!-- Included CSS Files -->
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/foundation/globals.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/foundation/typography.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/foundation/grid.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/foundation/ui.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/foundation/forms.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/foundation/orbit.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/foundation/reveal.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/foundation/mobile.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/foundation/index.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/landing.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/layouts/layout.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<!-- Included JS Files -->
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/foundation/app.js?body=1" type="text/javascript"></script>
<script src="/assets/foundation/modernizr.foundation.js?body=1" type="text/javascript"></script>
<script src="/assets/foundation/jquery.reveal.js?body=1" type="text/javascript"></script>
<script src="/assets/foundation/jquery.orbit-1.4.0.js?body=1" type="text/javascript"></script>
<script src="/assets/foundation/jquery.customforms.js?body=1" type="text/javascript"></script>
<script src="/assets/foundation/jquery.placeholder.min.js?body=1" type="text/javascript"></script>
<script src="/assets/foundation/jquery.tooltips.js?body=1" type="text/javascript"></script>
<script src="/assets/foundation/index.js?body=1" type="text/javascript"></script>
<script src="/assets/landing.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>