I'm trying to create a HTML widget:
HTML:
<div>
<h1 class="title" data-bind="title">Title</h1>
<div>
<h1 id = "dc1" class="dc">DC1</h1>
</div>
<div>
<h1 id = "dc2" class="dc">DC2</h1>
</div>
<p class="updated-at" data-bind="updatedAtMessage"></p>
</div>
And I need to be able to set the background color of the id="dc1" and id="dc2" elements dynamically in CoffeeScript. I plan to do this by adding a class with a background color setting:
SCSS:
&.up {
background-color: green;
}
&.down {
background-color: red;
}
.dc {
background-color: orange;
font-size: 30px;
float: left;
width: 50%;
}
So far I have managed to set the whole widget background but not the child elements mentioned above:
I have been using:
CoffeeScript:
$(#node).removeClass('up down')
$('#dc1').removeClass('up down')
$('#dc2').removeClass('up down')
$(#node).addClass('down')
$('#dc1').addClass('down')
$('#dc2').addClass('up')
Note ultimately I will add the classes depending on some data rather than hard coding them to 'up' or 'down' in the coffeescript.
But nothing happends.. Am I getting selecting the id="dc#" elements correctly?
If it helps with context I'm doing this for Dashing
Your SCSS doesn't make sense so I'd guess that your missing an error from the SCSS-to-CSS conversion. An & in SCSS is a reference to the parent selector:
& will be replaced with the parent selector as it appears in the CSS
so have &.up at the top level makes no sense and should generate an error. If we fix the SCSS so that .up and .down apply only to .dc:
.dc {
/* ... */
&.up {
background-color: green;
}
&.down {
background-color: red;
}
}
then everything seems to work just fine.
Demo: http://jsfiddle.net/ambiguous/9y9uywm9/
You can use Sassmeister (and other similar online tools) to see what SCSS thinks of your original SCSS.
Related
Here I'm trying to change the CSS variable's value (visibility) when the button is clicked on (using :focus) to show/hide the images, without using Javascript.
CSS
img {
width: 200px; height: 200px; margin-left: 40px; margin-top: 30px;
}
:root {
--c1-vsb: none; --c2-vsb: none;
}
a.c1-imgs {
visibility: var(--c1-vsb);
}
a.c2-imgs {
visibility: var(--c2-vsb);
}
#C1:focus {
background-color: red;
--c1-vsb: hidden;
}
#C2:focus {
background-color: red;
--c2-vsb: hidden;
}
HTML
<html>
</head>
<body>
<div id="left-panel">
<button class="lp-btn" id="C1">SEAL 1</button><br>
<button class="lp-btn" id="C2">SEAL 2</button><br>
</div>
<div id="right-panel">
<a class="c1-imgs"><img src="https://files.worldwildlife.org/wwfcmsprod/images/HERO_harbor_seal_on_ice/hero_full/87it51b9jx_Harbor_Seal_on_Ice_close_0357_6_11_07.jpg"></a>
<a class="c2-imgs"><img src="https://www-waddensea-worldheritage-org.cdn.gofasterstripes.download/sites/default/files/styles/inline_image_full_width/public/20-11-09_habour%20seals%20report_TTF_5200.JPG?itok=YZs9c_dH"></a>
</div>
</body>
</html>
But for some reasons, when I clicked on the button to set visibility to hidden, the images do not get hidden away.
Previously, I tried hiding the images with css pseudo classes and display:none, z-order... but got stuck. In the end, I thought this should have been the simple way out.
Could you suggest a solution to this problem I'm having? I'm not too sure if this is the correct approach.
Thank you!
When you declare #C1:focus { --c1-vsb: hidden; }, the new value of --c1-vsb only applies to #C1, not the entire HTML document.
As MDN states: "[...] the selector given to the ruleset defines the scope that the custom property can be used in".
With css, you can only Show/hide with mouse handle. You don't change 2 state (Show/Hide) when click into button.
I noticed a strange behavior and cannot understand why this is happening, since they do seem to be valid CSS class names (they pass when tested against the regex).
using any other words in that pattern works, like happy-world or happy_world.
I have created a Codepen here to show what I am experiencing. check here https://codepen.io/akhatri7/pen/LYxMgOz
div {
min-height: 50px;
width: 50px;
margin-bottom: 10px;
}
.sponsorlogo {
background-color: violet;
}
.sponsor-logo {
background-color: indigo;
}
.sponsor_logo {
background-color: blue;
}
.sponsor__logo {
background-color: green;
}
.happy-world {
background-color: yellow;
}
.happy_world {
background-color: red;
}
<div class="sponsorlogo"></div>
<div class="sponsor-logo"></div>
<div class="sponsor_logo"></div>
<div class="sponsor__logo"></div>
<div class="happy-world"></div>
<div class="happy_world"></div>
Using class names sponsor-logo and sponsor__logo works fine.
Can someone please explain why this could be happening?
The divs with classes sponsor-logo and sponsor_logo were not being displayed for me as well. But upon further inspection, I found that the display property of these two divs was set to none by an injected stylesheet.
Injected stylesheets are the ones that Chrome extensions can inject into pages. And the culprit was Adblock Plus, disable the extension and you will see the results are as expected.
I'm working on a CSS file and I'd like it to interact with anothet CSS file.
How? Let's say I have A.css and B.css. In A.css I want to do the "overflow: hidden" referred to B.css and all the elements that it controls.
Is anything like that impossible?
Like:
#import "field.css"
.sky .field {
overflow:hidden;
}
So basically this what I actually have:
.sky {
width: 90%;
height: 100%;
background: blue;
opacity: 0.7;
position: absolute;
z-index: 1;
}
.field {
width: 100%;
height: 20px;
background: green;
position: fixed;
top: 90%;
z-index: 2;
}
.field > p {
width: 100%;
height: 40px;
background: black;
}
Now I want that "p", which is a sub-tag of .field to not show outside of the bounds of .sky.
How do I do that?
No need to import one CSS file into the other simply link to both CSS files in your HTML. For example if you had the following two files
File A:
.sky .field {
overflow:hidden;
}
File B:
.sky {
color: black;
}
Sky would inherit both properties of overflow hidden and color black. If the rules contradict each other for example file A says sky color is blue and file B says black then the CSS rule sheet which is linked last will take presidence.
Edit: Generally it isn't good practise to do this for organization purpose. If Sky is a single objection consider putting all CSS references to it in a single file.
Load both the CSS files into your page. You can actually have multiple files which define style rules on same element. So lets say you have two file
File 1
.sky{
background-color: Red;
}
And File 2
.sky.field {
overflow:hidden;
}
And lets say the page has a element with class div and field.
<div class='sky field'></div>
Now this will have both the combined CSS rules.
Also make sure you get yourself familiar with CSS Priorities, If 2 files have the different CSS rule on the same element then what happens??
Example
//File 1
.sky{
background-color: Red;
}
//File 2
.sky.field {
background-color: Blue;
}
Now the file that is placed last in the HTML DOM will have more priority over other rules. Note that its NOT the last file loaded but the last file in the DOM hirarchythat gets the priority.
I would like to change the background image of a div by hover a button. This is my key:
.content-portfolio {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
#event-button a:hover{
}
I dont really know how to do it, I hope you help me!
Best regards!
It's pretty hard to do just with css. You probably could use some javascript to do that. But, I found a way to do what you want if your div was an immediate sibling of your button (with no other elements between the two).
The code would look like this:
HTML
<input type="button" id="btn" value="Click me !" />
<div id="testDiv">
<p>Some content</p>
</div>
CSS
#btn:hover + #testDiv {
background-color: red;
}
#testDiv {
border-style: solid;
width: 200px;
height: 200px;
}
The operator "+" or "~" will apply the css to the next sibling element.
Here's a JS Fiddle that show you the tricks.
If you just remove the "+" it will apply the css to descendant/child of the left element. For more information you can check out this page.
I think that you want to change .content-portfolio's background when you hover on event-button right? You get it right by giving the button an id and not a class, but you can't affect other elements with css selectors if they're not related in some way. Alternatively, it's easier to affect other elements if they have ids instead of classes, specially if they don't have any kind of hierarchy. You'll need to use a javascript solution for this (fiddle here):
HTML:
<a href="javascript:img()">
<div id="EventButton">Click me to change the bg</div>
</a>
<div id="ContentPortfolio">I'm the content</div>
CSS:
#ContentPortfolio {
width: 200px;
height: 100px;
background: red;
}
#EventButton {
width: 100px;
height: 50px;
border: 1px solid grey;
}
Javascript:
function img() {
if (ContentPortfolio.style.backgroundImage == 'url(http://goo.gl/PMqslv)') {
ContentPortfolio.style.backgroundImage = 'url(http://goo.gl/AJm0rS)';
} else {
ContentPortfolio.style.backgroundImage = 'url(http://goo.gl/PMqslv)';
}
return false;
}
In this approach I changed your id names so I can refer to them directly, instead of using the document.getElementById, but if your name contains dashes - or if this doesn't work on your browser, you should use the before mentioned function.
try this
.content-portfolio{width:400px; height:400px; background:url(http://somdow.com/images/sitePortThumbs/saia-sushi-ft-lauderdale-sushi-bar.jpg);}
.content-portfolio:hover{width:400px; height:400px; background:url(http://somdow.com/images/sitePortThumbs/2882films-video-production.png);}
PS: here is the fiddle[ http://jsfiddle.net/somdow/d2Yf9/ ]
,the images are from my own website, obviously just change the url to your own.
Edit: Essentially, from the code i added, you dont need any of it, all you need to do is the same thing you did, just change the url on the hover and you are set to go.
Perhaps you want to change background image of .content-portfolio this is the way to do it:
.content-portfolio:hover {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
see this: http://jsfiddle.net/y8tRd/
You need jQuery.
Create two classes and add two jquery methods to your button. One css class with the hover image and another class without.
jQuery
$(document).ready(function() {
$("#your-button").on("mouseover", function(){
$("#content-portfolio").toggleClass("back2");
}).on("mouseout", function(){
$("#content-portfolio").toggleClass("back2");
});
});
CSS
.back1 {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
.back2 {
background-image: url(../files/portfolio/event2.jpg) no-repeat;
}
You can do something like this (You will need jquery):
html
<body>
<button id="button" >Change Background</button>
<div class="content-portfolio">your content</div>
</body>
css
.content-portfolio{
background-image: url('path/to/your/image.jpg') no-repeat;
}
js
$(document).on('mouseenter','#button',function(){
$('.content-portfolio').css('background','path/to/your/image.jpg');
});
$(document).on('mouseout','#button',function(){
$('.content-portfolio').css('background','path/to/your/otherimage.jpg');
});
Also you can create two classes with different backgrounds, and you can add or remove class through jquery
I just had the idea of organizing my work as follows:
Create very basic CSS classes, for example this :
.backgroundRed {
background-color:red;
}
.backgroundGreen {
background-color:green;
}
.fixed300 {
width:300px;
}
.percent100 {
width: 100%;
}
.centered {
margin: auto;
}
.centeredTextHorizontally {
text-align:center;
}
.colorWhite {
color:white;
}
and then use 2-3-4 of them simultaneously, to create what I want, for example:
<div class = "backgroundGreen fixed300 centered">
<div class="centeredTextHorizontally">300px wide green stripe with centered text</div>
<div class="centeredTextHorizontally colorWhite">Centered white text</div>
</div>
</div>
Im sure you get the idea.
Now this has the problem that if in the future we want to change the web site, we need to edit the HTML of all those DIVs, which breaks the very pupropse of using CSS in the first place.
So I would like to be able to define CSS classes as follows
.navbar {
.colorRed;
.backgroundColorGreen;
}
etc etc. So that if the website colors need to be changed, for example, I only change the .navbar and not the DIVs in the HTML.
Is it possible to perform something like the above and how ?
Its not possible with pure css. you will need to look into a CSS pre-processor. Two popular ones are called Sass and Less. These links should give you more information on them:
Sass
Less
This will help you get started with your specific problem:
including another class in Sass
.navbar {
.colorRed;
.backgroundColorGreen;
}
This is not css rule. You have to use class like below -
.navbar.colorRed.backgroundColorGreen {
/* Your css styles */
}
Notice, there is no space between class name and dot . next to it.