Develop Reference

What am I doing wrong with positioning this inline element?

I'm using a jQuery plugin datepicker to show an inline calendar element inside of a column, but the calendar is being placed at the top left of the page, and I'm not sure exactly what I'm doing wrong.
I've attached a picture of what I see on my screen. The red boxes are the two columns I'm working with, and I'm trying to get the date picker underneath the input field in the first column.
var datepickerContainer = $('.datepicker-container');
$('.datepicker-input').datepicker({
autoPick: true,
inline: true,
container: datepickerContainer,
});
.datepicker-container {
border: 1px dashed #eee;
margin: 10px auto;
min-height: 160px;
position: relative;
display: block;
}
.control-module {
margin-top: 35px;
}
.activity-feed {
padding: 15px;
list-style: none;
}
.feed-module {
margin-top: 35px;
float: right;
border: 1px solid red;
}
.feed-positioning {
padding: 0 0 0 0!important;
}
/* Date headers */
.date {
width: 190px;
position: relative;
top: -5px;
color: #8c96a3c0;
font-size: 13px;
border-radius: 6px;
}
/* Messages */
.css-message {
font-size: 15px;
}
.activity-feed>.css-message {
position: relative;
margin-left: 20px;
padding-bottom: 20px;
padding-left: 40px;
border-left: 2px solid #e4e8ebf6;
}
.css-message:last-child {
border-color: transparent;
}
.css-message::after {
content: "";
display: block;
position: absolute;
top: 0;
left: -6px;
width: 10px;
height: 10px;
border-radius: 6px;
background: #fff;
border: 1px solid #f37167;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.js"></script>
<div class="row d-flex myclass justify-content-around">
<div class="p-2 control-module myclass">
<div class="input-group">
<input class="datepicker-input">
</div>
<div class="datepicker-container"></div>
<nav class="nav flex-column"></nav>
</div>
<div class="d-flex feed-module p-2">
<ol class="list-of-days">
<li class="list-group-item list-group-item-info date">
<h4>Date
<h4>
</li>
<ol class="activity-feed">
<li class="feed-item css-message">message</li>
</ol>
</ol>
</div>
</div>

It seems that the datepicker you are trying to use is bringing it's own css to the party and placing it on the container you chose:
.datepicker-container {
background-color: #fff;
direction: ltr;
font-size: 12px;
left: 0;
line-height: 30px;
position: fixed;
top: 0;
-ms-touch-action: none;
touch-action: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 210px;
z-index: -1;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
Including some positioning properties.
The issue is that its css is loaded after your own, so it takes priority.
The good thing is that you have a few ways to fix it, you can either manage to load it before your own css, you can make a better selector for you own css to get priority back, or you can use the !important keyword to overwrite any properties you want.
Maybe look into the datepicker documentation as well to see if there's an option to disable that.

Add old value as "ghost" thumb to <input type="range"> Slider

I've styled a regular range slider using an example from w3schools. My goal is to send out a new value command to an external MQTT-based smarthome thing and show the old value as some kind of ghost-thumb first:
After the smarthome system confirms the new value, the bubble will be removed - but that's not my problem at this point. I would like to place the ghost between the background of the slider and the real-value-thumb, currently it looks like this:
Here you can see the result on JSFiddle, here's the code:
$('#slider_1').data('last-mqtt-value', 0.5);
$('#slider_1').on('input', function() {
// Show ghost slider
$('#slider_1_companion').css('left', 'calc('+ $(this).data('last-mqtt-value') / $(this).attr('max') +'* (100% - 20px))');
$('#slider_1_companion').css('display', 'block');
});
$('#slider_1').on('change', function() {
console.log( $(this).data('last-mqtt-value'), $(this).val() );
// Simulate new input value incoming
///*
setTimeout(() => {
$(this).data('last-mqtt-value', $(this).val());
$('#slider_1_companion').css('display', 'none');
},5000);
// */
});
.slider {
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #ccc;
outline: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #6c757d;
cursor: pointer;
z-index: 5;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #6c757d;
cursor: pointer;
z-index: 5;
}
/*https://stackoverflow.com/a/46318225/1997890*/
.slider_wrapper {
position: relative;
width: 150px;
}
.slider_companion {
background-color: #ccc;
border-radius: 50%;
width: 20px;
height: 20px;
position: absolute;
top: calc(100% - 19px); /* for some reason this is not 20px (height of thumb) */
/* left: calc( PERCENTAGE * (100% - 20px)); /* add this line dynamically via jQuery */
display: none;
pointer-events: none; /*click-through*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider_1_wrapper" class="slider_wrapper">
<div id="slider_1_companion" class="slider_companion"></div>
<input type="range" id="slider_1" class="slider" min="0" max="1.0" step="any">
</div>

I would consider a box-shadow for the slider that you can adjust with CSS variable and no need for extra element and you will have the expected result.
Here is an idea:
$('#slider_1').data('last-mqtt-value', 0.5);
$('#slider_1').on('input', function() {
document.getElementById('slider_1_wrapper').style.setProperty("--c",
($(this).data('last-mqtt-value') - $(this).val() )*130 + 'px');
/*130 = 150 - 20 = width of wrapper - width of thumb*/
});
$('#slider_1').on('change', function() {
console.log( $(this).data('last-mqtt-value'), $(this).val() );
// Simulate new input value incoming
///*
setTimeout(() => {
$(this).data('last-mqtt-value', $(this).val());
document.getElementById('slider_1_wrapper').style.setProperty("--c",0);
},5000);
// */
});
.slider {
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #ccc;
outline: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #6c757d;
cursor: pointer;
z-index: 5;
box-shadow:var(--c,0) 0 0 red;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #6c757d;
cursor: pointer;
z-index: 5;
box-shadow:var(--c,0) 0 0 red;
}
.slider_wrapper {
width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider_1_wrapper" class="slider_wrapper">
<input type="range" id="slider_1" class="slider" min="0" max="1.0" step="any">
</div>

Possibly better way to code this hacky toggle button?

I have a toggle button that has been coded up, but I dont think its good to use in my form, since its a pretty bad hacky code to select either option.
Is there a better/efficient way to code this toggle button instead? I am not good with jQuery, so any help with provided functionality would be helpful.
If there is also a way of programming it to slide the toggle left/right instead of clicking left/right would be great also.
I have also attached these images to show the behaviour of how it should function:
toggle behaviour diagram
current html file(below) button look for left/right toggle buttons
Any questions, please ask...
<html>
<head>
<style>
#toggle-slide {
border: 4px #303F9F solid;
border-radius: 5px;
display: flex;
width:300px;
color: white;
font-weight: 700;
text-align: center;
cursor: pointer;
}
#toggle-slide div {
flex:1;
padding: 10px 20px;
}
#toggle-option-0 {
background-color:#3F51B5;
}
#toggle-option-1 {
background-color:white;
}
</style>
<script>
function toggle() {
realToggle = document.getElementById('real-toggle');
if (realToggle.value == 0) {
realToggle.value=1;
document.getElementById('toggle-option-0').style.backgroundColor='#3F51B5';
document.getElementById('toggle-option-1').style.backgroundColor='#FFF';
} else {
realToggle.value=0;
document.getElementById('toggle-option-0').style.backgroundColor='#FFF';
document.getElementById('toggle-option-1').style.backgroundColor='#3F51B5';
}
}
</script>
</head>
<body>
<div id='toggle-slide' onclick='toggle()'>
<div id='toggle-option-0' class='active'>Private</div>
<div id='toggle-option-1'>Public</div>
<input id='real-toggle' type=hidden name=private value=1 />
</div>
</body>
</html>

