Topic Closed
cs
80 Posts

Hi,

may be someone can help me with this: 

since some hours I am trying to achive to have the first anchor section (OnePageToolkit) to show background-slides (SliderFactory) with a content that stays static on top of it (if possible: a content that fades in and stays static on top while slides change...).

I've tried 'Build a Fit-to-Fill Page Background Slideshow' tutorial, but that works for background-slides on the whole page (over all sections) only.

Any ideas on that would be appreciated.

Thanks

3 years ago#9709

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

Hi

First a teminological clarification: "position:static" is the CSS default property and is not the same as "position:fixed" (see MDN). We're going for "position:fixed". Just to avoid misunderstandings.

OnePageToolkit's Anchors: Those are meant to be scroll targets. A fixed element cannot be scrolled to, so you don't need an Anchor section (it won't hurt unless you use the "NavFromAnchors" Gadget, which would build a misleading menu item from it).

So, for a fixed Slider Factory Combo...

I assume that you want it at the top of your page, below the navbar.

  1. Add a style attribute to the Slider Factory's Wrapper with the following content:
    position:fixed; top:64px; right:0; left:0; z-index:100; margin:0;
    64px is the height of your navbar and might be different in different themes.
  2. To prevent following content to appear behind the slider, there are several ways.
    One would be to give the next section/wrapper after the slider factory wrapper a top margin:
    Add a style attribute to it containing margin-top:200px; where 200px is your slider height.
    Another way was to increase the padding of the body element by the slider's height using css in Layout Editor.
    In any case, your Slider Factory needs to have a defined height (not auto) to make it work this easy way.
  3. Consider that any fixed element will always occupy viewport space, which may be a problem on mobile devices/small screens. Let's say your navbar is 64px tall and your slider is 200px - on a 320x480px phone screen, you will only have 216px screen height left for content in portrait mode, in landscape mode, only 56px will remain, wich might even be consumed completely by the browser's address bar. So if mobile is an issue, you need to do it all in CSS and use media queries to make the slider A) disappear or B) scroll static (see above) on small screens. An appropriate media query in this case would be
    @media (min-height:640px) {
      .myFixedSliderFactoryWrapper {
       position:fixed; top:64px; right:0; left:0; z-index:100; margin:0;

        }
    }
    Since media queries cannot be inline styles, this has to be done in the theme styleheet or via Layout Editor.
    Your Slider Factory's wrapper section needs to get the "myFixedSliderFactoryWrapper" class applied via Section Options.
    another edit: If you build your site on top of a Bootswatch theme, there is a nice variable for the navbar height:
    Scss:   position:fixed; top:$navbar-height; right:0; left:0; z-index:100; margin:0;
    LESS:   position:fixed; top:@navbar-height; right:0; left:0; z-index:100; margin:0;

 

Edited: 3 years ago#9711

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects
... and another note:

Bootstrap comes with the so-called affix feature which can be used to make elements fixed only from a given page scroll value, see the examples @  W3Schools
Edited: 3 years ago#9712

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

Oh, after reading it again, seems I have completely misunderstood your question :)

a content that fades in and stays static on top while slides change

So you mean to have a fixed content within the slider and above all slides. Well, thats possible as well - solution will follow shortly...

 

 

3 years ago#9713

cs
80 Posts

So you mean to have a fixed content within the slider and above all slides.

yes, exactly, but only in the first 'anchor-section' (e.g. wellcome section). The following section have their own appearance (no sliders only background colors or images).

Thanks for your extensive  help...

Edited: 3 years ago#9714

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

Find your SliderFacorty addon folder (either /addons/SliderFactory or /data/_addoncode/[some_random_string])

1. Edit SliderFactory.php

change lines 25 to 27

from
    // $page->head_js[] =  $addonRelativeCode.'/dev/SliderFactory.dev.js';
    // $page->head_js[] =  $addonRelativeCode.'/dev/SliderFactory_init.js';
    $page->head_js[] =  $addonRelativeCode.'/SliderFactory.min.js';

to
    $page->head_js[] =  $addonRelativeCode.'/dev/SliderFactory.dev.js';
    $page->head_js[] =  $addonRelativeCode.'/dev/SliderFactory_init.dev.js';
    // $page->head_js[] =  $addonRelativeCode.'/SliderFactory.min.js';

(if you only replace the // make sure to add the .dev !)

2. Edit [SF addon folder]/dev/SliderFactory_init.dev.js line 89

from
    : ".GPAREA:not(.filetype-slider_factory)";
to
    : ".GPAREA:not(.filetype-slider_factory, .not-a-slide)";

 

Steps 1+2: a Better way! - Edit [SF addon folder]/defaults/SliderOptions.php line 5

from
  "slideSelector" => ".GPAREA:not(.filetype-slider_factory)",
to
  "slideSelector" => ".GPAREA:not(.filetype-slider_factory, .not-a-slide)",

 

3. Add your above-all-slides-content section…

… to the SliderFactory's wrapper and aplly the class "not-a-slide" to it using Section Options

 

4. Add something like this style attribute …

… to the same section:
    position:absolute; top:50%; left:50%; z-index:100;
    -webkit-transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);

