facebook slider dilemma

FuzMic · Post by **FuzMic** » Sat Sep 18, 2021 7:02 am

Guys

Joomla is marching us on, now with Jm 4.0.3. Now i am still panting to get appropriate extensions. My latest search is for a facebook slider to replace the perfect in everyway / everywhere. Any fast runner to recommend.

Post by **Per Yngve Berg** » Sat Sep 18, 2021 7:38 am

https://extensions.joomla.org/instant-s ... %5B0%5D=40

FuzMic · Post by **FuzMic** » Sun Sep 19, 2021 1:25 pm

ouch I use free extensions .. maybe no hope

FuzMic · Post by **FuzMic** » Mon Sep 20, 2021 6:47 am

Perfect in everyway has a slide out then close after a while .. any alternative you are familiar

sozzled · Post by **sozzled** » Mon Sep 20, 2021 7:35 am

Has a quick look at the "perfect in everyway / everywhere" website. No workable demo. Because I don't know what it does (or how it works) I don't know what replacement(s) may do what you are looking for. From the looks of the PIE/E website, the last version of the plugin (v2.0.12) was labelled as compatible with J! 3.6/3.8 (which, kinda, dates it, doesn't it?).

FuzMic · Post by **FuzMic** » Tue Sep 21, 2021 2:41 pm

I think I am actually looking for pop up to display a html message that close after a short span of tome

sozzled · Post by **sozzled** » Tue Sep 21, 2021 6:39 pm

Thanks for your reply. If I understand what you're asking, you'd like some content—text and/or images, maybe—to appear somewhere on a web page and, after a certain amount of time, that content would slide out off-screen. Is that what you'd like?

It's easy enough to do with J!'s custom HTML module and a bit of CSS.

The custom module would contain something like this

Code: Select all

<div id='#slidingContent' class='slider'>Here is where you write your content</div>

And the CSS would contain this

Code: Select all

#slidingContent.slider {
    position:  absolute;
    .
    .
    .
 }

... plus rules to define the height, width, font colour, background colour, and where on the page (top, bottom, left, right, etc.) and a transition filter to control how you want the <div> to slide in/out and such. This is just the technique; I haven't written given you specifics because it would depend on where you want the "slider" to be placed on the page. You would have to tell us more about that.

Then you assign the custom module those menu item(s) you want to use it with. This approach means that every time you view a menu item (or more than one, if you assign the module that way) the "slider" will be displayed. So, if you're happy with this module appearing on those menu items, that's how I would do it. You won't need to search for third-party "pop-ups"; you could simply design your own more or less "straight out of the box". Would that work for you?

FuzMic · Post by **FuzMic** » Wed Sep 22, 2021 3:26 am

Bro THANK YOU for the lead. I will also go W3Schooling to learn to do without extension .. you think my wishful thinking will succeed

sozzled · Post by **sozzled** » Thu Sep 23, 2021 5:52 am

As an experiment, I tried to do the whole "slide down" thing using CSS only and I gave up.

I was, however, able to create a slow fade-out with Javascript.

The solution is in three parts:

1) The HTML (create a Custom module and assign it to the footer position on the page(s) where you want it to appear)

Code: Select all

<div id="target"><body onLoad="fadeOutEffect();">Here is where you write your content</body></div>
<script type="text/javascript" src="/templates/protostar/js/fader.js"></script></div>

2) The CSS (add these lines to your custom CSS file; in my case it is user.css in the protostar template)

Code: Select all

#target {
  position: relative;
  margin: auto 10%;
  padding: 0 10px;
  height: 50px;
  width: 190%;
  background-color: rgba(0.5, 0.5, 0.5, 0.5);
  display: block;
  color: #fff;
  left: -54%;
  bottom: -70px;
  text-align:  center;
}

3) The JavaScript (this is the contents of the file ../templates/protostar/js/fader.js)

Code: Select all

function fadeOutEffect() {
    var fadeTarget = document.getElementById("target");
    var fadeEffect = setInterval(function () {
        if (!fadeTarget.style.opacity) {
            fadeTarget.style.opacity = 1;
        }
        if (fadeTarget.style.opacity > 0) {
            fadeTarget.style.opacity -= 0.00125;
        } else {
            clearInterval(fadeEffect);
        }
    }, 10);
}

I have a working example on a J! website but I'm not permitted by the forum rules to mention the URL because that would be self-promotion, sorry.

The Joomla! Forum™

facebook slider dilemma

facebook slider dilemma

Re: facebook slider dilemma

Re: facebook slider dilemma

Re: facebook slider dilemma

Re: facebook slider dilemma

Re: facebook slider dilemma

Re: facebook slider dilemma

Re: facebook slider dilemma

Re: facebook slider dilemma