I'm having trouble horizontally centering my h1 with zurb flexbox - flexbox

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>

Related

CSS And Other Few Elements Not Working In Express Website. Node.js

I am making a discord bot with website, and i have defined css and other stuff in .html file but its still not showing when i go to the website.
res.status(200).sendFile(path.resolve(__dirname, "../../website/command.html"))
})
Thats how i require the html file.
The Html File:
<html lang="en-US">
<head>
<title>Commandli</title>
<link rel="icon" href="https://cdn.discordapp.com/avatars/746706292562853888/0b578635739cbd7e5b076e65f2c04a4c.png?size=2048">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/commands.css" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<img src="https://cdn.discordapp.com/avatars/"/> bot
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Home</li>
<li><a class="active" href="commands.html">Commands</a></li>
<li>About us</li>
<li>Contact us</li>
<li>Invite bot</li>
</ul>
</header>
<main>
<section class="tabs">
<div class="tab-header">
<div class="tablink tab-active" onclick="openCity(event,'Utility')">Utility</div>
<div class="tablink " onclick="openCity(event,'Fun')">Fun</div>
<div class="tablink" onclick="openCity(event,'Economy')">Economy</div>
<div class="tablink" onclick="openCity(event,'Info')">Info</div>
<div class="tablink" onclick="openCity(event,'Games')">Games</div>
<div class="tablink" onclick="openCity(event,'Misc')">Misc</div>
<div class="tablink" onclick="openCity(event,'All commands')">All commands</div>
</div>
<div style="margin-left:130px">
<div id="Utility" class="tab-content category" style="display:block">
<p><a>Utility commnads</a><br>Those commands help you with some things</p>
<p><a>=dungeon</a><br>Sends information about the current dungeon.</p>
<p><a>=help</a><br>Sends help!</p>
<p><a>=gamepedia</a><br>Search what you want on gamepedia</p>
<p><a>=welcome info</a><br>Information about the welcome system</p>
<p><a>Soon more!</a><br>Stay tuned!</p>
</div>
</div>
<script type="text/javascript" src="../js/commands.js"></script>
</section>
</main>
</body>
</html>
HTML file in bin = https://sourceb.in/DEA1wBlvs2
(Had to remove some code because it was huge)

EventReservation won't reschedule/cancel

I can schedule events using gMail markup, but...
If I attempt to reschedule an event, it just makes a second copy at the new time, and leaves the original event intact.
If I attempt to cancel an event, nothing happens.
An example of what my confirmation looks like:
<div itemscope="" itemtype="http://schema.org/EventReservation">
<meta itemprop="reservationId" content="Example967585">
<link itemprop="reservationStatus" href="http://schema.org/ReservationConfirmed">
<div itemprop="underName" itemscope="" itemtype="http://schema.org/Person">
<meta itemprop="name" content="Sam Brown">
</div>
<div itemprop="reservationFor" itemscope="" itemtype="http://schema.org/Event">
<meta itemprop="name" content="The Return of the Sam Exclusive Experience">
<meta itemprop="eventStatus" content="http://schema.org/EventScheduled">
<meta itemprop="startDate" content="2019-12-20T10:00:00-08:00">
<meta itemprop="endDate" content="2019-12-20T11:00:00-08:00">
<div itemprop="location" itemscope="" itemtype="http://schema.org/Place">
<meta itemprop="name" content="851 81st Avenue">
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<meta itemprop="streetAddress" content="851 81st Avenue">
<meta itemprop="addressLocality" content="San Francisco">
<meta itemprop="addressRegion" content="CA">
<meta itemprop="postalCode" content="94105">
<meta itemprop="addressCountry" content="SE">
</div>
</div>
</div>
</div>
Here's a sample reschedule markup:
<div itemscope="" itemtype="http://schema.org/EventReservation">
<meta itemprop="reservationId" content="Example967585">
<link itemprop="reservationStatus" href="http://schema.org/ReservationConfirmed">
<div itemprop="underName" itemscope="" itemtype="http://schema.org/Person">
<meta itemprop="name" content="Sam Brown">
</div>
<div itemprop="reservationFor" itemscope="" itemtype="http://schema.org/Event">
<meta itemprop="name" content="The Return of the Sam Exclusive Experience">
<meta itemprop="eventStatus" content="http://schema.org/EventRescheduled">
<meta itemprop="startDate" content="2019-12-21T10:00:00-08:00">
<meta itemprop="endDate" content="2019-12-21T11:00:00-08:00">
<div itemprop="location" itemscope="" itemtype="http://schema.org/Place">
<meta itemprop="name" content="851 81st Avenue">
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<meta itemprop="streetAddress" content="851 81st Avenue">
<meta itemprop="addressLocality" content="San Francisco">
<meta itemprop="addressRegion" content="CA">
<meta itemprop="postalCode" content="94105">
<meta itemprop="addressCountry" content="SE">
</div>
</div>
</div>
<meta itemprop="modifiedTime" content="2019-12-19T15:15:40-08:00">
</div>
Finally, a sample cancellation markup:
<div itemscope="" itemtype="http://schema.org/EventReservation">
<meta itemprop="reservationId" content="Example967585">
<link itemprop="reservationStatus" href="http://schema.org/ReservationCancelled">
<div itemprop="underName" itemscope="" itemtype="http://schema.org/Person">
<meta itemprop="name" content="Sam Brown">
</div>
<div itemprop="reservationFor" itemscope="" itemtype="http://schema.org/Event">
<meta itemprop="name" content="The Return of the Sam Exclusive Experience">
<meta itemprop="eventStatus" content="http://schema.org/EventCancelled">
<meta itemprop="startDate" content="2019-12-21T10:00:00-08:00">
<meta itemprop="endDate" content="2019-12-21T11:00:00-08:00">
<div itemprop="location" itemscope="" itemtype="http://schema.org/Place">
<meta itemprop="name" content="851 81st Avenue">
<div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<meta itemprop="streetAddress" content="851 81st Avenue">
<meta itemprop="addressLocality" content="San Francisco">
<meta itemprop="addressRegion" content="CA">
<meta itemprop="postalCode" content="94105">
<meta itemprop="addressCountry" content="SE">
</div>
</div>
</div>
<meta itemprop="modifiedTime" content="2019-12-19T15:26:23-08:00">
</div>
Other than being run through a translator to take them out of Quoted Printable format, those are live examples, cut&pasted directly from the eMails they were sent through.
All three markups pass the testing tool at:
https://search.google.com/structured-data/testing-tool#
A subset of the things I've tried:
Using the sample code from the markup page.
Updating that code to the newest versions I can find at schema.org.
** e.g. Changing reservationNumber to reservationId.
** e.g. Changing the reservation status to match the ReservationStatus types shown on schema.org rather than the versions from the markup tutorial page.
Testing by eMailing the markup to myself, using the markup email testing script at https://developers.google.com/gmail/markup/apps-script-tutorial and the sample code from the markup eventReservation page.
Swapping from the microdata example to the json+ld example when using that self test script.
I'm stumped for more things to try.
Google has confirmed via eMail that cancelling events and removing duplicate events after a reschedule was removed as a feature in December.
I've asked them to update their documentation.

