Is it possible to write a program that masks the set of fonts installed on the computer, so the font list would appear "plain vanilla" and would not be of much value in creating a ~unique fingerprint? https://panopticlick.eff.org/
There is probably some support for that in some browsers, but with any browser you could intercept the winapi calls for enumerating the font list.
Basically you write a dll that will be loaded into the browser process, and then it will intercept the calls the browser will make to the OS when it will enumerate fonts. Just lookup which functions in windows are used for enumerating fonts, and fake them in your dll. (that could be some work though, because you will have to rewrite the font enumerating logic).
Also, some of the browsers may very well just read the registry to enumerate fonts, and not use the specialized fontfunctions, in that case you will have to intercept the registry-winapi functions, and make sure they report the font list that you want.
For loading your dll into the target process you could use Windows hooks, or use a .exe file editor to add your dll to import table of the browser's exe file. There is also a special place in the registry where if you add a dll there, it will be loaded to every process in the system. (then you'll have to check for browser process, and only intercept api calls then, so that not every program on your system will get the bogus font list).
Also, it is possible that a browser will run some plugin, or activex control, or java, or something like that in another process (chrome runs every tab in different processes for example), so I would check every process' parent, and if you see that it has been started by the browser, intercept the font list in that process also. That way, the target webpage won't be able to get the real font list through flash, plugins, java, or anything.
A good start to intercepting winapi calls can be found here: http://www.codeproject.com/KB/system/InterceptWinAPICalls.aspx
So this is a reliable way to do this, and although it can't be done in an hour, it's not overly complicated either.
Of course, this will not only make your font list bogus, it will also make the browser not see and be able to display the fonts that are not in the list.
And this all is valid for Windows of course, but there are surely similair ways to do this on other OSes.
Also, worth to note, I don't think a webpage can read the font list if you have disabled javascript and plugins(flash).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Font detector</title>
<style type="text/css" media="screen">
#font_detector_box{ visibility: hidden; }
#font_detector_box span.font{ padding: 0px; margin: 0px; border: none; font-size: 10px; letter-spacing: 1px; }
</style>
</head>
<body>
<h1>Font Detection Page</h1>
<p>This page is a sample for font detection tecniques</p>
<h2>List of fonts installed on your machine</h2>
<span id="font_list_display">
</span>
<!-- Invisible div -->
<div id="font_detector_box">
<span class="font family_Arial" style="font-family: Arial, Verdana !important">mmm</span>
<span class="font family_Comics_Sans_MS" style="font-family: Comic Sans MS, Arial !important">mmm</span>
<span class="font family_Georgia" style="font-family: Georgia, Arial !important">mmm</span>
<span class="font family_Helvetica" style="font-family: Helvetica, Verdana !important">mmm</span>
<span class="font family_Verdana" style="font-family: Verdana, Arial !important">mmm</span>
<span class="font family_Times_New_Roman" style="font-family: Times New Roman, Arial !important">mmm</span>
</div>
</body>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
var fontMeasures = new Array( );
//Web safe
fontMeasures["Arial"] = new Array( "30px", "13px" );
fontMeasures["Comics_Sans_MS"] = new Array( "27px" , "14px" );
fontMeasures["Georgia"] = new Array( "33px" , "13px" );
fontMeasures["Helvetica"] = new Array( "30px" , "13px" );
fontMeasures["Verdana"] = new Array( "36px" , "12px" );
fontMeasures["Times_New_Roman"] = new Array( "27px" , "12px" );
var msg = "";
$( ".font" , "#font_detector_box" ).each( function( ){
var fontFamily = $( this ).attr( "class" ).toString( ).replace( "font " , "" ).replace( "family_" , "" );
var width = $( this ).css( "width" );
var height = $( this ).css( "height" );
//alert( width + height );
if( fontMeasures[fontFamily][0] === width && fontMeasures[fontFamily][1] === height ){
var family = fontFamily.replace( /_/g , " " );
msg += '<span class="font-family: '+ family + ';">' + family + '</span> <br/>';
}
});
$( "#font_list_display" ).html( msg );
</script>
</html>
Related
I have 2 Dojo Dijit ContentPane's side by side. I want to show/hide one of them, and have the other one stretch dynamically as needed. I am using an ESRI mapping example which uses 'dijit.layout.BorderContainer'. The "divRightMenu" will show/hide itself correctly, but, when opened, rather than pushing the "mapDiv" Div, it just appears on top of it. I want the "mapDiv" div to dynamically resize itself depending on the visible state of the "divRightMenu" div.
I'm including the full page code below - I have already experimented with style.Display = Block / None, style.Visibility = Visible/Hidden, as well as trying to dynamically set the width of divRightMenu from 1 pixel to 150 pixels. In all cases, divRightMenu appears "on top of" mapDiv, rather than "pushing" it like I want. If I change the code so that divRightMenu is visible by default on page load, then what happens when i hide it is it disappears, but the blank spot it once occupied still remains. Surely this is something simple I'm missing?
In the past (standard CSS), I would combine "float:left/right" with "overflow:hidden", and display:block/none, and could easily achieve the effect I'm after, but with Dojo/Dijit i'm not sure what i'm missing. I experimented with various combinations of float/overflow on the inline styling of the 2 DIV tags in question, but was unable to get it to work. I also noted that one poster mentioned that he programmatically created his dijit ContentPanes on the fly to overcome the issue, but I was hoping for a solution other than this (i need all the settings from the div's content to be retained between showing/hiding the div, and i'm not sure if re-creating it on the fly will allow for this).
Here are the 2 threads I found that touch on the topic:
Dojo Toggle Hide and Show Divs
Toggling the display of a Dojo dijit
These mainly deal with being able to hide the div or not. In my case I'm able to hide/show it, but just not able to get the desired auto-resize behavior from the remaining DIV.
In any case, full code sample is included below - any help would be appreciated:
Main Index.htm Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="stylesheet" type="text/css"href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
}
function ToggleVisibility(id)
{
//if (dijit.byId(id).domNode.style.width == '150px') {
if (dijit.byId(id).domNode.style.display == 'block') {
dijit.byId(id).domNode.style.display = 'none';
//dijit.byId(id).domNode.style.width = "1px";
//dojo.style(id, "visibility", "hidden");
}
else {
//dijit.byId(id).domNode.style.width = "150px";
dijit.byId(id).domNode.style.display = 'block';
//dojo.style(id, "visibility", "visible");
}
dijit.byId(id).resize();
//dijit.byId("mapDiv").resize();
}
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"></script>
<script src="layout.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
</script>
</head>
<body class="tundra">
<!--TOPMOST LAYOUT CONTAINER-->
<div style="border:4px solid purple;width:100%;height:100%;" id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false">
<!--HEADER SECTION-->
<div id="header" style="border:4px solid red;height:85px;" dojotype="dijit.layout.ContentPane" region="top">
<div id="headerArea" style="border:2px solid black;height:50px;" dojotype="dijit.layout.ContentPane" region="top">Logo Here</div>
<div id="navMenuArea" style="border:2px solid green;height:35px;" dojotype="dijit.layout.ContentPane" region="top">Menu Here | <input type="button" onClick="ToggleVisibility('divRightMenu');" value="Toggle Right Menu"/></div>
</div>
<!--CENTER SECTION-->
<!--CENTER CONTAINER-->
<div id="mapDiv" style="border:2px solid green;margin:2px;" dojotype="dijit.layout.ContentPane" region="center"></div>
<!--RIGHT CONTAINER-->
<div id="divRightMenu" style="display:none;width:150px;border:2px solid orange;background-color:whitesmoke;" dojotype="dijit.layout.ContentPane" region="right">
Right Menu
</div>
<!--FOOTER SECTION-->
<div style="border:4px solid blue;height:50px;" id="footer" dojotype="dijit.layout.ContentPane" region="bottom">
Footer Here
</div>
</div>
</body>
</html>
layout.js Code:
dojo.require("esri.map");
var resizeTimer;
var map;
function init() {
var initialExtent = new esri.geometry.Extent(-125.0244140625, 14.4580078125, -80.0244140625, 59.4580078125, new esri.SpatialReference({
wkid: 4326
}));
map = new esri.Map("mapDiv", {
extent: initialExtent
});
dojo.connect(map, 'onLoad', function(theMap) {
dojo.connect(dijit.byId('mapDiv'), 'resize', function() {
resizeMap();
});
});
var url = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer(url);
map.addLayer(tiledLayer);
}
//Handle resize of browser
function resizeMap() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
map.resize();
map.reposition();
}, 800);
}
//show map on load
dojo.addOnLoad(init);
layout.css Code:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color:#FFF;
overflow:hidden;
font-family: "Trebuchet MS";
}
#header {
background-color:#FFF;
color:#999;
font-size:16pt;
font-weight:bold;
}
#headerArea {
text-align:left;
}
#navMenuArea {
text-align:right;
/*background:url(toolbar_bg.png) repeat #6788a2;*/
}
#topmenu {
background-color:#FFF;
color:#999;
font-size:16pt;
text-align:right;
font-weight:bold;
}
#footer {
background-color:#FFF;
color:#999;
font-size:10pt;
text-align:center;
}
Use a dijit/layout/BorderContainer, place the 2 contentpanes inside it, setting one of the 2 containers' region property to "center" and the other one to "right".
When you want to resize one of the contentpanes, call their "resize" method with an object containing the "w" property.
After calling resize on the contentpane, call "layout" on the border container.
Example :
require([
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/Button",
"dojo/domReady!"
], function(BorderContainer, ContentPane, Button){
var container = new BorderContainer({
design : "headline",
gutters : false
}, "container");
var pane1 = new ContentPane({
region : "center",
id : "pane1"
});
var pane2 = new ContentPane({
region : "right",
id : "pane2"
});
var toolbar = new ContentPane({
region : "bottom",
id : "toolbar"
});
var btn = new Button({
label : "Change right side",
onClick : function(){
pane2.resize({ w : Math.random() * pane2.get("w") });
container.layout();
}
});
toolbar.addChild(btn);
container.addChild(pane1);
container.addChild(pane2);
container.addChild(toolbar);
container.startup();
});
See this fiddle : http://jsfiddle.net/psoares/vEsy7/
I am currently in learning CSS and it seems I have a hard time understanding the box model. I have a very simple page layout:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/simpleimagebrowser.css">
</head>
<body>
<menu type="toolbar">
<ul>
<li>prev</li>
<li>next</li>
</ul>
</menu>
<div class="imagecontainer">
<img src="images/awsome.jpg">
</div>
</body>
</html>
and a very simple css:
body
{
margin: 0;
padding: 0;
}
menu
{
padding: 0;
margin: 0;
background: green;
}
ul
{
padding: 0;
margin: 0;
}
li
{
display: inline;
}
img
{
padding: 0;
margin: 0;
}
.imagecontainer
{
background: yellow;
padding: 0;
margin: 0;
}
Why is does my yellow <div> have this little margin or gap at the bottom?
I noticed that when I set the font-size to 0 that margin goes away. Can someone explain conceptually what's going on from a css/boxmodel perspective? It seems as if the browser is adding a blank text line below the image or something ...
Add display: block; to your image
img {
display: block;
}
The white space is due to the image being an inline element. I suppose it's the equivalent of line-heightwhich adds white space around text.
This is because all inline elements are expected to fit the 'contains text' model of a span tag, where space is reserved for the tails on letters like g, q, j, etc.
If non, this extra-space is used for 'link underlining' by default browser settings on inline level elements. Meaning, it reserves space for a link hover underline.
tail (n: tel)
Of a letter, the part that extends below the baseline and to the
right, as gjqy. Of the capital letters, Q and R have tails, though
they need not extend below the baseline.
Indeed, adding "display: block;" to your img rule will make the problem go away. This is most likely due to images being treated as "inline" or "inline-block" by default. Thus the browser is very likely attempting to work your image into the line-height of the parent element.
I have developed a chrome extension which is supposed to have a scroll bar if the content in the popup is more than the specified height to the body of popup .
I am adding the contents of my popup.html
<!DOCTYPE html>
<head>
<title>Compare Hatke</title>
<script type='text/javascript' src='popup.js'>
</script>
<style>
body {
min-width:357px;
min-height: 500px;
overflow-x:hidden;
overflow-y:auto;
}
img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
</style>
</head>
<body>
Extension developed by Prashant Singh
</body>
</html>
Also the JS which is injecting data to the popup file
var len = currentArray.length;
var string = "";
for(i=0;i<len;i++){
if(tab.id==currentArray[i].tabID){
string += "<img src='" + currentArray[i].image + "' height='20px' max-width='100px'> " + currentArray[i].prod +"<br>";
}
}
document.write(string);
What could be the possible issue ? I am not getting scroll bar even if the data to be shown is much much greater that can be shown in one view.
Any explanation would be appreciated. Thanks !
Added a div in the popup.html page
<body>
<div id='showData'>
Extension developed by Prashant Singh
</div>
</body>
And replaced document.write by document.getElementById('showData').innerHTML and it worked in a flash. Any explanation. Why previous one was not working ?
In my HTML page I have 9 images for dialing numbers and one text box that shows the pressed numbers. I want each of those images to immediately play beep sound when users click on them. I tried to use embed with hidden property and navigate it's source to .wav sound.
It is working OK, but when I press the images one after another immediately, it cannot play sound and just bees once at the end.
Is there any faster way of playing a .wav sound on 'onclick' method?
If you only need to support recent browsers, then HTML 5 offers you the Audio object
to load/buffer your sound:
var snd = new Audio("file.wav");
to play the sound:
snd.play();
to re-cue it to the beginning (so that you can play it again):
snd.currentTime=0;
This answer https://stackoverflow.com/a/7620930/1459653 by #klaustopher (https://stackoverflow.com/users/767272/klaustopher) helped me. He wrote:
HTML5 has the new <audio>-Tag that can be used to play sound. It
even has a pretty simple JavaScript Interface:
<audio id="sound1" src="yoursound.mp3" preload="auto"></audio>
<button onclick="document.getElementById('sound1').play();">Play
it</button>
Here's how I implemented his advice so that clicking on the Font Awesome icon "fa-volume-up" (located on the Web page after "mule.") results in "donkey2.mp3" sound playing (note: mp3 doesn't play in all browsers).
<p>In short, you're treated like a whole person, instead of a rented mule. <audio id="sound1" src="assets/donkey2.mp3" preload="auto"></audio><a class="icon fa-volume-up" onclick="document.getElementById('sound1').play();"></a>
You can use embed element for play sounds, but you've to check the formats supported by the different browsers.
Embed element on MDN
<a onclick="playSound('1.mp3')">
<img src="1.gif">
</a>
<div id="sound"></div>
<script>
var playSound = function (soundFile) {
$("#sound").html("<embed src=\"" + soundFile + "\" hidden=\"true\" autostart=\"true\" />");
}
</script>
This code lets you put in a picture button; when click you get a sound. It works with Google Chrome and Microsoft Edge but I can't get it to work in Internet Explorer. I'm using html 5 codes; please copy and paste and add you own samples.
</head>
<body>
<script>
var audio = new Audio("/Sample.wav ");
audio.oncanplaythrough = function ( ) { }
audio.onended = function ( ) { }
</script> <input type="image" src="file://C:/Sample.jpg" onclick="audio.play ( )">
</body>
</html>
more on codes look at
http://html5doctor.com/html5-audio-the-state-of-play/
Example based on accepted answer (Tested in Chrome 70), but I didn't need to re-cue:
<button onclick="snd.play()"> Click Me </button>
<script>
var snd = new Audio("/Content/mysound.wav");
</script>
This is what I would do to play sound effects:
<html>
<body>
<audio id="sfx"><source src="mysound.mp3"></audio>
<button onclick="playsound()" id="button">Play a sound!</button>
<script> function playsound() {
var sfx = document.getElementById("sfx");
sfx.autoplay = 'true';
sfx.load();}
Or you can run this snippet:
function playsound() {
var mysound = document.getElementById("mysound");
mysound.autoplay = 'true';
mysound.load();
}
button {
color: blue;
border-radius: 24px;
border: 5px solid red;
}
body {
background-color: #bfbfbf;
}
<html>
<body>
<audio id='mysound'><source src="click.mp3"><!-- "click.mp3" isn't a sound effect uploaded to the snippet, because I don't think you can upload sfx to snippets. (I'm new to stackoverflow, so there might be a way) But if you actually use a sound effect in that folder that you're using, it works. --></audio>
<button id='btn' onclick='playsound()'>Play a sound!</button>
</body>
</html>
Do anyone of You guys know if it is possible to change default size of SmartPortal based on url (webpage) size? Default it is 1/3 of screen width and 250px height.
Is it possible to change it to take whole screen width and other height?
Mayby I must create a SmartPortal plugin for that or manipulate webpage DOM?
Any advice will be helpfull :)
I've figured it out (thanks to ShankarSangoli).
I used jQuery to modify iframe height.
Whole dashboard is just a html table, so using some selectors I was able to change iframe height.
This is my code:
<script type="text/javascript">
$(document).ready(function () {
//SmartPortal name
var SPname = 'Name of SmartPortal';
//function usage
resizeSP(SPname, 400);
});
function resizeSP(SP, size) {
$("table.TitleText td.TitleText:contains(" + SP + ")", parent.document).closest('#title-bar').parent().next().find('#contentNode').children(":first").css("height", size);
}
</script>
But there are some limitations!!! The html page used by SmartPortal must be in the same domain as Pivotal (JavaScript security limitations) so I saved my document on local drive and used relative URL in SP properties.
If You want to use webpage outside domain just create a html document containing iframe with target URL and load it into Pivotal.
Like this:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//SmartPortal name
var SPname = 'SP name;
//usage
resizeSP(SPname, 400);
});
function resizeSP(SP, size) {
$("table.TitleText td.TitleText:contains(" + SP + ")", parent.document).closest('#title-bar').parent().next().find('#contentNode').children(":first").css("height", size);
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
overflow: auto;
height: 100%;
}
iframe {
display:block;
width:100%;
border:none;
}
</style>
</head>
<body>
<iframe src="http://www.yoursite.com"></iframe>
</body>
I hope that it will be helpful for anyone :)