We Keep Coding

window.opener.document access denied?

So, I was hoping you guys could find the logic here?
So after a bit of looking all I've found was access denied errors for the window.opener thing, but it seems to be something else for me. Because I can access that and some of its properties like 'closed'.
I must be doing something wrong here...
My code:
The function that opens it (in a script tag on the parent page)
function openPopup(objectID) {
var webpagina = "Fotos.aspx";
var param = "objectid=" + objectID + "&edit=true";
var naam = "Fotos";
var height = 500;
var width = 300;
var top = 250;
var left = 400;
var scroll = "Yes";
var resize = "Yes";
var newhref = webpagina + "?" + param;
var popupwindow = window.open(newhref, naam, "toolbar=yes,titlebar=no,location=no,directories=no,status=no,menubar=no,scrollbars=" + scroll + ",resizable=" + resize + ",width=" + width + ",height=" + height + ",top=" + top + ",left=" + left);
popupwindow.opener = window;
popupwindow.focus();
}
The onload function in the opened page:
window.onload = function () {
var isclosed = window.opener.closed; //false
var secretfield = window.opener.document.getElementById('scrtFoto');
};
The access denied happens on the document, but not the closed, which is false. It's so weird, any help appreciated!
Thanks in advance!

You don't need to set the window.opener property, it's automatically set when you open your popup. Being able to set it manually would be a security risk.

What you need is contentWindow.
window.opener.contentWindow. document.getElementById('scrtFoto');

Javascript style using getBoundingClientRect not working

Hi I am trying to use getBoundingClientRect javascript function but the problem is this only seems to work for 1 of my elements. Here is the code.
function getDataXML(getID, cellId) {
var divMain = document.getElementById('Main');
var divCell = document.getElementById(cellId);
var divHoverControl = document.getElementById(getID);
var rectMain = divHoverControl.getBoundingClientRect();
var rectCell = divCell.getBoundingClientRect();
var divWidth = divHoverControl.offsetWidth;
var cellWidth = divCell.offsetWidth;
alert(rectMain.left + " " + rectMain.right + " " + divWidth + " " + cellWidth);
}
Its seems as though the page gets the elements using there ID correctly as I get no error and setting some style attributes works for each element but I only seem to get a result for my rectCell and cellWidth variables but the exact same code for rectMain and DivWidth dont seem to work. Any help would be greatly appreciated.

Javascript replace window.open with an onload function

I have a javascript function that opens a login.htm window in the mode I would like after I click a button on my index.htm page ....
function openApp() {
var options = "channelmode=" + 1 +
",resizable=" + 1 +
",menubar=" + 0 +
",toolbar=" + 0 +
",location=" + 0 +
",titlebar=" + 1 +
",status=" + 1 +
",scrollbars=" + 1;
var name = "reporting";
var appURL = "login.htm"
var newWindow = window.open(appURL,name,options);
newWindow.focus();
}
It works fine but now I would like to move the functionality of opening the window into the login.htm window on load function.
For example if someone goes to login.htm itself, i want the window to open up in that mode.
I've tried a few things but can't figure this out. Can someone please help me.
I am using jquery so I could do it using jquery.
thanks

If you've got a DOM element with a click event that opens the login.htm and you want to open a new window as well with the same window properties if another DOM element is clicked just set the click event to that that DOM element, as in <span onclick="openApp()">Login</span>.
You could navigate to the log in page and set a setTimeout.
Just place this code in the log in page that the user navigates to, and it will open a new window on its own after the log in page DOM is loaded.
<script type="text/javascript">
setTimeout(function () {
var openApp = function () {
var options = "channelmode=" + 1 +
",resizable=" + 1 +
",menubar=" + 0 +
",toolbar=" + 0 +
",location=" + 0 +
",titlebar=" + 1 +
",status=" + 1 +
",scrollbars=" + 1;
var name = "reporting",
appURL = "login.htm",
newWindow = window.open(appURL, name, options);
newWindow.focus();
}();
}, 100);
</script>

