Show div on the same page and apply opacity to background - javascript

I am trying to make my whole body tag only to be blurred by using opacity. This should run only when I clicked on a button. My button function as a trigger to show a div. But when I do, all of it becomes blurry.
theButton.onclick = function() {
document.getElementById('show-form').style.visibility='visible';
document.getElementById('body').style.opacity='0.5'
}

I think you can apply the opacity only in the body background instead of the whole body element. Try the below code.
const btn = document.querySelector('button');
const invisible = document.querySelector('#show-form');
function showVisible() {
invisible.style.visibility = 'visible';
document.body.classList.add('with-opacity');
}
btn.addEventListener('click', showVisible);
#show-form {
width: 100%;
min-height: 70px;
background: #666;
color: #fff;
visibility: hidden;
}
.with-opacity {
background: rgba(0,0,0,0.3);
}
body, html {
width: 100%;
height: 100%;
}
<div id="show-form">Hello World!</div>
<br><br>
<button>Click me</button>

Related

My button does not move to the upper right corner from the left side via javascript DOM

I have button in html that is on the middle left of the screen, that button is styled such as:
.openbtn {
font-size: 20px;
border-radius: 0 5px 5px 0;
cursor: pointer;
position: fixed;
Top: 50%;
left: 0px;
background-color: #181A1B;
color: white;
padding: 10px 15px;
border: none;
z-index: 1;
transition: 0.5s;
}
now when i click this button i want it to transfer to the upper right and when i click again it should go back to its original position. In Javascript the button is handled as so:
var lastState = false;
function sideButtonClicked() {
if(!lastState){
//open
lastState=true
document.getElementById("Button").style.left = "";
document.getElementById("Button").style.right = "0";
document.getElementById("Button").style.top = "0";
}
else{
//close
lastState=false
document.getElementById("Button").style.left = "0px";
document.getElementById("Button").style.right = "";
document.getElementById("Button").style.top = "50%";
}
I find this tricking because if i want to play that button on the upper right corner is when i declare it on css i dont place the left property but since its initial position is in the left i have to declare it. I tried setting it to "" but it does not work. What i know works is the button moves up/down upon clicking the button,
}
This is a simple example of how to toggle classes in vanilla JS. Then, you just do your styling via CSS.
// Cache the DOM element for continued use
var btn = document.getElementById("btn");
// Attach event listener to button for 'click' event
btn.addEventListener("click", () =>
{
// Where we see if it has the class or not
// Is it inactive?
if (!btn.classList.contains("active"))
{
console.log("Added");
btn.classList.add("active");
} else // If it *is* currently active
{
console.log("Removed");
btn.classList.remove("active");
}
});
.btn {
padding: 1rem;
width: 200px;
transition: all 300ms ease-in-out;
}
.btn.active {
padding: 2rem;
width: 400px;
}
<button class="btn" id="btn">Click Me</button>
Essentially, you're using a CSS class as a target for the different styling and just using JS to turn the class on/off. That way, you can just edit the 'toggle' class in CSS to whatever you want and the code will always work. This is usually what we use for sticky navbars, etc. You just add/remove another class, and that overrides the default styling.

Replace image by another using css display and JS

