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;
}

Auto resize text element not working with keyup

In my below jQuery I have an element that reflects the written input within a secondary element. At the same time the element with the reflected text needs to resize, this is working, but there are 2 problems I cannot resolve:
1. When holding a backspace down, it doesn't keep up.
2. When you press single backspace, it skips a character and field cannot be emptied.
Please see below snippet:
jQuery(document).ready( function() {
jQuery(function(){
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
}).on('input', function () {
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
});
jQuery('#vanity-url').bind('keypress keyup blur', function() {
jQuery('#reflection').val(jQuery(this).val());
});
});
body {
background-color: #e4e4e4;
font-family: Arial;
}
#vanity-url-wrapper {
margin-top: 3em;
text-align: center;
}
#vanity-url-wrapper > span {
background-color: #FBE3CF;
border-radius: 8px;
padding: 0.5em 0;
border: 2px solid orange;
}
.pre-span {
background-color: orange;
color: white;
font-weight: bold;
padding: 0.5em;
}
#vanity-url {
display: block;
text-align: center;
width: 12em;
margin: 3em auto;
font-size: 1.2em;
border-radius: 5px;
border: 2px solid orange;
padding: 0.5em;
}
#vanity-span{
padding: 0.5em;
}
#reflection {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div id="vanity-url-wrapper">
<span>
<span class="pre-span">https://example.com/</span>
<span id="vanity-span"></span>
<input id="reflection" type="text" readonly>
<span class="pre-span">/</span>
</span>
</div>
<input id="vanity-url" type="text" placeholder="Type here your vanity URL">
</body>

The problem is that the .bind('keypress keyup blur', function() { is not cooping well with updating the values. When the key is down it needs an update and is waiting for up, it then skips, and vice versa.
So the solution here is to use .on('input', function() { instead.
See below outcome:
jQuery(document).ready( function() {
jQuery(function(){
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
}).on('input', function () {
jQuery('#vanity-span').text(jQuery('#reflection').val());
jQuery('#reflection').width(jQuery('span').width());
});
jQuery('#vanity-url').on('input', function() {
jQuery('#reflection').val(jQuery(this).val());
});
});
body {
background-color: #e4e4e4;
font-family: Arial;
}
#vanity-url-wrapper {
margin-top: 3em;
text-align: center;
}
#vanity-url-wrapper > span {
background-color: #FBE3CF;
border-radius: 8px;
padding: 0.5em 0;
border: 2px solid orange;
}
.pre-span {
background-color: orange;
color: white;
font-weight: bold;
padding: 0.5em;
}
#vanity-url {
display: block;
text-align: center;
width: 12em;
margin: 3em auto;
font-size: 1.2em;
border-radius: 5px;
border: 2px solid orange;
padding: 0.5em;
}
#vanity-span{
padding: 0.5em;
}
#reflection {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div id="vanity-url-wrapper">
<span>
<span class="pre-span">https://example.com/</span>
<span id="vanity-span"></span>
<input id="reflection" type="text" readonly>
<span class="pre-span">/</span>
</span>
</div>
<input id="vanity-url" type="text" placeholder="Type here your vanity URL">
</body>

Generating HTML based on search functions result

I am working in ASP.NET MVC 5 and I want to generate HTML based on the search functions result. A simple filter that filters on Title. This is how I want the accordion to look.
//Accordion-----------------------------------------------
$(".accordion-desc").fadeOut(0);
$(".accordion").click(function() {
$(".accordion-desc").not($(this).next()).slideUp('fast');
$(this).next().slideToggle(400);
});
$(".accordion").click(function() {
$(".accordion").not(this).find(".rotate").removeClass("down");
$(this).find(".rotate").toggleClass("down");
});
//-----------------------------------------------------------
body {
background-color: #eee;
font-family: "Open Sans", sans-serif;
}
header {
background-color: #2cc185;
color: #fff;
padding: 2em 1em;
margin-bottom: 1.5em;
}
h1 {
font-weight: 300;
text-align: center;
}
.container {
position: relative;
margin: 0 auto;
}
button {
background-color: #2cc185;
color: #fff;
border: 0;
padding: 1em 1.5em;
}
button:hover {
background-color: #239768;
color: #fff;
}
button:focus {
background-color: #239768;
color: #fff;
}
.accordion {
position: relative;
background-color: #fff;
display: inline-block;
width: 100%;
border-top: 1px solid #f1f4f3;
border-bottom: 1px solid #f1f4f3;
font-weight: 700;
color: #74777b;
vertical-align: middle;
}
/*Rotation-------------------------------------*/
.accordion .fa {
position: relative;
float: right;
}
.rotate {
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.rotate.down {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
/*------------------------------------------*/
.link {
text-align: right;
margin-bottom: 20px;
margin-right: 30px;
}
.accordion h4 {
position: relative;
/* top: 0.8em; */
margin: 0;
font-size: 14px;
font-weight: 700;
float: left;
}
.accordion a {
position: relative;
display: block;
color: #74777b;
padding: 1em 1em 2.5em 1em;
text-decoration: none;
}
.accordion a:hover {
text-decoration: none;
color: #2cc185;
background-color: #e7ecea;
transition: 0.3s;
}
.accordion-desc {
background-color: #f1f4f3;
color: #74777b;
z-index: 2;
padding: 20px 15px;
}
#media (min-width:480px) {
.container {
max-width: 80%;
}
}
#media (min-width:768px) {
.container {
max-width: 1000px;
}
}
.accordion-desc p {
word-break: break-all;
}
.accordion .status {
position: relative;
float: right;
right: 20%;
vertical-align: middle;
}
.btn {
margin-top: 10px;
}
.heading {
margin: 10px 0px 10px 0px;
vertical-align: middle;
display: inline-block;
position: relative;
width: 100%;
}
.heading h2 {
float: left;
position: relative;
margin: auto;
vertical-align: middle;
}
.heading .searcheBar {
float: right;
position: relative;
margin: auto;
vertical-align: middle;
}
.checkboxInput {
float: right;
position: relative;
margin: auto;
vertical-align: middle;
right: 40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="acc" class="accordion">
<a href="#">
<h4 id="title"></h4>
<h4 class="status">#Resource.AccordionStatus</h4>
<i class="fa fa-chevron-right rotate"></i>
</a>
</div>
<div class="accordion-desc">
<h3>#Resource.AccordionProjectLead</h3>
<h4>Kay Wiberg</h4>
<h3>#Resource.AccordionDescription</h3>
<p id="description">
<p>
<div class="link">
<a id="link" class="btn btn-success" href="">#Resource.AccordionGoTo</a>
</div>
</div>
I wanted to show a snippet of the malfunctioning code, but could not get it to work as a snippet. But here it is flat:
$("#searcheBar").on("keyup", function () {
var input = "";
input = this.value;
var strInput = globalModel;//Array from Ajax call
var accordionWrapper = document.getElementById("acc");
var myHtml = "";
for (i = 0; i < strInput.length; i++) {
if (strInput[i]["Title"].indexOf(input) > -1) {
myHtml += '<h4 id="title">' + (strInput[i]["Title"]) + '</h4><h4 class="status">#Resource.AccordionStatus</h4><i class="fa fa-chevron-right rotate"></i> </div><div class="accordion-desc"><h3>#Resource.AccordionProjectLead</h3><h4>Kay Wiberg</h4><p id ="description">' + (strInput[i]["Description"]) + '<p><div class="link"><a id="link" class ="btn btn-success" href="' + (strInput[i]["Url"]) + '">#Resource.AccordionGoTo</a></div></div>';
}
}
accordionWrapper .innerHTML = myHtml;
});//OnKey up
I am perhaps going in the wrong direction, but I wanted to try and build a search function for my self at first. What I wish is that a full list of items will be shown at first and On keyup the search function should filter the content. But if the search box is emptied the full list should reappear. I am retrieving the content with an Ajax call that returns an array. As of now i am not populating the code with data on initial load of the dom. Was going to use the same idea as this , but this method messes up the classes and click event.

Is the last line supposed to be
accordionWrapper.innerHTML instead of accordion.innerHTML?

You can pass the event object into the function:
$("#searcehBar").on("keyup", function (evt) {
var input = "";
input = evt.target.value;
...

Solved it. went back to my initial build with strongly typed model and the using jquery to .show() and hide() the element. fadeIn(), fadeOut()
$("#searcheBar").on("keyup", function () {
var g = $(this).val().toLowerCase();
$(".accordion #title").each(function () {
var s = $(this).text().toLowerCase();
if (s.indexOf(g) !== -1) {
$(this).parent().parent().fadeIn();
}
else {
$(this).parent().parent().fadeOut();
}
});
});

JQuery to check if the user has inputted a specific letter or word within a textarea

I'm having trouble trying to check if a user has inputted a specific letter or word(s) and if the letter or word(s) is correct then it will unhide a button.
Any help would be great!
This is what I have so far:
$(document).ready(function() {
$(".textArea").keyup(function() {
if ($(this).val() == 'a') {
$(".continue").css("visibility", "visible");
}
});
});
body {
margin: 0;
padding: 0;
background-color: #3f2860;
}
.codeArea {
width: 50%%;
height: 500px;
border: 2px solid #ef6d3b;
box-sizing: border-box;
font-size: 20px;
background-color: transparent;
color: #ffffff;
outline-width: 0;
position: relative;
float: left;
margin-right: 5px;
}
.textArea {
width: 100%;
height: 100%;
resize: none;
font-size: 20px;
background-color: transparent;
color: #ffffff;
outline: none;
border: none;
white-space: normal;
position: relative;
float: left;
}
.boxContainer {
width: 98%;
}
.boxContainer {
margin: 0 auto;
}
.continue {
background-color: #ef6d3b;
width: 6em;
text-align: center;
font-size: 15px;
border: none;
height: 25px;
color: #000000;
outline: none;
cursor: pointer;
border-radius: 5px;
text-transform: uppercase;
position: relative;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="codeArea">
<textarea class="textArea">
<h1>Test</h1> <style> h1{ } </style>
</textarea>
</div>
<div class="buttonContainer">
<a href="#">
<button class="continue" type="button">Continue</button>
</a>
</div>

Your problem seems to be in the checking of the value in your textarea. Right now you are grabbing all the text and seeing if it is =='a'. Instead try something like this
if($(this).val().indexOf('word') !== -1)
Where 'word' is whatever you wanted to check for. This will search for the text in the textarea and determine if it exists or not.

In this block of code:
$(document).ready(function() {
$(".textArea").keyup(function() {
if ($(this).val() == 'a') {
$(".continue").css("visibility", "visible");
}
});
});
$(this).val() starts out with the value <h1>Test</h1> <style> h1{ } </style>, so will never be equal to 'a' unless you removed all the text and typed a single letter 'a'.
You need to be using indexOf('a') as such...
$(document).ready(function() {
$(".textArea").keyup(function() {
if ($(this).val().indexOf('a') !== -1) {
$(".continue").css("visibility", "visible");
}
});
});

Currently you are saying if the complete contents of .textarea equals a then show the button. Even it the contents contains a whitespace before and or after a it won't show the button.
If you want "show me the button when .textarea contains" then you need to make use of .indexOf()
$(document).ready(function() {
$(".textArea").keyup(function() {
if ($(this).val().indexOf('a') !== -1) {
$(".continue").css("visibility", "visible");
}
});
});
Above example with your original code can be tested here: https://jsfiddle.net/m410xphk/8/

How to Create a Customized Search Function for Shortcut

Goal:
When you click on the button with icon reading-glass a, a text field should be entering from right to left.
After you have pressed the button, the cursor should be located in the text field and to be ready to retrieve input data and a color frame around the button for instance yellow should appear.
When you use to the curser outside of the text field and suddently you press the left button of your mouse, the text field and the yellow color around the button should disappear.
Problem:
I do not now how to create it.
Info:
*I'm using bootstrap and jQuery.
*Today, I do not have a available sourcecode.

What you need is two actions on your button:
show the input field
fire the form
The code below does that. The input will have a zero width on page load. The jQuery functions binds a click event on the button.
When it's clicked it will look if the input field has a width. When not, it will prevent the default action (submitting the form), and instead animates the input to a width of 200px. After that it focuses on the field.
The second time you click on the button, the input won't have zero width, so the buttons acts normal and will submit the form.
Hope it suits you.
$(function() {
$('#search-form button').on('click', function(e) {
var btn = $(this);
var inp = $(this).parent().find("input");
if( inp.width() == 0 ) {
e.preventDefault();
inp.animate({width: "200px"}, 500).focus();
btn.addClass('active-btn');
}
});
});
* {
box-sizing: border-box;
}
body {
background: black;
}
#search-form input {
color: #fff;
height: 50px;
background: #484848;
border: 0;
float: right;
width: 0;
}
#search-form button {
background: #484848;
color: #fff;
width: 50px;
height: 50px;
border: 1px solid #484848;
float: right;
}
#search-form .active-btn {
border: 1px solid #57ABD9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="search-form">
<button type="submit">🔎</button><input type="text" name="search" />
</form>

I hope something like this:
Note - It is responsive too
DEMO and FULL SCREEN DEMO
HTML
<div id="sb-search" class="sb-search " >
    <form>
<input class="sb-search-input " onkeyup="buttonUp();" placeholder="Enter your search term..." type="search" value="" name="search" id="search"/>
<input class="sb-search-submit" type="submit" value=""/>
        <span class="sb-icon-search"><i class="glyphicon glyphicon-search"></i></span>
    </form>
</div>
CSS [if needed]
body{
margin: 40px 60px;
background:#555;
}
.sb-search {
position: relative;
margin-top: 10px;
width: 0%;
min-width: 60px;
height: 60px;
float: right;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.3s;
-webkit-backface-visibility: hidden;
}
.sb-search-input {
position: absolute;
top: 0;
right: 0px;
border: none;
outline: none;
background: #fff;
width: 100%;
height: 60px;
margin: 0;
z-index: 10;
padding: 20px 65px 20px 20px;
font-family: inherit;
font-size: 20px;
color: #2c3e50;
}
input[type="search"].sb-search-input {
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
.sb-search-input::-webkit-input-placeholder {
color: #efb480;
}
.sb-search-input:-moz-placeholder {
color: #efb480;
}
.sb-search-input::-moz-placeholder {
color: #efb480;
}
.sb-search-input:-ms-input-placeholder {
color: #efb480;
}
.sb-icon-search,
.sb-search-submit {
width: 60px;
height: 60px;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 60px;
text-align: center;
cursor: pointer;
}
.sb-search-submit {
background: #fff; /* IE needs this */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
filter: alpha(opacity=0); /* IE 5-7 */
opacity: 0;
color: transparent;
color:red;
border: none;
outline: none;
z-index: -1;
}
.sb-icon-search {
color: #fff;
background: #e67e22;
z-index: 90;
font-size: 22px;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.sb-icon-search:before {
content: "";
}
.sb-search.sb-search-open,
.no-js .sb-search {
width: 100%;
}
.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
background: #da6d0d;
color: #fff;
z-index: 11;
}
.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
/* z-index: 90;*/
}
JS
function buttonUp(){
var valux = $('.sb-search-input').val();
valux = $.trim(valux).length;
if(valux !== 0){
$('.sb-search-submit').css('z-index','99');
} else{
$('.sb-search-input').val('');
$('.sb-search-submit').css('z-index','-999');
}
}
$(document).ready(function(){
var submitIcon = $('.sb-icon-search');
var submitInput = $('.sb-search-input');
var searchBox = $('.sb-search');
var isOpen = false;
$(document).mouseup(function(e){
if(isOpen == true){
submitInput.val('');
$('.sb-search-submit').css('z-index','-999');
submitIcon.click();
}
});
submitIcon.mouseup(function(){
return false;
});
searchBox.mouseup(function(){
return false;
});
submitIcon.click(function(){
if(isOpen == false){
searchBox.addClass('sb-search-open');
$('.sb-search-input').focus();
isOpen = true;
} else {
searchBox.removeClass('sb-search-open');
$('.sb-search-input').blur();
isOpen = false;
}
});
});