Navbar Essentials Theme Scrolling Hitch

Navbar Essentials Theme Scrolling Hitch

by Eric Jansen -
Number of replies: 6

Hello Community,


i noticed that the navbar wich should normaly follow the top of the browser window is shaking fast up and down (while scrolling)) until it gets to the correct position. This hitch creates some overlapping of site parts wich look strange. Does anyone noticed this kind of bug and know how to fix the navbar - or could this be a user side (browser) error?


navbar hitch

The Screenshot displays the situation before the navbar jumps back into the correct position right under the banner.


Moodle Version: 3.3

Moodle Theme: Essentials 3.3.0.3 (Build: 2017040302)


Greetings,

Eric

Average of ratings: -
In reply to Eric Jansen

Re: Navbar Essentials Theme Scrolling Hitch

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Essentials or Essential?  If the latter, please update to 3.3.1.0 and see if the problem happens there.  Are there any errors in the Browser console?  What other contributed plugins do you have installed?  Is it on one particular page?  What are the values of all the properties (look at the JSON string export in the settings)?

Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Navbar Essentials Theme Scrolling Hitch

by Eric Jansen -

It is called "Essential". There are no errors in the browser console. I use no other non core plugins. Its on every page - but the hitch has only shown up on 2 of 4 tested systems. Both systems with the problem used firefox with resolutions higher than full hd.

Here is the JSON string export:

{
   "moodle_version": "2017051501.03",
   "theme_version": "2017040302",
   "alert1text": "",
   "alert1title": "",
   "alert1type": "error",
   "alert2text": "",
   "alert2title": "",
   "alert2type": "info",
   "alert3text": "",
   "alert3title": "",
   "alert3type": "info",
   "alternativethemecolor1": "#a430d1",
   "alternativethemecolor2": "#d15430",
   "alternativethemecolor3": "#5dd130",
   "alternativethemecolor4": "#006b94",
   "alternativethemedefaultbuttonbackgroundcolour1": "#30add1",
   "alternativethemedefaultbuttonbackgroundcolour2": "#30add1",
   "alternativethemedefaultbuttonbackgroundcolour3": "#30add1",
   "alternativethemedefaultbuttonbackgroundcolour4": "#30add1",
   "alternativethemedefaultbuttontextcolour1": "#ffffff",
   "alternativethemedefaultbuttontextcolour2": "#ffffff",
   "alternativethemedefaultbuttontextcolour3": "#ffffff",
   "alternativethemedefaultbuttontextcolour4": "#ffffff",
   "alternativethemedefaultbuttontexthovercolour1": "#ffffff",
   "alternativethemedefaultbuttontexthovercolour2": "#ffffff",
   "alternativethemedefaultbuttontexthovercolour3": "#ffffff",
   "alternativethemedefaultbuttontexthovercolour4": "#ffffff",
   "alternativethemedefbuttonbackgroundhvrcolour1": "#3ad4ff",
   "alternativethemedefbuttonbackgroundhvrcolour2": "#3ad4ff",
   "alternativethemedefbuttonbackgroundhvrcolour3": "#3ad4ff",
   "alternativethemedefbuttonbackgroundhvrcolour4": "#3ad4ff",
   "alternativethemefooterblockbackgroundcolour1": "#cccccc",
   "alternativethemefooterblockbackgroundcolour2": "#cccccc",
   "alternativethemefooterblockbackgroundcolour3": "#cccccc",
   "alternativethemefooterblockbackgroundcolour4": "#cccccc",
   "alternativethemefooterblockhovercolour1": "#555555",
   "alternativethemefooterblockhovercolour2": "#555555",
   "alternativethemefooterblockhovercolour3": "#555555",
   "alternativethemefooterblockhovercolour4": "#555555",
   "alternativethemefooterblocktextcolour1": "#000000",
   "alternativethemefooterblocktextcolour2": "#000000",
   "alternativethemefooterblocktextcolour3": "#000000",
   "alternativethemefooterblocktextcolour4": "#000000",
   "alternativethemefooterblockurlcolour1": "#000000",
   "alternativethemefooterblockurlcolour2": "#000000",
   "alternativethemefooterblockurlcolour3": "#000000",
   "alternativethemefooterblockurlcolour4": "#000000",
   "alternativethemefootercolor1": "#30add1",
   "alternativethemefootercolor2": "#30add1",
   "alternativethemefootercolor3": "#30add1",
   "alternativethemefootercolor4": "#30add1",
   "alternativethemefooterheadingcolor1": "#cccccc",
   "alternativethemefooterheadingcolor2": "#cccccc",
   "alternativethemefooterheadingcolor3": "#cccccc",
   "alternativethemefooterheadingcolor4": "#cccccc",
   "alternativethemefooterhovercolor1": "#bbbbbb",
   "alternativethemefooterhovercolor2": "#bbbbbb",
   "alternativethemefooterhovercolor3": "#bbbbbb",
   "alternativethemefooterhovercolor4": "#bbbbbb",
   "alternativethemefootersepcolor1": "#313131",
   "alternativethemefootersepcolor2": "#313131",
   "alternativethemefootersepcolor3": "#313131",
   "alternativethemefootersepcolor4": "#313131",
   "alternativethemefootertextcolor1": "#ffffff",
   "alternativethemefootertextcolor2": "#ffffff",
   "alternativethemefootertextcolor3": "#ffffff",
   "alternativethemefootertextcolor4": "#ffffff",
   "alternativethemefooterurlcolor1": "#cccccc",
   "alternativethemefooterurlcolor2": "#cccccc",
   "alternativethemefooterurlcolor3": "#cccccc",
   "alternativethemefooterurlcolor4": "#cccccc",
   "alternativethemehovercolor1": "#9929c4",
   "alternativethemehovercolor2": "#c44c29",
   "alternativethemehovercolor3": "#53c429",
   "alternativethemehovercolor4": "#4090af",
   "alternativethemeiconcolor1": "#a430d1",
   "alternativethemeiconcolor2": "#d15430",
   "alternativethemeiconcolor3": "#5dd130",
   "alternativethemeiconcolor4": "#006b94",
   "alternativethememycoursesorderenrolbackcolour1": "#a3ebff",
   "alternativethememycoursesorderenrolbackcolour2": "#a3ebff",
   "alternativethememycoursesorderenrolbackcolour3": "#a3ebff",
   "alternativethememycoursesorderenrolbackcolour4": "#a3ebff",
   "alternativethemename1": "Alternative colours 1",
   "alternativethemename2": "Alternative colours 2",
   "alternativethemename3": "Alternative colours 3",
   "alternativethemename4": "Alternative colours 4",
   "alternativethemenavcolor1": "#ffffff",
   "alternativethemenavcolor2": "#ffffff",
   "alternativethemenavcolor3": "#ffffff",
   "alternativethemenavcolor4": "#ffffff",
   "alternativethemeslidebuttoncolor1": "#a430d1",
   "alternativethemeslidebuttoncolor2": "#d15430",
   "alternativethemeslidebuttoncolor3": "#5dd130",
   "alternativethemeslidebuttoncolor4": "#006b94",
   "alternativethemeslidebuttonhovercolor1": "#9929c4",
   "alternativethemeslidebuttonhovercolor2": "#c44c29",
   "alternativethemeslidebuttonhovercolor3": "#53c429",
   "alternativethemeslidebuttonhovercolor4": "#4090af",
   "alternativethemeslidecaptionbackgroundcolor1": "#a430d1",
   "alternativethemeslidecaptionbackgroundcolor2": "#d15430",
   "alternativethemeslidecaptionbackgroundcolor3": "#5dd130",
   "alternativethemeslidecaptionbackgroundcolor4": "#006b94",
   "alternativethemeslidecaptiontextcolor1": "#ffffff",
   "alternativethemeslidecaptiontextcolor2": "#ffffff",
   "alternativethemeslidecaptiontextcolor3": "#ffffff",
   "alternativethemeslidecaptiontextcolor4": "#ffffff",
   "alternativethemestripebackgroundcolour1": "#c1009f",
   "alternativethemestripebackgroundcolour2": "#bc2800",
   "alternativethemestripebackgroundcolour3": "#b4b2fd",
   "alternativethemestripebackgroundcolour4": "#0336b4",
   "alternativethemestripetextcolour1": "#bdfdb7",
   "alternativethemestripetextcolour2": "#c3fdd0",
   "alternativethemestripetextcolour3": "#9f5bfb",
   "alternativethemestripetextcolour4": "#ff1ebd",
   "alternativethemestripeurlcolour1": "#bef500",
   "alternativethemestripeurlcolour2": "#30af67",
   "alternativethemestripeurlcolour3": "#ffe9a6",
   "alternativethemestripeurlcolour4": "#ffab00",
   "alternativethemetextcolor1": "#a430d1",
   "alternativethemetextcolor2": "#d15430",
   "alternativethemetextcolor3": "#5dd130",
   "alternativethemetextcolor4": "#006b94",
   "alternativethemeurlcolor1": "#a430d1",
   "alternativethemeurlcolor2": "#d15430",
   "alternativethemeurlcolor3": "#5dd130",
   "alternativethemeurlcolor4": "#006b94",
   "analytics": "piwik",
   "analyticscleanurl": "",
   "analyticsenabled": "",
   "analyticsimagetrack": "",
   "analyticssiteid": "1",
   "analyticssiteurl": "",
   "analyticstrackadmin": "",
   "analyticsuseuserid": "",
   "android": "",
   "breadcrumbstyle": "4",
   "categoryct12image": "",
   "categoryct15image": "",
   "categoryct17image": "",
   "categoryct18image": "",
   "categoryct19image": "",
   "categoryct1image": "",
   "categoryct20image": "",
   "categoryct23image": "",
   "categoryct24image": "",
   "categoryct25image": "",
   "categoryct27image": "",
   "categoryct28image": "",
   "categoryct2image": "",
   "categoryct30image": "",
   "categoryct32image": "",
   "categoryct34image": "",
   "categoryct36image": "",
   "categoryct37image": "",
   "categoryct4image": "",
   "categoryct5image": "",
   "categoryct6image": "",
   "categorycti12height": "200",
   "categorycti12textbackgroundcolour": "#ffffff",
   "categorycti12textbackgroundopactity": "0.8",
   "categorycti12textcolour": "#000000",
   "categorycti15height": "200",
   "categorycti15textbackgroundcolour": "#ffffff",
   "categorycti15textbackgroundopactity": "0.8",
   "categorycti15textcolour": "#000000",
   "categorycti17height": "200",
   "categorycti17textbackgroundcolour": "#ffffff",
   "categorycti17textbackgroundopactity": "0.8",
   "categorycti17textcolour": "#000000",
   "categorycti18height": "200",
   "categorycti18textbackgroundcolour": "#ffffff",
   "categorycti18textbackgroundopactity": "0.8",
   "categorycti18textcolour": "#000000",
   "categorycti19height": "200",
   "categorycti19textbackgroundcolour": "#ffffff",
   "categorycti19textbackgroundopactity": "0.8",
   "categorycti19textcolour": "#000000",
   "categorycti1height": "200",
   "categorycti1textbackgroundcolour": "#ffffff",
   "categorycti1textbackgroundopactity": "0.8",
   "categorycti1textcolour": "#000000",
   "categorycti20height": "200",
   "categorycti20textbackgroundcolour": "#ffffff",
   "categorycti20textbackgroundopactity": "0.8",
   "categorycti20textcolour": "#000000",
   "categorycti23height": "200",
   "categorycti23textbackgroundcolour": "#ffffff",
   "categorycti23textbackgroundopactity": "0.8",
   "categorycti23textcolour": "#000000",
   "categorycti24height": "200",
   "categorycti24textbackgroundcolour": "#ffffff",
   "categorycti24textbackgroundopactity": "0.8",
   "categorycti24textcolour": "#000000",
   "categorycti25height": "200",
   "categorycti25textbackgroundcolour": "#ffffff",
   "categorycti25textbackgroundopactity": "0.8",
   "categorycti25textcolour": "#000000",
   "categorycti27height": "200",
   "categorycti27textbackgroundcolour": "#ffffff",
   "categorycti27textbackgroundopactity": "0.8",
   "categorycti27textcolour": "#000000",
   "categorycti28height": "200",
   "categorycti28textbackgroundcolour": "#ffffff",
   "categorycti28textbackgroundopactity": "0.8",
   "categorycti28textcolour": "#000000",
   "categorycti2height": "200",
   "categorycti2textbackgroundcolour": "#ffffff",
   "categorycti2textbackgroundopactity": "0.8",
   "categorycti2textcolour": "#000000",
   "categorycti30height": "200",
   "categorycti30textbackgroundcolour": "#ffffff",
   "categorycti30textbackgroundopactity": "0.8",
   "categorycti30textcolour": "#000000",
   "categorycti32height": "200",
   "categorycti32textbackgroundcolour": "#ffffff",
   "categorycti32textbackgroundopactity": "0.8",
   "categorycti32textcolour": "#000000",
   "categorycti34height": "200",
   "categorycti34textbackgroundcolour": "#ffffff",
   "categorycti34textbackgroundopactity": "0.8",
   "categorycti34textcolour": "#000000",
   "categorycti36height": "200",
   "categorycti36textbackgroundcolour": "#ffffff",
   "categorycti36textbackgroundopactity": "0.8",
   "categorycti36textcolour": "#000000",
   "categorycti37height": "200",
   "categorycti37textbackgroundcolour": "#ffffff",
   "categorycti37textbackgroundopactity": "0.8",
   "categorycti37textcolour": "#000000",
   "categorycti4height": "200",
   "categorycti4textbackgroundcolour": "#ffffff",
   "categorycti4textbackgroundopactity": "0.8",
   "categorycti4textcolour": "#000000",
   "categorycti5height": "200",
   "categorycti5textbackgroundcolour": "#ffffff",
   "categorycti5textbackgroundopactity": "0.8",
   "categorycti5textcolour": "#000000",
   "categorycti6height": "200",
   "categorycti6textbackgroundcolour": "#ffffff",
   "categorycti6textbackgroundopactity": "0.8",
   "categorycti6textcolour": "#000000",
   "categoryctimageurl1": "",
   "categoryctimageurl12": "",
   "categoryctimageurl15": "",
   "categoryctimageurl17": "",
   "categoryctimageurl18": "",
   "categoryctimageurl19": "",
   "categoryctimageurl2": "",
   "categoryctimageurl20": "",
   "categoryctimageurl23": "",
   "categoryctimageurl24": "",
   "categoryctimageurl25": "",
   "categoryctimageurl27": "",
   "categoryctimageurl28": "",
   "categoryctimageurl30": "",
   "categoryctimageurl32": "",
   "categoryctimageurl34": "",
   "categoryctimageurl36": "",
   "categoryctimageurl37": "",
   "categoryctimageurl4": "",
   "categoryctimageurl5": "",
   "categoryctimageurl6": "",
   "categoryicon1": "",
   "categoryicon12": "",
   "categoryicon15": "",
   "categoryicon17": "",
   "categoryicon18": "",
   "categoryicon19": "",
   "categoryicon2": "",
   "categoryicon20": "",
   "categoryicon23": "",
   "categoryicon24": "",
   "categoryicon25": "",
   "categoryicon27": "",
   "categoryicon28": "",
   "categoryicon30": "",
   "categoryicon32": "",
   "categoryicon34": "",
   "categoryicon36": "",
   "categoryicon37": "",
   "categoryicon4": "",
   "categoryicon5": "",
   "categoryicon6": "",
   "categoryincoursebreadcrumbfeature": "1",
   "copyright": "Hochschule Düsseldorf - Fachbereich Medien",
   "coursecontentsearch": "1",
   "courselistteachericon": "graduation-cap",
   "ctioverrideheight": "200",
   "ctioverridetextbackgroundcolour": "#c51230",
   "ctioverridetextbackgroundopacity": "0.8",
   "ctioverridetextcolour": "#ffffff",
   "customcss": "h1 {\r\n font-size: 20px;\r\n}\r\n\r\nh2 {\r\n font-size: 18px;\r\n}\r\n\r\nh3 {\r\n font-size: 16px;\r\n}\r\n\r\nh4 {\r\n font-size: 14px;\r\n}",
   "customscrollbars": "1",
   "defaultcategoryicon": "folder-open",
   "displayeditingmenu": "0",
   "displayhiddenmycourses": "1",
   "displaymycourses": "1",
   "dropdownmenumaxheight": "384",
   "dropdownmenuscroll": "",
   "enable1alert": "",
   "enable2alert": "",
   "enable3alert": "",
   "enablealternativethemecolors1": "",
   "enablealternativethemecolors2": "",
   "enablealternativethemecolors3": "",
   "enablealternativethemecolors4": "",
   "enablecategorycti": "0",
   "enablecategoryctics": "0",
   "enablecategoryicon": "0",
   "enablecustomcategoryicon": "0",
   "facebook": "",
   "favicon": "/favicon-2.ico",
   "fitvids": "1",
   "flatnavigation": "1",
   "flickr": "",
   "floatingsubmitbuttons": "1",
   "fontcharacterset": "",
   "fontnamebody": "Helvetica",
   "fontnameheading": "Helvetica",
   "fontselect": "1",
   "footerblockbackgroundcolour": "#cccccc",
   "footerblockhovercolour": "#555555",
   "footerblocktextcolour": "#000000",
   "footerblockurlcolour": "#000000",
   "footercolor": "#345C83",
   "footerheadingcolor": "#cccccc",
   "footerhovercolor": "#bbbbbb",
   "footersepcolor": "#313131",
   "footertextcolor": "#ffffff",
   "footerurlcolor": "#cccccc",
   "footnote": "<p><span style=\"text-align: center;\"><a href=\"http://moodle.medien.hs-duesseldorf.de/customsites/datenschutz.html\">Datenschutz<\/a>&nbsp;-&nbsp;<a href=\"http://moodle.medien.hs-duesseldorf.de/customsites/impressum.html\">Impressum<\/a><\/span><\/p>",
   "fppagetopblocks": "3",
   "fppagetopblocksperrow": "3",
   "frontcontentarea": "",
   "frontpageblocks": "1",
   "frontpagehomeblocksperrow": "3",
   "frontpagemiddleblocks": "0",
   "googleplus": "",
   "haveheaderblock": "1",
   "headerbackground": "/grau1-3.gif",
   "headerbackgroundstyle": "tiled",
   "headerblocksperrow": "4",
   "headertextcolor": "#F5FEF6",
   "headertitle": "0",
   "helplink": "",
   "helplinktype": "0",
   "hidedefaulteditingbutton": "0",
   "hideonphone": "1",
   "hideontablet": "1",
   "instagram": "",
   "ios": "",
   "ipadicon": "",
   "ipadretinaicon": "",
   "iphoneicon": "",
   "iphoneretinaicon": "",
   "layout": "1",
   "linkedin": "",
   "loginbackground": "",
   "loginbackgroundopacity": "0.8",
   "loginbackgroundstyle": "cover",
   "logo": "/HSD-FB5-moodle-2.jpg",
   "logodesktopwidth": "100",
   "logoheight": "150px",
   "logomobilewidth": "10",
   "logowidth": "1200px",
   "marketing1": "",
   "marketing1buttontext": "",
   "marketing1buttonurl": "",
   "marketing1content": "",
   "marketing1icon": "star",
   "marketing1image": "",
   "marketing1target": "_blank",
   "marketing2": "",
   "marketing2buttontext": "",
   "marketing2buttonurl": "",
   "marketing2content": "",
   "marketing2icon": "star",
   "marketing2image": "",
   "marketing2target": "_blank",
   "marketing3": "",
   "marketing3buttontext": "",
   "marketing3buttonurl": "",
   "marketing3content": "",
   "marketing3icon": "star",
   "marketing3image": "",
   "marketing3target": "_blank",
   "marketingheight": "100",
   "marketingimageheight": "100",
   "mycoursescatsubmenu": "",
   "mycoursesmax": "0",
   "mycoursesorder": "1",
   "mycoursesorderenrolbackcolour": "#a3ebff",
   "mycoursesorderidorder": "1",
   "mycoursetitle": "course",
   "navbartitle": "2",
   "numberofslides": "4",
   "oldnavbar": "1",
   "pagebackground": "/grau1-2.gif",
   "pagebackgroundstyle": "fixed",
   "pagebottomblocksperrow": "4",
   "pagetopblocks": "1",
   "pagetopblocksperrow": "1",
   "pagewidth": "1200",
   "perfinfo": "min",
   "pinterest": "",
   "returntosectionfeature": "1",
   "returntosectiontextlimitfeature": "15",
   "siteicon": "laptop",
   "skype": "",
   "slide1": "",
   "slide1caption": "<p>Campus Derendorf - Regie Tonstudio<\/p>",
   "slide1image": "/613-Regie-Ton-Panorama-2.JPG",
   "slide1target": "_self",
   "slide1url": "",
   "slide2": "",
   "slide2caption": "<p>Campus Derendorf - Eingangsbereich Gebäude 4<\/p>",
   "slide2image": "/IMG_7652-2.JPG",
   "slide2target": "_self",
   "slide2url": "",
   "slide3": "",
   "slide3caption": "<p>Campus Derendorf - Gebäude 4<\/p>",
   "slide3image": "/IMG_8742-2.JPG",
   "slide3target": "_self",
   "slide3url": "",
   "slide4": "",
   "slide4caption": "<p>Campus Derendorf - Seminarraum FB Medien<br><\/p>",
   "slide4image": "/HSD-OG1-9-Hörsaal,ansteigend-151103_17h25_01-2.jpg",
   "slide4target": "_self",
   "slide4url": "",
   "slidebuttoncolor": "#143C63",
   "slidebuttonhovercolor": "#217a94",
   "slidecaptionbackgroundcolor": "#143C63",
   "slidecaptioncentred": "1",
   "slidecaptionoptions": "2",
   "slidecaptiontextcolor": "#ffffff",
   "slideinterval": "5000",
   "themecolor": "#143C63",
   "themedefaultbuttonbackgroundcolour": "#143C63",
   "themedefaultbuttonbackgroundhovercolour": "#FFFEFF",
   "themedefaultbuttontextcolour": "#ffffff",
   "themedefaultbuttontexthovercolour": "#B20300",
   "themehovercolor": "#143C63",
   "themeiconcolor": "#555555",
   "themenavcolor": "#ffffff",
   "themestripebackgroundcolour": "#ff9a34",
   "themestripetextcolour": "#ffffff",
   "themestripeurlcolour": "#25849f",
   "themetextcolor": "#000000",
   "themeurlcolor": "#B20300",
   "togglefrontcontent": "0",
   "togglemarketing": "0",
   "toggleslideshow": "0",
   "twitter": "",
   "userimageborderradius": "90",
   "usermenuuserimageborderradius": "4",
   "usesiteicon": "1",
   "vk": "",
   "website": "",
   "windows": "",
   "winphone": "",
   "youtube": ""
}


