We Keep Coding

Align CSS "close button" in announcement bar

I'm working on an announcement bar for my website, but I got stuck on positioning the "close" button.
The bar itself works just fine, but I couldn't get to position the "close" button at the right of the announcement bar, where you usually find them. I've tried using margin-right, padding and similar solutions but they didn't work.
Also, I wanted to find the best way to make the button disappear (along with the bar) once it's clicked
EDIT: Here's the solution, provided by GrafiCode.
Here's the code and you can see it running here:
HTML:
<div id="dabar" class="hideonload"></div>
CSS:
/* top-bar */
#dabar {
background: #1b1c1e;
color: #fff;
font-size: 14px;
position: fixed;
z-index: 1;
top: 0px;
left: 0px;
width: 100% !important;
padding: 10px 0px;
text-align: center;
}
#dabar a {
color: #b5e48c;
border-bottom: 1px;
}
.btn-close {
margin-left: calc(100vw - 48px);
margin-top: -16px;
border: 0;
padding: 0;
background: red;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
flex-flow: nowrap;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 150ms;
}
.btn-close .icon-cross {
margin: 0;
padding: 0;
border: 0;
background: none;
position: relative;
width: 15px;
height: 15px;
}
.btn-close .icon-cross:before,
.btn-close .icon-cross:after {
content: '';
position: absolute;
top: 6.5px;
left: 0;
right: 0;
height: 2px;
background: #fff;
border-radius: 2px;
}
.btn-close .icon-cross:before {
transform: rotate(45deg);
}
.btn-close .icon-cross:after {
transform: rotate(-45deg);
}
.btn-close .icon-cross span {
display: block;
}
.btn-close:hover,
.btn-close:focus {
transform: rotateZ(90deg);
background: #05c;
}
JAVASCRIPT:
window.onload = function() //executes when the page finishes loading
{
setTimeout(func1, 2500);
};
function func1() {
var el = document.getElementById('dabar');
el.innerHTML = 'Empieza aquí | Start here<button class="btn-close" onclick="this.parentElement.style.display=\'none\'" ><span class="icon-cross"></span></button>';
el.className = 'showtopbar';
}
Thanks a lot for your time!

Keep right-alignment after changing to fixed-position by scroll

