Develop Reference

google map create hidden div and span inside with value BESbswy and reduce angular performance

I am using google map API v3 on my angular project however when I add a map to my project google map creates a hidden
<div style="position: absolute; left: 0px; top: -2px; height: 1px; overflow: hidden; visibility: hidden; width: 1px;"><span style="position: absolute; font-size: 300px; width: auto; height: auto; margin: 0px; padding: 0px; font-family: Roboto, Arial, sans-serif;">BESbswy</span></div>
element at bottom of body.
I didn't realize it until I felt my fps reduced when I am working with a map, for example, creating a polygon with drawing manager and etc..
So after several hours of debugging, I realized that because of that useless hidden div angular change detection triggered every second and cause performance issue I checked ngAfterViewChecked and realized that even after my component loaded completely this function called continuously and when I removed that element from dom everything back to normal.
I google this problem and I also found some questions related to this problem but I couldn't find any acceptable solution Unknown “BESbswy”

Having this same issue with Google Places API. Whenever I access results from querying their services the stupid "BESbswy" div too. My searches have shown its something related to typekit but I am not using #font-face or google fonts on my page. My guess is google drops it in to make sure their maps display correctly? But it stays there - super annoying. The only fix for this I have seen is to create a timer and remove the div after a few nanoseconds. But that seems more like putting a bandage on the problem and not fixing it.
EDIT MINUTES LATER!
So, I just discovered that this happens for me when the google map is added to the screen. The container for the map doesn't have width or height defined so the map is coming in without a width, so when typekit is trying to see if the fonts have loaded by comparing the "BESbswy" strings and is failing because there is no width on the compared string from the map. This results in the runtime test for font loading to error out or not load.
It seems google didn't write logic to remove the div on error/failure. But maybe that is so we know there is something wrong? Personally, I would prefer a log to the console…

I'm using '#react-google-maps/api' and noticed this same span appearing. It is related, with my understanding, to problem in font load as typekit uses test and that fails and the span stays behind. https://github.com/typekit/webfontloader#fontdeck (scroll little up and you find the string "BESbswy" in documentation)
Fix:
Set preventGoogleFontsLoading to false or remove it from useJsApiLoader.
I used prop this prop as true and it affected that map's typekit errored and span remained. Remove this prop as it defaults to false. This span broke 'react-select' when used in menuPortal mode and portal was attached to the body.
I think the problem can be related to the same root even when not using '#react-google-maps/api'. Test to see google's fonts are loaded correctly and you are preventing them from being loaded. But of this I cannot give any guarantees.

CSS margin-left is breaking in Chrome Extension