I'm trying to apply the same effect on the social network logo: https://www.pierrejacobson.com/
Instead of using CSS awesome, I would like to do it with an image but it doesn't work as expected.
Regarding CSS, there is no need to put the code here. I just have the three social network logo on display: none;.
Could you please help me?
<div id="social_bar">
<div class="width_size">
<img alt="image enveloppe" class="email" src="email.png" />
<p>CONTACT#PIERREJACOBSON.COM</p>
<div id="network_logo">
<img alt="logo_facebook" id="fixed_facebook" src="facebook.png" />
<img alt="logo_youtube" id="fixed_youtube" src="youtube.png" />
<img alt="logo_instagram" id="fixed_instagram" src="instagram.png" />
<img alt="logo_facebook" id="facebook" src="facebook_blue.png" />
<img alt="logo_youtube" id="youtube" src="youtube_blue.png" />
<img alt="logo_instagram" id="instagram" src="instagram_blue.png" />
</div>
<!--network_logo-->
</div>
<!--width_size-->
</div>
<!--social_bar-->
<div id="logo_bar">
<div class="width_size">
<img alt="logo" src="logo-pierre-jacobson2.png" />
<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="30" value="RECHERCHER..." />
<img alt="search" src="search-solid.svg" />
</div>
</div>
JS
const get_img = function(name){ return document.getElementById(name); };
const img_one = get_img("fixed_facebook");
const img_two = get_img("fixed_youtube");
const img_three = get_img("fixed_instagram");
const img_facebook = get_img("facebook");
const img_youtube = get_img("youtube");
const img_instagram = get_img("instagram");
img_one.addEventListener("mouseover", function (event) {
img_one.style.display = "none";
img_facebook.style.display = "inline";
});
img_two.addEventListener("mouseover", function (event) {
img_two.style.display = "none";
img_youtube.style.display = "inline";
});
img_three.addEventListener("mouseover", function (event) {
img_three.style.display = "none";
img_instagram.style.display = "inline";
});
img_one.addEventListener("mouseout", function (event) {
img_one.style.display = "inline";
img_facebook.style.display = "none";
});
img_two.addEventListener("mouseout", function (event) {
img_two.style.display = "inline";
img_youtube.style.display = "none";
});
img_three.addEventListener("mouseout", function (event) {
img_three.style.display = "inline";
img_instagram.style.display = "none";
});
from display "none" to "inline" there is no transition. Instead try to use "opacity: 0" and "opacity: 1" and set the "transition: all 0.2s ease";
The Display Property:
In your initial question you say that you want to use the display property to hide and show your images, however, you also state that you would like to have the screens transition from one to another.
Transitioning is definitely possible through the aptly named CSS transition property
The problem is that the display property is not able to be animated. If an element is configured to display: none; the page is immediately repainted with that element removed.
This means that you need to use a different property, and we typically would use opacity or visibility. Here are the differences between these three:
display: none;
immediately collapses the element
removes the element from view.
There's no transition allowed.
visibility: hidden;
Does not collapse the element
The space it occupied is blank.
removes the element from view
Transitions are allowed
The element will still pop out of sight.
opacity: 0;
Does not collapse the element
The space it occupied is blank.
removes the element from view
Transitions are allowed.
The element will fade until it is not visible.
Here is an example of the different way these properties affect the layout of the page:
const context = document.querySelector("#examples");
const ele = context.querySelector.bind(context),
hide = section => section.classList.toggle("hide"),
onClickHide = (btn, section) => btn.addEventListener("click", () => hide(section));
opacity = ele(".opacity"),
opacity_button = ele("#oBtn"),
visibility = ele(".visibility"),
visibility_button = ele("#vBtn"),
display = ele(".display"),
display_button = ele("#dBtn"),
toggle_button = ele("#tBtn");
onClickHide(opacity_button, opacity);
onClickHide(visibility_button, visibility);
onClickHide(display_button, display);
toggle_button
.addEventListener("click", function() {
hide(opacity);
hide(visibility);
hide(display);
});
html,
body,
#examples {
width: 100%;
height: 100%;
box-sizing: content-box;
margin: 0px;
padding: 0px;
}
#examples section {
display: flex;
flex-direction: column;
width: 100px;
height: 100px;
border: 5px solid black;
margin: 5px;
transition: all .5s ease-in-out;
}
#examples section.hide {
border-radius: 100px;
}
#examples section.opacity {
background-color: blue;
color: white;
}
#examples section.opacity.hide {
opacity: 0;
}
#examples section.visibility {
background-color: purple;
color: white;
}
#examples section.visibility.hide {
visibility: hidden;
}
#examples section.display {
display: block;
background-color: red;
color: white;
}
#examples section.display.hide {
color: black;
display: none;
}
<main id="examples">
<section class="opacity">opacity <button id="oBtn">hide</button></section>
<hr />
<section class="visibility">visibility <button id="vBtn">hide</button></section>
<hr />
<section class="display">display <button id="dBtn">hide</button></section>
<hr/>
<button id="tBtn">Toggle All</button>
</main>
Note: In the above there are actually two properties transitioning - opacity, visibility, or display - and border-radius. You should notice firstly how in the display example the border-radius change isn't seen at all, and secondly how the display example is the only one that collapses the element so that it no longer takes up space.
Applying Transitions:
By combining opacity: 0; with height: 0px; width: 0px; we can remove the element visually from the page while also removing any impact it has on other elements - meaning that it won't take up space and is transitionable.
However, in your particular case ( wanting to change the image to a different color ), all of that isn't necessary. You can swap out your img tags for div tags, then apply the background-url property to get an image (a.e. background-url: url("facebook.png"); ) and a hover effect that adds whatever background-color you're looking for.
#facebook {
width: 50px;
height: 50px;
background-image: url("http://via.placeholder.com/50x50");
cursor: pointer;
transition: all .3s ease-in-out;
}
#facebook:hover {
background-color: darkblue;
background-blend-mode: color-dodge;
}
Note: You can also adjust background-blend-mode to other options to change how the image and the color are put together. a.e. background-blend-mode: luminosity; will make the color lighter background-blend-mode: color-dodge; will make it darker and add "dodge" effect. Feel free to play around!
#facebook {
width: 50px;
height: 50px;
background-image: url("http://via.placeholder.com/50x50");
cursor: pointer;
transition: all .3s ease-in-out;
}
#facebook:hover {
background-color: darkblue;
background-blend-mode: color-dodge;
}
<div id="social_bar">
<div class="width_size">
<p>CONTACT#PIERREJACOBSON.COM</p>
<div id="network_logo">
<div alt="logo_facebook" id="facebook"></div>
</div>
<!--network_logo-->
</div>
<!--width_size-->
</div>