The "not-a-slide" class will exclude the section from being a slide. The styles will render the section on top of the slides and centered within Slider Factory's wrapper section.

 

Hope it actually works (not tested)

 

Edited: 3 years ago#9715

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

... and for the fade-in effect:
 

This can either be done using jQuery or CSS animations.
I'd prefer jQuery here since we can better time it and only fade in after everything is in place.

Simply add the following somewhere to your theme's template.php:

<?php
$page->head_script .= '
  $(document).ready( function(){
    $(".not-a-slide").hide();
  });
  $(window).load( function(){
    $(".not-a-slide").fadeIn(1000);   
  });
';
?>

Of course you could also implement a general-purpose class such as "fadeInOnLoad" instead of using the "not-a-slide" class.
Although we could use a "display:none" style to initially hide the section dy default, I generally recommend to use the above domready=>hide + winload=>show approach for javascript-blocking visitors.

3 years ago#9716

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

... and another important note ;)

since the "slideSelector" value is stored within the slider factory controller section in your content, you will have to replace this section (only the controller) in your existing slider wrapper with a newly generated one after you made the the above mentioned changes in SliderOptions.php.

Sorry for the hassle but a little while's gone by since I coded the plugin so I have to learn myself again how it works :o)

 

...and: I just added the .not-a-slide selector to SliderOptions.php here, so your version can be safely updated to future versions (as long as you didn't make other changes to the code)

Edited: 3 years ago#9717

cs
80 Posts

thanks a lot Jürgen!

Finally I got it working, thanks to your fine tutorial above!

I had to change the "absolute" to a "relative" in the "above-all-slides-content section's" style attribute to prevent "menu to anchor" jump issues.(???)

And with a very dirty workaround (visibility: hidden in the first slides content), I could use the "auto" option in the slider-control height parameter.

So, again thanks for this!

Tomorrow I will try the fade-in proposal...

CS.

3 years ago#9718

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

"absolute" to a "relative" to prevent "menu to anchor" jump issues.
dirty workaround (visibility: hidden in the first slides content)

both sounds a bit unlogical to me but, hey, if it works … ;)

3 years ago#9719

cs
80 Posts

you suggested to use "absolute" in the style-values of the  ".not-a-slide" content section. But that lead to a non functional "slideDown" (jQ) and additionally when jumping to an anchor-section that is rather short (in height) it jumps back to the menu item before (no idea why, probably some selfmade issue...).

And the "dirty" workaround is just to add the same text as on ".not-a-slide" in a hidden (non visible) slide of the first background-slide in order to use the "auto" option in height control of the slider-controller (for respositivity).

Unfortunatly the test-site is not officially online, so I can not show it to you...

Thanks again.

Edited: 3 years ago#9720

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

it jumps back to the menu item before (no idea why, probably some selfmade issue...).

a known issue with OnePageToolkit. That's because page scrolling triggers sections to become "active" and their active state triggers the menu item's "active state" in return (kind of short-circuit). If there are multiple low-height sections visible (inScope), it's quite hard to determine which one is the "active one" in all situations. There is also a special hack included that allows the very last section to be the active one, even if the previous one is "inScope" and would qualify for "active".

OnePageToolkit has to deal with much more weird situations than we'd actually expect and it's still an early version with quite a lot of unsolved issues.

".not-a-slide" in a hidden (non visible) slide

Ah, yeah. If the "not-a-slide" section actually is the most space-consuming one, "auto" height won't work since it only takes slide sections into account by calculating the slider height.
In this particular case your approach to use a hidden clone as a slide is probably the best solution to make "auto height" work.
Hmm, maybe I should change the auto-height calculation to account for possible "not-a-slide" sections as well.... I definitely should. Good point.
 

 

 

Edited: 3 years ago#9723

cs
80 Posts

If there are multiple low-height sections visible (inScope)...

ok, my last 2 sections are low in height (at least on my prefered screen resolution and viewpoet size). With the above mentioned "position: absolute" that won't work at all, but with "relative" the second last will work fine. Only the very last section jumps back a little bit and marks the second last active (in the menu). Is that mentioned hack already included in last version of the tollkit?

change the auto-height calculation...

That would be great!

Thanks again for the OnePageToolKit, it's a great plugin

 

3 years ago#9724

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

With the above mentioned "position: absolute" that won't work at all

Just in case I wasn't clear: Did you apply the "not-a-slide" class or the noted inline styles to any sections outside a slider factory's wrapper? if so, that's not neccesary - the SF script shouldn't mess with sections not inside a wrapper containing a SF controller section. If it does, sth. weird is going on -  e.g. you might have an orphaned gpSlideWrapper class on non-slider wrappers remaining from earlier test or so.

