Trying to figure out how to do this. I have the style but I'd like something to happen after I click the tabs. I would like the div with the tab class names to show and hide when i click the tabs. I'm assuming how that would work. Right now when I click the tabs nothing happens.
Here's my HTML
<style type="text/css">
ul.tabs {
display: table;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.tabs>li {
float: left;
padding: 10px;
background-color: lightgray;
}
ul.tabs>li:hover {
background-color: lightgray;
}
ul.tabs>li.selected {
background-color: lightgray;
}
div.content {
border: 1px solid black;
}
ul { overflow: auto; }
div.content { clear: both; }
</style>
<body>
<ul class="tabs">
<li>Description</li>
<li>Specs</li>
</ul>
<div class="pane">
<div class="tab1">
<div><h2>Hello</h2></div>
<div />
<div>Hello hello hello.</div>
<div />
<div>Goodbye goodbye, goodbye</div>
<div />
<div />
</div>
<div class="tab2" style="display:none;">
<div><h2>Hello2</h2></div>
<div />
<div>Hello2 hello2 hello2.</div>
<div />
<div>Goodbye2 goodbye2, goodbye2</div>
<div />
</div>
</div>
<div class="content">
This should really appear on a new line.
</div>
</body>
Standard answer: you can't. There is no way to do this with purely HTML/CSS2, unfortunately. We can make drop-downs in CSS with the :hover psuedo-class, but there's no equivalent for clicks. Look into one of these Javascript-based solutions.
Secret answer: CSS3 [kind of] supports this. But you have to create radio buttons [weird], and it's not supported in IE7/8. If you dare...
And if you don't mind using Javascript, here's a quick solution. Reformatted your HTML, first of all. No need to put <h2>s in <div>s, and use <br /> for breaks—that's what it's there for. Also, I changed the tab <div>s to use id's instead of classes. If you have unique identifiers for an element, use id.
<ul class="tabs">
<li>Description</li>
<li>Specs</li>
</ul>
<div class="pane">
<div id="tab1">
<h2>Hello</h2>
<p>Hello hello hello.</p>
<p>Goodbye goodbye, goodbye</p>
</div>
<div id="tab2" style="display:none;">
<h2>Hello2</h2>
<p>Hello2 hello2 hello2.</p>
<p>Goodbye2 goodbye2, goodbye2</p>
</div>
</div>
<div class="content">This should really appear on a new line.</div>
Didn't touch your CSS.
For Javascript, I recommend using jQuery. It really simplifies things.
All you need are these lines of code:
$(document).ready(function() {
$("ul.tabs a").click(function() {
$(".pane div").hide();
$($(this).attr("href")).show();
});
})
Basically, once the page is ready [has loaded], look for every link that's a child of a tabs ul. Attach a function that runs each time this link is clicked. When said link is clicked, hide all the tabs in the .pane div. Then, use the link's href to find the proper tab div and show it.
fiddle: http://jsfiddle.net/uFALn/18/
Because of the floated <li> elements your <ul> element is zero height.
Try adding ul { overflow: auto; } and div.content { clear: both; } to your CSS
Thanks benesch. It helped me too.
One can also add return false to prevent that jerky jump to the anchor. For instance:
$("ul.tabs a").click(function() {
$(".pane div").hide();
$($(this).attr("href")).show();
return false;
});
Related
How can I change the background color of the whole site or the text color when I click on a color from one component to another?
I need to use the Output decorator but how ?
style.component.html
<div>
<h2>background colors</h2>
<div class="theme-options">
<div class="theme-white"></div>
<div class="theme-blue"></div>
<div class="theme-orange"></div>
<div class="theme-green"></div>
</div>
<hr>
<h2>text Color</h2>
<div class="theme-options">
<div class="theme-white"></div>
<div class="theme-blue"></div>
<div class="theme-orange"></div>
<div class="theme-green"></div>
</div>
</div>
app.component.html
<app-signin></app-signin>
<app-style></app-style>
I just made a cut down version for demonstration for the background-color. It works the very same for text-color.
Step 1:
We need to add an unique onclick trigger to the buttons/boxes. So if they are pressed, they will fire a script.
Step 2:
We add a function that removes all possible classes to change the background-color by using document.querySelector("body").classList.remove("class");. That will remove possible a class from the body tag.
Step 3:
We add the same JS line with add instead of remove to add the wanted class to the body tag: document.querySelector("body").classList.add("class");.
Step 4:
We apply changes to the class in the css
There of course possibilities to cut the script down. However I believe that this way is the easiest to understand and reproduce for a beginner.
function textWhite() {
document.querySelector("body").classList.remove("background-blue"); document.querySelector("body").classList.remove("background-orange"); document.querySelector("body").classList.remove("background-green");
document.querySelector("body").classList.add("background-white");
}
function textBlue() {
document.querySelector("body").classList.remove("background-white"); document.querySelector("body").classList.remove("background-orange"); document.querySelector("body").classList.remove("background-green");
document.querySelector("body").classList.add("background-blue");
}
function textOrange() {
document.querySelector("body").classList.remove("background-blue"); document.querySelector("body").classList.remove("background-white"); document.querySelector("body").classList.remove("background-green");
document.querySelector("body").classList.add("background-orange");
}
function textGreen() {
document.querySelector("body").classList.remove("background-white"); document.querySelector("body").classList.remove("background-orange"); document.querySelector("body").classList.remove("background-blue");
document.querySelector("body").classList.add("background-green");
}
.background-white {
background-color: white;
}
.background-blue {
background-color: blue;
}
.background-orange {
background-color: orange;
}
.background-green {
background-color: green;
}
<body>
<h2>background colors</h2>
<div class="theme-options">
<div onclick="textWhite()" class="theme-white">White</div>
<div onclick="textBlue()" class="theme-blue">Blue</div>
<div onclick="textOrange()" class="theme-orange">Orange</div>
<div onclick="textGreen()" class="theme-green">Green</div>
</div>
<hr>
<h2>text Color</h2>
<div class="theme-options">
<div class="theme-white">White</div>
<div class="theme-blue">Blue</div>
<div class="theme-orange">Orange</div>
<div class="theme-green">Green</div>
</div>
</body>
In one of my page I can have two situation.
The first, in case no event found
<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
<div class="mec-skin-list-events-container" id="mec_skin_events_1210">
No event found! </div>
</div>
or this if at least event is found
<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
<div class="mec-skin-list-events-container" id="mec_skin_events_1210">
<div class="mec-wrap colorskin-custom">
<div class="mec-event-list-minimal">
<article data-style="" class="mec-event-article mec-clear mec-divider-toggle mec-toggle-202003-1210" itemscope="">
ARTICLE HERE
</article>
</div>
</div>
<div class="mec-skin-list-no-events-container" id="mec_skin_events_1210">
Nessun evento trovato! </div>
</div>
I need to hidden the first situation, I don't see the "No events found"
I have found a solution with css.
This work fine, but if I use display instead visibility, the code not work.
Work fine the "display:none" but I can't make it reappear the structure if event is found.
I have tried every value for "display" (block, flex, etc. etc.) nobody works
https://codepen.io/MarcoRM69/pen/VwLrXWb
.mec-skin-list-events-container {
visibility:hidden;
}
.mec-skin-list-events-container > div {
visibility:visible;
}
Any suggestions?
Modern browsers doesn't yet have impletemted has() pseudo-class unfortunately.
You can that easily with a JavaScript or library such as jQuery instead of using CSS. jQuery implement :has() selector.
Description: Selects elements which contain at least one element that matches the specified selector.
The expression $( "div:has(p)" ) matches a <div> if a <p> exists anywhere among its descendants, not just as a direct child.
$('.mec-skin-list-events-container').addClass("d-none");
$('.mec-skin-list-events-container:has(div)').addClass("d-block");
body {
color: green;
font-size: 1.25em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.mec-skin-list-events-container+div:not(:has(div)) {
color: black;
}
.d-none {
display: none;
}
.d-block {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
<div class="mec-skin-list-events-container" id="mec_skin_events_1210">
Nessun evento trovato! </div>
</div>
<hr>
<div class="mec-wrap mec-skin-list-container" id="mec_skin_1210">
<div class="mec-skin-list-events-container" id="mec_skin_events_1210">
<div class="mec-wrap colorskin-custom">
<div class="mec-event-list-minimal">
<article data-style="" class="mec-event-article mec-clear mec-divider-toggle mec-toggle-202003-1210" itemscope="">
ARTICLE HERE
</article>
</div>
</div>
<div class="mec-skin-list-no-events-container" id="mec_skin_events_1210">
Nessun evento trovato! </div>
</div>
</div>
display: none... is not working, while visibility:hidden... is working because display: none removes the affected element from the page while visibility:hidden does not.
Since display:none removes the containing div, you cannot then ask to display the contained div.
From your codepen:
.mec-skin-list-events-container {
visibility:hidden;
/*display:none;*/
}
.mec-skin-list-events-container > div {
visibility:visible;
/*display:block;*/
}
I have a dynamic page that displays multiple pages and has a class that starts with 'paged-' and the number of that page. I want to remove a div with SASS when it's on the page 2 and beyond like this:
.paged-2, .paged-3, .paged-4, .paged-5, .paged-100{
.removeonpagetwoandso{
display: none;
}
}
But I don't want to write from paged-2 to paged-100 since I don't know how many pages it will have in the future.
This doesn't work:
div[class^='paged'], div[class*='paged-']{
.removeonpagetwoandso{
display: none;
}
}
EDIT: Added HTML Structure
Page 1:
<body class="home">
<div class="removeonpagetwoandso">Home Page 1 Only</div>
</body>
Page 2 and so:
<body class="home paged-2">
<div class="removeonpagetwoandso">Home Page 1 Only</div>
</body>
SASS compile
div[class^='paged'],
div[class*='paged-']{
.removeonpagetwoandso{
display: none;
}
}
to
div[class^=paged] .removeonpagetwoandso,
div[class*=paged-] .removeonpagetwoandso {
display: none;
}
In your case
div[class^='paged-'] {
.removeonpagetwoandso {
display: none;
}
}
is enough. It is compiled to
div[class^=paged-] .removeonpagetwoandso {
display: none;
}
which means
child element having removeonpagetwoandso class of elements whose class starts with paged-. I think you have problem with your html structure. You HTML must look like as follows:
<div class="paged-1">
<div class="removeonpagetwoandso">
paged-1
</div>
</div>
<div class="paged-2">
<div class="removeonpagetwoandso">
paged-2
</div>
</div>
<div class="paged-3">
<div class="removeonpagetwoandso">
paged-3
</div>
</div>
<div class="paged-4">
<div class="removeonpagetwoandso">
paged-4
</div>
</div>
<div class="paged-5">
<div class="removeonpagetwoandso">
paged-5
</div>
</div>
<div class="paged-100">
<div class="removeonpagetwoandso">
paged-100
</div>
</div>
pls try this css
<style>
div[class^="paged-"]{
.removeonpagetwoandso{
display: none;
}
}
</style>
:)
I started making a website few days ago and I'm stuck at this step:
http://jsfiddle.net/r6uhczks/
CSS:
/* This section to be trigger of dropdown process */
.parent_style { background: -webkit-linear-gradient(left,rgba(0,0,0,0.5),transparent); width: 325px; height: 21px; }
.parent_style:hover { background: -webkit-linear-gradient(left,rgba(242,182,0,0.7),transparent); }
.parent_style .textP {}
.parent_style:hover .textP {color: red;}
/* This section to be shown by clicking on ↑ and hidden by clicking for second time */
.child_style { background: rgba(0, 0, 0, 0.5); width: 325px; height; auto; }
.child_style:hover { background: rgba(242,182,0,0.7);}
.child_style .textC {color: white;}
.child_style:hover .textC {color: black;}
As you can see I created two styles for dropdown menu,
.parent_style
defines trigger of show/hide content defined by
.child_style
Simplier I want to make a class="parent_style" to be show/hide trigger of shown/hidden class="child_style"
The problem is that I don't know how to create this action by click with CSS/HTML only, I know only by hover.
HTML:
<div class="parent_style">
<p class="textP">Something</p>
</div>
<div class="child_style">
<p class="textC">Content</p>
</div>
<div class="child_style">
<p class="textC">Content2</p>
</div>
<div class="child_style">
<p class="textC">Content3</p>
</div>
<div class="parent_style">
<p class="textP">Something else</p>
</div>
<div class="child_style">
<p class="textC">Content</p>
</div>
<div class="child_style">
<p class="textC">Content2</p>
</div>
<div class="child_style">
<p class="textC">Content3</p>
</div>
<div class="parent_style">
<p class="textP">Something else 2</p>
</div>
<div class="child_style">
<p class="textC">Content</p>
</div>
<div class="child_style">
<p class="textC">Content2</p>
</div>
<div class="child_style">
<p class="textC">Content3</p>
</div>
<br>
EDIT: and also I would like to know how to edit spaces between these elements, best to remove them.
You can add state to CSS and HTML by using checkboxes (persistent) or focus (temporary):
http://jsfiddle.net/rudiedirkx/L40zcjfc/
HTML
<button>hold down here</button>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
<br />
<br />
<button><label for="cb1">click here</label></button>
<input id="cb1" type="checkbox" />
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
CSS
input,
ul {
display: none;
}
button:active + ul,
input:checked + ul {
display: block;
}
The persistence comes from the checkbox's :checked state. You can toggle the checkbox with a <label> so you don't have to know it's there.
The temporariness comes from the :active state of a button. Maybe you can use a normal link, but that might keep focus and/or active.
If you can use custom html and css, i'm sure you can stick a custom script at the bottom of the page if it doesn't allow you to add to the head (keep in mind this script requires the page to be loaded first).
Because the elements are not paired together in individual divs, the javascript is a bit longer but nothing too complicated. This script I created will scan through all the divs on the page and will allow the onclick function to determine what the next three divs are. This means that the script is custom to your layout of navigation so you'll need to change the javascript with a layout change.
Here is a working jsfiddle: http://jsfiddle.net/sLc4svam/
<script>
var divs = document.getElementsByTagName("div");
var parents = document.getElementsByClassName("parent_style");
for (var i=0; i<parents.length; i++) {
parents[i].onclick = function() { toggleChildren(this); };
}
function toggleChildren(elem) {
for (var i=0; i<divs.length;i++) {
if (divs[i] == elem) {
for (var ii=1; ii<=3; ii++) { // The 3 is how many children it will toggle
if (divs[i+ii].style.display == "none") {
divs[i+ii].style.display = "block";
} else {
divs[i+ii].style.display = "none";
}
}
}
}
}
</script>
This is my html:
<div style="width: 45%; float: left; margin-left:5%">
<div class="chartHeaderClass" style="width: 100%;">
<h3>Service Level Per Campaign</h3>
<%-- Start Dropdown Code --%>
<a id="DropdownSeviceLink" href="#">+</a>
<div ID="campaignDiv" runat="server" ><ul>
</ul>
</div>
<script type="text/javascript" src="Scripts/DropdownCheckbox.js"></script>
<%-- End Dropdown Code --%>
</div>
<div id="line-chart" class="chart-holder" style="border:1px solid #D5D5D5; margin-top:2px">
<canvas class="overlay" width="479" height="265"></canvas>
</div>
</div>
<div style="width: 45%; float: right">
<div class="chartHeaderClass" style="width: 100%;">
<h3>Calls Per Campaign</h3>
</div>
<div id="pie-chart" class="chart-holder" style="border:1px solid #D5D5D5; margin-top:2px">
<canvas class="overlay" width="479" height="265"></canvas>
</div>
</div>
notice that it has this div campaignDiv which I fill in c# like this:
if (!IsPostBack) {
List<string> comps = getCompainNames();
string html = "<ul>";
for (int i = 0; i < comps.Count(); i++) {
html = html + CreateLiCheckbox(comps[i]);
}
html = html + "</ul>";
campaignDiv.InnerHtml = html;
}
private string CreateLiCheckbox(string checkBoxText)
{
return string.Format("<li><input type=\"checkbox\">{0}</li>", checkBoxText);
}
This result is this:
I can't click on the checkboxes. In other words, when I click on them nothing happens
I noticed something
I can't select the text inside the red area. It seems that it is not exit because when I tried to select it using the mouse, nothing becomes selected.
could u help please?
css for this red area is
#DropdownSeviceLink {
float:right;
margin-right:10px;
}
a#DropdownServiceLink:visited {
color:inherit;
}
#campaignDiv {
background-color:red;
width:200px;
height:200px;
float:right;
position:relative;
}
Finally the context of my page is
when clicking on that plus sign, I want to show this red area, I can do that on jquery, but I just told you the context maybe that helps
jsfiddle
http://jsfiddle.net/jdhMs/
I had this exact same issue in my application and it turned out that the div I had my checkboxes in was being overlapped by the footer of the modal box. Since the footer of the modal box was white/transparent, this wasn't evident until I added a border around the footer. Only then I was able to see that I could see the checkboxes but couldn't actually select them.
I don't know its work or not but try Z-Index.
Example:
#campaignDiv {
Z-Index:100;
}
li{
Z-Index:101;
}