Make only part of a html anchor clickable - javascript

I'm looking for something like this
<p>This website is open source. Made by ...</p>
But having all the text in one same tag/line and specify the link with css or javascript or maybe an even better html usage. I'm in react if that changes anything.
The reason I want to do this is because I am using i18next, to create a multilingual website and if I have 3 text elements (before, link and after) I unnecessarily need 3 entries to my translation json file, which when scaling up is impractical and also screams bad practice.
Think about the text as an incoming variable that needs to filter out the text to select as a link. I can only think of really dirty javascript ways of doing it, ideally I'm looking for a reusable solution.
Thanks!

Related

<code contenteditable="true"> tag VS WYSIWYG editor in order to achieve dynamic multi-color effect

I need to create a web application with a feature
that the user is entering some text to a "text area" and the text need to be dynamically colored with multiple colors, according to some logic, via event that will be raised when the text is changing.something similar to that: Regex101 just more basic (only multiple colors).
Constrains:
I don't want to use external sources or libraries.
no need for compatibility to old browsers.
I am using angular 2 with type script.
Options:
I did a research and (i think) i found 2 ways to achieve that result:
write my own version of WYSIWYG (btw, is that approach can be implemented dynamically?)
use the <code> tag and set contenteditable="true" with multiple spans as it is explained in that marked answer: Multicolor Text Highlighting in a Textarea or Text Input
According to your experience what is the approach that is more suitable for that task?
Or maybe I am missing something and there is a better approach?
I just need guidance in what way to go.

Altering a page from another site

Sorry for the vague question name - didn't know how to phrase it.
I have built a PHP engine to parse web pages and extract phone numbers, addresses etc.
This is going to be used by clients to populate an address book by simply entering a new contacts web address.
The problem I am having is useability:
At the moment the script just adds each item (landline number, fax etc) to a different list box and the user picks the correct one - from a useability standpoint this is hard work (how do you know which is the correct contact number without looking at the site)
so my question (finally!)
How would achieve the functionality of
http://bartaz.github.io/sandbox.js/jquery.highlight.html
On someone else website (I have no problem writing this functionality).
FOR CLARITY**
I want to show someone elses site (their contact page for example) on my site BUT I want to highlight items I have found (so for example add a tag around a phone number my php script has found)
I am aware that to display a website not on your domain an iFrame would be used - but as I need to alter the page content this is useless.
I also contemplated writing a bookmarklet that could be run on that page - but that means re-writing my parsing engine in javascript and exposing some of my tricks to make it accurate.
So I am left with pulling the page by cURL and then trying to match up javascript files, css files etc. that have relative URLs
Does anyone know how best to achieve this - and any pitfalls that might befall me.
I have tried using simple html dom parser - but it is tricky to get consistency and I also dont know how having two sets of tags, body tags etc. would affect sites.
If anyone has managed this before and could point me to the tools / general methods they used I would be eternally grateful!
PLEASE NOTE - I am very proficient with google and stack-overflow and have looked there first!
The ideal HTML solution
The easiest way to work around the relative paths for an arbitrary site would be to use the base href tag to specify the default relative location (just use the url up to the filename, such as <base href="http://www.example.com/path/to/" /> for the URL http://www.example.com/path/to/page. This should go at the top of the head block.
Then you can alter the site simply by finding the relative parts and wrapping them in your own tag, such as a span. For the formatting of these tags, the easiest way would be to add a style attribute, but you could also try to insert a <style> tag in the <head>.
Of course, you'll also need to account for badly made webpages without <html>, <head> or <body> tags. You could either wrap the source in a new set of these tags, or just put in your base and style tags, hoping that the browser will work out what to do.
You probably also want to make this interactive, so you should also wrap them with some kind of link, and ideally you'll insert some javascript to handle their actions by ajax. You should also insert your own header at the top of the page, probably floating at the top, so that they know they're using your tool. Just keep in mind that some advanced pages might then conflict with your alterations (though for those cases you could have a link saying 'is this page not displaying correctly?' to take the user to your original basic listbox page as a backup).
The more robust solution
Clearly there are a lot of potential problems with the above, even though it is ideal. If you want to ensure robustness and avoid any problems with custom javascript and css on the page you're trying to alter, you could instead use a similar algorithm to that used in text based browsers such as lynx to reformat the page consistently. Then you can apply your algorithm to highlight the relevant parts of the page, and you can apply your own formatting as well without risk of it not displaying correctly. This way you can frame it really well and maintain your interface.
The problem with this is that you lose the actual look of the original page, but you should keep the context around the numbers and addresses which is the important thing. You would also then be able to use some dynamic javascript to take the user to each number and address consecutively to improve the user experience. Basically, this is rigorous and gives you complete control over the user experience, but you lose the original look of the website which may or may not confuse your users.
Personally, I'd go for the second option, but I'm not sure if anyone's created such a parser before. If not, the simplest thing you could do would be to strip the tags to get it as plain text. The next simplest would be to convert it into some simple text markup format like markdown, then convert it back into html. That way, you'd keep some basic layout such as headings, italicised and bold text, etc.
You definitely don't want to have nested body tags. It might work, but it'll probably mess up your formatting and be inconsistent across browsers.
Here's a resource I found after a quick Google search:
https://github.com/nickcernis/html-to-markdown
There are other html to markdown scripts, but this was the more robust from the few I found. I'm still not sure though whether it can handle badly formatted pages or ones with advanced formatting, try it out yourself.
There are quite a few markdown to html converters though, in fact you could probably make a custom converter yourself quite easily to accommodate your personal needs.

Designing a Filter

The question is no more relevent.
I just wanted to add that if anybody encounter a need for filtering HTML, I would propose using a MutationObserver (That was my final choice ..)
Read a bit more on DOM manipulation, it will help. Yes, using content scripts here is the right way to go. You'll want to have your script run at "document_start" which is run before Chrome begins parsing the DOM (that way you'll get a head start, essentially) You could do this filtering a few ways actually;
Just use the DOM as one big string, and remove the words you want. However, this is a messy way of eoing things, if something important was named after your word (like a class, tag name, or whatnot), you'd break the DOM.
Loop over the text nodes (strings) in a DOM as soon as the DOM is ready, and replace and edit those text nodes.
There's tutorials detailing this kind of thing you can find online easily, along the lines of DOM manipulation and text node replacement. This article details it much more intimately and better than I have here: Replacing text in the DOM...solved?
And here is a JS library (from the same guy who wrote that article) which practically does all the hard work for you: https://github.com/padolsey/findAndReplaceDOMText
The way I would approach this is through a jQuery/other framework plugin. I would suggest you take a look at some highlight plugins that are available in pretty much every framework around. See here for some examples of doing highlighting.
Essentially what you'll need to do is select heading tags p tags and spans and loop over each replacing bad words.

