If you have used Lightbox Gone Wild in Firefox, then chances are you have noticed that the cursor is sometimes broken in input fields such as input texts and text areas. I found a solution posted by Roger Riche that was very close to working but was missing a few pieces. We figured out the missing pieces and I thought id share the solution. I have posted Roger Riche’s post along with my modifications
Roger Riche’s post:
To everyone and anyone having issues with carrets (flashing cursors) disappearing for input boxes within your lightbox, I have found the problem and have a suggested fix.
The problem is related to when you have more than one element on the page that has a position of fixed and the input being contained in one of them.
The suggested fix requires a bit of hacking to the original lightbox.js:
function addLightboxMarkup() { bod = document.getElementsByTagName(?body?)[0]; lightboxFixed = document.createElement(?div?); lightboxFixed.id = ?lightboxFixed?; overlay = document.createElement(?div?); overlay.id = ?overlay?; lb = document.createElement(?div?); lb.id = ?lightbox?; lb.className = ?loading?; lb.innerHTML = ? + ?Loading Activity. Please wait?? + ?; bod.appendChild(lightboxFixed); lightboxFixed.appendChild(overlay); lightboxFixed.appendChild(lb); }
displayLightbox: function(display){ $(?lightboxFixed?).style.display = display; if(display != ?none?) this.loadInfo(); }
You will also need to update lightbox.css with the following:
Remove -> #overlay[id] { position: fixed; }
Add -> #lightboxFixed { position:fixed!important;position:absolute;width:100%;height:100%;top:0;left:0;display:none;}
Remove -> position: fixed!important from the lightbox declaration.
That should be it! Now you would have the carret issues. Also, the script will run a lil more efficiently because it now only needs to modify the display of one element. The lightbox and overlay are contained within the lightboxFixed div.
After figuring everything out, my functions are as follows:
-
displayLightbox: function(display) {
-
$(‘overlay’).style.display = display;
-
$(‘lightboxFixed’).style.display = display;
-
$(‘lightbox’).style.display = display;
-
if(display != ‘none’) this.loadInfo();
-
},
-
function addLightboxMarkup() { bod = document.getElementsByTagName(‘body’)[0];
-
lightboxFixed = document.createElement(‘div’);
-
lightboxFixed.id = ‘lightboxFixed’;
-
overlay = document.createElement(‘div’);
-
overlay.id = ‘overlay’;
-
lb = document.createElement(‘div’);
-
lb.id = ‘lightbox’;
-
lb.className = ‘loading’;
-
lb.innerHTML = ‘<div id="lbLoadMessage" align="center" style="margin-top:120px">’ +
-
‘<p>Loading</p>’ +
-
‘</div>’;
-
bod.appendChild(lightboxFixed);
-
lightboxFixed.appendChild(overlay);
-
lightboxFixed.appendChild(lb);
-
}
As for CSS changes:
-
/*
-
#lightbox[id]{
-
position:fixed;
-
}
-
*/
-
-
/*#overlay[id]{
-
position:fixed;
-
}*/
-
-
#lightboxFixed {
-
position:fixed!important;
-
position:absolute;
-
width:100%;
-
height:100%;
-
top:0;
-
left:0;
-
display:none;
-
}