Everytime i tried to use for loop in the PyScript tag, getting an invalid Syntax error :/.What i want to do is (for example):
Python:
attr1=['A','B','C']
for i in attr1:
pyscript.write('output1',i)
HTML:
<div id='output1'></div>
You can just write to the document with print, it doesn't leave you with much choice about the tags for now though. For example,
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-script>
l = ["A", "B", "C"]
for el in l:
print(el)
</py-script>
</body>
</html>
Will show
A
B
C
in the browser.
and it actually generates the following:
<html><head>
<title></title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"></script></head>
<body>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css">
<script defer="" src="https://pyscript.net/alpha/pyscript.js"></script>
<py-script id="py-2536bda2-b41c-7165-4257-38c5d650d507"><div class="parentBox flex flex-col mx-8">
<div id="py-2536bda2-b41c-7165-4257-38c5d650d507"></div>
</div>
<div id="py-2536bda2-b41c-7165-4257-38c5d650d507-2">A</div><div id="py-2536bda2-b41c-7165-4257-38c5d650d507-3">
</div><div id="py-2536bda2-b41c-7165-4257-38c5d650d507-4">B</div><div id="py-2536bda2-b41c-7165-4257-38c5d650d507-5">
</div><div id="py-2536bda2-b41c-7165-4257-38c5d650d507-6">C</div><div id="py-2536bda2-b41c-7165-4257-38c5d650d507-7">
</div></py-script>
<py-config></py-config></body></html>
Related
I'm new to flexbox, and I've tried applying align-center to the row class but, the h1 will not center. Could someone give me a hand with this, and explain to me why the align center is not working? Here is a code pen Codepen
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class='header-section'>
<div class='title-bar' data-responsive-toggle='menu' data-hide-for='medium'>
<button class='menu-icon' type='button' data-toggle></button>
<div class='title-bar-title'>Menu</div>
</div>
<div class='top-bar' id='menu'>
<div class='top-bar-left'>
<ul class='dropdown vertical medium-horizontal menu' data-dropdown-menu>
<li class='menu-text'>The American Dream</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class='main-content'>
<div class='row'>
<div class='small-12 column'>
<h1>And...Then, ZANG!</h1>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
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'm following this tutorial: http://www.thymeleaf.org/doc/layouts.html (got to Thymeleaf Layout Dialect section).
In there you can find an example:
<!DOCTYPE html>
<html>
<head>
<!--/* Each token will be replaced by their respective titles in the resulting page. */-->
<title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">Task List</title>
...
</head>
<body>
<!--/* Standard layout can be mixed with Layout Dialect */-->
<div th:replace="fragments/header :: header">
...
</div>
<div class="container">
<div layout:fragment="content">
...
</div>
<div th:replace="fragments/footer :: footer">© 2014 The Static Templates</div>
</div>
</body>
</html>
Footer and header are replaced by th:replace tag in above example, while <head> has <title> tag in layout file.
Basically, I want to replace whole <head> tag with th:replace.
Therefore, I have:
My layout file:
<!DOCTYPE html>
<html>
<head th:replace="/html/components/head :: head">
</head>
<body>
<div layout:fragment="content">
</div>
...
<div th:replace="/html/components/footer :: footer" />
</body>
<html>
My content file:
<!DOCTYPE html>
<html layout:decorator="/html/layouts/layout">
<head>
<title>My content title</title>
</head>
<body>
<div layout:fragment="content">
...
</div>
</body>
</html>
And finally my /html/components/head.htm file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:fragment="head">
<meta charset="utf-8" />
<title layout:title-pattern="$CONTENT_TITLE">Layout Title should be replaced by Content Title!</title>
...
</head>
<body>
</body>
</html>
Content is alright. Footer and head are included (replaced) from files as expected but page title is blank!
I get:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
...
What's wrong?
Finally, I've found a way to achieve what I wanted.
In layout file <title> tag must stay. All other tags I grouped with <object> tag and annotated it as follows:
<head>
<title layout:title-pattern="$CONTENT_TITLE">Layout Title will be replaced by Page Title!</title>
<object th:include="/html/components/head :: head" th:remove="tag" />
</head>
In my html/components/head.htm file I had to remove <title> tag so it won't be duplicated after include.
<head th:fragment="head">
<meta charset="utf-8" />
<!-- NO TITLE TAG HERE -->
...
</head>
This way head fragment is included in <object> tag and thanks to th:remove="tag" <object> tag gets removed and my final HTML output is:
<head>
<title>My content title</title>
<meta charset="utf-8" />
<!-- NO TITLE TAG HERE -->
...
</head>
Obviously, I removed NO TITLE TAG HERE message too, once I got it working.
I think I found a slightly less verbose way to for using th:replace and th:fragment together, e.g. to include common <head> metadata and static resource includes in your pages.
Put the th:remove="tag" in the fragment definition, so you don't have to repeat the th:remove="tag" everytime including it.
fragment_head.html
<thymeleaf xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
th:fragment="head" th:remove="tag">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" th:href="#{/css/vendor/bootstrap.min.css}"/>
</thymeleaf>
mypage.html
<head>
<thymeleaf th:replace="fragment_head :: head" />
</head>
You can replace whole head tag.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="pl" th:replace="fragments/head :: head">
</head>
<body>
...
</body>
</html>
resources/templates/fragments/head.html:
<head lang="pl">
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.5/css/bootstrap.min.css"
th:href="#{/webjars/bootstrap/3.3.5/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
<script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.min.js"
th:src="#{/webjars/jquery/2.1.4/jquery.min.js}"></script>
<link href="../static/css/mycss.css"
th:href="#{css/mycss.css}" rel="stylesheet" media="screen"/>
</head>
I have two layouts and both are working in index page, but when I give to another the second one doesn't work. I don't know what the problem is, I'm new to tapestry.
my code is
<html t:type="layout1" title="accountInfo VideoClub"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"
xmlns:p="tapestry:parameter">
<head>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;
user-scalable=0;" name="viewport" />
<title>Video Club</title>
<link href="./layout/layout.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="wrap">
<div id="scroll">
<ul id="thelist">
<div style="text-align:center;">
<p><h1>Account info</h1>
<t:actionlink t:id="getStatus"> <img src="../layout/images
/sub.png"/>
</t:actionlink><br/><br/>
<t:actionlink t:id="getStatuss"> <img src="../layout/images
/cancel_sub.png"/> </t:actionlink><br/></p>
</div>
</ul>
</div>
</div>
</body>
</html>
Without the entire code (tml and java) we can't help you much.
Layout components in tapestry are plain components, which render their body with some content around it.
Please paste your code here.