I've got a function on a drop-down button which when scrolled past it, it changes position to fixed so that it's always visible. Although, my problem is when it changes to position:fixed, it's usually aligned to the right, but it changes position to the left. How can I make it so that it stays in place? I can't use any fixed "right" value, as I need this to work on mobile version as well(width of parent container varies). Check my jsFiddle https://jsfiddle.net/ramisrour/2asco9n1/6/
Also, the .dropContainer doesn't need height or width, I just set it there for the fiddle, so you can test with the scrolling.
<div class="dropContainer">
<div class="dropDwn">
<div class="dropToggle">Viktig informasjon! Les her <i class="bouncer"></i></div>
<div class="dropContentBox">
<div class="dropTxt">
Vær oppmerksom på at Huawei P40-serien og Mate Xs ikke har Google Mobile Services (GMS) installert (Du kan derfor ikke laste ned apper direkte fra Google Play Butikken). Istedenfor har den AppGallery, Huaweis egen offisielle appbutikk.
</br>Du kan bruke AppGallery til å lete etter, laste ned, håndtere og dele mobilapper.
</div>
</div>
<div class="acceptCta"><span class="acceptCtaTxt">Jeg har lest og forstått </span><i class="arroww"></i></div>
</div>
</div>
.dropContainer{
position: relative;
box-sizing: border-box;
}
.dropDwn {
font-family: inherit;
background-color: #fff;
color: #333;
border: solid 1px #333;
position: relative;
text-align: center;
display: block;
z-index: 9999;
cursor: pointer;
padding: 5px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
transition: all 0.5s ease;
font-size: 16px;
width: 250px;
box-sizing: border-box;
height: 30px;
overflow: hidden;
float: right;
}
.dropDwn.open {
height: 280px;
width: 320px;
cursor: default;
background-color: #000E52;
color: #fff;
}
.dropTxt{
margin: 10px;
}
.bouncer {
position: relative;
border: solid #333;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transition: all 0.5s ease;
animation: bouncer 2s infinite;
}
.dropDwn.open .bouncer {
transform: rotate(225deg);
border-color: #fff;
}
.dropContentBox {
margin-top: 10px;
display: inline-block;
color: #fff;
transition: all 0.5s ease;
text-align: center;
}
.acceptCta {
display: block;
position: relative;
cursor: pointer;
text-align: center;
margin: 0 auto;
background-color: #7CBD2B;
color: #333;
height: 35px;
width: 220px;
font-size: 14px;
font-weight: 600;
padding: 10px 25px;
box-sizing: border-box;
border-radius: 3px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
transition: all 0.5s ease;
z-index: 10;
}
.acceptCta:hover {
background-color: #88D41B;
padding: 9px 24px;
}
.acceptCtaTxt {
display: inline-block;
float: left;
vertical-align: middle;
position: relative;
}
.arroww {
border: solid #333;
border-width: 0 3px 3px 0;
display: inline-block;
box-sizing: border-box;
padding: 3px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transition: all 0.5s ease;
}
.acceptCta:hover .arroww {
/*padding: 6px 2px;
transform: rotate(-315deg);*/
}
#keyframes bouncer {
0% {
bottom: 0px;
}
20% {
bottom: 7px;
}
40% {
bottom: 0px;
}
60% {
bottom: 7px;
}
80% {
bottom: 0px;
}
100% {
bottom: 0px;
}
}
// Open/close
$(document).ready(function() {
$('.dropToggle').click(function() {
$(this).parent().addClass("open");
});
setTimeout(function() {
$('.acceptCta').click(function() {
//This needed
var $this = $(this);
var $container = $('.dropDwn');
var $arrow = $('.arroww');
$arrow.css("transform", "rotate(-315deg)");
$arrow.css("padding", "6px 2px");
setTimeout(function() {
$this.parent().removeClass("open");
}, 600);
setTimeout(function() {
$container.css("opacity", "0");
$container.css("right", "-1000px");
}, 1100);
setTimeout(function() {
$container.css("display", "none");
}, 1600);
});
})
});
// Hide if src image is in viewport, otherwise show
$(document).ready(function() {
var topOfOthDiv = $("[alt='Guide for installasjon av apper']").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > topOfOthDiv + 200) {
$(".dropDwn").css("right", "-1000px");
$(".dropDwn").css("opacity", "0");
} else {
$(".dropDwn").css("opacity", "1");
}
});
});
// Stick button when scrolling past it
$(document).ready(function() {
var topOfOthDiv2 = $('.dropDwn').offset().top;
var drop = $('.dropDwn');
$(window).scroll(function() {
if ($(window).scrollTop() > topOfOthDiv2 + 20) {
drop.css("position", "fixed");
} else {
drop.css("position", "relative");
}
});
});
It's the bottom jQuery function which makes it stick by scrolling.

you have to add right value when you apply fixed position. in simalr way you can add top value too.
Update below js and also the yo
if ($(window).scrollTop() > topOfOthDiv2 + 20) {
drop.css("position", "fixed");
drop.css("right", "10px");
} else {
drop.css("position", "relative");
drop.css("right", "0px");
}

I solved this by using flex. In case anybody needs help with this here's what I did:
Max-width: 1280px; on the container, because it never gets bigger than 1280px. Added display: flex; and justify-content: flex-end; so the child element would always sit at the end of the parent element, even in fixed position.
Also added some margin and top values to make the transition from absolute to fixed more smoothly, but that might differ for you as this suited my situation.
.dropContainer{
display: flex;
max-width: 1280px;
justify-content: flex-end;
position: relative;
box-sizing: border-box;
}
.dropDwn {
font-family: inherit;
background-color: #fff;
color: #333;
border: solid 1px #333;
position: absolute;
text-align: center;
display: block;
z-index: 9999;
cursor: pointer;
padding: 5px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
transition: all 0.5s ease;
font-size: 16px;
width: 250px;
box-sizing: border-box;
height: 30px;
overflow: hidden;
float: right;
margin-right: 10px;
}
// Hide if src image is in viewport, show if not
$(document).ready(function() {
var topOfOthDiv2 = $('.dropDwn').offset().top;
var drop = $('.dropDwn');
var cont = $('.dropContainer');
$(window).scroll(function() {
if ($(window).scrollTop() > topOfOthDiv2 - 10) {
drop.css("position", "fixed");
drop.css("top", "10px");
} else {
drop.css("position", "absolute");
drop.css("top", "");
}
});
});

