This code uses jQuery to "live" filter a li list:
<input id="filter_list" type="text" placeholder="Filter Playlist Tracks" />
Elsewhere on the page I have a list of images being called by a simple php/mySql query:
while($row = $result->fetch_assoc()) {
$img_url = $row['img_url'];
$img_name = $row['img_name'];
echo '<img src="'.$img_url.'"title="'.$img_name.'" onmouseoverHERE? />';
}
I need a JS mouseover in the image tag so that when I mouseover the image, the image NAME is dynamically placed in the INPUT filter_list text input element.
If possible, I need to input field to focus so that the list will be filtered using my existing jQuery. (NOTE: Currently it works fine if I manually enter text in the input field)
So I dont want it to simply popualte the text input -- it should both "populate" and "filter"
As a note, I dont care if we need an onClick or onMouseOver
Thank You - d
ACTUAL CODE
<!-- ***** SEARCH / FILTER INPUT ***** -->
<div style="border:0px solid #f00;margin:0px 0px 20px 0px;width:100%;padding:5px;">
<input type="text"
id='filter_playlist'
placeholder="Filter Playlist Tracks" />
</div>
echo '<table style="border:0px solid #f00">';
while($row = $result->fetch_assoc()) {
$album = $row['album'];
$album_pict = $row['source_poster'];
$count_row ++;
if($count_row == 1){
echo '<tr>';
}
echo '<td style="border:0px solid #f00;width:25%;padding:5px">
<img src="'.$album_pict.'" class="img-responsive"
data-toggle="tooltip"
data-container="body"
data-placement="bottom"
title="'.$album.'"
onmouseover="$(\'#filter_playlist\').value=\''.$album.'\';$(\'#filter_playlist\').focus();" />
</td>';
if($count_row == 4){
echo '</tr>';
$count_row = 0;
}
}
echo '</table>';
THIS IS THE JQ COD ETHAT HANDLES THE FILTERING
<!-- ----------------------------------- -->
<!-- ***** JS - FILTER PLAYLIST -->
<!-- ----------------------------------- -->
<script type='text/javascript'>
$(document).ready(function () {
(function ($) {
$('#filter_playlist').keyup(function () {
var rex = new RegExp($(this).val(), 'i');
$('.searchable li').hide();
$('.searchable li').filter(function () {
return rex.test($(this).text());
}).show();
})
}(jQuery));
});
</script>
OK IVE DISTILLED THIS DOWN TO THREE SIMPLE IMAGES USING STATIC CODE: CAN ANYONE HELP:
<html>
<head>
<!-- *JS* JQUERY ***** -->
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<!-- ***** SEARCH / FILTER INPUT ***** -->
<div style="border:1px solid #f00;width:33%;padding:5px">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
<li> Item 4</li>
<li> Item 5</li>
<li> Item 6</li>
</div>
<div style="border:1px solid #f00;width:33%;padding:5px;">
<input type="text"
id="filter_playlist"
style="font-size:48px;
width:100%"
placeholder="Filter Tracks"
onkeyup="doFilterPlaylist()" />
</div>
<div style="border:1px solid #f00;width:33%;padding:5px;float:left">
<img src="http://www.underconsideration.com/brandnew/archives/google_2015_logo_detail.png" style="width:100px" title="Item 1"
onclick="document.getElementById('filter_playlist').value='Item 1';document.getElementById('filter_playlist').focus();doFilterPlaylist();" />
<br />
<img src="http://www.underconsideration.com/brandnew/archives/google_2015_logo_detail.png" style="width:100px" title="Item 2"
onclick="document.getElementById('filter_playlist').value='Item 2';document.getElementById('filter_playlist').focus();doFilterPlaylist();" />
<br />
<img src="http://www.underconsideration.com/brandnew/archives/google_2015_logo_detail.png" style="width:100px" title="Item 3"
onclick="document.getElementById('filter_playlist').value='Item 3';document.getElementById('filter_playlist').focus();doFilterPlaylist();" />
</div>
<!-- ***** JS - FILTER PLAYLIST -->
<script type='text/javascript'>
function doFilterPlaylist() {
var ele = $('#filter_playlist');
var rex = new RegExp(ele.val(), 'i');
$('.searchable li').hide();
$('.searchable li').filter(function () {
return rex.test(ele.text());
}).show();
}
</script>
</body>
</html>
When a user clicks on the first logo, the name should be placed in the text input box (This works), but it should also filter the list at top to only the item that matched (or includes the characters).
Hopefully this will make it simpler, staying away from all of the dynamic code. It will have to be transferred to dynamic code so simple "invisibles" or "hiddens" will not work.... Thank You in advance.
See test here http://www.musicpax.com/test.html
Give the images a shared class.
echo '<img src="'.$img_url.'"title="'.$img_name.'" class="playlistFilterImage" />';
Then try something like the following.
jQuery(function($){
var $filterList = $('#filterList');
$('.playlistFilterImage').on('mouseenter', function(e){
$filterList.val(e.target.title);
});
});
<input id="filterList" type="text" placeholder="Filter Playlist Tracks" />
Outline
You need to handle the mouseover event, so that when the user mouses over the image, the Javascript is called. Since there is not much code involved in focusing an element and changing its' value, you can do this inline.
Example code
<img src="something.png" onmouseover="$('#filter_playlist').value='name';$('#filter_playlist').focus();">
<input type="text"
id='filter_playlist'
placeholder="Filter Playlist Tracks" />
Explanation
onmouseover calls Javascript when a mouse over event occurs;
$('#filter_playlist') selects the element with the id filter_playlist using JQuery;
Setting filter_playlist's value to name enters the text name into the input box
Calling the focus() function on filter_playlist focuses it, to allow the user to easily edit.
Comment
As a usability note, I would use onclick over onmouseover. This is because the user may be moving their mouse trying to change tabs / apps / etc, and not necessarily be trying to interact with your site. To make this change, you simply need to replace onmouseover with onclick - it's that simple!
Activate Live Filtering
I have tested this on your site and it works. Replace the doFilterPlaylist() function with this:
function doFilterPlaylist() {
var val = document.getElementById("filter_playlist").value.toLowerCase();
var elements = $("#playlist li");
for (i=0;i<elements.length;i++) {
var txt = elements[i].innerText.toLowerCase();
if (txt.slice(0,1)==" ") {
txt = txt.slice(1);
};
if (txt.indexOf(val)===0) {
elements[i].style.display = "block";
}
else {
elements[i].style.display = "none";
};
};
};
Related
I have a web page where I show a series of images brought from a database, these images when passing over shows you a "quick view" message (), clicking on this link shows you on the page a div with the largest image, I need when someone click on this link, in the div show me different images according to what I have clicked, this is my code
PHP/HTML CODE
if ($array->num_rows > 0) {
while($row = $array->fetch_assoc()) {
<div>
<?php echo '<img src="data:image/jpeg;base64,'.base64_encode( $row['picture'] ).'" />'; ?>
<a href="#" class="js-show-modal1">
Quick View
</a>
</div>
}
}
JS CODE
$('.js-show-modal1').on('click',function(e){
e.preventDefault();
$('.js-modal1').addClass('show-modal1');
});
CSS
.show-modal1 {
visibility: visible;
opacity: 1;
}
HTML
<div class="js-modal1">
<img src="images/someimage.jpg">
</div>
this is what i need , when i click here : Quick View
Here shows this :
<div class="js-modal1">
<img src="data:image/jpeg;base64,'.base64_encode( $row['picture'] ).'" />
</div>
Make a counter outside the loop that we will use for indexing and targeting the correct modal.
I stored the target modal in a data-property of the <a></a> tags in which I used data-target.
if ($array->num_rows > 0) {
// initialize counter
$index = 0;
while($row = $array->fetch_assoc()) {
// use the counter in the loop, modal-".$index."
echo "
<div>
<a href='#' class='js-show-modal' data-target='modal-".$index."'>
Quick View
</a>
<div id='modal-".$index."'>
<img src='data:image/jpeg;base64,".base64_encode($row['picture'])."' />
</div>
</div>";
// increment
$index++;
}
}
Then use this script below. We added an onclick event handler to .js-show-modal which will be all the <a></a> tags. We will then get data-target property as the selector. I used toggle for switching between hide() and show().
$(document).on('click','.js-show-modal',function(e){
e.preventDefault();
var target = '#'+$(this).data('target');
$(target).toggle();
});
The finished product is just supposed to have a checkbox next to each entry, and the option to edit or delete each item. I'm nowhere near that as I can't even get an item to post.
Here's are the files that I have: HTML, CSS, JS.
Also, I'm sorry for the formatting.I didn't paste the CSS as that's not an issue as far as I'm concerned.
HTML:
var list = document.getElementById('list'); //The unordered list.
var entry = document.createElement("li"); //Whatever this is. I'm assuming a command saved into a variable (?).
//var todolist = list.getElementsById('li');
// var btn = document.getElementById('ToDoButton');
//
// btn.addEventListener("click", function(){
// todolist.appendChild('li');
// });
/* Upon submission of the item in the text field, the string is stored in inputValue
and theText becomes a text node of inputValue, which is appended to the end of the variable
entry. This means that there should be a new item added to the unordered list with the information
found in the text field, but it doesn't show.
Also, as far as I know, this is only if the Add button is clicked, and not upon
pressing Enter while in the text box. */
function newElement() {
var inputValue = document.getElementById("textBox").value;
var theText = document.createTextNode(inputValue);
entry.appendChild(theText);
if (inputValue !== '') {
document.getElementById(list).appendChild(entry);
}
}
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<div class="toDoList">
<h4>To-Do List</h4>
<form target="_self">
<!-- This is so that the submitted information doesn't go anywhere but to the current page. -->
<input type="text" name="toDoList" placeholder="To-Do" id="textBox">
<input type="submit" value="Add" onclick="newElement()" id="ToDoButton">
<!-- newElement() is a JS function that will add the information in the search bar to the unordered list below. -->
</form>
</div>
<section id="main">
Tasks:
<ul id="list">
<!-- These are dummy values for the unordered list. The idea
is that the next item should be placed beneath them. -->
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</section>
<script type="text/javascript" src="todo.js">
</script>
</body>
</html>
This is a short example of how to dynamically add elements on the page. User types in a to do item, then clicks the button. When they click the button, we get the value from the input box, create a new list item element, and then append it to the dom.
function addItem() {
var el = document.createElement('li')
var val = document.getElementById('item-val').value;
el.innerHTML = val;
document.getElementById('list').append(el);
}
<input id="item-val" type="text" />
<button onclick="addItem()">Add an item</button>
<ul id="list"></ul>
A few problems:
1) When you click the button, it submits the form. This causes your page to refresh, so any and all changes made by the JavaScript are lost, because you re-load the page from the server. Changing it to <button type="button" means it doesn't cause a postback any more. To be honest you probably don't actually need <form> here at all if you aren't going to send the data to the server.
2) Better to put your list and entry variables inside the function - globals are best avoided if you can, to reduce accidental scope issues. Also you need to create a new entry each time, not keep appending the same one.
3) document.getElementById(list).appendChild(entry) doesn't work because list is already an object representing an element - it's not a string containing an ID. so list.appendChild() is correct here - i.e. you can just call the appendChild() function on the existing object directly.
4) Optionally, you don't really need the separate textNode object - just set the innerText property of the list item instead.
5) Optionally again, but considered best practice: I declared an unobtrusive event handler (using addEventListener) rather than putting it inline inside the HTML. This is generally considered to make the code more maintainable and traceable, as all the script is held in one place, separate from the HTML.
Here's a fixed version:
document.querySelector("#ToDoButton").addEventListener("click", newElement);
/* Upon submission of the item in the text field, the string is stored in inputValue
and theText becomes a text node of inputValue, which is appended to the end of the variable
entry.*/
function newElement() {
var list = document.getElementById('list'); //The unordered list.
var entry = document.createElement("li"); //a new list item
var inputValue = document.getElementById("textBox").value;
if (inputValue !== '') {
entry.innerText = inputValue;
list.appendChild(entry);
}
}
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<div class="toDoList">
<h4>To-Do List</h4>
<form target="_self">
<input type="text" name="toDoList" placeholder="To-Do" id="textBox">
<button type="button" id="ToDoButton">Add</button>
</form>
</div>
<section id="main">
Tasks:
<ul id="list">
<!-- These are dummy values for the unordered list. The idea
is that the next item should be placed beneath them. -->
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</section>
<script type="text/javascript" src="todo.js">
</script>
</body>
</html>
Your main issue is that you were using and <input type="submit"> when you were expecting the behavior of <input type="button"> with a click event listener:
document.querySelector('#ToDoButton').addEventListener('click', newElement);
function newElement() {
var inputValue = document.getElementById("textBox").value;
var theText = document.createTextNode(inputValue);
var liEl = document.createElement('li');
liEl.appendChild(theText);
if (inputValue !== '') {
document.getElementById('list').appendChild(liEl);
}
}
<head>
<title>To-Do List</title>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<div class="toDoList">
<h4>To-Do List</h4>
<input type="text" name="toDoList" placeholder="To-Do" id="textBox">
<!--The input type needs to be "button, not "submit"-->
<input type="button" value="Add" id="ToDoButton">
</div>
<section id="main">
Tasks:
<ul id="list">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</section>
<script type="text/javascript" src="todo.js">
</script>
</body>
How to change the image on the div when input image is clicked.
I tried this but nothing is working .. ?
control is not even entering the the if/else portion of each() loop.
My div is having a ID do i need ID for each image inside every div to change the image or ID of DIV is more than enough to change the image inside the div ?
javascript & Jquery code :--
var div_class_scrollable_Image = [
"Groung-Floor-Image" , "Floor-1-Image", "Floor-2-Image", "Floor-3-Image"
];
function show_area( parameter_image_array, parameter_image)
{
// set img src
// $("." + parameter_image_array[2]).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
//$('.Floor-3 img').attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
$(parameter_image_array).each(function(index, element) {
if(element != parameter_image )
{
$(element).attr('src', 'http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png');
}
else
{
$(element).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
}
//alert("hellooooo");
});
}
Html code :---
<div id="images" class="scrollable">
<div id="Groung-Floor" class="input">
<input id="Groung-Floor-Image" type="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ" onclick="show_area( 'div_class_scrollable_Image', 'Groung-Floor-Image' )" />
<p >Groung-Floor</p>
<hr>
</div>
<div id="Floor-1" class="input">
<input id="Floor-1-Image" type="image" src="http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png" onclick="show_area('div_class_scrollable_Image', 'Floor-1-Image')" />
<p >1-Floor</p>
<hr>
</div>
<div id="Floor-2" class="input">
<input id="Floor-2-Image" type="image" src="http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png" onclick="show_area( 'div_class_scrollable_Image', 'Floor-2-Image')" />
<p >2-Floor</p>
<hr>
</div>
<div id="Floor-3" class="input">
<input id="Floor-3-Image" type="image" src="http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png" onclick="show_area( 'div_class_scrollable_Image', 'Floor-2-Image', )" />
<p >3-Floor</p>
<hr>
</div>
</div>
Please suggest
You also may use background-image:url("/path/image") for Div and later change it like document.getElementById(DivId).style.backgroundImage = "/path/new_image"
See to http://www.w3schools.com/css/css_background.asp
I'm sorry but your code is almost unreadable and... ugly ;-) I'll give you this code as an hint to improve yours:
HTML
<div>
<input type="image" src="foo.jpg" data-alt-src="bar.jpg" class="swap" />
</div>
JavaScript
$(".swap").click(function () {
$(".swap").each(function () {
var alt = $(this).data("alt-src");
$(this).attr("src", alt);
});
//do other work if needed...
});
As you can see I use the data- attribute to set an alternate image directly in the HTML tag, then I read it on click event and I replace the current src with the alternate image.
Thanks batu Zet or correcting array issue.
this link answered my question ...
Programmatically change the src of an img tag
This worked :--
$(parameter_image_array[2]).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
This also worked :---
$(parameter_image_array).each(function(index, element) {
if(element != parameter_image )
{
$("#" +element).attr('src', 'http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png');
}
else
{
$("#" + element).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
}
});
I'm working on a project which would require the user to be able to add, and edit tags.
On the page, is: a div container, containing the tags, a textbox (newTag) and a button (add tag) that will add a tag to the container. Another textbox (editTag) and a button (update tag) that will update the tag information typed in by the user. There is also a select list that will, in realtime - keep track of all the changes made.
Wen a user clicks on a tag that was already rendered, to edit it - all works well. The tag name goes into the edit textbox, and the tag is selected in the list.
The problem arises when a user created tag gets clicked... nothing happens. I have a feeling it has to do with the fact the object is in the DOM, but isn't rendered HTML. But I have no clue as to how to resolve this issue - how to reference a click of a dom object.
Here's my code:
HTML:
<!-- tags container -->
<div class="container_12">
<div class="grid_2"><img src="images/spacer.png" /></div>
<div id="content" class="grid_8">
<button name="PHP" class="tag-button">PHP</button>
<button name="CSS" class="tag-button">CSS</button>
</div>
<div class="grid_2"><img src="images/spacer.png" /></div>
</div>
<!-- tags container end -->
<!-- action buttons container -->
<div class="container_12 action-bar">
<div class="grid_4"><img src="images/spacer.png" /></div>
<div id="action-add">
<input type="text" name="newTag" id="newTag" />
<input type="button" id="add" value="Add tag" />
</div>
<div class="grid_4"><img src="images/spacer.png" /></div>
<div id="action-edit">
<input type="text" name="editTag" id="editTag" />
<input type="button" id="update" value="Update tag" />
</div>
<!-- action buttons container end -->
</div>
<!-- Real Time list container -->
<div class="container_12">
<div class="grid_4"><img src="images/spacer.png" /></div>
<select id="insertString">
<option value="0">PHP</option>
<option value="1">CSS</option>
</select>
</div>
<!-- real time list container end -->
jQuery:
//button add click
$('#add').click(function() {
//creating a new tag for the tag bar
var tag = $('#newTag').val();
var tagHTML=$('<button name= "' + tag + '" class="tag-button">'+ tag + '</button>');
var qString = "";
// adding the tag to the bar
$("#content").append(tagHTML);
//get last value in the list
var lastValue = $('#insertString option:last-child').val();
if (! lastValue) {lastValue = 0;}
else {lastValue = ++ lastValue; }
//add new option for the new tag
$('<option value="' + lastValue + '">' + tag + '</option>').appendTo("#insertString")
})
//tag button click
$(".tag-button").click(function(){
var name = $(this).attr('name');
//add the tag name to the editTag textbox
$('#editTag').val(name);
$('#insertString option:contains("'+ name + '")').attr('selected', true);
});
Also, here's my fiddle:
http://jsfiddle.net/Lm3ab/
Help would be appreciate, and thank you for your time.
You need to use Event Delegation. You have to use .on() using delegated-events approach.
Use
$("#content").on("click", ".tag-button", function() {
DEMO
just add another click, thus
$("#content").on("click", ".tag-button", function(){});
http://jsfiddle.net/Lm3ab/1/
Event delegation, since these tags weren't on the page at the time of the click events being binded, they have no listeners. Bind the click event to the container and target the elements:
$("#content").on("click", ".tag-button", function() {
I work on the simple ToDo list written on jQuery (and JS, of course).
I already created the static ToDo list with a possibility to add new items only by editing the code. It is logically that I am going to create a dynamic list now.
I've already tried some methods, like .load() code from external file, create .after(), but it all goes wrong for me.
What would you suggest me to do?
You may find all the source codes in strasbourgmeetings.org/ccc
I would be very grateful if you could help me solving this question.
Gloserio, yes, Add Item does not work now, because I of the problem I described.
ncubica, the problem is that at the moment I am not able to add new items to my list (only bu editing the code). Dynamic means that it would be possible to add/delete items. To do that I tried to use .after() method with the function inside it, that will copy the <li id="item1">List item here</li><li id="buttons1">Buttons here</li> (roughly speaking), but it puts all list items on the upper side and all buttons to the bottom.
This is a part of the JS code:
<script>
// Waiting for the document to load
$(document).ready(function() {
// Wanted to create a dynamic item list, that's why I used this variable. I thought it would
// generate unique IDs (there was 'id++' somewhere in the function I already deleted).
var id = 1;
// This is going to be used as an action for 'Add Item' button. (It is not a button, actually, it is just <span> with cursor: pointer. Using <a> causes page reload);
$('.add').click(function() {
$('#item'+id).after(function(i) { // '#item'+id should be something like this in the code: #item2, #item3, etc.
})
})
// 'Done' button
$('#done1').click(function() {
console.log('# "Done" button pressed');
$('#list1').css('background-color','#89f49a').css('border','1px solid #16bf31').css('text-decoration','line-through').css('color','#817f7f').css('font-weight','normal');
console.log('# Item doned successfully');
});
// 'Undone' button (is gonna be renamed to 'Reset');
$('#undone1').click(function() {
console.log('# "Undone" button pressed');
$('#list1').css('background-color','').css('border','').css('text-decoration','').css('color','').css('font-weight','normal');
});
// 'Working' button
$('#working1').click(function() {
$('#list1').css('background-color','#edc951').css('border','1px solid #dda119').css('font-weight','bold').css('color','#000').css('text-decoration','none');
});
// 'Cancel' button
$('#cancel1').click(function() {
$('#list1').css('background-color','#ff8c8c').css('border','1px solid #ea2c2c').css('font-weight','normal').css('text-decoration','line-through').css('color','#f00');
});
// 'Delete' button
$('#del1').click(function() {
$('div#dlist1').remove();
$('li#action1').remove();
});
});
</script>
And HTML part:
<div class="list">
<ul id="sortable">
<div class="list-item" id="item1"><div class="spacer1" id="spacer1"></div>
<div class="l-element" id="dlist1"><li id="list1" class="ui-widget ui-state-default">Create add feature</div>
<li id="action1" class="action"><input type="button" value="Done" class="done" id="done1"><input type="button" value="Undone" class="undone" id="undone1"><input type="button" value="Working" class="working" id="working1"><input type="button" value="Cancel" class="cancel" id="cancel1"><span id="del1" class="delete">Delete</span></li>
<div class="spacer"></div></div>
</ul>
<div>
As you can see, there is only 1 list item I wrote. IDs are static and can not be changed at the moment. All I need is to change IDs (ok, it will be var id = 1; id++) and to add the part of the code (inside <div class="list-item")
why don't you try jQuery's .clone() and attach it to the "Add Item" behaviour?
You can check it here.
I personally made one as well, and it works really simply, a checkbox, the text, followed by a delete button.
Works great, though I'm still working on a way to make it save it after you close the browser.
jQuery code:
function addListItem() {
var textToAdd = $('#new-text').val(); // The finish class is just for css styling
$('#list').append('<li class="item"><input type="checkbox" class="finish" />' + textToAdd + '<button class="delete">Delete</button></li>');
$('#new-text').val('');
}
function deleteItem() {
$(this).parent().remove();
}
$(document).ready(function() {
$('#add').on('click', addListItem);
$(document).on('click', '.delete', deleteItem);
});
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>To Do List</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h2>To Do List</h2>
<p>Project started on <strong>4-1-2015</strong>.</p>
<input type="text" id="new-text" /><button id="add">Add</button>
<ul id="list">
</ul>
<script src="jquery.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
Hope this helped :)