I'm looking for nodes that are circles with a font-icon in the middle and the stock label below. This (http://jsbin.com/hiqega/3/edit?js,output) is really close to what I'm looking for except that I need to pass the font name and the icon code to use.
function nodeImage(color, icon, font)
{
var svg = '<svg xmlns="http://www.w3.org/2000/svg" ' +
'width="120" height="120" viewPort="0 0 120 120">' +
'<ellipse ry="55" rx="55" cy="60" cx="60" ' +
'style="fill:' + color + ';stroke:black;stroke-opacity:.5;stroke-width:4;" />' +
'<text x="61" y="63" text-anchor="middle" dominant-baseline="middle" ' +
'style="font-family:' + font + ';font-size:100px;fill:black;fill-opacity:.5;">' +
icon + '</text>' +
'</svg>';
return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
}
I'm calling this like so nodeImage('red', '', 'FontAwesome') in a page that is already using the font elsewhere so I don't think the issue is that it's not loaded.
Here's a pic of the resulting node
Any suggestions on where I'm going wrong?
I think you need to write nodeImage('red', '\uf03d', 'FontAwesome'). http://visjs.org/examples/network/nodeStyles/icons.html
"Remember! Unicode in javascript is done like this: \uf274 for the unicode f274.
If a node is shown as a rectangle, it means the css is not loaded (or not yet loaded). A redraw will fix that."
Related
I want to scrollTo the active element
I am using below package for walkthrough, but this is not working in my case, and not scrolling to the actual position to the my element,
https://www.npmjs.com/package/rn-tourguide
Any Idea, how can I scroll to exact position of my current active walkthrough element
for scroll container, I am using (https://reactnative.dev/docs/scrollview)
so what solution i can give you is based on assumption you know (via code) whats your current active element.
If you know that, you need to have refs for every comp in which this tour guide will be displayed.
After that once you have ref, when its focused you can call
newRef?.current?.measureInWindow( (fx, fy, width, height, px, py) => {
console.log('Component width is: ' + width)
console.log('Component height is: ' + height)
console.log('X offset to frame: ' + fx)
console.log('Y offset to frame: ' + fy)
console.log('X offset to page: ' + px)
console.log('Y offset to page: ' + py)
})
}
To get exact position of the elemnt wrt to page and event the device:
You can check my answer here dynamically position
you can reuse that logic here :)
Hope it helps. feel free for doubts
I'm trying to bind two style properties within a json object to an element in my html. I've tried using pixels and percentages, written in various ways (I realize pixel coordinates shown below do not match where % coordinates would place something, this is just an example).
{left: 30 + 'px', top:25 + 'px'} {left: '30px', top:'25px'}
{left: 30 + '%', top:25 + '%'} {left: '30%', top:'25%'}
and I'm binding like:
`v-bind:style="objnamehere"
When I reload the page, the element is not positioned at those locations. I'm not sure what I'm doing wrong. One of those should have worked based off the official examples here: https://v2.vuejs.org/v2/guide/class-and-style.html
In my case work this:
<div class="caption-text" :style="{top:y + 'px',left:x+'px'}">
Y and X are props in my Vue component
'top' and 'left' are css properties
Hope it will help somebody
I need to make script that will change background image position by only scroll of a mouse. Document doesnt have width to be scrolled. It a content slider. The idea is to make parallax scrolling like in Android.
Here is the code I am going to use:
$(window).bind("load resize scroll",function(e) {
var y = $(window).scrollTop();
$("body").filter(function() {
return $(this).offset().top < (y + $(window).height()) &&
$(this).offset().top + $(this).height() > y;
}).css('background-position', '0px ' + parseInt(-y / 6) + 'px');
});
How to make 'body' background to move when mouse wheel is scrolled?
It turns out that Safari Reader handles Cufon in an interesting way. When Safari Reader handles "Cufonized" text it leaves the canvas elements thereby creating gaps in the output.
Upon further investigation and attempting to solve the issue I found that there is seemingly no way to control the output of safari reader from the developer side without effecting the whole site.
Does anyone have any suggestions?
Yeah, So that is an issue cufon has when it comes to using safari "reader", or as most people would know it, the "reader" button that shows up on the ipad/iphone/ipod broswer.
for example, let's say we have a cufonized h1 tag like so:
<h1>Hello World!</h1>.
well this is what cufon does to it, minus all those attributes and inline styling:
<h1>
<cufon>
<canvas></canvas>
<cufontext>Hello</cufontext>
</cufon>
<cufon>
<canvas></canvas>
<cufontext>World!</cufontext>
</cufon>
</h1>
And when the "reader" opens it it reads something like this:
_ Hello _ World!.
where the "_" is a blank space caused by the element.
__ So __ Imagine __ Reading __ Text __ Like __ This!!!
annoying!!
So I modified the cufon-yui.js file Version 1.09i so the output would be something like this,
<h1>
<beforetext>Hello World!</text>
<cufon>
<canvas></canvas>
</cufon>
<cufon>
<canvas></canvas>
</cufon>
</h1>
So when "reader" opens it, it looks like so:
Hello World! _ _
Where the blank canvases come after the text, so you dont get that weird effect.
So here is the fix:
On line 1240 - 1259 (might be different for some, but easy to spot), I changed the following
styleSheet.appendChild(document.createTextNode((
'cufon{text-indent:0;}' +
'#media screen,projection{' +
'cufon{display:inline;display:inline-block;position:relative;vertical-align:middle;' +
(HAS_BROKEN_LINEHEIGHT
? ''
: 'font-size:1px;line-height:1px;') +
'}cufon cufontext{display:-moz-inline-box;display:inline-block;width:0;height:0;text-align:left;text-indent:-10000in;}' +
'beforetext{display:-moz-inline-box;display:inline-block;width:0;height:0;text-align:left;text-indent:-10000in;position:absolute;left:-99999px}' +
(HAS_INLINE_BLOCK
? 'cufon canvas{position:relative;}'
: 'cufon canvas{position:absolute;}') +
'cufonshy.cufon-shy-disabled,.cufon-viewport-resizing cufonshy{display:none;}' +
'cufonglue{white-space:nowrap;display:inline-block;}' +
'.cufon-viewport-resizing cufonglue{white-space:normal;}' +
'}' +
'#media print{' +
'cufon{padding:0; display:none;}' + // Firefox 2
'cufon canvas{display:none;}' +
'beforetext {text-indent:0;text-align:left;display:block; width:100%; height:auto}'+
'}'
).replace(/;/g, '!important;')));
This will style the new "beforetext" element and the for print and screen,
On line 1296 right after "return function(font, text, style, options, node, el)" I added :
var tagtype = $(el).get(0).tagName;
if (tagtype == "BEFORETEXT"){return null;}
This is to avoid rewdoing the beforetext to itself on hover options.
Now from line 1336 - 1353 (again might be different, but easy to spot) I changed it to
if (redraw) {
wrapper = node;
canvas = node.firstChild;
if (options.printable) {
$(el).find('beforetext').append(document.createTextNode(text));
}
}
else {
wrapper = document.createElement('cufon');
canvas = document.createElement('canvas');
wrapper.className = 'cufon cufon-canvas';
wrapper.setAttribute('alt', text);
wrapper.appendChild(canvas);
if (options.printable) {
var beforeText = document.createElement('beforetext');
$(el).not(':has(beforetext)').prepend('<beforetext></beforetext>');
$(el).find('beforetext').append(document.createTextNode(text));
}
}
The above adds the "beforetext" element only once, and then appends the text to that element as it creates each cufon text, and also reapplies it on hover options so it doesn't get errased.
And that's it. Hope this helps someone out-there. And feel free to correct me, imporve it, or find a better solution, I'd like to know
of alternative better ways. Happy coding all.
P.S
Sorry for the long response. Just trying to make sure someone with the same issue understands whats going on.
IE9 pop up windows has black background color when showing PNG image. I found a workaround which works on Firefox 10 (and above) that also shows PNG with dark background on pop up window. Here is the code, this doesn't work for IE9:
function openLarge() {
var image = $('main-image').href;
NewWin = window.open(image,"LargeImage","resizable=yes,scrollbars=auto,status=no,width=710,height=510");
NewWin.document.writeln("<body bgcolor='#fff'>");
NewWin.document.writeln("<img src='" + image + "'>");
NewWin.document.writeln("<\/body>");
NewWin.document.close();
}
Any ideas?
The problem here is with the opening address. If you remove the image reference, and open up to a blank document, you'll have your background set.
I suspect this has something to do with the headers upon first loading the resource. With an image, the content type would be set to image/jpeg or something, but then we're attempting to manipulate the document as if it were text/html.
function openLarge() {
var image = $('main-image').href;
NewWin = window.open('',"LargeImage","resizable=yes,scrollbars=auto,status=no,width=710,height=510");
NewWin.document.writeln("<body bgcolor='#fff'>");
NewWin.document.writeln("<img src='" + image + "'>");
NewWin.document.writeln("<\/body>");
NewWin.document.close();
}