In my project, the red Number div is a button, I need to hide the number, 100, 4, 9,14 because the opacity:0"button` can click, so I use the "display none."
How to judge the number 100 div and hide it? I don't know how to use ng-class or ng-hide to hide the number 4,9,14div.
This is my code:
.bigDiv {
width: 500px;
height: 500px;
margin: 400px auto;
background-color: black;
}
ul {
font-size: 0px;
padding-left: 0px;
}
.circle {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: green;
position: relative;
}
.todo-last {
position: absolute;
width: 33px;
height: 33px;
background-color: red;
left: 25px;
top: 25px;
font-size: 25px;
color: white;
}
.bigDiv li {
display: inline-block;
width: 100px;
height: 100px;
background-color: purple;
}
<body ng-app="app" ng-controller="controller">
<div class="bigDiv">
<ul>
<li ng-repeat="todo in todoArray">
<div class="circle">
<div class="todo-last">
{{todo.text}}
</div>
</div>
</li>
</ul>
</div>
</body>
<script>
var app = angular.module('app',[]);
app.controller('controller',["$scope",function ($scope) {
var randomNum = Math.ceil(Math.random() * 15 + 1);
var array = [];
for(var i = 0 ; i < randomNum; i++){
if((randomNum -2)===i ){
array.push({
text: 100
});
continue;
}
array.push(
{text: i}
)
}
$scope.todoArray = array;
}])
</script>
One more thing only hides the reddiv.
Seems you want to hide on the basis of array values
First write a function on scope to check if value is in array or not
$scope.display = function(val){
if($scope.todoArray.indexOf(val) < 0)
return true;
else
return false;
};
your html to show hide by ng-if, inside your ng-repeat:
<div ng-if="display(todo.text)">
// your other code
</div>
Related
In my div is the overlay of another absolutely positioned div. However the text is still going beyond the div.
var mainDiv = ".myclass";
var mainDivP = ".myclass p";
$(window).on("load",function(){ multiLine_ellipsis(mainDiv, mainDivP); });
function multiLine_ellipsis(mainDiv, mainDivP) {
$(mainDivP).each(function(index) {
var divh = $(mainDiv).height();
if ($(this).outerHeight() > divh) {
var returnText = $(this).text().replace(/\W*\s(\S)*$/, '...');
console.log(returnText);
$(this).text(returnText);
}
});
}
.myclass {
color: #FFFFFF;
font-family: "my-font";
font-size: 28px;
padding: 15px;
height: 100px;
word-wrap: break-word;
overflow: hidden;
position: relative;
}
.myOverlay {
background-image: url("https://dksa1a9fhenpv.cloudfront.net/website/images/overlay.png");
position: absolute;
width: 100%;
z-index: 1;
bottom: 0;
height: 100%;
}
.outerDiv{
width:231px;
height:173px;
position:relative;
}
p{margin:0 0 10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outerDiv">
<div class="myOverlay">
<div class="myclass">
<p>jadu's best Accommodation/ abcd hddndehd lfjhgs</p>
</div>
</div>
</div>
I should get ... at the end of the statement but i am not getting it.
Your CSS hides the rest, just change font-size to 30px you will see some part of the hidden part.
Is there any ways to compare index numbers from 2 different arrays?
Here's what I want to do:
if i[0] == k[0] {
//give some action to k[0]
} else if i[1] == k[1] {
// give some action to k[1]
}
...and so on.
I could've made each functions 0 to 4 to fix my problem like that, but then the code would've been too long and unreadable. I want to optimize my code as much as I can.
I wrote the code like this but this doesn't work what I want. All the k keeps getting action when I hover one of the box group.
And this is my code:
var i = $('#boxgroup').children()
var k = $('#panelgroup').children()
$(i).each(function() {
$(this).hover(function() {
if($(i == k)){
$(k).stop().animate({height: '500px'})}
}, function(){
$(k).stop().animate({height: '200px'})
})
})
#boxgroup{
width: 600px;
height: 200px;
border: 1px solid black;
clear: both;
}
.box {
width: 200px;
height: 50px;
border: 1px solid black;
float: left;
position: relative;
top: 0px;
margin: 10px;
}
.panelgroup {
clear: both;
}
.panel {
width: 200px;
height: 200px;
border: 1px solid gray;
top: 400px;
float: left;
}
<div id="boxgroup">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<br>
<div id="panelgroup">
<div class="panel">panel1</div>
<div class="panel">panel2</div>
<div class="panel">panel3</div>
<div class="panel">panel4</div>
</div>
It sounds like you want hovering over a child in #boxgroup to make the equivalent child in #panelgroup larger. If so, you don't need a series of ifs, you just need the index of the element:
$('#boxgroup > *').hover(
function() {
var index = $(this).index(); // Returns its index within boxgroup
$("#panelgroup > *:eq(" + index + ")").stop().animate({height: '500px'});
},
function() {
var index = $(this).index(); // Returns its index within boxgroup
$("#panelgroup > *:eq(" + index + ")").stop().animate({height: '200px'});
}
);
Live Example:
$('#boxgroup > *').hover(
function() {
var index = $(this).index(); // Returns its index within boxgroup
$("#panelgroup > *:eq(" + index + ")").stop().animate({height: '500px'});
},
function() {
var index = $(this).index(); // Returns its index within boxgroup
$("#panelgroup > *:eq(" + index + ")").stop().animate({height: '200px'});
}
);
#boxgroup{
width: 600px;
height: 200px;
border: 1px solid black;
clear: both;
}
.box {
width: 200px;
height: 50px;
border: 1px solid black;
float: left;
position: relative;
top: 0px;
margin: 10px;
}
.panelgroup {
clear: both;
}
.panel {
width: 200px;
height: 200px;
border: 1px solid gray;
top: 400px;
float: left;
}
<div id="boxgroup">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<br>
<div id="panelgroup">
<div class="panel">panel1</div>
<div class="panel">panel2</div>
<div class="panel">panel3</div>
<div class="panel">panel4</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
See:
index
:eq
I am trying to put together this project.
In my list I have fruit & veg.I want to be able to drag the right item into the correct box. Once it is in the correct box ( dropped) it should be invisible.
Hope someone can help.
HTML
<header>
<h1>THIS IS A TEST PAGE</h1>
</header>
<nav>
</nav>
<section>
<h1>Choose a Box</h1>
<ul id="fruit">Fruit
</ul>
<ul id="veg">Veg
</ul>
</section>
<article>
<ul id="dragsource">
<li id="item1" draggable="true">Apple</li>
<li id="item2" draggable="true">Banana</li>
<li id="item3" draggable="true">Orange</li>
<li id="item4" draggable="true">Potato</li>
<li id="item5" draggable="true">Carrot</li>
<li id="item6" draggable="true">Pea</li>
</ul>
</article>
JS
window.onload = function() {
var target1 = document.getElementById("fruit");
var target2 = document.getElementById("veg");
var list = document.querySelectorAll("#dragsource li");
for (i = 0; i < list.length; i++) {
list[i].draggable = true;
list[i].ondragstart = function(event) {
var event = event || window.event;
var dt = event.dataTransfer;
dt.setData("text", event.target.id);
dt.effectAllowed = "move";
};
}
target1.ondragover = function(event) {
var event = event || window.event;
event.preventDefault();
};
target2.ondragover = function(event) {
var event = event || window.event;
event.preventDefault();
};
target2.ondrop = function(event) {
var event = event || window.event;
var dt = event.dataTransfer;
event.preventDefault();
var data = dt.getData("text");
target2.appendChild(document.getElementById("data"));
};
target1.ondrop = function(event) {
var event = event || window.event;
var dt = event.dataTransfer;
event.preventDefault();
var data = dt.getData("text");
target1.appendChild(document.getElementById(data));
};
};
CSS
header {
background-color: black;
color: yellow;
text-align: center;
padding: 5px;
}
nav {
line-height: 30px;
background-color: yellow;
height: 400px;
width: 100px;
float: left;
padding: 5px;
}
body,
html {
background-color: silver;
font-family: sans-serif;
color: black;
text-align: center;
}
section {
width: 482px;
height: 220px;
float: left;
text-align: center;
padding: 5px;
}
#fruit {
width: 90px;
height: 120px;
left: 150px;
top: 150px;
padding: 10px;
border: 2px solid green;
position: absolute;
}
#veg {
width: 200px;
height: 120px;
left: 340px;
top: 150px;
padding: 10px;
border: 2px solid green;
position: absolute;
}
article {
background-color: aqua;
height: 170px;
width: 482px;
float: right;
padding: 5px;
}
ul {
margin: left;
column-count: 3;
width: 50%;
text-align: left;
list-style: none;
}
li {
list-style-type: none;
padding: 5px;
margin: 2px;
background-color: #CCCCFF;
border: 2px double #CCCCCC;
}
footer {
background-color: black;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
See fiddle: https://jsfiddle.net/cq2aw1dy/3/
Before starting - it should be noted in your target2.onDrop function, the last line you say document.getElementById("data") there shouldn't be any quotes there. That will give you some issues.
Since all of your fruits have ID's I think it would serve you better to make use of classes The way to do that would be to add a class to the dropped element that tells it to become invisible.
CSS
#fruit > .hiddenDrop, #veg > .hiddenDrop {
display: none;
}
Javascript - Place this inside of your .onDrop() functions
var element = document.getElementById(data);
element.setAttribute('class', 'hiddenDrop');
target.appendChild(element);
What this does is after the element is dropped, it adds the class hiddenDrop to that element which will then change it's display property to none
EDIT
You can do it with the css like this #fruit > *{display: none;}
It is saying if you drag into the fruit div, display is set to none.
See fiddle:
https://jsfiddle.net/cq2aw1dy/4/
I've got a simple to-do list app. To-do items are inserted by jQuery as <li> items. When they're checked off, they're removed from #todolist and prepended to #donelist. I want to let the user replace to-do items they've accidentally checked off, hence the .on handler for #donelist .checkbox elements, but it's not working. I've been puzzling over this for an embarrassingly long amount of time. How can I get the click handler working for #donelist .checkboxes?
HTML:
<div id="topform">
<input type="text" id="task" placeholder=" New task...">
</div>
<ul id="todolist">
</ul>
<ul id="donelist">
</ul>
JS:
$('#todolist').on('click', '.checkbox', checkTask);
$('#donelist').on('click', '.checkbox', replaceTask);
$('input').keypress(function (e) {
if (e.which == 13) {
addTask(e);
}
});
function addTask(e) {
taskToAdd = $('#task').val();
var listItem = "<li><span class='todotask'>" + taskToAdd + "</span><div class='checkbox'></div></li>";
$('#todolist').prepend(listItem);
}
function checkTask() {
var listItem = $(this).parent();
listItem.remove();
$('#donelist').prepend(listItem);
}
function replaceTask() {
alert('hey buddy');
}
Full CSS:
html,
body {
margin: 0;
padding: 0;
background-color: #313131;
font-family: 'Helvetica', sans-serif;
}
#task {
width: 98%;
margin: 5px auto 7px auto;
padding: 0;
display: block;
height: 45px;
border: none;
border-radius: 2px;
font-size: 25px;
background-color: #F7F7F7;
}
ul {
margin: 0 auto 0 auto;
padding: 0;
width: 98%;
}
li {
list-style-type: none;
padding: 0;
margin: 5px auto 0 auto;
width: 100%;
height: 45px;
line-height: 45px;
position: relative;
font-size: 25px;
border-radius: 2px;
background-color: #F7F7F7;
}
#donelist li {
opacity: .5;
text-decoration: line-through;
}
.todotask {
margin-left: 7px;
}
.checkbox {
height: 31px;
width: 31px;
border-radius: 2px;
background-color: #C1C1C1;
position: absolute;
right: 7px;
top: 7px;
}
checkTask() works just fine, which is what really confuses me. checkTask() is called when the user clicks on a dynamically inserted element (a div in a li that's inserted by addTask(). Why doesn't replaceTask() fire as well?
Having the corresponding HTML in the OP would have helped, so I've had to guess a bit about how the structure, but here's a working example of what I think you're looking for:
HTML
<h1>ADD</h1>
<input id="task"></input>
<button id="add">Add</button>
<h1>TODO</h1>
<ul id="todolist">
<li><span class='todotask'>" Take out the garbage "</span><div class='checkbox'></div></li>
<li><span class='todotask'>" Do the dishes "</span><div class='checkbox'></div></li>
</ul>
<h1>DONE</h1>
<ul id="donelist">
</ul>
CSS
.checkbox{
width: 15px;
height: 15px;
background-color: black;
display: inline-block;
cursor: pointer;
}
JavaScript inside document.ready()
$('#todolist').on('click', '.checkbox', checkTask);
$('#donelist').on('click', '.checkbox', replaceTask);
$("#add").click(addTask);
function addTask(e) {
taskToAdd = $('#task').val();
var listItem = "<li><span class='todotask'>" + taskToAdd + "</span><div class='checkbox'></div></li>";
$('#todolist').prepend(listItem);
}
function checkTask() {
var listItem = $(this).parent();
listItem.remove();
$('#donelist').prepend(listItem);
}
function replaceTask() {
var listItem = $(this).parent();
listItem.remove();
$('#todolist').prepend(listItem)
}
I have 3 boxes: kotak1, kotak2, and kotak3.
#kotak1 has the test "COBA AKU"
CSS:
<style>
body {
margin: 0;
padding: 0;
}
#mainCont {
margin: 0 auto;
width: 1024px;
height: 768px;
background-color: #F00;
}
#kotak1{
width: 1024px;
height: 768px;
background-color: #0F9;
text-align: center;
vertical-align: middle;
}
#kotak2{
width: 240px;
height: 768px;
background-color: #666;
float: left;
}
#kotak3{
width: 240px;
height: 768px;
background-color: #03F;
float: right;
}
</style>
HTML:
<body>
<div id="mainCont">
<div id="kotak2"></div>
<div id="kotak3" onmouseout="keluarkotak()"></div>
<div id="kotak1">
COBA AKU
</div>
</div>
</body>
I want to change the text in #kotak1 to "SELESAI TIDUR" when the you mouse out from #kotak3 and enter #kotak2.
Here's a fiddle: http://jsfiddle.net/PZfwT/1
Here's the supporting code, just manage whether you've left three and then when your mouse enters 2 you can change the text of 1. I'd recommend doing this with jQuery, it's easier to manage overall if done that way.
(function() {
var mousedOutThree = false;
window.App = {
kotak2In: function() {
if (mousedOutThree) {
mousedOutThree = false;
document.getElementById("kotak1").innerHTML = "SELESAI TIDUR";
}
},
kotak3Out: function() {
mousedOutThree = true;
}
};
})();