Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
My goal is to display text on a screen as a user types it, with an underscore cursor showing after the text. The best way I can describe what I'm trying to do is a similar look to using the command line.
What is the best way to do this? I haven't been able to get it to work using a simple text input with css.
Here's something to get you started with jQuery.
$('input').on('input', function(e){
$('div').empty().text($(this).val());
});
Edit: blinking underscore can be done with CSS
div:after{
content:"_";
opacity:0;
animation:blink .500s linear infinite;
}
#keyframes blink{
from{opacity:0;}
to{opacity:1;}
}
The best way? Read the content on every keyup and then inject it into a destination container to show it to the user. Easy.
Check this: http://jsfiddle.net/VDd6C/8/
Show us your code. We'll help.
A basic one, try this (tested in Chrome and FF)
Play it here
HTML
<div>
<span contenteditable="true">Enter your input: </span><span class="blink">_</span>
</div>
JavaScript
window.setInterval(function(){
$('.blink').toggle();
}, 450);
CSS
body {
background-color: black;
color:white;
font-size: 15px;
font-weight:bold;
font-family: courier;
}
span {
border: none;
}
div {
max-width: 200px;
}
div:focus, span:focus{
outline: 0;
}
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I have problems activating a simple element in HTML via JavaScript.
So I have a simple Setup:
<a href="example.com">
</a>
<button>Klick</button>
Now I want, that if the button is clicked, some JS Code will be executed, which then "Clicks" the element. Similar to executing the .click() function on a button.
I also use jQuery, if that makes it easier for you. Thanks in advance.
native Js has a click() method on every elements, you just need to call it
let button = document.getElementById("button")
let link = document.getElementById("link")
button.onclick = () => link.click()
<a id="link" href="example.com"></a>
<button id="button">Klick</button>
if your objective is only to have a link looking like a button then using css is better than having 2 elements
as a bonus it allow you to keep all of the <a> default behavior you might lose by using a button
a {
text-decoration: none;
color: inherit;
padding: 2px 25px;
border: 1px solid #b6b6b3;
border-radius: 3px;
background-color: #e0e0df;
}
a:hover {
background-color: #fafafa;
}
I'm a <a>
<button>I'm a <button></button>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I have several pictures of the same button, each one representing it in a different sate: normal, pressed, focused, disabled.
How can I make it into an html button that automatically shows the correct picture (and also has an onClick event) ?
Feel free to use html / css / javascript.
The tag also doesn't need to be a button, it could be an image, , or whatever you want, but hopefully written in a generic enough way for others to use your solution too
Thanks!
Just add a class to a link:
<a href="#" class='styledbutton'>Buttontext</a>
... and some CSS:
.styledbutton {background: url(defaultstate.png); display: inline-block;}
.styledbutton:hover {background: url(hoverstate.png);}
.styledbutton:focus {background: url(focusstate.png);}
You can make use of the CSS pseudo-selectors :hover and :focus to change the state of a button at various different interaction points, and simply tie a function into the onclick event in order to run additional JavaScript if required:
function buttonClick() {
console.log('Button clicked');
}
button { /* Default state */
background: white;
}
button:hover { /* On hover */
background: red;
}
button:focus { /* After a click */
background: blue;
}
<button onclick="buttonClick()">Button</button>
Keep in mind that this can also be done with an image by simply passing the image's path into background-image as a url() value.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
Currently I have my css set up like so:
.options {
position: absolute;
height: 50px;
width: 50px;
border: 3px solid black;
margin-left: 14%;
top: 0;
}
#opt1 {
margin-top: 5.4%;
}
#opt2 {
margin-top: 12.4%;
}
#opt3 {
margin-top: 19.4%;
}
#opt4 {
margin-top: 26.4%;
}
#opt5 {
margin-top: 33.4%;
}
That's a lot of code when I'm really only changing one element in the CSS. Would it be better to do this in Javascript? Or is it better for performance for the CSS to run this? I want to adhere to best practices and I'm not sure if this is an acceptable way to write this or if I should change something. Thanks in advance, I'm pretty new to this.
Edit: Why the downvotes? Did I say something incredibly stupid?
Edit2: Thank you for the explanation.
Without the knowledge of the context of your project:
Your way is fine.
What I do in cases like that is to use only one line per item, makes the code a bit more readable:
#opt1 { margin-top: 5.4%; }
#opt2 { margin-top: 12.4%; }
...
I don't see any reason to use JavaScript for styling your items.
Inline styling was proposed in another answer, if that makes sense depends on your project: do you need the id's for other things (JS)? Do you want all CSS code in one file or could your project be more readable with inline CSS?
As a conclusion:
There is no way around having a few lines of code, because every element has another margin value. No matter the method, you have to write that code in one form or another.
I'm not entirely sure what your concern with this code is, but assuming the #optX { margin-top .. } rules apply to only a single element ever on your page, just write it as one-off inline style on the element itself:
<div id="opt1" style="margin-top: 5.4%">
There's no reason to dogmatically put everything into an external CSS file when it's not even reusable.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Is it possible to make the trimmed borders by "border-radius" unclickable, and also not detecting you are hovering over it?
One way is to make the wrapping div and a tags also have a border radius...
.blackground > div, .blackground > div a {
border-radius: 100%;
}
.blackground > div a {
display:block;
}
The trick is to make the <a> tag the one whose size changes, because that's the element that determines the click area.
So you can do
.backgroud > div > a {
display: inline-block;
border-radius: 100%;
overflow: hidden;
}
Then remove the border radius (if you want) on the actual image.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have found a <div> element with class of .plainMail in a webpage and I want to be able to select all its text by pressing Ctrl+A.
I use Firefox 22. I was thinking about to turn the div.plainMail into a textarea. What can I do?
Update:
Can it be done via document.getElementsByClassName? because with document.getElementById I cannot do it. I use use GreaseMonkey.
I'm not sure about what you're exactly looking for, but you probably need HTML Content Editable attribute.
<div contenteditable="true">
This text can be edited by the user.
</div>
ONLINE DEMO.
By using JavaScript, you could add the attribute/value to the element as follows:
var d = document.getElementById("myelement");
d.setAttribute("contenteditable", "true"); // Or: d.contentEditable = "true";
UPDATED DEMO.
Can it be done via document.getElementsByClassName?
Sure (if you don't care about IE8 and below), but note that getElementsByClassName returns a NodeList of matching elements, not a single element.
Thus, we have to loop through the returned list to apply the attribute, as follows:
var i,
list = document.getElementsByClassName("content");
for (i = 0; i < list.length; ++i) {
list[i].setAttribute('contenteditable', 'true');
}
UPDATED DEMO.
while Googling I found this link. seems very nearest as per this question.
following css code can give a textarea effect to the div.
#div-textarea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
font: medium -moz-fixed;
font: -webkit-small-control;
overflow: auto;
padding: 2px;
resize: both;
}
http://blog.thinkingstiff.com/2012/01/22/how-to-make-a-contenteditable-look-like-an-element-or/
also think link contains this fiddle link..
http://jsfiddle.net/ThinkingStiff/FcCgA/