I will update the plugin as recommended to 3.3.1.0 and check if the bug is still there.


Thanks,

Eric


Average of ratings: -
In reply to Eric Jansen

Re: Navbar Essentials Theme Scrolling Hitch

by Eric Jansen -

I updated the Plugin and nothing changed. In the Chrome Browser I dont get any navbar hitch or console error. But in Firefox the error appears so I checked the console there too and got the java script error connected to "asynchronous scrolling". Looks like the script need to be fixed in order to work properly with firefox. As far as i understand uses the corresponding script a scroll event that wont work with firefoxs asynchronous scrolling. Does anybody has experience in this topic and kown how to improve/fix the code or can name the file path for the script part i need to edit?


Greetings,

Eric

Average of ratings: -
In reply to Eric Jansen

Re: Navbar Essentials Theme Scrolling Hitch

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Thanks Eric, ok, what version of FireFox on what OS's please?

Average of ratings: -
In reply to Gareth J Barnard

Re: Navbar Essentials Theme Scrolling Hitch

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Ok looking at https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects it recommends 'position:sticky' however that is not supported on IE https://caniuse.com/#search=fixed where as 'fixed' is and I could not get it to work with Firefox (inline browser changing).  So you could just avoid this by changing the 'oldnavbar' setting.

Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Navbar Essentials Theme Scrolling Hitch

by Eric Jansen -

Thanks for your advice - I switched to the old navbar wich works fine.

Average of ratings: -