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" />
?
Related
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 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"/>
I'm migrating a beginning project from PrimeFaces 2.2.1 to 3.3.1, following the steps of MigrationGuide and using the 3.3 version's Users Guide.
I want a p:dialog in the top of the pages, containing the navigation.
This dialog must be shown when I click in a link, in the top of the pages.
Error description:
When I click on "I Want" link, nothing happens on page (the p:dialog doesn't shows up), and I get
this error on Firebug's console:
popupModalMenu is not defined
http://localhost:8080/{appname}/view/xhtml/principal.jsf
Line 1
The p:dialog (id="modalMenu") is loaded on page.
Here goes the structure:
Main page (/view/xhtml/principal.xhtml):
<?xml version="1.0" encoding="UTF-8"?>
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="base/master.xhtml">
<ui:define name="conteudo">
Title of Main Page
</ui:define>
</ui:composition>
</html>
Master (/view/xhtml/base/master.xhtml):
<html><!-- DOCTYPE GOES HERE -->
<ui:include src="head.xhtml" /> <!-- CONTAINS CSS, JAVASCRIPT STUFF -->
<h:body>
<f:view contentType="text/html" >
<div id="wrapper">
<!-- TOP BEGIN -->
<div id="header">
<div class="topo" id="topo">
<div id="menuTopo" class="menu left">
<a id="linkMenu" class="left" href="javascript:;" onclick="popupModalMenu.show();">
I want
<div class="iconeDoMenu"></div>
</a>
</div>
</div>
</div>
<!-- END TOP -->
<!-- CONTENT BEGIN -->
<div id="content">
<div id="conteudo">
<!-- SYSTEM MENU BEGIN -->
<ui:include src="../menu.xhtml" />
<!-- END SYSTEM MENU -->
</div>
</div>
<!-- END CONTENT -->
</div>
</f:view>
</h:body>
</html>
Head (/view/xhtml/base/head.xhtml):
<html><!-- DOCTYPE GOES HERE -->
<h:head>
<title>Title</title>
<meta http-equiv="keywords" content=" " />
<meta http-equiv="description" content=" " />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="../css/base/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/base/general.css" />
<link rel="stylesheet" type="text/css" href="../css/base/skin.css" />
<link rel="stylesheet" type="text/css" href="../css/primefaces/primefaces.css"/>
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="../css/base/generalIE7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="../css/base/generalIE8.css" />
<![endif]-->
<script type="text/javascript">
jQuery.noConflict();
</script>
<script language="javascript" type="text/javascript" src="#{facesContext.externalContext.request.contextPath}/view/js/currency_mask.js"></script>
<script language="javascript" type="text/javascript" src="#{facesContext.externalContext.request.contextPath}/view/js/date_mask.js"></script>
<script type="text/javascript" src="../js/ourjs.js"></script>
<!-- Internal screen's Css -->
<link href="../css/generalUtilScreen.css" media="all" rel="stylesheet" type="text/css"/>
<!-- menu's scripts and css -->
<link href="../css/base/menu.css" media="all" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../js/jquery.metadata.js"></script>
<script type="text/javascript" src="../js/jquery.mb.flipText.js"></script>
<script type="text/javascript" src="../js/mbExtruder.js"></script>
<script type="text/javascript">
$(function(){
$("#extruderLeft").buildMbExtruder({
position:"left",
width:300,
extruderOpacity:.8,
hidePanelsOnClose:true,
accordionPanels:true,
onExtOpen:function(){},
onExtContentLoad:function(){},
onExtClose:function(){}
});
});
</script><!-- menu's scripts and css end -->
<!-- Scripts inside menu -->
<h:outputStylesheet library="primefaces/jquery/ui" name="jquery-ui.css"/>
<h:outputScript library="primefaces/jquery/ui" name="jquery-ui.js" target="head"/>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
});
</script><!-- end Scripts inside menu -->
<script type="text/javascript" src="../js/verticaltabs.pack.js"></script> <!--http://dean.edwards.name/packer/-->
<link rel="stylesheet" href="../css/base/verticaltabs.css" />
<script type="text/javascript" src="../js/provider.js"></script>
<script type="text/javascript">
$(document).ready(function(){fornecedor.verticalTabs();});
</script>
<!-- Internal screen's Css -->
<link href="../css/provider.css" rel="stylesheet" type="text/css"></link>
<!-- END PROVIDER -->
</h:head>
</html>
Menu (/view/xhtml/menu.xhtml):
<html><!-- DOCTYPE GOES HERE -->
<p:dialog id="modalMenu" widgetVar="popupModalMenu"
draggable="false" resizable="false" modal="true"
width="940" height="580"
showEffect="fade" hideEffect ="fade"
position="null" closable="false" dynamic="false"
minimizable="false" maximizable="false">
<h:form id="formMenu">
<div id="nav">
<div id="menu">
<p:commandButton id="btnCloseModalMenu" styleClass="btcloseMenu"
title="Click here to close" onclick="popupModalMenu.hide();">
</p:commandButton>
<!-- Menu's content goes this way: -->
<div id="divN">
<!-- Group of content -->
<h3><h:outputLabel>Group N</h:outputLabel></h3>
<div class="linkN">
<!-- Links to pages -->
<ul>
<li><a id="menuN" href="urlN">Title N</a></li>
</ul>
</div>
</div>
</div>
</div>
</h:form>
</p:dialog>
</html>
I just removed some code from Head. Seems that it is a conflict with JQuery's version. Thanks to a coworker.
So the code went like this:
Head (/view/xhtml/base/head.xhtml):
<html><!-- DOCTYPE GOES HERE -->
<h:head>
<title>Title</title>
<meta http-equiv="keywords" content=" " />
<meta http-equiv="description" content=" " />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="../css/base/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/base/general.css" />
<link rel="stylesheet" type="text/css" href="../css/base/skin.css" />
<link rel="stylesheet" type="text/css" href="../css/primefaces/primefaces.css"/>
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="../css/base/generalIE7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="../css/base/generalIE8.css" />
<![endif]-->
<!-- REMOVED
<script type="text/javascript">
jQuery.noConflict();
</script>
-->
<script language="javascript" type="text/javascript" src="#{facesContext.externalContext.request.contextPath}/view/js/currency_mask.js"></script>
<script language="javascript" type="text/javascript" src="#{facesContext.externalContext.request.contextPath}/view/js/date_mask.js"></script>
<script type="text/javascript" src="../js/ourjs.js"></script>
<!-- Internal screen's Css -->
<link href="../css/generalUtilScreen.css" media="all" rel="stylesheet" type="text/css"/>
<!-- menu's scripts and css -->
<link href="../css/base/menu.css" media="all" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../js/jquery.metadata.js"></script>
<script type="text/javascript" src="../js/jquery.mb.flipText.js"></script>
<script type="text/javascript" src="../js/mbExtruder.js"></script>
<script type="text/javascript">
$(function(){
$("#extruderLeft").buildMbExtruder({
position:"left",
width:300,
extruderOpacity:.8,
hidePanelsOnClose:true,
accordionPanels:true,
onExtOpen:function(){},
onExtContentLoad:function(){},
onExtClose:function(){}
});
});
</script><!-- menu's scripts and css end -->
<!-- Scripts inside menu -->
<h:outputStylesheet library="primefaces/jquery/ui" name="jquery-ui.css"/>
<h:outputScript library="primefaces/jquery/ui" name="jquery-ui.js" target="head"/>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
});
</script><!-- end Scripts inside menu -->
<script type="text/javascript" src="../js/verticaltabs.pack.js"></script> <!--http://dean.edwards.name/packer/-->
<link rel="stylesheet" href="../css/base/verticaltabs.css" />
<script type="text/javascript" src="../js/provider.js"></script>
<script type="text/javascript">
$(document).ready(function(){fornecedor.verticalTabs();});
</script>
<!-- Internal screen's Css -->
<link href="../css/provider.css" rel="stylesheet" type="text/css"></link>
<!-- END PROVIDER -->
</h:head>
</html>
Place <h:head/> in head.xhtml
You are missing a </div> tag after <!-- END SYSTEM MENU --> in the master.xhtml file