How to detach the parent dynamic class css in vue.js 2 - javascript

here my issue is i am applying a dynamic class and in which opacity is there in parent class and due to it is also applying to the div's in it and for 1 specific div i dont need this dynamic opacity how can i alter it.
below is my code
css
.cancelled {
opacity: 0.25;
}
Vue
In Methods is mentioned the condition like below
<section
class="checkitem"
v-for="(item, index) in data"
:key="index"
:class="getProgram(index, item)"
>
<div class="class1"> </div>
<div class="class2"> </div>
<div class="class3"> </div>
</section>
here getProgram(index, item) has a opacity and it is adding it to the class1,class2 so here i dont want opacity to be added to class1 & class 2
Methods :--
getProgram(index, item) {
return [{ cancelled: item.cancelled }];
},

We already have an answer in comments. I will just put it as an answer.
All child element’s will always inherit their parent's opacity, and can never be greater. (c) Ferry Kranenburg
Looks like you don't understand how CSS works. If a parent has opacity: 0.25; it means all html inside that will inherit this style. If you don't want class1 and class2 to inherit this opacity then you need to render them outside of the parent. (c) Adam Orlov
So the problem here is that: if you add opacity to parent class, then all items inside will have this opacity's maximum value.
Solution: do not add opacity to parent class, but to children. So for your original question here i dont want opacity to be added to class1 & class 2, you just need to update the CSS:
.cancelled .class3 {
opacity: 0.25;
}
So that only class3 will have the opacity, but not class1 and class2 as you want.
Possible problem: you can have some stylings applied to parent and you want them to be also semi-transparent (background or something other).
Then you need to move all this stuff to new inner element:
<section
class="checkitem"
v-for="(item, index) in data"
:key="index"
:class="getProgram(index, item)"
>
<div class="all-the-stylings-from-parent-go-here"></div>
<div class="class1"> </div>
<div class="class2"> </div>
<div class="class3"> </div>
</section>
And so the CSS will be:
.cancelled .class3, .cancelled .all-the-stylings-from-parent-go-here {
opacity: 0.25;
}

From your question it's not entirely clear what's the criteria for excluding the children from the applied opacity but in CSS you could do something like this:
.cancelled > div:not(.class1):not(.class2){
opacity: 0.25;
}
This will only apply the opacity to the third div in your example. If you want to do this more dynamically you could apply a class to the child elements and then exclude that class in the CSS selector.
Here is a simple example just to give you an idea:
<section
class="checkitem"
v-for="(item, index) in data"
:key="index"
:class="getProgram(index, item)"
>
<div class="class1" :class="isExcluded('yes') ? 'is-excluded' : ''">Div 1</div>
<div class="class2" :class="isExcluded('yes') ? 'is-excluded' : ''">Div 2</div>
<div class="class3" :class="isExcluded('no') ? 'is-excluded' : ''">Div 3</div>
</section>
And:
methods: {
isExcluded(param) {
return param === 'yes';
}
}
CSS:
.cancelled > div:not(.is-excluded) {
opacity: 0.25;
}

Set the sections style to opacity: 1; position:relative;
Create an additional inner div that would not wrap current children and apply all styles from section to it (you can use checkitem class for it). Then change this div opacity as you want.
<section
class="checkitem__wrapper"
v-for="(item, index) in data"
:key="index"
>
<div class="checkitem" :class="getProgram(index, item)"></div>
<div class="class1"> </div>
<div class="class2"> </div>
<div class="class3"> </div>
</section>
You need to make additional tuning if you have padding, margin, and border — move them to the .checkitem__wrapper
.checkitem__wrapper {
position: relative;
}
.checkitem {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
}
.cancelled {
opacity: 0.25;
}

Related

jQuery Card Switching Active Class