How to Change SAPI VOICES in Windows [PHP]

I have basic code which works as:
$voice = new COM("SAPI.SpVoice");
voice .Speak("hello world");
I am getting RID of default voice, So
I am now looking at a way to change which voice is getting used for the TTS.
I want to change SAPI voice to ZIRA
What is the correct way to change the default voice, I read some thread here , But it is in javascript, and it is not working.
my code :
#$submit = $_POST['process'];
#$word = $_POST['texttospeech'];
$voice = new COM("SAPI.SpVoice");
if($_SERVER["REQUEST_METHOD"] == "POST" and isset($submit) and !empty($word)){
$voice->Speak($word);
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<title>PHP Text to Speech</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/fav.png" type="image/png">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body onload="startTime()">
<nav class="navbar-inverse" role="navigation">
<a href="https://google.com/" target="_blank">
<img src="img/cod.png" class="hederimg">
</a>
<div id="clockdate">
<div class="clockdate-wrapper">
<div id="clock"></div>
<div id="date"><?php echo date('l, F j, Y'); ?></div>
</div>
</div>
</nav>
<div class="topmost">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<center>
<strong class="panelinputtitle">PHP Text to Speech Converter Using Microsoft Speech API</strong>
</center>
</div>
<div class="panel-body">
<form method = "POST">
<div class = "form-group">
<textarea class="form-control input-sm" rows="6" name="texttospeech" placeholder="Type your Text Here..."></textarea>
</div>
<div class = "form-group">
<input type = "submit" class = "btn btn-primary btn-block" name="process" value="Speak">
</div>
</form>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Thanks in advance.
I've searched this one a long time ..
At least selecting Zira within the control panel as default voice works

jQuery easyui layout centering - one region overlaying another

I am trying to centre a button inside a region by using jQuery easyui layout feature:
<!DOCTYPE html>
<html style="height: 90%;">
<head>
<meta charset="UTF-8">
<title>The Analytic Platform - Home Page</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<style>
.middle {
height:30%;
}
.topandbelow {
height:40%;
}
</style>
</head>
<body style="height: 90%;">
<h2>The Analytic Platform</h2>
<p>Easy analytics for everyone!</p>
<div id="p" class="easyui-panel" title="Step 1: Load data for analysis" style="width:100%;height:100%;padding:10px;">
<div class="easyui-layout" data-options="fit:true" style="width:100%;height:100%">
<div data-options="region:'west',split:false,border:true" style="width:40%;" title="Get data from Excel file">
<div class="easyui-layout" data-options="fit:true" style="width:100%;height:100%">
<div data-options="region:'centre',split:false,border:true" style="width:100%;">
<a href="ExcelUpload.html" class="easyui-linkbutton" >Upload Excel file</a>
</div>
</div>
</div>
<div data-options="region:'east',split:false,border:true" style="width:40%;height:100%" title="Get data from database">
<div class="easyui-layout" data-options="fit:false" style="width:100%;height:100%">
<div data-options="region:'north',split:false,border:true" class="topandbelow"></div>
<div data-options="region:'centre',split:false,border:true" class="middle">
Define Database Connection
</div>
<div data-options="region:'south',split:false,border:true" class="topandbelow"></div>
</div>
</div>
</div>
</div>
</body>
</html>
The "east" region is not displaying its nested "centre" region with the "north" region overlaying it.
What could be wrong in here?

My Second Layout is not working(Tapestry 5)

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.

Resources