My situation is extremely confusing, and I haven't the slightest clue what's going on. I made a Firefox add-on to redesign a website using jQuery and CSS. When I tried to migrate the addon to Chrome (that part was simple, because the features I am using in each SDK are very similar), everything worked except one of the main design elements:
I have a menu with position: fixed; aligned to the left of the page, and margin-left: 150px; on the main container element. The problem is that the margin is completely disappearing when I open it in Chrome. It works fine in Firefox.
So then I copied all of the HTML, CSS, and JavaScript into a jsFiddle, and the margin worked fine. Everything was completely identical, so I can't figure out why it would work in jsFiddle but not on the website.
Using left: 150px works, but then the page spills 150px to the right, and those dreaded horizontal scrollbars appear.
Links:
Extension File (CRX): https://docs.google.com/open?id=0B3k3BjZD2YfiTWNzTlhsa0t5STg
Demo Website: http://demo.flvs.net (Username: demo, Password: demo)
jsFiddle (Some images don't load, but the code is identical): http://jsfiddle.net/CjSXA/

I just removed the margin-left from #page_cont and added it to #content-cont.
That made the content stop hiding under the menu, though the footer is still partially covered by it.

Really cool javascript or CSS feature in website

Does anybody know how the eyeball in this website is designed? Is this javascript (jQuery perhaps), or simply HTML5 and CSS? I just don't really understand how you get a little image in that shape, get it's onhover method, set a new picture, and then make it clickable. Is this a button?
http://animalvfx.com/work/

They use one image as the background (found here: http://animalvfx.com/images/bg-open-close.png).
They are only using CSS, they have a hover state on the class that sets the background position to a negative offset.
Basically the styles are:
.slide-holder .opener {
width: 30px;
height: 38px;
overflow: hidden;
position: absolute;
bottom: -38px;
background: url(../images/bg-open-close.png) no-repeat;
}
.opener:hover {
background-position: 0 -76px;
}
Effectively you are only seeing one part of the background image at a time. Because the image states are similar, it appears to be looking up.
The click event of the eye is using jQuery slidedown
If you want to find out how things work yourself, you can use the developer console in most popular web browsers. Then use the HTML inspector tool to inspect the element you are interested in.
Developers consoles are usually activated by pressing F12. This works in any decent modern web browser (and Firefox with Firebug)

It is a sprite - http://animalvfx.com/images/bg-open-close.png - on hover the background image is shifted from the centered eyeball to the offset one.
.opener:hover {
background-position: 0 -76px;
}

I believe he compressed his javascript so its not legible to the human eye but I believe he uses a combination of jquery/javascript, and css3. The hover where the eye changes its appearance I believe is just some simple javascript to change the image when hovered over. I know for sure a toggle class is being used when you click the eye because you can see the class change on the list in the HTML source (it originally is set to display: none). This definitely seems like the work of slideDown from jQuery. Hope this helps :]

I think I have a CSS/JavaScript problem?

I have two problems... I've tried altering my CSS file, the JavaScript files and all kinds of other things. A google search yielded no remedy to these problems, so I come to the awesome site of answers!
This page -> http://students.cmps.subr.edu/aaron.chauvin/misc/test2.html
has some issues in Chrome and Safari. Only when my CSS is in effect, the pictures that are supposed to be side-by-side aren't, but when the CSS is off, they are. This problem isn't evident in FF/IE9. I'm thinking it has something to do with the   but I'm not totally sure. Edit Edit: Thanks for the fix Genzer!
Also on that page, even if all my CSS/JavaScript isn't linked, I have a small gap between the bottom of the images that are links and the dotted link border... I want to get rid of the gap. What's causing this gap? This happens in all browsers.
Thanks in advance.
Edit: Here's the CSS: http://students.cmps.subr.edu/aaron.chauvin/misc/style.css
Edit Edit: Fixed the side-by-side image link problem, now trying to figure out what's causing the variation in the display of the custom a:focus border (non-existent in IE9, partially encases image link in Webkit browsers) and the gap between it and the bottom of the image link (all browsers BUT IE9).

The problem is you're wrapping all your column's info in a span: <span class="reg">...</span>
IE9 and FF figure out that you want it to display as a block element, but Webkit (Chrome and Safari) don't. Set display:block on the "reg" class and you should be set. (I think this fixes the "dotted border" issue as well, but i'm not quite sure what you meant there)
To get the orange border to show up in IE9, make sure to set outline-style to something like "solid" or "double" in the a.piclink:hover css class, in style.css. Once i did that, the border shows up.
I'm still not entirely sure why your links and nested images are behaving like they are, but I found a little tweak (tweak = almost a hack) to get it to work: Set display:inline-block; on a.piclink and set a fixed height on it. Note that inline-block tacks on 4px, so the height should be 4px taller than the height of the image; in your case: 47px. It's a bit of a hack, but it's valid and it works. Unfortunately IE7 doesn't like this, but zoom:1; *display:inline; get it working.

Adding following CSS code in your style will make Chrome display your TestPage the same as IE8.
span.reg a {
display: inline;
}

How can I make pretty scrollbars using HTML/CSS/JScrollPane

I am designing an html web page that mimics inline panes by defining this css class:
.paneSection{
display: block;
border-width: 1px;
border-style: solid;
margin: 2px;
padding:0px;
height:200px;
width:200px;
overflow: auto
}
and applying to a span tag. The resulting code is something like this:
<table>
<tr valign=top>
<td>
<span class="paneSection">
... A long piece of text here that will inevitably overflow the block ...
</span>
</td>
<td>
<span class="paneSection">
... More text, may or may not overflow, etc...
</span>
</td>
</tr>
</table>
The problem is that the scrollbars that appear are ugly, gray, boxy ones. I really need a "prettier" scrollbar. I have looked around for a couple hours, and it seems that almost everything points to using the JQuery plugin JScrollPane. However, although I am a developer (I am actually using Java to generate the html for the web page), I have never used JQuery or plugins before.
I played around a little bit with source code from other pages, and got something minimal working, but still nothing pretty. I may be wrong in saying this, but it appears that I need actual image files to make the scrollbars prettier.
An example of one scrollbar that I like is the one on pane2 on this page:
http://www.kelvinluck.com/assets/jquery/jScrollPane/examples.html
Where can I get the images that are referenced in the source? Do I actually need to make those images, or are they available somewhere for download?
Any other help on designing pretty scrollbars (I am NOT a graphic designer, please keep that in mind), or how to use JQuery plugins in general is appreciated.
Added Note I also need the scrollbars to work horizontally, not just vertically. Is JScrollPane still right for this?

No you should be able to grab the images. For example one of the arrows is here: http://www.kelvinluck.com/assets/jquery/jScrollPane/images/osx_arrow_up.png.
The easiest way to find this is use your browser's inspector (Chrome and Safari has this built in, Firefox use Firebug, no comment on IE). Just rightclick on the scrollbar or the part of the scrollbar that you are interested in for the image and do "Inspect Element." From there you can see the css for that element and in this case they are using the background-image property and you can just grab the URL from here.
If you are not a graphic designer I would just find already existing images on the web (assuming the creator allows this). For jQuery in general I would suggest perusing the documentation http://api.jquery.com/ to see what is available to you (I assume you know Javascript) and just start using it. Experience is a great teacher in this case.