javascript code not working within oninput attribute

javascript code not working within oninput attribute - javascript

I am trying to integrate the code for price range slider in one of my new project but I don't know why the javascript code written for the slider not running.
I tried to integrate the code and I noticed some others related answers in which the solution were just the changing of version from html 4 to 5 but I am using html 5. I googled a lot but didn't get any solution.
The code which I am trying to integrate is here which is working fantastically on this link https://codepen.io/glitchworker/pen/XVdKqj but not on the local file.
The sliders doesn't move. They just remain still at 30 and 60 position.
body { font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 400; color: #888; line-height: 30px; text-align: center; }
/***** Top menu *****/
.navbar {
background: #444;
-o-transition: all .6s; -moz-transition: all .6s; -webkit-transition: all .6s; -ms-transition: all .6s; transition: all .6s;
backface-visibility: hidden;
align-content: left;
}
[slider] {
position: relative;
height: 14px;
border-radius: 10px;
text-align: left;
margin: 45px 0 10px 0;
}
[slider] > div {
position: absolute;
left: 13px;
right: 15px;
height: 14px;
}
[slider] > div > [inverse-left] {
position: absolute;
left: 0;
height: 14px;
border-radius: 10px;
background-color: #CCC;
margin: 0 7px;
}
[slider] > div > [inverse-right] {
position: absolute;
right: 0;
height: 14px;
border-radius: 10px;
background-color: #CCC;
margin: 0 7px;
}
[slider] > div > [range] {
position: absolute;
left: 0;
height: 14px;
border-radius: 14px;
background-color: #1ABC9C;
}
[slider] > div > [thumb] {
position: absolute;
top: -7px;
z-index: 2;
height: 28px;
width: 28px;
text-align: left;
margin-left: -11px;
cursor: pointer;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
background-color: #FFF;
border-radius: 50%;
outline: none;
}
[slider] > input[type=range] {
position: absolute;
pointer-events: none;
-webkit-appearance: none;
z-index: 3;
height: 14px;
top: -2px;
width: 100%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
div[slider] > input[type=range]::-ms-track {
-webkit-appearance: none;
background: transparent;
color: transparent;
}
div[slider] > input[type=range]::-moz-range-track {
-moz-appearance: none;
background: transparent;
color: transparent;
}
div[slider] > input[type=range]:focus::-webkit-slider-runnable-track {
background: transparent;
border: transparent;
}
div[slider] > input[type=range]:focus {
outline: none;
}
div[slider] > input[type=range]::-ms-thumb {
pointer-events: all;
width: 28px;
height: 28px;
border-radius: 0px;
border: 0 none;
background: red;
}
div[slider] > input[type=range]::-moz-range-thumb {
pointer-events: all;
width: 28px;
height: 28px;
border-radius: 0px;
border: 0 none;
background: red;
}
div[slider] > input[type=range]::-webkit-slider-thumb {
pointer-events: all;
width: 28px;
height: 28px;
border-radius: 0px;
border: 0 none;
background: red;
-webkit-appearance: none;
}
div[slider] > input[type=range]::-ms-fill-lower {
background: transparent;
border: 0 none;
}
div[slider] > input[type=range]::-ms-fill-upper {
background: transparent;
border: 0 none;
}
div[slider] > input[type=range]::-ms-tooltip {
display: none;
}
[slider] > div > [sign] {
opacity: 0;
position: absolute;
margin-left: -11px;
top: -39px;
z-index:3;
background-color: #1ABC9C;
color: #fff;
width: 28px;
height: 28px;
border-radius: 28px;
-webkit-border-radius: 28px;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;
}
[slider] > div > [sign]:after {
position: absolute;
content: '';
left: 0;
border-radius: 16px;
top: 19px;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top-width: 16px;
border-top-style: solid;
border-top-color: #1ABC9C;
}
[slider] > div > [sign] > span {
font-size: 12px;
font-weight: 700;
line-height: 28px;
}
[slider]:hover > div > [sign] {
opacity: 1;
}
<div slider id="slider-distance">
<div>
<div inverse-left style="width:70%;"></div>
<div inverse-right style="width:70%;"></div>
<div range style="left:30%;right:40%;"></div>
<span thumb style="left:30%;"></span>
<span thumb style="left:60%;"></span>
<div sign style="left:30%;">
<span id="value">30</span>
</div>
<div sign style="left:60%;">
<span id="value">60</span>
</div>
</div>
<input type="range" tabindex="0" value="30" max="100" min="0" step="1" oninput="
this.value=Math.min(this.value,this.parentNode.childNodes[5].value-1);
var value=(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.value)-(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.min);
var children = this.parentNode.childNodes[1].childNodes;
children[1].style.width=value+'%';
children[5].style.left=value+'%';
children[7].style.left=value+'%';children[11].style.left=value+'%';
children[11].childNodes[1].innerHTML=this.value;" />
<input type="range" tabindex="0" value="60" max="100" min="0" step="1" oninput="
this.value=Math.max(this.value,this.parentNode.childNodes[3].value-(-1));
var value=(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.value)-(100/(parseInt(this.max)-parseInt(this.min)))*parseInt(this.min);
var children = this.parentNode.childNodes[1].childNodes;
children[3].style.width=(100-value)+'%';
children[5].style.right=(100-value)+'%';
children[9].style.left=value+'%';children[13].style.left=value+'%';
children[13].childNodes[1].innerHTML=this.value;" />
</div>

Related

Triggering text area by clicking related select/checkbox

I've created a form in which one of the questions consists of a checkbox and a textarea. I removed the standard view of checkboxes and made my own on their place. I now want to integrate the trigger of the checkbox click makes the textbox active.
I'm using jQuery and I don't know pure JS well. Unfortunately I don't have opportunity to change the HTML in my case.
var $other = $('input[type=text][placeholder="your text"]');
var otherOption = $other.attr('name');
$('.form-check-other > .form-check-input').after('<label class="form-check-label" for="' + otherOption + '">');
$other.off('change');
$other.on('input');
$other.on('blur');
label {
font-size: 2rem;
color: #303030;
letter-spacing: 0.04rem;
line-height: 2.5rem;
}
label {
margin: 0;
padding-top: 0;
padding-bottom: 0.6rem;
line-height: 180%;
}
input[type="checkbox"].form-check-input {
position: absolute;
left: -9999px
}
input[type="checkbox"].form-check-input+label {
position: relative;
cursor: pointer;
}
input[type="checkbox"].form-check-input+label:before {
content: '';
background: #fff;
border: 1px solid #808080;
border-radius: 0.3rem;
height: 1.4rem;
width: 1.4rem;
position: absolute;
top: 0.5rem;
left: 0;
}
input[type="checkbox"].form-check-input+label:after {
content: '';
border-style: solid;
border-width: 0 0 2px 2px;
border-color: transparent transparent #673F9A #673F9A;
width: 1rem;
height: 0.5rem;
position: absolute;
top: 0.8rem;
left: 0.2rem;
opacity: 0;
transform: scale(2) rotate(-45deg);
}
input[type="checkbox"].form-check-input:checked+label:after {
opacity: 1;
transform: scale(1) rotate(-45deg);
color: #673F9A
}
.form-control {
display: block;
width: 100%;
line-height: 1.5rem;
height: 2.5rem;
font-size: 1.4rem;
color: #606060;
text-transform: none;
border: 2px solid #ededed;
border-radius: 0.5rem;
background-color: #fff;
padding: 0 0.6rem;
margin-bottom: 2.4rem;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
input[type="text"].form-control:focus {
border: 2px solid #673F9A;
border-radius: 0.5rem;
background-color: #fff;
padding: 0 1.6rem;
margin-bottom: 2.4rem;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.form-check-other {
position: relative;
}
.form-check-other .form-check-label {
position: absolute!important;
left: 0;
}
.form-check-label,
.form-check-other {
display: inline-block;
padding-left: 2.5rem;
font-size: 1.4rem !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="construction and real estate" value="construction and real estate">
<label class="form-check-label" for="construction and real estate">construction and real estate</label>
</div>
<div class="form-check form-check-other">
<input class="form-check-input" type="checkbox" id="other_option_response" value="__other_option__">
<input class="form-control" type="text" name="other_option_response" value="" placeholder="your text">
</div>

To do what you require you can hook a change event handler to the checkbox which sets the state of the disabled property of its sibling textbox.
Also note that it's invalid HTML to have spaces within id attributes, so I replaced them with underscores in the following example.
// this should *REALLY* be in the HTML, not hacked in using JS.
var $other = $('input[type="text"][placeholder="your text"]');
var otherOption = $other.attr('name');
$('.form-check-other > .form-check-input').after(`<label class="form-check-label" for="${otherOption}">`);
// toggle disabled state
$('.form-check-input').on('change', e => {
$(e.target).siblings(':text').prop('disabled', !e.target.checked).focus();
});
label {
font-size: 2rem;
color: #303030;
letter-spacing: 0.04rem;
line-height: 2.5rem;
}
label {
margin: 0;
padding-top: 0;
padding-bottom: 0.6rem;
line-height: 180%;
}
input[type="checkbox"].form-check-input {
position: absolute;
left: -9999px
}
input[type="checkbox"].form-check-input+label {
position: relative;
cursor: pointer;
}
input[type="checkbox"].form-check-input+label:before {
content: '';
background: #fff;
border: 1px solid #808080;
border-radius: 0.3rem;
height: 1.4rem;
width: 1.4rem;
position: absolute;
top: 0.5rem;
left: 0;
}
input[type="checkbox"].form-check-input+label:after {
content: '';
border-style: solid;
border-width: 0 0 2px 2px;
border-color: transparent transparent #673F9A #673F9A;
width: 1rem;
height: 0.5rem;
position: absolute;
top: 0.8rem;
left: 0.2rem;
opacity: 0;
transform: scale(2) rotate(-45deg);
}
input[type="checkbox"].form-check-input:checked+label:after {
opacity: 1;
transform: scale(1) rotate(-45deg);
color: #673F9A
}
.form-control {
display: block;
width: 100%;
line-height: 1.5rem;
height: 2.5rem;
font-size: 1.4rem;
color: #606060;
text-transform: none;
border: 2px solid #ededed;
border-radius: 0.5rem;
background-color: #fff;
padding: 0 0.6rem;
margin-bottom: 2.4rem;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
input[type="text"].form-control:focus {
border: 2px solid #673F9A;
border-radius: 0.5rem;
background-color: #fff;
padding: 0 1.6rem;
margin-bottom: 2.4rem;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.form-check-other {
position: relative;
}
.form-check-other .form-check-label {
position: absolute!important;
left: 0;
}
.form-check-label,
.form-check-other {
display: inline-block;
padding-left: 2.5rem;
font-size: 1.4rem !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="construction_and_real_estate" value="construction and real estate" />
<label class="form-check-label" for="construction_and_real_estate">construction and real estate</label>
</div>
<div class="form-check form-check-other">
<input class="form-check-input" type="checkbox" id="other_option_response" value="__other_option__" />
<input class="form-control" type="text" name="other_option_response" value="" placeholder="your text" disabled />
</div>

You need to get the click on element and then use nextAll to find next input.
And then, you use focus and blur to fire on your input.
I also used class to check if click element was already clicked or not
var $other = $('input[type=text][placeholder="your text"]');
var otherOption = $other.attr('name');
$('.form-check-other > .form-check-input').after('<label class="form-check-label" for="' + otherOption + '">');
$('.form-check-input').change(function() {
if (!$(this).hasClass('checked')) {
$(this).addClass('checked').nextAll('input[name=other_option_response]:first').focus();
} else {
$(this).removeClass('checked').nextAll('input[name=other_option_response]:first').blur();
}
});
label {
font-size: 2rem;
color: #303030;
letter-spacing: 0.04rem;
line-height: 2.5rem;
}
label {
margin: 0;
padding-top: 0;
padding-bottom: 0.6rem;
line-height: 180%;
}
input[type="checkbox"].form-check-input {
position: absolute;
left: -9999px
}
input[type="checkbox"].form-check-input+label {
position: relative;
cursor: pointer;
}
input[type="checkbox"].form-check-input+label:before {
content: '';
background: #fff;
border: 1px solid #808080;
border-radius: 0.3rem;
height: 1.4rem;
width: 1.4rem;
position: absolute;
top: 0.5rem;
left: 0;
}
input[type="checkbox"].form-check-input+label:after {
content: '';
border-style: solid;
border-width: 0 0 2px 2px;
border-color: transparent transparent #673F9A #673F9A;
width: 1rem;
height: 0.5rem;
position: absolute;
top: 0.8rem;
left: 0.2rem;
opacity: 0;
transform: scale(2) rotate(-45deg);
}
input[type="checkbox"].form-check-input:checked+label:after {
opacity: 1;
transform: scale(1) rotate(-45deg);
color: #673F9A
}
.form-control {
display: block;
width: 100%;
line-height: 1.5rem;
height: 2.5rem;
font-size: 1.4rem;
color: #606060;
text-transform: none;
border: 2px solid #ededed;
border-radius: 0.5rem;
background-color: #fff;
padding: 0 0.6rem;
margin-bottom: 2.4rem;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
input[type="text"].form-control:focus {
border: 2px solid #673F9A;
border-radius: 0.5rem;
background-color: #fff;
padding: 0 1.6rem;
margin-bottom: 2.4rem;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.form-check-other {
position: relative;
}
.form-check-other .form-check-label{
position: absolute!important;
left: 0;
}
.form-check-label, .form-check-other {
display: inline-block;
padding-left: 2.5rem;
font-size: 1.4rem !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="construction and real estate" value="construction and real estate">
<label class="form-check-label" for="construction and real estate">construction and real estate</label>
</div>
<div class="form-check form-check-other">
<input class="form-check-input" type="checkbox" id="other_option_response" value="__other_option__">
<input class="form-control" type="text" name="other_option_response" value="" placeholder="your text">
</div>

Issue with CSS Text box rendering in IE

I have been trying to build a search engine using basic HTML and CSS for my Uni but IE just doesnt seem to like text boxes. Works perfectly fine in Chrome and Edge but for some reason doesnt work well in IE.
Screenshots attached below.
Image in IE
Image in Chrome
Any help would be highly appreciated.
Code for the search box and the search text button:
.search-box {
position: absolute;
top: 260px;
left: 46%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-text {
width: 350px;
padding: 0 6px;
}
.search-box:hover > .search-btn {
background: white;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
}
/*
.search-box:hover ~ .category-box {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box:hover {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box {
position: absolute;
align-items: center;
top: 38%;
left: 50%;
text-decoration-color: white;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
width: 0px;
color: white;
visibility: collapse;
opacity: 0;
transition: width 1s, height 1s, transform 1s;
transition: opacity 1s;
}
*/
.search-box > ul {
left: -100px;
background-color: #2f3640;
color: white;
border-radius: 10px;
list-style-type: none;
font-size: 15px;
}
.search-box > ul li {
left: -10px;
margin: 0 0 10px 0;
border-bottom: 1px solid white;
z-index: 1;
}
.search-box > ul li:last-child {
margin: 0 0 10px 0;
border-bottom: 1px solid transparent;
}
.search-box > ul li:hover {
color: red;
}
<div class="entire-searchbox">
<div class="search-box">
<input class="search-text" type="text" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
<ul id="testListDummy">
</ul>
</div>
</div>

Can you set 400px in .search-box class should be work

Try to add the height property for the .search-text, code as below:
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
height:58px;
}
The output as below:

Profile card going outside of the browser window

I want to achieve the mini profile view like in twitter. When we hover a user's name, his mini profile view is coming. But my problem it is going outside of the browser window. I need to adjust it according to the viewport. It should go outside of the window, it should adjust automatically.
it is coming this way
I need it this way
here is the code
<div class="popover__wrapper">
<a>Cyril</a>
<div class="push popover__content">
<div class="contact-card-user">
<div class="left-side">
<img src="../assets/img/profiles/male-user.jpg" alt="">
</div>
<div class="right-side">
<div class="details-wrapper">
<h3>Full Name </h3>
<div class="privilege">Administrator</div>
<div class="designation">Designer</div>
<div class="description">+973 1234 5678</div>
<div class="description">info#company.com</div>
</div>
</div>
</div>
</div>
<style>
.popover__wrapper {
position: relative;
margin-top: 0;
display: block;
cursor: pointer;
}
.popover__content {
opacity: 0;
visibility: hidden;
position: absolute;
left: 40px;
bottom: -90px;
transform: translate(0, 30px);
background-color: transparent;
padding: 0;
width: auto;
}
.popover__content:before {
position: absolute;
z-index: -1;
content: '';
left: -20px;
bottom: 100px;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent transparent #a5053d;
transition-duration: 0.3s;
transition-property: transform;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.contact-card-user {
background: #fff;
display: flex;
width: max-content;
box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.05);
}
.contact-card-user .left-side {
margin-right: 20px;
width: 100%;
max-width: 200px;
}
.contact-card-user .left-side img {
width: 100%;
height: auto;
}
.contact-card-user .right-side {
padding-left: 3px;
padding-top: 5px;
padding-bottom: 10px;
padding-right: 25px;
width: 100%;
max-width: 260px;
}
.contact-card-user .details-wrapper {
text-align: left;
}
.contact-card-user .details-wrapper h3 {
color: #333;
font-size: 16px;
white-space: pre-wrap;
overflow: hidden;
margin-bottom: 1px;
line-height: normal;
}
.contact-card-user .details-wrapper .privilege {
display: inline-block;
color: #a5053c;
font-weight: 400;
font-size: 14px;
letter-spacing: 0.7px;
margin-bottom: 13px;
margin-top: 6px;
border-bottom: 1px solid #00a000;
}
.contact-card-user .details-wrapper .designation {
color: #333;
margin-bottom: 5px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
</style>
I think may be javascript can solve. Any help?
Thank you

i cant redirect and go to a specific section

i am trying to redirect to this page and go a specific part of the page, which is powered by java script to move around. i want to be able to go to say, delete section. but i cant achieve it using localhost/entry.php#delete . what am i doing wrong? below is the snippet.
(function($) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
$('.tabs').on('click', 'li a', function(e) {
e.preventDefault();
var $tab = $(this),
href = $tab.attr('href');
$('.active').removeClass(ACTIVE_CLASS);
$tab.addClass(ACTIVE_CLASS);
$('.show')
.removeClass(SHOW_CLASS)
.addClass(HIDE_CLASS)
.hide();
$(href)
.removeClass(HIDE_CLASS)
.addClass(SHOW_CLASS)
.hide()
.fadeIn(550);
});
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
background: #1a1a1a;
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
height: 450px;
position: relative;
font-family: 'Roboto';
}
.red-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
position: relative;
font-family: 'Roboto';
padding: 15px;
}
label {
font-weight: bold;
}
.tabs {
background: #c0392b;
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #c0392b;
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 12px 22px 12px 22px;
/*border-right: 1px solid #tab-border;*/
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #e74c3c;
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
font-family: 'Roboto';
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #fff;
border: none;
color: #e74c3c;
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show {
display: block;
}
.hide {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
/*box-shadow: 0px 3px 1px #2075aa;*/
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
font-weight: bold;
}
.button:hover {
background: #1e75aa;
/*box-shadow: 0 3px 1px #237bb2;*/
}
.button:active {
background: #136899;
/*box-shadow: 0 3px 1px #0f608c;*/
}
::-webkit-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: #e74c3c;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #e74c3c;
font-weight: bold;
}
:-ms-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
select {
margin: 10px;
border: 1px solid #111;
background: transparent;
width: 300px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
font-weight: bold;
color: #504848;
}
<body>
<div class="container">
<div class="flat-form">
<ul class="tabs">
<li>
Insert
</li>
<li>
Update
</li>
<li>
Delete
</li>
</ul>
<div id="insert" class="form-action show">
<h1>Insert</h1>
<p>
insert data goes here
</p>
</div>
<div id="update" class="form-action hide">
<h1>Update</h1>
<p>
update data goes here
</p>
</div>
<div id="delete" class="form-action hide">
<h1>Delete</h1>
<p>
delete data goes here
</p>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>

Anchors apply just for simple navigation around the page, for changing tabs etc. you need to add some extra code, something like:
(function($) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
switchTab = function(href){
var $link = $('a[href=' + href + ']'),
$tab = $(href);
$('.active').removeClass(ACTIVE_CLASS);
$link.addClass(ACTIVE_CLASS);
$('.show')
.removeClass(SHOW_CLASS)
.addClass(HIDE_CLASS)
.hide();
$($tab)
.removeClass(HIDE_CLASS)
.addClass(SHOW_CLASS)
.hide()
.fadeIn(550);
}
$('.tabs').on('click', 'li a', function(e) {
e.preventDefault();
switchTab($(this).attr('href'));
});
if(window.location.hash){
switchTab(window.location.hash);
}
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
background: #1a1a1a;
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
height: 450px;
position: relative;
font-family: 'Roboto';
}
.red-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
position: relative;
font-family: 'Roboto';
padding: 15px;
}
label {
font-weight: bold;
}
.tabs {
background: #c0392b;
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #c0392b;
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 12px 22px 12px 22px;
/*border-right: 1px solid #tab-border;*/
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #e74c3c;
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
font-family: 'Roboto';
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #fff;
border: none;
color: #e74c3c;
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show {
display: block;
}
.hide {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
/*box-shadow: 0px 3px 1px #2075aa;*/
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
font-weight: bold;
}
.button:hover {
background: #1e75aa;
/*box-shadow: 0 3px 1px #237bb2;*/
}
.button:active {
background: #136899;
/*box-shadow: 0 3px 1px #0f608c;*/
}
::-webkit-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: #e74c3c;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #e74c3c;
font-weight: bold;
}
:-ms-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
select {
margin: 10px;
border: 1px solid #111;
background: transparent;
width: 300px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
font-weight: bold;
color: #504848;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div class="container">
<div class="flat-form">
<ul class="tabs">
<li>
Insert
</li>
<li>
Update
</li>
<li>
Delete
</li>
</ul>
<div id="insert" class="form-action show">
<h1>Insert</h1>
<p>
insert data goes here
</p>
</div>
<div id="update" class="form-action hide">
<h1>Update</h1>
<p>
update data goes here
</p>
</div>
<div id="delete" class="form-action hide">
<h1>Delete</h1>
<p>
delete data goes here
</p>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>

How to assign a tooltip to a div without javascript or JQuery?

I am trying to design a form where I have tool tips that are ALWAYS showing on the right side to help the users in filling out their forms. What I did was I assigned each parts in Divs and I want a tool tip for each one.
<div title="This is where you fill your first name in.">
<p> First Name: <input type="text" name="firstName"/> </p>
</div>
<div title="Last Name Entry">
<p> Last Name: <input type="text" name="lastName"/> </p>
</div>
<div title="OK!">
<input type="submit" style="width: 10em; margin: auto 0"/>
</div>
I found this neat website that helps you style in CSS with ease and I used a code that I generated through it:
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #000000;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
courtesy of:
http://html-generator.weebly.com/
Thanks in advance!

Well, I can give you answer for you question from title.
I always use CSS3 pseudo elements and data atribute to accomplished that without any jQuery code.
This is CSS3:
[data-tip] {
position:relative
}
[data-tip]:before {
content: '';
display: none;
border: 5px solid #000;
border-top-color: #000;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
position: absolute;
top: -7px;
left: 10px;
z-index: 8;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
[data-tip]:after {
display: none;
content: attr(data-tip);
position: absolute;
top: -35px;
left: 0px;
padding: 0px 8px;
background: #000;
color: #fff;
z-index: 9;
font-size: 13px;
height: 28px;
line-height: 28px;
white-space: nowrap;
word-wrap: normal;
}
[data-tip]:hover:before, [data-tip]:hover:after {
display: block;
}
.tip-below[data-tip]:after {
top: 23px;
left: 0px;
}
.tip-below[data-tip]:before {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: #1a1a1a;
border-left-color: transparent;
top: 13px;
left: 10px;
}
And HTML would b:
some text here
Instead of bellow you can make to right side.

Here's a FIDDLE
In the fiddle tooltip works on focus but if you remove opacity it'll be always shown
<input type="text" name="firstName" placeholder="First Name"><span class="tooltip">Tooltip 1 content</span>
<input type="text" name="lastName" placeholder="Last Name"><span class="tooltip">Tooltip 2 content</span>
input {
float: left;
clear: left;
width: 200px;
margin: 0 0 12px;
padding: 5px;
border: 1px solid #ddd;
}
.tooltip {
position: relative;
float: left;
margin-left: 10px;
padding: 0 5px;
line-height: 26px;
color: #555;
opacity: 0;
border: 1px solid #ccc;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
}
.tooltip:after, .tooltip:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.tooltip:after {
border-color: rgba(200,200,200,0);
border-right-color: #ddd;
border-width: 8px;
margin-top: -8px;
}
input:focus + .tooltip {
opacity: 1;
}

We Keep Coding

JavaScript is the programming language of the Web.

javascript code not working within oninput attribute - javascript

Related

Triggering text area by clicking related select/checkbox

Issue with CSS Text box rendering in IE

Profile card going outside of the browser window

i cant redirect and go to a specific section

How to assign a tooltip to a div without javascript or JQuery?

Categories

Resources