Designer Pro X: Navbar jumps to right on page change, then re-centers...why?

[jonstrong]

Making progress on our website - thanks for all the feedback to date. Some more content changes needed, placeholders replaced (and eventually I must deal with variants!)...and a technical question:

With the site published, when I click on the navbar to change pages, the new page is displayed properly, except the navbar sometimes appears flush right in the browser briefly and is then redrawn centered (where it belongs).

I don't always see this -- sometimes I have to navigate back and forth between pages, but it's definitely a visible artifact that detracts from the site.

The working copy of the site is here:
http://new.stronggroup.com/mpartnersltd/

I'm attaching the xar file as well in case anyone wants to take a peek inside.

thanks in advance for any observations / suggestions.

- Jon

[gwpriester]

Without looking at your file I am guessing that some pages require scrolling in which case the browser adds a scroll bar which causes the content to shift when moving from a page where all the content is contained in one screen.

[gwpriester]

On my screen, all pages have scroll bars and the nav bar stays static.

You have used regular style text on the mouse off and bold on the mouse over plus your default web animation is set to Fade > Normal. If you increase this to fast or very fast or instant, the transition will be smoother.

[jonstrong]

Thx Gary...

The jumping navbar is an odd phenomenon. It's not the lateral page movement that comes from having longer and shorter pages combined, where scroll bars only show up for the longer pages. All of these pages are long enough so that I'll always have scroll bars. What is was seeing was the page being in the right place, but the navbar itself starting out flush right and then immediately centering itself. What's bizarre is that this would only show up sometimes as I would select the transition from one page to another -- not consistently, which makes me think there's something going on with browser caching, and perhaps something in the way the navbar is being drawn, perhaps with CSS and/or js being applied to position it after initial load? What's really strange is that after your reply, I'm not seeing it...at least not right now.

This also seemed to be dependent on the browser I'm using. I've only seen this issue when using Chrome (my preferred browser). I just tried with Edge and IE, and don't see the jumping behavior at all. Not going to devote too much effort to this yet.

While I'm here:

I notice a white flash when the home page is first drawn when the site is loaded from the URL. Is this the white background getting drawn first, with the dark banner getting drawn on top of it? Should I be placing a copy of the dark banner background on the background layer?

thx,
Jon

[gwpriester]

I notice a white flash when the home page is first drawn when the site is loaded from the URL. Is this the white background getting drawn first, with the dark banner getting drawn on top of it? Should I be placing a copy of the dark banner background on the background layer?

I really don't know. Maybe someone will have an answer here. I was using Firefox by the way to view your site.

I would increase the speed for the default animation to make your buttons happen faster.

[jonstrong]

I really don't know. Maybe someone will have an answer here. I was using Firefox by the way to view your site.

I would increase the speed for the default animation to make your buttons happen faster.

I'll experiment with transition speed and button animation as well - thx. The white flash I'm seeing (at least in Chrome) doesn't seem to be related to the buttons. It's a large dark banner area at the top of each page. When the site first loads from the URL, my impression is that a white area displays first, immediately covered by the dark banner. Thereafter, transitioning from page to page is fine -- it only shows up the first time the site loaded from the URL.

In general: is it necessary or recommended to have a large background-type area like that live on the page background layer? I'm wondering if layers are rendered on top of each other, in sequence from bottom to top, and the white background appears first before being overlayed with the dark banner.

Jon

[roly]

Hi Jon, 4 things,

1- When I open up your site in Xara I get 3 or 4 messages of Java script errors and then there is a long wait before it opens up

2- I did get the white flash when opening in chrome, I did notice that behind the Management Partners title and the navbar you have 2 rectangles, one blue and one black, perhaps this is part of the problem, I believe the rectangle at the bottom of each page also has 2 rectangles.

3- Question, why is your site a supersite instead of a conventional one?

4- I notices your navbar has a black square behind the white text, on 2 occasions this black box covered the white line below the navbar.

Ciao for now

Roly

[jonstrong]

Hey Roly -

Bizarre re: the javascript errors -- that's one thing I have NOT seen! I have no custom javascript in this site. The only js that's in the site is being generated by DP itself, I imagine for the object animations, navbar, page transitions and the highcharts graph widget on one page (I am not using custom js for this at the moment). I see no messages at all about javascript... this is weird!

I'm trying to clean up the project now. I found that the template I had started with had applied a shadow to the banner font -- something I don't need, so I thought I'd simplify it -- edit inside the shadow group for the banner (the big "Management Partners" wording in white at the top of each page just below the navbar). Something didn't seem right, so I set it to stop repeating on all pages, and found that a copy had been left on each page -- some visible, some not. Really confusing - so I went page by page, removed all copies except for the home page (index.htm), then - with the shadow now removed, I set this text item to repeat on all pages again. The weird thing is that it looked great in preview, but when I published to the web host, Chrome on my machine could no longer display that web (Google) font properly -- it came up tiny -- but only when showing the version from the web host (GoDaddy). Somehow the copy of Chrome on my machine was no longer rendering this web font properly. Odder still: Chrome on my other laptop showed the web host copy of the site just fine. So - I uninstalled Chrome, reinstalled it...and now it's displaying fine again. (sheeeesh!)

So - one thing done - unnecessary shadow removed from banner text.

I set the site to be a conventional site rather than supersite. The transitions are a bit abrupt now -- I guess that I'll have to go to each page now if I want to change the transition speed -- not a big deal right now.

The extra dark panels you see were ones I added in because the navbar looked pretty bad when I scrolled up and down earlier. Maybe I have it in the wrong place -- don't know. But without the dark background rectangles, when I would scroll down the page, with the navbar fixed at the top and the page scrolling beneath it, as soon as the white area on the page passed under the scroll bar I'd see white showing up in gaps between the menu items. It seems that the navbar doesn't have it's own background that prevents this and makes it usable as a "stay at the top" floating item -- so, that's why I added the 40px high background rectangle behind it.

Anyway - the current state is up on the web host again: http://new.stroonggroup.com/mpartnersltd/

I'm attaching the latest xar file as well in case anyone wants to have a go at it.

Have to break for dinner (wife and daughter getting cranky about it!). Back later...

Jon

[roly]

Hi Jon, I saw that your title name had a glow shadow around it but assumed that that was how you wanted it. Your link to the web is not working, I believe you put one o too much in strong, it works fine without it. As for your navbar issue, could it be that it was not brought up to the front of the layer, if left behind the white will show when scrolling. I look forward to seeing how the finished product will look like.

Ciao

Roly

[roly]

Hi Jon, on many pages I noticed that the blue box Transforming Technology... is at the front of the layer, move it back a bit and bring your navbar and the rectangle behind it to the front of the layer on all pages. This will clear up some of the background showing when scrolling up.

Ciao

Roly