I'm tagging my website with Microdata and questionning myself about tagging article's listing.
On category page I got a a big article which is tagged but I don't know if I should also tagged the listing.
<article itemscope itemtype="http://schema.org/NewsArticle" itemref="author publisher">
<header class="entry-header">
<h3 class="entry-title" itemprop="headline"><a href="/article1" rel="bookmark">article 1/a></h3>
<link itemprop="sameAs mainEntityOfPage" href=/article1">
</header>
<div>
<img width="150" height="150" itemprop="image" src="image1.jpg" />
<div class="resume-article-list">bépo bépo bépo … (Lire la suite…)</div> </div>
<footer class="entry-meta">
<time itemprop="datePublished" datetime="2018-03-15T04:48:53+00:00">
<time itemprop="dateModified" class="updated" datetime="2018-11-14T13:52:00+00:00"></time>
</footer>
</article>
<article itemscope itemtype="http://schema.org/NewsArticle" itemref="author publisher">
<header class="entry-header">
<h3 class="entry-title" itemprop="headline"><a href="/article2" rel="bookmark">article 2/a></h3>
<link itemprop="sameAs mainEntityOfPage" href=/article2">
</header>
<div>
<img width="150" height="150" itemprop="image" src="image1.jpg" />
<div class="resume-article-list">bépo bépo bépo … (Lire la suite…)</div> </div>
<footer class="entry-meta">
<time itemprop="datePublished" datetime="2018-03-15T04:48:53+00:00">
<time itemprop="dateModified" class="updated" datetime="2018-11-14T13:52:00+00:00"></time>
</footer>
</article>
Is it correct?
I got a big doubt if NewsArticle could be used on resume,
and also if isn't any trouble to used mainEntityOfPage as is not the full article?
If you are marking up a list of things that exist on other pages, then Google recommends using ItemList containing just urls. The destination pages should contain the full markup about the entity:
https://developers.google.com/search/docs/guides/mark-up-listings
Related
I looked at many featherlight.js posts already, but just could not work out how to make the gallery work without a tags etc.
My example is here: http://jsfiddle.net/pwLnrmoc/5/
HTML Code:
<h3>Gallery with different Markup</h3>
<p>Works fine as "single" featherlight, but not as a gallery. I do not want to introduce a tags to make this work as a gallery. What needs to change in the JS to make this work as a gallery?</p>
<ul class="gallery">
<li class="gallery__item">
<div class="buttons">
<button class="openLightbox">Open in lightbox</button>
<button class="openLightboxGallery">Open in lightbox gallery</button>
<figure class="lightboxContent">
<h3>Item 1</h3>
<img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_b.jpg" />
</figure>
</div>
<img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_q.jpg" />
</li>
<li class="gallery__item">
<div class="buttons">
<button class="openLightbox">Open in lightbox</button>
<button class="openLightboxGallery">Open in lightbox gallery</button>
<figure class="lightboxContent">
<h3>Item 2</h3>
<img src="http://farm5.staticflickr.com/4005/4400559493_3403152632_o.jpg" />
</figure>
</div>
<img src="http://farm5.staticflickr.com/4005/4400559493_f652202d1b_q.jpg" />
</li>
<li class="gallery__item">
<div class="buttons">
<button class="openLightbox">Open in lightbox</button>
<button class="openLightboxGallery">Open in lightbox gallery</button>
<figure class="lightboxContent">
<h3>Item 3</h3>
<img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_o.jpg" />
</figure>
</div>
<img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_q.jpg" />
</li>
</ul>
JS Code:
$(document).ready(function(){
$('.openLightbox').click( function(evt) {
const $target = $(evt.currentTarget);
const $figure = $target.siblings('figure');
console.log($figure.length);
// to open in a single slide
$.featherlight($figure);
})
$('.openLightboxGallery').click( function(evt) {
const $target = $(evt.currentTarget);
const $figures = $target.closest('.gallery').find('figure');
console.log($figures.length);
// to open in a gallery
$.featherlightGallery($figures);
})
});
It works fine with the "single" featherlight button, but not with the gallery. I do not know how to set the content filter or target in my case. That's the error: Featherlight: no content filter found (no target specified).
Ideally the way you call featherlight and featherlightGallery should be consistent and work the same way.
I have created single page in nextjs, And I taken build file <title> and <meta> working fine. see the title tag in this image
but I uploaded build file this server https://blog.simple.in/ title tag not showing. what I am missing. Could you please let me know server issue or code issue please let me know. Thanks
loyaltycards.js
import React, { Component } from "react";
import { Grid } from "semantic-ui-react";
import $ from "jquery";
import Layout from "../components/layout";
import 'semantic-ui-css/semantic.min.css';
import Head from 'next/head';
class Loyaltycard extends Component {
componentDidMount() {
$(".v2, .v3, .v4").hide();
$(".m1").click(function () {
$(".v1").show();
$(".v2,.v3,.v4").hide();
$(".li-1").addClass("btn-active-1");
$(".btn-active-2").removeClass("btn-active-2");
$(".btn-active-3").removeClass("btn-active-3");
$(".btn-active-4").removeClass("btn-active-4");
});
$(".m2").click(function () {
$(".v2").show();
$(".v1,.v3,.v4").hide();
$(".li-2").addClass("btn-active-2");
$(".btn-active-1").removeClass("btn-active-1");
$(".btn-active-3").removeClass("btn-active-3");
$(".btn-active-4").removeClass("btn-active-4");
});
$(".m3").click(function () {
$(".v3").show();
$(".v1,.v2,.v4").hide();
$(".li-3").addClass("btn-active-3");
$(".btn-active-2").removeClass("btn-active-2");
$(".btn-active-1").removeClass("btn-active-1");
$(".btn-active-4").removeClass("btn-active-4");
});
$(".m4").click(function () {
$(".v4").show();
$(".v1,.v2,.v3").hide();
$(".li-4").addClass("btn-active-4");
$(".btn-active-2").removeClass("btn-active-2");
$(".btn-active-1").removeClass("btn-active-1");
$(".btn-active-3").removeClass("btn-active-3");
});
}
render() {
return (
<Layout>
<Head>
<meta charSet="utf-8" />
<title>Store all your rewards cards on your phone</title>
<meta name="description" content="The smart, easy way to carry all Loyalty, Reward and Club cards on your mobile- link them all in the simple app, checkout as usual and earn points at stores." />
<meta name="google-site-verification" content="rtIRrUNRpgZ_lFtlfS8LJ0-8j_d569BXS9NOGa_nM6Y" />
<link rel="canonical" href="https://simple .cash/loyaltycards"/>
</Head>
<Grid className="static-sections">
<Grid.Column width={1}></Grid.Column>
<Grid.Column width={14} className="promotions">
<h1>Loyalty Cards</h1>
<p>
Got a wallet full of store loyalty cards? Link them all in the
simple app and start earning points at stores you visit all the
time. simple app allows you to store all of your rewards cards on
your phone. Shop and use your loyalty account at checkout as usual
to collect points. Turn your phone into your wallet and redefine
your everyday shopping experience! It is the smart and easy way to
carry all Loyalty cards, Reward cards and Club cards on your
smartphone with simple .
</p>
</Grid.Column>
<Grid.Column width={1}></Grid.Column>
</Grid>
<Grid>
<Grid.Column width={1}></Grid.Column>
<Grid.Column width={14} className="loyalty">
<Grid>
<Grid.Column width={8} className="left-eight">
<div className="m1" onClick={this.m1}>
<div class="media-left">
<p class="li-circle-second-1 li-1">1</p>
</div>
<div class="media-body">
<h4 class="media-heading">Select Card</h4>
<p>
Select a card from the available list. If not available,
add your card by selecting Add New
</p>
</div>
</div>
<div className="m2" onClick={this.m2}>
<div class="media-left">
<p class="li-circle-second-2 li-2">2</p>
</div>
<div class="media-body">
<h4 class="media-heading">Scan barcode</h4>
<p>Scan the barcode from the actual card you carry</p>
</div>
</div>
<div className="m3" onClick={this.m3}>
<div class="media-left">
<p class="li-circle-second-3 li-3">3</p>
</div>
<div class="media-body">
<h4 class="media-heading">Card Photo</h4>
<p>
Click a photo of the front & back of the card. (Optional)
</p>
</div>
</div>
<div className="m4" onClick={this.m4}>
<div class="media-left">
<p class="li-circle-second-4 li-4">4</p>
</div>
<div class="media-body">
<h4 class="media-heading">Use the Card</h4>
<p>
During checkout at the store, select the appropriate card
from the app & show at the counter for scanning
</p>
</div>
</div>
</Grid.Column>
<Grid.Column width={8}>
<div className="v1">
<video
playsinline={"playsinline"}
autoplay={"autoplay"}
muted={"muted"}
loop={"loop"}
>
<source
class="embed-responsive-item"
src="/mp4/loyalty-card/1-loyalty-card.mp4"
type="video/mp4"
></source>
</video>
</div>
<div className="v2">
<video
playsinline={"playsinline"}
autoplay={"autoplay"}
muted={"muted"}
loop={"loop"}
>
<source
class="embed-responsive-item"
src="/mp4/loyalty-card/2-scan-barcode.mp4"
type="video/mp4"
></source>
</video>
</div>
<div className="v3">
<video
playsinline={"playsinline"}
autoplay={"autoplay"}
muted={"muted"}
loop={"loop"}
>
<source
class="embed-responsive-item"
src="/mp4/loyalty-card/3-card-photo.mp4"
type="video/mp4"
></source>
</video>
</div>
<div className="v4">
<video
playsinline={"playsinline"}
autoplay={"autoplay"}
muted={"muted"}
loop={"loop"}
>
<source
class="embed-responsive-item"
src="/mp4/loyalty-card/4-cashback-added.mp4"
type="video/mp4"
></source>
</video>
</div>
</Grid.Column>
</Grid>
</Grid.Column>
<Grid.Column width={1}></Grid.Column>
</Grid>
</Layout>
);
}
}
export default Loyaltycard;
I tried following this https://smallbusiness.chron.com/show-date-tumblr-44477.html
doing this
<div class="container">
<div class="main">
{block:Posts inlineMediaWidth="700" inlineNestedMediaWidth="700"}
<article class="
{block:Text} {block:Date} {block:NewDayDate} {DayOfWeek}, {Month} {DayOfMonth}, {Year} {/block:NewDayDate} {/block:Date} text {/block:Text}
{block:Photoset} {block:Date} {block:NewDayDate} {DayOfWeek}, {Month} {DayOfMonth}, {Year} {/block:NewDayDate} {/block:Date} photoset {/block:Photoset}
{block:Photo} {block:Date} {block:NewDayDate} {DayOfWeek}, {Month} {DayOfMonth}, {Year} {/block:NewDayDate} {/block:Date} photo {/block:Photo}
{block:RebloggedFrom}reblogged {/block:RebloggedFrom}
{block:Quote}quote {/block:Quote}
{block:Link}link {/block:Link}
{block:Chat}chat {/block:Chat}
{block:Audio}audio {/block:Audio}
{block:Video}video {/block:Video}
{block:Answer}answer {/block:Answer}
{block:Date}not-page post-{PostID}
{block:Date} {MonthNumberWithZero} / {DayOfMonthWithZero} / {ShortYear} {/block:Date}
{/block:Date} {block:PermalinkPage} active exposed{/block:PermalinkPage}" {block:Date}data-post-id="{PostID}"{/block:Date} {block:SupplyLogging}data-supply-logging='{positions}'{/block:SupplyLogging}>
<div class="post-wrapper clearfix">
But I still don't display dates.
That page I referenced was worthless
I followed instructions here: http://themesbyeris.tumblr.com/tutorial07
Did this
<div class="container">
<div class="main">
{block:Posts inlineMediaWidth="700" inlineNestedMediaWidth="700"}
<article class="
{block:Text}text {/block:Text}
{block:Photoset}photoset {/block:Photoset}
{block:Photo}photo {/block:Photo}
{block:RebloggedFrom}reblogged {/block:RebloggedFrom}
{block:Quote}quote {/block:Quote}
{block:Link}link {/block:Link}
{block:Chat}chat {/block:Chat}
{block:Audio}audio {/block:Audio}
{block:Video}video {/block:Video}
{block:Answer}answer {/block:Answer}
{block:Date}not-page post-{PostID}
{block:Date} {MonthNumberWithZero} / {DayOfMonthWithZero} / {ShortYear} {/block:Date}
{/block:Date} {block:PermalinkPage} active exposed{/block:PermalinkPage}" {block:Date}data-post-id="{PostID}"{/block:Date} {block:SupplyLogging}data-supply-logging='{positions}'{/block:SupplyLogging}>
<div class="post-wrapper clearfix">
<header class="post-header">
{block:LikesPage}
<a class="post-blog" href="{Permalink}"><img class="blog-avatar" src="{PostBlogPortraitURL-30}" data-blog-card-username="{PostBlogName}">{PostBlogName}</a>
{/block:LikesPage}
{block:RebloggedFrom}
<a class="reblog-link" href="{ReblogParentURL}" data-blog-card-username="{ReblogParentName}"><i class="reblog_sm"></i>{ReblogParentName}</a>
{/block:RebloggedFrom}
</header>
<section class="post">
{DayOfWeek}, {Year}-{MonthNumberWithZero}-{DayOfMonthWithZero} {24HourwithZero}:{Minutes}
and it worked just fine.
How can I do addthis.toolbox('.addthis_toolbox') multiple times?
I have a list of posts, and each is opened in popup window (jquery ui dialog). So I need to reload AddThis bar for each post.
Now I have:
<div id="addThis_<?=$postID?>" class="addthis_toolbox addthis_default_style" addthis:title="<?=$fullTitle?>" addthis:url="https://<?=$url?>">
<a class="share-button addthis_button_preferred_1"></a>
<a class="share-button addthis_button_preferred_2"></a>
<a class="share-button addthis_button_preferred_3"></a>
<a class="share-button addthis_button_preferred_4"></a>
<a class="share-button addthis_button_twitter" addthis:title="<?=$fullTitle?>" addthis:url="http://lj.is/<?=$postID?>"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">
$(function(){
var addthis_config = {
data_track_clickback:true,data_track_addressbar:true,pubid:'...',ui_delay:300
};
var addthis_share = {url:"https://<?=$url?>", title:'<?=$fullTitle?>'};
if (window.addthis) {addthis.toolbox('#addThis_<?=$postID?>'); addthis.button("#addThis_<?=$postID?> .share-button"); addthis.counter("#addThis_<?=$postID?> .addthis_bubble_style");}
else $.getScript('https://s7.addthis.com/js/300/addthis_widget.js#pubid=...&async=1', function(){addthis.init();});
})
</script>
Now first launch is ok. But next - bar is built, but without correct click, anchor title and etc.
You can see that on https://littlejoys.ru/
And additional problem - compact menu has incorrect position when my popup window is scrolled.
You can repeat the div multiple times. But you need to change the URL, title, description using Addthis optional attributes (addthis:url, addthis:title, addthis:description).
<!-- First Post -->
<div class="addthis_toolbox addthis_default_style" addthis:url="http://example.com/1"
addthis:title="My cool first post"
addthis:description="An Example Description 1">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=***"></script>
<!-- Second Post-->
<div class="addthis_toolbox addthis_default_style" addthis:url="http://example.com/2"
addthis:title="My hot second post"
addthis:description="An Example Description 2">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=***"></script>
Therefore you can add it in a loop and it will pick up the correct data.
If Addthis is not getting re-initialized in UI dialog then you need to re-initialize the addthis buttons again using addthis.button(".share-button")
where share-button is the class of the addthis share anchor link.
Check this Addthis article: http://support.addthis.com/customer/portal/articles/1365325-rendering-tools-with-javascript
I'm writing a mobile app with PhoneGap and jQuery Mobile. To simplify navigation I want to spread a single form over multiple 'pages' using div data-role="page". The idea is to give the user a wizard like experience for filling in a large form. On completion I need to be able to save the form locally, or submit it, if the mobile is online.
I don't understand how to go about submitting or saving a form using jQuery Mobile if the form is split into multiple 'virtual' pages. I've search the web but can't find any tutorials or examples on solving this problem.
Any help will be appreciated.
UPDATE:
I recently changed the way I worked with multipage forms, and this solution worked nice for me. You basically use a naming convention where fields become part of sections by giving them id's starting with the section name and a dash, e.g: person-name, person-surname. See the answer below.
Ok, I posted my thoughts here: http://www.coldfusionjedi.com/index.cfm/2011/11/18/Demo-of-a-multistep-form-in-jQuery-Mobile
Essentially I ended up using a sever side language to simply include the right part of the form at a time. (I'm using ColdFusion, but any language would work really.) The form self posts and simply displays the right step based on where you are in the process.
A quick help to anyone stuck with the same problem. I did the 'form thing', but it gets sloppy. You basically just embed the page divs inside the form element, but that's not very elegant and has given me some navigation issues.
So I ended up with my own solution that works over huge multipage forms (+/- 1000 elements). Not the most elegant, but it works like a charm:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="utf-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
$(function () {
$('#submit_my_form').click(function (e) {
alert(JSON.stringify(readFormData('names')));
alert(JSON.stringify(readFormData('dates')));
});
});
function readFormData(section) {
var sectionData;
var els = $(':input[id|='+section+']');
var sectionData = {};
$.each(els, function() {
if (this.name && !this.disabled && (this.checked
|| /select|textarea/i.test(this.nodeName)
|| /text|hidden|password|date|email/i.test(this.type))) {
sectionData[this.name.substr(section.length+1)] = $(this).val();
console.log(this.name + " -> " + $(this).val());
}
});
return sectionData;
}
</script>
</head>
<body>
<div data-role="page" id="menu" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Menu Page</h1>
</div>
<div data-role="content">
<ul data-role="controlgroup">
<li><a target_id="page1" href="#page1" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right" class=".ui-icon-manditory">Page1</a></li>
<li><a target_id="page2" href="#page2" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right">Page2</a></li>
</ul>
<input id="submit_my_form" type="button" name="send" value="Submit"/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
Menu page footer
</div>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="header" data-position="fixed">
Prev
<h1>Page 1</h1>
Next
</div>
<div data-role="content">
<label for="names-initials">Name:</label>
<input type="text" name="names-initials" id="names-initials" value=""/>
<label for="names-surname">Surname:</label>
<input type="text" name="names-surname" id="names-surname" value=""/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="header" data-position="fixed">
Prev
<h1>Page 2</h1>
</div>
<div data-role="content">
<label for="dates-birthday">Birthday:</label>
<input type="date" name="dates-birthday" id="dates-birthday" value=""/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Back to Main From</a>
</div>
</div>
</body>
</html>