Link to home
Start Free TrialLog in
Avatar of peps03
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
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Probably something like this where you have somepage.php containing the content that is supposed to be in the div.

<!DOCTYPE html>
<html>
<head>

<meta charset=utf-8 />
<title>my stuff/title>
</head>
<body>
  <div class="changediv"></div>
   <div class="changediv"></div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>
    $(function() {
    startRefresh();
});

function startRefresh() {
    setTimeout(startRefresh,1000);
    $.get('somepage.php', function(data) {
        $('.changediv').html(data);    
    });
}
  </script>
</body>
</html>

Open in new window

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.
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of peps03
peps03

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?
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of peps03

ASKER

great!
almost there. i have the 2 divs below eachother, and because of the fadeToggle the 2 divs show during the fade like shown in the image below.
can we prevent the 2 divs from showing simultaneously when fading while keeping a fade effect?

User generated image
Avatar of peps03

ASKER

Maybe this picture shows the fadeToggle better.
Div 1a and 1b are fading out, div 2a and 2b are fading in. While fading both div's are visible. i would like only the top div to be visible at all time.

the bottom div could be hidden for example and the top faded-in or something.

thanks

User generated image
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.
Avatar of peps03

ASKER

thanks! i'll try that!
Avatar of peps03

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.
Avatar of peps03

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?
you can hide the one and fade the other in.
Avatar of peps03

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?
Avatar of peps03

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.
Avatar of peps03

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?
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.
Avatar of peps03

ASKER

Many Thanks!!
Very sorry for late reply....