I am making a small web application that allows users to add sticky notes to a page by clicking the add button. The following is the html that makes up a sticky note.
<div class="sticky_note">
<div class="title">
<input type="text" name="title" placeholder="My Title"><span class="close">x</span>
</div>
<div class="content">
<textarea name="note" placeholder="Type here..."></textarea>
</div>
</div>
I am just a bit unsure how to add another sticky note everytime the user clicks add. Any help would be appreciated. Thanks!
You could generate an html element by pressing a button, for example:
var div = document.createElement('div');
div.id = 'window'; //you can assign property to your element.
var div2 = document.createElement('div');
div2.id = 'windowhead';
div.appendChild(div2);
document.body.appendChild(div);
this code append a div into another main container. I hope that this can be help.
var stickyNote = $('.sticky_note')[0].outerHTML;
$('#addBtn').click(function(){
$stickyNote = $(stickyNote);
$stickyNote.appendTo($('.sticky_notes_container'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sticky_notes_container">
<div class="sticky_note">
<div class="title">
<input type="text" name="title" placeholder="My Title"><span class="close">x</span>
</div>
<div class="content">
<textarea name="note" placeholder="Type here..."></textarea>
</div>
</div>
</div>
<button id=addBtn>Add</button>
Assuming all this is inside a main container ,just keep that var code=<div class="sticky_note">...</div> code in a string and use
$("container").append(code);
You can easily create a new div.By using
document.createElement("div")
You can add text, classes..just look up w3school for more details..
Also i see your requirement, that clicking on button it will create a sticky note..
Element.cloneNode()
Might be helpful for you..where you make a div once with all the design and structure and use it again again..
http://www.w3schools.com/jsref/met_node_clonenode.asp
Related
Edited for tags and further explanation of the question
Hello ,i am fairly new to the web programming, sorry in advance if this sounds out of place.
My question is, i need to get customer's name and number from this <span class="tag-element-content" title="${Customer No}">${Customer Name}-${Customer No}</span> area, which is inside the code below, any help would be very appreciated.
<div class="tagger" id="ChoosenCustomer">
<div class="tags-container tag-view focused" id="branches">
<div class="tag-element-container" dojoattachpoint="_tagsContainer">
<div class="tag-decorated-element" name="ChoosenTags" id="" is-clicked="true">
<span class="tag-element-content" title="${Customer No}">${Customer Name}-${Customer No}</span>
<span id="RemoveCustomer" class="tag-element-delete icon-cross" search-id="" click=DeleteCustomer()></span>
<input type="hidden" id="" value="${Customer No}" is-clicked="true">
</div>
</div>
</div>
</div>
try this:
let span_text = document.querySelector('.your-element-class').textContent;
with jQuery:
let span_text = $('.your-element-class').text();
in your case:
document.getElementById("anid").innerText;
and add the id to your element
Simply you can use jquery on your project and :
var SpanText = $('.tag-element-content').text();
How can I use textarea to save a note on the todo div by creating a div inside it? Do I have to save it in a database?
Below is the code for the Sticky Note Page
<!DOCTYPE html>
<body>
<h1 id="headline">Sticky note </h1>
<div class="container-nav">
<textarea id="submit-content"></textarea>
<input type="button" onclick="addNote()" name="Post" class="submit-note" value="Post note">
</div>
<main>
<div class="container">
<div class="column column-one" id="column-one">
<h2>To do</h2>
</div>
<div class="column column-two" id="column-two">
<h2>Ongoing</h2>
</div>
<div class="column column-three" id="column-three">
<h2>Done</h2>
</div>
</div>
</main>
</body>
</html>
First, get the contents of the textarea. Then, append a new div to the .innerHTML of the container of wherever you want your div. Code is as follows
var content = document.getElementById("submit-content").value;
document.getElementById("whichever-container-you-want-it-in").innerHTML += "<div>" + content + "</div>;
Put this in your addNote() function, changing the attributes (id/class/etc) as needed.
Since the level of persistence has not been clearly defined this solution only copies a note from the <textarea> to the To Do column. It is not stored anywhere (i.e. database, cookie, localStorage ).
If I need to create elements via JS I typically do it with document.createElement. To add this newly created element to the DOM you will need a reference to the element it will be added to, I prefer document.querySelector. Then use the appendChild method to add the new DIV as the last element to the parent element.
var note = document.querySelector( '#submit-content' );
var post = document.querySelector( '.submit-note' );
var toDo = document.querySelector( '#column-one' );
/**
* Add note from textarea to a column.
*
* #param {DOMNode} column The column to add a note to.
* #param {String} note The note/text from the textarea.
*/
function addNote( column, note ) {
var div = document.createElement( 'div' );
div.textContent = note;
column.appendChild( div );
}
post.addEventListener( 'click', function ( e ) {
addNote( toDo, note.value );
note.value = '';
} );
<h1 id="headline">Sticky note </h1>
<div class="container-nav">
<textarea id="submit-content"></textarea>
<input type="button" name="Post" class="submit-note" value="Post note">
</div>
<main>
<div class="container">
<div class="column column-one" id="column-one">
<h2>To do</h2>
</div>
<div class="column column-two" id="column-two">
<h2>Ongoing</h2>
</div>
<div class="column column-three" id="column-three">
<h2>Done</h2>
</div>
</div>
</main>
This example also shows how to bind an event handler via JS instead of the HTML, which is the preferred approach.
I have this scenario :
<div class="paper jpaper form-group">
<label class="control-label">User comments</label>
<!-- here must be inserted append -->
<textarea placeholder="Enter text" class="form-control input-sm"></textarea>
<!-- and here must close the appended div and will include textarea -->
</div>
So how can I append a div that will include the existing textarea, but I don't want to remove the existing <textarea> and add again because that <textarea> si created dinamyc and has some clases and id's dinamically added.
Try something like this using jQuery:
$('.paper > textarea').wrap('<div class="wrapper">');
This code simply wraps your textarea.
Or even without jQuery:
var el = document.querySelector('.paper textarea');
el.outerHTML = '<div class="wrapper">' + el.outerHTML + '</div>';
$(".paper textarea").wrap("<div></div>");
It'll produce the following:
<div class="paper jpaper form-group">
<label class="control-label">User comments</label>
<div>
<textarea placeholder="Enter text" class="form-control input-sm"></textarea>
</div>
</div>
See http://api.jquery.com/wrap/ for more information.
Try this code
$(".form-group>.form-control").appendTo(
$("<div class='test'/>").appendTo(".jpaper")
)
jsfiddle demo
I'm helping a student out here. They have templates that contain an article with some anchor tags. These anchor tags represent "move up, move down, and remove".
These articles will be dynamically changing location.
What I am looking for is this: When an article is first on the page, the "Move Up" anchor should be removed. If an article is in the bottom/last position, the "Move Down" anchor should be removed.
If the article is in a middle position, all anchors must be available.
I know I can apply classes to the first and last articles on the page, but how can I specifically target those articles without them being in a list.
<script type="text/template" id="message-edit-item-template">
## $(".actions").first().children().remove(".move-up")
## $(".actions").last().children().remove(".move-down");
## ^ this is just me experimenting. I added the move-up and move-down classes to the anchors below, but they can be removed if not needed
<article class="well" data-message-id="<%= data.id %>">
<div class="message">
<div class="highlight clearfix">
<div class="actions">
<i class="fa fa-close"></i> Remove
<i class="fa fa-arrow-up"></i> Move Up
<i class="fa fa-arrow-down"></i> Move Down
</div>
</div>
<div class="form-group">
<label>Title</label>
<input type="text" name="title" value="<%= data.title %>" class="form-control"/>
</div>
<div class="form-group">
<label>Message</label>
<textarea name="message" class="form-control"><%= data.message %></textarea>
</div>
</div>
</article>
</script>
You should use CSS for this.
.actions:first-child .move-up, .actions:last-child .move-down {
display: none;
}
When you append or prepend new elements, your browser will show/hide the elements automatically based on if they match the CSS selector.
See: :first-child :last-child
Slightly different for fixNavigation() could be reused later on
$(document).ready(function() {
fixNavigation();
});
function fixNavigation() {
$('a.pull-right').show();
$('.well:first a.move-up').hide();
$('.well:last a.move-down').hide();
}
What about hide/show?
If you need the buttons to apper again when the articles dynamically change their positions, then hide the buttons instead of remove - there's no reason to remove them.
your_function_to_change_dynamically_articles_positions(){
// some code...
$(".move-up, .move-down").hide();
$(".move-up:not(:first)").show();
$(".move-down:not(:last)").show();
}
[updated JSfiddle]
JSFiddle
$(".move-up").click(function(){
var $parent = $(this).closest('article');
$parent.insertBefore($parent.prev());
showHide();
});
$(".move-down").click(function(){
var $parent = $(this).closest('article');
$parent.insertAfter($parent.next());
showHide();
});
$(".remove").click(function(){
$(this).closest('article').remove();
showHide();
});
function showHide(){
$(".move-up, .move-down").show();
$(".move-up:first").hide();
$(".move-down:last").hide();
}
showHide();
I want to get the id of <a> tag, with a specific class, which is a parent (somewhere above in the DOM tree) of a form when I submit the form
<div class="article">
<div class="titre">Mon premier article de blog</div>
<div class="resume" style="display: none; ">Ceci est le premier article de blog <a id="1" href="#">link</a></div>
<div class="content">Ceci est effectivement mon premier article de blog
<div class="nb_com">2 commentaires</div>
<div class="form">
<form method="post" action="">
<div class="form_text">
<textarea name="com" id="com" rows="4" cols="122">... </textarea>
</div>
pseudo : <input type="text" name="pseudo" id="pseudo">
mail : <input type="text" name="mail" id="mail">
<input type="button" value="Commenter" onclick="enregistre_com(this.form.com.value,this.form.pseudo.value,this.form.mail.value,this.parentNode.innerHTML">
</form>
</div>
</div>
<div class="comment">
</div>
</div>
When I click on the button, I want to retrieve the value of the id of <a> tag which is in the <div class="resume"> tag. The javascript or jquery expression will take place instead of this.parentNode.innerHTML (it was just test purpose)
Use .closest() to go up to the first shared container (.article) and then use .find() to find the <a> inside the .resume element..
$(this).closest('.article').find('.resume a')[0].id;
$('.form :button').click(function(){
var id = $('.resume a').attr('id'); //
// the variable id contains the content of the id attribute
});
You may want to change the selectors according to your other markup.
I'm not sure which element you're looking for specifically in your example, but you should look into using jQuery's .parents([selector]) method (see API page here)
$('form input[type=button]').click(function(){
var id = $(this).closest('.className').attr('id');
});
this will be the id your tag when the input button is clicked, even with multiple "resume" classes:
id = $(this).closest('.article').find('a').attr('id');
here is a working example:
http://jsfiddle.net/JMEPj/2/
Finally, it look like
<input type='button' value='Commenter' onClick='enregistre_com(this.form.com.value,this.form.pseudo.value,this.form.mail.value,$(this).closest(\".article\").find(\".resume a\").attr(\"id\"))' />
I was in trouble with the " and the ' because all this js form is encapsulated in php source