Records verspreiden over meerdere kolommen
Ik ben bezig met een soort digitaal prikbord, waar medewerkers van onze omroep berichtjes kunnen plaatsen voor andere medewerkers. Nu heb ik de layout mooi voor elkaar gekregen met jquery-blokjes. Alleen wil ik alle 'berichtjes' opslaan in een database. En dan de laatste X berichten ophalen en op de homepagina plaatsen. Alleen zit ik met het volgende, de blokjes zijn verspreid over meerdere kollommen van jquery. Dus hoe krijg ik de record uit de db ook mooi daarover verspreid?
Alvast bedankt!
Groet, Jelle
Eventjes de code
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<div id="columns">
<ul id="column1" class="column">
<li class="widget color-green" id="intro">
<div class="widget-head">
<h3>Welkom, Jelle Seubring</h3>
</div>
<div class="widget-content">
<p>Op het B-FM Medewerkers Prikbord!<br><br>Deel hier je vragen over B-FM of dingen die je wilt melden. Plaats alsjeblieft wel alleen serieuze dingen.</p></div>
</li>
<li class="widget color-red">
<div class="widget-head">
<h3>Widget title</h3>
</div>
<div class="widget-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
</div>
</li>
</ul>
<ul id="column2" class="column">
<li class="widget color-blue">
<div class="widget-head">
<h3>Widget title</h3>
</div>
<div class="widget-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
</div>
</li>
<li class="widget color-yellow">
<div class="widget-head">
<h3>Widget title</h3>
</div>
<div class="widget-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
</div>
</li>
</ul>
<ul id="column3" class="column">
<li class="widget color-orange">
<div class="widget-head">
<h3>Widget title</h3>
</div>
<div class="widget-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
</div>
</li>
<li class="widget color-white">
<div class="widget-head">
<h3>Widget title</h3>
</div>
<div class="widget-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
</div>
</li>
</ul>
</div>
<ul id="column1" class="column">
<li class="widget color-green" id="intro">
<div class="widget-head">
<h3>Welkom, Jelle Seubring</h3>
</div>
<div class="widget-content">
<p>Op het B-FM Medewerkers Prikbord!<br><br>Deel hier je vragen over B-FM of dingen die je wilt melden. Plaats alsjeblieft wel alleen serieuze dingen.</p></div>
</li>
<li class="widget color-red">
<div class="widget-head">
<h3>Widget title</h3>
</div>
<div class="widget-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
</div>
</li>
</ul>
<ul id="column2" class="column">
<li class="widget color-blue">
<div class="widget-head">
<h3>Widget title</h3>
</div>
<div class="widget-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
</div>
</li>
<li class="widget color-yellow">
<div class="widget-head">
<h3>Widget title</h3>
</div>
<div class="widget-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
</div>
</li>
</ul>
<ul id="column3" class="column">
<li class="widget color-orange">
<div class="widget-head">
<h3>Widget title</h3>
</div>
<div class="widget-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
</div>
</li>
<li class="widget color-white">
<div class="widget-head">
<h3>Widget title</h3>
</div>
<div class="widget-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
</div>
</li>
</ul>
</div>
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<?php
$result = array(); // uit je database...
$column1 = array_slice($result, 0, 5);
$column2 = array_slice($result, 5, 5);
$column3 = array_slice($result, 10, 5);
?>
$result = array(); // uit je database...
$column1 = array_slice($result, 0, 5);
$column2 = array_slice($result, 5, 5);
$column3 = array_slice($result, 10, 5);
?>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<ul id="column2" class="column">
<li class="widget color-blue">
<div class="widget-head">
<h3><?php echo $column2['title']; ?></h3>
</div>
<div class="widget-content">
<p><?php echo $column2['bericht']; ?></p>
<p><?php echo $column2['auteur']; ?> - <?php echo $column['post-date']; ?></p>
</div>
</li>
</ul>
<li class="widget color-blue">
<div class="widget-head">
<h3><?php echo $column2['title']; ?></h3>
</div>
<div class="widget-content">
<p><?php echo $column2['bericht']; ?></p>
<p><?php echo $column2['auteur']; ?> - <?php echo $column['post-date']; ?></p>
</div>
</li>
</ul>
Gewijzigd op 27/08/2012 16:53:16 door Jelle Hi