The website I'm currently working on is here (map section):
http://vtx.canny-creative.com/
I'm currently facing two problems:
The 'active' class adds to the .location-card on the left. But I also need the corresponding .dot on the right hand side to have 'active' added to it. Which I can do. However...
What I can't do, is get the "first loaded/visible" DIVs, "selected dot", to have 'active' applied. So the active will only apply on click, rather than "on load" and then "on click" as I cycle through them.
$('a.dot').on('click tap', function(e) {
e.preventDefault();
$('.card').css('z-index', '0');
$('.card.active').css('z-index', '2');
$('.card').removeClass('active');
$($(this).attr('href')).addClass('active');
});
.where-we-operate .card-container {
position: relative;
.card {
position: absolute;
top: 0px;
}
.active {
z-index: 4 !important;
animation: foo 0.5s ease 1;
}
}
.where-we-operate .map-container {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="where-we-operate">
<div class="grid-container">
<div class="grid-x grid-padding-x grid-margin-x">
<div class="large-6 cell card-container">
<div id="card1" class="location-tile card">
Card Info Here
</div>
<div id="card2" class="location-tile card">
Card Info Here
</div>
<div id="card3" class="location-tile card">
Card Info Here
</div>
</div>
<div class="large-6 cell map-container">
<img src="http://localhost:8888/vortex/wp-content/uploads/2018/03/uk-map.jpg" />
</div>
</div>
</div>
</section>
I've created something using the jQuery fiddle here:
https://jsfiddle.net/harishkommuri/xc8ebuf4/
I'm officially answering this mainly because I can't stand unanswered questions, then again, it might be helpful to those on an off-day or those just starting out.
You can simply add the active class in your HTML to the elements that should have the class on pageload:
<div id="card1" class="location-tile card active">
Another option is to add the active class with jQuery either before or after your event-handler:
$('#card1').addClass('active');

CSS Opacity transition not affecting child elements

I have an Opacity transition affecting a div element but it does not seem to change the opacity of the child elements inside the div. My understanding is that the property of the containing div should apply to all child elements as well.
Any help would be greatly appreciated. Below is the HTML and CSS:
.tabtext {
opacity: 0;
transition: opacity 1s;
}
<div id="smartITtext" class="tabtext">
<h2 class="tabtext">Some Text</h2>
</div>
Below is the line in Javascript which changes the Opacity:
document.getElementById(smartITtext).style.opacity= 1;
When applying your javascript code it will add the opacity style on the element in your html. So it doesn't overwrite the css style.
Here is an example on how you could let it work.
document.getElementById("btn").addEventListener("click",function(){
var div = document.getElementById("smartITtext");
div.style.opacity = 0.5;
});
.tabtext {
transition: opacity 1s;
}
<div id="smartITtext" class="tabtext">
<h2 class="tabtext">Some Text</h2>
</div>
<input type="button" id="btn" value="change opacity" />
Your child element has a specific opacity set on it. Therefore, it won't inherit any changes you make to the parent and your transition won't run: you've told it to have opacity: 0;, so that's what it will have despite whatever you set the parent element's opacity to.
That's equivalent to setting the color of a child element to be blue and setting its parent's color to red: that child element will still have blue text as you've explicitly told it to.
You will need to change that specific element's opacity to run your transition. Judging by your code, something like:
document.getElementById(text).firstElementChild.style.opacity = 1;
or
document.querySelector('#' + text + ' .tabText').style.opacity = 1;
would do the trick for you.
Firstly your javascript refences an id that does not match your html.
Secondly the id reference ("text") needs to be in quotes.
Here is an alternative way to get the desired result.
document.getElementById("smartITtext").className += " Active";
.tabtext {
opacity: 0;
transition: opacity 1s;
}
.tabtext.Active{
opacity:1;
}
<div id="smartITtext" class="tabtext">
<h2 class="tabtext">Some Text</h2>
</div>
The property of the parent element should apply to the child element. UNLESS the child element has it's own property.
So if we have this code:
#container {
color: blue;
}
.one {
color: firebrick;
}
<div id="container">
<span class="one">hello </span>
<span class="two">World</span>
<span>. <-- hello should be red, while world and this text should be blue</span>
</div>
play in jsbin: https://jsbin.com/focimuk/edit?html,css,output
So for a solution, try setting just opacity on the parent element, and add a transition to it.

Transition on Stretching Div

