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;
}
Related
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"))
<script id="canteen_card_row_template" type="text/html">
<div class="normal-box">
<div class="subtitle-box">
<div class="mensa-img">
<img src="{{type.[0].image}}" id="mensa-image">
</div><span class="options-title" id="mensa-text">{{title.de_DE}}</span>
</div>
<div class="side-text-box">
<span class="side-text">{{price.student}}€</span>
</div>
<div class="small-text">
<span class="normal-text" id="mensa-text">{{content}}</span>
</div>
</div>
</script>
CSS
#mensa-image{
height: 13px;
width:13px;
border: none !important;}
I have the problem where img src="blabla" is... Using handlebars and a webservice that template is loaded 4 times.. The fourth "normal-box" does not have content therefore no image(thats ok).. the problem is, since it has no image the div where the image is placed should be blank, but there an unwanted border instead... Here is an image of how it looks like pic
Use 0 instead of none
border: 0;
not
border: none;
Also, if you are generating multiple "mensa-image" images then you should be using class instead of ID.
Try this CSS rule instead and remove the ID from the image:
.mensa-image img {
border: none;
}
and HTML (partly):
<div class="subtitle-box">
<div class="mensa-img">
<img src="{{type.[0].image}}">
</div>
<span class="options-title">{{title.de_DE}}</span>
</div>
As #Lowcase wrote, you should not use an ID several times (same for the text span, BTW). If you simply remove the ID, the above rule should work.
That's the work of the browser when no image is found. The easiest fix is just to add a transparent .png.
I have a series of "icons" that I show in my template.
<div ng-repeat="data in items | orderBy:'-timestamp'">
<div class="icon">
<i>1</i>
<span>2</span>
</div>
</div>
I have the following css to show span when .icon is hovered over and hide i.
.icon:hover i { display: none; }
.icon:hover span { display: block; }
However, I also want to be able to show every single instance of span when $scope.options == true. So I added the following:
<i ng-hide="options">1</i>
<span ng-show="options">2</span>
But now, my :hover is broken and doesn't end up showing the span.
Is there a way to override the ng-show so that my css will still display:block when it is hovered?
plunker
You can skip the css and let angular handle it using ng-mouseenter/ng-mouseleave. Then use an or to have it show when a second variable goes true.
HTML:
<div ng-repeat="data in items | orderBy:'-timestamp'">
<div ng-mouseenter="options=true" ng-mouseleave="options=false" class="icon">
<i ng-hide="options || checkbox">1</i>
<span ng-show="options || checkbox">2</span>
</div>
</div>
<input type='checkbox' ng-model="checkbox" ng-click="options=!options">Show
use the $scope.options value to add a class to your .icon div, then make a more specific CSS rule to overrride the :hover event.
<div class="icon" ng-class="{ override: $scope.options == true }">
<i ng-hide="options">1</i>
<span ng-show="options">2</span>
</div>
And in your CSS:
.icon.override:hover i { display: block; }
.icon.override:hover span { display: block; }
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/
How can I write in jQuery this:
If .horse is visible, then add #cat to .dog (but only to .dog which is child of the visible .horse)?
<div id="tabs-1" class="horse" style=" margin-right: 20px; display: none;">
<div style = "width:70%; margin: 0 auto; margin-top:-20px">
<div class="rabbit">
<a class="dog" href="movie.mov"></a>
</div>
</div>
</div>
<div id="tabs-2" class="horse" style=" margin-right: 20px; display: block;">
<div style = "width:70%; margin: 0 auto; margin-top:-20px">
<div class="rabbit">
<a class="dog" href="movie.mov"></a>
</div>
</div>
</div>
Use following, it will work
$('.horse:visible .dog').attr('id','cat')
If you want to add the ID cat to .dog, use this:
$(".horse:visible .dog").attr("id", "cat");
Here is an example.
Try,
$('.horse:visible .dog').append($('#cat'));
The above code would append #cat into .dog which is a descendant of visible .horse
If you want to add id to the particular element then do,
$('.horse:visible .dog').attr('id','cat');
We can combine jQuery's :visible selector with jQuery's attr() method to set the id:
$('.horse:visible .dog').attr('id', 'cat');
This will give the .dog element contained within your visible .horse element an id of "cat".