Hide content behind an image

I'm trying a small code that has a div with image as a background and there is some text in it.
Here the case is when the user clicks on the div, the background should become white(and it is working perfectly). But Initially, the text that is present should be behind the Image. More like a foreground image.
Here is a working fiddle. https://jsfiddle.net/rj0h1g16/
please let me know where am I going wrong and how can I fix this.
Thanks
You could do this by initially setting the text opacity to 0 and changing its color to black with the same click event
function remove_image() {
document.getElementById("myClass").style.background = "white";
document.getElementById("myClass").style.color = "black";
}
.myClass {
background: url("https://cdn2.droom.in/photos/images/drm/super-cars.png");
height: 100px;
width: 100px;
color: rgba(0, 0, 0, 0);
}
<div class="myClass" id="myClass" onclick="remove_image()">
This is texr
</div>
You could simply set the display style on the text from "none" to anything else as you click.
<div class="myClass" id="myClass" onclick="remove_image()">
<div class="myText" id="myText"> This is texr</div>
</div>
function remove_image() {
document.getElementById("myClass").style.background = "white";
document.getElementById("myText").style.display = "inline";
}
.myClass {
background: url("https://cdn2.droom.in/photos/images/drm/super-cars.png");
height: 100px;
width: 100px
}
.myText {
display: none;
}
See here: https://jsfiddle.net/hg748zk7/
I want the text behind the image
You can use the z-index property for that. But the text will need to be wrapped in a new element.
In the example I've used js to add a class with the new properties you want.
function remove_image() {
document.getElementById("myClass").classList.add('active');
}
.myClass {
background: url("https://cdn2.droom.in/photos/images/drm/super-cars.png");
height: 100px;
width: 100px
}
.myClass.active {
background: white;
}
span {
z-index: -1;
position: relative;
}
.myClass.active span {
z-index: 1;
}
<div class="myClass" id="myClass" onclick="remove_image()">
<span>This is text</span>
</div>
function remove_image() {
document.getElementById("myClass").style.background = "white";
document.getElementsByTagName('span')[0].style.display = 'block'
}
.myClass {
background: url("https://cdn2.droom.in/photos/images/drm/super-cars.png");
height: 100px;
width: 100px;
}
<div class="myClass" id="myClass" onclick="remove_image()">
<span style='display:none;'>This is texr </span>
</div>

