I'm using CSS/SASS to style a validity message. The message is not nested within what I'm accessing.
For example my JavaScript adds an error class to the input box if it's not valid. I want block visible attributes to change further down the page.
// when no error
input#user_tags_attributes_0_tagname
// then
div.tagname-available { display: block; } // NOT NESTED
// and
div.tagname-unavailable { display: none; } // NOT NESTED
// when error
input#user_tags_attributes_0_tagname.error
// then
div.tagname-available { display: none; } // NOT NESTED
// and
div.tagname-unavailable { display: block; } // NOT NESTED
In theory I should be able to access the elements without having to write JavaScript to perform this. Possibly if CSS has a ROOT document variable like JavaScript's $(document) then I could do.
input#user_tags_attributes_0_tagname {
$(document) > div.tagname-available { display: block; } // NOT NESTED
$(document) > div.tagname-unavailable { display: none; } // NOT NESTED
}
And for the HTML
<table>
<tr>
<td width="200px">
<span class="pull-right vf-labels">Choose your Tag ID</span>
</td>
<td>
<input class="error" data-validate="/users/checktagname" id="user_tags_attributes_0_tagname" name="user[tags_attributes][0][tagname]" type="text">
</td>
</tr>
<tr>
<td>
</td>
<td>
<span class="text-primary" style="font-size: small;">Check Availability</span><br />
<div class="tagname-available">
<span class="glyphicon glyphicon-ok text-success" style="margin-left:-20px;margin-right:4px;"></span>
<span class="text-success" style="font-size: small;">Available</span>
</div>
<div class="tagname-unavailable">
<span class="glyphicon glyphicon-remove text-danger" style="margin-left:-20px;margin-right:4px;"></span>
<span class="text-danger" style="font-size: small;">Not Available</span>
</div>
</td>
</tr>
</table>
Possibly I could use the :root selector for CSS?
You should be able to do this with the sibling selector.
// when no error
input#user_tags_attributes_0_tagname +
.tagname-available { display: block; }
input#user_tags_attributes_0_tagname +
.tagname-unavailable { display: none; }
// when error
input#user_tags_attributes_0_tagname.error +
.tagname-available { display: none; }
input#user_tags_attributes_0_tagname.error +
.tagname-unavailable { display: block; }
The W3 Standard doesn't include reverse reference in CSS. Nor is there a way to access another CSS attribute that is not either a sibling or child. The only way to access CSS attributes in this way is the JavaScript.
Related
<!DOCTYPE html>
<html>
<style>
#media only screen and (max-width: 600px) {
p {
background-color:powderblue;
}
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
padding: 0 4px;
flex: 20%;
}
I'm not sure if this is actually doing anything
.onclick{
width: 20px;
height: 20px;
}
</style>
<body>
I want these two onclicks to be next to each other
<table style="width:100%">
<tr>
<p id="demo" onclick="myFunction1()">Click me.</p>
</tr>
</tr>
<p id="funct" onclick="myFunction2()">Click me.</p>
</tr>
</table>
This part details what the functions do
<script>
function myFunction1() {
if (document.getElementById("demo").innerHTML == "Click me."){
document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
else{
document.getElementById("demo").innerHTML = "Click me.";
}
}
function myFunction2() {
if (document.getElementById("funct").innerHTML == "Click me."){
document.getElementById("funct").innerHTML = "YOU CLICKED ME!";
}
else{
document.getElementById("funct").innerHTML = "Click me.";
}
}
</script>
</body>
</html>
You see your paragraphs in the different rows because you placed them in different rows of your table.
Just change into
<table style="width:100%">
<tr>
<td>
<p id="demo" onclick="myFunction1()">Click me.</p>
</td>
<td>
<p id="funct" onclick="myFunction2()">Click me.</p>
</td>
</tr>
</table>
and they will be placed in the same row.
In HTML tables:
<tr> tag starts a new row
</tr> tag ends current row
<td> tag starts a new box in current row
</td> tag ends current box in current row
Anyway, though it's not the object of the current question, I suggest you finding a different way than tables for organizing your web page. Take a look to <div>s + CSS.
Having a span containing an ng-repeat I was wondering if it is possible to apply a CSS class to all but first elements of it.
For example,
<span ng-repeat="row in element.Parameters track by $index" class="awesome-css-class">
{{element.Parameters[$index]}}
</span>
My CSS class is
.awesome-css-class {
margin-left: 10px;
}
I tried with this method but apparently it doesn't work
.awesome-css-class ul:not(:first-child){
margin-left: 10px;
}
Any suggestions?
try this:
<span ng-repeat="row in element.Parameters track by $index" ng-class="{ 'awesome-css-class': $index != 0 }">
{{element.Parameters[$index]}}
</span>
You added a wrong ul in your syntax:
.awesome-css-class:not(:first-child) {
margin-left: 10px;
}
<div class="awesome-css-class">Element</div>
<div class="awesome-css-class">Element</div>
Apply the class only to the first element:
https://docs.angularjs.org/api/ng/directive/ngClass
<span ng-repeat="row in element.Parameters track by $index" ng-class="[$index===0 ? 'awesome-css-class' : '']">
{{element.Parameters[$index]}}
</span>
Alternatively, use pure CSS:
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afirst-child
.awesome-css-class:first-child
{
background:red;
}
.awesome-css-class:not(:first-child) is what you want.
This will select all element with class .awesome-css-class except those which are first child
.awesome-css-class:not(:first-child) {
color: red;
}
<span class="awesome-css-class">1111</span>
<span class="awesome-css-class">2222</span>
<span class="awesome-css-class">3333</span>
<span class="awesome-css-class">4444</span>
<span class="awesome-css-class">5555</span>
I'm trying to save page length in SharePoint by having a list of links that expose corresponding copy directly below them onto the page.
I have this working great outside of SharePoint thanks to the labels solution in this question and once in SP it works fine in Chrome but the hidden divs don't expand when the links are clicked in IE11.
To get around SP stripping the formatting away I created a .txt file containing the CSS and HTML and uploaded it to the sites style library. Then linked to it in a Content Editor Webpart. you can see what I'm using in the demo.
I'd like a solution without using JQuery as I'm not sure if we can use it within our internal enviroment (I've asked if we can but haven't heard back yet) It seems logical that there must be a simple way to do this within SP itself or SharePoint Designer or CSS without the above issue?
.artifact_top
{padding:10px;border:1px solid lightgrey;margin:10px;overflow:auto;}
.collapse{
cursor: pointer;
display: block;
color: #6490d6;
text-decoration: none;
}
.collapse:hover{
text-decoration: underline;
}
.collapse + input{
display: none; /* hide the checkboxes */
}
.collapse + input + div{
display:none;
}
.collapse + input:checked + div{
display:block;
}
table
{border-collapse:separate;width:100%;border:none;}
td
{padding-left:10px;padding-top:10px;vertical-align:top;}
<div style="float: right; width: 35%; padding-left: 5%;"><div class="ms-rteFontSize-2" style="border-bottom: 1px solid orange; margin: 4px; padding: 4px;"><strong style="font-size: 13.3333px;">Implementation</strong><strong> Artifacts</strong></div>
<br/>
<span class="ms-rteFontSize-1">This topic provides you a list of the artifacts and supporting documentation related to <span>Implementation</span>. Artifacts with an asterisk are required for all projects.</span>
<br/><br/>
<div><label class="collapse" for="_1">Final Implementation Plan*</label>
<input id="_1" type="checkbox"/>
<div class="artifact_top">The Implementation Plan identifies tasks, owners, timeline, and communication for IT components of the Implementation phase.<br/><br/>
<table>
<tbody><tr>
<td width="50%"><strong>Artifact Owner</strong><br/>PM</td>
<td width="50%"><strong>Template</strong><br/>View the Implementation Plan template.</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong><br/>Delivery Lead, PM, Release Manager</td>
<td width="50%"><strong>Sample</strong><br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<div><label class="collapse" for="_2">Operational Readiness Review (ORR)*</label>
<input id="_2" type="checkbox"/>
<div class="artifact_top">The Operational Readiness Review is a checklist to ensure all required documentation listed within the ORR is completed.<br/><br/>
<table>
<tbody><tr>
<td width="50%"><strong>Artifact Owner</strong><br/>App Services</td>
<td width="50%"><strong>Template</strong><br/>View the Operational Readiness Review template.</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong><br/>App Services</td>
<td width="50%"><strong>Sample</strong><br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<div><label class="collapse" for="_3">System/Application Documentation*</label>
<input id="_3" type="checkbox"/>
<div class="artifact_top">The System/Application Documentation consolidates content about the system/application, which backend users can use to determine how that system/application is designed and functions. <br/><br/>
<table>
<tbody><tr>
<td width="50%"><strong>Artifact Owner</strong><br/>TechComm</td>
<td width="50%"><strong>Template</strong><br/>N/A</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong><br/>IT Configuration Management</td>
<td width="50%"><strong>Sample</strong><br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
</div>
To support some advanced functionality in Internet Explorer, SharePoint 2010 uses some ActiveX controls that are only available in IE8. SharePoint forces Internet Explorer 11 into compatibility view to emulate Internet Explorer 8, essentially downgrading your version of IE.
Unfortunately, the input:checked CSS selector was introduced with CSS 3 and was not yet available in Internet Explorer 8.
As an alternative, you can use a click event handler in JavaScript to toggle the visibility of the divs. JavaScript can be entered into the same .txt file as your CSS and HTML (enclosed within <script> tags). If you put the JavaScript below your HTML, it will not execute until the preceding HTML is loaded by the browser, allowing you to query and reference the preceding HTML elements in your script.
<script>
var labels = document.querySelectorAll(".collapse"); // get all labels
for(var i = 0; i < labels.length; i++){
var label = labels[i];
(function(div){
label.onclick = function(){
if(div.style.display == "block"){
div.style.display = "none";
}else{
div.style.display = "block";
}
};
})(label.parentNode.querySelector("div"));
}
</script>
var labels = document.querySelectorAll(".collapse"); // get all labels
for (var i = 0; i < labels.length; i++) {
var label = labels[i];
(function(div) {
label.onclick = function() {
if (div.style.display == "block") {
div.style.display = "none";
} else {
div.style.display = "block";
}
};
})(label.parentNode.querySelector("div"));
}
.collapse {
cursor: pointer;
display: block;
color: #6490d6;
text-decoration: none;
}
.collapse:hover {
text-decoration: underline;
}
.collapse + input {
display: none;
/* hide the checkboxes */
}
.collapse + input + div {
display: none;
}
table {
border-collapse: separate;
width: 100%;
border: none;
}
td {
padding-left: 10px;
padding-top: 10px;
vertical-align: top;
}
.artifact_top {
padding: 10px;
border: 1px solid lightgrey;
margin: 10px;
overflow: auto;
}
<div style="float: right; width: 35%; padding-left: 5%;">
<div class="ms-rteFontSize-2" style="border-bottom: 1px solid orange; margin: 4px; padding: 4px;"><strong style="font-size: 13.3333px;">Implementation</strong><strong> Artifacts</strong>
</div>
<br/>
<span class="ms-rteFontSize-1">This topic provides you a list of the artifacts and supporting documentation related to <span>Implementation</span>. Artifacts with an asterisk are required for all projects.</span>
<br/>
<br/>
<div>
<label class="collapse" for="_1">Final Implementation Plan*</label>
<input id="_1" type="checkbox" />
<div class="artifact_top">The Implementation Plan identifies tasks, owners, timeline, and communication for IT components of the Implementation phase.
<br/>
<br/>
<table>
<tbody>
<tr>
<td width="50%"><strong>Artifact Owner</strong>
<br/>PM
</td>
<td width="50%"><strong>Template</strong>
<br/>View the Implementation Plan template.</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong>
<br/>Delivery Lead, PM, Release Manager</td>
<td width="50%"><strong>Sample</strong>
<br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<div>
<label class="collapse" for="_2">Operational Readiness Review (ORR)*</label>
<input id="_2" type="checkbox" />
<div class="artifact_top">The Operational Readiness Review is a checklist to ensure all required documentation listed within the ORR is completed.
<br/>
<br/>
<table>
<tbody>
<tr>
<td width="50%"><strong>Artifact Owner</strong>
<br/>App Services</td>
<td width="50%"><strong>Template</strong>
<br/>View the Operational Readiness Review template.</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong>
<br/>App Services</td>
<td width="50%"><strong>Sample</strong>
<br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<div>
<label class="collapse" for="_3">System/Application Documentation*</label>
<input id="_3" type="checkbox" />
<div class="artifact_top">The System/Application Documentation consolidates content about the system/application, which backend users can use to determine how that system/application is designed and functions.
<br/>
<br/>
<table>
<tbody>
<tr>
<td width="50%"><strong>Artifact Owner</strong>
<br/>TechComm</td>
<td width="50%"><strong>Template</strong>
<br/>N/A</td>
</tr>
<tr>
<td width="50%"><strong>Approver</strong>
<br/>IT Configuration Management</td>
<td width="50%"><strong>Sample</strong>
<br/>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
</div>
pure css and html, nice work!
have you the possibility to add a meta into the header?
see / try the ie=edge meta:
What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?
we got a lot of issues with our sharepoint / our ie version on our workmachines - css styles are ignored, scripts not working etc.
are the contents always hidden and the click has no effect or are they alwasy visible?
<span class="price">as low as <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span></span>
Working in WooCommerce I want to hide "as low as" which is contained in an outer span yet show the price which is contained within an inner span.
If someone could guide me as to how to do this.
Thanks
You can modify the font-size value to hide all text and then show the inner span text this way:
.price {
font-size: 0;
}
.price span {
font-size: 18px;
}
<span class="price">
as low as
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>
1,335.79
</span>
</span>
You can use visibility: hidden; on your outer <span>, and visibility: visible; on your inner <span>
.price {
visibility: hidden;
}
.woocommerce-Price-amount {
visibility: visible;
}
<span class="price">as low as <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span></span>
Visibility can help you here.
.price {
visibility: hidden;
}
.price > span {
visibility: visible;
}
<span class="price">as low as
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span>
</span>
If removing the space taken by the hidden text is also require then the font-size:0 is an option in some browsers provided you reset the inner text back to the required size.
.price {
visibility:hidden;
font-size:0;
}
.price > span {
visibility:visible;
font-size:1rem;
}
<span class="price">as low as
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>1,335.79</span>
</span>
Do the proper thing, and make your HTML reflect your intentions. If you want to be able to only style "as low as", then wrap that text in it's own <span> and hide that instead. This will be much cleaner than trying to select a text node with CSS and suffering from the CSS effecting the siblings also.
.hidden {
display: none;
}
<span class="price">
<span class="hidden">as low as</span>
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>
1,335.79
</span>
</span>
The best solution is to change the HTML, as in 4castle's answer.
However, if for whatever reason you cannot change the HTML structure, but you can change the text content and the CSS, and also have a way to set the class on an object as needed (I used a hacky little piece of JS to toggle, but it could also be set during generation of a static page), you can use the ::before pseudoelement to display the desired text:
function handleClick(what) {
what.classList.contains('asLowAs') ? what.classList.remove('asLowAs') : what.classList.add('asLowAs');
}
.asLowAs::before {
content: "as low as ";
}
<span class="price asLowAs" onclick="handleClick(this)">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>
1,335.79
</span>
</span>
I need to change the background color of a span using css when an input field in another span is focused.
<p class="some">
<span class="one">Name</span>
<span class="two"> <input type="text" name="fname"> </span>
</p>
Here is the css:
.one
{ background-color: red; }
I tried doing this:
.two:focus + .one
{background-color-black;}
but its not working.
Any help would be appreciated.
Thanks!
you can use :focus-within,
It worked for me.
This is a document https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
.one { float: left; }
input { margin: 0 0 0 5px; }
.some:focus-within .one { background: red; }
<p class="some">
<span class="one">Name</span>
<span class="two"> <input type="text" name="fname"> </span>
</p>
If you do not mind elements order, try this snippet:
.one { float: left; }
input[name="fname"] { margin: 0 0 0 5px; }
input[name="fname"]:focus + .one { background: khaki; }
<p class="some">
<input type="text" name="fname"/>
<span class="one">Name</span>
</p>
Here is a fiddle
Using javascript:
Html:
<p class="some">
<span class="one">Name</span>
<span class="two"> <input type="text" name="fname" onfocus="changeColor()"> </span>
</p>
Javascript:
<script type="text/javascript">
function changeColor() {
document.getElementsByClassName("one")[0].style.backgroundColor="black";
}
</script>
Css:
.one
{ background-color: red; }
Another javascript solution, using classes, and also handles the input loosing focus:
function getFocus() {
var one = document.getElementsByClassName("one")[0];
one.className = one.className + " one-focused";
}
function looseFocus() {
var one = document.getElementsByClassName("one")[0];
one.className = one.className.replace("one-focused", "");
}
.one { background-color: red; }
.one-focused { background-color: black; }
<p class="some">
<span class="one">Name</span>
<span class="two"> <input type="text" name="fname" onfocus="getFocus()" onblur="looseFocus()"> </span>
</p>
This has some fairly obvious flaws, but works in this case. You may want to loop through all classes, or use id's instead of classes. If you are using jQuery then this becomes slightly simpler, but I have left this using standard javascript and only changing the background of the first element in the document.