Conflicting js or css in my site?

Kingsly · Sep 22, 2014

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 · Sep 23, 2014

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 · Oct 1, 2014

AreYouAMac said:
What browser are you using?

Safari 7, 8, Chrome, and FF.

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?

Search

Search

Conflicting js or css in my site?

Kingsly

macrumors 68040

AreYouAMac

macrumors regular

Kingsly

macrumors 68040

Our Staff