post

Fix png issue for jQuery fadeIn()/fadeOut() effect IE7

When we use jQuery fadeIn() or faeOut() function with transparent png image, in IE7 we get a weird borer around it. There are many solutions for it, but we cant say that all of those are okay to everyone. This one works for me and some other guys. Call the following function in document load.

post

A very simple popup plugin

This is a very simple popup plugin with jQuery. As I am a newbie, so this is for newbies. Hope it can reduce their pressure.

Special thanks goes to:
Anjan Bhowmik Da
Adrián Mato Gondelle

HTML Code:
[html]

[/code]

In head tag:
[code lang=”html”]

[/html]

CSS Code:

[css]

.backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
.popupBox{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
border:10px solid #666;
border-radius:10px;
z-index:200;
}
.popupBoxClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
cursor:pointer;
}

[/css]

Plugin code:

[javascript]

(function($) {
$.fn.jPopup = function(options)
{
var settings =
{
‘className’: ‘popup’
};

var popStatus = 0;
var methods =
{
loadPopup: function(obj)
{
var jId = obj.attr(‘href’);
if(popStatus == 0)
{
$(jId).append(‘

‘);
$(jId+” .backgroundPopup”).css({“opacity”: “0.5”});
$(jId+” .backgroundPopup”).fadeIn(“slow”);
$(jId+” .popupBox”).css(‘width’, $(jId+” .popupBox div:first-child”)
.width()).append(‘X‘)
.fadeIn(“slow”);
popupStatus = 1;
}
},

disablePopup: function(obj)
{
var jId = obj.attr(‘href’);
$(“.popupBoxClose, .backgroundPopup”).live(‘click’, function() {
$(jId+” .popupBox”).fadeOut(“slow”);
$(jId+” .backgroundPopup”).remove();
$(jId+” .popupBoxClose”).remove();
popupStatus = 0;
});
},

centerPopup: function(obj)
{
var jId = obj.attr(‘href’);
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var popupHeight = $(jId+” .popupBox”).height();
var popupWidth = $(jId+” .popupBox”).width();

//centering
$(jId+” .popupBox”).css({
“position”: “absolute”,
“top”: windowHeight/2-popupHeight/2,
“left”: windowWidth/2-popupWidth/2
});

//only need force for IE6
$(jId+” .backgroundPopup”).css({“height”: windowHeight});
},

showPopup: function(obj)
{
obj.bind(‘click’, function() {
methods.loadPopup(obj);
methods.centerPopup(obj);
return false;
});
}
};

return this.each(function() {
if(options) $.extend(settings, options);
methods.showPopup($(this));
methods.disablePopup($(this));
});
};
})(jQuery);

[/javascript]

Call in HEAD section in html:

[html]

//

*{margin:0; padding:0;}
body{font:11px/15px arial;}
#test{width:500px; background:#CCC}
.test-pad{padding:15px;}
h3, p{margin-bottom:10px;}
#popup-test{margin:150px auto 0; text-align:center}

[/html]