HTML, Javascript, CSS text menu

enter image description hereI have made a text as a button and want to create a menu with that. What I am trying to do is to change the text. When I click the button, it works as a circular menu and shows me options.
For example, it was L(litter) = 1, when I click the button it shows me other parameters such as mL, gallon, ounce. If I click mL, the text will change from L = 1000 to mL = 1000.
Could you help with me actual coding if possible? This is what I currently have. When I click, I can type a value and it changes the value. I don't need to type the value but it should display one of the values I already stored in depending on what I click on the menu.
var para = document.querySelector('button');
para.addEventListener('click', updateValue);
function updateValue() {
var value = prompt('Enter a new value');
para.textContent = value;
}

If I get you clear so this example is what you need
body {
font-family: Alegreya Sans;
background: #feeded;
}
.menu {
position: relative;
background: #cd3e3d;
width: 3em;
height: 3em;
border-radius: 5em;
margin: auto;
margin-top: 5em;
margin-bottom: 5em;
cursor: pointer;
border: 1em solid #fdaead;
}
.menu:after {
content: "";
position: absolute;
top: 1em;
left: 1em;
width: 1em;
height: 0.2em;
border-top: 0.6em double #fff;
border-bottom: 0.2em solid #fff;
}
.menu ul {
list-style: none;
padding: 0;
}
.menu li {
width: 5em;
height: 1.4em;
padding: 0.2em;
margin-top: 0.2em;
text-align: center;
border-top-right-radius: 0.5em;
border-bottom-right-radius: 0.5em;
transition: all 1s;
background: #fdaead;
opacity: 0;
z-index: -1;
}
.menu:hover li {
opacity: 1;
}
/**
* Add a pseudo element to cover the space
* between the links. This is so the menu
* does not lose :hover focus and disappear
*/
.menu:hover ul::before {
position: absolute;
content: "";
width: 0;
height: 0;
display: block;
left: 50%;
top: -5.0em;
/**
* The pseudo-element is a semi-circle
* created with CSS. Top, bottom, and right
* borders are 6.5em (left being 0), and then
* a border-radius is added to the two corners
* on the right.
*/
border-width: 6.5em;
border-radius: 0 7.5em 7.5em 0;
border-left: 0;
border-style: solid;
/**
* Have to have a border color for the border
* to be hoverable. I'm using a very light one
* so that it looks invisible.
*/
border-color: rgba(0, 0, 0, 0.01);
/**
* Put the psuedo-element behind the links
* (So they can be clicked on)
*/
z-index: -1;
/**
* Make the cursor default so it looks like
* nothing is there
*/
cursor: default;
}
.menu a {
color: white;
text-decoration: none;
/**
* This is to vertically center the text on the
* little tab-like things that the text is on.
*/
line-height: 1.5em;
}
.menu a {
color: white;
text-decoration: none;
}
.menu ul {
transform: rotate(180deg) translateY(-2em);
transition: 1s all;
}
.menu:hover ul {
transform: rotate(0deg) translateY(-1em);
}
.menu li:hover {
background: #cd3e3d;
z-index: 10;
}
.menu li:nth-of-type(1) {
transform: rotate(-90deg);
position: absolute;
left: -1.2em;
top: -4.2em;
}
.menu li:nth-of-type(2) {
transform: rotate(-45deg);
position: absolute;
left: 2em;
top: -3em;
}
.menu li:nth-of-type(3) {
position: absolute;
left: 3.4em;
top: 0.3em;
}
.menu li:nth-of-type(4) {
transform: rotate(45deg);
position: absolute;
left: 2em;
top: 3.7em;
}
.menu li:nth-of-type(5) {
transform: rotate(90deg);
position: absolute;
left: -1.2em;
top: 5em;
}
.hint {
text-align: center;
}
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,800' rel='stylesheet' type='text/css'>
<nav class="menu">
<ul>
<li>Products</li>
<li>Services</li>
<li>Careers</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>

