How do I get a dropdown choice to show up on the left of an entry on this To-Do list?
Tags: javascript,jquery,html,css
Problem :
thank you for looking. Here is the codepen: http://codepen.io/mlynn/pen/WbLEeR
I'm trying to allow the user to select a number from the dropdown list, and type in a word in the "To Do" input box, and when they hit enter, they will see an entry with their "To-Do" text in the middle and the # they chose on the left of the entry.
How can this be achieved? I'm not very good at Javascript and have mostly been tinkering with premade codepens, desperately trying to put pieces together.
HTML:
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="css/styletime.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/init.js"></script>
</head>
<body>
<section id="heady">
<div style="text-align: left;padding:25px 70px;display:inline-block;float:left;"><b><a href="index.html">Site</b></a></p></div>
<div style="text-align: right;padding:25px 70px;display:inline-block;float:right;">
<a href="index.html">Home</a> |
<a href="index.html">Generic</a> |
<a href="index.html">Elements</a> |
<a href="index.html">Sign Up</a>
</div>
</section>
<section id="wrapper">
<br><br>
<img src="images/blacksquare.png" width="525" height="197"></img>
<br><br><br>
<div>
<div style="vertical-align:top;display:inline-block;float:left;">
<ul class="navbar cf">
<!-- <li><a href="#">item 2</a></li> -->
<li style="width:200px;">
<a href="#" class="ActiveListItem">#</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</ul>
</li>
</ul>
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" id="todo" placeholder="Enter a To-do and hit enter">
</form>
<br>
<!-- <ul class="active">
<li>Work <a href="">X</a></li>
<li>Sleep <a href="">X</a></li>
<li>Repeat <a href="">X</a></li>
</ul> -->
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<ul class="active">
<li>Work <a href="">X</a></li>
<li>Sleep <a href="">X</a></li>
<li>Repeat <a href="">X</a></li>
</ul>
</div>
</div>
</section>
<section id="feety">
I believe I exist
</section>
</body>
</html>
CSS:
/*adder*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
* {
padding:0;
margin:0;
}
html {
background:teal;
}
body {
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #D9D9D9;
text-decoration: none;
}
a:active, a:hover {
text-decoration: underline;
}
#heady {
text-align: center;
width:100%;
height:75px;
background-color:#222; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:relative;
}
#wrapper {
text-align: center;
width:1000px;
height:1000px;
margin-left:auto;
margin-right:auto;
background-color:teal; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
position:relative;
}
#feety {
text-align: center;
width:100%;
height:100px;
background-color:darkslateblue; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:relative;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
background:white;
border-style:solid;
border-color:gray;
border-width:1px;
width: 200px;
border-radius: 4px;
}
.ActiveListItem:after {
content: "\25BC\00a0\00a0"; /*carat and spaces*/
float:right;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:20px; /*keeps carat in center of text*/
}
ul.navbar li a.ActiveListItem {
background:white !important;
color:black;
border-style:solid;
border-color:white;
border-radius:4px;
padding:3px 5px !important;
font-weight:normal !important;
margin-left:14px;/* got the activeitem centered with the list text this way*/
margin-right:0px;
}
ul.navbar li {
position: relative;
}
ul.navbar li a {
display: block;
color: white;
padding:10px 5px;
text-decoration:none;
transition: all .2s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
background:#a6d0e1; /*Leaving for now, but keep in mind things bold slowly when you change this to gradient*/
color: #333;
font-weight:900;
}
ul.navbar li ul {
margin-top: 1px;
position: absolute;
background: #222;
font-size: 14px;
min-width: 200px;
display: none;
z-index: 99;
box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
0 5px 10px rgba(0,0,0,.6);
}
ol, ul { list-style: outside none none; }
.hidden { display: none; }
/*Lister*/
.container {
width: 60%;
margin: 0px auto;
}
form { }
input,
ul {
background: #eee;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
font-family:"Tahoma";
}
input {
padding: 10px 10px 10px 20px;
border: 1px solid #ccc;
}
.lister ul {
list-style: square inside;
padding: 10px;
}
.active { border: 1px solid #ccc; }
.inactive { display: none; }
.lister li {
padding: 10px;
font-weight: 600;
color: #34495e;
}
.lister li:nth-child(odd) {
background: #dadfe1;
border-radius: 5px;
}
.lister li > a {
float: right;
text-decoration: none;
color: #22313f;
font-weight: bold;
transition: all .2s ease-in-out;
}
.lister li > a:hover {
font-size: 110%;
color: #c0392b;
}
.lister li:before {
content: "#"; /*carat and spaces*/
float:left;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:20px; /*keeps carat in center of text*/
}
JS:
// sub menus identification
$(function() {
$('.navbar ul li a').click(function(){
$('.navbar > li:first-child > a').text($(this).text());
$('.navbar > li > ul').addClass('hidden');
$('.navbar li ul').slideToggle(100);
});
$('.navbar > li').mouseenter(function(){
$(this).find('ul').removeClass('hidden');
});
$('.ActiveListItem').click(function(){
$('.navbar li ul').slideToggle(300);
});
});
//newList
$(document).ready(function() {
var ul = $('.lister ul'),
input = $('input');
input.focus();
$('form').submit(function () {
if (input.val() !== '') {
var inputVal = input.val();
ul.append('<li>' + inputVal + '<a href="">X</a></li>');
if (ul.hasClass('inactive')) {
ul.removeClass('inactive')
.addClass('active');
}
};
input.val('');
return false;
});
ul.on('click', 'a', function (e) {
e.preventDefault();
$(this).parent().remove();
if (ul.children().length == 0) {
ul.removeClass('active')
.addClass('inactive');
input.focus();
}
});
});
Thank you.
Solution :
I have updated a part of your code in the form submit event handler:
$('form').submit(function () {
if (input.val() !== '') {
var inputVal = input.val(),
activeNumber = $('.ActiveListItem').text(); // gets the selected number
// adds the selected number on before the inputValue:
ul.append('<li>' + activeNumber + ' ' +inputVal + '<a href="">X</a></li>');
if (ul.hasClass('inactive')) {
ul.removeClass('inactive')
.addClass('active');
}
};
input.val('');
return false;
});
I have placed your sample here: FIDDLE
CSS Howto..
Thanks all for your valuable inputs. I was able to get the solution by using the following CSS. .mandatory { background: #FFFFFF url(http://www.freecakefreecake.com/blog/wp-content/themes/Aggregate/epanel/shortcodes/images/list-dot.png) no-repeat 4px 4px; background-position: left; } .mandatory.datepicker...
You are only setting the font for the chart title. The below code sets the font globally for the pie chart. Highcharts.setOptions({ chart: { style: { fontFamily: 'Helvetica' } }...
If you don't want to edit the default browser margin of the body, try this: div#footer-case { border-top:solid black 1px; width:103%; margin-left:-10px; } Tested with FF 8, Chrome 16, and...
Demo : https://jsfiddle.net/IA7medd/qncrsq8d/ .images{ position:relative; overflow:hidden; } .img1, .img3 { float: left; max-width:49%; } .img2, .img4 { float: right; max-width:49%; } .images img{ max-width:100%; } .images img:hover{ position:absolute; top:0; left:0;...
I found out what was happening - there was an extra div being created (parent of the canvas elements) with a class of 'canvas-container'. The position property was being overwritten....
You are looking for the :not pseudo-class. The negation CSS pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is...
This is the jquery I have used $('#a').hover(function(){ $('#a').css('background','#ccc'); $('#b').css('background','#ccc'); }, function(){ $('#a').css('background','#fff'); // Background of #a by default $('#b').css('background','#fff'); // Background of #b by default }) $('#b').hover(function(){...
Remove the position: relative; properties or add it to the container as well. Then actually use float: right; on div1 and div3 and remove the right/left properties: .container { width:...
The Code: <!DOCTYPE html> <html> <head> <title>Testing</title> <style type="text/css"> #nav { float: left; } #content { overflow: hidden; } </style> </head> <body> <div id="nav"> <ul> <li>Navigation Item 1</li> <li>Navigation Item...
DEMO You can use css3 transform: translateY(-100%) and transition: transform .3s ease and use Jquery to addCLass or toggleClass active $( ".sn" ).click(function() { $(".persside").addClass("active"); }); div.persside { background-color: rgba(38,38,38,0.9);...
list-style-image should be applied to the <li> not the <ul> Like this: .checklist li{ list-style-image: url('http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg') !important; } ...
the main function that can help you do hardware accelerated animations using HTML5/css/javascript is the -webkit-transform: translate3d css rule that translates the slides’ horizontal (x) position to the left or...
Try like $('#myDiv').css('display','none'); There is an difference between hide and display:none. If you choose hide then the selected element will be hidden immediately, with no animation. This is roughly equivalent...
You can make your directive's scope inherit from where it is used by setting scope:true in your directive. Then update a property on the parent scope or rootScope inside your...
Remove the = between .touchbutton and the {. Also, based on how you have the positioning set up they're going to be stacked on top of one another (unless you're...
Setting CSS pseudo-class rules from JavaScript seems to suggest that you can't and offers a workaround by appending a stylesheet to the document. I'm unsure if it'd work on iOS...
Add p {margin: 0;} to your CSS, that removes the gaps/offset of the text. http://jsfiddle.net/acz3hhsL/2/...
After finding the issue in the comments (on the question) I'll add it also as an answer, so anybody could easily find it. Safari (and Chrome) for Mac/ iOS seem...
#vk_like { display: inline-block; } ?
you defined a z-index for your main ul but it seems to be in static position (so z-index has no effect) : try with ul#secondary-nav { z-index: 9999; position: relative;...
You can try to add the following code into your stylesheet. .navbar .dropdown-submenu > .dropdown-menu li { display: inline-block; } ...
If you must do this with JQuery (not recommended). You need to modify the style attribute like so; $('div').attr('height', '50px !important'); The .css function will not add !important properties....
Superscripts and subscripts usually protrude above and below the line boundaries, as illustrated in this demo — you see that the left example has more apparent space between the lines...
You need to do both (make the #featured_body with a smaller height), and adjust the margin on the #sidebar Ive tested the following this works for me in FF5: //...
You can use .attr var dataDate = $(".daterange").attr("data-start-date"); alert(dataDate) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="daterange daterange-inline pull-right" data-format="YYYY-MM-DD" data-start-date="2014-12-23"...
You must apply display:inline to those elements which you want to be displayed inline, not their container. In your case, it should be inline-block, because it should be inline element...
Having worked on this for a while (long before posting this question), I'll post my own administrative workaround, if not a total solution: Enforce in your styleguide that naked element...
In CSS use "height" property not "max-height". The plugin will work. Example code at CODEPEN I hope it helps you....
If they're next to each other (as you've shown them), then you can use the adjacent (+) selector: .one:hover+.two { ... } If they're a bit further away, but still...
If you only need height support, cut it into 3 pieces: upper, middle, and bottom. Set the background to the middle part with repeat for y, and place the upper...