I have a div with some content in it, and I am showing a button with jQuery. I want to fade it in thus I used:
setTimeout(function() {
jQuery('#button').css('opacity', 1);
}, 100);
First, on html, I have set the button's html to display:none; opacity: 0 I have achieved showing/hiding button, however when it shows, it's making the div stretch instantly. Instead, I want the parent div to expand with transition.
I have created a Fiddle: https://jsfiddle.net/atg5m6ym/7450/ . In this example, when I press the trigger button, I want the button to fade in as well as applying transition on the parent div.
For optimal performance, when using transitions and animations in CSS, you should stick to opacity and transform instead of display: none; and width/height.
Will quote the comment I stated above:
The way you designed this is not ideal, you should not be using
display: none; in transitions or animations. This will cause redrawing
in your browser, and you cannot transition properties with binary
settings, display just switches between states (ex: none/block), not
between values like opacity does.
What you could do is separate your content, sharing the same background color to simulate it is the same container.
Then use transform and the scale() function.
Code Snippet:
jQuery('#trigger').click(function() {
jQuery('.bottom-content').addClass('open');
})
.top-content,
.bottom-content {
background-color: lightblue;
}
.bottom-content {
transform: scaleY(0);
transition: transform 250ms ease-in;
transform-origin: top;
}
.bottom-content.open {
transform: scaleY(1);
}
.bottom-content.open #otherButton {
opacity: 1;
}
#otherButton {
margin-top: 20px;
opacity: 0;
transition: opacity 10s;
transition-delay: 250ms;
/* Separated for clarity purposes, wait for parent transition to end before starting this one*/
}
<script src="https://www.addressfinder.co.nz/assets/v2/widget.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="content">
<section class="top-content">
<button id="trigger">
Trigger
</button>
<br />Lalala La
<br />Lalala La
<br />Lalala La
<br />
</section>
<section class="bottom-content">
<button id="otherButton">
Test Btn
</button>
</section>
</div>
</div>
The accepted answer is overkill. Just use .fadeIn() and forget the opacity and transition settings completely. If you want to have the div expand separate from the button, just apply the effect to the div and then trigger the button effect at the end of the div effect. This snippet does the same thing as the accepted answer without any of the CSS troubles:
$(function(){
jQuery('#otherButton').hide();
jQuery('#two').hide();
});
$('#trigger').click(function() {
$('#two').slideDown(2000, function(){
$('#otherButton').fadeIn();
});
})
#container, #two {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
<div id="content">
<button id="trigger">Trigger</button>
<br>
Lalala La<br>
Lalala La<br>
Lalala La<br>
<div id="two">
<button id="otherButton">Test Btn</button>
</div>
</div>
</div>
You can combine the jquery:
jQuery('#trigger').click(function() {
jQuery('#otherButton').slideDown(300).css('opacity', 1);
})
Note that I used the slideDown() function rather than show(). Using a transition function allows you to set an execution time. show() simply toggles the css display property, but you can not transition the display property.
Updated Fiddle
Instead of adding CSS with jQuery, you can simply add a class instead.
Set this class to whatever properties you want on it, us as:
.is-visible {
opacity: 1;
}
Example Fiddle: https://jsfiddle.net/atg5m6ym/7456/
Now, CSS doesn't like to transition when switching display: none; so instead I have simply set the height: 0; and only applied necessary styling on the .is-visible class.

Add hovering effect for a child class when hover parent

I have a HTML structure like the following:
<div class="menu">
<div>
<span class="mui drop-down" />
</div>
</div>
I want to hover the menu class, and then change the color of drop-down class. And, also hovering the drop-down itself, it should also change its color. Currently I have:
.menu:hover,
.menu:hover ~ mui.drop-down{
color: #000000 !important;
}
but it doesn't do anything. Whats wrong with this?
You have some errors in both html/css:
1)div element with menu class miss closing quotes.
2)css selector mui miss .
According to your OP I think the following code is enough:
.menu:hover .mui.drop-down {
color: red;
}
<div class="menu">menu
<div>
<span class="mui drop-down">dropdown</span>
</div>
</div>
The tilde (~) is the general sibling combinator.
Since there is a hierarchy, try the child combinator (>) or just a descendant combinator ():
.menu:hover mui.drop-down,
.menu:hover > div > mui.drop-down
{ color: #000000 !important; }
You can add below css to hover effect:
.parent:hover .child, .parent.hover .child { display: block; }

Change SPAN class with any animation

I have two dimensional array in my controller which I display using this code:
<div class="line"
ng-repeat="line in grid.cells track by $index">
<span class="cell"
ng-class="{c0:(cell==0),c2:(cell==2),c4:(cell==4),c8:(cell==8),c16:(cell==16),c32:(cell==32),c64:(cell==64),c128:(cell==128),c256:(cell==256),c512:(cell==512)}"
ng-repeat="cell in line track by $index">
{{ display_value(cell); }}
</span>
</div>
Here I am changing class of SPAN using ng-class.
Here is a part of CSS:
span.c0 {
background-color: #ccc0b3;
color: #776e65;
}
span.c2 {
background-color: #eee4da;
color: #776e65;
}
User press the button and change the array in the Controller and View is updated automatically: cell value change -> span class change -> color of SPAN change. But this changes are very quickly
How can I use some animation to slow the change in this case? For example, something like this: http://gabrielecirulli.github.io/2048/ . Or some fade-in, fade-out effects. Do I need to use angular's directives or it is the matter of CSS ?
If i understand you right, you will just need css transitions for this.
Here is some example css:
.item
{
transition-property: background-color;
transition-duration: 1s;
}
.item.c1
{
background-color: green;
}
.item.c2
{
background-color: blue;
}
Such HTML:
<div class="row">
<div class="item c1"></div>
<div class="item c1"></div>
<div class="item c1"></div>
<div class="item c1"></div>
</div>
Here is just some sample js to toggle the class change
var elements = document.querySelectorAll(".row .item");
setInterval(function(){
for(var a=0; a<elements.length; a++){
elements[a].classList.toggle("c1");
elements[a].classList.toggle("c2");
}
}, 2500);
And here is a jsFiddle Demo: http://jsfiddle.net/ychk4g7h/

Categories

Resources