peps03
asked on
Need (ajax) script to change content of 2 divs on set intervals
Hi,
I have 2 divs of which i want the content to change every 10 seconds with a fade effect. They have to change simultaneously. And the data is stored in an database.
How can i do this?
Thanks
I have 2 divs of which i want the content to change every 10 seconds with a fade effect. They have to change simultaneously. And the data is stored in an database.
How can i do this?
Thanks
Can you supply more information please. What content is being stored in the database and where does that content come from? What is supposed to be in the 2 div elements?
This is very easy to do so if you can explain in a little more detail I'm sure we can help you out.
This is very easy to do so if you can explain in a little more detail I'm sure we can help you out.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks all for your replies!
@julianH, that is exactly what i mean.
One thing, could the initial content be removed to make the text in refresh.php start looping immediately?
@julianH, that is exactly what i mean.
One thing, could the initial content be removed to make the text in refresh.php start looping immediately?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
ASKER
You have to make the content areas positioned absolute so that they are stacked. That way they will fade into and out of each other
If you look at the sample code I posted - this is exactly what I have done there - the .cycle divs (which hold the content) are positioned absolutely relative to their parent container.
This should fix the problem you are having.
If you look at the sample code I posted - this is exactly what I have done there - the .cycle divs (which hold the content) are positioned absolutely relative to their parent container.
This should fix the problem you are having.
ASKER
thanks! i'll try that!
ASKER
but now the height of the container doesn't adjust properly to the height of the inner divs (cycle). The container needs a fixed height..
Ok to get around that you will need to load the content into your div - work out the height and then get the container to scale to that height - sort of like a lightbox does when loading an image.
So, either you have a fixed height and position absolute
OR
You live with the content moving around erratically
OR
You write a bit more JS to handle the scaling of the container.
Difficult to advise off screen shots though.
So, either you have a fixed height and position absolute
OR
You live with the content moving around erratically
OR
You write a bit more JS to handle the scaling of the container.
Difficult to advise off screen shots though.
ASKER
thanks for your reply.
is it an idea to set fadeToggle to 0 and make the div that holds the content fade-in somehow?
i tried this a bit, but then the content doesn't change anymore. but maybe there is another way?
is it an idea to set fadeToggle to 0 and make the div that holds the content fade-in somehow?
i tried this a bit, but then the content doesn't change anymore. but maybe there is another way?
you can hide the one and fade the other in.
ASKER
the way i tried it, made the rotator stop...
and one other question:
say i wanted to add a third array, what else do i need to change to make it work?
and one other question:
say i wanted to add a third array, what else do i need to change to make it work?
ASKER
because just simple adding another array doesn't also add the text to the rotator.
Adding a third one requires a different solution because you are now dealing with three states rather than two. the fadeToggle works easily with 2 because one is always visible and the other invisible - when you move to 3 you have a 2:1 bias so you can't use fadeToggle anymore. You will need to manage each of the div's individually with classes to indicate state.
ASKER
ok. that is beyond the scope of my initial question.
""you can hide the one and fade the other in.""
>> i'm still not managing to successfully fade the divs in (and out) without them jumping around. or the sequence stops looping.
setting the position to absolute will not work as the height then won't adjust to the content.
how can i fade 1 div in?
""you can hide the one and fade the other in.""
>> i'm still not managing to successfully fade the divs in (and out) without them jumping around. or the sequence stops looping.
setting the position to absolute will not work as the height then won't adjust to the content.
how can i fade 1 div in?
As I said in my earlier post if your content is going to have different heights then you are going to need to add a bit more JS code to compensate or live with the jumping.
A nice effect (as I said above) would be the auto-resize used in lightbox libraries.
You build your content div offscreen so you can calculate the height. You then get the height of the new div and use the JQuery animate to animate the target div to the new height before fading / replacing thte text. It gets a bit complicated if your container has to remained centered - if you can just grow it up and down then it is easier - but if you have to start compensating margins etc to maintain a centred div it needs a bit more work.
A nice effect (as I said above) would be the auto-resize used in lightbox libraries.
You build your content div offscreen so you can calculate the height. You then get the height of the new div and use the JQuery animate to animate the target div to the new height before fading / replacing thte text. It gets a bit complicated if your container has to remained centered - if you can just grow it up and down then it is easier - but if you have to start compensating margins etc to maintain a centred div it needs a bit more work.
ASKER
Many Thanks!!
Very sorry for late reply....
Very sorry for late reply....
Open in new window