Change SPAN class with any animation - javascript

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/

Related

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

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;
}

a robust way to toggle item display in Jquery

I want to toggle whether to display an item I should do the following:
$(item).css("display", "none")
$(item).css("display", "block")
But this method is not robust enough, given that the item might be "display: flex" or "display: table".
I think in react, I can just delete that element and re-render it when I need to, but is there any simple way to do that using jQuery besides directly modify the html to delete that element?
Thanks.
you should use toggleClass() in case you are working with flex then it would be a better approach to keep the flex properties in a separate class and add/remove or in easy words toggle the flex class if you want to hide or show that container with defaults set to display:none in a separate class, in this way either the container is flex or table it works either ways see the example below
$(".show").on('click', function() {
if ($(this).siblings('.my-item').css('display') == 'flex') {
$(this).siblings('.my-item').toggleClass('myflex');
} else {
$(this).siblings('.my-item').toggleClass('myTable');
}
})
.my-item {
display: none;
}
.myflex {
display: flex;
background-color: #f8f8f8;
}
.myTable {
display: block;
background-color: #d8d8d8;
}
.container {
margin-top: 10px;
border: 5px dashed #c8c8c8;
}
.show {
padding: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">1
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">2
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myTable">TABLE DISPLAY
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">3
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">4
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">5
</div>
</div>
You could also add a custom css class and switch them using below. This would also give a bit more control over styling.
$(item).addClass('display-none');
$(item).removeClass('display-none');
$(item).removeClass('display-none display-flex'); // For removing multiple classes
and for example the css properties would be like
.display-none{
display: none !important;
}
Why not just use jQuery's show/hide functions?
$(item).hide();
$(item).show();
hide function is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. (from jQuery documentation)
$('#btnToggle').click(function(){
if($('#item').is(':visible'))
{
$('#item').hide();
}
else
{
$('#item').show();
}
$('#log').html("Current display state: " + $('#item').css('display'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnToggle">toggle</button>
<div id="item" style="display: flex;">
flex div
</div>
<div id="log">
</div>
You can do a
$(item).css("display", "none")
and assign the flex or table value of the display property to any custom attribute, e.g. $(item).attr("disp_prop","flex") and on returning back to display you can do a simple.
$(item).css("display", $(item).attr("disp_prop"))

How to get hand cursor when using ng-repeat?

Hi i have a div like this
<div class="row" ng-repeat="item in array" ></div>
I want mouse pointer to change into hand type curson on hover of this.
Is there any simple way to do that?
just with css:
<div class="row" style="cursor:pointer;" ng-repeat="item in array" ></div>
You could also add this to you'r .row css class
.row {
cursor: pointer;
...
}
Try This..
<div class="row" ng-repeat="item in array" >
<a style="cursor:pointer">{{item.yourData}}</a>
</div>
In your CSS file, add:
.row {
cursor: pointer;
}

How to show and hide a div onMouseOver on top of another div

So right now I have 4 divs under the class "menubut"
I am trying to make a small overlay that shows when you hover over the menubut classes. I am also trying to get another div named "red" about a tenth of the size of the menubut to show when I hover over the class on the far left of the div.
[ Menubut ] //When Hovered over it should look like this
[(red) Menubut ] //< at the same time changing the background color of Menubut.
I'm fairly new to Javascript so I'm not to sure how I would get started on this.
<div class = "menubut">
<div class = "red"></div>
</div>
<div class = "menubut">
<div class = "red"></div>
</div>
<div class = "menubut">
<div class = "red"></div>
</div>
<div class = "menubut">
<div class = "red"></div>
</div>
And my css for each looks like this:
.menubut
{
width: 90px;
padding-left: 23px;
padding-top: 5px;
}
.menubut:hover
{
background-color: rgba(0, 0, 255, 0.2);
}
.red
{
position: absolute;
background-color: red;
width: 15px; height: 15px;
}
If I can provide anymore info please let me know. Thank you
This is simple example, it can be done much more efficient with jQuery (you should learn about this tool)
In this example if you hover above the little part, it will change color to blue, if you hover on the "regular" menubut, it will hover by the style you selected.
Html:
<div class="menubut" id="menu1">
<div class="red" onmouseover="doSomething('menu1')" onmouseout="clearBackground('menu1')"></div>
</div>
<div class="menubut" id="menu2">
<div class="red" onmouseover="doSomething('menu2')" onmouseout="clearBackground('menu2')"></div>
</div>
<div class="menubut" id="menu3">
<div class="red" onmouseover="doSomething('menu3')" onmouseout="clearBackground('menu3')"></div>
</div>
<div class="menubut" id="menu4">
<div class="red" onmouseover="doSomething('menu4')" onmouseout="clearBackground('menu4')"></div>
</div>
JS:
function doSomething(id) {
var ele = document.getElementById(id);
ele.style.backgroundColor = 'blue';
}
function clearBackground(id) {
var ele = document.getElementById(id);
ele.style.backgroundColor = '';
}
Working fiddle

Move div and set the color name on top

Can you please tell me how to rotate div and set the color of div .By default red is in top so it print red.But when user rotate clockwise or anticlock wise it print the name of color on top . I think I have to mouse over and mouse out event can you please help me making a demo . http://jsfiddle.net/cdZ73/1/
<label style="display:inline-block">color Name:</label>
<label>red</label>
<div id="full">
<div class="red"></div>
<div class="pink"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
how to get touch start event so that they change position ? change label text ?
I'm not sure I understand what you mean by "rotate". Assuming that what you want is changing the color of the boxes, I made some changes in your HTML and CSS, and then made the classes of the boxes change when clicked.
HTML:
<label style="display:inline-block">color Name:</label>
<label class="colorName">red</label>
<div id="full">
<div id="top" class="red"></div>
<div id="left" class="pink"></div>
<div id="bottom" class="blue"></div>
<div id="right" class="green"></div>
</div>
CSS:
#full > div {
width:100px;
height:100px;
position: absolute;
}
#top { top:10px; left:200px; }
#left { top:120px; left:20px; }
#bottom { top:220px; left:200px; }
#right { top:120px; left:350px; }
.red { background:red; }
.pink { background:pink; }
.blue { background:blue; }
.green { background:green; }
JavaScript:
var arr = ["red","pink","blue","green"];
$('#full').on('click', 'div', function() {
$('.colorName').text($(this).attr('class'));
var sel = arr.indexOf($(this).attr('class'));
$(this).closest('#full').find('div')
.first().removeClass().addClass(arr[sel])
.next().removeClass().addClass(arr[(sel+1)%4])
.next().removeClass().addClass(arr[(sel+2)%4])
.next().removeClass().addClass(arr[(sel+3)%4]);
});
Here's the jsFiddle to test it.
A few things to notice:
I assigned an id for each square to be able to separate position and color in the CSS, so we can change the color of a square just by changing its class.
In the javascript, the colors in the array are in the same order than in the classes of the squares (counter-clockwise in this case).
When a square is clicked, we get the index of its color and use it to replace the class of each square with the new one.
If you uncomment the alerts in the fiddle, it will show you the html of the squares before and after the class changes.
I know the code could be cleaner or better in some ways, that was just a quick try.
Hope it helps!

Categories

Resources