I want this to be bundle in one css file and I am not sure why it is not working with following code ... can any one tell me where I am missing code to make this bundle one css file..
.cs
bundles.Add(new StyleBundle("~/Content/themes/base/css").IncludeDirectory("~/Content/themes/base", "*.css"));
BundleTable.EnableOptimizations = true;
.cshtml
#Styles.Render("~/Content/themes/base/css")
Rendered markup
<link href="/Content/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.accordion.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.base.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.button.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.menu.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.selectable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.spinner.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.tabs.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.tooltip.css" rel="stylesheet"/>
<link href="/Content/themes/base/annotations.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.jstree.css" rel="stylesheet"/>
<link href="/Content/themes/base/jstree.css" rel="stylesheet"/>
<link href="/Content/themes/base/sidePanels.css" rel="stylesheet"/>
<link href="/Content/themes/base/snapshot.css" rel="stylesheet"/>
<link href="/Content/themes/base/superfish.css" rel="stylesheet"/>
<link href="/Content/themes/base/toolbar.css" rel="stylesheet"/>
<link href="/Content/themes/base/viewer.css" rel="stylesheet"/>
Related
I expect to epxpand link into
<link type="text/css" rel="stylesheet" href="" />
and expect to epxpand link:css into
<link type="text/css" rel="stylesheet" href="style.css" media="all" />.
Here is my way to customize it.
vim .vim/snippets.json
"link": "<link type=\"text/css\" rel=\"stylesheet\" href=\"\" />",
"link:css": "<link type=\"text/css\" rel=\"stylesheet\" href=\"${1:style}.css\" />"
and edit .vimrc
let g:emmet_html5 = 0
let g:user_emmet_settings = webapi#json#decode(join(readfile(expand('~/.vim/snippets.json')), "\n"))
I found that in my vim-emmet:
link was expanded as
<link rel="stylesheet" href="" />
link:css was expanded as
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
Why link was not expanded as
<link type="text/css" rel="stylesheet" href="" />
and link:css was not expanded as
<link type="text/css" rel="stylesheet" href="style.css" />
?
in my web page , I am using more than 10 fav icons , as you can see bellow :
<link rel="apple-touch-icon" sizes="57x57" href="">
<link rel="apple-touch-icon" sizes="60x60" href="">
<link rel="apple-touch-icon" sizes="72x72" href="">
<link rel="apple-touch-icon" sizes="76x76" href="">
<link rel="apple-touch-icon" sizes="114x114" href="">
<link rel="apple-touch-icon" sizes="120x120" href="">
<link rel="apple-touch-icon" sizes="144x144" href="">
<link rel="apple-touch-icon" sizes="152x152" href="">
<link rel="apple-touch-icon" sizes="180x180" href="">
<link rel="icon" type="image/png" sizes="192x192" href="">
<link rel="icon" type="image/png" sizes="32x32" href="">
<link rel="icon" type="image/png" sizes="96x96" href="">
<link rel="icon" type="image/png" sizes="16x16" href="">
<link rel="manifest" href="">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="">
<meta name="theme-color" content="#ffffff">
Should this cause a web page delay ?
Thank you
I am using Flex-ratio property, but this property is not working. I am sharing my code.
According to this link, this property is working fine on Polymer 1.0.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-car/paper-card.html">
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-icon/iron-icon.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<style is="custom-style" include="iron-flex"></style>
</head>
<body>
<div class="horizontal layout">
<div class="flex-2"><p>flex three</p></div>
<div class="flex-1"><p>flex</p></div>
<div class="flex-2"><p>flex two</p></div>
</div>
</body>
</html>
I made this mistake myself.... need to import iron-flex-factors in <style include="iron-flex iron-flex-factors iron-flex-alignment">
I have set up my site with an off canvas menu when it goes mobile
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> Mobile Application</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" href="css/custom-mobile-portrait.css" />
<link rel="stylesheet" href="css/custom-mobile-landscape.css" />
<link rel="stylesheet" href="css/custom-xlarge.css" />
<link rel="stylesheet" href="css/custom-ipad.css" />
<link rel="stylesheet" href="css/custom-ipad-portrait.css" />
<link rel="stylesheet" href="css/font-sizes.css" />
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<script src="js/vendor/modernizr.js"></script>
<a name="head"></a>
</head>
<body>
<div class="off-canvas-wrap mobile-menu" data-offcanvas>
<div class="inner-wrap">
<nav class=" tab-bar hidden-for-large-up" data-topbar ">
<section class="left-small ">
<a class="left-off-canvas-toggle menu-icon " href="# "><span></span></a>
</section>
<section class="middle tab-bar-section ">
</section>
</nav>
<aside class="left-off-canvas-menu ">
<ul class="off-canvas-list ">
<li><label>Dehumaniser App</label></li>
<li><STRONG>TOP</STRONG></li>
<li><STRONG>APP OVERVIEW</STRONG></li>
<li><STRONG>HOW DOES IT WORK</STRONG></li>
<li><a href="#features " ><STRONG>FEATURES</STRONG></a></li>
<li><STRONG>GALLERY</STRONG></li>
</ul>
</aside>
<!-- <aside class="right-off-canvas-menu ">
<ul class="off-canvas-list ">
<li><label>Users</label></li>
<li>Hari Seldon</li>
<li>...</li>
</ul>
</aside> -->
<section class="main-section ">
i put my site content in here and then after my code finishes:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/vendor/fastclick.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" />
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<script src="js/myscript.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script src="js/myscript.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.single-item').slick();
});
</script>
<script type="text/javascript">
jQuery(document).foundation()
</script>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
<script>
jQuery(document).foundation();
jQuery('a.left-off-canvas-toggle').on('click', function() {
});
</script>
<div id="fixedbutton">
<a href="#head"><img src="img/upbutton.png">
</a>
</div>
</body>
</html>
I get the proper off canvas behavior (I get the three lines box . when I click the box it opens, and the off-canvas menu appears) but when I click a menu link even though the page scrolls smoothly down the off-canvas menu doesn't close. How can I fix this?
Try to add these lines to your script
$(document).foundation({
offcanvas : {
close_on_click : true
}
});
I am getting the above mentioned error. Below is my code snippet.
<link rel="stylesheet" href="/css/autoComplete/jquery-ui.css" />
<link rel="stylesheet" href="/css/core.css">
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="/css/datepicker.css">
<link rel="stylesheet" href="/css/customlook.css">
<link rel='stylesheet' href='/css/Header.css' />
<link rel='stylesheet' href='/css/Test.css' />
<script type="text/javascript" src="/js/autoComplete/jquery.min.js"></script>
<script type="text/javascript" src="/js/autoComplete/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/advanced_search_filters.js"></script>
<script type="text/javascript" src="/js/dateJs/jquery.js"></script>
<script type="text/javascript" src="/js/dateJs/core.js"></script>
<script type="text/javascript" src="/js/dateJs/datepicker.js"></script>
<script type="text/javascript" src="/js/user.js"></script>
<script type="text/javascript" src="/js/utils.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('testing');
$("#CARD_HOLDER_NAME").autocomplete({
source : '${pageContext. request. contextPath}/cardHolderName'
});
});
</script>
Please help me to resolve it.
You're missing/wrongly placed jQuery/ jQuery UI.js/ autocomplete.js files and the order should be
(1) jQuery.js
(2) jQuery UI.js
(3) autocomplete.js
Add the following before autocomplete
<script src="http://code.jquery.com/jquery-1.9.1.js />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" />