MiniHero Banner (0.4) and HTML5 code: conflicts

[Legaziofunk]

Hi there,

I am using "min hero banner v 0.4" and it worked great for me! So far, I may add...

Recently, I tried to set the switches in WB 2.12.1 so I could use a HTML 5 term <details> (and <summary> which belongs to it) https://www.w3schools.com/tags/att_details_open.asp

It basically makes a line of text to roll down more text when being clicked on, a bit like a roll-down menu.
This expanding text, of course, needs more space within the section the details-tag is used in.
When you click the tagged line, the line expands and the formerly hidden text shows up - supposedly pushing down everyhting below it, hence, expanding the section.

The site I work on (www.kloss.biz) uses sections of WYSIWIG editor and minihero alternatingly.

BUT: Only on mobile devices, the aforementioned expansion of the very section (!) you'd be clickin on the "details"-line happens.
On the laptop computer, expanding text ist shifiting over the MiniHero section - and can not be read anylonger since the Minihero holds dark images.

Of course, the solution can not be inserting lighter pics.
But I guess, solution lies within MiniHero.... or am I wrong?

I'd appreciate any hints oder advise.

Cheers!

[crnogorac081]

What is exact problem i dont understand ?

[Ruud]

I see the problem, but there will be no easy fix.

Minihero (when used wih parallax) is using absolute positioning to set te background in the correct place and make the text slide over it.
The method used will change positioning of the rest of the page without any resize triggering, so the parallax javascript will not know.

You should also ask yourself if you really want to use this details/sumary method. It is not supported by Internet Explorer or Edge.

Apart from that.
If you are resizing the content with MiniHero below the content you should not use the parallax effect. Without that effect it will work fine.

[hgs]

Hast du schon mal das Modul Accordion versucht?

Have you ever tried the Accordion module?

[Legaziofunk]

I see the problem, but there will be no easy fix.

Minihero (when used wih parallax) is using absolute positioning to set te background in the correct place and make the text slide over it.
The method used will change positioning of the rest of the page without any resize triggering, so the parallax javascript will not know.

Thanx. I believe to understand the principle your're talking about.
So, maybe a dumb question, but when Minihere is using absolute positioning, wouldn't relative positioning solve the issue and make Minihero more adaptable to being used in WB?

Furthermore:
Does this mean, any (!) expanding module or HTML tag would push the text over the Minihero paarallex section?
It does so with the below mentioned Accordion module... hence, this ain't no solution either.

Also, just for the matter of completion: If all sections are opened/expanded in the first place, contraction of these sections then pulls all the text up (e.g. a Minihero Header will then be pulled out of MH-section and into the WYSIWYG section - over a then produced grey area.

Check out the test page: http://kloss.biz/pages/home/unterseite.php

You should also ask yourself if you really want to use this details/sumary method. It is not supported by Internet Explorer or Edge.

Thanx again. I was/am aware of this. But I didn't care, since I was looking for a sleek design. Everone who is still using IE has bad luck... LOL

If you are resizing the content with MiniHero below the content you should not use the parallax effect. Without that effect it will work fine.

This one, I frankly do not understand. "Resizing content below the content" -  what do you mean?

[Legaziofunk]

Hast du schon mal das Modul Accordion versucht?

Have you ever tried the Accordion module?

Thanx a lot!

Well, it does not do the trick.

1. the issue is the same as with the HTML 5 tag: it's pushing Minihero's text down or pulls it up.
2. it looks, well, horrible. Okay, this might be adaptable within CSS.
3. it is quite terrible to use: there is no quick way to add or edit anything. A couple of etxra clicks to add a singel letter? No way!

Sorry, but in order to make this a useful module, it needs to be edited "in line" sort of... at least from where I am now.

Sure, a website should be determined on how to look and not be edited every hour or so... but that's anoter discussion.

I might think about using it another time though! So, thanx for referring me to it!

[Ruud]

...but when Minihere is using absolute positioning, wouldn't relative positioning solve the issue and make Minihero more adaptable to being used in WB?

The technique for parallax is to change the scrolling speed from the background image. This can only be done using absolute positioning of that background.

If you look at the page using your browser devtools you can see the parallax javascript is placing all parallax sections at the top of the page.
Using position calculation it is displayed at the correct location.
The script is responsive, so a windows resize event will recalculate the position.

If the <details> functionality was better implemented in the supported browsers it could generate an event after collapsing/expanding that could be used to recalculate the parallax positions. (i.e. by simply triggering a windows resize event).

[Legaziofunk]

...but when Minihere is using absolute positioning, wouldn't relative positioning solve the issue and make Minihero more adaptable to being used in WB?

The technique for parallax is to change the scrolling speed from the background image. This can only be done using absolute positioning of that background.

If you look at the page using your browser devtools you can see the parallax javascript is placing all parallax sections at the top of the page.
Using position calculation it is displayed at the correct location.
The script is responsive, so a windows resize event will recalculate the position.

Understood!

If the <details> functionality was better implemented in the supported browsers it could generate an event after collapsing/expanding that could be used to recalculate the parallax positions. (i.e. by simply triggering a windows resize event).

Ah! So, this is something which is not in my command, then?

Very interesting!!! Thanx again... well, for now, I "solved" my issue by unchecking parallex of the according Minihero sections. Not exactly what I wanted, since parallax was the MAIN goal to have on my page... Damn!

[Legaziofunk]

I may add another "issue" of positioning with Minihero v 0.4 here since it fits in from that perspective - although not related to HTML 5.

I also do have a picture on my page, which is left-aligned and on the other sides surrounded by text.
When you look at it on the browser of a larger screen (laptop etc.) it looks a bit like this:

Text above pic	ongoing Text above pic
actual picture	ongoing Text now right next to pic
ongoing Text below pic	ongoing Text now below pic
MiniHero

Like this:


Here, I "faked" the text underneath the pic with empty lines.

I noticed, when the text is not enough, to go way below the pic underneath (which I faked here with empty lines), the picture then pushes Minehero to the side.
Like this:


I find this sort of disturbing.

Even more so, since the editor of WB gives the impression, you are actually dealing with separate, not interfering sections of your page.

Anyways, how can this be settled?

[johnbroeckaert]

Maybe you could use bt-columns at 2 culums the same size instead of WYSIWYG. 

[Ruud]

This is typical behavour when using floating elements.
Clearing the floats after that content block will help.

The quick solution is to use the "section" class WB will use for every new section to clear any floating elements in previous sections.
Put somewhere in your stylesheet:

Code: [Select]

.section {
  clear: both;
}that will probably fix it.

[Legaziofunk]

This is typical behavour when using floating elements.
Clearing the floats after that content block will help.

The quick solution is to use the "section" class WB will use for every new section to clear any floating elements in previous sections.
Put somewhere in your stylesheet:

Code: [Select]

.section {
  clear: both;
}that will probably fix it.

Thanx heaps!

This did the trick!!

Awesome...!

Shouldn't this be a mandatory addition to any template CSS then?