When I click browse server in ckeditor the image browser popup doesnt appear.I am facing problem only in Google Chrome.I am using 18.0.1025.152 m verion of Google Chrome
I have made changes in ckeditor/plugins/popup/plugin.js
try
{
// Chrome 18 is problematic, but it's not really needed here (#8855).
var ua = navigator.userAgent.toLowerCase();
if ( ua.indexOf('chrome/18' ) == -1 )
{
popupWindow.moveTo( left, top );
popupWindow.resizeTo( width, height );
}
popupWindow.focus();
popupWindow.location.href = url;
}
catch ( e )
{
popupWindow = window.open( url, null, options, true );
}
I followed this link enter link description here
But I am unable to resolve the issue.Can anyone help
If you edit the source files you have to repackage them again. It's much simpler to update to CKEditor 3.6.3 and get all the other bug fixes.
I am using opencart 1.5.1.3 ckeditor. I edit the /admin/view/javascript/ckeditor/ckeditor.js and re-align the javascript code with http://jsbeautifier.org/
I have tried with the patch from ckeditor community and little modifications. It works!
http://dev.ckeditor.com/ticket/8855
So if anyone has face the similar issue like me in opencart you can try with below changes.
+++ b/v1.5.1.3/admin/view/javascript/ckeditor/ckeditor.js
## -9190,8 +9190,21 ## For licensing, see LICENSE.html or http://ckeditor.com/license
var s = window.open('', null, p, true);
if (!s) return false;
try {
- s.moveTo(r, q);
- s.resizeTo(n, o);
+ // s.moveTo(r, q);
+ // s.resizeTo(n, o);
+ // Chrome 18 is problematic, but it's not really needed here (#8855).
+ var ua = navigator.userAgent.toLowerCase();
+ var useResize = true;
+ if (ua.indexOf('chrome') > -1) {
+ var chromeVersion = ua.replace(/^.*chrome\/([\d]+).*$/i, '$1')
+ if(chromeVersion >= 18) {
+ useResize = false;
+ }
+ }
+ if (useResize) {
+ s.moveTo( r, q );
+ s.resizeTo( n, o );
+ }
s.focus();
s.location.href = m;
} catch (t) {
I'm using the CKEditor 3.6.2 that comes bundled with primefaces-extensions, so upgrading is not that easy. But executing the following fix against the page also worked. I pasted it in the config file, to be sure that it is fired after the CKEDITOR variable is initialized.
CKEDITOR.editor.prototype['popup'] = function( url, width, height, options ) {
width = width || '80%';
height = height || '70%';
if ( typeof width == 'string' && width.length > 1 && width.substr( width.length - 1, 1 ) == '%' )
width = parseInt( window.screen.width * parseInt( width, 10 ) / 100, 10 );
if ( typeof height == 'string' && height.length > 1 && height.substr( height.length - 1, 1 ) == '%' )
height = parseInt( window.screen.height * parseInt( height, 10 ) / 100, 10 );
if ( width < 640 )
width = 640;
if ( height < 420 )
height = 420;
var top = parseInt( ( window.screen.height - height ) / 2, 10 ),
left = parseInt( ( window.screen.width - width ) / 2, 10 );
options = ( options || 'location=no,menubar=no,toolbar=no,dependent=yes,minimizable=no,modal=yes,alwaysRaised=yes,resizable=yes,scrollbars=yes' ) +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
var popupWindow = window.open( '', null, options, true );
// Blocked by a popup blocker.
if ( !popupWindow )
return false;
try
{
// Chrome 18 is problematic, but it's not really needed here (#8855).
var ua = navigator.userAgent.toLowerCase();
if ( ua.indexOf( ' chrome/18' ) == -1 )
{
popupWindow.moveTo( left, top );
popupWindow.resizeTo( width, height );
}
popupWindow.focus();
popupWindow.location.href = url;
}
catch ( e )
{
popupWindow = window.open( url, null, options, true );
}
return true;
}
$(document).ready(
function() {
setContentHeight();
makeInstructionsTogglable();
window.onbeforeunload = function() {
if (editor.isDirty()) {
return "Are you sure you want to navigate away? You have unsaved changes."
}
};
}
);
$(window).resize(function() {
setContentHeight();
});
Related
This code allows me to click on a thumbnail and see the original in a new window.
Clicking outside of the window does an autoclose.
So far so good.
However if the image is larger than the screen resolution I have to doubleclick on the Title Bar and then right click and "view image" to make it full screen. How can I change the code to prevent the image going off the screen?
<script language="JavaScript" type="text/javascript">
PositionX = 10;
PositionY = 10;
defaultWidth = 600;
defaultHeight = 400;
var AutoClose = true;
function popImage(imageURL,imageTitle){
var imgWin = window.open('','_blank','scrollbars=no,resizable=1,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY);
if( !imgWin ) { return true; } //popup blockers should not cause errors
imgWin.document.write('<html><head><title>'+imageTitle+'<\/title><script type="text\/javascript">\n'+
'function resizeWinTo() {\n'+
'if( !document.images.length ) { document.images[0] = document.layers[0].images[0]; }'+
'var oH = document.images[0].height, oW = document.images[0].width;\n'+
'if( !oH || window.doneAlready ) { return; }\n'+ //in case images are disabled
'window.doneAlready = true;\n'+ //for Safari and Opera
'var x = window; x.resizeTo( oW + 200, oH + 200 );\n'+
'var myW = 0, myH = 0, d = x.document.documentElement, b = x.document.body;\n'+
'if( x.innerWidth ) { myW = x.innerWidth; myH = x.innerHeight; }\n'+
'else if( d && d.clientWidth ) { myW = d.clientWidth; myH = d.clientHeight; }\n'+
'else if( b && b.clientWidth ) { myW = b.clientWidth; myH = b.clientHeight; }\n'+
'if( window.opera && !document.childNodes ) { myW += 16; }\n'+
'x.resizeTo( oW = oW + ( ( oW + 200 ) - myW ), oH = oH + ( (oH + 200 ) - myH ) );\n'+
'var scW = screen.availWidth ? screen.availWidth : screen.width;\n'+
'var scH = screen.availHeight ? screen.availHeight : screen.height;\n'+
'if( !window.opera ) { x.moveTo(Math.round((scW-oW)/2),Math.round((scH-oH)/2)); }\n'+
'}\n'+
'<\/script>'+
'<\/head><body onload="resizeWinTo();"'+(AutoClose?' onblur="self.close();"':'')+'>'+
(document.layers?('<layer left="0" top="0">'):('<div style="position:absolute;left:0px;top:0px;display:table;">'))+
'<img src='+imageURL+' alt="Loading image ..." title="" onload="resizeWinTo();">'+
(document.layers?'<\/layer>':'<\/div>')+'<\/body><\/html>');
imgWin.document.close();
if( imgWin.focus ) { imgWin.focus(); }
return false;
}
</script>
<a href="./mypic.jpg" onclick="return popImage(this.href,'Magnify');">
<img src="./mythumb.jpg" width="500" height="333" border="0"></a>
A jqueryui dialog is placed at the right edge of window, when I quickly resize the dialog from the left side, the dialog's width was set incorretly. what I mean quickly resize here is, move the mouse fast and then quickly release the mouse, I will explain later the reason of doing this.
To make my word more clearly, I have created a jsfiddle: https://jsfiddle.net/sangelee/hw62erug/6/embedded/result/
You can try yourself what I have done in the jsfiddle, but remember you should first put the dialog at the right edge of the container:http://jqueryui.com/dialog/
In the jqueryui source code, the following snippet is executed when resizing the dialog:
resize: function( event ) {
var woset, hoset, isParent, isOffsetRelative,
that = $( this ).resizable( "instance" ),
o = that.options,
co = that.containerOffset,
cp = that.position,
pRatio = that._aspectRatio || event.shiftKey,
cop = {
top: 0,
left: 0
},
ce = that.containerElement,
continueResize = true;
if ( ce[ 0 ] !== document && ( /static/ ).test( ce.css( "position" ) ) ) {
cop = co;
}
if ( cp.left < ( that._helper ? co.left : 0 ) ) {
that.size.width = that.size.width +
( that._helper ?
( that.position.left - co.left ) :
( that.position.left - cop.left ) );
if ( pRatio ) {
that.size.height = that.size.width / that.aspectRatio;
continueResize = false;
}
that.position.left = o.helper ? co.left : 0;
}
if ( cp.top < ( that._helper ? co.top : 0 ) ) {
that.size.height = that.size.height +
( that._helper ?
( that.position.top - co.top ) :
that.position.top );
if ( pRatio ) {
that.size.width = that.size.height * that.aspectRatio;
continueResize = false;
}
that.position.top = that._helper ? co.top : 0;
}
isParent = that.containerElement.get( 0 ) === that.element.parent().get( 0 );
isOffsetRelative = /relative|absolute/.test( that.containerElement.css( "position" ) );
if ( isParent && isOffsetRelative ) {
that.offset.left = that.parentData.left + that.position.left;
that.offset.top = that.parentData.top + that.position.top;
} else {
that.offset.left = that.element.offset().left;
that.offset.top = that.element.offset().top;
}
woset = Math.abs( that.sizeDiff.width +
(that._helper ?
that.offset.left - cop.left :
(that.offset.left - co.left)) );
hoset = Math.abs( that.sizeDiff.height +
(that._helper ?
that.offset.top - cop.top :
(that.offset.top - co.top)) );
if ( woset + that.size.width >= that.parentData.width ) {
that.size.width = that.parentData.width - woset;
if ( pRatio ) {
that.size.height = that.size.width / that.aspectRatio;
continueResize = false;
}
}
if ( hoset + that.size.height >= that.parentData.height ) {
that.size.height = that.parentData.height - hoset;
if ( pRatio ) {
that.size.width = that.size.height * that.aspectRatio;
continueResize = false;
}
}
if ( !continueResize ) {
that.position.left = that.prevPosition.left;
that.position.top = that.prevPosition.top;
that.size.width = that.prevSize.width;
that.size.height = that.prevSize.height;
}
}
In the code above, there is a conditional statement:
if ( woset + that.size.width >= that.parentData.width ) {
that.size.width = that.parentData.width - woset;
if ( pRatio ) {
that.size.height = that.size.width / that.aspectRatio;
continueResize = false;
}
}
The woset was the element's previous $(element).offset().left, but the that.size.width is the element's current new width, why the woset used the previous value but not the current offset, or just use event.pageX?
I have tried that, if woset was replaced by event.pageX, or remove the statement that.size.width = that.parentData.width - woset;, the flickering of the dialog's right side that I showed in the jsfiddle won't happen, and the dialog's resizing behavior still works well. So why add this conditional statement?
If the dialog was not placed at the right edge of window, the conditional statement will not passed, and the dialog's width won't be reset. It is the reason why only the dialog which is closed to the right edge of the window will have the width not set correctly issue.
Perhaps I didn't make myself clear in the above, so I give another example here.
A dialog was initially placed at the right edge of window, and its offset is left: 1600, top: 0, width: 300. woset + that.size.width == that.parentData.width is true here because the dialog is closed to the right edge of window. The window width is initially set to 1900. To simulate resizing quickly on the left side:
var mouseover_event = new MouseEvent('mouseover', {
bubbles: true,
button: 0,
cancelBubble: false,
cancelable: true,
clientX: 1600,
clientY: 300,
pageX: 1600,
pageY: 300
});
var mousedown_event = new MouseEvent('mousedown', {
bubbles: true,
button: 0,
cancelBubble: false,
cancelable: true,
clientX: 1600,
clientY: 300,
pageX: 1600,
pageY: 300
});
var mousemove_event = new MouseEvent('mousemove', {
bubbles: true,
button: 0,
cancelBubble: false,
cancelable: true,
clientX: 1300,
clientY: 300,
pageX: 1300,
pageY: 300
});
var resize_handler = document.querySelector('.ui-resizable-handle.ui-resizable-w');
resize_handler.dispatchEvent(mouseover_event);
resize_handler.dispatchEvent(mousedown_event);
resize_handler.dispatchEvent(mousemove_event);
After dispatch the events, the dialog's position and width should be: left: 1300; width: 600.
However, when executing the conditional statement above, if ( woset + that.size.width >= that.parentData.width ) {, that.size.width was set to be the new dialog width 600, but the woset was still the initial offset 1600, that.parentData.width is the window's width, 1600 + 600 > 1900, and then the follow statement, that.size.width = that.parentData.width - woset; was executed, which sets the dialog's width to nearly the initial width 300. It seems that the dialog was just been moved, not resized. So I think the dialog's width issue was caused by that statement.
The reason I quickly resize the dialog is that I'm writing a script to sync two same page's events, means when an event happened in one page, sends the event detail to the other same page, and then dispatch the same event, just like element.dispatchEvent(event) above. For the sake of efficiency, when syncing the drag or resize event, just sync the last mousemove event before the mouseup(it is just the same behavior as quickly resize the dialog).
The jqueryui version I used is 1.11.4.
And my questions:
Why to add the conditional statement if ( woset + that.size.width >= that.parentData.width ) { and reset the dialog's width that.size.width = that.parentData.width - woset;, since that.size.width has already been set correctly? And why woset was the 'previous value' but not the 'current value'?
Are there any workarounds to the dialog's width problem?
I assume that this is a bug but if any of you know any work around please let me know.
First of all, the fonts are loaded 101%.
I load Google fonts synchronously
I check with interval to make sure that the font is loaded.
I convert a string into an image (with the below function) by using canvas with success (when
I use English characters)
After rendering a couple English characters I try to render a Greek
word but canvas fall backs to browsers default font.
Firefox doesn't have any issue at all, it works great. The issue is
with Chrome.
Bellow is the function that creates a ribbon-label background image on the top left corner from a given string (PS: this function return imageData that are being merged with other imageData later on):
ImageProcessor.prototype.createLabelImageData = function ( str, size, font, color, backgroundColor, shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur, width, height ) {
this.canvas.width = width || this.settings.width;
this.canvas.height = height || this.settings.height;
this.ctx.clearRect( 0, 0, this.canvas.width, this.canvas.height );
this.ctx.font = "Bold " + ( size || 64 ) + "px " + ( font || "Arial" );
this.ctx.textAlign = "center";
this.ctx.textBaseline = "middle";
var labelHeight = ( size || 64 ) + ( ( size || 64 ) / 4 );
var labelTop = this.canvas.height / 2 - labelHeight / 2;
var labelWidth = this.canvas.width;
var strLen = this.ctx.measureText( str + " " ).width;
var side = Math.sqrt( ( strLen * strLen ) / 2 );
var distance = Math.sqrt( ( side * side ) - ( ( strLen / 2 ) * ( strLen / 2 ) ) );
this.ctx.save();
this.ctx.rotate( -Math.PI / 4 );
this.ctx.translate( -this.canvas.width / 2, -this.canvas.height / 2 + distance );
this.ctx.fillStyle = ( backgroundColor || '#f00' );
this.ctx.beginPath();
this.ctx.moveTo( 0, labelTop );
this.ctx.lineTo( labelWidth, labelTop );
this.ctx.lineTo( labelWidth, labelTop + labelHeight );
this.ctx.lineTo( 0, labelTop + labelHeight );
this.ctx.closePath();
this.ctx.fill();
if ( shadowColor ) {
this.ctx.shadowColor = shadowColor;
this.ctx.shadowOffsetX = ( shadowOffsetX || 0 );
this.ctx.shadowOffsetY = ( shadowOffsetY || 0 );
this.ctx.shadowBlur = ( shadowBlur || size || 64 );
}
this.ctx.fillStyle = ( color || "#fff" );
this.ctx.fillText( str, this.canvas.width / 2, this.canvas.height / 2 );
this.ctx.restore();
var imageData = this.ctx.getImageData( 0, 0, this.canvas.width, this.canvas.height );
this.canvas.width = this.settings.width;
this.canvas.height = this.settings.height;
return imageData;
};
Well after some testing, trial and error and many many hours of reading...
I found out that it doesn't matter if the font has been downloaded when you want to use it in canvas. What worked for me before anything else and any check was to create n*2 div elements (n the number of fonts loaded) and position them outside of the view-port. n*2 because in some I added font-weight:bold.
Bottom line is that the exact font you wish to use in canvas must be:
Preloaded
Create a dummy dom element with innerHTML text of all language
variations (latin & greek in my case).
Keep in mid that you have to create extra elements for the bold variation of the font.
Here is the code that I'm currently using to preload fonts and make sure they are available in canvas.
Vise.prototype.initializeFonts = function ( settings, globalCallback ) {
var that = this; // reference to parent class
/********************************************
********************************************
**
**
** Default settings
**
**
********************************************
********************************************/
var defaults = {
interval: 100,
timeout: 10000,
families: [
'Open+Sans+Condensed:300,300italic,700:latin,greek',
'Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800:latin,greek',
'Roboto+Condensed:300italic,400italic,700italic,400,700,300:latin,greek',
'Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic:latin,greek'
]
};
// initialization
this.fonts = new Fonts( $.extend( true, defaults, settings ) );
this.fonts.onload = globalCallback;
this.fonts.load();
};
/********************************************
********************************************
**
**
** Fonts class
**
**
********************************************
********************************************/
function Fonts( settings ) {
this.settings = settings;
this.success = [];
this.fail = [];
this.interval = null;
this.elapsedTime = this.settings.interval;
this.fontDetective = new Detector();
}
Fonts.prototype.load = function () {
WebFont.load( {
google: {
families: this.settings.families
}
} );
for ( var i in this.settings.families ) {
var el, elBold;
var familyStr = this.settings.families[ i ];
var family = familyStr.split( ':' )[ 0 ].replace( /[+]/gi, ' ' );
el = document.createElement( "div" );
el.innerHTML = "Font loader Φόρτωμα γραμματοσειράς";
el.style.fontFamily = family;
el.style.color = "#f00";
el.style.position = "fixed";
el.style.zIndex = 9999;
el.style.left = "9999px";
document.body.appendChild( el );
elBold = document.createElement( "div" );
elBold.innerHTML = "Font loader Φόρτωμα γραμματοσειράς";
elBold.style.fontFamily = family;
elBold.style.fontWeight = "bold";
elBold.style.color = "#f00";
elBold.style.position = "fixed";
elBold.style.zIndex = 9999;
elBold.style.left = "9999px";
document.body.appendChild( elBold );
}
this.interval = setInterval( this.areLoaded.bind( this ), this.settings.interval );
};
Fonts.prototype.areLoaded = function () {
for ( var i in this.settings.families ) {
var familyStr = this.settings.families[ i ];
var family = familyStr.split( ':' )[ 0 ].replace( /[+]/gi, ' ' );
var successIdx, failIdx;
if ( this.fontDetective.detect( family ) ) {
successIdx = this.success.indexOf( family );
failIdx = this.fail.indexOf( family );
if ( successIdx === -1 ) {
this.success.push( family );
console.log( "[" + family + "] was successfully loaded." );
}
if ( failIdx > -1 ) {
this.fail.splice( failIdx, 1 );
}
} else {
successIdx = this.success.indexOf( family );
failIdx = this.fail.indexOf( family );
if ( successIdx > -1 ) {
this.success.splice( successIdx, 1 );
}
if ( failIdx === -1 ) {
this.fail.push( family );
}
}
}
if ( this.elapsedTime >= this.settings.timeout ) {
clearInterval( this.interval );
var err = new Error( "Unable to load fonts: " + this.fail.toString() );
this.onload( err, null );
return;
}
if ( this.success.length === this.settings.families.length ) {
clearInterval( this.interval );
this.onload( null, null );
return;
}
this.elapsedTime += this.settings.interval;
};
This is what worked for me in case someone else has the same issue on chrome.
PS: Take a look at fontdetect.js which I use in my code.
Fiddle - http://liveweave.com/JS9EBN
This is a starter template for web design applications. (well almost except for the drawing problem)
Elements are drawn to the stage like so.
// Handles Drawable Elements
$("#canvas").on('mousedown touchstart', function(e) {
if(drawable) {
drawing = true;
mS.x = e.pageX;
mS.y = e.pageY;
dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box' />")
.html("Certains textes");
$(this).append(dBox);
// Do not select text when drawing
return false;
}
});
$(document).on('mousemove touchmove', function(e) {
if(drawing && drawable){
var mPos = {x:e.pageX, y:e.pageY};
var css = {};
css.position = 'absolute';
css.left = (mPos.x > mS.x) ? mS.x : mPos.x;
css.top = (mPos.y > mS.y) ? mS.y : mPos.y;
css.width = Math.abs(mPos.x - mS.x);
css.height = Math.abs(mPos.y - mS.y);
css.border = '1px dotted rgb(0, 34, 102)';
dBox.css(css);
// Do not select text when drawing
return false;
}
}).on('mouseup touchend', function(e) {
drawing = false;
});
As long as my select tool is not called I can draw elements without a problem, but when it is called and I come back to draw a div I can no longer draw elements to my stage.
After some tinkering I noticed the problem resides with my drag function for each element that's selected.
var HandleSelectedElement = function() {
if ($(".select-tool.activetool").is(":visible")) {
if(elmstyle) {
$('#canvas').children().drag("start",function( ev, dd ){
dd.attrc = $( ev.target ).prop("className");
dd.attrd = $( ev.target ).prop("id");
dd.width = $( this ).width();
dd.height = $( this ).height();
})
.drag(function( ev, dd ){
var props = {};
if ( dd.attrc.indexOf("E") > -1 ){
props.width = Math.max( 32, dd.width + dd.deltaX );
}
if ( dd.attrc.indexOf("S") > -1 ){
props.height = Math.max( 32, dd.height + dd.deltaY );
}
if ( dd.attrc.indexOf("W") > -1 ){
props.width = Math.max( 32, dd.width - dd.deltaX );
props.left = dd.originalX + dd.width - props.width;
}
if ( dd.attrc.indexOf("N") > -1 ){
props.height = Math.max( 32, dd.height - dd.deltaY );
props.top = dd.originalY + dd.height - props.height;
}
if ( dd.attrd.indexOf("stylethis") > -1 ){
props.top = dd.offsetY;
props.left = dd.offsetX;
}
$('#stylethis').css( props );
}, {relative:true});
}
};
I don't understand what's wrong.
I couldn't find out how to solve the initial problem. So I decided to do a work around.
Here's the fiddle: http://liveweave.com/g2aKlD
I decided to refresh the canvas each time a tool is clicked. I take the canvas's html and set that as a textarea's value. I then set the textarea's value as the canvas's html.
$("#code").val($("#canvas").html());
$("#canvas").html($("#code").val());
This way whatever called the initial bug is removed completely. However last time I did this all spaces where turned into a otherwise known as a non-breakable space (I've also seen this also add unnecessary line breaks and paragraphs when not needed)
I still don't understand why my draw function did not work when drag was turned off.
I really hate having to do this (being refreshing the canvas) because the more elements that are in there and the more refreshing is done, the more ram it uses which makes the browser work the cpu that much harder.
I hope someone can come across a better solution.
I'm adapting a pretty basic js function into a class. Anyway, basically it just creates a floating container
above the main page. I'm aware it's incomplete, but I'm in the middle of typing it up, and keep getting caught out when attempting to call the close() function. Firefox returns a this.sdiv is undefined. I'm confused as to how this can be the case when close() is Pop's method and sdiv is defined in the first line of the Pop class?
function Pop( wpx,hpx ){
Pop.prototype.sdiv;
Pop.prototype.shadow;
Pop.prototype.pdiv;
// start with the invisible screen, which
// covers the main page
this.sdiv = document.createElement("DIV")
this.sdiv.className = "popScreen";
this.sdiv.id = "popScreen";
// this screen covers the full document, so
// base dimensions on the document size
this.sdiv.style.width = document.body.clientWidth + "px";
this.sdiv.style.height = document.body.clientHeight + "px";
document.body.appendChild( this.sdiv );
// attach drop shadow
this.shadow = document.createElement("DIV");
this.shadow.className = "popShadow";
this.shadow.style.width = wpx + "px";
this.shadow.style.height = hpx + "px";
this.shadow.style.left = ( ( window.innerWidth / 2 ) - ( wpx / 2 ) ) + "px";
this.shadow.style.top = ( ( window.innerHeight / 2 ) - ( hpx / 2 ) ) + "px";
document.body.appendChild( this.shadow );
this.pdiv = document.createElement("DIV");
this.pdiv.className = "pop";
this.pdiv.id = "pop";
this.pdiv.style.position = "absolute";
this.pdiv.style.width = wpx + "px";
this.pdiv.style.height = hpx + "px";
this.shadow.appendChild( this.pdiv );
// bind an event to the screen div so that when it is clicked
// the Pop dialogue is closed and the user is return to the main page
$("div#popScreen").click( function( ){
Pop.prototype.close( );
} );
Pop.prototype.go = function( url, method, data ){
if( method == null )
$("div#pop").load( url );
}
Pop.prototype.close = function( ){
this.sdiv.parentNode.removeChild( this.sdiv );
this.shadow.parentNode.removeChild( this.shadow );
this.pdiv.parentNode.removeChild( this.pdiv );
}
}
Thanks in advance for any help
You can't use Pop.prototype.close() to close all Pop instances. Instead, for each instance of Pop that you have created with the new operator, you need to call popInstance.close().
this in javascript works very differently to this in oo languages.
The error you have is here:
Pop.prototype.close = function( ){
this.sdiv.parentNode.removeChild( this.sdiv );
this.shadow.parentNode.removeChild( this.shadow );
this.pdiv.parentNode.removeChild( this.pdiv );
}
In that function this is probably referring to the window (set a breakpoint and have a look in firebug)
Perhaps something along these lines will work.
var parent = this;
Pop.prototype.close = function(){
parent.sdiv.parentNode.removeChild( this.sdiv );
parent.shadow.parentNode.removeChild( this.shadow );
parent.pdiv.parentNode.removeChild( this.pdiv );
}