3 years ago#9725

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

change the auto-height calculation...

That would be great!

add the green marked line to [SF addon folder]/dev/SliderFactory.dev.js
before line 242

        var max_h = 0;
        slides = slides.add(slideWrapper.find(".not-a-slide"));
        slides.each(function() {

and please tell me if it works (as always untested ;)

 

edit: in this case you need to activate the dev scripts as posted above, and if you already haven't...

Edit SliderFactory.php

change lines 25 to 27

from
    // $page->head_js[] =  $addonRelativeCode.'/dev/SliderFactory.dev.js';
    // $page->head_js[] =  $addonRelativeCode.'/dev/SliderFactory_init.js';
    $page->head_js[] =  $addonRelativeCode.'/SliderFactory.min.js';
to
    $page->head_js[] =  $addonRelativeCode.'/dev/SliderFactory.dev.js';
    $page->head_js[] =  $addonRelativeCode.'/dev/SliderFactory_init.dev.js';
    // $page->head_js[] =  $addonRelativeCode.'/SliderFactory.min.js';

(if you only replace the // make sure to add the .dev !)

Edited: 3 years ago#9726

cs
80 Posts

Hi Jürgen,

thanks again for taking care on these subjects.

Did you apply the "not-a-slide" class or the noted inline styles to any sections outside a slider factory's wrapper?

No, I re-checked the structure of the sections and wrappers. There is only one "not-a-slide"-class assigned to a wrapper. It's the last wrapper within the "gpSlideWrapper". No other gpSlideWrappers are present in this project (also checked with published source-code). There is, however, a surrounding section-wrapper (makeFullWidth text-center) that only includes the gpSlideWrapper.

But...

After I implemented the "auto heiht calculation" changes, everything works out right!!! No more "jump backs" and auto-height is perfect. The "gpSlide" (wrappers) are empty now and only include the styles for the background images. That works like a charme.

Next but...

still on "relative" on the "above-all-slides-content section (text)", when using "absolute" here, the whole section (content and the slides) is not displayed at all. But when inserting the style-line into the "above-all-slides-content (Wrapper-section)" (not text) ,"absolute" it is displayed, but the jump-backs are present again! ?!

So, with "relative" in text-section absolutly everything works (slide-down of the welcome-text, slides in the background of the first anchor-section and menu-jumps)-solved, I guess (if you think 'relative' is fine here)!

Thanks cs.

 

 

3 years ago#9729

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

I see, I see...

position:relative is indeed needed in your case because position:absolute makes the section (the sticky non-sliding one) to consume no space. I added "position:relative!important;" to the .gpSlide-measureHeight CSS class* which gets applied temporarily to all elements in the course of auto-height calculation (and removed afterwards). I yet have tot test if works.

Thanks a lot for your tenacity and endurance. Discussions like this one actually help a lot to improve a plugin and make it work in more use cases.
All the changes will of course be part of the next release, whereof I currently don't know when it will arrive. There are still some other things that need to be improved for a 1.1 version.

And... great to hear that it works now!
 

* FYI: that's in SliderFactory.css, line 85

 

 

3 years ago#9730

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

A (probably) last question:

But when inserting the style-line into the "above-all-slides-content (Wrapper-section)" (not text) ,"absolute" it is displayed, but the jump-backs are present again! ?!

What's the purpose of this wrapper? Does it have a container class to constrain the width of the inner text section?
If not, you might omit it. Just saying because inheriting heights within nested elements doesn't work the same in all browsers and already caused me some headache.

3 years ago#9731

cs
80 Posts

What's the purpose of this wrapper? Does it have a container class to constrain the width of the inner text section?

Yes, that what it is for and additionally I thought 

3. Add your above-all-slides-content section…

… to the SliderFactory's wrapper and aplly the class "not-a-slide" to it using Section Options

means, that it has to be inserted into a slide-wrapper-section (not text-section). But I just figured out that "not-a-slider" also works in that text-section. But maybe I am mixing up definitions like wrapper, sections and so on...

That's how the (well working) structure looks like:

Thanks cs

3 years ago#9732

juergen
1.4K Posts
51.7K Downloads
16 Plugins
design, web development & visual effects

But maybe I am mixing up definitions like wrapper, sections and so on...

No, you're not. Nested wrapper structures are just hard to describe.

Since jQuery's slideDown has it's very own independent timing, I'm amazed that it works. Slider Factory''s height calculation - which takes place somewhere between dom.ready and win.load - could easily measure a intermediate height during the slideDown animation. With position:relative, your not-a-slide wrapper container, which actually gets measured, grows with the inner slideDown Text section.

I'd love to see the result once it's online.

3 years ago#9733

Topic Closed

 

News

Typesetter 5.1
8/12/2017

Typesetter 5.0.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

Over 8 Times Faster Than Wordpress
5/3/2016

We've known for a long time that Typesetter is fast. It's something we take pride ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register