I am trying to display an overlay onto my radio button images. So far I can create a border for the selected image but I cannot get a background image to overlay in front. Here is my code:
HTML/AngularJS:
<div class="row">
<label class="col-sm-4" ng-repeat="size in sizes">
<input type="radio" name="radio_size" ng-model="$parent.currentSize" value="{{size.value}}" hidden/>
<img class="img-thumbnail" src="{{size.url}}">
<img class="overlay" src="images/greenCheck.png">
</label>
</div>
CSS:
input[type=radio]:checked ~ .img-thumbnail {
border: solid limegreen .3em;
position: relative;
opacity: 1;
}
.overlay {
position: absolute;
top:5%;
left:7%;
height: 15%;
background: url("images/greenCheck.png");
opacity: 1;
}
This is what I have currently:
Before I click on a radio button.
After I click on a radio button.
I want the check marks to only appear when selected.
Set the opacity for the overlay to 1, when the radio is checked:
input[type=radio]:checked ~ .img-thumbnail {
border: solid limegreen .3em;
position: relative;
opacity: 1;
}
.overlay {
position: absolute;
top:5%;
left:7%;
height: 15%;
background: url("images/greenCheck.png");
opacity: 0;
}
input[type=radio]:checked ~ .img-thumbnail + .overlay {
opacity: 1;
}
This makes for a great possibility to make a transition for the checkmark to fade in, adding a transition to the .overlay, as the overlay is already in place just hidden, and when adding opacity: 1; the checkmark will fade in, if there is specified a transition.
All you need to do is add the input[type=radio]:checked selector to your .overlay too, i.e.:
input[type=radio]:checked ~ .img-thumbnail {
border: solid limegreen .3em;
position: relative;
opacity: 1;
}
/* .overlay { */ // <- change this....
input[type=radio]:checked ~ .overlay { // <- ...to this
position: absolute;
top:5%;
left:7%;
height: 15%;
background: url("images/greenCheck.png");
opacity: 1;
}
With your current code, you are displaying the overlay all the time, not just on selected images.
Edit: You don't need to include the image here - you already include it in your CSS so its included twice.
<div class="row">
<label class="col-sm-4" ng-repeat="size in sizes">
<input type="radio" name="radio_size" ng-model="$parent.currentSize" value="{{size.value}}" hidden/>
<img class="img-thumbnail" src="{{size.url}}">
<span class="overlay"></span>
</label>
</div>
my css:
label > input{
visibility: hidden;
position: absolute;
}
label > input + img{
cursor:pointer;
border:2px solid transparent;
}
label > input:checked + img{
border:2px solid #f00;
}
Related
i’m working on a tab, trying to highlight the label of the actived content-section. I want to change label's background-color to distinguish the selected tab, is it possible to do that only with css? If not, how can i do that with javascript?
I try with css following this ticket (Style a <label> based on its <input>'s state), javascript to assign active state to an element without success.
/* Tabs Name Container */
.TabsHeader-container{
position: relative;
width: 120px;
float: left;
z-index: 20;
}
/* Tabs Names Label */
.TabsHeader-container label{
position: relative;
padding: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: block;
font-size: 13px;
color: black;
cursor: pointer;
user-select: none;
}
.TabsHeader-container1 {
background-color:#f8ab1f;
width:50px;
height:50px;
border-radius:50px;
}
.TabsHeader-container2 {
background-color:#f8ab1f;
margin-top:20px;
width:50px;
height:50px;
border-radius:6px;
}
/* Hover effect on tabs names */
.TabsHeader-container label:hover{
background: rgba(0, 0, 0, 0.2);
}
/* Content area for tabs */
.TabsHeader-content{
position: relative;
background: white;
border-radius:10px;
width: calc(100% - 120px);
padding: 15px;
float: left;
box-sizing: border-box;
z-index: 19;
display: none;
}
.TabsHeader-content:after{
content: "";
clear: both;
}
/* Hide input radio from users */
input[name="TabsHeader"]{
display: none;
}
/* Show tab when input checked */
input[name="TabsHeader"]:checked + .TabsHeader-content{
display: block;
animation: slide 0.5s forwards;
}
/* Slide animation for tab contents */
#keyframes slide{
from{
left: -10%;
opacity: 0;
}
to{
left: 0;
opacity: 1;
}
}
<section class="TabsHeader-container">
<label class="TabsHeader-container1" for="TabsHeader1"></label>
<label class="TabsHeader-container2" for="TabsHeader2"></label>
</section>
<input name="TabsHeader" id="TabsHeader1" type="radio" checked />
<section class="TabsHeader-content">
<p class="text1" style="font-size:19px;">Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<!-- Any other content -->
</section>
<input class="text2" name="TabsHeader" id="TabsHeader2" type="radio" checked />
<section class="TabsHeader-content">
<p style="font-size:19px;"> Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
</section>
Thanks a lot.
Could just use a bit of jquery? something like:
$(document).ready(function(){
$('.TabsHeader-container1').click(function(){
$(this).addClass("active");
$('.TabsHeader-container2').removeClass("active");
});
$('.TabsHeader-container2').click(function(){
$(this).addClass("active");
$('.TabsHeader-container1').removeClass("active");
});
});
Then just add .active{} to your stylesheet with your desired background colour and all should be good.
I have three inline-block divs on my page (see JSFiddle):
Div #one contains a button 'Show' and is absolutely positioned so that it overlaps the div #two. When 'Show' is clicked, div #two slides out from under #one using translateX, like so:
When this happens, I would like to push div #three down so that it appears just below div #two, like so:
I'm not sure how to go about achieving this using pure CSS that doesn't involve moving #three along the Y-axis using #three { transform: translateY(...) }. I was wondering if translateX is the wrong approach here since it does not disturb the position of neighbouring elements, but I don't know what to use in its place.
As I have already stated in the comment section: It really depends on what your final goal is and what content you put in your divs - how everything is structured.
I feel like this is more of a XY-problem. I.e. the design-choice demands for a special case/solution that could be solved in another way so that the "hacky" solution does not have to exist in the first place.
Nevertheless, since you have asked for it I give you a solution for this specific problem:
const container = document.querySelector('.container');
const slide = document.getElementById('show');
const done = document.getElementById('hide');
const two = document.getElementById('two');
const right = document.querySelector('.right');
show.addEventListener('click', function() {
two.classList.add('show');
right.classList.add('shift');
});
hide.addEventListener('click', function() {
two.classList.remove('show');
setTimeout(function() {
right.classList.remove('shift');
}, 1000)
});
.left,
.right {
position: relative;
height: 200px;
margin-top: 5px;
display: inline-block;
border: 1px solid black;
float: left;
}
.left {
width: 100px;
}
.right {
width: 200px;
margin-left: 10px;
transform: translateX(0);
}
.right.shift {
clear: left;
display: block;
float: none;
transform: translateX(100px);
}
#one,
#two {
height: 100%;
}
#one {
background-color: lightblue;
position: absolute;
z-index: 1;
}
#two {
background-color: yellow;
transform: translateX(0);
transition: transform 1s;
}
#two.show {
transform: translateX(100%);
}
<div class="left">
<div id="one">
Click 'Show' to show panel 2
<button type='button' id='show'>Show</button>
</div>
<div id="two">
Click 'Hide' to hide panel 2
<button type='button' id='hide'>Hide</button>
</div>
</div>
<div class="right">Some other content</div>
Alternative
You could implement a spoiler section that you can toggle to display more information if it is desired.
const spoilerBtn = document.getElementById('spoiler-btn');
const spoiler = document.getElementById('spoiler');
spoilerBtn.addEventListener('click', function() {
spoiler.classList.toggle('show');
});
.left,
.right {
position: relative;
height: 200px;
margin-top: 5px;
display: inline-block;
border: 1px solid black;
float: left;
}
.left {
width: 100px;
}
.right {
width: 200px;
margin-left: 10px;
}
#spoiler {
background-color: tomato;
display: none;
}
#spoiler.show {
display: block;
}
<div class="left">Aside text here</div>
<div class="right">
Toggleable section: <button id="spoiler-btn">toggle</button>
<div id="spoiler">This content can be toggled</div>
<p>Some other content</p>
</div>
I'm trying to move the caption, what's in data-title, from underneath the image to the right of the image.
I don't know HTML/CSS very well, but it seems to me like the image is contained in the div .lb-outerContainer, and the caption is in the div .lb-dataContainer in the Lightbox CSS. I tried removing the clear: both from the ::after for outerContainer and adding display: inline-block to the two divs, but it didn't work. The image moved to the left but the caption didn't move up.
Does anyone have any advice? Thank you :)
You'll have to put some custom css styling, also add a inner div in js file like following example code.
Find in js file -
"<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>"
And Replace With(copy without Quats) -
"<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="new-inner-div"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div></div>"
New Style on page -
<style>
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
font-weight: 400;
max-width: 100%;
margin: 0 auto;
}
.new-inner-div
{
max-width: 700px;border: 1px solid red;margin: 0 auto;min-height: 346px; background: #fff;
}
.lb-outerContainer
{
width: 50% !important; height: auto !important;float: left;
}
.lb-dataContainer
{
float: right;width: 46% !important;
}
.lb-data .lb-close {
display: block;
float: left;
width: 30px;
height: 30px;
text-align: right;
outline: 0;
filter: alpha(Opacity=70);
opacity: .7;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}
.lb-image
{
width:100% !important;
}
</style>
How do i customize css so the popup alert just like this but instead alert popup focus in a button.
i have use this kind of validation on text box
<div class="form-group">
<label class="control-label col-sm-3" for="judul_laporan">Judul Laporan </label>
<div class="col-sm-5">
<input type="email" class="form-control" id="judul_laporan" >
<span style="color: red" id="warnlaporan"></span>
</div>
</div>
<button type="button" id="save_laporan"></button>
JQuery
$("#save_laporan").click(function(){
var judul_laporan = $('input[name="judul_laporan"]');
if(judul_laporan.val() == ''){
judul_laporan.parent().parent().addClass('has-error');
$('#warnlaporan').text("Judul Laporan Belum Ada");
judul_laporan.focus();
result
}else{
judul_laporan.parent().parent().removeClass('has-error');
$('#warnlaporan').text("");
}
But i dont know how to make a popup alert likes the image ( and it should be button )
You can see the x3schools' documentation. It gives you a sample popup at the top of a div.
This code opens a popup:
// When the user clicks on <div>, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<div class="popup" onclick="myFunction()" style="left: 35px; top: 60px">Click me!
<span class="popuptext" id="myPopup">Popup text...</span>
</div>
You also can use microtip, it is a pretty library witch give you the opportunity to create simply popup. This is the only declaration: <button aria-label="Hey tooltip!" data-microtip-position="top-left" role="tooltip">. However, you have to download a package (just 1kb) with rpm in your server.
I have a hidden layer and when the user clicks a button the layer is set to show. How can I make the parent page become disabled/greyed out so the user cannot click anything on the parent page until the layer has been closed(set to hide)
similar to lightbox galleries
I call a function in the layer from the parent page from a button(edit) click
edit.onclick=function(){
edit_box('show');
}
then on the layer I call the show function
function edit_box(showhide)
{
if(showhide == "show")
{
document.getElementById('popupbox').style.visibility="visible";
}else if(showhide == "hide"){
document.getElementById('popupbox').style.visibility="hidden";
}
}
the css for the #popup is
#popupbox{
padding:0;
margin: 0px auto;
background:white;
border: solid #000000 1px;
z-index: 9000;
font-family: arial;
visibility: hidden;
}
and the html is
<div id="popupbox">
<div class="close"><a href="javascript:edit_box('hide');" >close</a></div>
any pointers greatly appreciated as I do not know where to start on this one and can only find code relivent to pop up boxes elsewhere online
why dont you try with jQuery, jQuery（"#popupbox"）.hide();
Change your style to
#popupbox{
padding:0;
margin: 0px auto;
position:fixed;
top:0; left:0; right:0; bottom: 0;
display:none;
background: rgba(255,255,255,0.5);
border: solid #000000 1px;
z-index: 9000;
font-family: arial;
}
and your function to
function edit_box(showhide)
{
if(showhide == "show")
{
$('#popupbox').show();
} else if (showhide == "hide") {
$('#popupbox').hide();
}
}
if you want to support browsers that do not understand rgba colors then use a semi-transparent background .png image
ok sorted this out with
css on parent page
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
css on layer page
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
then the js on parent page within function calling popup layer
document.getElementById('fade').style.display='block'
html div on parent page
<div id="fade" class="black_overlay"></div>
js on popup layer
function edit_box(showhide){
if(showhide == "show"){
document.getElementById('popupbox').style.display='block';
document.getElementById('popupbox').style.visibility="visible";
}else if(showhide == "hide"){
document.getElementById('popupbox').style.display='none';
document.getElementById('fade').style.display='none'
document.getElementById('popupbox').style.visibility="hidden";
}
}
and the html on the layer
<div id="popupbox" class="white_content">
<div class="close"><a href="javascript:edit_box('hide');" >close</a></div>
</div>