Animating height property :: HTML + CSS + JavaScript

I have noticed this 'issue' lately when trying some stuff.
Say I want to create a drop-down menu or an accordion.
This is my HTML:
<div class="wrapper" onclick="toggle()">
I want to be animated!
<div class="content">
Was I revealed in a timely fashion?
</div>
</div>
Stylesheets:
.wrapper {
background: red;
color: white;
height: auto;
padding: 12px;
transition: 2s height;
}
.content {
display: none;
}
.content.visible {
display: block;
}
JavaScript:
function toggle () {
var content = document.getElementsByClassName('content')[0];
var test = content.classList.contains('visible');
test ? content.classList.remove('visible') :
content.classList.add('visible');
}
I am trying to achieve a nice, smooth animation when we toggle the state of the content. Obviously this does not work. Anyone can explain to me why it does not work and how to fix it? Many thanks.
Link to the JSFiddle.
First things first, some CSS properties CANNOT be transitioned, display is one of them, additionally only discrete values can be transitioned, so height: auto cannot as well.
In your case the problem is with height: auto, while there are a few hacks for doing this, if you are just showing and hiding stuff, why not add, and use jQuery's toggle instead?
$(".content").toggle("slow");
jsFiddle
--EDIT (without jQuery)--
Because it's the auto that is giving us problems, we can use javascript to replace auto with a value in pixels and then use the css transition normally, if your content doesn't have a scroll, we can easily take that value from the scrollHeight property:
function toggle () {
var content = document.getElementsByClassName('content')[0];
var test = content.classList.contains('visible');
console.log(test);
if (test) {
content.classList.remove('visible')
content.style.height = "0px";
} else {
content.classList.add('visible');
content.style.height = content.scrollHeight + "px";
}
}
Css
.wrapper {
background: red;
color: white;
height: auto;
padding: 12px;
transition: 2s height;
}
.content {
height: 0px;
display: block;
transition: 2s height;
overflow: hidden;
} /* totally removed .content.visible */
jsFiddle

Hide Container If Clicked on Background Not Working

I am trying to hide the popup if the background is clicked, but NOT the div.
Basically, when the user clicks the background it will hide the div; yet, if the user clicks the actual div it will still hide it. I would only like the div to be hidden on the clicking of the background.
Here is my code:
HTML
<div id="linkinputholder">
<div id="linkinputbox">
Title
</div>
</div>
<button onclick="displaylinkinput()" type="button"> Display </button>
CSS
#linkinputholder {
display: none;
position: fixed;
z-index: 100;
width: 100%;
min-height: 100%;
left: 0px;
top: 0px;
background: rgba(0, 0, 0, 0.2);
}
#linkinputbox {
display: block;
background-color: red;
width: 500px;
height: 100px;
position: fixed;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
JS/Jquery
function displaylinkinput() {
document.getElementById('linkinputholder').style.display = "block";
}
$('#linkinputholder').click(function() {
document.getElementById('linkinputholder').style.display = "none";
});
I'm assuming by background you mean your linkinputholder div, which is 100% wide by 100% tall. Your jquery code was missing the call to displaylinkinput, so i added a click event handler to call it. When you click on the linkinputbox div, the click event passes down through to linkinputholder. To prevent this just stop the event propagation.
$('#linkinputbox').click(function (evt) {
evt.stopPropagation();
});
I have created a JSFIDDLE for you here: http://jsfiddle.net/seadonk/oLgex1pq/
Here is the corrected javascript:
function displaylinkinput() {
$('#linkinputholder').show();
}
$(function () {
$('button').click(function () {
displaylinkinput();
});
$('#linkinputholder').click(function () {
$('#linkinputholder').hide();
});
$('#linkinputbox').click(function (evt) {
evt.stopPropagation();
});
})();
Edit
Check if div is target
$('#linkinputholder').click(function(event) {
if (jQuery(event.target).is('.linkinputholder')) return;
document.getElementById('linkinputholder').style.display = "none";
});

Categories