I have the following CSS on my HTML page:
<style type="text/css">
.hidden {display:none;}
.visible {display:block;}
</style>
And almost every and on the page belongs to one or the other of these CSS styles. What I need is the javascript to swap everything to it's opposite number....i.e. every hidden becomes visible and vice versa.
I was using something similar on an earlier project, but it only lets me swap one thing at a time, and forces me to specify it's ID directly. What I need is a global 'if visible - change to hidden - and vice versa' script.
The code (which I tried and failed to expand to have this behaviour) is below:
<script type="text/javascript">
function toggle(divID) {var item = document.getElementById(divID); if (item) {item.className=(item.className=='hidden')?'visible':'hidden';}}
</script>
Any ideas?
<style type="text/css">
.hidden {display:none;}
.visible {display:block;}
.temp {display:none;}
</style>
function swap() {
$('.hidden').removeClass('hidden').addClass('temp');
$('.visible').removeClass('visible').addClass('hidden');
$('.temp').removeClass('temp').addClass('visible');
}
Just use jQuery
$('.hidden').removeClass('.hidden').addClass('.visible');
Related
I was looking to get open/click tacking using AMP for Emails
but yet to find any conclusive document to get any idea that how I can get tracking using AMP for emails.
Below is the sample code give by AMP but there is no tracking link of something given.
<!--
## Introduction
This sample demonstrates how to display a feed of data, allowing the user to go through
a large number of items in an email without having to scroll.
The sample uses a combination of [`amp-list`](/documentation/components/amp-list),
to fetch the initial items from the server and [`amp-form`](/documentation/components/amp-form),
to "refresh" a single item, by making a new server request.
-->
<!-- -->
<!doctype html>
<html ⚡4email lang="en" data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<!--
## Styles
We use CSS to hide the initially fetched item after the form is first submitted.
We also define a layout that allows us to have fixed card sizes, to ensure form submissions don't result in content jumps.
-->
<style amp-custom>
.amp-form-submit-success .initial-content,
.amp-form-submitting .initial-content,
.amp-form-submit-error .initial-content {
display: none;
}
.card {
width: 160px;
height: 120px;
margin: 10px;
float: left;
position: relative;
}
.card .next-button {
position: absolute;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<!--
## Single item template
Define a template for a single item inside a card and give it an `id`. This template is used by `amp-form` for displaying new items.
In this case, we use a single `amp-img`.
-->
<template id="item-template" type="amp-mustache">
<amp-img src="{{items.imageUrl}}" layout="fixed" width="160" height="90"></amp-img>
</template>
<!--
## Initial list of items
We define a template for the initial items and their layout and give it an `id`, allowing us to use it subsequently in an amp-list. This template is used by `amp-list` for fetching the initial up-to-date contents from the server.
It contains in itself an `amp-form` for each item which references the template defined above referred by its `id`. By using a different template for the `amp-form`, we're able to "refresh" a part of the content, namely the image in this case.
Note: This template contains the same markup (in this case, a single `amp-img`) as used in the template above to render the initial items. This is wrapped inside `<div class="initial-content">` which becomes hidden the first time the user submits the form.
-->
<template id="list-template" type="amp-mustache">
<form class="card" method="post" action-xhr="https://amp.dev/documentation/examples/api/photo-stream?single&width=160&height=90">
<div class="initial-content">
<amp-img src="{{imageUrl}}" layout="fixed" width="160" height="90"></amp-img>
</div>
<div submit-success template="item-template"></div>
<input class="next-button" type="submit" value="Next">
</form>
</template>
<!--
We use `amp-list` to render the initial items from the server using the template defined above referred by its `id`.
The height matches the combined height of our cards and their margins. The initial server response defines the number of cards to be displayed (in this case four).
-->
<amp-list template="list-template" src="https://amp.dev/documentation/examples/api/photo-stream?width=160&height=90&items=4" layout="fixed" width="360" height="280">
</amp-list>
</body>
</html>
Can anyone give a idea to implement tracking on this?
Thanks
The documentation says "AMPHTML allows tracking email opens with pixel tracking techniques, same as regular HTML emails."
There is therefore no specific AMP way of doing it--it's just normal.
So, normally the ESP handles open tracking, and perhaps click tracking too, by rewriting the URLs. Alternatively, you can add for example UTM links if you use Google Analytics on the site the links are going to.
So I need to add the attribute media="all" to these two link tags:
<link rel="stylesheet" href="/etc.clientlibs/farmers/clientlibs/clientlib-libraries.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/farmers/clientlibs/clientlib-base.css" type="text/css">
but my local HTML file is configured as:
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientlib.css # categories=['farmers.new.libraries','farmers.new.base']}" /> </sly>
It is a language called HTL, HTML Template Language. There's a way to add attributes via HTL but you need to create a whole java class in the back end and call it, it's a headache.
I want to know if I can add some javascript to append the attribute media="all" to the link tags to these specific CSS file path.
I was thinking of putting both paths inside a div and then with javascript find that div and append an attribute to each link tag inside that div.
var head = document.getElementsByTagName('head');
var element = document.createElement('link');
element.rel = 'stylesheet';
element.type = 'text/css';
element.href = '/etc.clientlibs/farmers/clientlibs/clientlib-libraries.css';
// Here's the magic
element.media = 'all';
head.appendChild(element, head.firstChild);
setTimeout(function () {
element.media = 'all';
});
A script tag is being created and I want to add async="" to this:
<!--/* Include Context Hub */-->
<sly data-sly-call="${clientlib.js # categories='granite.utils'}" />
<sly data-sly-resource="${'contexthub' # resourceType='granite/contexthub/components/contexthub'}" />
Yes, it looks fine. But your code has a mistake. You should get the first element from the collection to access <head></head> element.
var head = document.getElementsByTagName('head')[0];
Why would you do that? Just do not use the clientlib mechanism. Most frontend developers will use their IDEs to build and minify CSS and JS anyway so there is not much to be lost if you import those artifacts at buildtime and add the tags in your code directly in the way you need them.
I am working on a set of Polymer elements (buttons in this particular case) some of which should re-use the same HTML snippet. A structure for a custom button is as follows:
...
<link rel="import" href="button-base.html" id="content">
<link rel="import" href="styles.html">
<link rel="import" href="behavior.html">
<dom-module id="dg-button">
<template>
<style include="button-styles"></style>
<!-- HERE I want the content of button-base.html -->
</template>
<script>
Polymer({
is: 'custom-button',
behaviors: [DG.ButtonBehavior]
});
</script>
</dom-module>
Styles and behavior work as they should.
The problem is: I am not sure how to get content of button-base.html into the specified place of the local DOM without defining button-base as yet another element and then using it as <button-base></button-base>.
The reasons I want to avoid converting it to the new element are:
I want the content of button-base to be a first-class citizen of the custom-button element's local DOM so that all the methods defined in the behavior would still apply using just this.myMethod() for buttons that do not import button-base and rather use custom local DOM.
I need to be able to declaratively set properties on this new custom-button so that they get reflected on DOM elements within button-base.html automatically.
For example, the content of the button-base.html is as follows:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<paper-button id="internalButton" raised$="[[raised]]">
<span id="defaultContent">
<content></content>
</span>
</paper-button>
I would like to set raised on my custom-button in a way that it gets mapped to paper-button automatically without proxying all of the possible attributes through a new element (in case I define base-button as a new element and import it as <base-button></base-button> in custom-button).
Any ideas on how to make this import work?
Is there any way to change the font color in scribble with an HTML backend?
(More specifically, I want to put a large red WARNING label in the manual for a library.)
It turns out you can do this directly in scribble without using a backend dependent solution. The trick is to use styles that have color-property.
Using elem to set the style, as shown here, you can create a colorize function, that sets the color of your text.
(define (colorize #:color c . content)
(elem #:style (style #f (list (color-property c)))
content))
And then you could use it like this:
#colorize[#:color "red"]{WARNING}
There is also background-color-property you can sue to set the background of the text.
As Alexis mentioned, you can use a class paired with a Cascading Style Sheet (CSS) like so:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!-- that's to link our styles to the webpage. -->
</head>
<body>
<!-- some time later... -->
<p class = "example">test</p>
<!-- the rest of the website -->
And in mystyle.css:
.example{ /* select all tags with the "example" class */
color: #FF0000; /* change font color using hex value */
background-color: #552222; /* change background color using hex value */
}
Now, this would be great if we were able to use multiple files. But, if you want to have it all in one file, we can send that same information in a <style> tag:
<head>
<!-- no need to link our styles, since they're embedded in the webpage. -->
</head>
<body>
<style>
.example{ /* select all tags with the "example" class */
color: #FF0000; /* change font color using hex value */
background-color: #552222; /* change background color using hex value */
}
</style>
<!-- some time later... -->
<p class = "example">test</p>
<!-- the rest of the website -->
There's another way to embed it, but you shouldn't use it. Ever. This is always the correct way.
See http://www.w3schools.com/css/css_examples.asp if you need anything more from the CSS side of things.
Manually creating a style struct containing an attributes property appears to work:
#lang scribble/base
#(require scribble/core
scribble/html-properties)
#para[#:style (style #f `(,(attributes '([style . "color:blue;"]))))]{blue text}
I don't understand how to use XUI tween. On the xui website, they give the following example code:
x$('#box').tween([{left:'100px', backgroundColor:'green', duration:.2 }, { right:'100px' }]);
What is that supposed to do? I created a <div id="box"></div>, ran the line of js code above, but nothing happened. Here's my complete code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="xui.min.js"></script>
<script type="text/javascript">
x$('#box').tween([{left:'100px', backgroundColor:'green', duration:.2 }, { right:'100px' }]);
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
Nothing happens...
So, XUI's tween seems to be a work in process. In fact, in the master branch code on GitHub you find:
// queued animations
/* wtf is this?
if (props instanceof Array) {
// animate each passing the next to the last callback to enqueue
props.forEach(function(a){
});
}
*/
So, in short, the array-based tween properties appear busted at the moment. In addition, XUI's tween seems to be a little flakey when dealing with properties that are not currently set on the DOM element. (For example, setting the background-color on a transparent element turns it black...rather than the intended color.)
That said, the single tween and callback work well on previously set properties. So take a look at the following (and excuse the inline css):
<html>
<head>
<script type="text/javascript" src="http://xuijs.com/downloads/xui-2.3.2.min.js"></script>
<script type="text/javascript">
x$.ready(function(){
setTimeout(function(){
x$('#box').tween({'left':'100px', 'background-color':'#339900', duration:2000}, function(){
x$('#box').tween({'left':'500px', duration:2000});
});
}, 500);
});
</script>
</head>
<body style="position:relative;">
<div id="box" style="position:absolute;top:50px;left:500px;width:100px;height:100px;background-color:#fff;border:1px solid #000;">the box</div>
</body>
</html>
Because #box now has a css background-property and left position explicitly set, it is relatively easy to produce an effect similar to the one desired.
One-half second after the page loads, #box should spend 2 seconds moving from left:500px to left:100px while turning the background color from white to green. Then, using the callback, #box moves back to its original position at left:500px--taking another 2 seconds to get back.
Obviously, this does not answer your exact question but for those (like me) who stumble upon this, it provides a workaround for the time being.