Picture of Christina Herdt
Extension "BackgroundScroll" in the Adapt Authoring Tool
by Christina Herdt - Tuesday, 7 May 2019, 7:21 AM
 

Hello,

I just recently got the latest version of the Adapt Authoring Tool installed and now I'm working on my first course. I also uploaded successfully a few extensions and assigned them to my course - among them the Background Scroll extension. Unfortunately I can't figure out how to make it work. I can see the feature in my artilce/block settings but I can add only one picture (see image). And even that is in the preview not shown. Instead I see nothing and when I examine the specific part of the HTML code in the developer tools of the chrome browser I see a kind of a "hole" in the HTML code (see image).

Has anyone an idea what might be wrong?

Did I miss something when putting the extension into operation? Or is there anything special I should know about how the extension works?

Kind regards,

Christina



Picture of Barry Jenkin
Re: Extension "BackgroundScroll" in the Adapt Authoring Tool
by Barry Jenkin - Wednesday, 8 May 2019, 2:54 AM
 

Did you adjust your page settings? It needs to know at page-level whether you're wanting article or block backgrounds for the entire page.

The images are z-indexed at -1 so depending on your theme you may also need to change your article/block background-color to transparent in order for the images underneath to appear. 

When inspecting the html, the div containing all the backgroundScroll images (.bgscroll-images) is a child of the page div so you'd need to hop a level outside articles to find them.

Picture of John Niezen
Re: Extension "BackgroundScroll" in the Adapt Authoring Tool
by John Niezen - Wednesday, 8 May 2019, 8:34 AM
 

We faced the same issue using this plugin. When added, and used, it made additional whitespace, but no graphic.

We tried all sort of settings, without succes till now.

Picture of Christina Herdt
Re: Extension "BackgroundScroll" in the Adapt Authoring Tool
by Christina Herdt - Wednesday, 8 May 2019, 9:47 AM
 

Hi Barry,

thank you very much for those essential informations! I managed to get it to work.

I set the page settings for the backgroundScroll extension to "block" and created 3 blocks with different backgroundScroll images.

I also added a class in the respective block and article settings that sets the background-color of the article and blocks to transparent.This made my image visible in the preview and the body texts and components of the 3 blocks scroll perfectly above the image.

Unfortunately, there had been one other problem: The images would not fade when scrolling. By chance I found out that the reason for this seemed to be the article-reveal-extension I used on the same page, too. Since I deleted it, the backgroundScroll extension is working quite fine (if you ignore that the 1st background image is fading out a little bit too early - what can be compensated easily by adding the same background image to the 2nd block as well...)

 

Kind regards,

Christina

Picture of John Niezen
Re: Extension "BackgroundScroll" in the Adapt Authoring Tool
by John Niezen - Thursday, 9 May 2019, 11:51 AM
 

Hi Cristina, could you describe these classes, and where you managed to get the z-index changed. I have been breaking my head with inspecting the course the whole morning, but cannot get it to work in the AT, only direct in the inspector.

Picture of Christina Herdt
Re: Extension "BackgroundScroll" in the Adapt Authoring Tool
by Christina Herdt - Thursday, 9 May 2019, 1:35 PM
 

Hi John,

I actually did not change the z-index, but - as Barry recommended - set the background of the article and the blocks which contain the BackgroundScroll images to transparent - that made the backgroundScroll images which are lying beneath visible.
Therefore you need to go to your project settings and find the input field for the CSS/LESS code. Here I entered a new CSS class named "no-bg" which sets the background-color to transparent (see image - 1).
Next you have to add this class to your article and blocks that you have the backgroundScroll feature applied to. In order to do so, you go to the settings of the respective article/block, find the input field "Classes" and enter the name of your new class - in my case this has been "no-bg" (see image - 2).
You need to add this class to each block that is using the backgroundScroll feature.

Hope that helps ...


Kind regards,
Christina


Picture of John Niezen
Re: Extension "BackgroundScroll" in the Adapt Authoring Tool
by John Niezen - Thursday, 9 May 2019, 2:11 PM
 

thanks Cristina, learning on the fly. Got it running, but only if I add it to both the article and the 2 blocks. So al little more debugging to do.