Is there a Javascript function to fade into various content?
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?
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....
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.
All the best from the United Kingdom.
-
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
Code: Select all
var imgArray = [
'http://placehold.it/300x200',
'http://placehold.it/200x100',
'http://placehold.it/400x300'],So it renders DIV content rather than URLs.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Is there a Javascript function to fade into various cont
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
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....
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.
All the best from the United Kingdom.
Re: Is there a Javascript function to fade into various cont
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
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.
All the best from the United Kingdom.
Re: Is there a Javascript function to fade into various cont
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
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>Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Is there a Javascript function to fade into various cont
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
They are... aren't they?
If all DIVS were the same name, would it still work?
They will each be styled identically!
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()They will each be styled identically!
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Is there a Javascript function to fade into various cont
I see no reason they wouldn't. Also, that's really easy to test. The beauty of fiddles.simonmlewis wrote:If all DIVS were the same name, would it still work?
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
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.
All the best from the United Kingdom.
Re: Is there a Javascript function to fade into various cont
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
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.
All the best from the United Kingdom.