Skip to content

Instantly share code, notes, and snippets.

@iho

iho/top_bar.js

Created January 15, 2016 17:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save iho/bbe20dd8b021d896f6c0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save iho/bbe20dd8b021d896f6c0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
top_bar.js
var top_bar_html= `<div id="headbar">
<div id="wrap-headbar">
Subscribe!
<form action="http://mailing.beutl.com/subscribe" method="POST" accept-charset="utf-8" style="display: inline" id="bar-form" >
<input type="email" name="email" id="bar-email-input">
<input type="hidden" name="list" value="le5EE55cSN240vv68lOLPA"/>
<input id="bar-submit-button" type="submit" value="SUBMIT" >
<span id="bar-close-button">X</span>
</form>
WOW
</div>
</div>
<style>
#headbar{
display: none;
background:#eb593c;
width:100%;
text-align:center;
color:#fff;
padding:2px;
overflow:hidden;
height:33px;
z-index:1000;
font-family:Georgia;
font-size:14px;
line-height:30px;
position:fixed;
top:0;
left:0;
/* border-bottom:3px solid rgb(255,255,255); */
box-shadow:0 1px 5px rgba(0,0,0,.7)
}
#bar-close-button{
float: right;
margin-right: 40px;
}
#bar-submit-button{
animation-delay: 0s;
animation-direction: normal;
animation-duration: 0s;
animation-fill-mode: none;
animation-iteration-count: 1;
animation-name: none;
animation-play-state: running;
animation-timing-function: ease;
background-attachment: scroll;
background-blend-mode: normal;
background-clip: border-box;
background-color: rgb(255, 160, 0);
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
border-bottom-color: rgb(0, 0, 0);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: none;
border-bottom-width: 0px;
border-collapse: separate;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(0, 0, 0);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(0, 0, 0);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(0, 0, 0);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: none;
border-top-width: 0px;
bottom: auto;
box-shadow: none;
box-sizing: border-box;
caption-side: top;
clear: none;
clip: auto;
color: rgb(0, 0, 0);
content: ;
cursor: pointer;
direction: ltr;
display: inline-block;
empty-cells: show;
float: none;
font-family: Raleway;
font-kerning: auto;
font-size: 12px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-variant-ligatures: normal;
font-weight: normal;
height: 26px;
image-rendering: auto;
isolation: auto;
left: auto;
letter-spacing: normal;
line-height: normal;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin-bottom: 2.4px;
margin-left: 6px;
margin-right: 6px;
margin-top: 2.4px;
max-height: none;
max-width: none;
min-height: 0px;
min-width: 0px;
mix-blend-mode: normal;
motion-offset: 0px;
motion-path: none;
motion-rotation: auto 0deg;
object-fit: fill;
object-position: 50% 50%;
opacity: 1;
orphans: auto;
outline-color: rgb(0, 0, 0);
outline-offset: 0px;
outline-style: none;
outline-width: 0px;
overflow-wrap: normal;
overflow-x: visible;
overflow-y: visible;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
padding-top: 6px;
page-break-after: auto;
page-break-before: auto;
page-break-inside: auto;
pointer-events: auto;
position: static;
resize: none;
right: auto;
speak: normal;
table-layout: auto;
tab-size: 8;
text-align: center;
text-align-last: auto;
text-decoration: none;
text-indent: 0px;
text-rendering: auto;
text-shadow: none;
text-overflow: clip;
text-transform: none;
top: auto;
touch-action: auto;
transition-delay: 0s;
transition-duration: 0s;
transition-property: all;
transition-timing-function: ease;
unicode-bidi: normal;
vertical-align: middle;
visibility: visible;
white-space: pre;
widows: 1;
width: 99px;
will-change: auto;
word-break: normal;
word-spacing: 0px;
word-wrap: normal;
z-index: auto;
zoom: 1;
-webkit-appearance: none;
backface-visibility: visible;
-webkit-background-clip: border-box;
-webkit-background-composite: source-over;
-webkit-background-origin: padding-box;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-image: none;
-webkit-border-vertical-spacing: 0px;
-webkit-box-align: stretch;
-webkit-box-decoration-break: slice;
-webkit-box-direction: normal;
-webkit-box-flex: 0;
-webkit-box-flex-group: 1;
-webkit-box-lines: single;
-webkit-box-ordinal-group: 1;
-webkit-box-orient: horizontal;
-webkit-box-pack: start;
-webkit-box-reflect: none;
-webkit-clip-path: none;
-webkit-column-break-after: auto;
-webkit-column-break-before: auto;
-webkit-column-break-inside: auto;
-webkit-column-count: auto;
-webkit-column-gap: normal;
-webkit-column-rule-color: rgb(0, 0, 0);
-webkit-column-rule-style: none;
-webkit-column-rule-width: 0px;
-webkit-column-span: none;
-webkit-column-width: auto;
-webkit-filter: none;
align-content: stretch;
align-items: flex-start;
align-self: stretch;
flex-basis: auto;
flex-grow: 0;
flex-shrink: 1;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
-webkit-font-smoothing: antialiased;
-webkit-highlight: none;
-webkit-hyphenate-character: auto;
-webkit-line-break: auto;
-webkit-line-clamp: none;
-webkit-locale: "en-US";
-webkit-margin-before-collapse: collapse;
-webkit-margin-after-collapse: collapse;
-webkit-mask-box-image: none;
-webkit-mask-box-image-outset: 0px;
-webkit-mask-box-image-repeat: stretch;
-webkit-mask-box-image-slice: 0 fill;
-webkit-mask-box-image-source: none;
-webkit-mask-box-image-width: auto;
-webkit-mask-clip: border-box;
-webkit-mask-composite: source-over;
-webkit-mask-image: none;
-webkit-mask-origin: border-box;
-webkit-mask-position: 0% 0%;
-webkit-mask-repeat: repeat;
-webkit-mask-size: auto;
order: 0;
perspective: none;
perspective-origin: 49.5px 13px;
-webkit-print-color-adjust: economy;
-webkit-rtl-ordering: logical;
shape-outside: none;
shape-image-threshold: 0;
shape-margin: 0px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.180392);
-webkit-text-combine: none;
-webkit-text-decorations-in-effect: none;
-webkit-text-emphasis-color: rgb(0, 0, 0);
-webkit-text-emphasis-position: over;
-webkit-text-emphasis-style: none;
-webkit-text-fill-color: rgb(0, 0, 0);
-webkit-text-orientation: vertical-right;
-webkit-text-security: none;
-webkit-text-stroke-color: rgb(0, 0, 0);
-webkit-text-stroke-width: 0px;
transform: none;
transform-origin: 49.5px 13px;
transform-style: flat;
-webkit-user-drag: auto;
-webkit-user-modify: read-only;
-webkit-user-select: none;
-webkit-writing-mode: horizontal-tb;
-webkit-app-region: no-drag;
buffered-rendering: auto;
clip-path: none;
clip-rule: nonzero;
mask: none;
filter: none;
flood-color: rgb(0, 0, 0);
flood-opacity: 1;
lighting-color: rgb(255, 255, 255);
stop-color: rgb(0, 0, 0);
stop-opacity: 1;
color-interpolation: sRGB;
color-interpolation-filters: linearRGB;
color-rendering: auto;
fill: rgb(0, 0, 0);
fill-opacity: 1;
fill-rule: nonzero;
marker-end: none;
marker-mid: none;
marker-start: none;
mask-type: luminance;
shape-rendering: auto;
stroke: none;
stroke-dasharray: none;
stroke-dashoffset: 0px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-opacity: 1;
stroke-width: 1px;
alignment-baseline: auto;
baseline-shift: 0px;
dominant-baseline: auto;
text-anchor: start;
writing-mode: lr-tb;
glyph-orientation-horizontal: 0deg;
glyph-orientation-vertical: auto;
vector-effect: none;
paint-order: fill stroke markers;
cx: 0px;
cy: 0px;
x: 0px;
y: 0px;
r: 0px;
rx: 0px;
ry: 0px;
animation: none 0s ease 0s 1 normal none running;
background: rgb(255, 160, 0) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(0, 0, 0);
border-top: 0px none rgb(0, 0, 0);
border-right: 0px none rgb(0, 0, 0);
border-bottom: 0px none rgb(0, 0, 0);
border-left: 0px none rgb(0, 0, 0);
border-width: 0px;
border-color: rgb(0, 0, 0);
border-style: none;
border-radius: 3px 3px 3px 3px;
border-image: none;
border-spacing: 0px 0px;
flex: 0 1 auto;
flex-flow: row nowrap;
font: normal normal normal normal 12px / normal Raleway;
list-style: disc outside none;
margin: 2.4px 6px;
marker: ;
outline: rgb(0, 0, 0) none 0px;
overflow: visible;
padding: 6px 10px;
transition: all 0s ease 0s;
-webkit-border-after: 0px none rgb(0, 0, 0);
-webkit-border-before: 0px none rgb(0, 0, 0);
-webkit-border-end: 0px none rgb(0, 0, 0);
-webkit-border-start: 0px none rgb(0, 0, 0);
-webkit-margin-collapse: ;
-webkit-mask: ;
-webkit-text-emphasis: ;
-webkit-transition: all 0s ease 0s;
-webkit-transform-origin: 49.5px 13px;
}
#bar-email-input{
animation-delay: 0s;
animation-direction: normal;
animation-duration: 0s;
animation-fill-mode: none;
animation-iteration-count: 1;
animation-name: none;
animation-play-state: running;
animation-timing-function: ease;
background-attachment: scroll;
background-blend-mode: normal;
background-clip: border-box;
background-color: rgb(255, 255, 255);
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
border-bottom-color: rgb(102, 102, 102);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: none;
border-bottom-width: 0px;
border-collapse: separate;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(102, 102, 102);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(102, 102, 102);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(102, 102, 102);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: none;
border-top-width: 0px;
bottom: auto;
box-shadow: none;
box-sizing: border-box;
caption-side: top;
clear: none;
clip: auto;
color: rgb(102, 102, 102);
content: ;
cursor: auto;
direction: ltr;
display: inline-block;
empty-cells: show;
float: none;
font-family: Raleway;
font-kerning: auto;
font-size: 12px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-variant-ligatures: normal;
font-weight: normal;
height: 26px;
image-rendering: auto;
isolation: auto;
left: auto;
letter-spacing: normal;
line-height: normal;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin-bottom: 2.4px;
margin-left: 6px;
margin-right: 6px;
margin-top: 2.4px;
max-height: none;
max-width: none;
min-height: 0px;
min-width: 0px;
mix-blend-mode: normal;
motion-offset: 0px;
motion-path: none;
motion-rotation: auto 0deg;
object-fit: fill;
object-position: 50% 50%;
opacity: 1;
orphans: auto;
outline-color: rgb(102, 102, 102);
outline-offset: 0px;
outline-style: none;
outline-width: 0px;
overflow-wrap: normal;
overflow-x: visible;
overflow-y: visible;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
padding-top: 6px;
page-break-after: auto;
page-break-before: auto;
page-break-inside: auto;
pointer-events: auto;
position: static;
resize: none;
right: auto;
speak: normal;
table-layout: auto;
tab-size: 8;
text-align: start;
text-align-last: auto;
text-decoration: none;
text-indent: 0px;
text-rendering: auto;
text-shadow: none;
text-overflow: clip;
text-transform: none;
top: auto;
touch-action: auto;
transition-delay: 0s;
transition-duration: 0s;
transition-property: all;
transition-timing-function: ease;
unicode-bidi: normal;
vertical-align: middle;
visibility: visible;
white-space: normal;
widows: 1;
width: 150px;
will-change: auto;
word-break: normal;
word-spacing: 0px;
word-wrap: normal;
z-index: auto;
zoom: 1;
-webkit-appearance: none;
backface-visibility: visible;
-webkit-background-clip: border-box;
-webkit-background-composite: source-over;
-webkit-background-origin: padding-box;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-image: none;
-webkit-border-vertical-spacing: 0px;
-webkit-box-align: stretch;
-webkit-box-decoration-break: slice;
-webkit-box-direction: normal;
-webkit-box-flex: 0;
-webkit-box-flex-group: 1;
-webkit-box-lines: single;
-webkit-box-ordinal-group: 1;
-webkit-box-orient: horizontal;
-webkit-box-pack: start;
-webkit-box-reflect: none;
-webkit-clip-path: none;
-webkit-column-break-after: auto;
-webkit-column-break-before: auto;
-webkit-column-break-inside: auto;
-webkit-column-count: auto;
-webkit-column-gap: normal;
-webkit-column-rule-color: rgb(102, 102, 102);
-webkit-column-rule-style: none;
-webkit-column-rule-width: 0px;
-webkit-column-span: none;
-webkit-column-width: auto;
-webkit-filter: none;
align-content: stretch;
align-items: stretch;
align-self: stretch;
flex-basis: auto;
flex-grow: 0;
flex-shrink: 1;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
-webkit-font-smoothing: antialiased;
-webkit-highlight: none;
-webkit-hyphenate-character: auto;
-webkit-line-break: auto;
-webkit-line-clamp: none;
-webkit-locale: "en-US";
-webkit-margin-before-collapse: collapse;
-webkit-margin-after-collapse: collapse;
-webkit-mask-box-image: none;
-webkit-mask-box-image-outset: 0px;
-webkit-mask-box-image-repeat: stretch;
-webkit-mask-box-image-slice: 0 fill;
-webkit-mask-box-image-source: none;
-webkit-mask-box-image-width: auto;
-webkit-mask-clip: border-box;
-webkit-mask-composite: source-over;
-webkit-mask-image: none;
-webkit-mask-origin: border-box;
-webkit-mask-position: 0% 0%;
-webkit-mask-repeat: repeat;
-webkit-mask-size: auto;
order: 0;
perspective: none;
perspective-origin: 75px 13px;
-webkit-print-color-adjust: economy;
-webkit-rtl-ordering: logical;
shape-outside: none;
shape-image-threshold: 0;
shape-margin: 0px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.180392);
-webkit-text-combine: none;
-webkit-text-decorations-in-effect: none;
-webkit-text-emphasis-color: rgb(102, 102, 102);
-webkit-text-emphasis-position: over;
-webkit-text-emphasis-style: none;
-webkit-text-fill-color: rgb(102, 102, 102);
-webkit-text-orientation: vertical-right;
-webkit-text-security: none;
-webkit-text-stroke-color: rgb(102, 102, 102);
-webkit-text-stroke-width: 0px;
transform: none;
transform-origin: 75px 13px;
transform-style: flat;
-webkit-user-drag: auto;
-webkit-user-modify: read-only;
-webkit-user-select: text;
-webkit-writing-mode: horizontal-tb;
-webkit-app-region: no-drag;
buffered-rendering: auto;
clip-path: none;
clip-rule: nonzero;
mask: none;
filter: none;
flood-color: rgb(0, 0, 0);
flood-opacity: 1;
lighting-color: rgb(255, 255, 255);
stop-color: rgb(0, 0, 0);
stop-opacity: 1;
color-interpolation: sRGB;
color-interpolation-filters: linearRGB;
color-rendering: auto;
fill: rgb(0, 0, 0);
fill-opacity: 1;
fill-rule: nonzero;
marker-end: none;
marker-mid: none;
marker-start: none;
mask-type: luminance;
shape-rendering: auto;
stroke: none;
stroke-dasharray: none;
stroke-dashoffset: 0px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-opacity: 1;
stroke-width: 1px;
alignment-baseline: auto;
baseline-shift: 0px;
dominant-baseline: auto;
text-anchor: start;
writing-mode: lr-tb;
glyph-orientation-horizontal: 0deg;
glyph-orientation-vertical: auto;
vector-effect: none;
paint-order: fill stroke markers;
cx: 0px;
cy: 0px;
x: 0px;
y: 0px;
r: 0px;
rx: 0px;
ry: 0px;
animation: none 0s ease 0s 1 normal none running;
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(102, 102, 102);
border-top: 0px none rgb(102, 102, 102);
border-right: 0px none rgb(102, 102, 102);
border-bottom: 0px none rgb(102, 102, 102);
border-left: 0px none rgb(102, 102, 102);
border-width: 0px;
border-color: rgb(102, 102, 102);
border-style: none;
border-radius: 3px 3px 3px 3px;
border-image: none;
border-spacing: 0px 0px;
flex: 0 1 auto;
flex-flow: row nowrap;
font: normal normal normal normal 12px / normal Raleway;
list-style: disc outside none;
margin: 2.4px 6px;
marker: ;
outline: rgb(102, 102, 102) none 0px;
overflow: visible;
padding: 6px 10px;
transition: all 0s ease 0s;
-webkit-border-after: 0px none rgb(102, 102, 102);
-webkit-border-before: 0px none rgb(102, 102, 102);
-webkit-border-end: 0px none rgb(102, 102, 102);
-webkit-border-start: 0px none rgb(102, 102, 102);
-webkit-margin-collapse: ;
-webkit-mask: ;
-webkit-text-emphasis: ;
-webkit-transition: all 0s ease 0s;
-webkit-transform-origin: 75px 13px;
}
</style>
`;
(function(){
var $ = jQuery;
$( document ).ready(function() {
var url = "http://mailing.beutl.com/subscribe";
var list = "le5EE55cSN240vv68lOLPA";
var hide = function(){
// with animation
$( "#headbar" ).slideUp(500);
$( ".container" ).animate({ 'margin-top': '0px'}, 500);
// speed hide without animation
// $( "#bar-close-button" ).click(function(){
// $( "#headbar" ).hide();
// $( ".container" ).css({ 'margin-top': '0px'});
// });
};
if (!$.cookie('is_show_top_bar')) {
$( top_bar_html ).insertBefore( "#head" );
$( ".container" ).css({ 'margin-top': '33px'});
$( "#headbar" ).show(500);
$( "#bar-form" ).submit(function(e){
$.cookie('is_show_top_bar', "false")
// var email = $('#bar-email-input').val();
// $.post(url, {list:list, email:email},
// function(data) {
// console.log(data);
// hide();
// })
});
$( "#bar-close-button" ).click(function(){
$.cookie('is_show_top_bar', "false")
hide()
});
}
});
}.apply(jQuery))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment