We Keep Coding

The script conflicts with the layout alignment of my responsive template.. How I can fix it?

I copied and customized one script taken from a past stackoverflow discussion. And now I can prevent the "Print screen" with the current key combinations: "ctrl+alt+printscr" , "ctrl+printscr" and "alt+printscr". But after I saved my blogger template, I did some tests with great resoults: the script really works great.. But not as expected, I encountered two problems:
If I click the address bar or leave the page unactive, the script automatically show the background image to cover the layout.
If I try to resize the window, the alignment of the elements fails..
I'm not expert with the javascript language, so probably I made some sort of mistake. I made a picture to show you the nature of the problem.
PS: My layout is totally responsive and I never got problems with the automatic alignment of the elements. Then I tried to remove the latest javascript and again works perfectly. Probably I made some unknown mistake into the code.
I installed many anti-stealing protection scripts, jquery and css (but they not conflict apparently..) Here is a screen demostration of the problem
Here is the code:
<script language='JavaScript'>
function copyToClipboard() {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", "You can no longer give printscreen. This is part of the new system security measure.");
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
alert("Print screen disabled.");
}
$(window).keyup(function(e){
if(e.keyCode == 44){
copyToClipboard();
}
});
$(window).focus(function() {
$("body").show();
}).blur(function() {
$("body").hide();
});
</script>

Hiding and showing dividers using javascript - Works in JSFiddle, doesn't work on site

I have made a small javascript to hide dividers when the value of a dropdown menu has changed.
But for some reason the script doesn't work on my own site.
document.getElementById("type").onchange = function () {
var v = this.options[this.selectedIndex].value;
if (v == 1) {
document.getElementById("CostDiv").style.display = "block";
} else {
document.getElementById("CostDiv").style.display = "none";
}
}
Here's a link: http://jsfiddle.net/WeHv3/

is there more than one element in the html document called CostDiv ?
Please give us the source of the html document as that is only difference at the moment I can see.

I think problem is your listener are unable to attach with your element.
Just add your JavaScript at the bottom of page and your problem is solved.

Paragraph breaks in 2 when adding link element

I have this wicked problem only in Firefox: when I add a link element to a contentEditable paragraph sometimes it breaks the paragraph in 2 or 3. This doesn't show any error and sometimes takes few seconds. Here's the code:
function changeSelectedText(type,text) {
var selObj = window.getSelection();
var selRange = selObj.getRangeAt(0);
var newElement = document.createElement(type);
if(type == "a") {
newElement.setAttribute('href', text.toLowerCase());
newElement.setAttribute('target', "_blank");
} else if(type == "span"){
newElement.setAttribute('class', "big");
}
var documentFragment = selRange.extractContents();
newElement.appendChild(documentFragment);
selRange.insertNode(newElement);
var range = document.createRange();
range.selectNodeContents(newElement);
selObj.removeAllRanges();
selObj.addRange(range);
}
Adding span works perfect but with links it sometimes causes this strange behavior. Any idea why?
Here's the link to jsfiddle like Mike suggested:
jsfiddle link

Found it :) The problem was that the button that I used for adding the link (the #link div at jsfiddle) sometimes got selected (only FF). I thought that the mousedown function should prevent this from happening but it didn't. So, what I did is I've added js to prevent selecting that button:
<div id="#link" onselectstart="return false;" ondragstart="return false;">Add Link</div>
If anybody has some better solution let me know ;)

Appending div with image in Chrome

I am having problem with appending a div with an image to a page after clicking a link.
Here is my script, which on document.ready() adds the event.
var handler = function () {
$('#content').append("<div class=\"loading-graphic\" style=\"position:absolute;height:200px;width:200px;top:30%;left:40%;z-index:999;\"></div>");
//$("<div class=\"loading-graphic\" style=\"position:absolute;height:200px;width:200px;top:30%;left:40%;z-index:999;\"></div>").appendTo("div#content");
}
$(document).ready(function () {
for (var ls = document.links, numLinks = ls.length, i = 0; i < numLinks; i++) {
if (ls[i].parentElement.className != "t-window-actions t-header" && ls[i].parentElement.className != "t-widget t-numerictextbox") {
ls[i].onclick = handler;
}
}
})
The problem here that it doesn't work in Chrome while in Firefox and IE its working perfectly. After some digging i found out that it actually adds the div but doesn't show the image. (Tested it with adding the div on the beginning of the page, everything moves down and the div is empty)
I have tested it also adding it directly to page and then it works good but it's not what I'm looking for unfortunately.
Here is my css class:
.loading-graphic
{
background: url('~/Content/ico/loading_big.gif') no-repeat;
}
Got no idea what is causing the problem. Anyone got an idea? ;/

Honestly sometimes Chrome screws up. I have had issues with Chrome and background images, but it was only my computer. Try it on a different computer Chrome browser, it might not be the same.
The other thing I would suggest is, have your div coded already instead of appending it. So basically have it on the html code and position it out of sight, then when you need it, just move it to the right position.

It was the background position; also increased z-index, attached to body, and prevented other invisibility reasons.
var handler = function () {
$('body').append("<div class=\"loading-graphic\" style=\"position:absolute;height:200px;width:200px;top:50%;left:50%;margin:-100px 0 0 -100px;z-index:99999;background-position:center center;display:block !important;\"></div>");
}

Forcing a DOM refresh in Internet explorer after javascript dom manipulation

Here is the situation. I have some javascript that looks like this:
function onSubmit() {
doSomeStuff();
someSpan.style.display="block";
otherSpan.style.display="none";
return doLongRunningOperation;
}
When I make this a form submit action, and run it from a non IE browser, it quickly swaps the two spans visibility and run the long javascript operation. If I do this in IE it does not do the swap until after onSubmit() completely returns.
I can force a dom redraw by sticking an alert box in like so:
function onSubmit() {
doSomeStuff();
someSpan.style.display="block";
otherSpan.style.display="none";
alert("refresh forced");
return doLongRunningOperation;
}
Also, the obvious jquery refactoring does not affect the IE behavior:
function onSubmit() {
doSomeStuff();
$("#someSpan").show();
$("#otherSpan").hide();
return doLongRunningOperation;
}
This behavior exists on IE8 and IE6. Is there anyway to force a redraw of the DOM in these browsers?

Mozilla (maybe IE as well) will cache/delay executing changes to the DOM which affect display, so that it can calculate all the changes at once instead of repeatedly after each and every statement.
To force an update (to force an immediate, synchronous reflow or relayout), your javascript should read a property that's affected by the change, e.g. the location of someSpan and otherSpan.
(This Mozilla implementation detail is mentioned in the video Faster HTML and CSS: Layout Engine Internals for Web Developers.)

To continue what ChrisW says:
here's flushing script to flash DOM, so you don't have to call alert(""); (found at http://amolnw.wordpress.com/category/programming/javascript/):
function flushThis(id){
var msie = 'Microsoft Internet Explorer';
var tmp = 0;
var elementOnShow = document.getElementById(id);
if (navigator.appName == msie){
tmp = elementOnShow.parentNode.offsetTop + 'px';
}else{
tmp = elementOnShow.offsetTop;
}
}
It works for me!!!
Thanks for the tip.

I had this problem in Chrome 21 dragging a word that had a letter with a descender ('g'). It was leaving a trail of moth dust behind on the screen, which would vanish the next time something made the screen refresh. ChrisW's solution (interrogating a layout-sensitive property) didn't work.
What did work was to add a 1-pixel blank div at the top of the page, then remove it a millisecond later, by calling the following the function at the end of the drag operation:
// Needed by Chrome, as of Release 21. Triggers a screen refresh, removing drag garbage.
function cleanDisplay() {
var c = document.createElement('div');
c.innerHTML = 'x';
c.style.visibility = 'hidden';
c.style.height = '1px';
document.body.insertBefore(c, document.body.firstChild);
window.setTimeout(function() {document.body.removeChild(c)}, 1);
}
Note: You need the delay. Simply adding and removing the div doesn't work. Also, the div needs to be added above the part of the page that needs to be redrawn.

You can also wrap you longterm function in a setTimeout(function(){longTerm();},1);

Can your longRunningOperation be called asynchronously?

element.focus() works for me in IE10
function displayOnOff(){
var elm = document.getElementById("myDiv");
elm.style.display="block";
elm.focus();
for(var i=0; i<1000000; i++){
console.log("waiting...............");
}
elm.style.display = "none";
}