Solved

Need (ajax) script to change content of 2 divs on set intervals

Posted on 2013-06-16
19
306 Views
Last Modified: 2013-07-11
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
0
Comment
Question by:peps03
19 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39252096
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
 
LVL 20

Expert Comment

by:Mark Brady
ID: 39252106
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
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39252437
Do you mean something like this

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

Source code attached.
t273.html
refresh.php
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:peps03
ID: 39252802
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
 
LVL 54

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
ID: 39252847
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
 

Author Comment

by:peps03
ID: 39252930
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
 

Author Comment

by:peps03
ID: 39258674
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
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39258847
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
 

Author Comment

by:peps03
ID: 39258855
thanks! i'll try that!
0
 

Author Comment

by:peps03
ID: 39258863
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
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39259251
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
 

Author Comment

by:peps03
ID: 39259426
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
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39259731
you can hide the one and fade the other in.
0
 

Author Comment

by:peps03
ID: 39259958
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
 

Author Comment

by:peps03
ID: 39262016
because just simple adding another array doesn't also add the text to the rotator.
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39262260
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
 

Author Comment

by:peps03
ID: 39265323
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
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39265592
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
 

Author Closing Comment

by:peps03
ID: 39317735
Many Thanks!!
Very sorry for late reply....
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question