Develop Reference

Typing and saving notes on every device

I am working on notes page. I want to be able to write notes and save them. Everything works perfectly except that I only see notes in one browser. For example if I open my website on Safari, I can save my notes and I'll be able to see them forever. But if I open my website on Chrome or my phone, the notes are empty. So I need to rewrite everything and save it. So every time I want to save something, I need to rewrite the same notes on every device which is ridiculous. So what I want to do is to make my notes visible on every device. I hope it makes sense.
What I have now:
<div class="logo">
<h1>
Notes
</h1>
<img src="icon.svg">
</div>
<main contenteditable="" autocorrect="off"></main>
<div class="icon">
<img src="icon-2-01.svg">
</div>
<button>Save</button>
<script src="main.js"></script>
html {
height: 100%;
}
body {
font-size: 14px;
font-family: Times New Roman;
height: 100%;
width: 100%;
overflow: hidden;
padding: 30px;
background-color: #50554f;
color: #FFF;
}
html {
margin: 0;
}
h1 {
top: 30px;
right: -65px;
font-size: 20px;
position: relative;
}
a {
text-transform: none;
color: #FFF;
text-decoration: none;
}
.logo {
top: 10px;
right: 10px;
float: right;
}
.logo img {
width: 220px;
margin-top: -20px;
}
main {
color: #FFF;
display: block;
height: calc(100% - 6.3em);
overflow: scroll;
outline: none;
}
.icon {
position: absolute;
bottom: 30px;
left: 30px;
}
.icon img {
width: 50px;
height: 50px;
}
button {
font-size: 1em;
margin-top: 80px;
font-size: 14px;
font-family: Times New Roman;
color: #FFF;
right: 30px;
float: right;
}
button, input[type="submit"], input[type="reset"] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
html {
overflow: scroll;
}
::-webkit-scrollbar {
width: 0px;
height: 0px;
background: transparent; /* make scrollbar transparent */
}
#media (max-width:600px) {
body {
position: fixed;
}
.logo {
display: block;
align-items: center;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
margin-bottom: 50px;
}
h1 {
margin-left: -130px;
}
main {
width: 80%;
height: calc(100% - 15em);
}
.icon {
display: none;
}
button {
position: relative;
left: 1px;
float: left;
}
}
var button = document.querySelector('button');
var main = document.querySelector('main');
if (localStorage['note'] === undefined ) {
localStorage['note'] = 'Save your note by typing in here and clicking the Save Button.<br>You can also press CMD + S / CTRL + S'
}
function siteLoad () {
main.innerHTML = localStorage['note'];
}
function buttonSave () {
localStorage['note'] = main.innerHTML;
}
function keySave (e) {
if (e.keyCode === 83 && e.metaKey || e.keyCode === 83 && e.ctrlKey) {
e.preventDefault();
localStorage['note'] = main.innerHTML;
}
}
if (window.addEventListener) {
window.addEventListener('load', siteLoad, false);
button.addEventListener('click', buttonSave, false);
main.addEventListener('keydown', keySave, false);
} else if (window.attachEvent) {
window.attachEvent('onload', siteLoad);
button.attachEvent('onclick', buttonSave);
main.attachEvent('keydown', keySave);
} else {
window.onload = siteLoad;
button.onclick = buttonSave;
main.onkeydown = keySave;
}

How do I add a once only function to this pop up code?

I asked this question yesterday, but I didn't use enough detail. I have this pop up code but I'm having trouble figuring out how to modify it for a once only action.
$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
color: #555555;
font-size: 20px;
font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='popup'>
<div class='cnt223'>
<h1>Important Notice</h1>
<p>
We were affected by the fire next door and will remain closed until further notice.
<br/>
<br/>
<a href='' class='close'>Close</a>
</p>
</div>
</div>
Code to produce a Javascript pop up on page load can be found here
Any help would be greatly appreciated. I'm not very good at this. How would I make this only appear once on page load?

