Solved

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

Posted on 2013-06-16
19
304 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 51

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
 

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 51

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 51

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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

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 51

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 51

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 51

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 51

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

708 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now