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
peps03Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Julian HansenConnect With a Mentor Commented:
Do you mean something like this

http://www.marcorpsa.com/ee/t273.html

Source code attached.
t273.html
refresh.php
0
 
Scott Fell, EE MVEDeveloperCommented:
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

0
 
Mark BradyPrincipal Data EngineerCommented:
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.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
peps03Author Commented:
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?
0
 
Julian HansenConnect With a Mentor Commented:
Yes - in addition to loosing the debug "console.log" statement do the following

<script type="text/javascript">
$(function() {
        refreshContent(); // Call refreshContent immediately
	setInterval('refreshContent()',10000);
});

function refreshContent()
{
	$.post('refresh.php',{}, function(resp) {
		$('div.cycle.contentleft:hidden').html(resp.left);
		$('div.cycle.contentright:hidden').html(resp.right);
		$('div.cycle').fadeToggle(500);
	},'json');
}
</script>

Open in new window

0
 
peps03Author Commented:
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?

toggle
0
 
peps03Author Commented:
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

togglefade
0
 
Julian HansenCommented:
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.
0
 
peps03Author Commented:
thanks! i'll try that!
0
 
peps03Author Commented:
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..
0
 
Julian HansenCommented:
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.
0
 
peps03Author Commented:
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?
0
 
Julian HansenCommented:
you can hide the one and fade the other in.
0
 
peps03Author Commented:
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?
0
 
peps03Author Commented:
because just simple adding another array doesn't also add the text to the rotator.
0
 
Julian HansenCommented:
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.
0
 
peps03Author Commented:
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?
0
 
Julian HansenCommented:
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.
0
 
peps03Author Commented:
Many Thanks!!
Very sorry for late reply....
0
All Courses

From novice to tech pro — start learning today.