How can I get a voluntary text fragment within start and end index - fabricjs

I need to get text within start and end index.
For example for a text like
"Fabric.js is a powerful and simple Javascript HTML5 canvas library"
for start index "0" and end index "8" it must show the result "Fabric.js".
Is there a method similar to getSelectedText(start, end)?
With the difference that I need to get a voluntary text fragment, not the selected one

Your question is kinda vague. I am not sure I understand what you mean by 'voluntary text fragment'.
However, if you are using a fabric.IText instance, you can use the following attributes to get/set the start & end of the text selection :
var canvas = this.__canvas = new fabric.Canvas('Canvas');
var myText = new fabric.IText('Fabric.js is a powerful and simple Javascript HTML5 canvas library',{
top: 50,
left: 50,
fontSize: 20
});
canvas.add(myText);
canvas.renderAll();
myText.enterEditing(); // Enter text editing mode
myText.selectionStart = 0;
myText.selectionEnd = 9;
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.js"
integrity="sha512-CzyxOXSECwo2nGJQZ2P8fdDxWVMVzn0jNdT2lYJ3afbqDJbaQ4qxgv9sLc85f6KP8HO2y929Bu+lnPKGC3ofSg=="
crossorigin="anonymous"></script>
<div class="container">
<canvas id="Canvas" width="700" height="300"></canvas>
</div>
<script src="canvas.js"></script>

Related

Using Handlebars to color dynamically

