Inner-HTML or content-switching

**amandaNHT** · 02-05-2012, 08:22 PM

Ok, so I'm using PHP to get the variables I need from a MySQL database, so I need to know how I should set up the list...

For example, in PHP I would have something like this for each item, one item at a time:

PHP Code:


$thisThing['title']='This One';

$thisThing['date']=date('ymd'); // date-stamp

$thisThing['description']='This one is like this';

$thisThing['image']='thisone.jpg';

...etc

Ok, so I need to set up JavaScript stuff so that I can click on a div (I'm using the onClick thing) and it will switch out 3 different divs of content... so:

Display A, B, C
Click A: Display B, C, D
OR Click C: Display Z, A, B

The first and third boxes are links (to change the content of all three boxes) and the second (middle) box has the "real" links to the actual content pages. (So 1 and 3 are like navigation for the center-part, like a gallery photo-slider, sort of)

Anyway, I am really bad with JavaScript variables and inner-html, so I'm not sure how to set it up.

Let's say there are 5 different things in the database for a consecutive M-F week... I need it to display yesterday, today, and tomorrow and I need it to be able to access all 5 without refreshing the page...

So I need the Javascript to set up "one" piece that I can repeat with PHP for the amount of entries in the database...

So like "in a PHP loop" I can create one JavaScript variable (which I can use PHP to change the names for, like "itemTitle3" or "itemTitle4" or something) and the function for if that one is clicked as a "previous" or as a "next" link (so one variable for each line and 2 functions)

I hope that makes sense...

Any advice?

**xelawho** · 02-06-2012, 08:10 AM

I'm not entirely sure I understand your project, but here's my interpretation of it. Maybe you can modify to suit:

Code:

<html>
<head>
</head>
<body>
<input type="button" value="mon" onclick="show(0)">
<input type="button" value="tue" onclick="show(1)">
<input type="button" value="wed" onclick="show(2)">
<input type="button" value="thu" onclick="show(3)">
<input type="button" value="fri" onclick="show(4)">
<div id="res1"></div>
<div id="res2"></div>
<div id="res3"></div>
<script type="text/javascript">
days=["Monday","Tuesday","Wednesday","Thursday","Friday"]

function show (clicked){
document.getElementById("res1").innerHTML=clicked==0?days[days.length-1]:days[clicked-1]
document.getElementById("res2").innerHTML=days[clicked]
document.getElementById("res3").innerHTML=clicked==days.length-1?days[0]:days[clicked+1]
}
</script>
</body>
</html>

Thread: Inner-HTML or content-switching

Thread Tools

Display

Inner-HTML or content-switching

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions