I noticed that console.info() no longer shows an (i) icon to the left of the line. There is no difference between console.info() and console.log().
On 49.0.2623.112 (on XP) it looks like this:
My current version is 64.0.3282.140 but I think the icon has been gone for a while.
Is there some setting to get the icon back?
Josh Lee's link suggest the following workaround:
console.log("%ci%c Hello", "color: white; background: blue;", "");
Elaborating on that, one can have
function logInfo(text, bgColor, color) {
console.log(`%c${text}`, `color: ${color}; background: ${bgColor};`);
}
logInfo('test 1', 'orange', 'black');
logInfo('test 2', 'white', 'green');
logInfo('test 3', 'green', 'white');
This actually gives us more flexibility - and one can customize his own special output types.
In a short: would chrome not have removed the feature, I would not learn about this :)
As already specified by Josh Lee, it sadly got removed.
I tried replicating the behavior.
Take a look at it: https://github.com/evertdespiegeleer/console.info
Related
I have an image with map and several areas. I need areas to be always highlited and also change their fillColor on hover.
So the only working option is to set data attributes to areas instead of using maphilight on image.
So I have this code:
popupItem.('area').each(function() {
$(this).attr('data-maphilight', '{"alwaysOn":"true","fillColor":"359335","fillOpacity":0.25,"strokeColor":"2d812d"}');
});
Areas are given the specified attributes, but maphilight doesn't work.
It works only when I use maphilight on image like this:
popupItem.find('img:not(.maphilighted)').maphilight({
'strokeColor': '2d812d',
'fillColor': '359335',
'alwaysOn': 'true',
'fillOpacity': '0.25'
});
But in this case I can't change fillColor for a certain area.
Is there any other way to solve my problem?
Thanks for advice
Homemade NavBar. environment contains lists with the dropdown elements defined like this:
{
title: 'Overview', isDropped: false, Links: [
{linkTitle: 'What is Hunter', linkRoute: '/whatishunter'},
{linkTitle: 'What is a Hard Problem', linkRoute: '/hardproblem'},
{linkTitle: 'Real World Applications', linkRoute: '/realapps'},
{linkTitle: 'Using Hunter', linkRoute: '/usingHunter'}
]
},
The navbar html loops (ngFor) for each dropdown in that section of the navbar; added leftdropdown is dropped to show what's happening:
<div class="positionLeft" [ngStyle]="{'z-index': '2', 'height': '50px'}">
<div *ngFor="let leftdropdown of barContents.leftMenus">
<app-navdropdown [title]="[leftdropdown.title]" [isDropped]="[leftdropdown.isDropped]"
[links]="[leftdropdown.links]"></app-navdropdown>
added leftdropdown isdropped = {{leftdropdown.isDropped}}
</div>
The "leftdropdown" elements are from the environment list above. The component.ts is:
And it's trivial HTML is (with extra diagnostic text):
So when the application runs we see the output html as:
Note the debug console here:
And just to be sure, I can manually change isDropped to true and the "if block" is displayed.
The obvious error is that *ngIf is inverting the isDropped expression ????
Any clues as to what must be a misunderstanding or simple syntax error?
Thanks for your time and advice.
Chuck (Yogi)
Thanks for the various comments; I finally realized that MY confusion about square brackets was regarding the left or right of the expression. Using (or not using) square brackets on the left changes how the right side is evaluated. (I thought they needed to be applied to the right side - WRONG.)
After carefully (and repeatedly) reviewing the property binding documentation in angular.io, the above became clear to me.
Thanks to everyone who added notes.
enter image description here
When I use VS Code, a problem notice likes that(in the above image) is printed.
Although I want to fix it and really don't want to see it, I can't find any way to fix.
I am very painful about just seeing that error message all the time.
Please give me some helps.
You opened a { parenthesis at line 2784 and didn't close it. You should close it. --> }
Also, you have an extra comma , at 2793 that you have to remove.
Not use {}, because you may already mess your settings.json before.
so my suggestion as follows:
// in/your/settings.json/file
...
setting0_name:[setting0.0, setting0.1],
seting1_name : settings,
...
When i hit Ctrl+F to find words in chrome all the letters with the search text becomes yellow.
Anyone have any idea how it is done? Am just curious to know this!
BTW i'am searching for this is to implement a functionality like this using google extensions. Right now what am doing is finding that particular text and replace it with something like below.
Original text: hello
Replaced text: '<span style="background:yellow;">hello</span>';
Any ideas?
Edit: I think browsers don't allow you to use native higlight
mechanism. But you can imitate this functionality using
Javascript/jQuery.
There are lots of javascript and jQuery plugins to do that. General idea is finding all occurrences of the given word(s) and replacing them with some HTML code. (Which have different background color or larger font size etc.) For find-replace operations, RegEx will be beneficial.
Basic, non-optimized example;
/* Instead of body you can use any container element's selector */
$('body').each(function(){
var allContent = $(this).text();
var wordsToBeHighlighted = ['Hello','World'];
wordsToBeHighlighted = $.map(wordsToBeHighlighted, function(str) {
return preg_quote(str);
});
$(this).html(allContent.replace(new RegExp("(" + wordsToBeHighlighted.join('|') + ")" , 'gi'), "<b style='color: red;'>$1</b>"));
});
function preg_quote( str ) {
return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
}
Source
I have some SVG lines with line markers on them, and I have a script that moves those lines around. This works fine on all browsers, including IE9.
However, I just tried it on IE10, and the line markers get left behind when the line moves.
An example of this can be seen here: http://jsfiddle.net/swYRK/8/
I have tried this on both Windows 7 and 8.
Anyone know what's going on? Is this an IE10 bug, or is there another way to move the line and markers?
(Note the actual application is very performance sensitive, so I very much want to avoid doing something like re-creating the lines every frame while I move them, or something.)
-
Edit: this seems like a real IE 10 bug. I've found one open issue in the IE bug tracker (which requires a Microsoft account to even see, which makes it not visible to Google. Hello?), which I have added information to. IE has yet to accept the issue.
If there are any other work-arounds that people can think of, that would be great to hear. Completely removing the end markers, rendering that, and then re-adding them works-ish (shows visible flashing), but would not be acceptable in my application, unfortunately.
This is a quick way of doing it, that works well.
I have not noticed any flickering or performance related issues.
Simply re-add the svg node in it's original place:
if (navigator.appVersion.indexOf("MSIE 10") != -1) {
svgNode.parentNode.insertBefore(svgNode, svgNode);
}
Of course, you could use any browser sniffing of choice..
I want to elaborate a little on the amazing answer given by #ChristianLund and how I used it successfully in my code
In my force animation, I have a tick function that looks like this:
force.on("tick", function() {
...
});
I also hold all of my graph links inside the link variable, defined like so:
var link = svg.selectAll(".link").data(links).enter() ...
Now, to implement the magic suggested by Christian, I've added this line in the beginning of my tick function:
force.on("tick", function() {
link.each(function() {this.parentNode.insertBefore(this, this); });
...
});
This seems to fix the IE 10 problems... of course it's recommended to add this patch only on IE 10
In ie10/11, I found that the line does not move when it with marker-start/marker-end atrribute, I tried to remove those atrributes in your example, and it works. So the idea is remove the atrributes before set the x/y, then reset the atrributes after all jobs done.
You may try this hack:
$("#button4").click(function () {
$("#line1")[0].setAttributeNS(null, "x1", 50);
$("#line1")[0].setAttributeNS(null, "y1", 50);
$("#line1")[0].setAttributeNS(null, "x2", 150);
$("#line1")[0].setAttributeNS(null, "y2", 50);
var oldAttValueDisplay = $("#line1")[0].getAttributeNS(null, "display");
$("#line1")[0].setAttributeNS(null, "display", "none");
setTimeout(function() {$("#line1")[0].setAttributeNS(null, "display", oldAttValueDisplay);}, 0);
// static: setTimeout(function() {$("#line1")[0].setAttributeNS(null, "display", "block");}, 0);
});