How to add close button to amp-image-lightbox? Its closed by clicking outside of image, but what should be if aspect ratio match display? Code piece follow:
$rnd = rand(10000,20000);
$res = '<amp-img on="tap:lightbox'.$rnd.'" role="button" tabindex="0" src="'.$src[1].'" width="'.$width.'" height="'.$height.'" layout="intrinsic" '.$style.'></amp-img>';
$res.= '<amp-image-lightbox id="lightbox'.$rnd.'" layout="nodisplay"></amp-image-lightbox>';
Changes in your code :
$rnd = rand(10000,20000);
$res = '<amp-img on="tap:lightbox'.$rnd.'" role="button" tabindex="0" src="'.$src[1].'" width="'.$width.'" height="'.$height.'" layout="intrinsic" '.$style.'></amp-img>';
$res.= '<amp-image-lightbox id="lightbox'.$rnd.'" layout="nodisplay"> <span on="tap:lightbox.close" role="button" tabindex="0">X</span></amp-image-lightbox>';
Example : click here
<!--
## Introduction
An AMP HTML tutorial - learn the different building blocks of an AMP HTML file. AMP HTML is entirely built on existing web technologies. It achieves reliable performance by restricting some parts of HTML, CSS and JavaScript. To make up for those limitations AMP HTML defines a set of custom elements for rich content beyond basic HTML. This samples shows what's necessary to create a valid AMP HTML file.
-->
<!-- -->
<!-- Doctype declaration is required. -->
<!doctype html>
<!-- This tells everyone that this is an AMP file. `<html amp>` works too. -->
<html ⚡>
<!-- ## Head -->
<!-- -->
<head>
<!-- The charset definition must be the first child of the `<head>` tag. -->
<meta charset="utf-8">
<title> amp-image-lightbox</title>
<!-- The AMP runtime must be loaded as the second child of the `<head>` tag.-->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
<!--
AMP HTML files require a canonical link pointing to the regular HTML. If no HTML version exists, it should point to itself.
-->
<link rel="canonical" href="https://ampbyexample.com/introduction/hello_world/">
<!--
AMP HTML files require a viewport declaration. It's recommended to include initial-scale=1.
-->
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<!--
CSS must be embedded inline.
-->
<style amp-custom>
.close-button { position:fixed; top:50px; right:50%; transform:translateX(50%); z-index:1000; border:5px solid yellow; border-radius:10px; padding:2px;}
</style>
<!--
The AMP boilerplate.
-->
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}#-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<!-- ## Body -->
<!-- -->
<body>
<h1>Add Custom Close Button In amp-image-lightbox</h1>
<amp-img on="tap:lightbox"
role="button"
tabindex="0"
src="https://dummyimage.com/600x400/9d0000/fff/&text=amp-image-lightbox"
alt="Picture of a dog"
title="Picture of a dog, view in lightbox"
layout="responsive"
width="300"
height="246"></amp-img>
<amp-image-lightbox id="lightbox"
layout="nodisplay">
<span class="close-button" on="tap:lightbox.close" role="button" tabindex="0">X</span>
</amp-image-lightbox>
</body>
</html>
Without html code, just CSS.
Put this on your styles:
For amp-image-lightbox:
#lightbox1::before {
content:"X";
cursor: pointer;
font-size: 32px;
right:19px;
top:8px;
font-weight: 600;
position: fixed;
display: block;
text-align:right;
color:#fff;
}
The selector is the default example selector. Be sure it's correct.
On amp-lightbox:
.lightbox::before {
content:"X";
cursor: pointer;
font-size: 32px;
right:19px;
top:8px;
font-weight: 600;
position: fixed;
display: block;
text-align:right;
color:#fff;
}
Try it on codepen
Related
This is modalpopup.php
<h1>Pop Up</h1>
<button id="openBtn">Show Pop Up</button>
<div id="overlay">
<div id="modal">
<button id="closeBtn">Close</button>
</div>
</div>
<script src="js/modalpopup.js"></script>
This is javascript.php
<!DOCTYPE html>
<html>
<head>
<title>Javascript Projects</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<nav>
<ul>
<li>Counter App</li>
<li>Random Number Generator</li>
<li>Color Generator</li>
<li>Pop Up</li>
</ul>
</nav>
<?php
if(isset($_GET['counter'])){
include('counter.php');
}if(isset($_GET['randomnumber'])){
include('randomnumber.php');
}if(isset($_GET['hexgenerator'])){
include('hexgenerator.php');
}if(isset($_GET['popup'])){
include('modalpopup.php');
}
?>
</body>
</html>
This is style.css
body{
background-color: pink;
}
#overlay{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index 1;
background-color: plum;
}
#modal{
max-width: 600px;
height: 300px;
margin: auto;
background-color: white;
position: relative;
}
modalpopup.php is successfully linked to my style.css file because, I have the body background listed as pink in the main file its included in (javascript.php)and when I click the popup item of my menu the included modalpopup.php displays with the background as pink.
HOWEVER,
I used #overlay and I set the ID's properly but, for some reason when I try and add background colors to these items nothing displays. Any ideas what may be wrong ?
EDIT
I figured it out I am using XAAMP and I cleared my cache in safari and now it is working.
I am working on a database project for class and I wanted to make a GUI for it just for funsies. So, I am not too fluent in HTML/CSS and I need some help..
I want to make a fancy fade in/out message to ensure I have a working connection to my database. So I did some digging online and found a similar post:
CSS how to make an element fade in and then fade out?
It works perfectly in animation, however once it fades out all the margin space that once contained it is still allocated to the page; with that said, is there any simplistic way to removing all that unwanted space? I'll provided images to help illustrate what exactly I want it to look like...
Code used: (basically the same as the related post, see above)
<!-- dbGUI.php file -->
<!-- DATE -->
<!-- PHP -->
<?php
$message = "";
$con = mysqli_connect("#####","#####", "","store");
// Check connection
if (mysqli_connect_errno())
{
$message = "Failed to connect to MySQL: " . mysqli_connect_error();
} else {
$message = "Connected to database...";
}
?>
<!-- END PHP -->
<!-- MARKUP -- >
<!DOCTYPE html>
<html lang="en">
<!-- HEADER -->
<head>
<meta charset="utf-8" />
<title>Database Admin Portal</title>
<!-- Favicon -->
<link rel="shortcut icon" href="#" />
<!-- CSS -->
<link rel="stylesheet" href="dbGUI.css" />
<!-- JAVASCRIPT -->
</head>
<!-- MAIN -->
<body>
<header>
<div class="elementToFadeInAndOut"><?php echo $message; ?> </div>
<nav>
</nav>
</header>
<hr>
<main>
<h1>HEADER 1</h1>
<section>
<h2>HEADER 2</h2>
<article>
<h3>HEADER 3</h3>
<p>
</p>
</article>
</section>
</main>
<hr>
<!-- FOOTER -->
<footer>
</footer>
</body>
</html>
body
{
padding: 10px;
font-size:16pt;
font-family: Calibri;
}
CSS File:
.elementToFadeInAndOut {
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
}
#-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
width: 0px;
height: 0px;
}
#keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
At the end (100%) of your:
#keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
you can add display: none: to remove the extra space that it was taking up. You can take it one step further and add another transition before doing display: none:
Let me know if you have any more questions :)
display: none; when you have completed the animation will hide it from the DOM and remove any space it was taking up.
opacity will make it transparent, but will still take up all the space it did when it was visible.
Some interesting links for you:
CSS "Display: none;" property
Is there an opposite to display:none?
I want to place my footer at the bottom of the screen, have used a div with the "wrap" id on the body of my index, but the footer does not seem to stick below it.
Please help me with this issue.
I have included my index.php, footer.php and css.php files
index.php
<?php include('config/setup.php');?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $page['title'].' | '.$site_title; ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php include('config/css.php'); ?>
<?php include('config/js.php'); ?>
</head>
<body>
<div id="wrap">
<?php include(D_TEMPLATE.'/navigation.php'); ?>
<div class="container">
<h1><?php echo $page['header'];?></h1>
<?php echo $page['body_formatted']; ?>
</div>
</div><!-- END wrap -->
<?php include(D_TEMPLATE.'/footer.php'); ?>
<div id="console-debug">
<pre>
<?php print_r($page); ?>
</pre>
</div>
</body>
</html>
footer.php
<footer id="footer">
<div class="container">
<p>This is my footer</p>
</div>
</footer><!-- END footer -->
css.php
<?php
//CSS:
?>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- jQuery CSS -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
html,
body {
height=100%;
/* The html and body elements cannot have any padding or margin */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
width:100%;
height: 60px;
background-color: #f5f5f5;
}
#btn-debug {
position: absolute;
}
#console-debug{
position:absolute
}
</style>
For sticky footer you can just add this code
#footer{
position:fixed;
left:0px;
right:0px;
bottom:0px;
width:100%;
z-index:99;
min-height: ;/*According to requirement*/
background-color: ;/*set color whichever you want*/
}
You should try to set your position:fixed
So it won't move
Here is a codepen to see the code I have written and works.
When I write similar code in my wordpress theme, my body appears above the header. How can I get the body next to the header?
[BONUS] What is the best way/how to align the body centered between the right-edge of the header and the right side of the screen.
Any advice is highly appreciated, and I thank you in advance.
[EDIT]: I changed my code for my wordpress site because before I was targeting body with css like I did in my codepen, but instead I created a div with class .site and am using that as the body. This is a temporary fix, but it is working as intended. How could I better achieve this affect so I can integrate visual plugin builders such as beaver builder?
HTML:
<div id="header">
<img src="http://placehold.it/100x100">
<ul id="nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item Number 3</li>
<li>Item #4</li>
</ul>
</div>
<div id="body">
<div id="container">Body
</div>
</div>
</div>
CSS:
#header,
#body {
display: inline-block;
}
#header {
white-space: nowrap;
width: 15%;
height: 100%;
float: left;
text-align: right;
position: fixed;
//border: 1px solid green;
}
#header img {
}
#nav ul {
list-style: none;
}
#nav {
position: absolute;
bottom: 4%;
right: 0;
}
#body {
width: 80%;
float: right;
//border: 1px solid yellow;
}
#container {
height: 10000px;
}
HEADER.PHP:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url')?>" />
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- Site Header -->
<header class="site-header">
<?php the_custom_logo(); ?>
<?php wp_nav_menu(array('theme_location','Primary','menu_class'=>'main-navigation')); ?>
</header>
<!-- /Site Header -->
<!-- Site Content -->
Part of the problem was that I had a php error in my functions.php. Also I changed the position of the site content to absolute and the site nav to fixed. I then set the width of the sidebar nav and site content. I also added a content loop to my header to create the content area. Both site nav and content are displayed inline-block.
Everything now seems to be working.
I'm making a personal website and my CSS background-image doesn't seem to be working. Link to the site is http://distorts.me/new/ it seems that it doesn't find the image because it doesn't load, it is just a white area. (Sorry for the improper punctuation not very literate ) I'm using chrome.
style.css
body {
background-image: url("http://distorts.me/new/includes/background.png");
color: #C0C0C0;
}
.navbar {
margin-bottom: 0;
border-radius: 0;
}
.row.content {height: 450px}
.sidenav {
padding-top: 20px;
background-color: #808080;
height: 100%;
font-size: 20px;
}
a {
color: #C0C0C0;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #404040;
}
footer {
background-color: #555;
color: white;
padding: 15px;
}
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
index.php
<html lang="en">
<!-- George M. -->
<!-- 2/26/16 -->
<?php
include 'includes/head.php';
?>
<body oncontextmenu="return false" background="includes/background.png">
<header class="container-fluid text-center" style="background-color: #404040;">
<h1>George M. - Welcome</h1>
</header>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav" style="height: 183%">
<p>Home</p>
<p>About Me</p>
<p>Services</p>
<p>Contact</p>
</div>
<div class="col-sm-8 text-middle">
<h1>Welcome</h1>
<p>test</p>
<hr>
<h3>Test</h3>
<p>test</p>
</div>
</div>
</div>
<footer id="foot" class="container-fluid text-center">
</footer>
<script type="text/javascript">
document.getElementById('foot').innerHTML =
"<p>© " + new Date().getFullYear() + " Distorts | George M. All rights reserved. <span style='color: #808070;'>Made by George M.</span>"
</script>
</body>
</html>
head.php
<head>
<title>George M | Home</title>
<link rel="shortcut icon" href="/favicon.ico">
<meta name="author" content="Distorts">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
</head>
When the code is right, the most likely problem to be causing issues is caching. Some web hosting servers have caching preconfiguration and since you are using PHP, you can simply send PHP headers that prevent caching - add these lines at the very top of your header.php:
<?php
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?>
Another trick which can be used is timestamping / querystring - this approach basically forces the browser to reload the file since its URL is different than what it previously loaded. So naturally, we add the time variable (because time is always changing). Other developers use this method by adding a version query but that requires more maintenance.
Adding file timestamp with PHP:
<link rel="stylesheet" type="text/css" href="style.css?t=<?php echo date('YmdHis');">
Output
<link rel="stylesheet" type="text/css" href="style.css?t=20160227182425">
File version example
<link rel="stylesheet" type="text/css" href="style.css?v=2.1">
Also, keep in mind that CSS background paths are relative to the CSS file itself, not HTML document. Links in html are relative to html document, links in CSS are relative to CSS file. So the correct way to reference your image is by the following:
background-image: url("includes/background.png");
Try changing your background url to background src :
background-image: src ("http://distorts.me/new/includes/background.png");
Working fine on Chrome. Try changing your background url to:
background-image: src("/includes/background.png");
And place that image to that server rather than giving full path.