Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Kingsly

macrumors 68040
Original poster
Hey all. First of all, I'm very proud of how much I've been able to learn and accomplish since the last time I resorted to posting my question here - much of that is due to the guidance I got in such questions being answered. I'm entirely self taught, and have gotten somewhat decent at reverse engineering and, um, coaxing code to do what I want, as well as vaguely understanding tutorials that are clearly geared towards folks who develop for a living. I, on the other hand, am just a guy determined to build my own site.

http://wearecarlino.com
is looking pretty good. I know I need to consolidate and clean up a ton of useless code, a lot of which is borrowed form a host of jquery plugins I found along the way. Trust me, my previous attempt was an even bigger mess!

Everything was functioning pretty seamlessly until I added
Code:
$('#container').addClass('blurred');
to my lightbox plugin (venobox.js). That line was lifted from my navbar overlay.

The content blurs as expected (by clicking one of the portfolio links), but when the lightbox is closed theres a moment where the nav bar tries to weasel it's way back and causes the whole site to "jump".

I have my suspicions, but am completely ill equipped to debug this. Help?
 

AreYouAMac

macrumors regular
Jan 5, 2008
110
0
What browser are you using?

Are you talking about clicking on the logo and the overlay dropping down? If so, that issue is because of the scrollbar. The overlay displaying accounts for the width of the scrollbar and is adjusting the site to be "overflow: hidden" (basically shifting the site to account for the scrollbar width) hence - the shift of like 15 pixels to the right, and you cannot scroll down.

That part is done via javascript, since it's dynamically adding in the class "no_scroll" to your <body>

When you get out of the overlay, that "no_scroll" class is removed from the body, so it shifts back left 15px to account for the scrollbar.

Is that what you're talking about?
 

Kingsly

macrumors 68040
Original poster
What browser are you using?

Safari 7, 8, Chrome, and FF. :confused:

Are you talking about clicking on the logo and the overlay dropping down? If so, that issue is because of the scrollbar. The overlay displaying accounts for the width of the scrollbar and is adjusting the site to be "overflow: hidden" (basically shifting the site to account for the scrollbar width) hence - the shift of like 15 pixels to the right, and you cannot scroll down.

That part is done via javascript, since it's dynamically adding in the class "no_scroll" to your <body>

When you get out of the overlay, that "no_scroll" class is removed from the body, so it shifts back left 15px to account for the scrollbar.

Is that what you're talking about?

On my end when hitting the "contact" logo the drop down functions fine. The blurring of <body> and drop down <nav> seem to play nice, and everything goes back to normal when <nav> is put away.

It's down in the "work" section of the site that get's wonky. When hitting any of those video links again the <body> blurs as it should, and a lightbox pops up with the vimeo link playing. But when exiting the lightbox for a split second the menubar (logo with "contact" written in it) pops in and then goes away.

EDIT:
As I write the above description I'm seeing now that when the vimeo lightbox loads <body> shifts up by around 50px. Then when the lightbox is dismissed <body> shifts down the corresponding amount - which probably causes the weird flash. Where is that being executed?
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.