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>
Related
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>
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>
I intend to drag the entire parent div with only the handle attached to its left. See below code snippet, the 30x30 image is my drag handle for now:
var DRAG_CLASS = "beingdragged";
div.ondragstart = function() {
this.classList.add(DRAG_CLASS);
};
div.ondragend = function() {
this.classList.remove(DRAG_CLASS);
};
img {
cursor: move;
float: left;
}
div {
border: 1px solid red;
background: lightblue;
width: 100%;
transform: 0.5s ease;
}
div.beingdragged {
width: 95%;
}
<!DOCTYPE html>
<html>
<body>
<div id="div" draggable="true"><img src="https://placehold.it/30x30">
<p>this is some text</p>
</div>
</body>
</html>
I want the entire div to move along with the cursor as the user moves the cursor around, and as one would expect in a drag operation. However, as you can observe in the output, only the image is being dragged, even though I have set draggable="true" to the entire parent div. The entire parent div stays where it was even though the cursor moves around.
I have added a class DRAG_CLASS to the div, so as you can see, the dragstart and the dragend events are firing correctly.
What then is the issue?
Sure the div is draggable, as you can see when you drag it around somewhere other than the image.
However the image is also, by default, independently draggable. Easy to disable, though, with draggable="false" or the appropriate css rule.
var DRAG_CLASS = "beingdragged";
div.ondragstart = function() {
this.classList.add(DRAG_CLASS);
};
div.ondragend = function() {
this.classList.remove(DRAG_CLASS);
};
img {
cursor: move;
float: left;
}
div {
border: 1px solid red;
background: lightblue;
width: 100%;
transform: 0.5s ease;
}
div.beingdragged {
width: 95%;
}
<!DOCTYPE html>
<html>
<body>
<div id="div" draggable="true"><img draggable="false" src="https://placehold.it/30x30">
<p>this is some text</p>
</div>
</body>
</html>
I'm using Polymer but I'm having some trouble with events and the such. I want to create an expanding search bar, similar to
My current code looks something like the following:
Code:
// This is where things are a little unclear for me. So far, I have tried the following:
expand: function() {
var divToStretch = this.$.stretchMe;
if ( /*search bar is open*/ ) {
//remove "stretched" css from "stretch" div
} else {
//add "stretched" css to "stretch" div
}
}
div.stretch {
border: 1px solid black;
width: 25px;
height: 25px;
border-radius: 25px;
transition: width 1s;
}
.stretched {
width: 500px;
}
<div class="stretch" id="stretchMe">
<iron-icon class="search" icon="search" on-click="expand"></iron-icon>
</div>
May I suggest a pure CSS alternative? You can make your search bar receive focus, by adding tabIndex="0". This way you can provide a style for div.stretch:focus, allowing you to dynamically change its size when the user clicks or focuses on the element and making it small again when the user focuses on something else.
It's really simple, elegant, does not need a lot of code and does what you need. Give it a try!
div.stretch {
border: 1px solid black;
width: 25px;
height: 25px;
border-radius: 25px;
transition: width 1s;
}
div.stretch:focus {
width: 500px;
}
<div class="stretch" id="stretchMe" tabIndex="0">
<iron-icon class="search" icon="search" on-click="expand"></iron-icon>
</div>
Alternatively, you can make it do the same thing on :hover, if that's what you are after, simply by changing the selector. Or combine both, if you prefer. Below is a :hover example.
div.stretch {
border: 1px solid black;
width: 25px;
height: 25px;
border-radius: 25px;
transition: width 1s;
}
div.stretch:hover {
width: 500px;
}
<div class="stretch" id="stretchMe">
<iron-icon class="search" icon="search" on-click="expand"></iron-icon>
</div>
You can use the toggle method of the classList for this:
expand : function() {
this.$.stretchMe.classList.toggle('stretched');
}
The classic way would be as following:
if (/*search bar is open*/) {
divToStretch.style.width = "auto";
} else {
divToStretch.style.width = "500px";
}
But I highly recommend using this.$.stretchMe.classList.toggle('stretched');
Read more here
How can I achieve this with pure JS? I am not allowed to use jQuery or a pure CSS solution, so the only way I can think of is pure JavaScript.
I have this demo, for example: http://codepen.io/anon/pen/jBEMRK
HTML:
<body>
<input type="text">
</body>
CSS:
body {
background: red;
}
input {
width: 50%;
}
What I want to achieve is that when I click on the input field, I'd love to have the input field focused and the background (body) having a backdrop / fade / blur (however it is called). Preferably with a certain opacity, of course.
You could do something like below. Basically, you can absolutely position a div and then trigger some dim/blur function for that div when the textbox is in focus.
http://codepen.io/anon/pen/LWEbYG
HTML
<body>
<input id="txtBox" onfocus="onFocus()" onfocusout="onFocusOut()" type="text">
<div id="blur"></div>
</body>
CSS
body {
background: red;
}
input {
width: 50%;
}
.blury {
position: absolute;
height: 100%;
width: 100%;
background-color: black;
top: 0;
left: 0;
opacity: 0.7;
z-index: -1;
}
JS
function onFocus() {
document.getElementById('blur').setAttribute('class', 'blury');
}
function onFocusOut() {
document.getElementById('blur').setAttribute('class', '');
}
You can simply do the following.
HTML part:
<input type="text" onblur="blurIt(false)" onfocus="blurIt(true)">
JS part:
function blurIt(val){
if (val) document.body.style.background = "black";
else document.body.style.background = "red";
}
If you mean blur as in smudge you could use the webkitfilter property.
Example:
HTML:
<input type="text" onfocus="blurBackground(true)" onblur="blurBackground(false)" />
JS:
function blurBackground(doIt) {
if (doIt) document.body.style.webkitFilter = "blur(5px)";
else document.body.style.webkitFilter = "blur(0)";
}