Is there a Javascript function to fade into various content?

JavaScript and client side scripting.

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Is there a Javascript function to fade into various content?

Post by simonmlewis »

We need a section on a homepage, that fades every x-seconds from one lot of content and image, to the next.

So PHP would render all the content in the top of the page, and then Javascript fades from one to the other.

Not sure what I am searching for online to find such a script....
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Is there a Javascript function to fade into various cont

Post by Celauran »

Something like this? http://jsfiddle.net/pdb4kb1a/2/
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

Code: Select all

var imgArray = [
    'http://placehold.it/300x200',
    'http://placehold.it/200x100',
    'http://placehold.it/400x300'],
Can I put HTML where you have put URLs ??
So it renders DIV content rather than URLs.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Is there a Javascript function to fade into various cont

Post by Celauran »

That's not my code, just something I found on Google to make sure we're on the same page about what it is you're looking for. I see no reason you couldn't do something similar with divs. This is clearly just changing the src value of a given image tag, but you could create a list from an element's children and loop through them in much the same fashion.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

We will have a floated image on the left, and text on the right.
The guys will upload the image and the text into the DB, and it just needs to fade thru each row....
This script you found looks to be looking for a URL content, rather than HTML within the code tho.

But yes, we are on the same lines....
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Is there a Javascript function to fade into various cont

Post by Celauran »

OK, so then something like this? https://jsfiddle.net/on0f3xja/
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

So nearly there.... problem is, the guys will be uploading various rows. I cannot dynamically call it child one, two, three...
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Is there a Javascript function to fade into various cont

Post by Celauran »

I don't see why you should need to
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

Code: Select all

<div id="wrap">
  <div class="child one">One</div>
  <div class="child two">Two</div>
  <div class="child three">Three</div>
  <div class="child four">Four</div>
</div>
How do I dynamically add these child "names" in then?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Is there a Javascript function to fade into various cont

Post by Celauran »

I'm not sure how you mean. The JS just grabs all children of the wrapper element. I just added some classes so I could style them to make the transitions more obvious. The classes are not used anywhere in the JS.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

They are... aren't they?

Code: Select all

var elements = $('#wrap').children();
var currentIndex = 0;

function fadeToggle() {
	var nextIndex = currentIndex + 1;
  if (nextIndex >= elements.length) { nextIndex = 0; }
  $(elements[currentIndex]).fadeOut(400);
  setTimeout(function() {
	  $(elements[nextIndex]).fadeIn();
  }, 400);
  currentIndex = nextIndex;
  setTimeout(fadeToggle, 3000);
}
fadeToggle();

>>> ... children()
If all DIVS were the same name, would it still work?

They will each be styled identically!
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Is there a Javascript function to fade into various cont

Post by Celauran »

simonmlewis wrote:If all DIVS were the same name, would it still work?
I see no reason they wouldn't. Also, that's really easy to test. The beauty of fiddles.
https://jsfiddle.net/on0f3xja/1/
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

So this code should work?

Code: Select all

<style>
.tomato {
  width: 300px;
  text-align: center;
  padding: 3em 0;
  display: none;
  background-color: red;
}

.tomato:first-of-type {
  display: block;
}
</style>
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.2.js"></script>
<script>
var elements = $('#wrap').children();
var currentIndex = 0;

function fadeToggle() {
	var nextIndex = currentIndex + 1;
  if (nextIndex >= elements.length) { nextIndex = 0; }
  $(elements[currentIndex]).fadeOut(400);
  setTimeout(function() {
	  $(elements[nextIndex]).fadeIn();
  }, 400);
  currentIndex = nextIndex;
  setTimeout(fadeToggle, 3000);
}
fadeToggle();
</script>

<style>
.tomato {
  width: 300px;
  text-align: center;
  padding: 3em 0;
  display: none;
  background-color: red;
}

.tomato:first-of-type {
  display: block;
}
</style>

<div id="wrap">
  <div class="tomato">One</div>
  <div class="tomato">Two</div>
  <div class="tomato">Three</div>
  <div class="tomato">Four</div>
</div>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Is there a Javascript function to fade into various cont

Post by Celauran »

Style is duplicated and you probably want that JS running only once the DOM is ready, but otherwise yes, it absolutely should work.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

It doesn't. Nothing is changing on screen. I ask because I implement the code with my database results, and it shows only the first row. It didn't fade or show the second one at all.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply