We Keep Coding

Chrome Extension; Adding a CSS styled button into page

I am trying to make a floating 'Scroll down' button. For the first part, I am trying to add the button to a page. This is what I did:
ContentScript.js
document.body.onload = addElement;
function addElement () {
var stb = document.createElement("button");
stb.className = "stb";
document.body.appendChild(stb);
}
scrolldownbutton.css
.stb {
position: fixed;
display: block;
bottom: 50px;
right: 20px;
z-index: 10001;
width: 37px;
height: 37px;
padding: 0;
font-size: 24px;
text-align: center;
line-height: 1;
cursor: pointer;
border-radius: 19px;
text-decoration: none;
transition: opacity 0.7s ease-out;
opacity: 0;
background: url(tobottom.png) rgba(1, 96, 121, 1) no-repeat 50% 50%;
color: rgba(255, 255, 255, 1.00);
box-shadow:0 4px 10px rgba(0, 0, 0, 0.3);
}
However, I can't see any button added. Can someone tell me what is wrong with my code? I am still new to javascript and css, so any help will be welcome!

On the .stb css class, remove the opacity: 0;

My Side navbar doesn't collapse after page reload

I have a side navbar using HTML, SCSS and js. When I click reload, it goes to uncollapse state.
HTML
<nav class="nav" id="myNav">
<button class="nav__toggle" id="toggle-btn">
<span class="hamburger"></span>
</button>
<ul>
<li class="brand">
<a href="">
<img src="/images/logo.png" class="img-fluid" alt="NC Designs logo">
</a>
</li>
<li>My creatives</li>
<li>About me</li>
<li>My Portfolio</li>
<li>Clients</li>
<li>Testimonials</li>
<li>Contact me</li>
</ul>
</nav>
SCSS
.nav {
position: absolute;
text-align: center;
right: 0;
width: 260px;
height: 100vh;
background: var(--clr-light);
box-shadow: 0 0 3em #00000026;
transform: translateX(100%);
transition: transform 300ms cubic-bezier(0.5, 0, 0.5, 1);
ul {
list-style: none;
margin: 0;
padding: 0;
.li:nth-child(0){
margin-bottom: 1rem!important;
}
li {
margin-bottom: 2em;
display: flex;
a {
text-decoration: none;
color: var(--clr-dark);
padding: .5em;
flex: 1;
&:hover {
text-decoration: underline;
color: var(--clr-primary);
}
}
}
}
}
.brand{
margin-top: 2em;
}
.brand img{
height:100px
}
.nav__toggle {
position: absolute;
top: 2em;
left: 0;
transform: translateX(-100%);
background: var(--clr-light);
padding: 1em 0.5em;
border: 0;
border-radius: 0.25em 0 0 0.25em;
cursor: pointer;
transition: left 600ms ease-in-out, padding 500ms,
transform 3500ms ease-in-out, opacity 200ms linear;
&:focus {
outline: 0;
box-shadow: 0 0 0 1px rgba(238, 99, 82, 0.5);
}
}
.hamburger {
display: block;
position: relative;
&::before,
&::after {
content: "";
position: absolute;
left: 0;
}
&::before {
bottom: 6px;
}
&::after {
top: 6px;
}
}
.hamburger,
.hamburger::before,
.hamburger::after {
width: 2em;
height: 3px;
background: var(--clr-dark);
transition: transform 350ms ease-in-out, opacity 200ms linear;
}
/* Navigation open styles */
.nav-open {
.nav {
-webkit-transform: translateX(0);
transform: translateX(0);
}
/* Change this stuff below */
.hamburger {
-webkit-transform: rotate(45deg) scale(0.7);
transform: rotate(45deg) scale(0.7);
&::before {
opacity: 0;
}
&::after {
transform: rotate(90deg) translate(-6px) scale(1);
}
}
.nav__toggle {
position: absolute;
top: 2em;
left: 98%;
transform: translateX(-100%);
background: var(--clr-light);
padding: 1em 0.1em;
border: 0;
border-radius: 50%;
box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
margin-bottom: 50px;
&:focus {
outline: 0;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(238, 99, 82, 0.25), 0 0 0.5em rgba(0, 0, 0, 0.25);
}
&:hover {
outline: 0;
border-radius: 50%;
box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.55);
}
}
}
JS
<script>
const navToggle = document.querySelector('.nav__toggle');
const navFocus = document.querySelector('nav ul li a');
navToggle.addEventListener('click', () => {
document.body.classList.toggle('nav-open');
});
/*
Allow the toggle to work if the tab key is used to access menu...
I'm not sure if this is the best way or if it works all the time.
I tried experimenting with keyup and the keycode but this seemed simple.
*/
navFocus.addEventListener('focus', () => {
document.body.classList.toggle('nav-open');
});
</script>
repo link
Note: when I click the refresh second time, the navbar opens (uncollapsed), that should not happen (should remain collapsed even if I reload from the uncollapsed state (open navbar state). What should I do?

This behavior is expected if you were to reload the page. However, if you wanted to override this, you need a way to save the state between page refreshes. I think you should take a look at the sessionStorage API:
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
A couple of things to point you in the right direction:
When you load the page, you should access the state of the sidebar. I think opened or closed would be enough to remember the state of the sidebar. Something like:
const navBarKey = "navBarState"; // using variable to prevent typos
const navBarState = sessionStorage.getItem(navBarKey);
const open = "open"; // using variable to prevent typos
const navOpen = 'nav-open'; // using variable to prevent css class typos
if(navBarState === open){
// this code will run when first started. If not, you may need to add some window.onload logic.
// if the saved state is open, add 'nav-open'
body.classList.add(navOpen);
}
const navToggle = document.querySelector('.nav__toggle');
navToggle.addEventListener('click', () => {
if(body.classList.contains(navOpen)) {
// if already open, remove 'nav-open' and remove 'navBarState' from sessionStorage
body.classList.remove(navOpen);
sessionStorage.removeItem(navBarKey)
} else {
// if not open, add 'mav-open' and add 'navBarState' to sessionStorage
body.classList.add(navOpen);
sessionStorage.setItem(navBarKey, open)
}
});
sessionStorage will persist only while the window/tab is open, and will clear if you exit the browser.
localStorage, however, will persist even after the brower is closed. So, if you wanted to persist after restarting the browser, you should instead use localStorage.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
I hope this is enough for you to get started! There are of course, different ways to handle this/refactoring opportunities, but for the given code you have at hand, this should suffice.

The problem was with absolute positioning.
nav loses its absolute position after reload. After changing nav's position to fixed, it worked. No Javascript changed were required.
.nav {
position: fixed;
}
Thank you!

Slideout.js menu isnt smooth

I have been trying to get slideout.js to work properly for my site.
The issue is that when the menu is opened, the text appears before the fully opens and when the menu is closed, the text disappears after the menu is closed.
I have looked at the CSS and made sure that there are backgrounds to the menu and heights are correctly set.
Demo (view as mobile) - http://stefan.admark.co.uk/gates/index.php
JS:
window.onload = function() {
var slideout = new Slideout({
'panel': document.getElementById('main'),
'menu': document.getElementById('menu'),
'side': 'right',
'padding': 256,
'tolerance': 70
});
document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
slideout.toggle();
});
};
CSS:
.slideout-menu {
position: fixed;
top: 80px;
bottom: 0;
width: 256px;
/* min-height: 100vh; */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 999;
display: none;
padding-left:20px;
}
.slideout-menu-left {
left: 0;
}
.slideout-menu-right {
right: 0;
}
.slideout-panel {
position: relative;
z-index: 1;
will-change: transform;
background-color: #ffffff; /* A background-color is required */
min-height: 100%;
-webkit-box-shadow: 6px 0px 5px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 6px 0px 5px 0px rgba(0,0,0,0.1);
box-shadow: 6px 0px 5px 0px rgba(0,0,0,0.1);
}
.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
overflow: hidden;
}
.slideout-open .slideout-menu {
display: block;
}
#media screen and (min-width: 1000px) {
.slideout-panel {
/* margin-left: 256px; */
}
.slideout-menu {
display: none;
}
}
.panel:before {
content: '';
display: block;
background-color: rgba(0,0,0,0);
transition: background-color 0.5s ease-in-out;
}
.panel-open:before {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: rgba(0,0,0,.5);
z-index: 99;
}