Changing a div opacity on scroll

I have looked through various pages, but have not managed to find a working solution. I want the text in my div to get more transparent gradually when I scroll. Please, can anybody help? Here is my code:
<script src = "/js/titleScroll.js"></script>
<div class = "header-title">
<h1>Title</h1>
</div>
and:
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('header-title').css('opacity', 0.8);
} else {
$('header-title').css('opacity', 1);
}
});
});
and here is my css:
.header-title {
width: 80%;
height: 100px;
left: 50%;
top: 50%;
font-size: 1.5em;
text-align: center;
transform: translateX(-50%);
margin-top: -50px;
position: relative;
max-width: 100%;
background-attachment: fixed;
position: float;
}
.header-title h1 {
color: white;
text-shadow: 2px 2px 4px #d1d1d1;
font-family: arial, sans-serif;
white-space: nowrap;
text-transform: uppercase;
display: inline-block;
}
Thank you.

Problem is, currently you are just triggering 0.8 opacity when user is not at top of the page. Try to get top offset each time scroll is executed and then apply opacity based on that offset, it can be linear function, or more complex ones - it's up to you how it's gonna fade in/out.
Here's very quick working example:
<head>
<style>
body {
min-height: 4000px;
}
.header-title {
position: fixed;
width: 80%;
height: 100px;
left: 50%;
top: 50%;
font-size: 1.5em;
text-align: center;
transform: translateX(-50%);
margin-top: -50px;
max-width: 100%;
background-attachment: fixed;
}
.header-title h1 {
color: white;
text-shadow: 2px 2px 4px #d1d1d1;
font-family: arial, sans-serif;
white-space: nowrap;
text-transform: uppercase;
display: inline-block;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$(window).scroll(function(event) {
let scroll = $(this).scrollTop();
let opacity = 1 - (scroll / 1000);
if (opacity >= 0) {
$('.header-title').css('opacity', opacity);
}
});
});
</script>
<div class = "header-title">
<h1>Title</h1>
</div>
</body>
https://jsfiddle.net/un2bdvfm/

Scroll to show footer

I have been trying to use parallax, to hide and show footer on scroll but due to the fact it targets the img this does not work.
i wrote this but it just pops up rather then the main content page sliding up to reveal the footer slowly.
SCRIPT
$(window).on('scroll', function() {
if ($(window).scrollTop() > 85) {
$('.footer').show();
} else {
$('.footer').hide();
}
});
here is any example: http://red-team-design.com/simple-and-effective-dropdown-login-box/
scroll to bottom to see the footer slide out.
Is there a pure css way of doing it? am i missing a trick here.
Thanks for your help
FIDDLE
https://jsfiddle.net/7uv2fzvp/2/

Yes, that's pure css.
Just need to put that position: fixed and z-index: 0, so like:
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
}
and the main content position: relative and z-index: 1
.main-content {
position: relative;
z-index: 1;
}
Here is the jsFiddle: https://jsfiddle.net/7uv2fzvp/11/

