Page 1 of 4

Is there a Javascript function to fade into various content?

Posted: Fri Apr 08, 2016 6:40 am
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....

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

Posted: Fri Apr 08, 2016 6:43 am
by Celauran
Something like this? http://jsfiddle.net/pdb4kb1a/2/

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

Posted: Fri Apr 08, 2016 6:48 am
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.

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

Posted: Fri Apr 08, 2016 6:56 am
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.

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

Posted: Fri Apr 08, 2016 7:00 am
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....

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

Posted: Fri Apr 08, 2016 8:17 am
by Celauran
OK, so then something like this? https://jsfiddle.net/on0f3xja/

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

Posted: Fri Apr 08, 2016 8:28 am
by simonmlewis
So nearly there.... problem is, the guys will be uploading various rows. I cannot dynamically call it child one, two, three...

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

Posted: Fri Apr 08, 2016 8:32 am
by Celauran
I don't see why you should need to

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

Posted: Fri Apr 08, 2016 8:35 am
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?

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

Posted: Fri Apr 08, 2016 9:08 am
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.

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

Posted: Fri Apr 08, 2016 9:10 am
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!

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

Posted: Fri Apr 08, 2016 9:19 am
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/

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

Posted: Fri Apr 08, 2016 9:30 am
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>

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

Posted: Fri Apr 08, 2016 10:02 am
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.

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

Posted: Fri Apr 08, 2016 10:20 am
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.