I'm currently making a facebook application and while investigating the (X)HTML source code for a message thread page to see if it was possible to link to specific messages within threads (apparently it's not), I encountered an HTML attribute that I cannot seem to find any information about. Some span elements on the page had a 'bindpoint' attribute that was set to various values (presumably element IDs). Here is an excerpt from the page source (I replaced some private info with Xs)
<div class="GBThreadMessageRow_Info">
<span class="GBThreadMessageRow_AuthorLink_Wrapper" bindpoint="authorLinkWrapper">
XXXXXXXX
</span>
<span class="GBThreadMessageRow_Date">
April 8, 2010 at 10:13pm
</span>
<span bindpoint="branchLinkWrapper" class="GBThreadMessageRow_BranchLink">Reply</span>
<span bindpoint="reportLinkWrapper" class="GBThreadMessageRow_ReportLink"> • Report</span>
</div>
I have never seen this attribute before and any information about it would be useful/helpful/interesting. Thanks!
As was said in the comments, it has to be something they're doing in the javascript code.
Facebook uses an interesting technique to import their javascript files dynamically (basically they seem to write out script tags in the javascript, when necessary), and it's not quite as simple as just pressing ctrl-F through the first file you find.
So, in conclusion, the bindpoint attribute is something internal to the Facebook eco-system, and not standard HTML. From the name, I assume it has something to do with which events (clicks, mouseovers, etc.) should be binded to the element in question, which is signified by a variable name give in the bindpoint attribute. Or maybe it has to do with which element the element in question should be 'binded' to, like the for attribute for a label. Anyway, this is pure speculation.
Related
Trying to determine the correct syntax for using Microdata inside my breadcumbs implementation. Everything I have read seems to lean towards the fact that the breadcrumbs are structured inside an ordered or unorderd list. Mine is not.
<body itemscope="" itemtype="http://schema.org/WebPage">
...
<div class="breadcrumbs" itemprop="breadcrumb">
Home
<span class="delimiter"> > </span>
Parent Item
<span class="delimiter"> > </span>
<span>Child</span>
</div>
...
</body>
If I run it inside Google's tool it seems correct, but compared to their example it is missing a lot of elements and doesn't have the structure of their example BreadcrumbList.
I'm also a little confused about the correct properties for the links. Should they all have title and url properties?
I was looking at the examples at the bottom of the page here: http://schema.org/WebPage
The breadcrumb property expects one of two values:
Text
BreadcrumbList
If you provide a Text value (like you do in the example), you can’t provide data about each link. If you are fine with that, the Microdata in your example is correct (but it also contains RDFa, which doesn’t seem to make sense, at least not without further context; so if you didn’t add them intentionally, you might want to remove the property attributes).
If you want to provide data about each link, you have to provide a BreadcrumbList value.
For the Microdata, it doesn’t matter whether or not you use a list. If the example uses ol→li→a→span, you could as well use something like div→span→a→span. You just have to make sure to use the correct element type.
If you can’t add parent elements to the a elements, it’s still possible to use BreadcrumbList. But then you would have to duplicate the URL with a link element inside the a element.
What is the significance of cmdValue in the input tag in the following:
<input type="button" value="Bold" cmdValue="bold">
This is from <div id="actions"> on a website.
I looked up the input tag on several HTML reference sites and searched for cmdValue in conjunction with the input tag, but could find no data.
That is not a formal HTML attribute for any known tag.
That is certainly a customized attribute added by the developers of that website.
I prefer to forward you to read the answers of this question.
The significance is whatever the CSS or JavaScript code for the page assigns to it. You would need to analyze the page in detail to find this out.
As such, the nonstandard has no effect beyond getting inserted into the DOM as an attribute.
Here is a nonstandard HTML element that I defined (AngularJS makes this easy):
<exercise id="Sample Exercise" language="Scala" lectureId="5437">
This is the text of the lecture
</exercise>
If I use this element in an HTML document, each time I switch from CKEditor's rendered mode to source mode a new empty paragraph is added between each of the block elements in the document:
<p> </p>
The 2nd time I switch, I get two insertions:
<p> </p>
<p> </p>
The 3rd time I switch, I get three insertions between each block-level element, etc:
<p> </p>
<p> </p>
<p> </p>
Can anyone suggest a workaround?
It seemed easier to avoid custom elements and so I used HTML5 data attributes.
<div class="exercise" data-id="Challenge #42" data-language="Scala" data-lectureid="5437">
<p>Create a program that outputs the meaning of life, the universe, and everything.</p></div>
This worked out. Maybe greater integration between CKEditor and AngularJS will evolve over time.
Pekka's question is very good - why do you need to load a custom element into CKEditor? Neither browsers (which do one part of WYSIWYG editing) not CKEditor (which does another part) know how to handle this element, what it means, how to render it and how editing features should work around it. For example, if I understood your question, you wrote about <exercise> that it is a block element. How do CKEditor and browsers know that it is a block element? :|
Second thing you should understand is that CKEditor is not a WYSIWYG website builder, but a "documents" editor. Its content has to have a meaning for it and that tag won't have it.
Anyway, if you must go this way, there are some things you can do.
Here are two answers that can give you an idea what you can do: CKEditor strips <i> Tag.
If you'll decide not to protect source of your <exercise> tags, but to render them, then you should also know about the CKEDITOR.dtd object, which I described briefly here: ckeditor how to allow for .insertHtml("<customTag myAttr='value'"></customTag>").
I came across with an issue where RTF field in TRidion 2011 is removing HTML5 tags while saving component.
Issue:
Source snippet
<div>
<a class="arrow button" data-role="button" data-inline="true" href="www.google.com">Information</a>
</div>
Tridion is saving above snippet
<div>
<a class="arrow button" href="www.google.com">Information</a>
</div>
In short Tridion is removing HTML5 attribute while saving the component.
Please give some hint to resolve above issue.
For this you can extend the RTF field to allow HTML5 tags for this you have to specify these tags in a file TcmXhtml.Config at the path
[Tridion]\web\WebUI\Core\Controls\FormatArea\TcmXhtml .
Tridion uses XHTML to store rich text fields. Since the attributes you specified are not valid XHTML, Tridion removed them.
You can modify the list of attributes and elements allowed in the Rich Text Area (see Ram's answer) but keep in mind that you are now allowing these attributes to be used in all Rich Text Fields, and you have to consider the impact of this change to your whole environment. If you're doing this as a quick work-around a design limitation (which is what it sounds like) remember that EDITORS will have to do the same. Structure data shouldn't necessarily be in a RTF, and perhaps certain elements of your output should be handled by a template and not by an editor.
In the \Tridion\web\WebUI\Core\Controls\FormatArea\TcmXhtml\TcmXHTML.config file, update the tag "drop-proprietary-attributes" to be "false":
From: drop-proprietary-attributes: true
To: drop-proprietary-attributes: false
Restart the COM+ and clear the browser cache.
To answer my question, take a look at the following entry in our Knowledge Base:
http://tridion.kb.sdl.com/kb/?ArticleId=4065&source=Article&c=12&cid=19#tab:homeTab:crumb:7:artId:4504
Additionally, you can add other HTML 5 tags in the configuration file mentioned in the article above.
For example, if you wanted to stop the following tags from being removed, add:
new-blocklevel-tags: article aside canvas details figcaption figure footer header hgroup nav output progress section video
new-inline-tags: audio datalist mark meter summary time
new-empty-tags: command source track
For various reasons that are beyond the scope of this question, I am using an adhoc html parsing class written in python. This simple class has been so far sufficient for the kind of input it was fed but it recently tried to parse http://forum.macbidouille.com/index.php?showtopic=160607
This webpage is obviously automatically generated by some php code but it contains user-generated html which are included verbatim as a signature for each post. Most notably, http://forum.macbidouille.com/index.php?showtopic=160607#entry1563022 contains the following HTML (comments removed and tags indented for clarity):
<div class="signature">
<span style="font-family:Verdana">
<span style="color:#8B0000">
<span style="font-size:12pt;line-height:100%">
<div align='center'>La Culture coûte cher, mais l'inculture coûte encore plus cher à la Société. <br />
<span style="font-size:8pt;line-height:100%"><i>Marcel Landowsky</i></span>
</span><br />
</div>
</span>
</span>
<div align='left'><br />macbook unibody 10.6.8 - 2.26ghz - 4Go- 250Go - <br />Je n'ai pas de télévision !</div>
</div>
As should be obvious from the above, there is a stray tag that is closed too early. i.e., we have invalid HTML here. Nothing extraordinary but this is sufficient to make my parsing code fail. Specifically, so far, that parsing code has a very simple error handling strategy: it merely tries to match each closing tag with the currently opened tag and if the closing tag does not match, it is ignored.
In the case of the above code, this results in ignoring on line 7 because it does not match the currently open tag from line 5 and then ignoring on the last line because it does not match the currently open tag on line 2. The result is that all the html that follows this block is assumed to be hierarchicaly included within the first tag which leads to other problems later.
What I would like to achieve is to 'synchronize' the parsing state better and I wonder what kind of simple approach would lead to a parser that can handle this block of html. I can see how I could try to minimize the number of closing tags thrown away once I have completed the parsing by re-arranging the generated tree but I am looking for a simpler solution.
I know that the first answer will be: "use library X" and this is likely what I am going to end up doing but I am actually curious as to what kind of interesting parsing and error handling strategies could be used in this case. i.e., I am trying to get educated :)
thanks!
Your best bet is to try to parse (and fix) the user-supplied HTML first, otherwise you may end up with all kinds of the original DOM structure corruptions. First off, I guess, you should check user HTML for the tag nesting and sanitize it (i.e. the </span> has no corresponding start tag, so it should be removed). If you have an HTML-only parser, enclose the user HTML in <div>..</div> before parsing - this should do the trick.