Demo on JSFiddle
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('footer').outerHeight();
$(window).scroll(function(event) {
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if (Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight) {
// Scroll Down
$('footer').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('footer').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
* {
margin: 0;
padding: 0;
}
body {
font: 15px/1.3 'PT Sans', sans-serif;
color: #5e5b64;
position: relative;
z-index: 0;
}
a,
a:visited {
outline: none;
color: #389dc1;
}
a:hover {
text-decoration: none;
}
section,
footer,
header,
aside {
display: block;
}
#main {
position: relative;
z-index: 1;
background-color: #fff;
padding: 120px 0 600px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
#main .tzine-logo {
width: 336px;
height: 121px;
margin: 0 auto 90px;
text-indent: -999px;
overflow: hidden;
display: block;
}
h1 {
font: bold 48px 'PT Sans Narrow', sans-serif;
color: #5e5b64;
text-align: center;
padding-bottom: 300px;
position: relative;
}
h1:after {
content: '';
width: 45px;
height: 70px;
position: absolute;
left: 50%;
bottom: -85px;
margin-left: -23px;
}
footer {
height: 245px;
color: #ccc;
font-size: 12px;
position: relative;
z-index: -2;
background-color: #31353a;
}
footer > ul {
width: 960px;
position: fixed;
left: 50%;
bottom: 0;
margin-left: -480px;
padding-bottom: 60px;
z-index: -1;
}
footer > ul > li {
width: 25%;
float: left;
}
footer ul {
list-style: none;
}
footer > ul > li ul li {
margin-left: 43px;
text-transform: uppercase;
font-weight: bold;
line-height: 1.8;
}
footer > ul > li ul li a {
text-decoration: none !important;
color: #7d8691 !important;
}
footer > ul > li ul li a:hover {
color: #ddd !important;
}
footer p {
width: 90%;
margin-right: 10%;
padding: 9px 0;
line-height: 18px;
background-color: #058cc7;
font-weight: bold;
font-size: 14px;
color: #fff;
text-transform: uppercase;
text-shadow: 0 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
margin-bottom: 20px;
opacity: 0.9;
cursor: default;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
transition: opacity 0.4s;
}
footer > ul > li:hover p {
opacity: 1;
}
footer p:before {
content: '';
display: inline-block;
width: 16px;
height: 18px;
margin: 0 12px 0 15px;
vertical-align: text-bottom;
}
/*-------------------------
The different colors
--------------------------*/
footer p.home {
background-color: #0096d6;
background-image: -webkit-linear-gradient(top, #0096d6, #008ac6);
background-image: -moz-linear-gradient(top, #0096d6, #008ac6);
background-image: linear-gradient(top, #0096d6, #008ac6);
}
footer p.home:before {
background-position: 0 -110px;
}
footer p.services {
background-color: #00b274;
background-image: -webkit-linear-gradient(top, #00b274, #00a46b);
background-image: -moz-linear-gradient(top, #00b274, #00a46b);
background-image: linear-gradient(top, #00b274, #00a46b);
}
footer p.services:before {
background-position: 0 -129px;
}
footer p.reachus {
background-color: #d75ba2;
background-image: -webkit-linear-gradient(top, #d75ba2, #c75496);
background-image: -moz-linear-gradient(top, #d75ba2, #c75496);
background-image: linear-gradient(top, #d75ba2, #c75496);
}
footer p.reachus:before {
background-position: 0 -89px;
}
footer p.clients {
background-color: #e9ac40;
background-image: -webkit-linear-gradient(top, #e9ac40, #d89f3b);
background-image: -moz-linear-gradient(top, #e9ac40, #d89f3b);
background-image: linear-gradient(top, #e9ac40, #d89f3b);
}
footer p.clients:before {
background-position: 0 -69px;
}
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="http://cdn.tutorialzine.com/misc/enhance/v2.js"></script>
<div id="main">
<h1>slide-out footer.</h1>
</div>
<footer>
<ul>
<li>
<p>Test</p>
</li>
<li>
<p>Test</p>
</li>
<li>
<p>Test</p>
</li>
<li>
<p>Test</p>
</li>
</ul>
</footer>
There is a very good article that explains z-indexes in detail, which I highly recommend that you read before continuing further.

Well, Here is a codepen for you that i found.
https://codepen.io/cerebrovinny/pen/vYdJJVa
HTML:
Scroll down and say hello to the slide-out footer
<footer><p>Here i am. Ready to use me for navigation lists or other content.</p></footer>
CSS
* {margin:0; padding:0; font-family: Helvetica; font-weight:bold; font-size: 1.4em;text-align:center;}
section {width:100%; height:1024px; margin: 0 0 360px 0;background-color:#ececec; position:relative; z-index:2; color: #1e2024;}
footer {width:100%; height:360px;background-color:#262932; position:fixed; bottom:0; left:0; color: #ef4a4a; text-align:center; z-index:0;}
p {padding: 1em 4em;}