You would take the section that var options is being set and put it outside of the openApp() function, like so:
var options = "channelmode=" + 1 +
",resizable=" + 1 +
",menubar=" + 0 +
",toolbar=" + 0 +
",location=" + 0 +
",titlebar=" + 1 +
",status=" + 1 +
",scrollbars=" + 1;
function openApp() {
var name = "reporting";
var appURL = "login.htm"
var newWindow = window.open(appURL,name,options);
newWindow.focus();
}
Then you can call openApp() however you'd like.
If you want to run openApp() to execute when the whole page is fully loaded (i.e. all images are loaded) then you'd do the following:
$(window).load(function(){
openApp();
});
If you want to execute openApp() when the document is in its "ready" state (when he DOM is available to manipulate), then do the following:
$("document").ready(function(){
openApp();
});

Custom Twitter Button with Dynamic Content and Popup Window

I am using the following code which does 2 out of the 3 things I want it to do, shares dynamic content with a custom twitter button:
<script type="text/javascript">
// <![CDATA[
var twtTitle = document.title;
var twtUrl = location.href;
var maxLength = 140 - (twtUrl.length + 1);
if (twtTitle.length > maxLength) {
twtTitle = twtTitle.substr(0, (maxLength - 3)) + '...';
}
var twtLink = 'http://twitter.com/home?status=' + encodeURIComponent(twtTitle + ' ' + twtUrl);
document.write('<a href="' + twtLink + '" target="_blank"' + '><img src="images/twitter.png" border="0" alt="Tweet This!" /' + '><' + '/a>');
// ]]>
</script>
What I would like it to do is also popup in a window rather than a full page view. My knowledge of script is limited so I don't know where to insert the appropriate popup code.
Any help?

instead of document.write you need window.open. Make sure the event is done in a click action, otherwise popup blockers would stop your script
<script type="text/javascript">
function fbs_click() {
var twtTitle = document.title;
var twtUrl = location.href;
var maxLength = 140 - (twtUrl.length + 1);
if (twtTitle.length > maxLength) {
twtTitle = twtTitle.substr(0, (maxLength - 3)) + '...';
}
var twtLink = 'http://twitter.com/home?status=' + encodeURIComponent(twtTitle + ' ' + twtUrl);
window.open(twtLink);
}
</script>
And in your HTML add your image tag like this:
Hope this helps

You can place an ID="twitPop" on the anchor and use this as well.
$('#twitPop').click(function(event) {
var width = 575,
height = 400,
left = ($(window).width() - width) / 2,
top = ($(window).height() - height) / 2,
url = this.href,
opts = 'status=1' +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
window.open(url, 'twitter', opts);
return false;
});

why wont jQuery remove() work in this case?

Im trying to cause a canvas element to be added to the DOM and then removed after a set time. The killbox() function gets called, but the element is not removed. I believe I have the syntax right, and that there is some underlying issue with removing dynamically added DOM elements.
//con is short for console.log()
function spawnCanvas(e) {
con(e);
var boxheight=50;
var boxwidth=50;
var xpos = e.clientX - boxwidth/2;
var ypos = e.clientY - boxheight/2;
var id = xpos.toString() + ypos.toString();
con("id:" + id);
var tag = "<canvas width='" + boxwidth +
"' height='" + boxheight +
"' style='position:absolute; border:1px solid #000; left:" +
xpos + "px; top:" + ypos + "px;' id='" + id + "'></canvas>";
con(tag);
var t = $(tag);
$("body").append(t);
var p = setTimeout("killbox(" + id + ")", 1500);
}
function killbox(id){
con("in killbox. id:" + id);
$('#id').remove();
}

Within killbox you are removing the element with the literal id id. Instead try;
$('#' + id).remove();
The above will remove the element that has the id that the "id" variable is set to.

Are you sure you don't want $("#" + id).remove();?

because you are searching with an element with the ID id, but you rather wanted to pass the parameter from the function
function killbox(id){
con("in killbox. id:" + id);
$('#'+id).remove();
}