So I have googled it and i didn't find any solution there so I am posting my question in here.
So when you write in etherpad, it creates markup which looks like this:
<div id="magicdomid17" class="ace-line">
<span class="author-a-w3z75zz84z95z83zpz77zz89zz66zz79zxz90zz66zcz76z">
Author1.
</span>
<span class="author-a-1z74zz83zuz82z2z67zz815zsz89zz70zz65z8z69zz87z9">
Author2.
</span>
</div>
Now It will output this:
Author1.Author2.
Having different background colors for Author1. and Author2. texts depending upon what writers chose when they started using etherpad.
My question is how etherpad process the data to put background color on specific text.
I know it has something to do with classes given to span as:
author-a-w3z75zz84z95z83zpz77zz89zz66zz79zxz90zz66zcz76z for first author
and
author-a-1z74zz83zuz82z2z67zz81zsz89zz750zz65z8z659zz87z9for second author.
Can anyone explain how the background-color is being put for these texts depending upon these classes name? and which file is responsible for that?
Thanks in advance
So as most of the etherpad questions, no one answered this question either. I got the solution if anyone got same problem for deciding text color depending upon class name.
All you need is define a object variable in your front end js file where you are using the etherpad. In this var we will take author class name as key and its respective color as value.
var window.authClassColorObj = {};
Now go into ace2_inner.js file and find function setAuthorStyle() , add these lines in that function after var authorSelector = getAuthorColorClassSelector(getAuthorClassName(author)); line:
parent.parent.parent.window.authorClassColorObj[getAuthorClassName(author)] = info.bgcolor;
Now i am accessing my front end object var by three layer in, so i am using parent.parent.parent. , it can be different for you depending upon you file structure.
Idea is that this is the place where you can populate your object with proper values.
and then you can access your object from front end, for example for my case, it will out put this:
console.log(window.authClassColorObj);
Output:
object{
author-a-w3z75zz84z95z83zpz77zz89zz66zz79zxz90zz66zcz76z:"#f50966"
author-a-1z74zz83zuz82z2z67zz815zsz89zz70zz65z8z69zz87z9:"#20a251"
}
This info can be used further for any changes you want to make in pad html code.
Related
So I'm trying to webscrape this website that provides novels for free, for example this page: https://www.wuxiaworld.com/novel/martial-world/mw-chapter-1
I'm trying to only extract the title and the body of the chapter. Finding the title is easy enough since its in h4, however the body of the chapter is not separated by any specific div tags so I cannot just isolate it. I was wondering how I'd do this. The closest Ive gotten to just having the text is this.
Ps. Im new to webscraping, sorry if my question is unclear or stupid.
I tried to identify if the body of text was under any exclusive div tag but it wasn't, so i tried to call it under whatever the closest div tag was, this still returned a lot of useless and unwanted text.
edit : #koro, there's more than one instance of fr-view being used so it doesn't isolate the text. fr-view class also appears before the chapter text.
I'm not versed in webscraping but upon reviewing the page source html I see that <div class="fr-view"> only precedes the body text on the novel pages. If you start the logging after the scraper identifies this line you should be able to stop at the very next <a href="/novel..... tag to only have the novel text included.
Some of the pages I see also include footnotes with some extra information, these include an <a href=#footnote....> tag, so if you would like to keep the footnotes included I would search for <a href=/novel...> and NOT <a href=...>
P.S. I only looked at 4 pages and while they all appear to have the same format that I've pointed out above it's still possible that you may run into issues, but that's definitely something you can a bridge you can cross when you get there!
We've noticed a bug when looking at French search results. in the CMS Desk, i've kept the Page Name in English for the French content. The issue is, these are showing on the French results page.
in the transformation, based off the default one, I present the clickable title like this:
<a href='<%# SearchResultUrl() %>' data-type="title" target="_blank" ><%#SearchHighlight(HTMLHelper.HTMLEncode(CMS.ExtendedControls.ControlsHelper.RemoveDynamicControls(DataHelper.GetNotEmpty(Eval("Title"), ""))), "<span class='highLight'>", "</span>")%></a>
Here's my thinking, if the Menu Caption is filled out, use that rather than title. How do i output DocumentMenuCaption without adjust the search fields on the menu page type?
I think my logic is, check if DocumentMenuCaption is emtpy, if it use, use Title.
You should be able to continue using GetNotEmpty and just pass in the DocumentMenuCaption first, something like this:
<%# GetNotEmpty(GetSearchValue("DocumentMenuCaption");Eval("Title")) %>
You may or may not need the "GetSearchValue" function, but that allows you to grab values from the object that may not be available in the default set of columns for the search results.
Alternatively, you should be able to use the IfEmpty() method:
<%# IfEmpty(GetSearchValue("DocumentMenuCaption"), Eval("Title"), GetSearchValue("DocumentMenuCaption")) %>
Both transformation methods taken from here (double check syntax on "GetNotEmpty" as there are different ways it's implemented: https://docs.kentico.com/k9/developing-websites/loading-and-displaying-data-on-websites/writing-transformations/reference-transformation-methods
You can read more about the search transformations here: https://docs.kentico.com/k9/configuring-kentico/setting-up-search-on-your-website/displaying-search-results-using-transformations
I am running an experiment in which we are trying to train people to be synaesthetes (they have additional experience of colour associated with numbers or letters).
I wondered if anyone has some advise about the easiest way to modify a web browser, such as firefox, so that just 10 letters A-J would always be displayed in a specific colour on any page they visited on the web?
Much appreciated
There are many ways to do this (cross-browser):
For example you could define a -element in a stylesheet to have a different color.
When loading the document, you check via JavaScript/jQuery the whole document (but only the contents of tags like ) for your specified letters and add the -tag f.e. around them.
Not the best solution, but a way.
Take a look at Greasemonkey, a FireFox plug-in designed to do this kind of thing. There are lots of pre-made scripts available at http://userscripts.org/, and several of them look like they'd help you figure out how to write your own to re-color single letters.
Here is just an abstract rough draft of a blueprinted preliminary form of a beta version of a potential solution: using the javascript: prefix of links in a bookmark as follow.
Create a new entry in your bookmarks toolbar
In the URL input, copy/paste the following line: javascript:var html = document.body.innerHTML; html = html.replace(/([a-j])/ig, '<span style="color: red;">$1</span>'); while(html.match(/(<[^>]*)<[^>]+>([^<]+)<\/[^>]+>([^>]*>)/g) != null) {html = html.replace(/(<[^>]*)<[^>]+>([^<]+)<\/[^>]+>([^>]*>)/g, '$1$2$3');} document.body.innerHTML = html;
Give your bookmark a name (e.g. "A-J to red") and save
You can now visit any website and click on that bookmark, which will put all letters between a and j in red
In a more digest way:
// get the content of the body
var html = document.body.innerHTML;
// surround any letter between a and j by a <span></span>
html = html.replace(/([a-j])/ig, '<span style="color: red;">$1</span>');
// but it also replaces a-j letters within html tags
while(html.match(/(<[^>]*)<[^>]+>([^<]+)<\/[^>]+>([^>]*>)/g) != null) {
// so if there are html tags within other html tags, delete the created <span></span>
html = html.replace(/(<[^>]*)<[^>]+>([^<]+)<\/[^>]+>([^>]*>)/g, '$1$2$3');
}
// and replace the innerHTML of the body
document.body.innerHTML = html;
That's really not a final solution, but yeah, maybe you could work on it to improve the results.
PS: don't try with IE...
I have been working on a Spotify app which displays a track listing using code like this:
var tpl = new models.Playlist();
var tempList = new views.List(tpl);
body.document.appendChild(tempList.node);
tpl.add(track1);
tpl.add(track2);
...
tpl.add(trackn);
However, this only displays the contents of the columns and doesn't display the headers (Track, Artist, Album, etc.).
Ideally I want to include these, as the ui guidelines say "For best clarification please add a header of column descriptions to your tracklist".
Is there a standard way to include these headers, or does this require something custom (in which case I would think it might be tricky to line them up exactly with the columns)?
You should be able to restrict to a specific size. Use the inspector to figure out all of the class names and then set each field to be a certain width, then you should be able to put a div above the list with the same class names and the header text there.
For instance:
.sp-track-field-name { width: 150px; }
Then
<div class="list-header">
<span class="sp-track-field-name">Title</span>
</div>
<div id="playlist" />
Where playlist is the node you attach the List view to.
Otherwise, use javascript to get the actual width of the columns and set it programmatically
Gmail introduced a trimming feature in emails for "better readability". This causes a lot of pain for me, as I have a notification system for email, where I send some html email messages to users. Basically email looks like this:
divs and styling
Object alert in Project by User
tables and tr/td
User Action on Object in Project
/tables and tr/td
/divs and styling
link
footer
To group all emails in one conversation, first email has subject, subsequent emails have Re: subject.
Active users can receive significant amounts of emails like this, but due to "better readability" feature, ALL of the email content (starting from second email) is suppressed.
I am looking for advice - maybe I should redesign my html, or gmail has some anti-suppression code, or just a hack to go around this issue.
Issue from users perspective is described here: http://www.google.com/support/forum/p/gmail/thread?tid=756b83fa60ca1df7&hl=en
I had the trimming problem occurring on a table of an HTML newsletter.
It was very important that the entire table display because it was the
#1 content our client wanted to communicate. Here's the fix, or at least here's how we solved our problem. We eliminated any repetition.
So for this table, the lines in between each row, Gmail was seeing the
lines as repetitive. So I altered the pixel width by 1 px every other
line, which eliminated the repetition and fixed our problem. So that
said, look for repetition, and try to remove it. OR in some cases, you
might have to add type (in white) to create the variation.
Source.
PS: This is a bit unrelated, but I stumbled upon this question while looking for a way to disable the content trimming and keep the conversation view at the same time. I didn't find anything, so I developed a small extension for Chrome and Firefox.
It turns out that there is a very simple rule which causes this behaviour: Gmail will clip the email as soon as it sees the sender (From:) name in the body of the message, regardless of where this appears.
Solution: make sure that that the From: name in your email is not used in the message body (except in the signature, which will probably get clipped!).
This is an awful bug in Gmail, if you're unlucky enough to get bitten by it.
In my case, it was "trimming" an entire message, in a clean thread. See an example here, noting that the "trimmed" content is expanded in the screen-shot.
I ultimately worked around Gmail's bug by removing the entire header you see in that example ("Awesome Home Swap"), including the border below it. I stopped short of actually trying to figure out what specifically was making Gmail confuse that header as a "signature" (though I suspect it could have been the border, implemented using CSS directive border-bottom:1px dotted grey to style the <td> element).
I just found a solution that worked wonderfully for me. Simply create a bunch of hidden unique images throughout your emails to provide uniqueness to parts of the email that aren't actually unique. I'm building my emails with React so I have this Unique components that I'm using pretty much everywhere:
import * as React from "react"
function random() {
return Math.round(Math.random() * 10000000).toString()
}
class Unique extends React.PureComponent {
render() {
return (
<img style={Unique.style} src={`data:image/png;base64,${random()}`} />
)
}
static style = {
visibility: "hidden",
display: "none",
width: 0,
height: 0,
color: "transparent",
background: "transparent",
}
}
One thing I like about this solution is that it doesn't mess up the email preview text that would otherwise happen if you're using hidden text.
Add a double hyphen -- before the collapsed part. I was able to wrap it in a with font color matching the background. Worked for me...
I looked at the emails Gmail sent. Adds the following code (spacer.gif).
I guess this is the solution.
<img alt="" height="1" width="3" src="https://notifications.google.com/g/img/AD-FnEztup4OClDshQhMVXDbi6Oi0lSN-FgEY1jyW384aotccA.gif">
</td>
</tr>
</table>
</body>
</html>