I've already asked question similar to this some time ago, I thought I solved my problem but now it appears I didn't. Dealing with this problem for some time now and I have absolutely no idea how to do it.
The answer I got from previous question works but when I resize the window the password label drifts away when you re-size the window. And it doesn't position all the same in the FF(3.0.5) but it does in FF(3.5.6) and IE7, but again all have the same problems when window is re-sized.
What I'm trying to do is to put label behind input and by doing so it appears that input has 'Password' value. Does anybody know how did the facebook solve that problem?
www.facebook.com look at the login form, the password field .. when you click on it the password disappears and you type your password in.
Another useful link I got for this is http://dorward.me.uk/tmp/label-work/example.html from David Dorward, but he uses jquery and I'm allowed to use either only prototype or pure javascript. Can I get any help/comments/hints/tricks I've been dealing with this for some time now I'm just out of ideas.
Thank you
That technique is called watermark and on the internet there are some plugins for the js frameworks and tutorials to do it with pure javascript.
I think that Facebook is using a little workaround to show a watermark with clear text on a password field: the real password field is hidden and you're showed a text field with the password hint. When you click on the field the placeholder element is removed from the dom and the real password field is showed.
The problem here is not the JavaScript (so the use of a library in the example doesn't matter).
It is basic CSS positioning.
You need to establish a containing block to position the label and the input inside. That way, all the positioning is with respect to that block, and it doesn't matter about the position of everything else on the page.
Set position: relative on an element to establish this. The example does there here:
body.js .slim-control {
position: relative;
height: 1em;
}
Consider using CSS background images for this. Create two (transparent) background images with the desired text and define it in a class. Display it by default on empty fields. Use the JS focus event to remove the class associated with the image and use the JS blur event to check if there is no value and add the class associated with the image.
Related
I'm writing a chrome extension which helps the user type things on twitter. When writing a tweet on twitter, twitter opens an editable div container. When the user types into it, twitter (which is using some web-framework presumably) generates sub-divs and spans with the text the user types and places them within the content-editable div.
The thing is when one manually changes the span value (for instance, through inspect elements), and then types something again, the value in the span will just revert back to what it previously was (before the inspect elements edit). This is probably because the actually typed string is stored somewhere in javascript, and everything gets overwritten again when the user types into the div.
I've been trying to find a way around this using JQuery but with no success. I don't really know how to start. If it were just a regular input tag, you could call something like $("input").val("new value"), easy-peasy... but I don't know how one could go about doing that for an editable div that gets updated by javascript running somewhere on the page.
For a while, I just thought it would be impossible...
BUT NOW I do know it is possible. If you download the Grammarly extension and use the Grammarly popup-editor (which opens a new window to edit text), then submit that, the twitter editable-content div updates appropriately and everything works like magic.
Sorry if this isn't a standard programming question, but I couldn't find anything on the web that comes close to what I'm trying to do. Maybe I'm just not experienced enough and am missing something really obvious. I tried looking at the twitter and Grammarly source code but it's all minified garbled javascript that I can't read...
Thanks for any help and insight!
EDIT: the twitter url in question is: https://twitter.com/compose/tweet The div in question is the one with contenteditable="true" attribute (you can search it in the inspector)
I have created custom Issue Tab Panel with field, where I can add comment when Ill press my custom button “add comment”
In my VM template I have
AJS.$("#add-comment-button").click(function(e) {
e.preventDefault();
AJS.dialog2("#add-status-comment").show();
});
This button works fine and window to write text appears, but… In other section in Issues --> Current Search —> Views (Detail Views), windows with space to write text dont appear when I click button “add comment”. It only appers in normal view of issue… Whats problem?
I'm not sure if I understand your question right so I'll give it a try. Maybe it helps in one or the other way.
As you didn't provide the code affecting the window I assume it is possible you are retrieving the issue key or issue id. There are some Jira JS calls that don't work in every view. The reason is unknown to me, but maybe if you use different calls it will work.
Here is the question and answer to this field availability problem on the atlassian community: https://community.atlassian.com/t5/Jira-questions/Get-issueID-in-JavaScript-in-Project-Screen-viewing-issue/qaq-p/824175
Otherwise you should provide some more information.
Regards
Chris
I am trying to put a few text inputs on the same web page as where I have a d3.js svg element. I append the svg to a div within the html, and then have the form in the <body> before this div. The text input appears, but I am not able to edit it on either Firefox or Chrome. As soon as I don't include the d3.js script on the page, the form element works fine. What could be happening to cause this? I already have some standard html buttons, and they are working fine.
Here's what I've tried.
Renaming the text input and making sure neither its name nor its id clash with anything existing.
Explicitly setting the readonly property to false in javascript
What else can I try? I don't see anything all that on point in SO but apologies if I missed something.
Make sure no part of the content that D3 creates overlaps your textbox. If you can get to the textbox by tab:ing, it could just be stuck behind some invisible content. Try positioning stuff differently to overcome this if it seems to be the issue.
How do I make ASP.net labels display dynamically, that is, they should not take up any whitespace when not being used.
I have a good chunk of error message labels at the bottom of a form, which are set to remain hidden until the user makes an error on one of the text boxes (does not pass validation). This works, and they remain hidden; however, they still take up their respective white space, which causes the form to look goofy and unprofessional since there is a huge chunk of whitespace in the middle of the page.
I would like to make them appear, and only take up space, as needed, hopefully setting them to appear either in javascript or my vb.net codebehind. Creative solutions are welcome.
Sorry if this is a google-it type question, I did make an earnest effort to find it online and my googlefu was not strong.
A good control to use for validation messages is the validation summary control. In your code behind you can add your own errors as well as some automatic validations (i.e. required fields, etc)
I think the best way is to replace asp.net label with literal and wrap the literal with div. Then, you can hide or show the div. You won't need br tag.
I have placed labels in my input fields to have explanatory text display in the background and when the user types in the field, the text disappears. I'm using the example explained here: How to create a label inside an <input> element?
and specifically at http://attardi.org/
When the password though is saved by the browser such as in Google chrome, the text becomes garbled as in this image (this is currently on my local computer):
The background text is not disappearing for saved passwords. Any help would be appreciative - thanks.
You could also take advantage of the new placeholder attribute. Read about it here.
No IE support, though.
Option 2 would be using Jquery. Since you're already using Jquery for the label solution, you could add code that checks the value of the input after the document has loaded then show or hide the label accordingly.
This code would go inside the document ready function:
$(function() {
// Handler for .ready() called.
});
Just use the placeholder attribute – it's so simple:
<input type="email" placeholder="email" />
Literally, that's it; the browser will take care of the behavior.
Yes, it won't work in IE (until IE10 is released) – but you've already got labels next to the fields anyway, so it's not like IE users won't be able to tell which fields are which.
I investigated further, and this only occurred in Google Chrome and not Mozilla Firefox. My setup was correct and looks like it might in fact be a bug in Chrome. See issue log: http://code.google.com/p/chromium/issues/detail?id=117661
This also looks like it will occur for the placeholder attribute too when Chrome tries to do password autosave process and doesn't look to see if there is a previous inputted value.
Thanks for the input from all.