I have a jsfiddle here - http://jsfiddle.net/drRG9/
and live demo here - http://www.ttmt.org.uk/forum/clone/
It's two div's (yellow) with the same class name 'article'.
Each yellow div contains a div with class name 'images' (red border).
First yellow div contains a list of images I would like to clone to IT'S images div
So the images should be cloned to the first red border div and not the bottom one.
So how do I clone the images just to the one div with a class name.
I hope that makes sense.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Title of the document</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
height:100%;
background:#ddd;
}
#wrapper{
min-height:100%;
max-width:800px;
margin:0 auto;
background:#fff;
margin-top:-20px;
padding-top:40px;
}
.article{
background:yellow;
margin:20px;
}
ul{
list-style:none;
margin:10px;
}
ul li{
display:inline-block;
}
.images{
min-height:20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="article">
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<ul>
<li><img src="images/red01.jpg" /></li>
<li><img src="images/red02.jpg" /></li>
<li><img src="images/red03.jpg" /></li>
<li><img src="images/red04.jpg" /></li>
</ul>
</div><!-- .text -->
<div class="images">
</div><!-- .images -->
</div><!-- .article -->
<div class="article">
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div><!-- .text -->
<div class="images">
</div><!-- .images -->
</div><!-- .article -->
</div>
<script>
$(function(){
$('.text ul').clone().appendTo('.article .images', this);
})
</script>
</body>
</html>
Try this:
$('.text ul').clone().appendTo('.article:first .images', this);
This will only clone into the first .article.
As your comment, you can try this:
var closest = $('.text ul').closest('.article');
$('.text ul').clone().appendTo(closest.find('.images'));
You can see .closest() for more information.
update
Since you have more than one <ul>, you need wrap this code in .each().
Try this code:
$('.text ul').each(function(){
var closest = $(this).closest('.article');
$(this).clone().appendTo(closest.find('.images'));
});
Related
I have an issue with iText. Actually it's multiple issues, but the first and most pressing is that it doesn't render all my html. It stops after 1 page.
I've tried the online test that IText has https://itextpdf.com/demos/convert-html-css-to-pdf-free-online
It shows the same behaviour, so i suspect that there is something with the HTML i generate that doesn't work with iText.
Furthermore, it doesn't appear to respect the area which it's allowed to render in:
It writes HTML down in my footer, which it shouldn't do.
This has all worked with a different html layout using a lot of tables, but we are trying to switch to flexbox.
We have a lot of code that sets up footer and header, but since the Itext demo itself fails with my HTML, i suspect the error is in the HTML and not our other code.
I hope some wizard in iText is able to point out what could be cause this to happen.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#font-face {
font-family: Noto;
src: url("fonts/noto/NotoSans-Regular.ttf");
}
.testDesign {
font-family: Noto;
font-size: 12px;
display: flex;
flex-direction: column;
flex: 1 0 auto;
color: #000000;
}
.testDesign :where(h1,
h2,
h3,
h4,
h5,
h6) {
font-family: Noto;
margin-bottom: 0;
}
.testDesign h1,
.testDesign h2,
.testDesign h3,
.testDesign h4,
.testDesign h5,
.testDesign h6,
.testDesign .h1,
.testDesign .h2,
.testDesign .h3,
.testDesign .h4,
.testDesign .h5,
.testDesign .h6 {
font-weight: 500;
}
.testDesign h1,
.testDesign h2,
.testDesign h3,
.testDesign h4,
.testDesign h5,
.testDesign h6 {
margin-top: 0;
margin-bottom: 0;
}
.testDesign :root {
accent-color: #272F96;
}
.testDesign body {
padding-bottom: 0;
--general-layout-separate-number-column-width: 50px;
}
.testDesign .test-disabled {
opacity: 0.4;
pointer-events: none;
}
.testDesign .form-check-inline .form-check-input {
margin-right: 0;
}
.testDesign .form-check-input~.form-check-label {
padding-left: .3125rem;
}
.testDesign .preview-logo {
font-family: Noto;
font-size: 24px !important;
text-align: center !important;
letter-spacing: -2px;
}
.testDesign .test-heading {
font-family: Noto;
font-size: 36px !important;
text-align: center !important;
color: #e51010 !important;
font-weight: bold !important;
font-style: italic !important;
text-transform: none !important;
text-decoration: none !important;
background-color: #a2abeb !important;
padding-left: 2px !important;
padding-top: 27px !important;
padding-bottom: 27px !important;
margin-top: 29px !important;
margin-bottom: 37px !important;
}
.testDesign .product-heading {
font-family: Noto;
font-size: 28px !important;
text-align: center !important;
color: #000000 !important;
font-weight: bold !important;
font-style: italic !important;
text-transform: none !important;
text-decoration: underline !important;
padding-left: 0px !important;
margin-top: 0px !important;
margin-bottom: 41px !important;
}
.testDesign .section-heading {
font-family: Noto;
font-size: 15px !important;
text-align: center !important;
color: #000000 !important;
font-weight: normal !important;
font-style: italic !important;
text-transform: uppercase !important;
text-decoration: none !important;
background-color: #a2abeb !important;
padding-top: 24px !important;
padding-right: 12px !important;
padding-bottom: 24px !important;
padding-left: 36px !important;
margin-top: 48px !important;
margin-bottom: 36px !important;
border-left-width: 6px;
border-left-color: #e51010;
border-left-style: solid;
border-right-width: 6px;
border-right-color: #e51010;
border-right-style: solid;
border-top-width: 6px;
border-top-color: #e51010;
border-top-style: solid;
border-bottom-width: 6px;
border-bottom-color: #e51010;
border-bottom-style: solid;
}
.testDesign .section-heading::after {
content: "";
}
.testDesign .logo-width {
width: 23%;
}
.testDesign .lvl-1 {
font-family: Noto;
padding-left: 0px;
margin-bottom: 12px;
line-height: 1.2;
}
.general-layout--separate-number-column .testDesign .lvl-1 .lvl-1-body {
padding-left: 58px;
}
.testDesign .lvl-1 .lvl-1-body {
padding-left: 8px;
}
.testDesign .lvl-2 {
font-family: Noto;
padding-left: 8px;
margin-bottom: 12px;
line-height: 1.2;
}
.general-layout--separate-number-column .testDesign .lvl-2 {
padding-left: 58px;
}
.testDesign .lvl-2 .lvl-2-body {
padding-left: 16px;
}
.general-layout--columns .testDesign .lvl-2 .lvl-2-body {
padding-left: 0;
}
.testDesign .lvl-3 {
font-family: Noto;
padding-left: 24px;
margin-bottom: 12px;
line-height: 1.2;
}
.general-layout--separate-number-column .testDesign .lvl-3 {
padding-left: 74px;
}
.testDesign .lvl-3 .lvl-3-body {
padding-left: 32px;
}
.general-layout--columns .testDesign .lvl-3 .lvl-3-body {
padding-left: 0;
}
.testDesign .lvl-4 {
font-family: Noto;
padding-left: 56px;
margin-bottom: 12px;
line-height: 1.2;
}
.general-layout--separate-number-column .testDesign .lvl-4 {
padding-left: 106px;
}
.general-layout--columns .testDesign .lvl-4 .lvl-4-body {
padding-left: 0;
}
.testDesign .lvl-1-heading {
font-size: 15px !important;
color: #1111aa !important;
font-weight: bold !important;
font-style: italic !important;
text-transform: none;
text-decoration: underline !important;
}
.testDesign .lvl-1-heading::after {
content: "";
}
.testDesign .lvl-2-heading {
/* font-size: 13px !important; */
font-size: 12px !important;
color: #1111aa !important;
font-weight: normal !important;
font-style: normal !important;
text-transform: none;
text-decoration: none !important;
}
.testDesign .lvl-2-heading::after {
content: "";
}
.testDesign .lvl-3-heading {
/* font-size: 13px !important; */
font-size: 12px !important;
color: #1111aa !important;
font-weight: normal !important;
font-style: normal !important;
text-transform: none;
text-decoration: none !important;
}
.testDesign .lvl-3-heading::after {
content: "";
}
.testDesign .lvl-4-heading {
/* font-size: 13px !important; */
font-size: 12px !important;
color: #1111aa !important;
font-weight: normal !important;
font-style: normal !important;
text-transform: none;
text-decoration: none !important;
}
.testDesign .lvl-4-heading::after {
content: "";
}
.testDesign table {
border-collapse: collapse;
}
.testDesign table th,
.testDesign table td {
font-size: 90%;
vertical-align: top;
padding: 3px 2px;
border-width: 1px;
border-style: solid;
border-top-color: #999999;
border-bottom-color: #999999;
border-left-color: transparent;
border-right-color: transparent;
}
.testDesign table th {
color: #000000;
background-color: transparent;
}
.testDesign .a4-page-container {
width: 52rem;
height: 7000px;
overflow-y: hidden;
position: relative;
}
.testDesign .a4-page-container.a4-landscape {
width: 73.46rem;
height: 52rem;
}
.testDesign .a4-page-footer {
position: absolute;
height: 4rem;
border-top: 1px solid #D6DCE0;
right: 3rem;
bottom: 0;
left: 3rem;
background-color: #fff;
opacity: .8;
}
.testDesign .letter-spacing-1 {
letter-spacing: 1px;
}
.testDesign .almego-test-designer-properties-grid {
display: grid;
grid-template-columns: 6rem 1fr;
}
.testDesign .preview-highlight-selected-editor {
position: relative;
}
:not(.previewAllContent) .testDesign .preview-highlight-selected-editor::before {
content: "";
position: absolute;
width: 2px;
left: -24px;
top: -2px;
bottom: -2px;
background: #9397CA;
}
.previewAllContent .testDesign .preview-highlight-selected-editor::before {
display: none;
}
.testDesign .preview-hover-highlight-selectable-editor:not(.preview-highlight-selected-editor) {
opacity: .35;
}
.previewAllContent .preview-hover-highlight-selectable-editor {
opacity: 1 !important;
}
.testDesign .preview-hover-highlight-selectable-editor:hover {
outline: 1px dashed #D4D5EA;
outline-offset: 5px;
opacity: 1;
}
#keyframes backgroundFadeOut {
0% {
background: #9397CA;
}
100% {
background: transparent;
}
}
#keyframes navBackgroundColorFade {
0% {
background-color: #D1F2FA;
}
100% {
background-color: transparent;
}
}
.testDesign .highlightNav {
animation: navBackgroundColorFade 5s ease;
}
.testDesign .color-preview {
height: 1rem;
width: 1rem;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
.testDesign .general-layout--separate-number-column .lvl-1-heading {
display: flex;
flex-direction: row;
}
.testDesign .general-layout--separate-number-column .lvl-1-number {
width: 50px;
}
.testDesign .general-layout--columns .lvl-container:not(.lvl-1) {
display: flex;
width: 100%;
flex-direction: row;
}
.testDesign .general-layout--columns .lvl-heading:not(.lvl-1-heading) {
width: 25%;
}
.testDesign .general-layout--columns .lvl-body:not(.lvl-1-body) {
padding-left: 5px;
}
.testDesign .layout-grid {
grid-template-columns: 26rem 1fr 1fr 1fr 1fr 1fr;
}
.testDesign .grid-template-maxc-1fr {
grid-template-rows: max-content 1fr;
}
.testDesign .box-illustration {
height: 1rem;
width: 1rem;
border-width: 1px;
border-style: solid;
border-color: #c3c3c3;
position: relative;
}
.testDesign .box-illustration.top {
border-top-color: #272F96;
border-top-width: 2px;
}
.testDesign .box-illustration.right {
border-right-color: #272F96;
border-right-width: 2px;
}
.testDesign .box-illustration.bottom {
border-bottom-color: #272F96;
border-bottom-width: 2px;
}
.testDesign .box-illustration.left {
border-left-color: #272F96;
border-left-width: 2px;
}
.testDesign .box-illustration.center-horizontal::before {
content: "";
position: absolute;
top: .35rem;
left: 0;
right: 0;
height: 2px;
background-color: #272F96;
}
.testDesign .chevron-down {
display: inline-block;
transform: rotate(90deg);
font-size: 1rem;
line-height: 1px;
}
.testDesign .active-nav-bg {
background-color: #e9ecef !important;
}
</style>
</head>
<body>
<div id="document">
<?xml version="1.0" encoding="utf-16"?>
<div class="testDesign" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:msxsl="urn:schemas-microsoft-com:xslt">
<div class="general-layout--columns general-layout--separate-number-column">
<h2 class="test-heading">TEST BIG HEADER</h2>
<h1 class="product-heading">Test sub heading</h1>
<section class="section">
<h2 class="section-heading">Section 1: Test section heading</h2>
<div class="section-body">
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading">
<span class="lvl-1-number pr-1g">1.1 </span>
<span class="lvl-1-title">Testidentifikation</span>
</h3>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading">
<span class="lvl-2-title">Testname</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>test test test</div>
</div>
</div>
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">1.2 </span><span class="lvl-1-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span>
</h3>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>No special</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test sub level 2 header</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>No special</div>
</div>
</div>
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">1.3 </span><span class="lvl-1-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</span>
</h3>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">test and test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div data-paragraphno=""><b>Test</b></div>
<div>Test</div>
<div>4000<span style="padding-left: 0.4em;">Test</span></div>
<div>Test</div>
<div>12 34 56 78</div>
<div>test</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Test</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Test</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>24-06-2022</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">test Version</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>1.0</div>
</div>
</div>
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">1.4 </span><span class="lvl-1-title">Test</span></h3>
<div class="lvl-1-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
</div>
</section>
<section class="section">
<h2 class="section-heading">Section 2: Test section 2 header</h2>
<div class="section-body">
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">2.1 </span><span class="lvl-1-title">Test sub header</span>
</h3>
<div class="lvl-1-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
<div class="lvl-1 lvl-container">
<div class="lvl-1-body lvl-body" />
</div>
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">2.2 </span><span class="lvl-1-title">Test</span></h3>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">""</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Warning</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
</div>
<div class="lvl-3 lvl-container">
<h3 class="lvl-3-heading lvl-heading"><span class="lvl-3-title">Test</span>
</h3>
<div class="lvl-3-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
<div class="lvl-3 lvl-container">
<h3 class="lvl-3-heading lvl-heading"><span class="lvl-3-title">Test</span>
</h3>
<div class="lvl-3-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
<div class="lvl-3 lvl-container">
<h3 class="lvl-3-heading lvl-heading"><span class="lvl-3-title">Test</span>
</h3>
<div class="lvl-3-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
<div class="lvl-3 lvl-container">
<h3 class="lvl-3-heading lvl-heading"><span class="lvl-3-title">Test</span>
</h3>
<div class="lvl-3-body lvl-body">
<div>-</div>
</div>
</div>
<div class="lvl-3 lvl-container">
<h3 class="lvl-3-heading lvl-heading"><span class="lvl-3-title">Test</span>
</h3>
<div class="lvl-3-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Test</div>
</div>
</div>
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">2.3 </span><span class="lvl-1-title">Test</span></h3>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Test</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>
</div>
</div>
</div>
</section>
<section class="section">
<h2 class="section-heading">Section 3: testing heading 3</h2>
<div class="section-body">
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">3.2 </span><span class="lvl-1-title">Test</span></h3>
</div>
<div class="pl-4 pb-2">
<table border="1">
<tr>
<th style="width:23%">Test</th>
<th style="width:27%">Test</th>
<th style="width:14%">test</th>
<th style="width:30%">Test</th>
<th style="width:6%">Test</th>
</tr>
<tr>
<td>Test</td>
<td>
<table>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
</table>
</td>
<td>Test</td>
<td>Test<br/></td>
<td/>
</tr>
</table>
</div>
<div class="lvl-1 lvl-container">
<div class="lvl-1-body lvl-body">
<div>-----</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>
</div>
</div>
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-title">Test</span>
</h3>
<div class="lvl-1-body lvl-body">
<div>Test</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
I started learning HTML and CSS approximately two months ago. I'm struggling a little when it comes to adding a 'Comment' section in my contact form.
I've not succeeded to add a larger text box for users to enter their message. Why can't I make my message textarea bigger?
Here's the code:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Netflix Title Recommendations</title>
<style>
header {
text-align: center;
margin-bottom: 40px;
text-shadow: 16px 8px 16px grey;
color: #C0392B;
}
.headers1 {
font-size: 48px;
font-family: garamond, serif;
}
.headers2 {
font-size: 24px;
font-family: garamond, serif;
}
.container {
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto;
}
nav {
text-align: center;
padding: 0px 0px 15px 0px;
}
ul {
list-style-type: none;
margin: auto;
padding: 0;
width: 35%;
height: 100%;
}
li {
padding: 5px;
display: block;
}
li a {
color: #000;
text-decoration: none;
font-family: garamond, serif;
font-size: 16px;
font-weight: bold;
}
.button1, .button2, .button3, .button4, .button5, .button6 {
background-color: #4CAF50;
box-shadow: 5px 10px #f1f1f1;
-webkit-border-radius: 15px
}
.button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover, .button6:hover {
background-color: white;
}
.main {
text-align: justify;
font-family: garamond, serif;
font-size: 16px;
}
footer {
text-align: center;
font-size: 14px;
font-family: garamond, serif;
background-color: #E5E7E9;
padding: 10px;
}
</style>
</head>
<body class="container">
<header>
<h1 class="headers1">Netflix UK Title Recommendations</h1>
<h2 class="headers2">Films & TV Series For You To Watch on Netflix UK</h2>
</header>
<nav>
<ul>
<button class="button1"><li>Home</li></button>
<button class="button2"><li>About</li></button>
<button class="button3"><li>Films</li></button>
<button class="button4"><li>TV</li></button>
<button class="button5"><li>Contact</li></button>
<button class="button6"><li>Disclaimer</li></button>
</ul>
</nav>
<div class="main">
<p>Welcome to Netflix UK Title Recommendations! If this is your first visit, please take the time to
learn more about us in the 'About' section.</p>
<p>We update this web site every week, so be sure to check back with us regularly to learn about
some of the greatest new content you will find on Netflix UK.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac ultrices nunc.
Praesent tincidunt dui ante, id commodo leo volutpat sit amet. Cras porttitor gravida facilisis.
Curabitur vel placerat sapien. Sed tempor augue ac ullamcorper tincidunt. Etiam vitae elementum lorem.
Aliquam sodales ipsum ac elementum venenatis.</p>
<p>Donec turpis arcu, scelerisque non facilisis a, volutpat id erat.
Vestibulum ultricies sagittis velit at suscipit. Fusce viverra urna sit amet ipsum volutpat aliquet.
Donec posuere, mi eget luctus eleifend, enim neque vehicula nunc, et mollis leo est non nibh.
Nam in egestas metus, ac mattis tortor. Sed vitae dolor faucibus neque gravida ullamcorper.
Nam eu rutrum lacus, a hendrerit leo.</p>
</div>
<!-- Contact form starts here -->
<form class="contactform">
<fieldset>
<legend>Personal Information:</legend>
<h3>Contact Me</h3>
<label>First Name:</label><br />
<input name="firstname" type="text"><br />
<label>Last Name:</label><br />
<input name="lastname" type="text"><br />
<label>Email:</label><br />
<input name="email" type="email"><br />
<label>Gender:</label><br />
<input type="radio" name="gender" value="male" checked> Male<br />
<input type="radio" name="gender" value="female"> Female<br />
<label for="msg">Message</label>
<textarea="message" name="comment">Enter your message here</textarea><br />
<input type="submit" value="Send" class="submit">
</fieldset>
</form>
<!-- Contact form ends here -->
<footer>Mathew J. M. | 2018 ™</footer>
</body>
</html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Netflix Title Recommendations</title>
<style>
header {
text-align: center;
margin-bottom: 40px;
text-shadow: 16px 8px 16px grey;
color: #C0392B;
}
.headers1 {
font-size: 48px;
font-family: garamond, serif;
}
.headers2 {
font-size: 24px;
font-family: garamond, serif;
}
.container {
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto;
}
nav {
text-align: center;
padding: 0px 0px 15px 0px;
}
ul {
list-style-type: none;
margin: auto;
padding: 0;
width: 35%;
height: 100%;
}
li {
padding: 5px;
display: block;
}
li a {
color: #000;
text-decoration: none;
font-family: garamond, serif;
font-size: 16px;
font-weight: bold;
}
.button1, .button2, .button3, .button4, .button5, .button6 {
background-color: #4CAF50;
box-shadow: 5px 10px #f1f1f1;
-webkit-border-radius: 15px
}
.button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover, .button6:hover {
background-color: white;
}
.main {
text-align: justify;
font-family: garamond, serif;
font-size: 16px;
}
footer {
text-align: center;
font-size: 14px;
font-family: garamond, serif;
background-color: #E5E7E9;
padding: 10px;
}
</style>
</head>
<body class="container">
<header>
<h1 class="headers1">Netflix UK Title Recommendations</h1>
<h2 class="headers2">Films & TV Series For You To Watch on Netflix UK</h2>
</header>
<nav>
<ul>
<button class="button1"><li>Home</li></button>
<button class="button2"><li>About</li></button>
<button class="button3"><li>Films</li></button>
<button class="button4"><li>TV</li></button>
<button class="button5"><li>Contact</li></button>
<button class="button6"><li>Disclaimer</li></button>
</ul>
</nav>
<div class="main">
<p>Welcome to Netflix UK Title Recommendations! If this is your first visit, please take the time to
learn more about us in the 'About' section.</p>
<p>We update this web site every week, so be sure to check back with us regularly to learn about
some of the greatest new content you will find on Netflix UK.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac ultrices nunc.
Praesent tincidunt dui ante, id commodo leo volutpat sit amet. Cras porttitor gravida facilisis.
Curabitur vel placerat sapien. Sed tempor augue ac ullamcorper tincidunt. Etiam vitae elementum lorem.
Aliquam sodales ipsum ac elementum venenatis.</p>
<p>Donec turpis arcu, scelerisque non facilisis a, volutpat id erat.
Vestibulum ultricies sagittis velit at suscipit. Fusce viverra urna sit amet ipsum volutpat aliquet.
Donec posuere, mi eget luctus eleifend, enim neque vehicula nunc, et mollis leo est non nibh.
Nam in egestas metus, ac mattis tortor. Sed vitae dolor faucibus neque gravida ullamcorper.
Nam eu rutrum lacus, a hendrerit leo.</p>
</div>
<!-- Contact form starts here -->
<form class="contactform">
<fieldset>
<legend>Personal Information:</legend>
<h3>Contact Me</h3>
<label>First Name:</label><br />
<input name="firstname" type="text"><br />
<label>Last Name:</label><br />
<input name="lastname" type="text"><br />
<label>Email:</label><br />
<input name="email" type="email"><br />
<label>Gender:</label><br />
<input type="radio" name="gender" value="male" checked> Male<br />
<input type="radio" name="gender" value="female"> Female<br />
<label for="msg">Message</label>
<textarea="message" name="comment">Enter your message here</textarea><br />
<input type="submit" value="Send" class="submit">
</fieldset>
</form>
<!-- Contact form ends here -->
<footer>Mathew J. M. | 2018 ™</footer>
</body>
</html>
It's a simple typo, you've wrote
<textarea="message" name="comment"></textarea>
when it's actually:
<textarea class="message" name="comment"></textarea>
Then you should be able to fix your css:
.message{
height: 500px;
width: 600px;
}
I have the following item on a webpage which I'm defining as a Scheme.org Article. The details have been obsfucated, but all of the genuine URLs work.
<div itemscope itemtype="http://schema.org/Article" class="large-6 columns related blog">
<meta itemprop="publisher" content="My Company" />
<meta itemprop="dateModified" content="February 4, 2016" />
<meta itemprop="mainEntityOfPage" content="http://example.co.uk/main-page/" />
<div>
<h2 itemprop="headline" class="stretch_this"><a itemprop="url" href='http://example.co.uk/main-page/'>Article title</a></h2>
<p>Posted by <span itemprop="author">A N Other</span> on <span itemprop="datePublished">February 4, 2016</span></p>
<img itemprop="image" class="post_preview" alt='Article title' class="hide-for-small" src="http://example.co.uk/wp-content/uploads/2016/02/example-image.jpg" />
<p itemprop="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum…</p>
</div>
<a itemprop="url" href="http://example.co.uk/main-page/" class="button readmore">Read More<span class="icon icon-arrow"></span></a>
</div>
When I run this through Google's Structured Data Testing Tool, it gives the following error on image:
The attribute itemtype has an invalid value.
But according to schema.org, image should accept an image object or a URL, and has in other instances, e.g. when defining a Person.
What's up with this?
While a URL is valid according to schema.org, Google will only accept an image object, and the tool you're using to validate your markup is produced by Google.
Try this instead:
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="image" class="post_preview" alt="Article title" class="hide-for-small" src="http://example.co.uk/wp-content/uploads/2016/02/example-image.jpg" />
<meta itemprop="url" content="http://example.co.uk/wp-content/uploads/2016/02/example-image.jpg">
<meta itemprop="width" content="800">
<meta itemprop="height" content="800">
</div>
Don't forget to specify you own width and height. You need to have the full specifications. Going according schema.org while ignoring googles directives on the subject will make mistakes like that happen. Plus they may change those whenever they want.
It looks like you will have to provide them with more information on your snippet than you used to before.
For more you can always check https://developers.google.com/structured-data/rich-snippets/articles?hl=en
And at the same time i can find a mistake on you the publisher tag.
Try changing the meta tag for the publisher to this :
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img src="http://example.co.uk/logo.jpg"/>
<meta itemprop="url" content="http://example.co.uk/logo.jpg">
<meta itemprop="width" content="600">
<meta itemprop="height" content="60">
</div>
<meta itemprop="name" content="Company">
</div>
So at the end what you would like to have as a final result is the microdata below:
<div itemscope itemtype="http://schema.org/Article" class="large-6 columns related blog">
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img src="http://example.co.uk/logo.jpg"/>
<meta itemprop="url" content="http://example.co.uk/logo.jpg">
<meta itemprop="width" content="600">
<meta itemprop="height" content="60">
</div>
<meta itemprop="name" content="Company">
</div>
<meta itemprop="dateModified" content="February 4, 2016" />
<meta itemprop="mainEntityOfPage" content="http://example.co.uk/main-page/" />
<h2 itemprop="headline" class="stretch_this"><a itemprop="url" href='http://example.co.uk/main-page/'>Article title</a></h2>
<p>Posted by <span itemprop="author">A N Other</span> on <span itemprop="datePublished">February 4, 2016</span></p>
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="image" class="post_preview" alt="Article title" class="hide-for-small" src="http://example.co.uk/wp-content/uploads/2016/02/example-image.jpg" />
<meta itemprop="url" content="http://example.co.uk/wp-content/uploads/2016/02/example-image.jpg">
<meta itemprop="width" content="800">
<meta itemprop="height" content="800">
</div>
<p itemprop="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum…</p>
<a itemprop="url" href="http://example.co.uk/main-page/" class="button readmore">Read More<span class="icon icon-arrow"></span></a>
</div>
I am doing my first Meteor application and facing some issues in navigation using the iron router. Everytime, I click the Signin button from the signing template, it doesn't redirect me to home page template. The browser shows a url with a question mark in it after signing button is clicked(http://localhost:3000/?). The weird thing is that after I click the back button in browser, it takes me to home page with URL:http://localhost:3000/home. I am not able to understand why this is happening. Please help me to find what I am doing wrong.
In the router.js file, I have written:
Router.configure({
layoutTemplate: 'layout',
});
Router.map(function() {
this.route('/home',function()
{
this.render('home');
});
this.route('/',function()
{
this.render('signin');
});
});
The layout file looks like this:
<template name="layout">
<div>
{{>header}}
</div>
<div>
{{>yield}}
</div>
<div>
{{>footer}}
</div>
</template>
SignIn template file looks like this:
<template name="signin">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<div class="account-wall">
<h1 class="text-center login-title">Sign in to continue</h1>
<form class="form-signin">
<input type="text" class="form-control" placeholder="Email" required autofocus>
<input type="password" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">
Sign in</button>
<label class="checkbox pull-left">
<input type="checkbox" value="remember-me">
Remember me
</label>
Need help? <span class="clearfix"></span>
</form>
</div>
Create an account
</div>
</div>
</div>
</template>
Home template looks like:
<template name="home">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</template>
The code for Signin.js file is as follow:
if (Meteor.isClient)
{
console.log("Sign In JS");
Template.signin.helpers({
});
Template.signin.events({
'submit': function(event, template) {
// alert("My button was clicked!");
Router.go('home');
}
});
}
I your case you have to use the path
Router.go("/home")
I'm trying to get the BS sticker footer as in this example http://twitter.github.com/bootstrap/examples/sticky-footer.html
I added the css and html to my gwt Uibinder xml file but it seems the wrap css selector has no effect. I’m not sure if this is b/c i need to redefine the css elements that will be included under 'wrap' div. I'm not sure why the BS sticker footer in GWT doesn't work . do you have a GWT uibinder example of a BS sticker footer?
---UPDATE---
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style >
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -30px;
}
#footer {
min-height: 40px;
/* padding-left:250px;*/
background-color: #f2f2f2;
}
/* Set the fixed height of the footer here */
#push, #footer {
height: 30px;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container2 {
width: auto;
max-width: 680px;
}
.credit {
margin-left: auto;
margin-right: auto;
width:580px;
}
#main
{
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
</ui:style>
<g:HTMLPanel >
<!-- Part 1: Wrap all page content here -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">GND</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Search</li>
<li>Maintain</li>
<li>Add Data</li>
<li class="dropdown">
<!-- Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul> -->
</li>
</ul>
<!-- <form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email"></input>
<input class="span2" type="password" placeholder="Password"></input>
<button type="submit" class="btn">Sign in</button>
</form> -->
<form class="navbar-search pull-right">
<input type="text" class="search-query" placeholder="Search"></input>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div id="wrap">
<div id="main" class="container clear-top">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="row">
<div class="span12">
<p> </p>
</div>
</div>
<div class="well well-small">
<h2 align="center">Welcome To The Geospatial Network Database!</h2>
<p align="center">This is a demo for gwt and Bootsrap library integration</p>
<!-- <p><a class="btn btn-primary btn-large">Learn more »</a></p> -->
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span3">
<h2>How It works</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" data-content="And here's some amazing content. It's very engaging. right?" rel="popover" href="#" data-original-title="A Title" >View details »</a></p>
</div>
<div class="span3">
<h2>Who It Is For</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span3">
<h2>Get Support</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span3">
<h2>Find Out More</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
<div class="row">
<div class="span6">
<div class="well">
<ul class="nav nav-list" ui:field="recentDocumentList">
<li class="nav-header">What's New</li>
<!-- <li class="active" ui:field='moreItem'></li> -->
<!--
<li>Document2</li>
<li>Document3</li>
<li>Document4</li>
<li>Document5</li>
<li>Document6</li> -->
</ul>
</div>
</div>
<div class="span6">
<div class="well">
<h2>Section</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<!-- <p> </p> -->
<!-- <br></br> -->
<p>
<!-- <a class="btn btn-primary" id="myButton" data-content="And here's some amazing content. It's very engaging. right?" rel="popover" href="#" data-original-title="A Title">Click to toggle popover</a> </p> -->
<g:Button styleName="btn btn-primary" ui:field="myButton">Click to toggle popover »</g:Button> </p>
</div>
</div>
</div>
</div> <!-- /container -->
<div id="push"></div>
</div>
<footer>
<p align="center" >© 2012 Ian Mayo and othman El Moulat.</p>
</footer>
</g:HTMLPanel>
</ui:UiBinder>