Joomla! Issue Tracker | Joomla! CMS #5486

Closed
24 Dec 2014
Medium
Build: staging
# 5486
Diff
mbabker:subnavJump

Success

Success The Travis CI build passed Details

User tests: Successful: Unsuccessful:

mbabker
22 Dec 2014

In the Isis template, Bootstrap's scrollspy listener is used to affix the toolbar when the page scrolls down. Because of how the listener operates, the container is removed from the page layout which can cause a jump when scrolling and the affix action occurs.

This issue has been recently fixed in the joomla.org templates and now is being provided here for the Isis toolbar.

Testing Instructions

Pre-patch, note that when you scroll down a page, the toolbar jumps to the affix position a few pixels too early and that when the jump happens, the rest of the page content scrolls roughly 43 pixels (the height of the toolbar). Apply the patch and if necessary clear your cache to reload the updated media. With the patch applied, the scroll action should now be smooth and there is no page jump when the toolbar affixes itself to the top of the page.

37081ee 22 Dec 2014

Fix the jumping toolbar

mbabker - open - 22 Dec 2014

jissues-bot - change - 22 Dec 2014

Labels

Added: ?

brianteeman - change - 22 Dec 2014

Category

⇒

Templates (admin)

brianteeman - comment - 22 Dec 2014

Thanks

_{This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/5486.}

brianteeman - test_item - 22 Dec 2014 - Tested successfully

infograf768 - comment - 22 Dec 2014

Solves that specific issue here.
I get though, when enlarging/reducing the window a few times, some unwanted display:

mbabker - comment - 22 Dec 2014

@infograf768 It's a side effect of how the height is figured out. The height of the div.subhead-collapse container is set via JavaScript while the page is loaded, so adjusting the screen size like that will cause there to be some unwanted overlaps or extra margins (you can see this with the issue tracker's site too as you shorten the width down to a mobile viewport or when the page is loaded at the width of a mobile viewport then lengthened out to desktop size). The only way to properly account for that would be to have the JavaScript update the container height whenever the width is adjusted like that.

smz - comment - 23 Dec 2014

@mbabker why don't do it, then? isn't it just the case of introducing a jQuery(window).resize(function(){...});? The current behavior is quite ugly (sorry!!!)

mbabker - comment - 23 Dec 2014

Is it something we really should introduce into the template though? Admittedly, design isn't my thing (the original fix for the .org templates came about through some Stackoverflow answers and tweaking of behaviors), I wouldn't think resizing the window in that manner would be a "normal" behavior that a template should account for.

smz - comment - 23 Dec 2014

Well, honestly playing like a monkey resizing my browser window is not something I usually do unless I'm under severe stress (or I want to test if everything is OK with my template), but...

If you want I can take a look at that and see if I can come out with something... Any initial hint, in case?

smz - comment - 23 Dec 2014

I just gave a quick look and in theory it shouldn't be difficult to do: just re-apply that unnamed inline function at the and of index.php when the window is resized. Could take the occasion to move it to the head... Just give me a day or two to check...

smz - comment - 23 Dec 2014

Any idea what that "hack sad times" is there for?

mbabker - comment - 23 Dec 2014

IIRC Kyle developed the template while Bootstrap 2.0 was the latest release. So the 2.1 note may be a reference to a bug that was fixed?

dgt41 - comment - 23 Dec 2014

@test OK for the jumping part, but, as JM mentions, there are still some pending issues on the toolbar sizing...

smz - comment - 23 Dec 2014

@mbabker Michael, I sent you mbabker#17 that fixes the issues with the sidebar when resizing.

More things I did are:

modified the function declaration to conform with the "currently preferred" style
removed the obsolete fix around an old BS bug

One more thing I tried without success was to move the code to the <head> using addScriptDeclaration() but the beast doesn't want to be tamed! @dgt41 Dimitris do you have any ideas why? Do you want to give it a try?