I'm looping through an object and displaying a resulting table using handlebars.
If a certain number is greater than 50, I want to style the number one color, and if it's less than 50, I want to style it with another color.
I'm pretty new to handlebars, so I'm having trouble figuring out how I'd do the logic. I looked into custom helpers, but I'm not sure how I'd write out the custom HTML/CSS needed.
Thanks!
Put the desired color as an input object. Prior to defining your template, set the color dynamically based on your number.
Extending the official handlebars sample (https://handlebarsjs.com/guide/#installation):
<!-- index.html -->
<html>
<body>
<div id="root"></div>
</body>
<!-- Include Handlebars from a CDN -->
<script src="https://cdn.jsdelivr.net/npm/handlebars#latest/dist/handlebars.js"></script>
<script>
// compile the template
var template = Handlebars.compile("<div style='color: {{textColor}}''>Handlebars <b>{{doesWhat}}</b>");
var amount = 55;
var color = amount > 50 ? "red" : "green"
document.getElementById("root").innerHTML = template({ doesWhat: "rocks!", textColor: color });
</script>
</html>

Manipulate text-document.write

Is there a way to manipulate text in document.write code? I'm currently doing this
if (score > 35) {document.write(output); document.write('<img src="images/Rabbit.jpg">')}
to print the output of the users choices, but you get a huge image and this tiny little text. Can someone at least point me to some information on how to, or (if even possible) the code to edit it in CSS?
Forgot to add that (output) outputs predefined text. That would probably help
Just add this inline CSS to the image tag:
<img src="images/Rabbit.jpg" style="width: 200px; height: 200px;">
If you can't change the HTML outputted then add this internal CSS in your HTML head.
<head>
<style>img { width: 200px, height: 200px; } </style>
</head>

Attempting to change the colour of one link without a colour without the option

So I have been attempting different variations of trying to use #dc6820 in my code to change only one link source for a layout I'm helping someone with. Usually, I don't have too much trouble, but no matter what I've tried, it just remains the same (or I muck up the coding and have to redo it)
This is the section I'm attempting to change:
< div id="info" >
< br >posted < a href="{Permalink}">{TimeAgo}< /a> {block:RebloggedFrom}
**via < a href=" {ReblogParentURL}">{ReblogParentName}< /a>{/block:RebloggedFrom}
{block:ContentSource}(< a href="{SourceURL}">© < a href="{SourceURL}">{SourceLink}<
/a>){/block:ContentSource} {block:RebloggedFrom} < a href="{ReblogParentURL}"
target="_#nk">< /a>{/block:RebloggedFrom}**
with < a href="{Permalink}">{NoteCountWithLabel}< /a>
{block:HasTags}< div id="tags">♡{block:Tags} #< a href="{TagURL}">{Tag}< /a>
{/block:Tags}< /div>{/block:HasTags}</div></div>
{/block:Posts}
{block:PostNotes}< div id="notes">{PostNotes}</div>{/block:PostNotes}
{/block:Posts}</div></div></div>
< /div>
I'm attempting to change the section between asterisks (via --> /block:RebloggedFrom}
Edit// I've attempted the style change referenced below to, unfortunately, no results :(
Here's a link to the pastebin with the section (hopefully) without the errors pastebin.com/qNAbZAhQ –
First, let's clean-up that HTML and make sure our tags are closed.
HTML
<div id="info">
{block:Date}
posted <a class="time" href="{Permalink}">{TimeAgo}</a>
{/block:Date}
{block:RebloggedFrom}
via <a class="reblog" href="{ReblogParentURL}">{ReblogParentName}</a>
{/block:RebloggedFrom}
{block:ContentSource}
(<a class="source" href="{SourceURL}">© {SourceTitle}</a>)
{/block:ContentSource}
{block:NoteCount}
with <a class="notes" href="{Permalink}">{NoteCountWithLabel}</a>
{/block:NoteCount}
{block:HasTags}
<div id="tags">
♡
{block:Tags}
#<a class="tag" href="{TagURL}">{Tag}</a>
{/block:Tags}
</div>
{/block:HasTags}
</div>
As you can see, in addition to closing tags (and removing unnecessary elements) and wrapping everything in its correct block, I added different class attributes to each type of link so that you can go into the stylesheet in the head and add your colors. For example...
CSS
<style type="text/css">
a.reblog {
color: #DC6820;
}
</style>
or
<style type="text/css">
.reblog {
color: #DC6820;
}
</style>
or even
<style type="text/css">
.reblog:link {
color: #DC6820;
}
</style>
That latter would allow you to use CSS state selectors to change the color of the link depending on the state of the link, e.g. active, hover, visited.
You can add a style attribute to your a tag as such
< a href=" {ReblogParentURL}" style="color: #dc6820;">
Of course you need to add this to all your a tags that you want to change.

DuckDuckGo (and other) karma widgets questions

I noticed the "DuckDuckGo" karma widget one day when browsing and decided to play with one.
Its purpose is to gather your "karma" from different websites and display a little box like this one:
I tried it on my site as follows, and it provides the picture above all right.
<div id="footer">
<script type="text/javascript">
ddg_k_title = '';
ddg_k_bold_karma = '1';
ddg_k_link_karma = '0';
ddg_k_link_label = '0';
ddg_k_show_username = '0';
ddg_k_show_service_name = '0';
ddg_k_paren_karma = '0';
ddg_k_vertical_spacing = '5';
ddg_k_column_width = '150';
ddg_k_padding = '5';
ddg_k_font_size = '9pt';
ddg_k_font_color = 'black';
ddg_k_font_family = '';
ddg_k_border = '1px solid #AAA';
</script>
<div id="holder" style="position: relative; height: 76px; width: 50%; margin: 0px auto">
<div id="ddg_k" style="width: 150px; height: 47px; font-size: 9pt; background: white;
padding: 5px; text-align: left; float: left">
</div>
<script type="text/javascript" src="http://karma.duckduckgo.com/k.js?t=1,5&u=Evgeny,evgenyr"></script>
However, there are questions I can not find answers to:
I could not locate any documentation. The parameters for k.js I had to literally figure out by trial and error. Can anyone help with that?
It still shows the karma for the day when I added the widget to my site - I know the values have changed since. What am I missing?
Finally, if anyone can suggest similar widgets I can easily use on a website, that would be duly upvoted!
I didn't find any documentation for the karma widget either, despite much googling around.
It seems that you have looked into the script, but I'll nevertheless document some findings here.
Looking in the k.js file that is generated you can see that you specify the sites to show in the widget by using the query parameters t and u:
http://karma.duckduckgo.com/k.js?t=1,5&u=Evgeny,evgenyr
This means for the site identified by 1 the username is Evgeny and for the site with id 5 the username is evgenyr. If you look into the script you can see that it is generated on the server side and it has the karma points retrieved already in the script.
The identifiers are as follows (straight from the script # 2012-10-09):
Id Site
--------------------
1 Hacker News
2 reddit
3 digg
4 Mixx
5 LinkedIn
6 Twitter
7 StumbleUpon
8 delicious
9 YouTube
A Dailymotion
B Plurk
C identi.ca
D Stack Overflow
E MySpace
F GitHub
G Facebook
From looking at the code, you can also customize the look'n'feel of the widget by embedding parameters (starting ddg_k_) as javascript code to your site as you have done. The parameters are almost self-explanatory.
The script also needs an element with the id of ddg_k where it places the widget.
As for why the values are not updated since adding the widget; I can only come up with a educated guess that there's some caching going on. At least here the last message mentions some delays. Also there's some mention about caching issues on the duckduckgo forum. It might also be because the server-side component that retrieves the points is out of date regarding a site.
There's certainly very scarce information on this topic. :-)

How to <href..> my svg-logo with Raphael?

I'm using a Raphael.js on my site. Take a look logo in the header, please. http://hooche.ru/md2
Code for logo:
<script type="text/javascript">
window.onload = function() {
var r = Raphael(logo); r.attr({href: "http://google.com/", target: "blank"});
other vector..
...
</script>
and html-code for logo^
<div id="logo"></div>
But now, we have: 1 letter = 1 Google link = very much Google links and empty, not clickable spaces around letters in one svg-logo.
How to do: 1 svg-logo = 1 link to somewhere with no empty spaces,
for example, div logo have:
width: 190px;
height: 67px;
Replace your div with a link, then you won't need the r.attr() bit either.
<a id="logo" href="http://google.com/"></a>
(I would not advise using target="_blank" there. It's not the standard behaviour. Let the end user choose.)
I think I understand why. I had to do something like this:
<a id="logo" xlink:href="o-nas.php" title=""></a>
xlink
I read in the documentation.

Resources