First, I have been here How to make HTML Text unselectable
But that doesn't solve my issue, (the JavaScript version works well, but I need to make it using HTML and CSS, I cannot use JavaScript) I used the recommended CSS, but look at my DEMO drag the mouse from [drag from here] to [to here] you will see that the text is still selectable.
any way to make it really unselectable?
Thanks
You can use CSS like this:
CSS
.unselectable {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
/* No support for these yet, use at own risk */
-o-user-select: none;
user-select: none;
}
For older IE versions, the issue usually is harder to deal with, but you can use a behavior:
CSS
.unselectable {
behavior: url(ieUserSelectFix.htc);
}
and the behavior file "ieUserSelectFix.htc":
<public:component lightweight="true">
<public:attach event="ondocumentready" onevent="stopSelection()" />
<script type="text/javascript">
<!--
function stopSelection() {
element.onselectstart = function() { return(false); };
element.setAttribute('unselectable', 'on', 0);
}
//-->
</script>
</public:component>
With Javascript you can:
yourElement.onselectstart = function() { return(false); };
After reviewing this problem, Came to mind another method to prevent the user from selecting text while viewing the page, basically, setting up a mask over the target text:
Your Fiddle updated here!
Example:
CSS
.wrapTxt {
position: relative;
}
.wrapTxt .mask {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
HTML
<p class="wrapTxt">
This is my text! My text is mine and no one Else's!
<span class="mask"></span>
</p>
The principle here is simple (Fiddle), have a block element over the text, occupying all of it's wrapper space.
The downfall is a hard implementation if you need one line to be selectable and the next one not. Also, links on the "not selectable" text will not me available.
Final note:
The user can always go around this, either by looking at the source code, or by dragging the mouse from top to bottom of the webpage.
try something like this
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Disable /Prevent Text Selection jQuery-JavaScript</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
// Begin:
// Jquery Function to Disable Text Selection
(function($){if($.browser.mozilla){$.fn.disableTextSelect=function(){return this.each(function(){$(this).css({"MozUserSelect":"none"})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).css({"MozUserSelect":""})})}}else{if($.browser.msie){$.fn.disableTextSelect=function(){return this.each(function(){$(this).bind("selectstart.disableTextSelect",function(){return false})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).unbind("selectstart.disableTextSelect")})}}else{$.fn.disableTextSelect=function(){return this.each(function(){$(this).bind("mousedown.disableTextSelect",function(){return false})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).unbind("mousedown.disableTextSelect")})}}}})(jQuery)
// EO Jquery Function
// Usage
// Load Jquery min .js ignore if already done so
// $("element to disable text").disableTextSelect();
// $("element to Enable text").enableTextSelect();
//
jQuery(function($) {
$("body").disableTextSelect();
$("#code").mouseover(function(){
$("body").enableTextSelect();
});
$("#code").mouseout(function(){
// Code for Deselect Text When Mouseout the Code Area
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) { // IE?
document.selection.empty();
}
$("body").disableTextSelect();
});
});
</script>
<style type="text/css">
<!--
body {
margin-left: 10px;
margin-top: 10px;
}
#code
{
padding:20px;
border:2px dashed #CCC;
font-family:"Courier New", Courier, monospace;
font-size:15px;
background-color:#EEE;
}
-->
</style>
</head>
<body>
<h2>Disable /Prevent Text Selection jQuery-JavaScript</h2>
<p>Below this Code Area User can Allow to Select a Text in other Area text selection was disabled</p>
<p id="code">
$(".elementsToDisableSelectFor").disableTextSelect();</p>
<p>When you are leaving above code box selection was deselected! If selected !</p>
</body>
</html>
check jsfiddle output:
http://jsfiddle.net/bHafB/
EDIT:
This is a cross-browser method for preventing text selection using an unselectable="on" element attribute.
<!DOCTYPE html>
<html>
<head>
<title>Unselectable Text</title>
<style type="text/css">
[unselectable=on] { -moz-user-select: none; -khtml-user-select: none; user-select: none; }
</style>
</head>
<body id="doc">
<p unselectable="on">For example, the text in this paragraph
cannot be selected.
For example, the text in this paragraph
cannot be selected
For example, the text in this paragraph
cannot be selected</p>
</body>
</html>
Overlay full transparent text:
<div style="position:absolute;left: 1;top:1;z-index:1;font-size: 10pt;color: rgb(0, 0, 0);">highline me</div><br/><div style="position:absolute;left: 0;top:0;;z-index:2;font-size: 20pt;color: rgba(0, 0, 0, 0);">*********</div>
Related
Is there any possibility how to target HTML tag <title> in CSS for content: ""?
It would be pretty neat to control both the <h1> and the title of the page by one attribute.
I've tried something like
title::before{
content: "Hello world"
}
If this won't be possible, what other solution might be appropriate?
Thanks!
You sure can, in fact, as all elements in a HTML document are plain <tags> they can be made visible and get id, class, style (inline or style block) or any other selector attribute, whether global or custom. Even contenteditable and make them runtime editable (won't work on <script>, though).
Below a snippet displaying <title> with pseudo selectors.
...And if you really want to dig into showing runtime styles, links and javascript check out this Codepen I created some time ago. Beware, not for beginners. Hit the bottom/right [show styles] button in the pen and see the magic happen...
<html>
<head>
<title>Document Title, quite long some we can forse a line break (well, on smaller windows anyway...)</title>
<style>
/* Because it is hidden by default */
head {
display: block;
}
title {
display: block; /* default hidden too */
width: 100%;
min-height : 2rem;
line-height: 2rem;
hyphens: auto;
cursor: pointer; overflow: hidden;
font-size: larger; text-align: center;
background-color: hsl(45,100%,50%);
}
title::before { content: 'Before: ' ; font-weight: bold }
title::after { content: ' :The End!'; font-weight: bold }
body { background-color: Gainsboro }
</style>
</head>
<body>
<p>Some regular paragraph element</p>
</body>
</html>
Following is my HTML
Branding
Is it possible to access using CSS to access anchor tag's text?
Something like this is what I want? The html is dynamically generated, so please don't mention to have id's or to have any classes.
a[text='Branding']
{
}
People already told you that you CAN'T select text in CSS. But there's some workaround in my opinion.
I don't know what you want to do, possibly a bad thing, but if I were you I'd take this bad practice:
/*First you hide the text*/
a {
font-size: 0; /* hide text */
text-decoration: none !important; /* get rid of that awful underline */
}
/* then you insert a new element using :before */
a:before {
content: 'Branding'; /* This is the text you want for the new element */
color: #333;
font-size: 15px; /* Bring back the text inside the anchor for this new element */
font: 24px sans-serif;
}
fiddle: http://jsfiddle.net/tsu7z546/
In case you want to try out jQuery:
$(document).ready(function(){
var brandingAnchor = $('a:contains("Branding")');
brandingAnchor.hide();
});
Remember! Every time you write jQuery code, you must have already called jQuery library on your page, just like this:
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
//Your jQuery code goes HERE, just below the library
$(document).ready(function(){
var brandingAnchor = $('a:contains("Branding")');
brandingAnchor.hide();
});
</script>
I've got a test page with the following line of HTML5 Media Capture code (and nothing else other than a form submit button):
<input type=file accept=image/* id=capture capture=camera>
On an iPhone 4s with ios 8.1.2 the code only works sometimes. It launches the Take Photo/Photo Library dialog successfully, but it does not reliably accept a new photo image (from the phone camera) for upload. More often than not Safari displays an error message 'something has gone wrong with this page and it has been re-loaded'. Generally, if I clear the cache, close Safari and re-launch, it works again, once or twice, and then fails. Once it has failed, it doesn't seem ever to succeed again without re-launching.
It's not clear if this is a buffer issue, or is even related to the file size of the new photo, but given that it does work sometimes, it doesn't appear to be an error in the code or an incompatibility with the OS/browser.
Anyone experience anything similar? Any suggestions how to make this work?
Thanks
The Problem:
I found out the reason for this happening in Safari/iOS is that the main page seems to be "throttled" somehow which means that if the page is a bit heavy CPU/GPU and/or (?) memory wise the <input capture="camera" ...> fails randomly most of the times.
A solution:
My solution on this was to place the <input capture="camera" ...> inside of an <iframe>, sized to fit the input seamlessly. This works because each frame is running in its own process, yet on lower priority than main frame but enough to not be a problem here. It works 100% of the time for me now even in a pretty heavy UI app using a lot of GPU.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#camera-button {
display: inline-block;
width: 100px;
height: 100px;
background: red;
border: 5px solid #eee;
padding: 10px;
z-index: 2147483647;
}
#camera-frame {
width: 100px;
height: 100px;
background-color: transparent;
opacity: 0;
}
</style>
</head>
<body>
<span id="camera">
<iframe id="camera-frame" src="camera.html" scrolling="no" frameBorder="0" allowTransparency="true" seamless>
</span>
<script>
(function() {
window.onCameraChanged = function(event) {
var files;
console.log("[index.html]: snap!", arguments);
if (event.target) {
files = event.target.files;
console.log("[index.html]: files", files);
alert("[index.html]:", files.length, "files from camera.");
}
};
}).call(this);
</script>
</body>
</html>
camera.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#camera-input {
display: block;
width: 100%;
height: 100%;
position: absolute;
outline: none;
box-shadow: none;
border: none;
}
</style>
</head>
<body>
<input id="camera-input" type="file" capture="camera" accept="image/*" onchange="window.onCameraChanged">
<script>
(function() {
var el;
window.onCameraChanged = function(event) {
var files;
console.log("[camera.html]: snap!", arguments);
if (event.target) {
files = event.target.files;
if (window.parent) {
if (typeof window.parent.onCameraChanged === 'function') {
window.parent.onCameraChanged(event);
}
return window.parent.cameraFiles = files;
}
}
if (el = document.querySelector('#camera')) {
el.onchange = window.onCameraChanged; // chrome
}
}).call(this);
</script>
</body>
</html>
Something like that.
I will offer this as a tentative solution insomuch as it has not yet failed, but I'm not sure why it's required. When clicking the button to capture an image, the first thing I do now is this:
$('#capture').val('');
That clears the form before adding a new image. I tried reset(), but that didn't work. It would appear therefore that there is an issue with changing the image in the form once it has been added - it needs to be removed first, not simply overwritten.
I have a <textarea /> as in the code below. How do I display the line numbers on the left hand side of it?
Is there a jQuery plugin?
<TEXTAREA name="program" id="program" rows="15" cols="65" ></TEXTAREA>
There is Lined TextArea (Link no longer valid, see mirror) plugin for jQuery by Alan Williamson
MIT License
jQuery 1.3+
You can very well try
Code Mirror, which is a JavaScript library for embedding a code editor in a web page.
With code lines, it has great features like
Autocompletion
Themes
Mixed language modes
Search
Merge/diff interface
Custom scrollbars etc.
This is a very simple, but effective trick. It inserts an image with the line numbers already added.
The only catch is you may need to create your own image to match your UI design.
https://jsfiddle.net/vaakash/5TF5h/
textarea {
background: url(http://i.imgur.com/2cOaJ.png);
background-attachment: local;
background-repeat: no-repeat;
padding-left: 35px;
padding-top: 10px;
border-color:#ccc;
}
Credit goes to: Aakash Chakravarthy
TLDR: Use CodeMirror
Someone else here recommended CodeMirror, and I can't hardly recommend it enough! But this answer didn't really provide any technical details.
Other solutions: Everything else I tried here has problems with line numbers not matching up with lines. I believe this is because I have monitor DPI (dots per inch) at 120%, and these solutions didn't take this into account.
So, how do you use CodeMirror??? Easy! Just look at the 21,000 words of the documentation! I hope to explain 99% of your questions on it in less than page or two.
Demo it Up!
100% working demo, and it's working perfectly in the StackOverflow sandbox:
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
lineNumbers: true,
mode: 'text/x-perl',
theme: 'abbott',
});
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/perl/perl.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css"></link>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/abbott.min.css"></link>
<textarea id="code" name="code">
if($cool_variable) {
doTheCoolThing(); # it's PRETTY cool, imho
}</textarea>
Features!
Insert/overwrite mode.
Multiple row indenting simultaneously.
Tons of themes.
TLDR: How to Use CodeMirror, in a Page or Less
Step 1 - Load Basic Core Libraries
Add this to your <head> block...
<script language="javascript" type="text/javascript" src="/static/js/codemirror-5.62.0/lib/codemirror.js"></script>
<link rel="stylesheet" type="text/css" href="/static/js/codemirror-5.62.0/lib/codemirror.css"></link>
And, if you like to have extra-bracket color matching, also load this:
<script language="javascript" type="text/javascript" src="/codemirror-5.62.0/addon/edit/matchbrackets.js"></script>
Step 2 - Setup Syntax Highlighting
Check the /codemirror-5.62.0/mode/ dir to see what language matches the language you'll be coding in. There is extensive support in this area.
Add this to your <head> block...
<script language="javascript" type="text/javascript" src="/static/js/codemirror-5.62.0/mode/perl/perl.js"></script>
Step 3 - Initialize and Display CodeMirror
Have some textarea to use....
<textarea id="code" name="code"></textarea>
Initialize and set your codemirror in the JS. You need to use the Mimetype to indicate the mode you want to use, in this case, I'm indicating the Perl Mimetype...
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
lineNumbers: true,
mode: 'text/x-perl',
matchBrackets: true,
});
Step 4 - Pick a Theme
Choose some theme you like, 'liquibyte', 'cobalt' and 'abbott' are both pretty decent dark-mode-ish themes. Run this after defining editor...
editor.setOption('theme', 'cobalt');
And that's it!
No one tried to do this using HTML5 Canvas object and by painting line numbers on it.
So here what I've managed to pool in few hours.
Put canvas and textarea, one next to the other, and painted numbers on canvas.
https://www.w3schools.com/code/tryit.asp?filename=G68VMFWS12UH
true there is limitation we can't handle word-wrap easy in Paint() function without iterating entire textarea content and offdrawing to mirror object for measurements of each line height. Also would yield very complex code.
preview image
CodePress is the one used in WordPress.
function generateWithNumber() {
let inputTexts = document.getElementById("input").value
let textsByLine = inputTexts.split("\n");
const listMarkup = makeUL(textsByLine);
document.getElementById("output").appendChild(listMarkup);
}
function makeUL(array) {
let list = document.createElement('ol');
for (let i = 0; i < array.length; i++) {
let item = document.createElement('li');
item.appendChild(document.createTextNode(array[i]));
list.appendChild(item);
}
return list;
}
// document.getElementById('foo').appendChild(makeUL(options[0]));
ol {
counter-reset: list;
}
ol > li {
list-style: none;
}
ol > li:before {
content: counter(list) ") ";
counter-increment: list;
}
<textarea id="input"></textarea>
<button onClick=generateWithNumber() >Generate</button>
<p id="output"></p>
Consider the use of a contenteditable ordered list <ol> instead of <textarea>
ol {
font-family: monospace;
white-space: pre;
}
li::marker {
font-size: 10px;
color: grey;
}
<ol contenteditable><li>lorem ipsum
<li>>> lorem ipsum
<li>lorem ipsum,\
<li>lorem ipsum.
<li>>> lorem ipsum
<li>lorem ipsum
<li>lorem ipsum
<li>lorem
<li>ipsum
<li>>> lorem ipsum
<li>lorem ipsum
</ol>
However, ::marker styling seems limited (list-style-type). E.g. removing the period or vertical-align: super seems to needs other workarounds (back to li:before and counter).
Bonus: <li> also does not need the closing tag </li> (https://html.spec.whatwg.org/multipage/syntax.html#optional-tags), which saves typing.
Also as far as I understand, the <textarea> in codemirror just works in the background (Pseudo contenteditable: how does codemirror works?).
Line Numbers
Code:
const textarea = document.querySelector("textarea");
const numbers = document.querySelector(".numbers");
textarea.addEventListener("keyup", (e) => {
const num = e.target.value.split("\n").length;
numbers.innerHTML = Array(num).fill("<span></span>").join("");
});
textarea.addEventListener("keydown", (event) => {
if (event.key === "Tab") {
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
textarea.value =
textarea.value.substring(0, start) +
"\t" +
textarea.value.substring(end);
event.preventDefault();
}
});
body {
font-family: Consolas, "Courier New", Courier, monospace;
}
.editor {
display: inline-flex;
gap: 10px;
font-family: Consolas, "Courier New", Courier, monospace;
line-height: 21px;
background-color: #282a3a;
border-radius: 2px;
padding: 20px 10px;
}
textarea {
line-height: 21px;
overflow-y: hidden;
padding: 0;
border: 0;
background: #282a3a;
color: #fff;
min-width: 500px;
outline: none;
resize: none;
font-family: Consolas, "Courier New", Courier, monospace;
}
.numbers {
width: 20px;
text-align: right;
}
.numbers span {
counter-increment: linenumber;
}
.numbers span::before {
content: counter(linenumber);
display: block;
color: #506882;
}
<div class="editor">
<div class="numbers">
<span></span>
</div>
<textarea cols="30" rows="10"></textarea>
</div>
From: https://www.webtips.dev/add-line-numbers-to-html-textarea
It actually works quite well.
The line numbers do not occur instantly but it workds quite fast.
Is there any way to set ff and ie to print background images?
I am using stars image to classify some skills and I set it as a background image and positioning to either set one start, two, three, etc. When I try to print the page the images disappear.
So is there any way to make them appear when I print the page or at least have a way of replacing the images with * or something that would be visible?
Have you considered using a print stylesheet? This could allow you to do something like:
<div class="star">*</div>
/* media:screen */
.star {
background: ...;
overflow: hidden;
text-indent: 9999em;
}
/* media:print */
.star {
text-indent: 0;
}
or even easier:
<div class="star"><img src="./images/star.jpg" alt="*" /></div>
/* media:screen */
.star img {
visibility: hidden;
}
/* media:print */
.star img {
visibility: visible;
}
You can specify stylesheets browsers should use by supplying a media tag, either by css or on the link element:
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
<link rel="print stylesheet" type="text/css" href="print.css" media="print" />
In Firefox, go to File => Page Setup. There is a checkbox for "Print Background (colors & images)". Just check that and you should be all set.
In your print.css file change the background-image to a list item.
So:
.background {
display: list-item;
list-style-image: url(yourbackgroundimage.gif);
list-style-position: inside;
}
This method is described more here: http://www.web-graphics.com/mtarchive/001703.php
Actually I found the answer to be rather simple.
Situation: I had a div tag with a background image. Which would not printout when printing.
Solution:
Create another style sheet called "print.css"
Add the following line of code to your all your web pages right after your orginal css stylesheet link:
<link rel="stylesheet" type="text/css" media="print" href="css/print_styles.css" />
Immediately after your for the original non printing header, add the following:
<div id="header"></div> <!-- YOUR NON PRINTING HEADER -->
<div id="printheader"><img src="images/header_image.jpg" width="940" height="100" alt="header" /></div>
In your style.css file, which is the main css style for you site, add the following line:
#printheader {display: none; } /* Makes the print header not visible */
In your print.css file, add the following code:
#footer, #nav, #sidenav, .print, .search, .breadcrumb, .noprint {display: none;} /* Items from your page you DO NOT want to print */
#container, #container2, #contentwide, #contentwide_tpsub, #contentwide_tp, #contentwide_open {width: 100%; margin: 0; float: none;} /* Clear widths to ensure all text is printed */
#printheader {display: block; } /* Turns ON the div when printing */
What you are doing is essentially turning OFF the header on the normal "screen" page and turning the printheader ON when you make a print call.
** Please note: you will need to modify the print.css file to include other elements of your style.css file to format the fonts, colors, etc. Play around with "Print Preview" and add in the elements you need till you get the printout that you've been seeking.
Don't use background-image to display printable images, use the normal <img> tag instead.
background-image is meant for unimportant images which most modern browsers tend to skip during printing (default setting in IE 11, Chrome 35, FF 30).
Why would you not want to use the img tag?
Alignment issues - Use absolute positioning to solve alignment issues.
Spriting - Spriting is possible using simple img and div tags.
Make it more difficult for users to save the image - That is also possible with simple img and div tags.
To "keep my HTML clean" - do any of the workaround solutions really make it cleaner for you? Give it up :)
For IE http://support.microsoft.com/kb/980077
There must be something similar for FF.
p.s. you cannot set this for clients!
p.s.2. you can replace this stars with foreground pictures (absolute if needed) in css (media="print").
I had the same issue with IE not supporting the printing the background.
So I created 2 divs, one div had a higher Z and had the text content. The second div was immediately behind the front div but a lower Z index and had a image (img not background image) for width and height of 100%. So when I showed the 2 divs together it looked like one div because they perfectly overlapped. When I printed in IE Browser it shows with image because the image is not a background image but a normal img tag that fills a lower div.
some code.
<div id="survey" class="surveyResponseWindow" style="display:none;">Please logout and re-login, because your session has expired.</div>
<div id="surveyBackground" class="surveyBackgroundDiv" style="display:none;">
<!-- provides the background image for ie browser so that it does not show the lower level divs. -->
<img src="/rsm/jsp/public/images/contentGrad.gif" width="100%" height="100%" />
</div>
<script language="javascript" type="text/javascript">
function showSurvey(surveyResponseId) {
var e = document.getElementById("survey");
var bkgd = document.getElementById("surveyBackground");
var focusinput = document.getElementById('focusinput');
var nh = 'data-nohide';
if (e.style.display=='none') {
e.style.display='block';//show div
bkgd.style.display='block';//show div
}
focusinput.focus();//set focus so we know when they click outside
e.onclick = function(e) {
this.style.display='none';//hide div if they click on it
bkgd.style.display='none';//show div
};
//if the user press ESC
focusinput.onkeyup = function(e){
if(e.keyCode === 27){
var survey = document.getElementById("survey");
var bkgd = document.getElementById("surveyBackground");
//hide the div
survey.style.display = 'none';
bkgd.style.display = 'none';
this.removeAttribute(nh);
}else{
//do something else with other keys(ie:down, up, enter)...
focusinput.focus();
}
};
//click somewhere else input onblur
// was taken out because the browser print function would close the survey div page.
//focusinput.onblur = function(){
// if(!e.getAttribute(nh)){
// //hide the div
// e.style.display = 'none';
// }
//};
var params='<%=request.getContextPath()%>/request/dashboard/drilldown/callSurveyDetailAjax.html?surveyResponseId='+surveyResponseId;
YAHOO.plugin.Dispatcher.fetch(e,params, {onLoad:showBackground});
}
var showBackground = function() {
var e = document.getElementById("survey");
var bkgd = document.getElementById("surveyBackground");
bkgd.style.width = e.innerWidth();
bkgd.style.height = e.innerHeight();
bkgd.style.left = e.offsetWidth();
bkgd.style.top = e.offsetHeight();
}
window.onload = function() {
var focusinput = document.getElementById('focusinput');
focusinput.focus();//set focus so we know when they click outside
}
</script>
in CSS put this
.surveyResponseWindow
{
width:500px;
height:600px;
z-index: 2;
position: absolute;
top:100px;
left:150px;
border:1px solid #AAAAAA;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
box-shadow: -1px 7px 15px -2px #000;
}
.surveyBackgroundDiv
{
z-index: 1;
position: absolute;
top:100px;
left:150px;
width:500px;
height:600px;
border:1px solid #AAAAAA;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
box-shadow: -1px 7px 15px -2px #000;
}
I believe this is a browser setting, not the backend of the web sites. I could be wrong however.