Develop Reference

when selecting one of the options to update the database

I have the following code to create a select dropdown:
.tooltip-demo {
position: relative;
}
.tooltip {
opacity: 0;
visibility: hidden;
transition-property: opacity, visibility;
transition-duration: .1s;
position: absolute;
top: -.75rem;
left: 50%;
transform: translate(-50%, -100%);
background-color: #333;
color: #eee;
padding: .25rem .75rem;
white-space: nowrap;
border-radius: 3.5px;
}
.most:hover ~ .tooltip,
.most:focus ~ .tooltip,
.most.active ~ .tooltip {
opacity: 1;
visibility: visible;
}
div.dropdown {
position: relative;
}
div.dropdown > div.caption {
padding: 11px 40px;
border-radius: 3px;
cursor: pointer;
}
div.dropdown > div.list {
position: absolute;
background-color: #ffffff;
width: 100%;
border-radius: 0 0 3px 3px;
display: none;
margin-top: 15px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}
div.dropdown > div.list > option.item {
padding: 11px 14px;
cursor: pointer;
}
div.dropdown > div.list > option.item.selected {
font-weight: bold;
}
div.dropdown > div.caption:hover,
div.dropdown > div.list > option.item:hover {
color: #29a4f6;
}
div.dropdown.open > div.caption {
border-radius: 3px 3px 0 0;
}
div.dropdown.open > div.list {
display: block;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon#1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<div class="tooltip-demo"><div class="most dropdown"><div class="caption"> <i class="pe-2x pe-va pe-7s-user"></i></div><div class="list">
<div id="resp" class="item">x</div>
<div id="resp1" class="item">xx</div>
<div id="resp2" class="item">xxx</div>
<div id="resp3" class="item">xxxx</div>
<div id="resp4" class="item">xxxxx</div>
<div id="resp5" class="item">xxxxxx</div>
<div id="resp6" class="item">xxxxxxx</div>
<div id="resp7" class="item">xxxxxxxx</div>
</div></div><button type="button" class="btn-wide btn btn-success tooltip" onclick="atribuirden();"> Atribuir Membro</button></div>
I intend that when choosing one of the options, I insert it into the database. I'll leave the js to send the data to the php:
function atribuirden()
{
var dadosajax = {
'Resp' : $("#Resp").val(),
'Resp1' : $("#Resp1").val(),
'Resp2' : $("#Resp2").val(),
'Resp3' : $("#Resp3").val(),
'Resp4' : $("#Resp4").val(),
'Resp5' : $("#Resp5").val(),
'Resp6' : $("#Resp6").val(),
'Resp7' : $("#Resp7").val()
};
$.ajax({
url: 'insglic.php',
type: 'POST',
cache: false,
data: dadosajax,
success: function(data){
}
});
}
But when selecting the desired option, it does not take the value for the variable to send to the php file.
The objective is when choosing one of the options to enter the value of that option in the table.

Solution to submit the value selected in the dropdown:
$("#single").select2({
placeholder: "Selecione o Responsável",
allowClear: true
});
$('#atrbbb').on('click', function() {
$('#atrbbb1').slideToggle('slow');
});
function atribuirden()
{
var dadosajax = {
'single' : $("#single").val()
};
console.log(dadosajax);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon#1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<label id="atrbbb"><i class="pe-2x pe-va pe-7s-user"></i></label>
<div id="atrbbb1" style="display:none;">
<form action="" method="post" enctype="multipart/form-data" name="atrbme" id="atrbme">
<select id="single" class="js-states form-control" style="width: 100%;">
<option></option>
<option value="Teste">Teste</option>
<option value="Teste1">Teste1</option>
<option value="Teste2">Teste2</option>
</select>
<button type="button" class="btn-wide btn btn-primary" onclick="atribuirden();" arial-label="Atribuir Membro" title="Atribuir Membro"> <i class="pe-2x pe-va pe-7s-check"></i></button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

How to change JQuery Datepicker Months and Years display to Dropdown?

I have just started working on a Calendar Project in JQuery where I can choose appointments in an event, and I would like to change the current years and months choosing menu from the current form to a dropdown choosing menu because I want to make it easier to switch between dates so that I can find the desired appointments.
example of what would I like to achieve:
My question is how could I change it?
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.popover
{
left: 5% !important;
top: 120% !important;
}
.btn
{
margin: 1%;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
.popover button{
background: #f48024;
}
.popover button:hover{
background:#fcb67c;
}
.popover button:focus{
background: #052049;
}
.popover button:focus:active{
background: #052049;
}
.arrow {
visibility: hidden;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
border: 1px solid #dad55e;
background: #fffa90;
color: #777620;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="./style.css" />
<script src="app.js"></script>
</head>
<body>
<div class=" col-md-4">
<div class="date-picker-2" placeholder="Recipient's username" id="ttry" aria-describedby="basic-addon2"></div>
<span class="" id="example-popover-2"></span> </div>
<div id="example-popover-2-content" class="hidden"> </div>
<div id="example-popover-2-title" class="hidden"> </div>
<script>
$('.date-picker-2').popover({
html : true,
content: function() {
return $("#example-popover-2-content").html();
},
title: function() {
return $("#example-popover-2-title").html();
}
});
$(".date-picker-2").datepicker({
minDate: new Date(),
onSelect: function(dateText) {
$('#example-popover-2-title').html('<b>Available Appointments</b>');
var html = '<button class="btn btn-success">8:00 am – 9:00 am</button><br><button class="btn btn-success">10:00 am – 12:00 pm</button><br><button class="btn btn-success">12:00 pm – 2:00 pm</button>';
$('#example-popover-2-content').html('Available times <strong>'+dateText+'</strong><br>'+html);
$('.date-picker-2').popover('show');
}
});
</script>
</body>
</html>

I added to the date picker the following lines:
changeMonth: true,
changeYear: true,
$(".date-picker-2").datepicker({
minDate: new Date(),
changeMonth: true,
changeYear: true,
onSelect: function(dateText) {
$('#example-popover-2-title').html('<b>Available Appointments</b>');
var html = '<button class="btn btn-success">8:00 am – 9:00 am</button><br><button class="btn btn-success">10:00 am – 12:00 pm</button><br><button class="btn btn-success">12:00 pm – 2:00 pm</button>';
$('#example-popover-2-content').html('Available times <strong>'+dateText+'</strong><br>'+html);
$('.date-picker-2').popover('show');
}
});

How to start editing contenteditable at clicked position

Report designer contains editable, resizable and draggable fields.
Clicking in field places cursor to start of field end editing start alway at beginning of field.
How to place cursor in field to clicked position so that editing start at clicked position ?
jquery, jquery ui, bootstarp, ASP.NET MVC4 are used.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
.panel-resizable {
min-height: 1px;
overflow: hidden;
margin: 0;
padding: 0;
}
.panel {
margin-bottom: 0;
}
.verticalline,
.horizontalline,
.rectangle {
font-size: 1pt;
border: 1px solid #000000;
}
.field {
border: 1px solid #000000;
white-space: pre;
overflow: hidden;
}
.captionfield {
white-space: pre;
overflow: hidden;
}
.field,
.captionfield {
font-family: "Times New Roman";
font-size: 10pt;
}
.verticalline {
border-left-style: none !important;
}
.horizontalline {
border-bottom-style: none !important;
}
</style>
<script>
$(function() {
$(".panel-resizable").resizable({
minWidth: "100%",
maxWidth: "100%",
minHeight: 1
});
$(".verticalline, .horizontalline, .rectangle, .field, .image, .captionfield").draggable();
$(".verticalline, .horizontalline, .rectangle, .field, .image").resizable();
});
</script>
</head>
<body>
<div class='panel'>
<div class='panel-body panel-resizable'>
<div class='field' contenteditable='true'>IR("Kreedit arvele nr. ")+iif( isnull(g_server),'',psql('select tasudok from dok x where dokumnr= ?dok.krdokumnr'))</div>
<div class='field' contenteditable='true'>IR("Kreedit arvele nr. ")+ iif( isnull(g_server), sql('sele tasudok from dok x where doktyyp+str(dokumnr,7)= "G"+str(dok.krdokumnr,7) ',''),psql('select tasudok from dok where dokumnr= ?dok.krdokumnr'))</div>
<div class='field' contenteditable='true'>vnimi+' '+dok.tasudok</div>
<div class='field' contenteditable='true'>DOK.kuupaev</div>
</div>
<div class='bg-warning'>
<div class='panel-footer'>GroupHeader 1: str(dokumnr)+str(koopia,2)</div>
</div>
</div>
</body>
</html>

ionic change progressBar bar color in javascript

The code below is not workING in my application
HTML:
<div class="progressBar">
<div class="progressBarIndicator">
</div>
</div>
CSS:
.progressBar{background-color: #fff; height:20px;}
.progressBarIndicator{background-color: #000; height:20px;}
JAVASCRIPT:
$('.progressBarIndicator').css({"background-color" : "red"});

First Check, whether jquery.min.js is present or not.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
If yes, change your script like this way.
<script>
$(document).ready(function(){
$('.progressBarIndicator').css("background-color","red");
});
</script>
$('.progressBarIndicator').css({"background-color" : "red"});
^ ^ ^
remove replace with comma Remove
For more info, check this Jquery CSS Method - W3 Schools & Background CSS Using Jquery - Web Developer Forum
My Updated Code. Do the needful changes if required.
<html>
<head></head>
<body>
<style>
.progressBar{
width: 100%;
height: 20px;
background: #fff;
border-radius: 2px;
border: 1px solid rgba(199, 197, 197, 1);
}
.progressBarIndicator{
height: 20px;
background: #019F45;
overflow: hidden;
border-radius: 2px;
}
</style>
<div class="progressBar">
<div class="progressBarIndicator">
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.progressBarIndicator').css("background", "red");
});
</script>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
HTML:
<div class="progressBar">
<div class="progressBarIndicator">
</div>
CSS:
.progressBar{
width: 100%;
height: 20px;
background: #fff;
border-radius: 2px;
border: 1px solid rgba(199, 197, 197, 1);
}
.progressBarIndicator{
height: 20px;
background: #019F45;
overflow: hidden;
border-radius: 2px;
}
JAVASCRIPT:
$(document).ready(function(){
$('.progressBarIndicator').css("background", "red");
});

jQuery: How can I hide a category from the Show All option?

I am using a layout on the blog website Tumblr. I'd like to remove the "Childhood Influences" category from the Show All feature. I've only managed to remove it from the front page, but I would like the Childhood Influences to only show up when you click on its tab. Here's the code:
<!--
CURRENTLY WATCHING #2
pistachi-o (nutty-themes # tumblr)
Theme Documentation:
http://nutty-themes.tumblr.com/themedoc
Please Do Not:
http://nutty-themes.tumblr.com/terms
-->
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="altertnate" type="application/rss+xml" href="{RSS}">
<meta name="description" content="" />
<meta http-equiv="x-dns-prefetch-control" content="off"/>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
<style type="text/css">
/* Reset ----------------------------- */
body,div,dl,dt,dd,ol,ul,li,pre,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}
/* Scrollbar ----------------------------- */
::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-track {background: #FFF;}
::-webkit-scrollbar-thumb {background: #DDD;}
/* General ----------------------------- */
body {
background: #f3f3f3;
font-size: 10px;
color: #000000;
font-family: 'Roboto Condensed', Arial, sans-serif;
line-height: 100%;
}
a:link, a:active, a:visited {
color: #130912;
text-decoration: none;
}
a:hover {
color: #f38335;
text-decoration: none;
}
b {
color: #f7941d;
text-decoration: none;
}
/* Isotope (DO NOT EDIT) ----------------------------- */
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope,
.isotope .isotope-item {
-webkit-hiatus-duration: 0.8s;
-moz-hiatus-duration: 0.8s;
hiatus-duration: 0.8s;
}
.isotope {
-webkit-hiatus-property: height, width;
-moz-hiatus-property: height, width;
hiatus-property: height, width;
}
.isotope .isotope-item {
-webkit-hiatus-property: -webkit-transform, opacity;
-moz-hiatus-property: -moz-transform, opacity;
hiatus-property: transform, opacity;
}
/* Navigation ----------------------------- */
#shows {
position: relative;
width: 100%;
height: 10px;
margin: 0px auto 10px;
background: blue;
padding: 15px 0px;
background: #fafafa;
text-align: center;
}
/* Contents ----------------------------- */
#container {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#containers {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#nextcontainer {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#nextcontainers {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
.stylewrap {
background: #edd456;
width: 200px;
height: 165px;
margin: 5px;
text-align: center;
text-transform: uppercase;
}
.hiatus {
background: #a0c1ba;
}
.complete {
background: #45c0ab;
}
.childhood {
background: #e3e3e3;
}
.next {
background: #c6c6c6;
}
.stylewrap img {
margin: 0;
width: 200px;
border-bottom: 2px solid #F3F3F3;
}
h2 {
margin: 10px 0px 3px;
line-height: 100%;
}
#filters {
text-transform: uppercase;
}
#filters li {
display: inline;
margin: 2px;
padding: 2px 5px;
}
#dash {
text-transform: uppercase;
margin: 25px;
}
#dash li {
display: inline;
margin: 2px;
padding: 2px 5px;
}
.stylewrap:hover .grey {
filter: none;
-webkit-filter: grayscale(0%);
}
</style>
</head>
<body>
<div id="shows">
<ul id="filters" class="show-set clearfix" data-option-key="filter">
<li style="background: #f5f5f5;">Show All</li>
<li style="background: #f5f5f5;">Currently Watching</li>
<li style="background: #f5f5f5;">On Hiatus</li>
<li style="background: #f5f5f5;">Completed</li>
<li style="background: #f5f5f5;">Next Up</li>
<li style="background: #f5f5f5;">Childhood Influences</a></li>
</ul>
<ul id="dash">
<li>Back Home</li>
<li>Dashboard</li>
<li>Theme Credits</li>
</ul>
</div>
<div id="container">
<!-- To add completed show copy and paste the following -->
<div class="stylewrap next">
<img class="grey" src="http://imgur.com/Bktk9mC.jpg">
<h2 class="name">6teen</h2>
Up Next
</div>
<!-- End of Complete Show -->
<div class="stylewrap current">
<img class="grey" src="http://imgur.com/IO7NGnK.jpg" />
<h2 class="name">18 to Life</h2>
Season 2 Episode 11
</div>
<div class="stylewrap childhood">
<img class="grey" src="http://imgur.com/NTMO0xq.jpg">
<h2 class="name">7th Heaven</h2>
(1996-2007)
</div>
<!-- To add completed show copy and paste the following -->
<div class="stylewrap complete">
<img class="grey" src="http://imgur.com/vPkxn7c.jpg">
<h2 class="name">About a Girl</h2>
(2007-2008)
</div>
<!-- End of Complete Show -->
<!-- To add hiatus show copy and paste the following -->
<div class="stylewrap hiatus">
<img class="grey" src="http://imgur.com/owiMXh5.jpg">
<h2 class="name">Awkward.</h2>
Returning September 23, 2014
</div>
<!-- End of Hiatus Show -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/whx9ghv/1eGm9d17y/isotope.js"></script>
<script type="text/javascript">
$(function(){
var $container = $('#container');
$container.isotope({
itemSelector : '.stylewrap',
filter: '.current, .hiatus, .next, .complete',
getSortData : {
name : function ( $elem ) {
return $elem.find('.name').text();
}
}
});
var $optionSets = $('#shows .show-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.show-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// otherwise, apply new options
$container.isotope( options );
filter: '.current, .hiatus, .next, .complete';
}
return false;
});
});
</script>
</body>
</html>
I believe the problem is in the jQuery, but I just can't figure it out. I've spent 2 days on this, but I'm not too advanced so I've just been searching everywhere I can for an answer.
edit: Sorry for being unclear. The problem is solved!

Well...not sure if this is the best way, but you could simply alter the data-option-value attribute for the Show All option to omit childhood from the selector. You HTML might then become:
<li style="background: #f5f5f5;">Show All</li>
Here's a JSFiddle to show you the code in action. Now clicking "Show All" will not reveal the item tagged with childhood. Hope this helps! Let me know if you have any questions.

Your question isn't very clear but I believe you're asking how to remove a certain element from your unordered list.
This line:
<li style="background: #f5f5f5;">Childhood Influences</a></li>
represents a list element with a text value of "Childhood Influences". Remove the line, and this list item will no longer show up.
Edit: I misread your question, give me a second and I will edit this answer again to address your entire question correctly