I have an array of elements. I need to display all the elements on the page, grouped by two in one 'div'
like this:
<div class='row'>
<article id='1'>item 1 row 1</article>
<article id='2'>item 2 row 1</article>
</div>
<div class='row'>
<article id='3'>item 1 row 2</article>
<article id='4'>item 2 row 2</article>
</div>
This my current php and html code:
<?php if ($arg['teasers']) foreach ($arg['teasers'] as $id => $article)
{ ?>
<div class="shops_<?php echo ($article['show'])?'fair':'draft'; ?> more">
<div class="shops_title">
<?php echo $article['title']; ?>
</div>
<div class="shops_teaser" onclick="window.location='<?php echo $arg['linkbase'].'/?id='.$id ?>'">
<?php echo $article['teaser']; ?>
</div>
<?php show_button_detail(array('uri'=>$arg['linkbase'].'/?id='.$id)); ?>
</div>
<?php
} ?>
Perfect example: http://tympanus.net/codrops/category/tutorials/
Maybe you could try something like this:
/* div.more */
div.row {
display: table-row;
width: 100%; /* your parent element should specify a width for this to work */
}
/* div.more > div[class^="shops_"] */
div.row > article {
display: table-cell;
width: 50%;
}
Related
i have some items i want displayed in the view, my per page is set to 15, so each page displays 15 items, but i want to display ads in the middle of the loop, after maybe 4 items displayed, I've tried to put an if statement in the foreach loop to control the display, it displays the first 3 values, but when i put the div for the ad, it loops too, can someone please tell me what to do, or point me in the right direction?? thanks, here is my code so far:
<?php
$counter1 = 0;
//the foreach loop that retrieves the values from the controller
foreach($records as $record){
//an if statement to display the first 4 items..
if ($counter1 <= 3){
?>
<div class='box-scene'>
<div class='dbox'>
<div class='front face'>
<img src="images/newtag.png">
</div>
<a style="font-size:15px;" href="<?php echo base_url();?>music/<?php echo $record->url; ?>">
<div class="side face">
<span>
<?php echo $record->name; ?>
</span>
</div>
</a>
</div>
</div>
<?php
$counter1++;
}
?>
<div style="width:200px; height:200px; float:left; display:inline-block; margin: 0 12.5px 20px 12.5px;">
<div id="ad_200_200">
</div>
</div>
<!-- this div displays more than once, i dont know where to place it
for it to display after the first 3 items -->
<?php
}
?>
i want to know where to place the div, and how to continue displaying the items...thanks
Hi please use else condition.please check replace with below code
<?php
$counter1 = 0;
//the foreach loop that retrieves the values from the controller
foreach ($records as $record) {
//an if statement to display the first 4 items..
?>
<?php if($counter1 % 4 == 0) { ?>
<div style="width:200px; height:200px; float:left; display:inline-block; margin: 0 12.5px 20px 12.5px;">
<div id="ad_200_200">
</div>
</div>
<?php } ?>
<div class='box-scene'>
<div class='dbox'>
<div class='front face'>
<img src="images/newtag.png">
</div>
<a style="font-size:15px;" href="<?php echo base_url(); ?>music/<?php echo $record->url; ?>">
<div class="side face">
<span>
<?php echo $record->name; ?>
</span>
</div>
</a>
</div>
</div>
<!-- this div displays more than once, i dont know where to place it
for it to display after the first 3 items -->
<?php
$counter1++;
}
?>
use also an else statement like below:
<?php
$counter1 = 0;
foreach($records as $record){
if ($counter1 <= 3){ ?>
<div class='box-scene'>
<div class='dbox'>
<div class='front face'>
<img src="images/newtag.png">
</div>
<a style="font-size:15px;" href="<?php echo base_url();?>music/<?php echo $record->url; ?>">
<div class="side face">
<span>
<?php echo $record->name; ?>
</span>
</div>
</a>
</div>
<div>
<?php
$counter1++;
} else{ ?>
<div style="width:200px;height:200px;float:left;display:inline-block; margin: 0 12.5px 20px 12.5px;">
<div id="ad_200_200"></div>
</div>
<?php
$counter1 = 0;
} ?>
<?php
}
?>
This question already has answers here:
Grid of responsive squares
(5 answers)
Closed 3 years ago.
I'm making a theme for my Omeka site in which I am calling an item and its various components using PHP. Each item is in its own div, and I have attempted to create a tile-like grid with Bootstrap. However, the divs only line up in a single vertical column. How do I make all divs line up in a row of three or four? I'm completely stumped. It works fine without the PHP (with multiple rows and manually added content) but won't work otherwise. This is what it looks like right now. And this is what I want the divs to look like:
Here is the html/php:
<?php foreach (loop('items') as $item): ?>
<div class="container">
<div class="item">
<div class="row">
<!-- attempt at square grid -->
<div class="col-md-3 col-sm-4 col-xs-6 item-item">
<div class="dummy"></div>
<div class="thumbnail purple">
Image: <?php $image = $item->Files; ?>
<?php if ($image) {
echo link_to_item('<div style="background-image: url(' . file_display_url($image[0], 'original') . ');" class="img"></div>');
} else {
echo link_to_item('<div style="background-image: url(' . img('defaultImage#2x.jpg') . ');" class="img"></div>');
}
?>
Title: <?php echo link_to_item(metadata('item', array('Dublin Core', 'Title')), array('class'=>'permalink')); ?><br>
Creator: <?php echo metadata('item', array('Dublin Core', 'Creator')); ?><br>
Subject: <?php echo metadata('item', array('Dublin Core', 'Subject')); ?><br>
Description: <?php echo metadata('item', array('Dublin Core', 'Description'), array('snippet'=>150)); ?><br>
<br>
</div>
</div>
</div>
</div><!-- end grid -->
And the CSS:
.dummy {
margin-top: 100%;
}
.thumbnail {
position: absolute;
top: 15px;
bottom: 0;
left: 15px;
right: 0;
text-align:center;
padding-top:calc(50% - 30px);
}
.item-item {
border: solid black 5px;
}
I'll give you a pseudo method of achieving this, harnessing array_chunk().
$chunks = array_chunk($array, 4);
foreach($chunks as $group): ?>
<div class="row">
<?php foreach($group as $element): ?>
<div class="col-md-3 col-sm-4 col-xs-6 item-item">
<?php // do your php stuff...?>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
Example
I am using codeingiter and have soms results that i am showing from a database. The results are shown using PHP as follows:
<?php
if(isset($foo)){
foreach($foo as $bar){ ?>
<ol><li>
<div class="results">
<p class="name"><?php echo $bar['name']; ?></p>
<p class="address"><?php echo $bar['address']; ?></p>
<p class="address"><?php echo $bar['postcode']; ?></p>
<span><?php number_format($bar['miles'],3) ?></span> miles
</div>
</li></ol>
<?php
}
}
?>
I've also tried adding the class 'results' to the ol li.results and no luck. Have added a border and the border wraps around each result so i know my tags are in the right place.
CSS:
ol li {
border:1px solid red;
list-style-type: decimal;
}
In the reset.css i had this:
loads...of...elements including ul, ol and li {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
I removed the ol, li from this and i got the numbers working but all have 1. for each result rather than 1, 2 3
These are shown as a list of addresses and i would like to have them numbered so the first one would have 1.RESULT 1, 2.RESULT 2 and so on... I've tried to use the ordered list tag and nothing seems to show up regarding numbers. i have checked in firebug and the tag is firing out for each one. Is this a css issue or the way PHP is showing the results?
Any help would be much appreciated.
You forgot the <li> tags inside the <ol> tag
<?php
if(isset($foo)){
echo '<ol>';
foreach($foo as $bar){ ?>
<li>
<div class="results">
<p class="name"><?php echo $bar['name']; ?></p>
<p class="address"><?php echo $bar['address']; ?></p>
<p class="address"><?php echo $bar['postcode']; ?></p>
<span><?php number_format($bar['miles'],3) ?></span> miles
</div>
</li>
<?php
}
echo '</ol>';
}
?>
Try the following
<?php if(isset($foo)): ?>
<ol>
<?php foreach($foo as $bar): ?>
<li class='results'>
<p class="name"><?php echo $bar['name']; ?></p>
<p class="address"><?php echo $bar['address']; ?></p>
<p class="address"><?php echo $bar['postcode']; ?></p>
<span><?php number_format($bar['miles'],3) ?></span> miles
<li>
<?php endforeach; ?>
</ol>
<?php endif; ?>
It's a CSS issue if the numbers are not showing. Common issue with reset stylesheets. Try adding:
list-style-type: decimal;
to your list style.
If I got it right, your <OL> and </OL> tags should stay outside the for cicle, while you should wrap your output between <LI> and </LI> inside the cicle.
Also, it's not a good practice to put DIVs inside LI elements, avoid it if you can by changing your styles.
I have this code that prints out up to 4 service providers. once clicked, the box expands and shows the rest if there are more. What i am trying to do is if there are more than 4 entries, to print a More link so users know to click for more. I also need the More button to disappear when click and reappear when reclicked.
Can anyone help me. This is driving me crazy
Thank you for your help ahead of time.
<?php
/**
* #file
*/
?>
<head>
<script>
var remove=function(){
$('#ID_OF_BUTTON').hide(500);
}
</script>
</head>
<div class="cloud-computing-item">
<div class="container">
<div class="item-header">
<h3> <?php print $company['name'] ?> </h3>
</div>
<div class="item-subheader">
<div class="label">Services Offered:</div>
<div class="data service-offerings">
<?php
foreach($company['services_display'] as $service => $element){
print $element;
}
?>
</div>
</div>
<div class="item-body">
<div class="overview">
<div class="label">Cloud Providers:</div>
<div class="data">
<?php
//limit shown entries upto 4
foreach(array_slice($company['service_providers'], 0, 4) as $provider): ?>
<div>
<?php print $provider; ?>
</div>
<?php endforeach; ?>
<div id="show"style="color:#000099;font-weight:bold; margin-bottom:-13px;"></div>
<!--<div id="show"style="color:#000099;font-weight:bold; margin-bottom:-13px;"><a onclick="remove(); return true;">More</a></div>
<div id="hide"style="color:#000099;font-weight:bold; margin-bottom:-12px; display: none;"><a onclick="add(); return true;">Hide</a></div> -->
</div>
</div>
<div class="details">
<?php
// if entries are greater then 4, show the rest
foreach(array_slice($company['service_providers'], 4) as $provider): ?>
<div>
<?php
print $provider;
?>
</div>
<?php endforeach; ?>
<?php print theme('cloud_computing_item_details', array('company' => $company)); ?>
</div>
</div>
<div style="clear: both; height: 5px;"> </div>
</div>
</div>
So, try this modification:
<div class="label">Cloud Providers:</div>
<div class="data">
<?php $i = 0; ?>
<?php foreach($company['service_providers'] as $provider): ?>
<div<?php echo ($i > 3) ? ' class="hide"' : ''; ?>><?php print $provider; ?></div>
<?php $i++; ?>
<?php endforeach; ?>
<?php if(count($company['service_providers']) > 4):?>
<div class="show-more" style="color:#000099;font-weight:bold; margin-bottom:-13px;">Show More</div>
<?php endif; ?>
</div>
Now let's assume You are using jQuery add this:
<script type="text/javascript">
$(document).ready(function(
$('.hide').hide(); // this will hide all the elements with the class 'hide'
$('.show-more').live('click', function(){
var parent = $(this).parent();
parent.find('.hide').show().removeClass('hide').addClass('show');
$(this).text('Show Less').removeClass('show-more').addClass('show-less');
});
$('.show-less').live('click', function(){
var parent = $(this).parent();
parent.find('.show').hide().removeClass('show').addClass('hide');
$(this).text('Show Less').removeClass('show-less').addClass('show-more');
});
){});
</script>
Use function on instead of live if You are using jQuery higher then 1.7.
Fiddle: http://jsfiddle.net/eznnC/ (though the hiding is not working but I believe it will in normal environment).
the first part to make only the 4 or more show a More link is below. the link doesn't disappear at the moment nor does it reappear.
<?php
//limit shown entries upto 4
foreach(array_slice($company['service_providers'], 0, 4) as $provider): ?>
<div>
<?php print $provider; ?>
</div>
<?php endforeach; ?>
<?php
// shows a More link for companies with more than for providers
foreach(array_slice($company['service_providers'], 4, 1) as $provider): ?>
<div>
<div id="more" style="color:#000099;font-weight:bold; margin-bottom:-13px;">
<?php print ('<a onclick="">More</a>'); ?>
</div>
</div>
<?php endforeach; ?>
This is what I am using:
<div class="banner">
<?php if(get_post_meta($post->ID, 'banner', true)) : ?>
<img src="<?php echo get_post_meta($post->ID, 'banner', true); ?>" />
<?php else : ?>
<?php the_title(); ?>
<?php endif; ?>
<div>`
and..
#banner {
clear:both;
width:980px;
overflow: hidden;
background: #F4F5F6;
padding:12px 0;
margin: 0 0 15px 0;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
border-radius: 15px; /* future proofing */
-khtml-border-radius:15px; /* for old Konqueror browsers */
}
#banner img {display: block; margin:0 auto;}
I don't want a title displayed so that if/else is not necessary.
If there is no img / the custom field is not being used, can the div just not show? Right now if the custom field is not being used it is still showing an empty div.
SOLVED IT!!! Sorry for even posting here. Though it's not pretty, it works.
<div id="bannerHolder">
<?php if(get_post_meta($post->ID, 'banner', true)) : ?>
<div id="banner">
<img src="<?php echo get_post_meta($post->ID, 'banner', true); ?>" />
</div><!--banner-->
<?php else : ?>
<?php endif; ?>
</div><!--bannerholder-->
Put the if clause around the div, not inside:
<?php
if ($banner = get_post_meta($post->ID, 'banner', true))
{
echo '<div class="banner">', $banner, '</div>';
}
?>
Put the if clause encapsulating the div element and remove the else part of the php sentence.
Example:
<?php if(get_post_meta($post->ID, 'banner', true)) : ?>
<div class="banner">
<img src="<?php echo get_post_meta($post->ID, 'banner', true); ?>" />
<div>
<?php endif; ?>