It looks like your <nav> element on your page doesn't have any transition CSS on it.
For instance, your <main> element has the following transition applied to it:
transition: -webkit-transform 300ms ease 0s; transform: translateX(-256px)
Whatever javascript you have triggering the transition for your <main> element, if applied to <nav> should cause the text and everything inside <nav> to transition properly as well.

How to hide popup on click outside with animation

My point is:
If I click OPEN then should open the popup.
If click BACK then should close the popup
If I click outside popup then should close the popup.
Note: If I click anywhere inside popup when is open, then shouldn't close. Popup must closing only on outside click or BACK click.
How it currently work: If I click anywhere then popup is opening and closing.
So how to do this what I expect? I prepared JSFiddle and Code Snippet.
JSFiddle
$('#open-1').on('click touch', function() {
$("#card-1").toggleClass("flip")
});
$(document).on('click touch', function(event) {
if (!$(event.target).parents().addBack().is('#open-1')) {
$("#card-1").toggleClass("flip");
}
});
$('#open-1').on('click touch', function(event) {
event.stopPropagation();
});
.panel {
width: 45%;
display: inline-block;
margin-bottom: 20px;
background-color: #fff;
margin: 14px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.est {
box-shadow: 0px 0px 0px #333;
background-color: transparent;
}
div {
display: block;
}
#card-1 {
height: 300px;
width: 100%;
margin: 0 auto;
z-index: 1;
display: inline-block;
perspective: 700px;
}
.flip .front {
transform: rotateY(180deg);
}
.front {
transform: rotateY(0deg);
overflow: hidden;
z-index: 1;
}
.front,
.back {
border: 1px solid #ddd;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.ease {
-webkit-transition: all .45s ease-out 0s;
-moz-transition: all .45s ease-out 0s;
-ms-transition: all .45s ease-out 0s;
-o-transition: all .45s ease-out 0s;
transition: all .45s ease-out 0s;
}
.open-1,
.open-2,
.open-3,
.open-4,
.open-5 {
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
line-height: 50px;
}
.back {
transform: rotateY(180deg);
background-color: #ddd;
display: table;
z-index: 2;
font-size: 13px;
line-height: 23px;
padding: 10px 20px;
height: 320px;
}
.info {
color: #333;
font-size: 20px;
z-index: 9999;
}
.flip .back {
transform: rotateY(360deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="panel e-b est"> <div class="wrapper">
<div id="card-1">
<div class="front ease">
open
<p>
test content
</p>
</div>
<div class="back ease">
<div class="back-info">
<div class="info">
test content
</div>
</div>
<div class="social-bar">Back</div>
</div>
</div> </div> </div>
JSFiddle

$(document).on('click touch', function(event) {
if (!$(event.target).parents().addBack().is('#open-1')) {
$("#card-1").toggleClass("flip");
}
});
You are toggle()ing the class here, instead use removeClass():
$(document).on('click touch', function(event) {
if (!$(event.target).parents().addBack().is('#open-1')) {
$("#card-1").removeClass("flip");
}
});
Then select the flipped div instead of the front one to stop toggling when the user clicks on the flipped div
$('.back.ease').on('click touch', function(event) {
event.stopPropagation();
});
Then add a class (for example close-1) to the back button:
Back
And then add a function to remove the flip class upon clicking it
$('.close-1').on('click touch', function() {
$("#card-1").removeClass("flip");
});

HTML - Keep placeholder when user types

I have an input like this:
<input value="My text" placeholder="Placeholder">
When I type something in the input the placeholder text will disappear, that's quite obvious.
Now, what I want to do is that I want the placeholder text to stay when the user types so you can see the placeholder text as a background text behind the original text:
EDIT: I also want to be able to change the background-text using JavaScript.

Much better solution with ease effect via CSS. Take a look: http://jsfiddle.net/csdtesting/wbqq129q/
Before typing:
While typing:
Code:
#login {
font-size: 12px;
margin: 0 auto;
width: 700px;
}
#login li {
float: left;
list-style: none;
margin-left: 30px;
position: relative;
}
#login li:first-child {
margin-left: 0;
}
label {
line-height: 40px;
position: absolute;
right: 120px;
top: 0;
bottom: 0;
-moz-transition: 0.3s right ease;
-ms-transition: 0.3s right ease;
-o-transition: 0.3s right ease;
-webkit-transition: 0.3s right ease;
transition: 0.3s right ease;
z-index: 0
}
input {
color: transparent;
font-size: 12px;
height: 35px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-transition: 0.3s all ease;
-ms-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
input[type="email"],
input[type="password"] {
border: 1px solid #ccc;
height: 35px;
padding: 0 10px;
width: 240px;
position: relative;
-moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, .06);
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, .06);
box-shadow: inset 0 0 10px rgba(0, 0, 0, .06);
z-index: 2;
}
input[type="email"] {
color: rgba(47, 130, 194, .8);
}
/* Placeholder */
input[type="email"]:-moz-placeholder {
color: rgba(47, 130, 194, .6);
}
input[type="email"]:-ms-input-placeholder {
color: rgba(47, 130, 194, .6);
}
input[type="email"]::-webkit-input-placeholder {
color: rgba(47, 130, 194, .6);
}
/* Label */
input[type="email"] + label {
color: rgb(47, 130, 194);
}
input:focus + label {
right: 10px;
}
input[type="email"]:focus,
input[type="password"]:focus {
background-color: rgba(255, 255, 255, .8);
}
/* Submit */
input[type="submit"] {
background-color: #333;
background: -moz-linear-gradient(bottom, #333, #444);
background: -ms-linear-gradient(bottom, #333, #444);
background: -o-linear-gradient(bottom, #333, #444);
background: -webkit-linear-gradient(bottom, #333, #444);
background: linear-gradient(bottom, #333, #444);
border: 1px solid #222;
color: #fff;
cursor: pointer;
height: 35px;
width: 110px;
}
<form id="login">
<ul>
<li>
<input id="email" name="email" placeholder="Your Email" title="Your Email" type="email" required />
<label for="email">Your Email</label>
</li>
</ul>
</form>

Hard to think of a good usecase for such a behaviour, as it is blocking some of the users input.
An easy way would be to use input::after but this is not supported by any browser right now (thanks #JukkaK.Korpela).
But you can use a wrapper element and a data attribute, as follows:
<div class="placeholder" data-placeholder="my placeholder">
<input value="My text" />
</div>
With this css:
.placeholder
{
position: relative;
}
.placeholder::after
{
position: absolute;
left: 5px;
top: 3px;
content: attr(data-placeholder);
pointer-events: none;
opacity: 0.6;
}
Resulting in:
Click here for jsFiddle demo.
Since you will have to do a lot of tweaking to make this look good, you may also consider using the wrapping <div> element as a input "look alike":
<div class="editable" data-placeholder="my placeholder">
<input type="text" value="my Text" />
</div>
CSS:
.editable
{
position: relative;
border: 1px solid gray;
padding: 3px;
background-color: white;
box-shadow: rgba(0,0,0,0.4) 2px 2px 2px inset;
}
.editable > input
{
position: relative;
z-index: 1;
border: none;
background-color: transparent;
box-shadow: none;
width: 100%;
}
.editable::after
{
position: absolute;
left: 4px;
top: 5px;
content: attr(data-placeholder);
pointer-events: none;
opacity: 0.5;
z-index: 1;
}
Click here for the Demo 3. (with mocked <input />)
Click here for the Demo 2. (with contenteditable)

You could try doing something like this:
HTML:
<div class="wrapper">
<input type="text">
<span class="placeholder">Placeholder</span>
</div>
CSS:
.wrapper{
position: relative;
}
input {
font-size: 14px;
height: 40px;
}
.placeholder {
position: absolute;
font-size:25px;
pointer-events: none;
left: 1px;
top: 1px;
transition: 0.1s ease all;
}
input:focus ~ .placeholder{
top: 1px;
font-size: 11px;
}
JSFiddle

This could be done by using the 'onchange' handler. You would write a fancy function that would concat the remainder of the placeholder onto what the user has typed, and would also place the cursor at the end of the user's text.
Here's some untested, incomplete js/psuedocode to give you an idea:
userTextLength: 0, // measure of how many chars the user has typed; need this because the length itself won't be a valid measure, since we're modifying it in place. Note that we're using the DOM as a source of truth here... alternative method would be to store the user's text itself here, but let's run with this.
placeholder: "xx/yy/zz",
onchange: function() {
boxText = document.querySelector('#elem').value;
if (boxText.length === 1) { // special handling for the first character they type. (Using placeholder text at first.)
this.userTextLength++;
placeholder = boxText.slice(userTextLength);
userText = boxText.slice(0, userTextLength);
document.querySelector('#elem').innerHTML = userText + placeholder;
}
if (boxText.length < placeholder.length) { // this would mean they used backspace, which also needs to be handled.
}
else { // the normal case, should look quite similar to the first if block
this.userTextLength += 1;
userInput =
}
}
Something I haven't handled here is the cursor focusing. That will need an 'onfocus' event, and will use the userTextLength property as well to decide where to place it. For some help on doing that, this answer looks like it should be helpful.

it is impossible, if it is, it will be very unattractive. But i have an idea can help you with jquery support.
You can view the demo here: http://hangaumy.com/order/
When you type, it will automatically add words in it (look like placeholder)

.box {
border: 1px solid;
border-radius: 10px;
padding: .25rem 1rem 1rem;
color: #555;
font-family: sans-serif;
display: flex;
flex-direction: column;
width: max-content;
}
.wrapper {
position: relative;
width: 450px;
}
.wrapper * {
font-size: 1.25rem;
letter-spacing: 2px;
font-family: monospace;
padding: .125rem .25rem;
display: flex;
width: calc(100% - 1rem);
}
input {
width: 4000px;
border: 0;
}
.placeholder {
position: absolute;
pointer-events: none;
left: 0;
top: 0;
width: min-content;
}
<div class="box">
<h2>Short Homepage Headline</h2>
<p>Use up tp 30 characters</p>
<div class="wrapper">
<input type="text">
<span class="placeholder">
______________________________
</span>
</div>
</div>
How about this for functionality, a good use case, and its attractiveness.
(trying to combat some of the negatives above, ha)
the placeholder text was a limited number of underscores (30)?
same font size, monospace, and letter spacing
This make a neat no-js character watcher for a headline writer. This way they will be able to see when it will break the template. But you don't necessarily have to be tied to it as far as a hard limit.