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.
Related
Say we are using angular2-multiselect-drop down. What would be the proper way to get different hover over values for different items in the drop down?
In normal html, you have direct access to each element of the drop down list if you are hardcoding it, and you can set the style css for each item.
But how could I do this in an angular drop down?
You can achieve this using following code,
Your CSS will look like below,
/* Tooltip container */
.tooltip {
border: 2px solid #f5f5f5;
margin-left: 10%;
padding:20px;
max-height: 10%;
width: 300px;
position: relative;
display: block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
your HTML be like below,
<h1>See the numbers in tooltip when they change</h1>
<div *ngFor="let i of ['a','b','c','d','e','f']; let j = index;" class="tooltip">
<span>{{i}}</span>
<span class="tooltiptext">new tooltip text every time {{j}}</span>
</div>
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;
}
I am trying to make popups containing list of lines:
Support
Contact
Demo
In the 1st line, it should display Support. In the 2nd line, it should display Contact and in the 3rd line, it should display Demo.
I was able to create popups containing one line by following the w3schools link http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup but I am not sure how to create popups having multiple lines.
The pictorial representation of what I am trying to get is shown here:
The code which I have used from the w3schools link is shown below:
<!DOCTYPE html> <html> <style> /* Popup container - can be anything you want */ .popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
/* The actual popup */ .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 - 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 ;} } </style> <body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup! <span class="popuptext" id="myPopup">Support</span> </div>
<script> // When the user clicks on div, open the popup function myFunction() {
var popup = document.getElementById('myPopup');
popup.classList.toggle('show'); } </script>
</body> </html>
In place of A Simple Popup, I have written Support. At this moment, I am able to get only one line as shown here:
As a quick try do these steps to design what you want
1- open you mentioned link
2- change the html code to :
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<div class="popuptext" id="div">
<div><span id="myPopup">Support</span><br/></div>
<div><span id="myPopup1">Contact</span><br/></div>
<div><span id="myPopup2">Demo</span><br/></div>
</div>
</div>
3- change myFunction() code block to :
var popup = document.getElementById('div');
popup.classList.toggle('show');
4- Add this css class to style element in head
.popup .popuptext div{
text-align: center;
background:#ad4747;
border-radius: 6px;
width: 160px;
margin-top:2px;
}
5- At the end run and see the result
but as you know there are several ways to design popup menu by front-end tools ,
but my solution is a quick design hope give you some help.
Additional helpful link
Ok, so basically what I need is that when I select some text in an <input> or in a <textarea>, a tooltip appears with two buttons, and then get the selected text in a Javascript variable.
The image below is an example of what I need:
var selectedText = "s is an in"
I'm using Powertip for the tooltip and Rangy for manipulating selections in <input> and <textarea>, the problem is that I can't manage to popup the tooltip and get the selected text in a JS variable after I select the text with the cursor.
Any suggestions on how to achieve this?
Thanks in advance.
UPDATE:
Thanks to Todd answer, I'm sharing what I was trying to achieve:
JSFiddle
This seems to work
$('input, textarea').powerTip({ manual: true }); // have to prevent default plugin
$('input, textarea').on({
'select': function() {
var selectedText = window.getSelection().toString();
$(this).powertip('show');
},
'blur': function() {
$.powerTip.hide();
}
});
You can add mouse up event on selection of a text and can get the selected text, after that when you will show the selected text, you can also show the tool-tip with that.
Here is the JSFiddle Link for showing the text selection, you can update this and can also show the tool-tip where I have printed the selected text.
How to show tool-tip box:
Step-1) You need to get the top and left of the input field.
Step-2) Create a box using HTML and CSS.
Step-3) Set it's position to absolute and it's container to relative.
Step-4) Set it's top and left to that you have received in Step-1.
Use a Modal to create popup, create a Text Field Select Event & a Function to trigger open anchor.
Thats all you need.
here is a working example I have created:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Text Select Modal</title>
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 300px;
height:130px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #151414;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
</style>
<script type="text/javascript">
function myFunction() {
window.open("#openModal","_self");
}
</script>
</head>
<body>
<input type="text" onSelect="myFunction()">
<div id="openModal" class="modalDialog">
<div>
X
<br>
<br>
<br>
<br>
<br>
<input type="button" value="Button 1">
<input type="button" value="Button 2">
</div>
</div>
</body>
</html>
I have a following HTML:
<span class="day-number">{{day-number}}</span>
<div class="event-box">
<div class="event-container">
</div>
<div class="more-events">more ...</div>
</div>
Event-container is filled with an unknown number of .event elements like the following:
<div class="event">{{event-name}}</div>
I want to show or hide the .more element based on if the .event-container has a height of over 76px (equal to the height of four .event elements stacked).
The styling for the above elements:
.event {
text-align: left;
font-size: .85em;
line-height: 1.3;
border-radius: 3px;
border: 1px solid #3a87ad;
background-color: #3a87ad;
font-weight: normal;
color: whitesmoke;
padding: 0 1px;
overflow: hidden;
margin-bottom: 2px;
cursor: pointer;
}
.event-box {
max-height: 76px;
overflow: hidden;
position:relative;
}
.event-box .more-events {
height: 10px;
position: absolute;
right: 0;
bottom: 10px;
display: none;
z-index: 5;
}
No styling for .event-container
I can do what I want with Javascript (jQuery):
$(".event-box").each(function(){
var $this = $(this);
if($this.children(".event-container").height() > 76){
$this.children(".more-events").css("display", "block");
} else {
$this.children(".more-events").css("display", "");
}
});
And run that every time a make a change, but I'd rather do it with CSS.
Is this possible? Maybe with pseudo elements or media queries or something?
JSFIDDLE: http://jsfiddle.net/pitaj/LjLxuhx2/
If changing the markup is acceptable there is a possibility to achieve a somewhat similarly looking page without using JavaScript to show or hide, here is the Fiddle
I have removed <div class="more-events">more ...</div> line and made elements of event class to get hide when it is necessary I also made them to appear when hovering over more ... .
The CSS I have added:
.event:nth-child(n){
display: none;
}
.event:nth-child(1),.event:nth-child(2),.event:nth-child(3),.event:nth-child(4){
display: block;
}
.event:nth-child(5){
text-indent: -9999px;
position: relative;
display: block;
color: black;
border: none;
background-color: #FFF;
}
.event:nth-child(5)::before{
position: absolute;
text-indent: 0px;
content: "more ...";
display: block;
}
.event:nth-child(5):hover{
position: static;
text-indent: 0;
border: 1px solid #3a87ad;
background-color: #3a87ad;
color: whitesmoke;
}
.event:nth-child(5):hover::before{
display:none;
}
.event:nth-child(5):hover ~ .event:nth-child(n){
display: block;
}
And for .event-box class I have commented out max-height: 76px; because in my browser 76px was not equal to the height of four .event elements stacked. Also removed update function.
I dont think it's possible using css only. but for better approach in what you are trying to do.instead of using max-height for .event-box I use this css which is add display:none to +4.event on your event container:
.event-box .event-container .event:nth-child(n+5){
display: none;
}
and now when it's more than 4 .event your more text appears. FIDDLE
UPDATE:
HERE I make little change in you js as well and make it more professional,
while you are using template to render the page, maybe you can do it as follow
<div class="event-container">
{{#each events}}
<div class="event">{{event-name}}</div>
{{/each}}
</div>
{{#if canshowmore}}
<div class="more-events">more ...</div>
{{/if}}
and
function canshowmore() {
return events.length >= 4;
}