Not sure if I fully understand what you mean by have the modal appear only once on page load. Is it that you want the modal to appear only on the first ever page load and not appear in any subsequent page reload? If so, then you can achieve this by using localStorage as follows
<script type='text/javascript'>
$(function () {
if (!localStorage['show-popup']) {
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function () {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function () {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
localStorage['show-popup'] = disable
}
});
</script>

echo on button class

I'm trying to build a multi step selector which has multiple combinations in every slide. for example hou have btn1, btn2 and btn3. Every button will display other content in the next slide.
It's an inpage multistep slider so I can't use onClick, submit input or something like that.
as you can see in the code below, I'm trying to get an echo on the name or value of the button who has been clicked in the slide before.
var currentSlide = 0,
$slideContainer = $('.slide-container'),
$slide = $('.slide'),
slideCount = $slide.length,
animationTime = 300;
function setSlideDimensions () {
var windowWidth = $(window).width();
$slideContainer.width(windowWidth * slideCount);
$slide.width(windowWidth);
}
function generatePagination () {
var $pagination = $('.pagination');
for(var i = 0; i < slideCount; i ++){
var $indicator = $('<div>').addClass('indicator'),
$progressBarContainer = $('<div>').addClass('progress-bar-container'),
$progressBar = $('<div>').addClass('progress-bar'),
indicatorTagText = $slide.eq(i).attr('data-tag'),
$tag = $('<div>').addClass('tag').text(indicatorTagText);
$indicator.append($tag);
$progressBarContainer.append($progressBar);
$pagination.append($indicator).append($progressBarContainer);
}
$pagination.find('.indicator').eq(0).addClass('active');
}
function goToNextSlide () {
if(currentSlide >= slideCount - 1) return;
var windowWidth = $(window).width();
currentSlide++;
$slideContainer.animate({
left: -(windowWidth * currentSlide)
});
setActiveIndicator();
$('.progress-bar').eq(currentSlide - 1).animate({
width: '100%'
}, animationTime);
}
function goToPreviousSlide () {
if(currentSlide <= 0) return;
var windowWidth = $(window).width();
currentSlide--;
$slideContainer.animate({
left: -(windowWidth * currentSlide)
}, animationTime);
setActiveIndicator();
$('.progress-bar').eq(currentSlide).animate({
width: '0%'
}, animationTime);
}
function postitionSlides () {
var windowWidth = $(window).width();
setSlideDimensions();
$slideContainer.css({
left: -(windowWidth * currentSlide)
}, animationTime);
}
function setActiveIndicator () {
var $indicator = $('.indicator');
$indicator.removeClass('active').removeClass('complete');
$indicator.eq(currentSlide).addClass('active');
for(var i = 0; i < currentSlide; i++){
$indicator.eq(i).addClass('complete');
}
}
setSlideDimensions();
generatePagination();
$(window).resize(postitionSlides);
$('.next').on('click', goToNextSlide);
$('.previous').on('click', goToPreviousSlide);
#charset "UTF-8";
*, html, body {
font-family: "TrebuchetMS", trebuchet, sans-serif;
}
* {
box-sizing: border-box;
}
h1, h2 {
text-align: center;
}
h1 {
font-size: 24px;
line-height: 30px;
font-weight: bold;
}
h2 {
font-size: 18px;
line-height: 25px;
margin-top: 20px;
}
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
padding: 14px 50px;
border-radius: 4px;
background-color: #37B595;
color: #FFFFFF;
text-transform: capitalize;
font-size: 18px;
line-height: 22px;
outline: none;
cursor: pointer;
transition: all 0.2s;
}
button:hover {
background-color: #1A7F75;
}
button.previous {
background-color: #A2ACAF;
}
button.previous:hover {
background-color: #5A5F61;
}
.full-width-container {
width: 100%;
min-width: 320px;
}
.sized-container {
max-width: 900px;
width: 100%;
margin: 0 auto;
}
.slide-container {
position: relative;
left: 0;
overflow: hidden;
}
.slide {
float: left;
}
.slide .sized-container {
padding: 75px 25px;
}
.button-container {
border-top: 1px solid black;
overflow: hidden;
padding-top: 30px;
}
.button-container button {
float: right;
margin-left: 30px;
}
.pagination-container {
margin-top: 120px;
}
.pagination {
width: 100%;
text-align: center;
padding: 0 25px;
}
.indicator {
width: 25px;
height: 25px;
border: 4px solid lightgray;
border-radius: 50%;
display: inline-block;
transition: all 0.3s;
position: relative;
}
.indicator .tag {
position: absolute;
top: -30px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
color: lightgray;
white-space: nowrap;
}
.indicator.active, .indicator.complete {
border-color: #37B595;
}
.indicator.active .tag, .indicator.complete .tag {
color: #37B595;
}
.indicator.complete:after {
content: "✓";
position: absolute;
color: #37B595;
left: 4px;
top: 3px;
font-size: 14px;
}
.progress-bar-container {
width: 10%;
height: 4px;
display: inline-block;
background-color: lightgray;
position: relative;
top: -10px;
}
.progress-bar-container:last-of-type {
display: none;
}
.progress-bar-container .progress-bar {
width: 0;
height: 100%;
background-color: #37B595;
}
<div class="pagination-container full-width-container">
<div class="sized-container">
<div class="pagination"></div>
</div>
</div>
<div class="viewport full-width-container">
<ul class="slide-container">
<li class="slide" data-tag="Basic Info">
<div class="sized-container">
<h1>Slide1.</h1>
<input class="next" name="next" type="button" value="next" />
</div>
</li>
<li class="slide" data-tag="Expertise">
<div class="sized-container">
<h1>Slide2.</h1>
</div>
</li>
</ul>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
Can someone please help me out!

How do I make a floating menu -> position:static

I want to make floating-menu position:static(or position:absolute. bottom:(floating-menu's height)), when it meets footer!
I made floating-bar originally position:static.
this operates moving up and down when scrolled.
I want to make this fixed or static..
$(window).bind(EVENT.SCROLL, function(){
if(($(window).scrollTop() + $(window).height()>= $('.footer-container').position().top)){
$('#floating-bar').css({'position': 'static'});
} else {
$('#floating-bar').css({'position': 'fixed'});
}
}).bind(EVENT.RESIZE, function(){
if(that.SCALE[0] > 900) sticky_sidebar();
});
#floating-bar{
display:block;
text-align: center;
bottom: 0;
position: static;
width: 100%; //position:fixed;
.check-price {
float:left;
padding: 20px 16px;
line-height: 23px;
background-color: #f1f4ff;
color: #emp-color;
font-size: 1.07em;
}
.order {
margin-left: 82px;
padding: 20px 63px;
background-color: #emp-color;
color: #fff;
font-size: 1.38em;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="floating-bar">
<div class="check-price">가격 확인</div>
<div class="order">R5 멤버십 신청하기</div>
</div>

here is my answer to me.
$(window).bind(EVENT.SCROLL, function(){
var floating_bar = $('#floating-bar');
if($(window).scrollTop() >= $(document).height() - $(window).height() - $('.footer-container').height() && !floating_bar.hasClass('unsticky')){
floating_bar.addClass('unsticky');
}
if($(window).scrollTop() < $(document).height() - $(window).height() - $('.footer-container').height() && floating_bar.hasClass('unsticky')){
floating_bar.removeClass('unsticky');
}
}).bind(EVENT.RESIZE, function(){
if(that.SCALE[0] > 900) sticky_sidebar();
});
#floating-bar {display:block; text-align: center; bottom: 0; position: fixed; z-index:5; width: 100%;
&.unsticky {position:absolute;}
.check-price {float:left; padding: 20px 16px; line-height: 23px; background-color: #f1f4ff; color: #emp-color; font-size: 1.07em;}
.order {margin-left: 82px; padding: 20px 0; background-color: #emp-color; color: #fff; font-size: 1.38em;}
}

Element Flashing

Everything works as intended except that optFA-1 flashes briefly when scrolling down. I'm not sure whether this is due to the CSS (I think not), or if a value's not been set appropriately in the JS.
$(function(){
var lastScrollTop = 0, delta = 5;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if(st === 0) {
$("#optFA-1").css('visibility','hidden').animate({opacity:0}, 100);
}
else{
if(Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop){
// downscroll code
$("#optFA-1").css('visibility','hidden').css('opacity', 0);
} else {
// upscroll code
$("#optFA-1").css('visibility','visible').css('opacity', 1);
}
lastScrollTop = st;
}
});
});
#optFA-1 {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
transition: all 0.3s;
z-index: 9;
background: #202020;
}
#optFA-1 img {
opacity: 1;
height: 42px;
width: 60px;
position: relative;
}
.optFA-L {
margin: 15px 0 15px 10px;
float: left;
height: 42px;
width: 60px;
overflow: hidden;
}
.optFA-R {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
position: absolute;
top: 12px;
line-height: 14px;
left: 78px;
right: 21px;
font-weight: bold;
color: #ffffff;
font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="optFA-1">
<div class="optFA-X"></div>
<div class="optFA-L"><img src=""></div>
<div class="optFA-R"><span>Next Up</span><br />Fairies Caught Smoking Crack in Beverly Hills</div>
</div>

Add opacity:0; to the flashing element in order to set its default state to "invisible" like so: https://jsfiddle.net/wtn69qfj/1/
The jQuery will work the same way but the element will appear transparent by default, on page load.