On the sign up page for Tumblr, it has three boxes, one for password, one for email, and one for your url. What interests me is the URL bit. Whatever you type is followed by .tumblr.com. You can't put the cursor after it or highlight it or delete it. How does it do that?
I check the source and it has the attribute data-ghostwriter=".tumblr.com". I didn't recognize it, so I googled it, and still nothing. I'm assuming it's a custom attribute, even though that seems like something that HTML would have rules against, but I can't find anything about it in the linked javascript files.
So, two questions. How do they do it, and can you use custom HTML attributes?
edit: So html5 allows data- custom attributes and using jsbeautifier, the code their inputs is:
http://pastebin.com/b5Yd51Mi
How does this work though, I'm still a bit confused.
The "data-" attributes are explicitly allowed in HTML5. Anything can follow "data-" (well, anything within bounds of some reasonable syntactic rules for HTML attribute names). Generally you'd access the values with the "getAttribute()" method on HTML element nodes.
Now, while all that's true, it's a little fishy that tumblr is serving up those pages with an XHTML doctype :-)
This older SO question describes how the effect is done. They position a translucent box right over the input field. When you start typing, they make the box visible and fill it with two <span> elements: the first, with a copy of what you've typed, styled to be dark like text in the real input field, and the second, with the static ".tumblr.com" suffix, and styled to be light grey and "ghosty".
Related
I'm working on a Chrome Extension which I want to replace certain characters in a specific text field on one specific website. It is basically to change emoticon text (like ":-D") into the proper emoji's, such as "😄". I tried a few things I found online (I'm not very good with JS):
- A MutationObserver and then look for all text fields with a certain name, then replace all emoticons by hand. Didn't really do the job properly and also kept firing up the print window for some reason
- Event listener added with event 'keyup' but it doesn't seem to fire up.
Hope you guys know a good solution!
This question does not give anywhere near enough information to answer. Are you using the program for input fields on the website? What solutions have you tried? Where is the code? Essentially, you are asking us to write the entire program for you. This forum is meant for programming help, NOT doing the entire program for you. You need to fix the question to be more specific.
If you just want to replace text elements, you would have to use the select elements by tag name to select all text elements on the page and then search through each of these for the sets of emoticons. Once finding these, you would have to change the elements inner html to fit the emoticon from UTF-8.
I've spent hours on this one.
My company is forced to use a non-user-friendly 3rd party website. We only use IE11. My job is to use javascript and jquery to customize the screen and make things a little easier for our users. I use a bookmarklet to insert <script> tags into IE and reference a .js file saved locally.
This website uses hundreds of input text fields but we only need a handful of them. So, I want to highlight input text fields on the screen.
Some fields have ID's some only have Name. For the most part, this works:
$(document.getElementById('s_3_1_18_0').toggleClass("highlightField");
$(document.getElementsByName('s_3_1_19_0')[0]).toggleClass("highlightField");
HighlightField simply adds CSS background-color: yellow !important
The problem is, this 3rd party app changes the ID and the Name in bizarre ways. One day, the name will be 's_3_1_19_0', the next it will be 's_3_2_48_0'. So highlighting using this method is not stable.
However, these fields have an area-label that stays constant. I'm wondering how to use javascript or jquery to iterate through each text box, looking for a specific aria-label. For example, the "valid to" field has a bizarre name that changes all the time but it's aria-label is always "Valid To".
Can anyone please help me with this?
You can find the input with the aria-label "Valid To" by searching for
$(document).find('input').attr('aria-label', 'Valid To');
I recommend being a little bit more specific than $(document), though. That searches the entire doc.
You can use jquery to get the list of all aria-label attributes and use a switch case to perform what you need. Something like this
switch ($(this).attr('aria-label')) {
case 'label1': {
//do something
break;
}
}
I've been creating a calender box widget (one of those little div-popups that allows you to select a date).
All's pretty much done on it short of one feature: When you create the object, you send it a field (the field that will contain the date); because of a (really) weird set of requirements, this field cannot have an easily readable format (YYYYMMddhhmmss) and so my script hides the field, and drops a div with similar styling in its place. I haven't found a way to neatly drop a div in as a sibling to the field AND right next to it (as opposed to appended at the end of the parent).
How can I take a field by ID as an argument, hide it, and drop a div in it's place at the same location?
If I could drop it, in the HTML, directly after the field, I could copy it's CSS over to the DIV (or a new field, even) and no one would be the wiser; references to the old field would still be valid, and humans could easily read the new field, but as is, the best solution I've found is to have the object take two parameters, one for the target field and one for the target div. It's not ideal.
jsFiddle: Full Project (I'm so, so, SO incredibly sorry for the widget's name. It's bad even by pun standards.)
jsFiddle: Simplified Example (Includes chosen answer)
PS:
I only have one real goal in this project: to minimize dependencies. This widget is replacing an old one my company used for ages which, over time, accumulated a dozen and a half modifications (each in different files) and needed at least as many style sheets and existing plugins. No one really knew what was going on with it. As is this one needs only jQuery, no other scripts, no other style sheets...
...I'd like to keep it that way...
http://api.jquery.com/after/
$('yourelement').hide().after(newDiv)
I've to build a web-based tool which lets an user change the CSS style of form elements.
E.g. a form contains of two labels, two text fields and a button. The user should now (somehow) be able to set styles like color:red, border:1px or text-align:right (or in any other way define such stuff). This settings should be check (if valid or not) and saved.
In any circumstance it shouldn't be possible to perform an injection attack or to destroy or change (e.g. by removing a text field) the form.
Right now, I'm just seeking for some ideas of how I could handle this request or if there are some useful libraries (PHP, JS, ...). So if anyone want to share his mind if me, I'm more than glad.
This link may be of help http://wrapbootstrap.com/preview/WB0412697
This page makes use of style switcher and the Bootstrap plugin, which changes the colour of the page according to what you select, referring to the code of this 'style switcher' may be the resolution to your problem.
I'm trying to create an editable text field in a page which highlights the edits made by the user to the text as it is being edited. For instance, text inserted or changed by the user should appear against a colored background, deletions should be indicated by adding a colored background to the neighboring characters (or maybe some kind of symbol?)... It seems to be much harder than I thought to do this in Javascript, and I am surprised that I couldn't find any code already implementing such a text field.
Do you know of anything which implements what I'm looking for?
Thanks!
You should have a look at Google's Diff, Match and Patch libraries for Plain Text which are open source and available in JavaScript among other languages.
Diff demo.
Step1->
Store the original value in a variable V1
Step2->
Store the modified value in a variable V2
Step3->
For each word in V2 [word are divided by at least a single space] check it against the V1, if it's not same HIGHLIGHT it with HTML tag !