A pure CSS version:
On the following snippet there's a hidden checkbox that becomes checked/unchecked when the content in label is clicked. Using the CSS :checked selector, the #background position is changed from 0% to 50% and it's color changes from red to blue.
The background is separated from the text and set with position:absolute (to be easily moved) plus z-index:-1 (which brings it to behind the subtitles). A CSS transition added on the #background animates the changes on it's position/color.
.toggle-slide {
border: 4px #555 solid;
border-radius: 5px;
display: flex;
width: 300px;
color: white;
font-weight: 700;
text-align: center;
cursor: pointer;
position: relative;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;
}
.toggle-slide .subtitle {
flex: 1;
padding: 10px 20px;
}
#background {
width: 50%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
background-color: tomato;
-webkit-transition: all 0.6s; /* Safari */
transition: all 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.2,1);
transition-timing-function: cubic-bezier(0.2,1,0.2,1);
}
input[type=checkbox] {
display: none;
}
#real:checked ~ label #background {
background-color: skyblue;
left: 50%;
}
<input id=real type=checkbox name=real />
<label class=toggle-slide for=real>
<div id=background></div>
<div class=subtitle>Private</div>
<div class=subtitle>Public</div>
</label>

You can do this completely in pure css, but since you were asking for jQuery...
$(document).ready(function() {
$('.input-button').click(function() {
if ($('.public').hasClass('selected')) {
$('.public').removeClass('selected');
$('.private').addClass('selected');
$('.slider').stop().animate({
left: '48%'
}, 200);
} else {
$('.private').removeClass('selected');
$('.public').addClass('selected');
$('.slider').stop().animate({
left: '2%'
}, 200);
}
});
});
html,
body {
padding: 0;
margin: 0;
}
.input-button {
width: 200px;
height: 40px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -20px;
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #2E86AB;
border-radius: 4px;
line-height: 40px;
font-family: sans-serif;
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
span {
width: 50%;
height: 100%;
float: left;
text-align: center;
cursor: pointer;
-webkit-user-select: none;
}
.input-button div {
width: 100px;
height: 85%;
top: 50%;
left: 2%;
transform: translateY(-50%);
position: absolute;
background-color: #FFF;
border-radius: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='input-button'>
<div class='slider'></div>
<span class='private'>Private</span>
<span class='public selected'>Public</span>
</div>

Here is a good example of what you were trying to create
jQuery on-off-switch.js Plugin
It also implemented with jQuery and supports the sliding on drag functionality.
How to use the plugin

customization of input range slider and its pointer

I am using the range slider in my website for showing the image zooming and zoomout by using "range" option but i want to change this as a vertical slider and want to display customized thumb button also
<input class="zoom-range vertical" type="range" orient="vertical" step="0.05" min="0.1" max="1">
And css for the different browsers like
input[type=range].vertical
{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
width: 0px;
height: 100px;
margin-top: 20px;
}
The above css will do the slider as vertical but how can i change the pointer color and hide the width of scroller?
I am getting my slider like this
And i want to make my slider as shown in below
Please help me to sort out this issue
It's working for Firefox but for chrome browser if i will use the properties
input[type=range]::-webkit-slider-thumb {
background: blue;
-webkit-appearance: slider-vertical;
}
these two are not applying to the pointer in chrome. And if i will do -webkit-appearance: none; then the pointer color is changing

Try this css:
input[type=range] {
-webkit-appearance: none; // important
margin: 18px 0;
width: 100%;
transform:rotate(90deg); //for vertical slider
outline:none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 1px;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
background: #BFBFBF; // you can change it accordingly
border-radius: 1.3px;
}
input[type=range]::-webkit-slider-thumb {
height: 36px;
width: 16px;
border-radius: 3px;
background: #004C8F; //Your preferred color
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
}
Demo: http://jsfiddle.net/esvqpkbf/
Fiddle also has CSS for mozilla, you can modify it accordingly.

Second click jQuery

I´m trying to make an animation that when I click on a search icon, it fadeIn the search input and add a class to make it wider. The problem is that I don´t know how to make it fadeOut in the second click after the search input it´s already displayed:
this is my code:
$('#menu_search').click(function(){
$('.search_input').fadeIn().toggleClass('full');
});
<li id="menu_search">
<div class="search_input_container">
<input type="text" class="search_input" value="Buscar">
</div>
</li>
&#menu_search{
background: url('../img/sprites.png') #000 2px 2px;
width: 34px;
height: 28px;
padding: 0;
margin-right: 0;
a{
display: inline-block;
width: 100%;
height: 100%;
}
.search_input_container{
width: 500px;
height: 30px;
position: absolute;
z-index: 20;
left: -466px;
.search_input{
float: right;
width: 100px;
background: #ffffff;
height: 30px;
border: none;
.round_corners();
.animate();
display: none;
&.full{
width: 772px;
display: block;
}
}
}
}

There's also a fadeToggle in jQuery. Try this:
$('#menu_search').click(function(){
$('.search_input').fadeToggle().toggleClass('full');
});

If it's always the second click, you should use fadeToggle() instead.