I created an AMP theme for my online shop.
What I need now is a popup/modal for newsletter subscription that will be automatically opened when a user access to the home-page.
I found the amp-lightbox component that seems ok for my purpose.
I used this example:
<amp-lightbox id="my-bindable-lightbox" data-amp-bind-open="showLightbox" layout="nodisplay" on="lightboxClose:AMP.setState({showLightbox: false})">
<div class="lightbox" role="button" tabindex="0" on="tap:my-bindable-lightbox.close">
<h1>Hello World!</h1>
</div>
</amp-lightbox>
<button on="tap:AMP.setState({showLightbox: true})">Open</button>
This work but the only thing I failed to do is set his state opened by default.
I tried changing the layout but nodisplay only is supported.
I also inspected the AMP.printState():
by default is null, when I click on the button to open the lightbox the state value is:
{"showLightbox": true}
So, last try I did is to set the default state
<amp-state id="showLightbox">
<script type="application/json">true</script>
</amp-state>
Now when I open the page and inspect AMP.printState() I see:
{"showLightbox": true}
But my lightbox still not showing until I click on the Open button.
I accept any solutions, other components or any workaround.
Create custom light-box
CSS
.custom-lightbox {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100vh;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.custom-lightbox h1 {
color: white;
}
HTML
<div class="custom-lightbox" tabindex="0" role="button" id="customLightbox" on="tap:customLightbox.hide">
<h1>Hello World!</h1>
</div>
<button on="tap:customLightbox.show">
Open Custom Lightbox
</button>
<!--
## Introduction
The [`amp-lightbox`](/content/amp-dev/documentation/components/reference/amp-lightbox-v0.1.md) component allows for a “lightbox” or similar experience - where upon user interaction a component expands to fill the viewport, until it is closed again by the user.
--><!-- -->
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>amp-lightbox</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<link rel="canonical" href="https://amp.dev/documentation/examples/components/amp-lightbox/index.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
<style amp-custom>
.custom-lightbox {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100vh;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.custom-lightbox h1 {
color: white;
}
</style>
</head>
<body>
<!-- ## Basic usage -->
<!--
The `amp-lightbox` component defines the child elements that will be displayed in a full-viewport overlay.
To close the lightbox via click or tap use the `on` attribute on one or more elements inside the lightbox. In this example the user can click anywhere in the lightbox to close it.
The lighbox is shown when the user taps or clicks on an element with `on` attribute that targets the id of an `amp-lightbox` element.
-->
<div class="custom-lightbox" tabindex="0" role="button" id="customLightbox" on="tap:customLightbox.hide">
<h1>Hello World!</h1>
</div>
<button on="tap:customLightbox.show">
Open Custom Lightbox
</button>
</body>
</html>
Related
I'm using jQuery datepicker and I would like to be able to replace its prev and next icons with FontAwesome for better scalability and prettier UI. Has anyone managed to find a way to do it?
We can overwrite the icons using CSS, since the plugin doesn't allow it.
In the following snippet, we hide the regular buttons, and add a :before pseudo element with the Font Awesome Icon.
Please notice you have to use the icon's codepoint (i.e. \f100) and not its class name (i.e. fa-angle-double-left) .
$(function() {
$("#datepicker").datepicker();
});
.ui-datepicker-prev span,
.ui-datepicker-next span {
background-image: none !important;
}
.ui-datepicker-prev:before,
.ui-datepicker-next:before {
font-family: FontAwesome;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
font-weight: normal;
align-items: center;
justify-content: center;
}
.ui-datepicker-prev:before {
content: "\f100";
}
.ui-datepicker-next:before {
content: "\f101";
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>
Date:
<input type="text" id="datepicker">
</p>
JSFiddle
It is quite possible to modify the icons directly in the original jQuery UI code,
open the file jquery-ui.min.js
(you must work directly on the file without CDN of course!)
and modify the following lines :
in jquery-ui.min.js
1 - Find :
<a class='ui-datepicker-prev ui-corner-all' data-handler='prev' data-event='click' title='"+i+"'><span class='ui-icon ui-icon-circle-triangle-"+(Y?"e":"w")+"'>"+i+"</span></a>":q?"":"<a class='ui-datepicker-prev ui-corner-all ui-state-disabled' title='"+i+"'><span class='ui-icon ui-icon-circle-triangle-"+(Y?"e":"w")+"'>"+i+"</span></a>
Replace with :
<a class='ui-datepicker-prev ui-corner-all' data-handler='prev' data-event='click' title='"+i+"'><span class='fa fa-angle-left' aria-hidden='true'>"+i+"</span></a>":q?"":"<a class='ui-datepicker-prev ui-corner-all ui-state-disabled' title='"+i+"'><span class='fa fa-angle-left' aria-hidden='true'>"+i+"</span></a>
2 - Find :
<a class='ui-datepicker-next ui-corner-all' data-handler='next' data-event='click' title='"+n+"'><span class='ui-icon ui-icon-circle-triangle-"+(Y?"w":"e")+"'>"+n+"</span></a>":q?"":"<a class='ui-datepicker-next ui-corner-all ui-state-disabled' title='"+n+"'><span class='ui-icon ui-icon-circle-triangle-"+(Y?"w":"e")+"'>"+n+"</span></a>
Replace with :
<a class='ui-datepicker-next ui-corner-all' data-handler='next' data-event='click' title='"+n+"'><span class='fa fa-angle-right' aria-hidden='true'>"+n+"</span></a>":q?"":"<a class='ui-datepicker-next ui-corner-all ui-state-disabled' title='"+n+"'><span class='ui-icon ui-icon-circle-triangle-"+(Y?"w":"e")+"'>"+n+"</span></a>
I wrote an article on this method with a link to an example at the bottom of the page.
-> Article here : https://sns.pm/Article/Utiliser-les-icones-de-Font-Awesome-avec-Datepicker-jQuery-UI
-> sampl : https://sns.pm/DEMOS-ARTICLES/Article-DEMO-jQuery-ui-font-awsome/
Hoping to help a little...
I want put in the same line of the field the face icon. The code is this:
<i class="material-icons">face</i>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
and the result is this:
How to put in the same line the icon and the field?
Thanks
Using Email Address / Email Icon as example.
HTML
Add the icon as a child element of the textfield
<div class=
"mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-upgraded"
data-upgraded=",MaterialTextfield">
<input class="mdl-textfield__input" id="textfield-EmailAddress" type=
"email">
<label class="mdl-textfield__label" for=
"textfield-EmailAddress">Email Address</label>
<span class="mdl-textfield__error">Please Enter Valid Email Address</span>
<i class="material-icons mdl-textfield__label__icon">mail</i>
</div>
CSS
.mdl-textfield__label__icon {
position: absolute;
right: 0;
top: 20px;
}
Required Resources
You need to load both the MDL CSS and the Material Design Icons
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
MDL JS will help with dynamic behavior
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"> </script>
For Example you can have your icon turn the same 'active' color as your input when focused
.mdl-textfield.is-focused .mdl-textfield__label__icon, .mdl-textfield.is-invalid.is-focused .mdl-textfield__label__icon {
color: rgb(63,81,181);
}
If you want the icon to be left-aligned you could adjust CSS above, but also need to adjust padding on the input to ensure that the input's text does not collide with the icon. Still possible with solution above, but with icon being right aligned its not as likely to happen
There's a solution by Jeremy Fily for left-aligned text-field icons.
The solution also includes js to colour the field and icon according to whether it's selected, but the part that inlines the icon to the left is this css
.mdl-textfield__icon {
width: 32px;
text-align: center;
position: absolute;
line-height: 1.5;
}
.mdl-textfield__icon ~ * {
margin-left: 48px;
width: calc(100% - 48px);
}
Before continue reading:
This is a polymer 0.5 question and has been deprecated after 1.0 release.
I'm trying to have a toolbar always shown at the top of the web. Then, split the container in a core-drawer-panel, but this element is being displayed always at the top of the web, overwriting the toolbar.
Using the polymer designer: I want to achieve something like this:
If I get the code from the designer, I have:
<core-toolbar id="core_toolbar"></core-toolbar>
<core-drawer-panel transition id="core_drawer_panel" touch-action>
<section id="section" drawer></section>
<section id="section1" main>
<core-field id="core_field" icon="search" theme="core-light-theme" center horizontal layout>
<core-input id="core_input" flex></core-input>
</core-field>
</section>
</core-drawer-panel>
But if I just use that code, the core-drawer goes to top, hiding the toolbar, resulting in something like:
Any idea about how to "move" the core-drawer-panel if there's a toolbar?
Keep in mind I don't want to have a toolbar in the drawer as in the example, but one for the whole app.
Of course, I know I could achieve it by using CSS, but I'm wondering if I'm setting wrong the polymer elements structure.
Just use core-header-panel in order to host your core-toolbar and core-drawer-panel. It will prevent core-drawer-panel of overlapping core-toolbar as you pictured in your example. Here is a jsfiddle and snipped:
http://jsfiddle.net/kreide/ehwa3w1n/
html, body {
height: 100%;
margin: 0;
}
core-header-panel {
height: 100%;
}
[drawer] {
box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1);
}
[main] {
height: 100%;
background-color: rgb(231, 238, 238);
}
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-elements/paper-elements.html">
<link rel="import" href="http://www.polymer-project.org/components/core-elements/core-elements.html">
<body fullbleed layout vertical>
<core-header-panel flex>
<core-toolbar>
<div>Hello World!</div>
</core-toolbar>
<div class="content">
<core-drawer-panel>
<section drawer>Left</section>
<section main>Right</section>
</core-drawer-panel>
</div>
</core-header-panel>
</body>
The solution by kreide doesn't work for Polymer 1.0
To affix paper-drawer-panel in 1.0 add a css style = "position:relative" to the drawer tag.
I've been using Polymer for a website redesign. I want to display an image that is bound to an element as a background-image. A fairly simple task, but unfortunately I'm having some issues.
I made a running sample of the code for easy testing: click me.
<polymer-element name="album-card" attributes="image">
<template>
<style>
:host{
display: block;
position: relative;
background-color: #99182c;
width: 200px;
}
.description{
padding: 10px;
color: white;
}
.circular{
width: 200px;
height: 200px;
background: url({{image}}) no-repeat;
background-color:green;
}
</style><link rel="stylesheet" href="default_styles.css">
<paper-shadow z="{{shadowValue}}" animated="true"></paper-shadow>
<div class="album-header" vertical layout>
<paper-ripple class="recenteringTouch" fit></paper-ripple>
<div class="circular">
<!--<img src="{{image}}" />--><!-- this does work -->
</div>
<div class="description">
<content select="h2"></content>
<content select="h4"></content>
</div>
</div>
</template>
<script>
Polymer('album-card');
</script>
</polymer-element>
The issue is in the css styling. For some reason the image doesn't diplay in the following line: background: url({{image}}) no-repeat;. However, when using {{image}} in the body somewhere else (in the <div class="circular">, the image does display.
Replacing the {{image}} inside the styling with the direct link also works.
What am I doing wrong?
This looks like a bug. The {{}} are being interrupted literally instead of being parsed by the template engine. Replacing them with [[]] one time bindings works: http://jsbin.com/yocokire/4/edit
However, you should avoi using data-binding inside of <style> if possible (see https://github.com/Polymer/polymer/issues/270#issuecomment-24683309). There are perforamnce concerns and issues under the polyfill. Instead, use a style attribute on the element and do your binding there: http://jsbin.com/riqizige/1/edit
Is it possible for asp.nt ascx controls to have their own client side load event, like a window.onload for each, so I can hide the loading divs and show the content div when http transfer is complete.
I have image menus and cycle galleries that seriously need some loading progress don't know how to implement them. The site is http://techlipse.net. Thx in advance.
There are a few ways you can do this. I would take advantage of the fact that the onload event is not triggered until all content on the page is completely loaded. Since it looks like your site is already using jQuery, all of the examples below will use that.
In your user controls, you can have them hidden by default. To do this, place a style attribute in a wrapper tag for your control:
<div style="display: none">
<!-- Optionally you could use "visibility: hidden"
instead of "display: none". This will keep the
control's placeholder, but not physically show it to the user.
-->
<!-- Your control content here -->
</div>
Inside of your control, you can then have JavaScript code like this (assuming jQuery will be included at the top of the page, which is the way your site is now). This would be placed directly in your control.
<script type="text/javascript">
$(window).load(function() {
$("#" + <%= this.ClientID %>).css("display", "block");
// If you chose to use visibility, try the following line instead
//$("#" + <%= this.ClientID %>).css("visibility", "visible");
});
</script>
To explain how this works...
When the browser initially loads the page, the control defaults to being hidden. It will not be rendered at all. jQuery subscribes to the load() event of your page. When the load event triggers, it will then display the control. This only happens once everything is finished loading.
You can also hide any "loading..." <div /> in this load event also.
Another option, which may be better depending on what you're doing, is to structure your page so you have 2 main divs. A "loading" div and a "content" div. The loading div would be shown by default with a generic loading message. The content div would be hidden by default (or just hidden behind an overly like my example below). The onload event removes the loading objects from the page and allows the images to be shown.
This example below displays a loading message over top of the entire page until it is finished loading.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Loading Test</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden/* Prevent user from scrolling. */
} /* Scrolling is re-enabled on load by JavaScript */
.loadingBackground {
background: #000;
filter: alpha(opacity=70); /* internet explorer */
-khtml-opacity: 0.7; /* khtml, old safari */
-moz-opacity: 0.7; /* mozilla, netscape */
opacity: 0.7; /* fx, safari, opera */
height: 100%;
width: 100%;
position: absolute;
}
.loadingWrapper {
position: absolute;
top: 15%;
width: 100%;
}
.loading {
margin: 0 auto;
width: 300px;
text-align: center;
background: #ffffff;
border: 3px solid #000;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('.loadingBackground, loadingWrapper, .loading').fadeOut('normal');
$('body').css('overflow', 'auto');
});
</script>
</head>
<body>
<div class="loadingBackground"></div>
<div class="loadingWrapper">
<div class="loading">
Please Wait...<br />
<img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/30-1.gif" />
</div>
</div>
<!-- Large Images included to increase load time to show the loading effect -->
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3c/KillaryHarbour.jpg"
style="height: 100%; width: 100%" />
<img src="http://upload.wikimedia.org/wikipedia/commons/6/6c/Ireland_-_Plains_of_South_Kildare.jpg"
style="height: 100%; width: 100%" />
</body>
</html>
You can add a listener to the load event... ( don't tie into the event directly as you might cause a different tie in to not be called )
Try using a JS library to help you listen to events, YUI, jQuery are fun.
http://developer.yahoo.com/yui/event/#start
var oElement = document.getElementById("myBody");
function fnCallback(e) { alert("i am loaded"); }
YAHOO.util.Event.addListener(oElement, "load", fnCallback);
YUI Library has a way to listen to when an area is "ready"
http://developer.yahoo.com/yui/event/#onavailable
You could have a listener that waits so see when a div is loaded, and then fire off some ajax to your long running processes.