Lightbox is a great invention. You are looking at a page with lots of information and there’s a picture. You want to see it up close, you click and presto, the picture overlays the screen and you can see all the details.

I used Lokesh Dhakar’s Lightbox2 on a website and it works great. However, I wanted to change a little styling detail. I don’t know anything about CSS/SASS but usually I can drill into the SASS files somebody else authored and make changes. This time around I couldn’t find where the style was defined.

I looked at Chrome’s Develop Tools, I stared at the SASS files and could not figure it out. One thing that was setting off was that the style I was looking to change was not under a certain class, or even associated with main.css (that SASS compiles to). It was under element.style.

element.style {
    display: block;
    top: 26.95px;
    left: 0px;
}

A quick google search lead me to WTF is element.style? at drupal.org. It was JavaScript setting that style!

I looked in my project folder and there was a minified version of the script, but not the full one. I did a quick search for top but nothing I found made sense. Visiting github page, I found the project dropped SASS support and I couldn’t just download and use the latest version. Thanks to github, it’s extremely easy to download previous versions, i.e. if the authors assigned any. Lightbox included quite a few.

I was able to open the version I was at and look at the source file. There was this line:

top = $window.scrollTop() + $window.height() / 10;

Same line in minified script looked like this:

o=f.scrollTop()+f.height()/20;

No wonder I missed it. On a side note, at some point I was about to give up and switch to doing something that seemed more productive, but a colleague told me how sometimes he makes drudgery fun by imagining it’s a video game and he’s on a quest. It helped and this little annoyance turned into a fun scavenger hunt.

Share →