Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I want to create some sass variables to represent different z-index values, and would like to use a pre-existing naming convention if one exists. I'm looking for something like how Swing defines root, layered, content, and glass panes, or a pointer to some theory that I can use as a naming basis.
After thinking about this a bit at work, here's what we came up with (wrapped in a Sass map):
$z-index: (
'satellite' : 5000,
'skyscraper' : 1000,
'tower-block' : 500,
'house' : 200,
'bungalow-chimney' : 110,
'bungalow' : 100,
'shed' : 50,
'postbox' : 10,
'curb' : 1,
'pavement' : 0,
'pothole' : -10,
'ditch' : -20,
'sewer' : -100,
'mine' : -300,
'seabed' : -1000
);
Which is then referenced like so:
.foo {
z-index: map-get($z-index, 'pothole');
}
http://en.wikipedia.org/wiki/Structure_of_the_Earth ?
Exosphere
Thermosphere
Mesosphere
Stratosphere
Troposphere
Crust
UpperMantle
Mantle
OuterCore
InnerCore
geeky enough for you?
We need to maintain the stacking order of the project covers, filter bar, location search modal, custom drop-down above the modal, and website navigation, in that order, from bottom to top. We can set up a Sass list, like so:
$elements: project-covers, sorting-bar, modals, navigation;
This list represents the order in which we want our elements to appear, from lowest to highest, with each index, or position, in the array representing the z-index of that element. We can use the Sass index function to assign a z-index value to each element.
For example:
.project-cover {
z-index: index($elements, project-covers);
}
This would print out:
.project-cover {
z-index: 1;
}
This is because project-cover is the first element in the list, at index 1, and the lowest element in our z-index stacking order. Let’s write the Sass for the rest of the items in our list:
.sorting-bar {
z-index: index($elements, sorting-bar);
}
.modal {
z-index: index($elements, modals);
}
.navigation {
z-index: index($elements, navigation);
}
Now, our compiled CSS would look like this:
.project-cover {
z-index: 1;
}
.sorting-bar {
z-index: 2;
}
.modal {
z-index: 3;
}
.navigation {
z-index: 4;
}
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
What I'm trying to do is conditionally display a div based on user input. I'd like to parse through the input and if it contains somewhere within it (The input could be a whole paragraph) one of several keywords that are in an array, then it will return true and display the div. This is what I have so far:
jQuery(function($) {
$(".conditional-content-container").hide());
var user_input = $(":input[name=input_4]");
user_input.change(function() {
if (user_input.val().indexOf(["hello", "world", "foo"]) !== -1) {
$(".conditional-content-container").show();
} else {
$(".conditional-content-container").hide();
}
});
});
<div class="conditional-content-container">
Content to be displayed if user input contains the words "hello" or "world" or "foo" somewhere within it
</div>
You need to loop over the array and check if they exist in the string
var words = ['apple', 'foo', 'bar']
function hasAnyWords(str) {
return words.some(word => str.indexOf(word) > -1);
// return words.some(function(word){
// return str.indexOf(word) > -1;
//});
}
function hasAllWords(str) {
return words.every(word => str.indexOf(word) > -1);
// return words.every(function(word){
// return str.indexOf(word) > -1;
//});
}
console.log(hasAnyWords('I like an apple'));
console.log(hasAnyWords('I like a pear'));
console.log(hasAllWords('I like an apple'));
console.log(hasAllWords('I like a bar foo apple'));
This question already has answers here:
Less mixin with optional parameters
(2 answers)
Closed 5 years ago.
I can't understand some syntax usage. I have a simple mixin with default params:
#red: #ff4136;
#blue: #00aef9;
#green: #01ff70;
#yellow: #ffdc00;
.paint(#color: #yellow, #height:100px, #width:200px) {
background-color: #color;
height: #height;
width: #width;
}
.monster-happy {
.paint(#color, 100px, 10px);
}
I want to change only first and last default param and I dont want to change the middle param, something like:
.monster-happy {
.paint(#red, #height, 10px);
}
But it doesn't work. How should I make it correct and what better way to do this?
I believe that you can ignore the value you want to use the default for, and then explicitly define any parameters further down the the arguments.
.monster-happy {
.paint(#red, #width: 10px);
}
This is because your mixin will check the values that are passed in, in order that you pass them. It always expects color first, which is why we can just use #red, but due to leaving out the height, we have to explicitly state that the next value is for the #width property.
I am trying to create 50 background images for a set of windows using less.
These image paths are exactly the same format, but the number just increments by 1 for each window.
Currently I have the following code:
window-1{
background-image: url('/content/images/background-1-window.png')
}
window-2{
background-image: url('/content/images/background-2-window.png')
}
..
window-50{
background-image: url('/content/images/background-50-window.png')
}
What I want to achieve is to effectively have variables replacing the numbers using less, is it possible to do this using variables and or mixins?
Something like:
window-#window-number{
Background-image: url('/content/images/background-#window-number-window.png')
}
Is it at all possible to do something like this?
Yes, it is possible, see this answer https://stackoverflow.com/a/15982103/1596547 and https://github.com/twbs/bootstrap/issues/10990 for some example code:
In your case:
.setbackgroundimage(#index) when (#index > 0)
{
window-#{index}
{
background-image: url('/content/images/background-#{index}-window.png');
}
.setbackgroundimage(#index - 1);
}
.setbackgroundimage(50);
I'm looking for a (CSS-)way to apply the hover state to a part of my HTML text when another part is hovered over, the two parts sharing the same CSS class.
I have a bunch of text in HTML, divided into words. Each word is linked to a CSS class; two different words can be linked to the same class.
By example, if I take three words and two classes (classA, classB),
word1, word3 -> classA
word2 -> classB
I will write the following HTML code :
<span class=classA>word1</span>
<span class=classB>word2</span>
<span class=classA>word3</span>
My problem : I want to change the appearance of a group of words sharing the same class on mouse over.
I tried :
.classA {
color: red;
}
.classA:hover {
color: blue;
}
... but when the mouse goes over "word1", "word1" is highlighted, but not "word3" which shares the same class ("classA").
Any help would be appreciated !
The short answer is NO, you cannot do that with CSS only except if you go for the solutions I've shared with you below.
Use the adjacent selector to apply the :hover effect at the same time
.classA:hover + .classB + .classA {
color: blue;
}
Demo
But unfortunately this will only work if you :hover the first group element, as you cannot go back with CSS, the second way to do is use a wrapper element but again, this will be limited if you are having only 2 combination of classes where you want to apply styles to a single type of class.
.wrapper_class:hover .classA {
color: blue;
}
Demo 2
.classA:hover {
color: blue;
}
This code applies only to elements that have class=classA AND are under the mouse..
I think it would be simpler to use Javascript:
var span = document.getElementsByClassName('classA');
var i = 0;
while(i < span.length){
span[i].onmouseover = function change(){
var i = 0;
while(i < span.length){
span[i].style.color = 'blue';
i++;
}
}
span[i].onmouseout = function change(){
var i = 0;
while(i < span.length){
span[i].style.color = 'red';
i++;
}
}
i++;
}
http://jsfiddle.net/fa7d0/Bt8eN/1/
Example code:
<p class="test">string</p>
I want to change the color on the last letter, in this case "g", but I need solution with css, I don't need a javascript solution.
I display the string letter by letter and i cant use static solution.
Everyone says it can't be done. I'm here to prove otherwise.
Yes, it can be done.
Okay, so it's a horrible hack, but it can be done.
We need to use two CSS features:
Firstly, CSS provides the ability to change the direction of the flow of the text. This is typically used for scripts like Arabic or Hebrew, but it actually works for any text. If we use it for English text, the letters are displayed in reverse order to how the appear in the markup. So to get the text to show as the word "String" on a reversed element, we would have to have markup that reads "gnirtS".
Secondly, CSS has the ::first-letter pseudo-element selector, which selects the first letter in the text. (other answers already established that this is available, but there's no equivalent ::last-letter selector)
Now, if we combine the ::first-letter with the reversed text, we can select the first letter of "gnirtS", but it'll look like we're selecting the last letter of "String".
So our CSS looks like this:
div {
unicode-bidi:bidi-override;
direction:rtl;
}
div::first-letter {
color: blue;
}
and HTML:
<div>gnirtS</div>
Yes, this does work -- you can see the working fiddle here: http://jsfiddle.net/gFcA9/
But as I say, it is a bit hacky. And who wants to spend their time writing everything backwards? Not really a practical solution, but it does answer the question.
Use ::after pseudo-element combined with attr() function:
p::after {
content: attr(data-end) ;
color: red ;
}
<p data-end="g">Strin</p>
p::after {
content: attr(data-end) ;
color: red ;
}
<p data-end="g">Strin</p>
Another solution is to use ::after
.test::after{
content: "g";
color: yellow;
}
<p class="test">strin</p>
This solution allows to change the color of all characters not only letters like the answer from Spudley that uses ::first-letter. See ::first-letter specification for more information. ::first-letter applies only on letters it ignores punctuation symbols.
Moreover if you want to color more than the last character you can :
.test::after{
content: "ing";
color: yellow;
}
<p class="test">str</p>
For more information on ::after check this link.
Without using javascript, your only option is:
<p class="test">strin<span class="other-color">g</span></p>
Edit for your fiddle link:
I'm not really sure why you said you didn't need a javascript solution, since you have quite a bit of it already. Regardless, in this example, you need to make only a couple small changes. Change line 10 from
elem.text(elem.text() + contentArray[current++]);
to
if ( current == contentArray.length-1 ) {
elem.html(elem.html() + "<span style='color:red'>"+contentArray[current++]+"</span>");
} else {
elem.html(elem.html() + contentArray[current++]);
}
Note that it's important to use .html() instead of .text() now, since there's actually HTML markup being inserted.
Working fiddle: http://jsfiddle.net/QTUsb/2/
It could be achieved using only CSS and an ::after pseudo-element without any changes in HTML:
.test {
font-size: 16pt;
position: relative;
}
.test::after {
bottom: 0;
color: red;
content: 'g';
position: absolute;
transform: translate(-100%, 0);
}
<p class="test">string</p>
In what way do you "display the string letter by letter"? If you're looping through the characters in a string (variable) you can certainly tell when you're at the last letter and wrap it in a whether doing so on the server side or client side.
Looking at the fiddles attached to another of your questions ...
If this is what you're talking about, you might have to set the .innerHTML of the element instead of the element.text()
From the fiddle at http://jsfiddle.net/SLKEn/ you would change it to something like this
if(current < contentArray.length) {
elem.html(
elem.html() +
(current == contentArray.length-1 ?
'<span class="lastchar">' + contentArray[current++] + '</span>' :
contentArray[current++])
);
}
along with CSS span.lastchar { color: red; }
Update: working fiddle based on your other question.
$(document).ready(function() {
var str=$("span").text();
strArr=str.split("");
for(var key=0;key<=strArr.length-1;key++) {
if(key==strArr.length-1) {
var newEle="<span id='lastElement'>"+strArr[key]+"</div>";
strArr[key]=newEle;
}
}
var newtext=strArr.join("");
$("span").html(newtext);
});
span#lastElement {
color: red;
}
i dont have the ability to comment on an answer thread but i wanted to point out an error in an answer provided by Marc_Alx that otherwise works wonderfully. that solution worked for me only after adding a semi-colon behind the content property... so it looks like content:"ing";
.test::after{
content:"ing";
color:yellow;
}
<p class="test">str</p>