Шахматно извеждане на резултати

[vinsbg]

Здравейте,

как мога да редувам резултатите ляво-дясно-ляво... В момента така както пробвам извежда всеки резултат по два пъти .. 1 път в ляво и 1 път в дясно. Ето кода, който се опитвам да направя

$answers = $pdo->prepare("SELECT * FROM ticket_answers WHERE ticket_id = ? ORDER BY ticket_id ASC");
$answers->bindParam(1, $_GET['ticket_id'], PDO::PARAM_INT);
$answers->execute();
$counter=0;
foreach($answers as $ticket_answers)
{               
$counter++;                   
echo '
               <li>
                  <div class="timeline-badge primary">
                     <em class="fa fa-users"></em>
                  </div>
                  <div class="timeline-date">
                     <time datetime="'.$ticket_answers['ticket_answer_date'].'"></time>
                  </div>
                  <div class="timeline-panel">
                     <div class="popover left">
                        <div class="arrow"></div>
                        <h3 class="popover-title">'.$ticket_answers['ticket_answer_author'].'</h3>
                        <div class="popover-content">
                           <p>'.$ticket_answers['ticket_answer_body'].' </p>
                        </div>
                     </div>
                  </div>
               </li>';
if($counter%1==0)
{
               echo '<li class="timeline-inverted">
                  <div class="timeline-badge primary">
                     <em class="fa fa-users"></em>
                  </div>
                  <div class="timeline-date">
                     <time datetime="'.$ticket_answers['ticket_answer_date'].'"></time>
                  </div>
                  <div class="timeline-panel">
                     <div class="popover right">
                        <div class="arrow"></div>
                        <h3 class="popover-title">'.$ticket_answers['ticket_answer_author'].'</h3>
                        <div class="popover-content">
                           <p>'.$ticket_answers['ticket_answer_body'].'  </p>
                        </div>
                     </div>
                  </div>
               </li>';
}

 

[Revelation]

Прави го чрез CSS. Извеждай си всички резултати, както трябва и използвай

[css]
nth-child(odd) и nth-child(even)
[/css]

И иначе не ти се получава най-вероятно, защото проверката трябва да е

$counter % 2 == 0

и да увеличаваш в края на цикъла.

 

[vinsbg]

И иначе не ти се получава най-вероятно, защото проверката трябва да е

$counter % 2 == 0

и да увеличаваш в края на цикъла.

Така втория резултат само се дублира.

А това с цсс-а как точно трябва да стане ?

 

[uphero]

И иначе не ти се получава най-вероятно, защото проверката трябва да е

$counter % 2 == 0

и да увеличаваш в края на цикъла.

Така втория резултат само се дублира.

А това с цсс-а как точно трябва да стане ?

Просто питай Г:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_nth-child_odd_even

 

[Revelation]

Гледаш в линка ,който е дал @uphero и го слагаш на класа timeline-inverted(който може да не се нарича така повече). И просто в цикъла си оставяш <li class="timeline-inverted"> и вече CSS-а си знае работата, кога какъв цвят да слага и къде да го позиционира(естествено, ти му казваш).

 

[vinsbg]

Погледнах в гугъл и още първия резултат излезе този линк. Така, както е там ми е ясно , но при мен не знам точно кое къде трябва да отиде в odd и even секциите.

Принципно това е таймлайна: https://jsfiddle.net/7bu9m3zz/

Та коя част от цсс-а трябва да отиде в odd и коя в even?

Тук е както трябва да бъде https://jsfiddle.net/ycedwhdk/

 

[SVTerziev]

http://codepen.io/anon/pen/BKyYoP

 

[vinsbg]

А сега де ... при мен не иска и не иска.. JS-то нали е достатъчно така:?

<script type="text/javascript">
$(document).ready(function() {
	$('ul.timeline > li:nth-child(even)').addClass('timeline-inverted');
});
</script>

 

[Revelation]

Не е нужно JavaScript

Сложи това най-отдолу в CSS-а

[css]
.timeline>li:nth-child(even).timeline > .timeline-panel { float: right; padding-left: 50px;}

.timeline>li:nth-child(even).timeline > .timeline-date{left:auto;right:50%;width:auto;margin-left:0;margin-right:50px}

.timeline>li:nth-child(even)>.timeline-panel .popover .arrow{right: 100%; top:25px;display:block; transform: scale(-1, 1); }
[/css]

https://jsfiddle.net/7bu9m3zz/2/