How to use zeroclipboard on html links?

I've been messing around with this for a while now but I can't seem to get it the way I want. I basically have a table with links in the rows of a table. How would I get each table item to copy the text that's in the row using ZeroClipboard? Do I really need to put some invisible dom over each one?
http://code.google.com/p/zeroclipboard/wiki/Instructions
Zeroclipboard will make the invisible flash block that goes over your regular DOM elements and does the copy. You have to tell it where it should be positioned (there are a bunch of different ways to tell it where to go) and you have to give it the text that should go on the clipboard when clicked. It will handle all the rest. The instructions are fairly good if you follow them. Feel free to ask more specific questions about it if you get stuck.
In direct answer to you question - yes, you do have to put an invisible element over each page element that you want to copy something to the clipboard. But the zeroclipboard library will do most of the work for you if you follow the directions.

Is there a way to create your own HTML element?

Is there a way to create your own HTML element? I want to make a specially designed check box.
I imagine such a thing would be done in JavaScript. Something akin to document.createHTMLElement but the ability to design your own element (and tag).
No, there isn't.
The HTML elements are limited to what the browser will handle. That is to say, if you created a custom firefox plugin, and then had it handle your special tag, then you "could" do it, for varying interpretations of "doing it". A list of all elements for a particular version of HTML may be found here: http://www.w3.org/TR/html4/index/elements.html
Probably, however, you don't actually want to. If you want to "combine" several existing elements in such a way as they operate together, then you can do that very JavaScript. For example, if you'd like a checkbox to, when clicked, show a dropdown list somewhere, populated with various things, you may do that.
Perhaps you may like to elaborate on what you actually want to achieve, and we can help further.
Yes, you can create your own tags. You have to create a Schema and import it on your page, and write a JavaScript layer to convert your new tags into existing HTML tags.
An example is fbml (Facebook Markup Language), which includes a schema and a JavaScript layer that Facebook wrote. See this: Open Graph protocol.
Using it you can make a like button really easily:
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>
The easiest way would be probably to write a plugin say in Jquery (or Dojo, MooTools, pick one).
In case of jQuery you can find some plugins here http://plugins.jquery.com/ and use them as a sample.
You need to write own doctype or/and use own namespace to do this.
http://msdn.microsoft.com/en-us/magazine/cc301515.aspx
No, there is not. Moreover it is not allowed in HTML5.
Take a look at Ample SDK JavaScript GUI library that enables any custom elements or event namespaces client-side (this way XUL for example was implemented there) without interferring with the rules of HTML5.
Take a look into for example how XUL scale element implemented: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/elements/scale.js and its default stylesheet: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/themes/default/input.css
It's a valid question, but I think the name of the game from the UI side is progressive markup. Build out valid w3 compliant tags and then style them appropriately with javascript (in my case Jquery or Dojo) and CSS. A well-written block of CSS can be reused over and over (my favorite case is Jquery UI with themeroller) and style nearly any element on the page with just a one or two-word addition to the class declaration.
Here's some good Jquery/Javascript/CSS solutions that are relatively simple:
http://www.filamentgroup.com/examples/customInput/
http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery
http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
Here's the spec for the upcoming (and promising) JqueryUI update for form elements:http://wiki.jqueryui.com/Checkbox
If you needed to validate input, this is an easy way to get inline validation with a single class or id tag: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
Ok, so my solution isn't a 10 character, one line solution. However, Jquery Code aside, each individual tag wouldn't be much more than:
<input type="checkbox" id="theid">
So, while there would be a medium chunk of Jquery code, the individual elements would be very small, which is important if you're repeating it 250 times (programmatically) as my last project required. It's easy to code, degrades well, validates well, and because progressive markup would be on the user's end, have virtually no cost on the server end.
My current project is in Symfony--not my choice--which uses complex, bulky server-side tags to render form elements, validate, do javascript onclick, style, etc. This seems like what you were asking for at first....and let me tell you, it's CLUNKY. One tag to call a link can be 10 lines of code long! After being forced to do it, I'm not a fan.
Hm. The first thought is that you could create your own element and do a transformation with XSLT to the valid HTML then.
With the emergence of the emerging W3 Web Components standard, specifically the Custom Elements spec, you can now create your own custom HTML elements and register them with the parser with the document.register() DOM method.
X-Tag is a helpful sugar library, developed by Mozilla, that makes it even easier to work with Web Components, have a look: X-Tags.org

Categories