In my SASS file I have some styling for a slick carousel and a loading spinner.
When the class slick-initialized appears is it possible to set display:none on the spinner.
For example - from:
slick.slick-initialized {
display: block;
}
To something like:
slick.slick-initialized {
display: block;
&.spinner { display none };
}
where I have:
<div class="row">
<div class="spinner"></div>
<slick init-onload=true data="qNew" dots=true arrows=false>
<div class=“tile" ng-repeat="question in questionsNew">
<span ng-bind-html="question.question"></span>
</div>
</slick>
</div>
If .spinner element is placed immediately after to .slick element
You can write SCSS
SCSS
slick.slick-initialized {
display: block;
+ .spinner { display none };
}
HTML
<div class="row">
<slick init-onload=true data="qNew" dots=true arrows=false>
<div class=“tile" ng-repeat="question in questionsNew">
<span ng-bind-html="question.question"></span>
</div>
</slick>
<div class="spinner"></div>
</div>
Place ..spinner element after slick element and use above scss
Related
I have a modal that, when opened, makes everything disappear via display-none except for itself. Or, at least, that's what I want it to do, but it doesn't. I don't know much about child selectors, but I think this should work since .fixed#myNav is a direct child of .fixed#all-body. Does anybody know what could be wrong?
#all-body {
display: block;
}
#myNav {
display: none;
}
.fixed#all-body >:not(.fixed#myNav),
.fixed#all-body >:not(.fixed#myNav) * {
display: none !important;
}
<body id="all-body">
<div class="site-header">
<button onclick="toggleMobileMenu()">Open menu</button>
<!-- Other header content-->
</div>
<div id="myNav">
<button onclick="toggleMobileMenu()">Close menu</button>
<!-- Other menu content-->
</div>
<!-- Other page content-->
</body>
function toggleMobileMenu() {
var element = document.getElementById("myNav");
element.classList.toggle("fixed");
var element = document.getElementById("all-body");
element.classList.toggle("fixed");
}
More context, if anybody's wondering: When the button to open the modal is clicked, the .fixed class is added to both #all-body and #myNav, and I want their respective display values to switch. However, since #myNav is a child of #all-body, this doesn't work. I'm hoping to use the code above to basically say "everything except for #myNav is at display: none."
function toggleMobileMenu() {
var element = document.getElementById("all-body");
element.classList.toggle("fixed");
}
#all-body {
display: block;
}
#myNav {
display: none;
}
.fixed #myNav{
display:block;
}
.fixed#all-body >:not(#myNav) {
display: none !important;
}
<body id="all-body">
<div class="site-header">
<button onclick="toggleMobileMenu()">Open menu</button>
<!-- Other header content-->
</div>
<div id="myNav">
<button onclick="toggleMobileMenu()">Close menu</button>
menu
</div>
<p>page content</p>
</body>
.fixed class is set for body only.
Added display:block for nav when .fixed is parent.
Content should be wrapped in a tag for this to work.
I found it easier to follow what was going on if there was just one class, showMenu, introduced rather than trying to use fixed twice.
What this snippet does is toggle showMenu on the body. It also ensures the 'other content' on the page is wrapped in an element so that it too can respond when the showMenu class is added to body.
Then it does what you were basically doing, set all child elements of body to display none when the showMenu class is set and then it sets the menu to block so it alone shows.
function toggleMobileMenu() {
var element = document.getElementById("all-body");
element.classList.toggle("showMenu");
}
#myNav {
display: none;
}
/* stop showing every element below body (but not body itself) */
.showMenu>:not(#myNav) {
display: none;
}
/* override the above setting for just the menu */
.showMenu #myNav {
display: block;
}
<body id="all-body">
<div class="site-header">
<button onclick="toggleMobileMenu()">Open menu</button>
<!-- Other header content-->
</div>
<div id="myNav">
<button onclick="toggleMobileMenu()">Close menu</button> Other menu content
</div>
<div>
Other page content
</div>
I couldn't see how to do it without making sure the other content is in its own element - if it isn't it will stay visible which I believe you don't want.
I've currently got a few buttons with the .continue class on a webpage, structured with the following code:
<div class="continue" data-section="1">
Continue
<i class="fas fa-arrow-right" id="continueArrow1"></i>
</div>
Each of the continue buttons have a different "data-section" values, and are also placed against different backgrounds on the webpage. I'm wondering if there is a way I am able to target one of these continue button divs that have a certain data-section value, and change the styling of those who match.
Something like:
.continue:data-section=1{
//css that styles button with data-section1
}
.continue:data-section=2{
//css that styles button with data-section2
}
Obviously I could always just give them different IDs, but that leads to a lot of code duplication for the JS and JQuery animations.
Use the attribute selector:
.continue[data-section="1"] {
...
}
Example:
div {
width: 100px;
height: 100px;
background: blue;
display: inline-block;
margin: 5px;
}
.continue[data-section="2"] {
background: red;
}
/*We can combine this selector with other selectors as we normally would:*/
.continue[data-section="2"]:hover {
background: yellow;
}
<div class="continue" data-section="1"></div>
<div class="continue" data-section="2"></div>
<div class="continue" data-section="3"></div>
<div class="continue" data-section="4"></div>
<div class="continue" data-section="5"></div>
Read more on MDN
I can't figure out how to do this, and don't know if it's even possible:
<div class="container">
<div class="text"></div>
View more
<div>
How can I add a class to the div .text if I click on the link .view with only CSS?
I can't use javascript as I'm building a page with its css for AMP
If you can give a fragment to the anchor instead of 'javascript:;' then you can utilize the :target state of anchor.
#view-more {
display: none;
}
#view-more:target {
display: block;
}
<div class="container">
View more
<div class="text" id="view-more">text</div>
<div>
https://jsfiddle.net/karthick6891/g89fdagu/
But the best alternative is to use checkbox so you will have the :checked attribute, which is more robust
The only thing close to it I could think of would be to use the sibling styling
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
.text + a {
border: 2px solid #fc0;
}
So it is the next sibling item that is style and if you could order your structure as follows:
<div class="container">
View more
<div class="text">
</div>
Then maybe you could have
.text {
display: none;
}
a:active + text {
display: block;
}
You could then maybe use table row styling like the following to reorder them
setting the "a" as:
display: table-footer-group
setting the "text" as:
display: table-header-group
All without Javascript, but obviously the minute you haven't got the link active the text box disappears :-D
Soooooooooo you could have a checkbox instead..? when it is active the Adjacent sibling can be styled:
https://css-tricks.com/almanac/selectors/c/checked/
input[type=checkbox] + .text {
display: none;
}
input[type=checkbox]:checked + .text {
display: block;
}
Another possible solution
HTML
<div class="container">
<label for="textView">Button Style Me</label>
<input type="checkbox" name="textView" class="view">
<div class="text">Some Text</div>
</div>
STYLING
input[type=checkbox] + .text {
display: none;
}
input[type=checkbox]:checked + .text {
display: block;
}
CSS cannot do that, CSS is only styling. You can however do it with javascript.
<div class="container">
<div class="text"></div>
View more
<div>
<script>
function myFunction() {
var elements = document.getElementsByClassName("text");
for(var index = 0; index < elements.length; index++) {
var element = elements[index];
element.className += "otherclass";
}
}
</script>
After clicking on either right or left in this carousel, the button remains darker, even after you mouse off the elelemnt. I assume the reason is some sort of visited state, but looking at the CSS, I don't see anything relevant. Is there any way to prevent that effect?
I've written a JSFiddle to demonstrate it, and copied the HTML below.
<div class='container'>
<div class='row'>
<div class='carousel slide' data-interval='false' id='product-image-carousel'>
<!-- Wrapper for slides -->
<center class='carousel-inner'>
<div class='active item'>
<img alt='...' src='http://placehold.it/300x200'>
</div>
<div class='item'>
<img alt='...' src='http://placehold.it/300x200'>
</div>
</center>
<!-- Controls -->
<a class='left carousel-control' data-slide='prev' href='#product-image-carousel' role='button'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' data-slide='next' href='#product-image-carousel' role='button'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
</div>
<!-- Carousel -->
</div>
</div>
Quick workaround: Overwrite bootstrap's css.
.carousel-control:hover,
.carousel-control:focus {
color: #fff;
text-decoration: none;
opacity: .9;
filter: alpha(opacity=90);
}
Remove completely the :focus selector
You can use this workaround:
$(".carousel-control").focus(function(event){
$(this).blur();
});
It works for me.
Simply fix this with css , Decrease the opacity to this .carousel-control:hover, .carousel-control:focus classess , apply the below code your fiddle or your page you can see the difference , Thanks
#product-image-carousel a {
outline: none !important; /* this will remove the outline when we click the anchor tag */
}
.carousel-control:hover, .carousel-control:focus {
opacity: 0.5; /* this will remove the darker color on focus and hover */
}
jsfiddle Update
.carousel-control:focus {
outline: none;
opacity: 0.5;
}
.carousel-control:hover {
opacity: 0.8;
}
I have a word spacing issue which I cannot seem to resolve.
The web page is www.c5d.co.uk/captaintwo.php
The word spacing under the top images look ridiculous. Yet as far as I can see, the CSS is the same.
What am I missing ? If I put a /p tag after Wrigley it works fine but fails validation as there is no opening p tag
Relevant HTML and CSS is as follows:
.captain{word-spacing:185px;display:inline;}
.pres {display:inline; }
.ladycaptain{word-spacing:120px;display:inline; }
<img class="lewis" src="http://www.c5d.co.uk/captain.png" alt="The Captain">
<img class="socialtwo" src="http://www.c5d.co.uk/president.png" alt="President">
<p class="pres">
<br>Captain: John</p> <p class="captain">Lewis President:</p> Bill Wrigley
<img class="lewis" src="http://www.c5d.co.uk/ladycaptain.png" alt="Lady Captain">
<img class="socialtwo" src="http://www.c5d.co.uk/juniorcaptain.png" alt="Junior Captain">
<p class="pres">
<br>Lady Captain: Beryl</p> <p class="ladycaptain">Harrison Junior</p> Captain: Kieran Metcalf
Make the following changes:
.pres {
/* display: inline (remove) */
display: inline-block;
width: 270px;
text-align: center;
}
.captain {
/* display: inline (remove) */
display: inline-block;
width: 270px;
text-align: center;
}
<br> is outdated. Use the self-closing <br /> instead. The names should be wrapped in something (p, span, h3, something). There are 2 styles (one inline (inside the document) and one attached to #header) that are adding around 500px of space there. That's why there is a large gap.
Consider making it easier on yourself.. use 1 class to define each TYPE of object.
#people {
styles for container div
}
.box {
styles for the individual boxes
}
.photo {
styles for <img>
}
.title {
styles for names of people
}
Then just apply the classes to the appropriate item like so
<div id="people">
<div class="box">
<img src="path/image.jpg" class="photo" />
<h3 class="title">Position, name</h3>
</div>
<div class="box">
<img src="path/image.jpg" class="photo" />
<h3 class="title">Position, name</h3>
</div>
etc...
</div>