I've looked at the Schema.org spec for opening hours, but it seems to fail to address two key items:
1) Localbusinesses that have multiple hours (ie 8-12, 1-5 with the hole in the middle being closed for lunch)
2) Days where the business is closed altogether.
I can't find any examples of anyone else doing it on google, this is my code for just normal hours (9-5) and my GUESS for how to handle days that are closed.
Can someone chime in on multiple hours and confirm my handling of closed days is correct?
<time itemprop="openingHours" datetime="Mo 08:30-12:00">
<div style="font-weight:bold;width:100px;margin-right:10px;padding:5px;clear:both;float:left;">Monday</div>
<div style="float:left;padding:5px;">
08:30AM - 12:00PM
</div>
</time>
<br />
<time itemprop="openingHours" datetime="Tu 08:30-12:00">
<div style="font-weight:bold;width:100px;margin-right:10px;padding:5px;clear:both;float:left;">Tuesday</div>
<div style="float:left;padding:5px;">
08:30AM - 12:00PM
</div>
</time>
<br />
<time itemprop="openingHours" datetime="We 08:30-12:00">
<div style="font-weight:bold;width:100px;margin-right:10px;padding:5px;clear:both;float:left;">Wednesday</div>
<div style="float:left;padding:5px;">
08:30AM - 12:00PM
</div>
</time>
<br />
<time itemprop="openingHours" datetime="Th 08:30-12:00">
<div style="font-weight:bold;width:100px;margin-right:10px;padding:5px;clear:both;float:left;">Thursday</div>
<div style="float:left;padding:5px;">
08:30AM - 12:00PM
</div>
</time>
<br />
<time itemprop="openingHours" datetime="Fr 10:10-12:00">
<div style="font-weight:bold;width:100px;margin- right:10px;padding:5px;clear:both;float:left;">Friday</div>
<div style="float:left;padding:5px;">
10:10AM - 12:00PM
</div>
</time>
<br />
<div style="font-weight:bold;width:100px;margin-right:10px;padding:5px;clear:both;float:left;">Saturday</div>
<div style="float:left;padding:5px;">
<em>Closed</em>
</div>
<br />
<div style="font-weight:bold;width:100px;margin-right:10px;padding:5px;clear:both;float:left;">Sunday</div>
<div style="float:left;padding:5px;">
<em>Closed</em>
</div>
The 2nd example on the LocalBusiness schema page appears to illustrate both the issues which you've raised:
Hours:
<meta itemprop="openingHours" content="Mo-Sa 11:00-14:30">Mon-Sat 11am - 2:30pm
<meta itemprop="openingHours" content="Mo-Th 17:00-21:30">Mon-Thu 5pm - 9:30pm
<meta itemprop="openingHours" content="Fr-Sa 17:00-22:00">Fri-Sat 5pm - 10:00pm
This shows a restaurant that closes for a couple hours during the afternoon and is not open on Sundays (implied by no given openingHours for Sunday).
Related
i have this code in tailwind
#foreach($studenti as $student)
<a data-modal-toggle="defaultModal" data-target="#myModal{{$student->id }} href="#" class="hover:text-blue-700">{{$student->name}}</a>
and this is the Main modal
<!-- Main modal -->
<div id="myModal{{$student->id}}" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center">
<div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<!-- Modal header -->
<div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
{{$alum->nombre}} {{$alum->apellpatern}} {{$alum->apellmatern}}
</h3>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="defaultModal">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
</p>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
</p>
</div>
<!-- Modal footer -->
<div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
<button data-modal-toggle="defaultModal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
<button data-modal-toggle="defaultModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Decline</button>
</div>
</div>
</div>
</div>
#endforeach
But when i pressed the link it does not work, i am using data-target="#myModal{{$student->id }} in order to pass #student data to tailwind Main modal id="myModal{{$student->id}}",
it seems that this is not the proper way to pass data, i am using Laravel 8, anyhelp is appreciated
Thank you in advance
Omar
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'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
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>
I tried to use the afterAdd binding to add some trivial animation to the elements being added to my observableArray but it does not trigger anything.
I tought I had a problem with my animation code so I coded a small alert on the function but still does not work.
Here's some sample code for the div being templated:
<div id="resultList"
data-bind='template: { name: "searchResultTemplate",
afterAdd: function(elem){alert(elem)} }'
runat="server">
</div>
This is the template:
<script type="text/html" id="searchResultTemplate">{{each(i, searchresult) resultCollection()}}
<div class="searchresultwrapper ui-corner-all ui-state-default">
<div class="searchresult">
<img src='${ ImageUrl }' alt='${ Title }' title='${ Title }' class="searchresultpicture" />
<div class="searchresultinformationcontainer">
<span class="searchresulttitle" data-bind="text: Title"></span>
<br />
<div class="searchresultdescription" data-bind="text: Description">
</div>
<span class="searchresultAuthor" data-bind="text: AuthorName"></span> at <span class="searchresultmodule" data-bind="text: ModuleName"></span> on <span class="searchresultdate" data-bind="text: PublicationDate"></span>
<br />
Take me there
</div>
</div>
</div>
<br />{{/each}}
</script>
Any ideas?
You need to qualify the template attributes with foreach like so,
<div id="resultList" data-bind='template: {
name: "searchResultTemplate",
foreach: searchresult,
beforeRemove: function(elem) { $(elem).slideUp() },
afterAdd: function(elem) { $(elem).hide().slideDown() }
}' runat="server">
</div>
and then, not use {{each in the template, just template it for each item stand alone.
Here, foreach attribute helps keep track of changes to the object array