I've looked everywhere on StackOverflow and there doesn't seem to be anyone else solving this issue or I'm just using the wrong wording or keywords which results in me not finding what I want. If that's the case and this is a duplicate, I would be glad if you could link me to a case like this. Thanks.
I have an HTML/CSS, AngularJS, PHP and MySQL project.
POST and GET requests work perfectly.
What I'm trying to do is similar to what is already done on Google Keep.
When the user clicks on the blue pencil, I want the opacity on the selected item to be 100% but all the parents divs and sibling divs at opacity value 0.3 or something.
I would like to try and avoid jQuery if possible.
I believe I read somewhere that it is bad practice to use a whole bunch of frameworks together and that when you use a framework, that you should stick with it.
I have no idea how to approach this problem.
I don't even know where to start.
Could you please also provide me with a working example JSFiddle or Plnkr please?
Any help or suggestion would be greatly appreciated!
Thanks in advance!
What I want
What I have
HTML
<body ng-app="myApp">
<font face="Source Sans Pro">
<div class="left">
<center>
<div ng-controller="insertController">
<h2> What I learned today </h2>
<form>
Date <br>
<input type="text" ng-model="date"><br><br>
Content <br>
<textarea rows="10" cols="50" ng-model="content"></textarea><br><br>
<input type="button" value="Submit" ng-click="insertdata()">
</form>
</div>
</center>
</div>
<div class="right">
<center>
<div ng-controller="fetchController"><br>
<span ng-repeat="item in results">
<div class="card">
<div class="theText">
<span class="bold-underline">{{item.date}}</span><br>
{{item.content}}
</div>
<div ng-controller="deleteController">
<input type="button" class="deleteButton" ng-click="deleteThisItem(item)" value="x">
</div>
<div ng-controller="editController">
<input type="button" class="editButton" ng-click="editThisItem(item)" value="✎">
</div>
</div>
<br><br>
</span>
</div>
</center>
</div>
</font>
</body>
EDIT
I just got it working.
New HTML
<div class="right">
<center>
<div ng-controller="fetchController"><br>
<span ng-repeat="item in results">
<div ng-controller="fadeController">
<div class="card" ng-class="cardFade">
<div class="theText">
<span class="bold-underline">{{item.date}}</span><br>
{{item.content}}
</div><!-- theText -->
<div ng-controller="deleteController">
<input type="button" class="deleteButton" ng-click="deleteThisItem(item)" value="x">
</div><!-- deleteController -->
<div ng-controller="editController">
<input type="button" class="editButton" ng-click="editThisItem(item)" value="✎">
</div><!-- editController -->
</div><!-- card -->
</div><!-- fadeController -->
<br>
</span><!-- ng-repeat -->
<div class="overlay"></div>
</div><!-- fetchController -->
</center>
</div><!-- right -->
New CSS
.someCSS {
background-color: white;
z-index: 200;
opacity: 1;
}
.noCSS {
}
.overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.6;
z-index: 100;
pointer-events: none; /* required to be able to click buttons under overlay */
}
fadeController.js
app.controller("fadeController", function($scope, $http, resultsService) {
$scope.cardFade = "noCSS";
$scope.editThisItem = function(item) {
if($scope.cardFade === "noCSS") {
$scope.cardFade = "someCSS";
}
else if($scope.cardFade === "someCSS") {
$scope.cardFade = "noCSS";
}
else {
alert("FATAL ERROR!");
}
};
});
you can add a div as overlay
<div class="overlay"></div>
.overlay {
backgound-color: gray;
opacity: 0.5;
z-index: 100; //<= so the overlay with cover the page
}
next you will need to add a css class like this
.someCss {
z-index: 101; // <=so it would be on top on the overlay
}
and it will be added to the ng-repeat element when you click on the blue pencil.
I would even go and make the class as ng-class ng-class
so it would be something like this:
<span ng-repeat="item in results">
<div class="card" ng-class="{someCss : item.selected}">
<div class="theText">
<span class="bold-underline">{{item.date}}</span><br>
{{item.content}}
</div>
<div ng-controller="deleteController">
<input type="button" class="deleteButton" ng-click="deleteThisItem(item)" value="x">
</div>
<div ng-controller="editController">
<input type="button" class="editButton" ng-click="editThisItem(item)" value="✎">
</div>
</div>
<br><br>
</span>
and now on the blue pencil click you can add the property selected or change it
Related
I'm trying to animate a chat. Every time the user clicks on the input field or "send" icon, I want the chat bubbles to appear one after the other. This is my part of my code so far. Right now, they all have "display: none." The picture below shows them without it.
<div class="messages">
<div class="message" id="msg1" style="display: none;">Hi! I'm looking for an old friend. She attended Martin Grove a few years ago.</div>
<div class="message" id="msg2" style="display: none;">Her name is Sam.<br>
<i>*insert pic of Sam and MC*</i></div>
<div class="message" id="msg3" style="display: none;">Did you know her or her last name by any chance? </div>
<div id="msg4" class="message-teacher" style="display: none;">Hello there!</div>
<div class="message-teacher" id="msg5" style="display: none;">Unfortunately, I did not have the pleasure of teaching Sam. Her last name and whereabouts are a mystery to me as well. </div>
<div class="message-teacher" id="msg6" style="display: none;">However, I do know she was in the photography club. I always saw her carrying a camera, always taking pictures. </div>
<div class="message-teacher" id="msg7" style="display: none;">In fact, I believe she won a contest for one of them. </div>
<div class="message-teacher" id="msg8" style="display: none;">She’s a super talented girl!</div>
<div class="message-teacher" id="msg9" style="display: none;">Best of luck on your search. I hope you two are reunited soon!</div>
</div>
<div class="input">
<div class="plus-icon" style="font-size: 25px; color: #2A84FF; margin: auto;">
<i class="fas fa-plus-circle"></i>
</div>
<div class="subinput" style="font-size: 25px; color: #2A84FF; margin: auto;">
<input type="text" placeholder="|" />
<i class="fas fa-smile"></i>
</div>
<div class="btn" style="font-size: 23px; color: #2A84FF; margin: auto;"><i class="fas fa-paper-plane"></i></div>
</div>
I would query for the required elements, create an array out of it, and shift() (aka remove the first element of the array - or you can use pop() to remove the last element, depending on your needs). When you pop or shift an element from an array, those functions return the removed element and we can remove the CSS class that hides those elements in the DOM.
const myHTMLCollection = document.getElementsByClassName("invisible");
const HTMLElementsArr = [...myHTMLCollection];
function showMessage() {
if (HTMLElementsArr.length > 0) {
HTMLElementsArr.shift().classList.remove('invisible');
}
}
.invisible {
display: none;
}
<p class="invisible">Some text 1 click</p>
<p class="invisible">Some text 2 clicks</p>
<p class="invisible">Some text 3 clicks</p>
<button onClick="showMessage()">Show a message</button>
I'm trying to have 2 separate buttons so that when the first button is clicked there's a div that shows underneath it and then when the other button is pressed, another div pops out replacing/hiding the first div that came out when the first button was clicked.
Html:
<!-- Pre-Determined Button -->
<span class="tooltip">
<button style="border-top-right-radius: 13px; border-bottom-left-radius: 13px;border-bottom-right-radius: 20px;border-top-left-radius: 20px;" id="predetermine" onclick="javascript:predetermine();">Pre-Determined</button>
</span>
<!-- Auction Button -->
<span class="tooltip">
<button style="border-top-right-radius: 20px; border-bottom-left-radius: 20px;border-bottom-right-radius: 13px;border-top-left-radius: 13px;" id="auction" onclick="javascript:auction(); ">Auction</button>
</span>
</div>
<br>
<!-- Username Entry -->
<div class="username-entry" id="predetermineclick" style="visibility:hidden">
<label> Enter Username: </label>
<input class= "joe" type="text" id="uName" name="UserName">
</div>
<!-- Create code button -->
<div class="create" id="auctionclick" style="visibility:hidden">
<button class="button">Create Link</button>
</div>
For my javascript, I just wrote 2 seperate functions, but as you can see on the images the "create link" button goes on the bottom of the username spot. I know there's a way to put these 2 functions together and make the code cleaner.
Java script:
function predetermine() {
if (document.getElementById('predetermine').onclick) {
document.getElementById('predetermineclick').style.visibility='visible';
document.getElementById('auctionclick').style.visibility='hidden';
}
function auction() {
if (document.getElementById('auction').onclick) {
document.getElementById('auctionclick').style.visibility='visible';
document.getElementById('predetermineclick').style.visibility='hidden';
}
Use display: none to completely remove an element from the page.
function predetermine() {
if (document.getElementById('predetermine').onclick) {
document.getElementById('predetermineclick').style.display = 'block';
document.getElementById('auctionclick').style.display = 'none';
}
}
function auction() {
if (document.getElementById('auction').onclick) {
document.getElementById('auctionclick').style.display = 'block';
document.getElementById('predetermineclick').style.display = 'none';
}
}
<!-- Pre-Determined Button -->
<span class="tooltip">
<button style="border-top-right-radius: 13px; border-bottom-left-radius: 13px;border-bottom-right-radius: 20px;border-top-left-radius: 20px;" id="predetermine" onclick="javascript:predetermine();">Pre-Determined</button>
</span>
<!-- Auction Button -->
<span class="tooltip">
<button style="border-top-right-radius: 20px; border-bottom-left-radius: 20px;border-bottom-right-radius: 13px;border-top-left-radius: 13px;" id="auction" onclick="javascript:auction(); ">Auction</button>
</span>
<br>
<!-- Username Entry -->
<div class="username-entry" id="predetermineclick" style="display: none">
<label> Enter Username: </label>
<input class="joe" type="text" id="uName" name="UserName">
</div>
<!-- Create code button -->
<div class="create" id="auctionclick" style="display: none">
<button class="button">Create Link</button>
</div>
You can get the id of the clicked button by passing it in the javascript function. Try the code snippet below.
HTML:
<div>
<!-- Pre-Determined Button -->
<span class="tooltip">
<button
style="border-top-right-radius: 13px; border-bottom-left-radius: 13px;border-bottom-right-radius: 20px;border-top-left-radius: 20px;" id="predetermine" onclick="toggleState(this.id);">Pre-Determined</button>
</span>
<!-- Auction Button -->
<span class="tooltip">
<button
style="border-top-right-radius: 20px; border-bottom-left-radius: 20px;border-bottom-right-radius: 13px;border-top-left-radius: 13px;" id="auction" onclick="toggleState(this.id); ">Auction</button>
</span>
</div>
<br>
<!-- Username Entry -->
<div class="username-entry" id="predetermineclick" style="visibility:hidden">
<label> Enter Username: </label>
<input class="joe" type="text" id="uName" name="UserName">
</div>
<!-- Create code button -->
<div class="create" id="auctionclick" style="visibility:hidden">
<button class="button">Create Link</button>
</div>
Javascript:
function toggleState(clickedButtonId) {
const predetermineClick = document.getElementById('predetermineclick');
const auctionClick = document.getElementById('auctionclick');
if(clickedButtonId === 'predetermine') {
predetermineClick.style.visibility='visible';
auctionClick.style.visibility='hidden';
} else {
auctionClick.style.visibility='visible';
predetermineClick.style.visibility='hidden';
}
}
Another way of doing this is to pass the element itself instead of its id.
To make this work, change toggleState(this.id); to toggleState(this); in both the places in the above HTML code.
Then get the id of the triggered element like we've done in the code below.
function toggleState(clickedButton) {
const clickedButtonId = clickedButton.id;
const predetermineStyle = document.getElementById('predetermineclick').style;
const auctionStyle = document.getElementById('auctionclick').style;
if(clickedButtonId === 'predetermine') {
predetermineStyle.visibility = 'visible';
auctionStyle.visibility = 'hidden';
} else {
auctionStyle.visibility = 'visible';
predetermineStyle.visibility = 'hidden';
}
}
Also, I noticed there was a <div> element missing in your HTML code, which I'm sure you'd definitely have in your code file, but to make this answer self-sufficient, I took the liberty of adding a <div> element at the beginning.
I'd have chosen to remove the element instead of toggling its visibility, but I see that #Janned has already addressed that in his answer, so I won't go into it.
I am trying to make a comment reply section. I am loading the same div for reply which I use for commenting using $('#1').append($('.enterComment').html()); where 1 is the id of the div which will be displayed when reply is clicked.
.enterComment div contains a hidden submitPost button which will be displayed as soon as the user starts typing comment.
That div is loading properly but The problem for me is that when I loaded the same div in reply section and as I start typing anything in that it only displays the hidden div in the main comment div and not in the reply one.
My html is
<div class="enterComment">
<form id="insertComment">
<textarea name="comment" placeholder="comment here..."></textarea>
<div id="commentOptions">
<button type="button" class="btn btn-primary btn-sm">Comment</button>
</div>
</form>
</div>
For reply I have
<ul class="commentList">
<li>
<div class="commentData" id="1">
<p>The comment content will go here</p>
<p><span class="reply">Reply</span> <i class="fa fa-thumbs-up" aria-hidden="true" tabindex="1"></i> <i class="fa fa-thumbs-down" aria-hidden="true" tabindex="1"></i> </p>
</div>
</li>
</ul>
and script is
$("body").on('focus', 'textarea', function() {
$('#commentOptions').fadeIn(1000);
});
$("body").on('click', '#1 p .reply', function() {
$('#1').append($('.enterComment').html());
});
You need to fade in the following div of textarea so use .next().
Also, Identifiers in HTML must be unique, hence use CSS class. Here in the example I have used commentOptions CSS class.
$("body").on('focus', 'textarea', function() {
$(this).next('.commentOptions').fadeIn(1000);
});
$("body").on('click', '.commentData p .reply', function() {
var element = $('.enterComment').clone();
element.find('.commentOptions').hide();
$(this).closest('.commentData').append(element);
});
.commentOptions {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="enterComment">
<form id="insertComment">
<textarea name="comment" placeholder="comment here..."></textarea>
<div class="commentOptions">
<button type="button" class="btn btn-primary btn-sm">Comment</button>
</div>
</form>
</div>
<ul class="commentList">
<li>
<div class="commentData" id="1">
<p>The comment content will go here</p>
<p><span class="reply">Reply</span> <i class="fa fa-thumbs-up" aria-hidden="true" tabindex="1"></i> <i class="fa fa-thumbs-down" aria-hidden="true" tabindex="1"></i> </p>
</div>
</li>
</ul>
I've created an answer in one HTML file which works without dependencies apart from the jQuery and Bootstrap which you were using on your example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
body{
padding: 10px;
}
.wrapper{
width: 800px;
margin-right: auto;
margin-left: auto;
}
.submit-comment-btn-container {
display: none;
}
</style>
<script type="text/javascript">
$( document ).ready(function() {
$('#comment-textarea').on('focus', function() {
$('.submit-comment-btn-container').fadeIn('fast');
});
$('#submit-comment-btn').on('click', function() {
var text = $('#comment-textarea').val();
if(text != ''){
$('.submit-comment-btn-container').fadeOut();
$('#comment-textarea').val('');
// cloning the first child of the comments to use as a template
var comment = $('.comment-list').children().first().clone();
// replacing the content of the cloned comment with the new text
$(comment).html(text);
// appending the new comment to the comment list
$(comment).appendTo('.comment-list');
}
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="enterComment">
<form id="insertComment">
<div class="comment-text-container">
<textarea id="comment-textarea" placeholder="Comment here..."></textarea>
</div>
<div class="submit-comment-btn-container">
<button id="submit-comment-btn" type="button" class="btn btn-primary btn-sm">Comment</button>
</div>
</form>
</div>
<div class="comment-list-container">
<ul class="comment-list">
<li>
<div class="comment">
Comment goes here
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Pretty simple question, but I've been staring at this code for way too long that I've become code blind and can't see what I'm doing wrong here.
I'm simply trying to make a horizontal list of 2 image thumbnails within a modal using Angular's ng-repeat. Here is the HTML for it:
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form name="socreForm">
<div ng-hide="hasScreenshot === true"></div>
<h3>Screenshots</h3>
<ul class = "imgList">
<li ng-repeat="item in screenshots">
<div style="text-align: center;">User: {{item.user}}</div>
<img class="thumbnail" ng-src = "{{item.imageURL}}">
</li>
</ul>
<h3>Outcome</h3>
<div>
<input type="radio" ng-model="formData.outcome" name="outcome" ng-value="'1'">
<label>Win</label>
</div>
<div>
<input type="radio" ng-model="formData.outcome" name="outcome" ng-value="'2'">
<label>Lose</label>
</div>
</form>
</div>
</div>
</div>
And here is the CSS I'm trying to use:
.imgList {
li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
}
.thumbnail {
width: 40%
}
I've been fiddling with this for a while now and I simply cannot make it appear horizontally. This is what it looks like when it renders:
What silly CSS thing am I missing? Thank you in advance for any help!
Replace <div style="text-align: center;">User: {{item.user}}</div> with <span style="text-align: center;">User: {{item.user}}</span>
or add CSS rule like:
.imgList div {
display: inline; //or inline-block
}
Divs are display: block by default (user agent stylesheet)
can anyone please tell me why i'm getting undefined in javascript when i run the below code.
its a simple code for getting the parent div id. All div's are closed properly but still getting undefined.
html
<div id="ricolaId_2" class="ricMo ricIndex ricBlocking ricInline" style="width: 730px; left: 309px; top: 144px; z-index: 13000; display: block;">
<div class="ricTitle">
<a class="ricClose">
<span class="ui-icon ui-icon-close" title="Close">
</span>
</a>
<span class="ricTitle">Manage</span>
</div>
<div class="ricModal ng-scope" style="height: auto;">
<div>
<div>
<div ng-controller="Manage" class="ng-scope">
<div class="ricCenter">
<div class="ricport">
<div class="ricWr">
</div>
</div>
</div>
</div>
<br style=""></br><br style=""></br>
<div align="center" class="row btn-group">
<button onclick="cancel(this)" class="ricSmall" type="button" id="sss" ric:loaded="true">Close</button>
</div>
</div>
</div>
</div>
</div>
script
function cancel(btn)
{
try{
ricId_1 = $(btn).parent().parent();
alert(ricId_1.attr("id"));
}catch(a){alert(a);}
}
To target that id you need:
$(btn).parent().parent().parent().parent().parent();
or:
$(btn).closest('.ricModal').parent();
Demo
Use parents instead of .parent()
function cancel(btn)
{
try{
ricId_1 = $(btn).parents('#ricolaId_2');
alert(ricId_1.attr("id"));
}catch(a){alert(a);}
}
parent method only travels a single level up the DOM tree and parents method travels through multiple level up the DOM tree.
I changed a few things, and look: It's working! You should add an id to ng-scope So, http://jsfiddle.net/8F8Mr/7/
Update
http://jsfiddle.net/8F8Mr/9/