I am using the genentech/pviz github to display proteins and peptides. I do not have enough rep to create a new tag but I think it would be a good idea to make a pviz tag related to this github : https://github.com/Genentech/pviz. I have been using this github a lot but I cannot find much information on it on stack overflow because there is not tag. I have gotten a nice graphic and have used a hover feature in the css portion to change the color of the rectangle when hovered over. However, I want to display additionally information about the peptide and or protein when hovering over it as well.
g.feature.psms.normal:hover rect.feature {
fill: black;
}
seqEntry.addFeatures(fts.map(function(ft) {
return {
//we could also use te categoryType property, for height purpose, but not grouping purpose
category : 'psms',
type : ft[2], //This would be "normal" in most cases
start : ft[0],
end : ft[1],
text : '',
}
}));
I am not sure how to display information because I cannot find any good documentation. How would I be able to display text when hovering over the peptide rectangles?
The features that I used were SVG rectangles and after playing around for a bit I have found a solution using JS.
First create a MouseoverCallback on the specific feature types you want:
pviz.FeatureDisplayer.addMouseoverCallback(['normal', 'oxidize'], function(ft) {
mouseOveredFT = ft;
var el = $('#output-mouse-over');
el.empty();
el.html('<pre>' + "This peptide starts at: " + JSON.stringify(ft['start']) + ", ends at: " +
JSON.stringify(ft['end']) + ", and has the sequence: " + JSON.stringify(ft['text']) + '</pre>')
}).addMouseoutCallback(['normal', 'oxidize'], function(ft) {
mouseOveredFT = undefined;
});
The el.html part is what you want to display. After where you create the SVG rectangle amke sure to add:
xChangeCallback : function(pStart, pEnd) {
var str = 'cursor at ' + pStart.toFixed(1) + ' - ' + pEnd.toFixed(1);
if (mouseOveredFT !== undefined) {
str += '<strong> -> on FT'
}
$('#output-x-change').html(str);
}
Then in your html document write:
<div class="row">
<div class="span2" >
<strong>Information about peptide</strong>
</div><div class="span10" id="output-mouse-over"></div>
</div>
<!-- <div class="row">-->
<!-- <div class="span2" >-->
<!-- <strong>xchange</strong>-->
<!-- </div><div class="span10" id="output-x-change"></div>-->
<!-- </div>-->
I commented out the second part because I did not need that but the second part allows you to display the location of your cursor. Meanwhile the first part display what you put in the el.html part. I hope this makes sense but I doubt many people will need help with this. I have found nothing online about this. :(
Related
I want to highlight the text content in paragraph using text content from an another div. So there is the "increase overall code" in the the first div. I want that these words from the main paragraph to be highlighted by using the first div. Thank you for the possibility to ask for help here!
function highlight() {
var htext = document.getElementById("torles");
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0) {
innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
innerHTML.innerHTML = innerHTML;
}
}
.highlight {
background-color: red;
}
<html>
<body>
<div class="col-md-10 bordered selectborder fragment" id="torles">increase overall coder
</div>
<button onclick="highlight()">Highlight</button>
<div class="col-md-10 para bordered" id="inputText">
<strong><p>Significantly Reduce Costs and Improve Quality with an Experienced, Professional Global Coding Solution. Health Information Management (HIM) Directors and CFOs are seeking innovative ways to reduce expenses, maintain DNFB goals, and increase overall coder quality.</p></strong>
</div>
</body>
</html>
So, there were a couple things; but first, here's a working example.
function highlight() {
var text = document.getElementById("torles").textContent;//you want the text not the node
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0) {
innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
inputText.innerHTML = innerHTML;//this line was incorrect
}
}
.highlight {
background-color: red;
}
<html>
<body>
<div class="col-md-10 bordered selectborder fragment" id="torles">increase overall coder</div><!-- make sure there's no line break after "coder"-->
<button onclick="highlight()">Highlight</button>
<div class="col-md-10 para bordered" id="inputText">
<strong><p>Significantly Reduce Costs and Improve Quality with an Experienced, Professional Global Coding Solution. Health Information Management (HIM) Directors and CFOs are seeking innovative ways to reduce expenses, maintain DNFB goals, and increase overall coder quality.</p></strong>
</div>
</body>
</html>
Anyway, there were three main things (and a typo). Firstly, you had a line break in your HTML after increase overall coder, and so it would try to find that string with the line break in the text, so it would just not find it.
Second, you mixed up what your variables actually mean; to start off, the text variable (which you misspelled as htext) was a node, not a string. Also, you tried to set the innerHTML of innerHTML, but your variable innerHTML was just a string. You want to set the innerHTML of the node (inputText in this case).
I'm using node to run citation.js to turn bibtex into HTML. Unfortunately the year is missing in the rendered HTML and I cannot see why.
test.js:
var Cite = require("citation-js");
var bibtex =
'#article{id, ' +
' author={Happy Larry},' +
' date={2017-01-01},' +
' title="A Lovely Title"' +
'}';
var opts = {
type: 'html',
style: 'citation-vancouver',
}
var data = new Cite(bibtex, opts);
var g = data.get();
console.log(g);
Output:
$ node ./test.js
<div class="csl-bib-body">
<div data-csl-entry-id="id" class="csl-entry">
<div class="csl-left-margin">1. </div><div class="csl-right-inline">Larry H. A Lovely Title.</div>
</div>
</div>
I would expect the year to be in there somewhere. Yet it fails to materialise no matter which CSL style I use. I've tried several chunks of bibtex, and I've downloaded several CSL styles from citationstyles.org. Everything else works as expected apart from the year, which is always missing.
Is this a bug in citation.js?
I notice that the year is missing in the output on the demo page.
This post is made in accordance with this meta post.
As #Rintze Zelle also said in the comments, this is (was) indeed a bug in Citation.js. It's fixed in v0.3.0-12. This more general bug report in Citation.js has more info on the problem.
I'm working on my on Visual Text editor. It's working decently, preview works perfectly, and so does my JS appending. The HTML is this one:
<div class="wysiwyg">
<div class="wystitle">What You See Is What You Get<br>Editor by ShowTime</div>
<div class="wysmenu"><button class="wysbutton" onClick="addBold()">Bold</button><button class="wysbutton">Italic</button><button class="wysbutton">Underline</button><button class="wysbutton">Link</button><button class="wysbutton">Color</button><button class="wysbutton">Quote</button></</div>
<textarea rows="9" cols="145" id="wystext"></textarea><br>
<button class="wysbutton" onClick="preview()">Preview</button><button class="wysbutton">Post!</button>
</div>
<br><br><br><br><br><br><br><br><br><br><br>
<div class="wyspreview" id="wyspreview">Hit 'Preview' To See the Post General Look<br>Hit 'Post' To Create the Blog Post</div>
And I want to have the Bold button to simply add TEXT HERE. This is the JAvaScript:
function preview() {
var preview = document.getElementById("wystext").value;
document.getElementById("wyspreview").innerHTML = preview;
}
function addBold() {
var text = document.getElementById("wystext").value;
document.getElementById("wystext").innerHTML = text + "<strong></strong>";
var text = null;
}
The addBold function works properly, but as soon as I type in the text area, it won't work anymore. Any ideas why ?
You should put the text inside the tag:
"<strong>" + text + "</strong>"
It would also be helpful to incude a jsfiddle with an example.
Nevermind, found a fix, just edited innerHTML to value.
Might come helpfull for some users.
I need a little help with a Javascript function I am creating. In essence, I need to loop through a set of DIVs with class .DetailRow and find a child DIV's content (inner text). If this text is matched to a variable, then I need to replace this inner text with an IMG HTML statement.
BTW I am kinda new at this (4 months old!) so apologies if the issue is simple, but I have tried a few combos and I am stuck.
Here's the HTML:
<div class="DetailRow" style="display: ">..</div>
<div class="DetailRow" style="display: ">..</div>
<div class="DetailRow" style="display: ">
<div class="Label">Availability:</div>
<div class="Value">in stock + Free Shipping</div>
</div>
Example, if I find "in stock" in the LABEL inner text, I want to replace it with the value of the variable "instock" which is an IMG HTML statement. See my code attempt below.
<script type="text/javascript">
$(window).load(function(){
var instock = '<img src="https://linktoimgfolder/instock.gif" title="Product available, usually ships 24hrs to 48hrs after order receipt" style="margin-top:-3px;">';
var lowstock = '<img src="https://linktoimgfolder/lowstock.gif" title="Product stcok low, order today so you do not miss out">';
var nostock = '<img src="https://linktoimgfolder/outstock.gif" title="Product out of stock, could ship 1 to 2 weeks after order receipt">';
$('div.DetailRow')each(function(){
if (indexOf($(this).childNodes[1].innerHTML, "in stock") > 0) {
$(this).childNodes[2].innerHTML = "";
$(this).childNodes[2].innerHTML = instock;
} else if (indexOf($(this).childNodes[1].innerHTML, "low stock") > 0) {
$(this).childNodes[2].innerHTML = "";
$(this).childNodes[2].innerHTML = lowstock;
} else {
$(this).childNodes[2].innerHTML = "";
$(this).childNodes[2].innerHTML = nostock;
};
});
});
</script>
By the way,m I cannot match text exactly as the text beyond the "+" will change from time to time, thus I am trying indexOf.
Many thanks in advance for your assistance!
M
Using the :contains selector
var stock = {'in stock': instock, 'low stock': lowstock, 'no stock': nostock};
Object.keys(stock).forEach(function(key) {
$('div.DetailRow div:contains(' + key + ')').html(stock[key]);
});
jsFiddle Demo
A pure jQuery solution:
$.each(stock, function(key, value) {
$('div.DetailRow div:contains(' + key + ')').html(value);
});
You have typo in this line $('div.DetailRow')each(function(){ and then you can use jQuery .text() and .html() to check value and update.
Try:
$('div.DetailRow').find("div").each(function(){
if($(this).text().indexOf("in stock")!=-1){
$(this).text("");
$(this).html(instock);
}else if($(this).text().indexOf("low stock")!=-1){
$(this).text("");
$(this).html(lowstock);
}else{
$(this).text("");
$(this).html(nostock);
}
});
DEMO FIDDLE
NOTE: Updated code to find div inside div.DetailsRow. Change it according to your requirement.
I am trying to build a very simple tool for use at my work. I work for eBay and currently the tools available are cumbersome for the task. We are asked to compare text and images to check that sellers aren't stealing each others content. I am using the eBay Trading API and the sample HTML/CSS/Javascript code given when the developer account was created. Ultimately what I hope to achieve is a simple page that displays two items' photo and description next to each other. However, right now I am simply trying to edit the sample code given to display the start date of the auction.
My question is this: I am trying add a variable who's value is determined by a response from the API. some of these are provided in the sample however, when I add my own var starttime = items.listingInfo.startTime to the function and add the variable to the HTML table none of the data displays including those that displayed prior to my addition. Unfortunately I don't have more than a rudimentary understanding of javascript and so am unsure if I am even properly phrasing this question, let alone getting the syntax of my addition correct. What am I doing wrong?
below is the sample text with my addition of one declared variable (starttime) and one addition to the HTML table
<html>
<head>
<title>eBay Search Results</title>
<style type="text/css">body { font-family: arial,sans-serif;} </style>
</head>
<body>
<h1>eBay Search Results</h1>
<div id="results"></div>
<script>
function _cb_findItemsByKeywords(root)
{
var items = root.findItemsByKeywordsResponse[0].searchResult[0].item || [];
var html = [];
html.push('<table width="100%" border="0" cellspacing="0" cellpadding="3"><tbody>');
for (var i = 0; i < items.length; ++i)
{
var item = items[i];
var title = item.title;
var viewitem = item.viewItemURL;
var starttime = items.listingInfo.startTime;
if (null != title && null != viewitem)
{
html.push('<tr><td>' + '<img src="' + pic + '" border="0">' + '</td>' +
'<td>' + title + '' + starttime + '</td></tr>');
}
}
html.push('</tbody></table>');
document.getElementById("results").innerHTML = html.join("");
}
</script>
<!--
Use the value of your appid for the appid parameter below.
-->
<script src=http://svcs.ebay.com/services/search/FindingService/v1?SECURITY-APPNAME=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&OPERATION-NAME=findItemsByKeywords&SERVICE-VERSION=1.0.0&RESPONSE-DATA-FORMAT=JSON&callback=_cb_findItemsByKeywords&REST-PAYLOAD&keywords=iphone%203g&paginationInput.entriesPerPage=3>
</script>
</body>
</html>"
If you believe listingInfo is an property of individual items, and that it is an object that has the property startTime, then the proper syntax is:
var item = items[i];
var title = item.title;
var viewitem = item.viewItemURL;
var starttime = item.listingInfo.startTime;
You are currently referencing items which is the array of items, not an individual item.
Update
I looked into this via the URL you put in the comments. The solution to this particular problem is this:
var starttime = item.listingInfo[0].startTime;
I hope that helps. Please review the FAQ; Imho this question falls outside the scope of this site (the question is really quite narrow, and not likely to help anyone else). I recommend Mozilla Developer Network as a source for learning more about JavaScript.