Hírek listázása while ciklussal, egy divbe csak 3 hír, majd új div nyitása

geforce9600gt · 2015. Ápr. 30. (Cs), 13.57

Sziasztok

Híreket listázok ki sql-ből, while ciklussal. Responsive design miatt a következő szerkezetre van szükségem:

<section class="main_items_section">
<div class="row main_item_row">
<div class="grid_main_item">
<a href="muanyag_ablak"><img src="images/catalog/3.jpg"></a>
<a href="muanyag_ablak"><h4>Hír címe</h4></a>
<p>Hír leírása.</p>
</div>
<div class="grid_main_item">
<a href="muanyag_ajto"><img src="images/catalog/3.jpg"></a>
<a href="muanyag_ajto"><h4>Hír címe</h4></a>
<p>Hír leírása.</p>
</div>
<div class="grid_main_item">
<a href="muanyag_toloajto"><img src="images/catalog/1.jpg"></a>
<a href="muanyag_toloajto"><h4>Hír címe</h4></a>
<p>Hír leírása.</p>
</div>
</div>
<div class="row main_item_row">
<div class="grid_main_item">
<a href="muanyag_ablak"><img src="images/catalog/3.jpg"></a>
<a href="muanyag_ablak"><h4>Hír címe</h4></a>
<p>Hír leírása.</p>
</div>
<div class="grid_main_item">
<a href="muanyag_ajto"><img src="images/catalog/2.jpg"></a>
<a href="muanyag_ajto"><h4>Hír címe</h4></a>
<p>Hír leírása.</p>
</div>
<div class="grid_main_item">
<a href="muanyag_toloajto"><img src="images/catalog/1.jpg"></a>
<a href="muanyag_toloajto"><h4>Hír címe</h4></a>
<p>Hír leírása.</p>
</div>
</div>
</section>

<section class="main_items_section">
    <div class="row main_item_row">
        <div class="grid_main_item">
            <a href="muanyag_ablak"><img src="images/catalog/3.jpg"></a>
            <a href="muanyag_ablak"><h4>Hír címe</h4></a>
            <p>Hír leírása.</p>
        </div>
        <div class="grid_main_item">
            <a href="muanyag_ajto"><img src="images/catalog/3.jpg"></a>
            <a href="muanyag_ajto"><h4>Hír címe</h4></a>
            <p>Hír leírása.</p>
        </div>
        <div class="grid_main_item">
            <a href="muanyag_toloajto"><img src="images/catalog/1.jpg"></a>
            <a href="muanyag_toloajto"><h4>Hír címe</h4></a>
            <p>Hír leírása.</p>
        </div>
    </div>
    <!-- Új .row div -->
    <div class="row main_item_row">
        <div class="grid_main_item">
            <a href="muanyag_ablak"><img src="images/catalog/3.jpg"></a>
            <a href="muanyag_ablak"><h4>Hír címe</h4></a>
            <p>Hír leírása.</p>
        </div>
        <div class="grid_main_item">
            <a href="muanyag_ajto"><img src="images/catalog/2.jpg"></a>
            <a href="muanyag_ajto"><h4>Hír címe</h4></a>
            <p>Hír leírása.</p>
        </div>
        <div class="grid_main_item">
            <a href="muanyag_toloajto"><img src="images/catalog/1.jpg"></a>
            <a href="muanyag_toloajto"><h4>Hír címe</h4></a>
            <p>Hír leírása.</p>
        </div>
    </div> 
</section>

Hogy kell összeállítanom a ciklust, hogy hármasával rakja ki a híreket egy .row divbe?

- .row div nyitása
- 3 hír kirakása
- .row div zárása

- .row div nyitása
- 3 hír kirakása
- .row div zárása

- .row div nyitása
- 3 hír kirakása
- .row div zárása

És így tovább, ahány sor van...

Köszi előre is a help-et!

■

HTML, CSS, JavaScript, Ajax

csirip

Underscore

Poetro · 2015. Ápr. 30. (Cs), 14.22

Mivel nem írtad, milyen függvénytárakat használsz, feltételeztem, hogy Underscore.js-t.
Ekkor a következő a megoldás, feltételezve, hogy a result tömb a href, image, title és description tulajdonságú objektumokat tartalmaz:

var template = '<div class="grid_main_item"><a href="<%- href %>"><img src="<%- image %>"></a><a href="<%- href %>"><h4><%- title %></h4></a><p><%- description %></p></div>';
var compiled = _.template(template);
var groups = _.groupBy(result, function (item, index) {
return Math.floor(index / 3);
});
document.body.innerHTML = _.map(groups, function (group) {
return '<div class="row main_item_row">\n' + group.map(compiled).join('\n') + '\n</div>\n';
}).join('\n');

var template = '<div class="grid_main_item"><a href="<%- href %>"><img src="<%- image %>"></a><a href="<%- href %>"><h4><%- title %></h4></a><p><%- description %></p></div>';
var compiled = _.template(template);
var groups = _.groupBy(result, function (item, index) {
    return Math.floor(index / 3);
});
document.body.innerHTML = _.map(groups, function (group) {
    return '<div class="row main_item_row">\n' + group.map(compiled).join('\n') + '\n</div>\n';
}).join('\n');

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Ezt biztos nekem akartad

geforce9600gt · 2015. Ápr. 30. (Cs), 14.49

Ezt biztos nekem akartad írni?? :) Semmi ilyen js cuccot nem használok.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

HTML, CSS, JavaScript, Ajax

Poetro · 2015. Ápr. 30. (Cs), 15.10

Akkor miért ebben a témában küldted be?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Responsive design miatt a

Hidvégi Gábor · 2015. Ápr. 30. (Cs), 15.35

Responsive design miatt a következő szerkezetre van szükségem

Ha már reszponzív, akkor nem pont hogy ömleszteni kéne a <div class="grid_main_item">-eket, és css-ből megmondani, hol legyen a sortörés?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

De attól még nem kerül új

geforce9600gt · 2015. Ápr. 30. (Cs), 15.41

De attól még nem kerül új .row divbe. És abba kellene, mert úgy jó már a megjelenés.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Kell-e, hogy az új .row-ba

Hidvégi Gábor · 2015. Ápr. 30. (Cs), 16.01

Kell-e, hogy az új .row-ba kerüljön? Most minden sorban legfeljebb három elem van, ami átlagos képernyőn biztos jól néz ki, de mi van a 16:9-es arányú monitorokkal, ahol akár öt is elférhetne egymás mellett?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Példa

Poetro · 2015. Ápr. 30. (Cs), 16.11

<section class="news">
<article>
<a href="/link/title-01">
<h1>Title 01</h1></a>
<p>Description 01</p>
</article>
<article>
<a href="/link/title-02">
<h1>Title 02</h1></a>
<p>Description 02</p>
</article>
<article>
<a href="/link/title-03">
<h1>Title 03</h1></a>
<p>Description 03</p>
</article>
<article>
<a href="/link/title-04">
<h1>Title 04</h1></a>
<p>Description 04</p>
</article>
<article>
<a href="/link/title-05">
<h1>Title 05</h1></a>
<p>Description 05</p>
</article>
</section>

  <section class="news">
    <article>
        <a href="/link/title-01">
            <h1>Title 01</h1></a>
        <p>Description 01</p>
    </article>
    <article>
        <a href="/link/title-02">
            <h1>Title 02</h1></a>
        <p>Description 02</p>
    </article>
    <article>
        <a href="/link/title-03">
            <h1>Title 03</h1></a>
        <p>Description 03</p>
    </article>
    <article>
        <a href="/link/title-04">
            <h1>Title 04</h1></a>
        <p>Description 04</p>
    </article>
    <article>
        <a href="/link/title-05">
            <h1>Title 05</h1></a>
        <p>Description 05</p>
    </article>
  </section>

.news article {
background-color: lightgrey;
border: 1px solid grey;
padding: 10px;
box-sizing: border-box;
}
@media (min-width:500px) {
.news article {
width: 50%;
float: left;
}
}
@media (min-width:720px) {
.news article {
width: 33%;
}
}
@media (min-width:1280px) {
.news article {
width: 25%;
}
}
@media (min-width:1920px) {
.news article {
width: 20%;
}
}

.news article {
  background-color: lightgrey;
  border: 1px solid grey;
  padding: 10px;
  box-sizing: border-box;
}
@media (min-width:500px) {
  .news article {
    width: 50%;
    float: left;
  }
}
@media (min-width:720px) {
  .news article {
    width: 33%;
  }
}
@media (min-width:1280px) {
  .news article {
    width: 25%;
  }
}
@media (min-width:1920px) {
  .news article {
    width: 20%;
  }
}

Demo

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Így oldottam

geforce9600gt · 2015. Ápr. 30. (Cs), 21.23

Így oldottam meg:

<?php
$sql = "SELECT hir_id, hir_cim, hir_seo, hir_rovid, hir_thumb, hir_status, hir_sorrend
FROM hir WHERE hir_status = 1 ORDER BY hir_sorrend ASC";
$get_news = mysqli_query($kapcs, $sql);
if(mysqli_num_rows($get_news) > 0 )
{
$i = 0;
echo '<div class="row main_item_row">';
while($n = mysqli_fetch_assoc($get_news))
{
if($i%3==0)
{
echo '</div>';
echo '<div class="row main_item_row">';
}
?>
<div class="grid-1-3">
<a href="http://<?php echo $_SERVER['HTTP_HOST']; ?>/hir/<?php echo intval($n['hir_id']); ?>/<?php echo htmlspecialchars($n['hir_seo']); ?>"
title="<?php echo htmlspecialchars($n['hir_cim']); ?>">
<img src="http://<?php echo $_SERVER['HTTP_HOST']; ?>/images/news/<?php echo htmlspecialchars($n['hir_thumb']); ?>"
alt="<?php echo htmlspecialchars($n['hir_cim']); ?>">
</a>
<a href="http://<?php echo $_SERVER['HTTP_HOST']; ?>/hir/<?php echo intval($n['hir_id']); ?>/<?php echo htmlspecialchars($n['hir_seo']); ?>"
title="<?php echo htmlspecialchars($n['hir_cim']); ?>"><h4><?php echo htmlspecialchars($n['hir_cim']); ?></h4></a>
<p><?php echo htmlspecialchars($n['hir_rovid']); ?></p>
</div>
<?php
$i++;
}
echo '</div>';
}
?>

<?php
			$sql = "SELECT hir_id, hir_cim, hir_seo, hir_rovid, hir_thumb, hir_status, hir_sorrend 
			FROM hir WHERE hir_status = 1 ORDER BY hir_sorrend ASC";
			$get_news = mysqli_query($kapcs, $sql);
			if(mysqli_num_rows($get_news) > 0 )
			{
				$i = 0;
				echo '<div class="row main_item_row">';
				while($n = mysqli_fetch_assoc($get_news))
				{
					if($i%3==0)
				    {
						echo '</div>';
						echo '<div class="row main_item_row">';
				    }
					?>
                    <div class="grid-1-3">
                        <a href="http://<?php echo $_SERVER['HTTP_HOST']; ?>/hir/<?php echo intval($n['hir_id']); ?>/<?php echo htmlspecialchars($n['hir_seo']); ?>" 
                        title="<?php echo htmlspecialchars($n['hir_cim']); ?>">
                       	  <img src="http://<?php echo $_SERVER['HTTP_HOST']; ?>/images/news/<?php echo htmlspecialchars($n['hir_thumb']); ?>" 
                          alt="<?php echo htmlspecialchars($n['hir_cim']); ?>">
                        </a>
                        <a href="http://<?php echo $_SERVER['HTTP_HOST']; ?>/hir/<?php echo intval($n['hir_id']); ?>/<?php echo htmlspecialchars($n['hir_seo']); ?>" 
                        title="<?php echo htmlspecialchars($n['hir_cim']); ?>"><h4><?php echo htmlspecialchars($n['hir_cim']); ?></h4></a>
                        <p><?php echo htmlspecialchars($n['hir_rovid']); ?></p>
                    </div>
                    <?php
					$i++;
				}
				echo '</div>';
			}
			?>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés