I have CSS tabs:
.tabs {
width: 100%;
height: 100%;
margin: 0 0 30px;
}
.tabs label {
float: left;
display: inline;
margin: 0 1px -1px 0;
padding: 0 13px 1px;
color: #777;
cursor: pointer;
background: #F9F9F9;
border: 1px solid #E4E4E4;
border-bottom: 1px solid #F9F9F9;
position: relative;
line-height: 25px;
z-index: 1;
}
.tabs label:hover {
color: #F70;
padding: 0 13px;
background: #FFFFDF;
border: 1px solid #FFCA95;
}
.tabs input {
position: absolute;
left: -9999px;
}
#tab_1:checked ~ #tab_l1,
#tab_2:checked ~ #tab_l2 {
color: #444;
background: #EFEFEF;
padding: 0 13px 2px;
border: 1px solid #D4D4D4;
border-bottom: 1px solid #EFEFEF;
z-index: 3
}
.tabs_cont {
position: relative;
height: 552px;
border: 1px solid #DDD;
border-width: 1px;
background: #EFEFEF;
padding: 0 12px;
z-index: 2;
}
.tabs_cont > div {
position: absolute;
left: -9999px;
top: 0;
opacity: 0;
-moz-transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
}
#tab_1:checked ~ .tabs_cont #tab_c1,
#tab_2:checked ~ .tabs_cont #tab_c2 {
position: static;
left: 0;
opacity: 1;
}
and html:
<section class="tabs">
<input id="tab_1" type="radio" name="tab" checked="checked" />
<input id="tab_2" type="radio" name="tab" />
<label for="tab_1" id="tab_l1">Изображения</label>
<label for="tab_2" id="tab_l2">Текст</label>
<div style="clear:both"></div>
<div class="tabs_cont">
<div id="tab_c1"> </div>
<div id="tab_c2">
<div class="add_element" id="add_text">добавить текст </div>
<div id="text_inputs_wrapper"> </div>
</div>
</div>
</section>
And JS:
$("div#add_text").click(function () //on add input button click
{
alert( "Handler for .click() called." );
});
When the page is in the upper position, the event is running. If I`m use scroll and page move - event is not running.
The problem occurs in all browsers.
Has anyone encountered this problem? Help please.
UPDATE.
Please see picture
in this case the event is running
http://1drv.ms/1wg73ak
in this case the event is not running
http://1drv.ms/1mt24JS
As Vector said, you can only click on the #add_text div to trigger the event. The #add_text div is only has a height of one line so you have to click right on the text.
Add a height: 100% to your tab_c2 and to the #add_text then you can click anywhere on the 2nd tab page to trigger the event.
Append this code to your css, your div#add_text will fill the entire container area and the click is works in all position
#add_text {
background-color: red; //remove this later
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
}
Related
I built a page that has three payment plans. There is also a Toggle switch, to change between Monthly and Annually. I have the price set to ex. $19.99 for monthly and when I click the toggle button to switch to annually I want the price to change to $199.99. Here is the code I have so far. All HTML and CSS so now my JS isn't working for it. What's wrong?
function myFunction() {
var x = document.getElementsByClassName("switch");
if (x.innerHTML === "$19.99") {
x.innerHTML = "$199.99";
} else {
x.innerHTML = "$19.99";
}
}
input.cmn-toggle-round:checked+label:after {
margin-left: 32px;
}
.switch {
position: relative;
left: 47.5%;
}
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.cmn-toggle+label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
}
input.cmn-toggle-round+label {
padding: 2px;
width: 50px;
height: 20px;
background-color: #dddddd;
border-radius: 60px;
}
input.cmn-toggle-round+label:before,
input.cmn-toggle-round+label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: "";
}
input.cmn-toggle-round+label:before {
right: 1px;
background-color: #f1f1f1;
border-radius: 60px;
transition: background 0.4s;
}
input.cmn-toggle-round+label:after {
width: 20px;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: margin 0.4s;
}
input.cmn-toggle-round:checked+label:before {
background-image: Linear-Gradient( to left, hsl(236, 72%, 79%), hsl(237, 63%, 64%)
);
}
<div class="switch" onclick="myFunction()">
<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox" />
<label for="cmn-toggle-1"></label>
</div>
There are several problem with your code. First you compare against the innerHTML property which isn't initially set this can not work until you have a default value.
The next is that you want to set the wrapper containers innerHTML which will remove the button.
In the solution below I introduced an paragraph with an initialValue of 199.95 and then toggle on it.
Also I replaced the incline scripting and used instead an eventListener.
let inp = document.getElementById("cmn-toggle-1");
inp.addEventListener("click", myFunction);
function myFunction() {
var x = document.getElementById("par");
if(x.innerHTML === "$199.99"){
x.innerHTML = "$19.99";
}else{
x.innerHTML = "$199.99";
}
}
input.cmn-toggle-round:checked+label:after {
margin-left: 32px;
}
.switch {
position: relative;
left: 47.5%;
}
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.cmn-toggle+label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
}
input.cmn-toggle-round+label {
padding: 2px;
width: 50px;
height: 20px;
background-color: #dddddd;
border-radius: 60px;
}
input.cmn-toggle-round+label:before,
input.cmn-toggle-round+label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: "";
}
input.cmn-toggle-round+label:before {
right: 1px;
background-color: #f1f1f1;
border-radius: 60px;
transition: background 0.4s;
}
input.cmn-toggle-round+label:after {
width: 20px;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: margin 0.4s;
}
input.cmn-toggle-round:checked+label:before {
background-image: Linear-Gradient( to left, hsl(236, 72%, 79%), hsl(237, 63%, 64%));
}
<div class="switch">
<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox" />
<label for="cmn-toggle-1"></label>
<p id="par">$199.99</p>
</div>
Having just read the comment about using the code to manipulate prices for several elements you need a different approach as using an ID will no longer work - ID attributes must be unique so unless you get tricky with numerically incremented indices and the like ( messy ) you can inspect the target attribute of any click event ( or other type ) and use parent/child/sibling selectors to identify and manipulate nodes of interest.
The HTML below was slightly modified by adding dataset attributes and ignoring any ID attributes present. The CSS was hastily fudged to facilitate the display.... but I think it shows how you might do it.
An event listener is assigned to each parent DIV (.switch) and the currentTarget property of the event is used to find the label which actually receives the click. Using the combination of parentNode and querySelector we can identify the nodes we need to make the logic work
document.querySelectorAll('div.switch').forEach( div=>{
div.addEventListener('click',e=>{
if( e.target === e.target.parentNode.lastElementChild ) {
let span=e.target.parentNode.querySelector('span');
document.documentElement.style.setProperty('--currency','$')
span.dataset.price=e.currentTarget.dataset.state == 1 ? e.currentTarget.dataset.annual : e.currentTarget.dataset.month;
span.dataset.period=e.currentTarget.dataset.state == 1 ? 'Monthly:' : 'Annually:';
span.dataset.currency=document.documentElement.style.getPropertyValue('--currency');
e.currentTarget.dataset.state = 1 - Number( e.currentTarget.dataset.state );
}
})
})
input.cmn-toggle-round:checked + label:after {
margin-left: 32px;
}
.switch {
--left:47.5%;
position: relative;
left: var(--left);
margin:1rem 0 1.5rem 0;
width:calc(80% - var(--left));
}
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.cmn-toggle+label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
}
input.cmn-toggle-round+label {
padding: 2px;
width: 50px;
height: 20px;
background-color: #dddddd;
border-radius: 60px;
}
input.cmn-toggle-round+label:before,
input.cmn-toggle-round+label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: "";
}
input.cmn-toggle-round+label:before {
right: 1px;
background-color: #f1f1f1;
border-radius: 60px;
transition: background 0.4s;
}
input.cmn-toggle-round + label:after {
width: 20px;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: margin 0.4s;
}
input.cmn-toggle-round:checked + label:before {
background-image: Linear-Gradient( to left, hsl(236, 72%, 79%), hsl(237, 63%, 64%) );
}
span:after{
display:inline-block;
float:right;
clear:none;
margin:0;
content:attr(data-period)' 'attr(data-currency)attr(data-price)!important;
}
<div class='switch' data-state=0 data-month='199.99' data-annual='19.99'>
<span></span>
<input id='cmn-toggle-1' class='cmn-toggle cmn-toggle-round' type='checkbox' />
<label for='cmn-toggle-1'></label>
</div>
<div class='switch' data-state=0 data-month='259.99' data-annual='23.99'>
<span></span>
<input id='cmn-toggle-2' class='cmn-toggle cmn-toggle-round' type='checkbox' />
<label for='cmn-toggle-2'></label>
</div>
<div class='switch' data-state=0 data-month='150.00' data-annual='75.00'>
<span></span>
<input id='cmn-toggle-3' class='cmn-toggle cmn-toggle-round' type='checkbox' />
<label for='cmn-toggle-3'></label>
</div>
<div class='switch' data-state=0 data-month='652.50' data-annual='480.50'>
<span></span>
<input id='cmn-toggle-4' class='cmn-toggle cmn-toggle-round' type='checkbox' />
<label for='cmn-toggle-4'></label>
</div>
<div class='switch' data-state=0 data-month='40.00' data-annual='19.99'>
<span></span>
<input id='cmn-toggle-5' class='cmn-toggle cmn-toggle-round' type='checkbox' />
<label for='cmn-toggle-5'></label>
</div>
<div class='switch' data-state=0 data-month='300.00' data-annual='14.99'>
<span></span>
<input id='cmn-toggle-6' class='cmn-toggle cmn-toggle-round' type='checkbox' />
<label for='cmn-toggle-6'></label>
</div>
I have several buttons that use the same class. I am using a click function to make adjustments to the button. The issue I am having is the click function is controlling all of the buttons with the same class.
I am using $(document.body) as the selector because the data is derived asynchronously.
I'm wanting to toggle the class for both the triggerPosition and triggerButton. Originally, I just had $(document.body).on('click', '.triggerButton', function() { and thought adding 'triggerPosition' into it would allow the $(this) function to work for both the triggerPosition and triggerButton, but it doesn't.
Does anyone see what I need to do? The triggerButton is working for the specific one clicked on. Currently, the triggerPosition is the issue.
$(document.body).on('click', '.triggerButton', '.triggerPosition', function() {
$('.triggerPosition').toggleClass('active');
$(this).toggleClass('active');
});
.triggerRow {
display: block;
border-bottom: 1px solid #2f2f2f;
width: 500px;
}
.triggerButton {
width: 55px;
height: 30px;
background: #4d4d4d;
border: 1px solid #2f2f2f;
border-radius: 20px;
position: relative;
box-sizing: border-box;
cursor: pointer;
}
.triggerButton.active {
background: #b82222;
}
.triggerPosition {
position: absolute;
left: -2px;
top: -2px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #FFF;
border: 2px solid #4d4d4d;
transform: translateX(0);
-webkit-transition: ease 0.3s;
transition: ease 0.3s;
}
.triggerPosition.active {
border: 2px solid #b82222;
transform: translateX(21px);
-webkit-transition: ease 0.3s;
transition: ease 0.3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="triggerRow" data-triggerid="1">
<div class="triggerButton">
<div class="triggerPosition"></div>
</div>
</div>
<div class="triggerRow" data-triggerid="2">
<div class="triggerButton">
<div class="triggerPosition"></div>
</div>
</div>
I have a page that I need to convert to rtl.
The active tab & tab arrow position doesn't match.
I need to change the tab arrow position from TAB 1 to TAB 2 and vice versa.
I already changed some js value but in vain
HTML :
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-search-container">
<form class="main-search-form">
<div class="search-type">
<label class="active"><input class="first-tab" name="tab" checked="checked" type="radio">TEXT</label>
<label><input name="tab" type="radio">TEXT</label>
<label><input name="tab" type="radio">TEXT</label>
<div class="search-type-arrow"></div>
</div>
<div class="main-search-box">
<div class="main-search-input larger-input">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
CSS :
body {
direction:rtl;
color: #707070;
background-color: #cccccc;
}
.parallax {
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
z-index: 99;
}
.parallax-overlay {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 101;
background-color: #333;
opacity: 0.4;
}
.parallax-content {
position: relative;
z-index: 999;
padding: 105px 0;
}
.main-search-container {
transform: translate3d(0,-12px,0);
}
.main-search-form {
width: 660px;
display: block;
margin: 0 auto;
position: relative;
margin-top: 35px;
}
.search-type {
display: inline-block;
padding-bottom: 35px;
position: relative;
}
.search-type input[type="radio"] { display: none; }
.search-type label {
background-color: #fff;
color: #333;
cursor: pointer;
display:inline-block;
text-align: center;
padding: 9px 18px;
margin: 0 0 0 15px;
float: right;
transition: all 0.2s;
border-radius: 3px;
}
.search-type label:hover,
.search-type label.active {
background-color: #66676b;
color: #fff;
}
.search-type-arrow {
width: 0;
height: 0;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: 15px solid #fff;
position: absolute;
bottom: 0;
right: 0;
transform: translate3d(-3px,0,0);
}
.main-search-box {
background-color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12);
padding: 30px;
padding-bottom: 20px;
margin-top: -9px;
border-radius: 3px;
}
.main-search-box.no-shadow {
box-shadow: none;
padding: 0;
margin: 0;
}
.search-container .main-search-input input {
font-weight: 500;
font-size: 17px;
height: 57px !important;
float: right;
box-sizing: border-box;
border: none;
float: right;
height: auto;
}
.search-container .main-search-input button.button {
width: initial;
min-width: 100px;
max-width: 100px;
margin: 0;
font-size: 18px;
position: relative;
margin-right: 20px;
flex: 0 auto;
height: 57px;
}
.search-container .main-search-input button.button i {
position: relative;
right: 2px;
}
JS :
(function($){
"use strict";
$(document).ready(function(){
function searchTypeButtons() {
// Radio attr reset
$('.search-type label.active input[type="radio"]').prop('checked',true);
// Positioning indicator arrow
var buttonWidth = $('.search-type label.active').width();
var arrowDist = $('.search-type label.active').position().left;
$('.search-type-arrow').css('right', arrowDist + (buttonWidth/2) );
$('.search-type label').on('change', function() {
$('.search-type input[type="radio"]').parent('label').removeClass('active');
$('.search-type input[type="radio"]:checked').parent('label').addClass('active');
// Positioning indicator arrow
var buttonWidth = $('.search-type label.active').width();
var arrowDist = $('.search-type label.active').position().left;
$('.search-type-arrow').css({
'right': arrowDist + (buttonWidth/2),
'transition':'right 0.4s cubic-bezier(.87,-.41,.19,1.44)'
});
});
}
// Init
if ($(".main-search-form").length){
searchTypeButtons();
$(window).on('load resize', function() { searchTypeButtons(); });
}
// ------------------ End Document ------------------ //
});
})(this.jQuery);
I'm using bootstrap, bootstrap rtl flipped & jquery 2.2.0 as external ressources.
Here's the snippet:
https://jsfiddle.net/s3hy37nd/5/
Can someone help with that?
So many errors... I can only say I tried to comment them all inside the code so... yeah it's all there:
"use strict";
jQuery(function($) { // DOM ready and $ alias secured
// Radio attr reset (on DOM ready... makes sense?)
$('.search-type label.active input[type="radio"]').prop('checked', true);
function repositionArrow() { // Use a meaningful fn name
// Positioning indicator arrow
// Width? No. You need .outerWidth! you have paddings!!
var buttonWidth = $('.search-type label.active').outerWidth();
// Again use meaningful names
// If you do console.log( $('.search-type label.active').position() );
// you'll see no `.right` property. So yeah, use .left
var posLeft = $('.search-type label.active').position().left;
$('.search-type-arrow').css({
left: posLeft + (buttonWidth / 2)
// No need for transition here - move it to Stylesheet instead
});
}
// Init
if ($(".main-search-form").length) {
// You might want this too inside the "if"
$('.search-type label').on('change', function() {
$('.search-type input[type="radio"]').parent('label').removeClass('active');
$('.search-type input[type="radio"]:checked').parent('label').addClass('active');
repositionArrow(); // Now you have such function
});
repositionArrow();
$(window).on('load resize', repositionArrow);
}
});
body {
direction: rtl;
color: #707070;
background-color: #cccccc;
}
.parallax {
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
z-index: 99;
}
.parallax-overlay {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 101;
background-color: #333;
opacity: 0.4;
}
.parallax-content {
position: relative;
z-index: 999;
padding: 105px 0;
}
.main-search-container {
transform: translate3d(0, -12px, 0);
}
.main-search-form {
width: 660px;
display: block;
margin: 0 auto;
position: relative;
margin-top: 35px;
}
.search-type {
display: inline-block;
padding-bottom: 35px;
position: relative;
}
.search-type input[type="radio"] {
display: none;
}
.search-type label {
position: relative;
/* YOU NEED SOME POSITION! */
background-color: #fff;
color: #333;
cursor: pointer;
display: inline-block;
text-align: center;
padding: 9px 18px;
margin: 0 0 0 15px;
/*float: right; WHY? you use rtl already */
transition: all 0.2s;
border-radius: 3px;
}
.search-type label:hover,
.search-type label.active {
background-color: #66676b;
color: #fff;
}
.search-type-arrow {
width: 0;
height: 0;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: 15px solid #fff;
position: absolute;
bottom: 0;
/*right: 0; ...Nope. See JS, we need left */
left: calc(100% - 30px);
/* calc to the rescue */
/*transform: translate3d(-3px,0,0); but why */
transition: left 0.4s cubic-bezier(.87, -.41, .19, 1.44);
/* Moved from JS */
}
.main-search-box {
background-color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.12);
padding: 30px;
padding-bottom: 20px;
margin-top: -9px;
border-radius: 3px;
}
<div class="parallax-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-search-container">
<form class="main-search-form">
<div class="search-type">
<label class="active"><input class="first-tab" name="tab" checked="checked" type="radio">TAB 1</label>
<label><input name="tab" type="radio">TAB 2</label>
<label><input name="tab" type="radio">TAB 3</label>
<div class="search-type-arrow"></div>
</div>
<div class="main-search-box">
<div class="main-search-input larger-input">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
Updated jsFiddle
So I have my button below, styled with CSS, and already declared as div in the html file. When the mouse hovers over it, I want to display a small snippet of text, e.g. "Get Info".
I tried selector #GetInfo :hover { but it changed all the style and position of my button.
How can I achieve this?
#GetInfo{
cursor: pointer;
width: 33.2px;
height: 33.2px;
display: inine-block;
z-index:1;
position: absolute;
background-color: rgba(219 ,63,63,.5);
text-align: center;
font-size:23px;
color: white;
top:19px;
right:19px;
}
Is that what you want?
#getInfo {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
#getInfo .yourTooltip {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
#getInfo .yourTooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
#getInfo:hover .yourTooltip {
visibility: visible;
opacity: 1;
}
<html>
<body>
<h1>Pass your mouse over the text below</h1>
<div id="getInfo">Your content goes here<span class="yourTooltip">Get info</span>
</div>
</body>
</html>
There is a title attribute to almost every HTML element. It shows a text while you hover over the element. Try this:
<input type="button" value="Button" title="I wonder what this red button do ..." />
I have an input like this:
<input value="My text" placeholder="Placeholder">
When I type something in the input the placeholder text will disappear, that's quite obvious.
Now, what I want to do is that I want the placeholder text to stay when the user types so you can see the placeholder text as a background text behind the original text:
EDIT: I also want to be able to change the background-text using JavaScript.
Much better solution with ease effect via CSS. Take a look: http://jsfiddle.net/csdtesting/wbqq129q/
Before typing:
While typing:
Code:
#login {
font-size: 12px;
margin: 0 auto;
width: 700px;
}
#login li {
float: left;
list-style: none;
margin-left: 30px;
position: relative;
}
#login li:first-child {
margin-left: 0;
}
label {
line-height: 40px;
position: absolute;
right: 120px;
top: 0;
bottom: 0;
-moz-transition: 0.3s right ease;
-ms-transition: 0.3s right ease;
-o-transition: 0.3s right ease;
-webkit-transition: 0.3s right ease;
transition: 0.3s right ease;
z-index: 0
}
input {
color: transparent;
font-size: 12px;
height: 35px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-transition: 0.3s all ease;
-ms-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
input[type="email"],
input[type="password"] {
border: 1px solid #ccc;
height: 35px;
padding: 0 10px;
width: 240px;
position: relative;
-moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, .06);
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, .06);
box-shadow: inset 0 0 10px rgba(0, 0, 0, .06);
z-index: 2;
}
input[type="email"] {
color: rgba(47, 130, 194, .8);
}
/* Placeholder */
input[type="email"]:-moz-placeholder {
color: rgba(47, 130, 194, .6);
}
input[type="email"]:-ms-input-placeholder {
color: rgba(47, 130, 194, .6);
}
input[type="email"]::-webkit-input-placeholder {
color: rgba(47, 130, 194, .6);
}
/* Label */
input[type="email"] + label {
color: rgb(47, 130, 194);
}
input:focus + label {
right: 10px;
}
input[type="email"]:focus,
input[type="password"]:focus {
background-color: rgba(255, 255, 255, .8);
}
/* Submit */
input[type="submit"] {
background-color: #333;
background: -moz-linear-gradient(bottom, #333, #444);
background: -ms-linear-gradient(bottom, #333, #444);
background: -o-linear-gradient(bottom, #333, #444);
background: -webkit-linear-gradient(bottom, #333, #444);
background: linear-gradient(bottom, #333, #444);
border: 1px solid #222;
color: #fff;
cursor: pointer;
height: 35px;
width: 110px;
}
<form id="login">
<ul>
<li>
<input id="email" name="email" placeholder="Your Email" title="Your Email" type="email" required />
<label for="email">Your Email</label>
</li>
</ul>
</form>
Hard to think of a good usecase for such a behaviour, as it is blocking some of the users input.
An easy way would be to use input::after but this is not supported by any browser right now (thanks #JukkaK.Korpela).
But you can use a wrapper element and a data attribute, as follows:
<div class="placeholder" data-placeholder="my placeholder">
<input value="My text" />
</div>
With this css:
.placeholder
{
position: relative;
}
.placeholder::after
{
position: absolute;
left: 5px;
top: 3px;
content: attr(data-placeholder);
pointer-events: none;
opacity: 0.6;
}
Resulting in:
Click here for jsFiddle demo.
Since you will have to do a lot of tweaking to make this look good, you may also consider using the wrapping <div> element as a input "look alike":
<div class="editable" data-placeholder="my placeholder">
<input type="text" value="my Text" />
</div>
CSS:
.editable
{
position: relative;
border: 1px solid gray;
padding: 3px;
background-color: white;
box-shadow: rgba(0,0,0,0.4) 2px 2px 2px inset;
}
.editable > input
{
position: relative;
z-index: 1;
border: none;
background-color: transparent;
box-shadow: none;
width: 100%;
}
.editable::after
{
position: absolute;
left: 4px;
top: 5px;
content: attr(data-placeholder);
pointer-events: none;
opacity: 0.5;
z-index: 1;
}
Click here for the Demo 3. (with mocked <input />)
Click here for the Demo 2. (with contenteditable)
You could try doing something like this:
HTML:
<div class="wrapper">
<input type="text">
<span class="placeholder">Placeholder</span>
</div>
CSS:
.wrapper{
position: relative;
}
input {
font-size: 14px;
height: 40px;
}
.placeholder {
position: absolute;
font-size:25px;
pointer-events: none;
left: 1px;
top: 1px;
transition: 0.1s ease all;
}
input:focus ~ .placeholder{
top: 1px;
font-size: 11px;
}
JSFiddle
This could be done by using the 'onchange' handler. You would write a fancy function that would concat the remainder of the placeholder onto what the user has typed, and would also place the cursor at the end of the user's text.
Here's some untested, incomplete js/psuedocode to give you an idea:
userTextLength: 0, // measure of how many chars the user has typed; need this because the length itself won't be a valid measure, since we're modifying it in place. Note that we're using the DOM as a source of truth here... alternative method would be to store the user's text itself here, but let's run with this.
placeholder: "xx/yy/zz",
onchange: function() {
boxText = document.querySelector('#elem').value;
if (boxText.length === 1) { // special handling for the first character they type. (Using placeholder text at first.)
this.userTextLength++;
placeholder = boxText.slice(userTextLength);
userText = boxText.slice(0, userTextLength);
document.querySelector('#elem').innerHTML = userText + placeholder;
}
if (boxText.length < placeholder.length) { // this would mean they used backspace, which also needs to be handled.
}
else { // the normal case, should look quite similar to the first if block
this.userTextLength += 1;
userInput =
}
}
Something I haven't handled here is the cursor focusing. That will need an 'onfocus' event, and will use the userTextLength property as well to decide where to place it. For some help on doing that, this answer looks like it should be helpful.
it is impossible, if it is, it will be very unattractive. But i have an idea can help you with jquery support.
You can view the demo here: http://hangaumy.com/order/
When you type, it will automatically add words in it (look like placeholder)
.box {
border: 1px solid;
border-radius: 10px;
padding: .25rem 1rem 1rem;
color: #555;
font-family: sans-serif;
display: flex;
flex-direction: column;
width: max-content;
}
.wrapper {
position: relative;
width: 450px;
}
.wrapper * {
font-size: 1.25rem;
letter-spacing: 2px;
font-family: monospace;
padding: .125rem .25rem;
display: flex;
width: calc(100% - 1rem);
}
input {
width: 4000px;
border: 0;
}
.placeholder {
position: absolute;
pointer-events: none;
left: 0;
top: 0;
width: min-content;
}
<div class="box">
<h2>Short Homepage Headline</h2>
<p>Use up tp 30 characters</p>
<div class="wrapper">
<input type="text">
<span class="placeholder">
______________________________
</span>
</div>
</div>
How about this for functionality, a good use case, and its attractiveness.
(trying to combat some of the negatives above, ha)
the placeholder text was a limited number of underscores (30)?
same font size, monospace, and letter spacing
This make a neat no-js character watcher for a headline writer. This way they will be able to see when it will break the template. But you don't necessarily have to be tied to it as far as a hard limit.