I try to achieve something like the Facebook does when you type #<NAME_OF_A_FRIEND> in a reply. After you choose a friend, the name of that friend is highlighted with a blueish background, so you know it's a separate entity in that text.
I've "inspect element"-ed that textarea and there is no div placed on top of the textarea.
Can anyone give me a clue about how that is done ?
I have a completely different approach to this issue using HTML5. I use a div with contentEditable="true" instead of a textarea (wich I was using until I got stuck with the same problem you had).
Then if I want to change the background color of a specified part I just wrapp that text with a span.
I am not 100% sure if it is the correct approach as I am a newbie in HTML5 but it works fine in all the browsers I have tested it (Firefox 15.0.1 , Chrome 22.0.1229.79 and IE8).
Hope it helps
See this example here. I used only CSS and HTML... The JS is very more complex for now. I don't know exactly what you expect.
HTML:
<div id="textback">
<div id="backmodel"></div>
</div>
<textarea id="textarea">Hey Nicolae, it is just a test!</textarea>
CSS:
#textarea {
background: transparent;
border: 1px #ddd solid;
position: absolute;
top: 5px;
left: 5px;
width: 400px;
height: 120px;
font: 9pt Consolas;
}
#backmodel {
position: absolute;
top: 7px;
left: 32px;
background-color: #D8DFEA;
width: 53px;
height: 9pt;
}
The textarea has background-color: transparent; the extra div you're looking for is behind it, with the same text and font as the textarea, but different colours.
A short example to illustrate the point:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
* { font-family: sans-serif; font-size: 10pt; font-weight: normal; }
.wrapper { position: relative; width: 400px; height: 400px; outline: solid 1px #666; }
.wrapper > * { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; padding: 0; }
.highlighter { background-color: #fff; color: #fff; }
.highlight { background-color: #9ff; color: #9ff; }
textarea { background-color: transparent; border: 0; }
</style>
</head>
<body>
<div class="wrapper">
<div class="highlighter">
This <span class="highlight">is a</span> demonstration.
</div>
<textarea>
This is a demonstration.
</textarea>
</div>
</body>
</html>
Of course, this does not update the special div as you type into the textarea, you need a lot of JavaScript for that.
hi you can check this jquery autosuggest plugin similar to facebook .I have used this to achive the same functionality you required
http://www.devthought.com/2008/01/12/textboxlist-meets-autocompletion/
I would suggest changing the text you want to assign a background inline to to display: inline-block; background-color: #YOURCOLOR;. This should do exactly what you want it to do without all the complexities of some of the above answers.
Ultimately your CSS should look something like this:
.name {display: inline-block; background-color: purple;}
Then add some sort of event listener in jQuery (not sure how you're identifying that it is a name) and inside that conditional put:
$(yourNameSelectorGoesHere).addClass(".name");
Related
you have all seen that explanatory text boxes that appears when the visitor hovers over specific element, I want to add something similar for the table datas on my webpage which explains what these table datas mean. However, I don't want to go through all that creating a new div with text inside, a function that displays that div and onmouseover-onmouseout events that triggers that function(Too complicated to do such a simple thing). Is there any easier and quicker way to do that? Maybe something similar to alt attribute in img tags?
I think you can do the trick with pseudo-elements and data attributes.
[data-test] {
border: 1px solid black;
position: relative;
}
[data-test]:hover::before {
content: attr(data-test);
position: absolute;
left: 5px;
top: calc(100% + 5px);
padding: 5px 10px;
border-radius: 2px;
background: black;
color: white;
font-size: 0.8em;
}
<div data-test="tootip">Hover me</div>
I need help. I'm trying to achieve this effect with the headings of a site.
I tried by using background color and padding, but when the text grows in two or more lines it makes a big rectangle. I'm trying to figure out a way to break lines automatically into spans using javascript.
can anyone help me, please?
thanks a lot!
Try this:
.padded-multiline {
line-height: 1.4;
padding: 2px 0;
width: 400px;
margin: 20px auto;
}
.padded-multiline span {
background-color: #c0c;
color: #fff;
display: inline;
padding: 0.45rem;
line-height: 60px;
/* Needs prefixing */
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
<h1 class="padded-multiline">
<span>How do I add padding to subsequent lines of an inline text element?</span>
</h1>
You can achieve it by adding line-height css property.
Here is the sample to achieve
.hero-banner {
background: url("https://www.tributemedia.com/hs-fs/hubfs/Images/Blog%20Images/shutterstock_252081805.jpg?width=2480&name=shutterstock_252081805.jpg");
background-size: cover;
width: 100%;
height: 200px;
padding: 20px;
}
.hero-banner span {
background: #e7415e;
color: #fff;
font-size: 55px;
line-height: 80px;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="hero-banner">
<span>Join our 2020 Welcome change tour</span>
</div>
</body>
</html>
If you want to achive this with CSS only then you need to set this element display attribute to inline like this:
display: inline;
You can also use the line-height CSS attribute together with the font-size to style the height of this p element (if you're using p for this text).
Make sure that line-height value is significantly bigger than the font-size.
I ask my question as someone who knows pretty much nothing (nothing at all) about coding. I am clearly very confused about how HTML, CSS, and JS interact.
I am creating a Squarespace website, and I found an FAQ form from Codepen.io that I would like to include on a specific page of the website. I want to know how to approach inserting the HTML, CSS, and JS into a Squarespace code block.
I am able to copy and paste the HTML part of the code into the Squarespace code block feature and the FAQ form shows up, but without all the colors/fonts/styles that the CSS and JS code apparently bring to it. That is about all I got to "work." Below I provided a link to the code I am referring to. I hope this is all making sense.
FAQ form in question: codepen.io/sarenz/pen/azGLRg
*I have added the CSS and JS codes for context
CSS:
{ /basic reset/
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
/* background: red; */
background: lightgray;
}
.faq-wrapper{
border-bottom: 1px solid rgba(0,0,0,0.5);
font-family: 'Lato';
line-height: 1.6;
padding: 40px 40px 17px 75px;
position: relative;
}
i {
display: block;
height: 50px;
width: 50px;
}
a{
cursor: pointer;
display: block;
height: 40px;
margin-right: 0;
position: absolute;
right: 75px;
top: 30px;
width: 40px;
}
a.hide-button{
z-index: -1;
}
p.faq__question, p.faq__answer{
margin-left: 30px;
margin-right: 100px;
max-width: 650px;
}
p.faq__question{
font-weight: 700;
padding-bottom: 20px;
}
.hidden-part {
height: 0;
}
.hidden-part *{
opacity: 0;
}
.faq__question:before, .faq__answer:before{
color: #3376b3;
font-weight: 900;
margin-left: -30px;
position: absolute;
}
.faq__question:before{
content: 'Q:';
}
.faq__answer:before{
content: 'A:';
}
JS:
$( function(){
'use strict';
var $showButton = $('.faq-wrapper .expand-button'),
$hideButton = $('.faq-wrapper .hide-button');
$showButton.click(function(){
var id = $(this).attr('data-id');
var height = $('.hidden-part[data-id="'+id+'"] >.faq__answer').height();
height = height+25;/Adds extra padding to the bottom/
$(this).velocity({opacity:0})
.css('z-index',1)
.next('.hide-button')
.velocity({opacity:1})
.css('z-index',2)
.next('.hidden-part')
.velocity({height:height});
$('.hidden-part[data-id="'+id+'"] *').velocity({opacity:1},{duration:400});
});
$hideButton.click(function(){
var id = $(this).attr('data-id');
$('.hidden-part[data-id="'+id+'"] *').velocity({opacity:0},{duration:200});
$(this).velocity({opacity:0})
.css('z-index',1)
.prev('.expand-button')
.velocity({opacity:1})
.css('z-index',2)
.next()
.next()
.velocity({height:0});
});
} );
Congrats on getting started in the coding world! Squarespace has a tutorial on adding custom HTML, CSS, and JS to your website: link
As far as understanding how HTML, CSS, and JS interact, there are plenty of tools available to help you learn depending on your preferred learning style: Google Results
Here's the basic run-down:
HTML: The content that you want on your website
CSS: The formatting of that content
JS: Logic to change the content and formatting based on conditions or events (ie user clicks a button)
I'm working on a reference project with tooltip notes throughout a text, and I'd like for the text affected by a note to be highlighted when the tooltip is displayed. My current code has a bug where displaying the first note highlights the correct text, but displaying a subsequent note highlights the text from the first note, not its own. I'm new to Javascript so it's likely I made a rookie mistake, but I think the problem is that I'm using getElementById which can only work once, but if I should be using getElementsByClassName instead, how do I tell it which node to get when? I know getElementsByClassName returns the whole array, and I need a way to only return one node at a time. I haven't yet been able to figure it out myself so help is very much appreciated. Below is a pared-down example of my code that demonstrates my problem.
<!DOCTYPE html>
<html>
<head>
<style>
mark {
background-color: white
}
/* now <mark> is only effective at my discretion */
sup {
vertical-align: text-top;
font-style: italic
}
a:link {
text-decoration: none
}
a:visited {
color: blue
}
a:hover {
text-decoration: underline
}
/* these describe the appearance and behavior of tooltips */
a.tooltips {
position: relative;
display: inline
}
a.tooltips span {
position: absolute;
width: 70px;
color: #FFFFFF;
background: #000000;
height: 25px;
line-height: 25px;
text-align: center;
visibility: hidden;
}
a:hover.tooltips span {
visibility: visible;
font-size: 0.8em;
top: 22px;
left: 50%;
margin-left: -43px;
z-index: 999;
}
a.tooltips span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
</style>
<script>
function seeNote() // <mark> is now activated
{
document.getElementById("note").style.backgroundColor = "yellow"
}
function hideNote() // <mark> is now deactivated
{
document.getElementById("note").style.backgroundColor = "white"
}
</script>
<title>Bug Demonstration</title>
</head>
<body>
Mousing over note <i>a</i> highlights
<a class="tooltips" href="#"><sup onmouseover="seeNote()" onmouseout="hideNote()">a</sup><span>note <i>a</i></span></a>
<mark id="note">affected text</mark> as intended,
<br> but mousing over note <i>b</i> highlights
<a class="tooltips" href="#"><sup onmouseover="seeNote()" onmouseout="hideNote()">b</sup><span>note <i>b</i></span></a>
<mark id="note">note <i>a</i>'s text</mark> instead of note <i>b</i>'s text.
</body>
</html>
Problem solved! I saw something similar to my intended effect done on another website and looked at its source; it turns out there's a way to do this without any scripting at all! The whole effect can be accomplished merely with extra styling of the <a> elements in CSS, like so:
a. Delete all JavaScript
b. Delete all <mark> tags and their CSS and move each </a> to replace each </mark>
c. Delete href="#" from all <a> tags
d. Insert this code into the CSS:
/* affected text highlighted... */
a:hover.tooltips {
background-color: yellow;
}
/* ...but not the superscript letter */
a:hover.tooltips sup {
background-color: white;
}
I want to put a colon at the start of input, like this:
It can't be delete.
I think can use a label to put it, then use css to position it, right?
How to use javascript to do it?
By the way, I use shift+: to show this input, but when I use script to focus it, the colon auto input into, how to remove?
That can be done in many ways, just in pure CSS without even disturbing Javascript. Background images and pseudo elements come to my mind.
I've played around and came out with this.
http://jsfiddle.net/q5DZP/
Notice that the input element must be wrapped in a div (or any other container element) otherwise :before or :after pseudo elements won't apply.
Working jsFiddle Demo
You can do this with multiple layers and positioning:
HTML
<div id="container">
<input id="input" type="text" />
<div id="colon">:</div>
</div>
CSS
#container {
position: relative;
width: 300px;
height: 50px;
}
#input {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 3px solid black;
border-radius: 5px;
background: #ccc;
font-size: 18px;
padding-left: 20px;
}
#colon {
position: absolute;
top: 13px;
left: 15px;
font-size: 18px;
}