I please need an explanation on how to express a loop in a manner that it collapses the bootstrap using a counter and a foreach loop but it looks like i am not getting the right response as i want it.
<?php
$views = ['First View','Second View','Third View'];
$messages = [
"FIRST MESSAGE Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad",
"SECOND MESSAGE Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad",
"THIRD MESSAGE Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad",
];
?>
<section>
<div class="row">
<div class="col-md-12"><div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<?php
foreach($views as $view): $count = 1;?>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading<?php echo $count; ?>">
<h4 class="panel-title">
<a class="<?php echo ($count == 1 ? '' : 'collapse'); ?>" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $count; ?>" aria-expanded="<?php echo ($count == 1 ? 'true' : 'false'); ?>" aria-controls="collapse<?php echo $count; ?>">
<?php echo strtoupper(" $view "); ?>
</a>
</h4>
</div>
<div id="collapse<?php echo $count; ?>" class="panel-collapse <?php echo ($count == 1 ? 'collapse in' : 'collapse'); ?>" role="tabpanel" aria-labelledby="heading<?php echo $count; ?>">
<div class="panel-body">
<?php foreach($messages as $message): ?>
<?php echo "$count, $message"; ?>
<?php endforeach; ?>
</div> <!-- end body -->
</div>
</div> <!-- end default -->
<?php $count++; endforeach; ?>
</div> <!-- end 12 -->
</div> <!-- end accordion -->
</div> <!-- END OF ROW
-->
</section>
in your loop you're setting $count = 1; which means that count will ALWAYS be 1.
I'm assuming you want that var to increment to count your loops. Put it outside the loop and add 1 to it inside the loop.
$count = 1;
foreach($whatever as $something):
// do stuff
$count++;
endforeach;
Related
Precursor: This is a bit of an in depth question. Apologies in advance.
I'm new to using PHP and since PHP is a product requirement, I need a little help.
Overview: I have a prototype template created and have imported my data as well as decoded it. You can view a print_r() version of that in the gist located here.
I have also created a multi-level foreach loop that allows me to get to the most bottom point of the dataset.
Aside: I know this is definitely not elegant, and I would appreciate suggestions of a more concise way to do this. I would assume a recursive solution, but not sure currently.
You can see this cringeworthy mess below:
function array_push_assoc(&$array, $key, $value){
$array[$key] = $value;
return $array;
}
$tab_names = array();
$products =array();
foreach ($connectors_session as $key => $val) {
foreach ($val as $k => $v) {
if ($k == 'name') {
array_push($tab_names, $v);
} elseif ($k == 'products') {
foreach ($v as $pk => $pv) {
array_push_assoc($products, $pk, $pv);
foreach ($pv as $kp => $vp) {
if($kp == 'series') {
foreach ($vp as $sk => $sv) {
foreach ($sv as $ks => $kv) {
if($ks == 'releases') {
foreach ($kv as $kr => $vr) {
foreach ($vr as $rk => $rv) {
if($rk == 'files') {
foreach ($rv as $fk => $fv) {
foreach ($fv as $kf => $vf) {
// echo $kf . ':'. $vf.'<br>';
}
}
}
}
}
}
}
}
}
}
}
} else {
// Do something else
}
}
}
Pseudo code: For each element, loop through, grab element by the key and populate the view area with said element. If the value of the element is an array, loop through the array, search for specific key, populate view, rinse repeat.
Problem: This all has to be done client side, without JavaScript.
I have created variables and am able to push certain values into those variables. This works for certain parts of the template, but I need to control the whole view (see image example below) at the Product level of the dataset.
The way the view works is that there is a container with a row and two columns. One column contains a set of nav links (each link is one of the products respective to the link name), and the second, on the right, contains form <select>s which should house the aforementioned products items. Similarly, the bottom green area resides in the initial container, but the contents should change based on the <select> inputs on the right.
Thought Process: I think if I traverse through the products section of the data, and populate my view based on that, I can meet requirements. With that being said, I have set a foreach loop to go through the products array I populated previously, which in my mind, should loop the whole view at the root container to cover all items inside.
When I enable the loop the whole view gets duplicated. I need to be able to loop through that part of the view and populate the items successfully, like I was able to do with the aforementioned variables I created. Any help would be greatly appreciated and again, I apologize in advance for this laundry list.
Please see the View template below:
<?php //foreach($products as $key => $value) { ?>
<div class="col-7 col-lg-8 ">
<div class="feature-description">
<div class="row">
<div class="col-3 bg-light">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<?php foreach($tab_names as $key => $value) { ?>
<?php if($key==0) { ?>
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
aria-controls="v-pills-home" aria-selected="true"><?=$value;?></a>
<?php }else{ ?>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab"
aria-controls="v-pills-profile" aria-selected="false"><?=$value;?></a>
<?php } ?>
<?php } ?>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<p>Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis
incididunt do esse magna
mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et</p>
<p>velit excepteur laborum mollit dolore eiusmod.
Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum
enim et cillum eu deserunt
excepteur ea incididunt minim occaecat.</p>
<div class="row">
<div class="col">
Link
</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 col-lg-4 ">
<!-- <form> -->
<div class="service-form">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<form>
<div class="form-group row">
<label for="select-item" class="col-sm-2 col-form-label">Client</label>
<div class="col-sm-10">
<select id="select-item" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="select-item" class="col-sm-2 col-form-label">Version</label>
<div class="col-sm-10">
<select id="select-item" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
</form>
</div>
</div>
</div><!-- service-form -->
</div>
<nav class="navbar navbar-expand-lg w-100 rounded p-4 text-white my-5" style="background: #acca42;">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto text-white">
<li class="nav-item pr-5">
<a class="nav-link text-white" href="#">Download Link</a>
</li>
</ul>
<a class="nav-link text-white" href="#">Download Size</a>
<button class="btn my-2 my-sm-0 border border-white text-white" type="submit" style="background: transparent;">Download</button>
</div>
</nav>
</div><!-- Content + Margins -->
<?php //} ?>
On my search results page I have 2 posts per row (col-md-6). The grid works fine and everything is aligned correctly, except when the excerpt or the post title is longer than the other excerpts or post titles. On my test site I have all of the titles and excerpts of my posts 1 line, and than I have 1 post that has a post title of one line and an excerpt of two lines. Since the excerpt is two lines it messes with the alignment of the rest of the posts. How could I fix this issue so that all posts no matter the length of the excerpt are aligned correctly?
When the excerpts and post titles are the same length everything is aligned
When the excerpt is longer it screws up the alignment
I'm attaching all my php files that go along with my search page. However, the main file is list-search-template.php (the last one)
search.php
<?php get_header(); ?>
<div class="content-holder clearfix">
<div class="container">
<div class="search-results-search">
<form role="search" method="get" class="search-form-search form-inline-search" action="">
<div class="input-group-search">
<input type="search" value="" name="s" class="input-sm-search search-field-search form-control-search" placeholder="<?php echo $s ?>">
</div>
</form>
</div>
<div class="row">
<div class="col-md-12" >
<div class="grid js-masonry ajax-container row">
<?php
get_template_part("loop/loop-search"); ?>
</div>
<?php get_template_part('post-template/post-nav'); ?>
</div>
</div>
</div>
<footer class="footer">
<?php get_template_part('wrapper/wrapper-footer'); ?>
</footer>
<?php get_footer(); ?>
loop-search.php
<?php /* Loop Name: Loop list-posts blog */ ?>
<?php
if (have_posts()) :
while (have_posts()) : the_post();
?>
<div id="post-<?php the_ID(); ?>" class="post-list_h ajax-post-wrapper block col-xs-12 col-sm-6 col-md-6" >
<?php
get_template_part('post-template/list-search-template');
?>
</div>
<?php
endwhile; wp_reset_postdata(); ?>
<?php else: ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
list-search-template.php
<?php
/**
* Grid post template
*/
?>
<?php
?>
<div class="post_content">
<div class="post_content grid-block <?php echo esc_attr(); ?>">
<?php if(has_post_thumbnail()) { ?>
<?php
if(has_post_format('video')){
$embed = get_post_meta(get_the_ID(), 'novablog_video_embed', true);
$vimeo = strpos($embed, "vimeo");
$youtube = strpos($embed, "youtu");
if($youtube !== false){
$video_id = str_replace( 'http://', '', $embed );
$video_id = str_replace( 'https://', '', $video_id );
$video_id = str_replace( 'www.youtube.com/watch?v=', '', $video_id );
$video_id = str_replace( 'youtube.com/watch?v=', '', $video_id );
$video_id = str_replace( 'youtu.be/', '', $video_id );
$video_id = str_replace( '&feature=channel', '', $video_id );
$link = '//www.youtube.com/embed/'.esc_attr($video_id);
}
if($vimeo !== false){
//Get ID from video url
$video_id = str_replace( 'http://vimeo.com/', '', $embed );
$video_id = str_replace( 'http://www.vimeo.com/', '', $video_id );
$video_id = str_replace( 'https://vimeo.com/', '', $video_id );
$link = '//player.vimeo.com/video/'.esc_attr($video_id);
}
}
?>
<?php if(has_post_format('video')){ ?>
<a class="popup-youtube" href="<?php echo esc_attr($link); ?>" title="<?php the_title_attribute(); ?>">
<?php if(has_post_format('video')){
echo '<div class="cover-video"></div>';
} ?>
<?php } ?>
<div class="two-front-container">
<a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></a>
</div>
<?php } ?>
</div>
<div>
<div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
<div class="front-page-post-title"><?php the_title(); ?></div>
<div class="post_content"><p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p><div class="clear"></div></div>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'includes/front-shop-the-post' ); ?>
<?php get_template_part( 'includes/share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</div>
</div>
The simplest way I've found to solve this is using a clearfix, but using Bootstrap's responsive utilities to only use the clearfix at the viewport sizes you want. You don't need to worry about opening and closing rows.
Here's a screenshot of a JSFiddle demonstration:
Note the JSFiddle uses http://lorempixel.com/ for images, and they can be slow to load sometimes - give it time.
To implement this in your code, simply add a $count in loop-search.php, and include the clearfix every 2nd post:
<?php /* Loop Name: Loop list-posts blog */
$count = 0;
if (have_posts()) :
while (have_posts()) : the_post();
$count++;
?>
<div id="post-<?php the_ID(); ?>" class="post-list_h ajax-post-wrapper block col-xs-12 col-sm-6 col-md-6" >
<?php get_template_part('post-template/list-search-template'); ?>
</div>
<?php if ($count%2 === 0) { ?>
<div class="clearfix hidden-xs hidden-sm"></div>
<?php }
<?php endwhile; wp_reset_postdata(); ?>
<?php else: ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
The clearfix is not applied for xs and sm viewports, so only becomes effective at md and larger - which is what you want.
Note - you have js-masonry classes in your code, if you're really using Masonry.js that will probably mess things up. Maybe you were experimenting with it instead of trying to get this horizontal alignment working? If you're not using it now make sure you've removed the JS links and remove the classes to avoid confusion.
Since you're keeping them all in the same row, there's no clearfix. Since you have widths of either 12 or 6 (full or half) you could close (and reopen) a new row every other post. In the cases where it's a small screen, the side by side height won't matter since each post will be on its own line anyway.
<?php /* Loop Name: Loop list-posts blog */ ?>
<?php
if (have_posts()) :
$postCount = 0; // Initialize counter
while (have_posts()) : the_post();
$postCount++; // Increment counter
?>
<div id="post-<?php the_ID(); ?>" class="post-list_h ajax-post-wrapper block col-xs-12 col-sm-6 col-md-6" >
<?php
get_template_part('post-template/list-search-template');
?>
</div>
<?php
// Print row if needed
if($postCount % 2 == 0):
?>
</div><div class="grid js-masonry ajax-container row">
<?php
endif;
endwhile; wp_reset_postdata(); ?>
<?php else: ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
<!-- end snippet -->
The following code will help you to properly add row after every 2 columns.
<?php /* Loop Name: Loop list-posts blog */ ?>
<?php
if (have_posts()) :
$counter = 0;
while (have_posts()) : the_post();
$post_count = $GLOBALS['wp_query']->post_count;
?>
<?php if($counter++%2==0){ ?>
<div class="row">
<?php } ?>
<div id="post-<?php the_ID(); ?>" class="post-list_h ajax-post-wrapper block col-xs-12 col-sm-6 col-md-6" >
<?php
get_template_part('post-template/list-search-template');
?>
</div>
<?php if($counter%2==0 || $counter == $post_count){ ?>
</div>
<?php } ?>
<?php
endwhile; wp_reset_postdata(); ?>
<?php else: ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
I think the issue with load more button will be because of lack of div closing tag.
There is a very easy solution. You need to follow 2 steps.
Remove <div class="grid js-masonry ajax-container row"> from "search.php".
Edit "loop-search.php" with the below code:
<?php /* Loop Name: Loop list-posts blog */ ?>
<?php
if (have_posts()) :
$cnt = 1;
$endRow = false;
while (have_posts()) : the_post();
?>
<?php
if($cnt%2 != 0){
$endRow = true;
?>
<div class="grid js-masonry ajax-container row">
<?php } ?>
<div id="post-<?php the_ID(); ?>" class="post-list_h ajax-post-wrapper block col-xs-12 col-sm-6 col-md-6" >
<?php get_template_part('post-template/list-search-template'); ?>
</div>
<?php
if($cnt%2 == 0){
$endRow = false;
?>
</div>
<?php } ?>
<?php
$cnt++;
endwhile; wp_reset_postdata(); ?>
<?php else: ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
The proper workaround for this issue is to use css property display:flex see fiddle
But in your case you are using bootstrap i think, what you can do is to get the highest height of the div and apply it to all div using jquery eg:
jQuery(document).ready(function($){
var $divs = $('.row > div');
var highest = [];
$.each($divs, function($index, $item) {
highest.push($($item).height()); // Push all divs height into array
})
function compareNumbers(a, b) {
return b - a;
}
//console.log();
highest = highest.sort(compareNumbers); // sort Array
$('.row > div').height(highest[0]) // Apply the highest height to all divs
});
See live demo here
Give excerpt a fixed height using css. Then if the text is available or not. It would take that height.
Perhaps you could force having 1 line titles and excerpts. Check the example below.
.caption h3, .caption p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="thumbnail">
<img src="http://i68.tinypic.com/161z3fc.jpg" alt="" width="" height="">
<div class="caption">
<h3 title="Card 1 is not like the rest cards. It's title is longer than the others.">Card 1 is not like the rest cards. It's title is longer than the others.</h3>
<p>Short excerpt</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="thumbnail">
<img src="http://i68.tinypic.com/161z3fc.jpg" alt="" width="" height="">
<div class="caption">
<h3 title="Card 2">Card 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis auteirure dolor in reprehenderit in voluptate velit esse</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="thumbnail">
<img src="http://i68.tinypic.com/161z3fc.jpg" alt="" width="" height="">
<div class="caption">
<h3 title="Card 3">Card 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="thumbnail">
<img src="http://i68.tinypic.com/161z3fc.jpg" alt="" width="" height="">
<div class="caption">
<h3 title="Card 4">Card 4</h3>
<p>Another short excerpt</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
EDIT
If you choose to force having one line only, card Titles and excerpts, then try adding also title attribute in card titles. For example.
<h3 title="Card 1 is not like the rest cards. It's title is longer than the others.">Card 1 is not like the rest cards. It's title is longer than the others.</h3>
i've this problem with WP_Query and the HTML output:
The Query:
<!-- Category posts -->
<!-- Entretencion -->
<article class="six column">
<?php
$caps = new WP_Query();
$caps->query('posts_per_page=4&category_name=entretencion');
while($caps->have_posts()) {
$caps->the_post();
$count++;
if($count == 1) {
?>
<!--First post -->
<h4 class="cat-title"><?php $category = get_the_category(); echo $category[0]->cat_name; ?></h4>
<div class="post-image">
<img src="<?php bloginfo( 'template_url' ); ?>/upload/imagepost1.jpg" alt="">
</div>
<div class="post-container">
<h2 class="post-title">Create a Flexible Folded Paper Effect Using CSS3 Features</h2>
<div class="post-content">
<p>Venenatis volutpat orci, ut sodales augue tempor nec. Integer tempus ullamcorper felis eget dipiscing. Maecenas orci justo, mollis at tempus ac, gravida non</p>
</div>
</div>
<div class="post-meta">
<span class="comments">24</span>
<span class="author">nextwpthemes</span>
<span class="date">13 Jan 2013</span>
</div>
<!-- End of first post -->
<?php } if($count >= 2) { //Contador ?>
<!-- Second and others posts -->
<div class="other-posts">
<ul class="no-bullet">
<!-- Repeat this list with post 2, 3, and 4 -->
<li id="<?php echo $post->ID; ?>">
<img src="<?php bloginfo( 'template_url' ); ?>/upload/thumb1.jpg" alt="">
<h3 class="post-title">Check Out the New Recommended Resources on Webdesigntuts+</h3>
<span class="date">13 Jan 2013</span>
</li>
</ul>
</div>
<?php } // Fin contador ?>
<?php } ?>
</article>
But the HTML output repeat 3 div with class other-post.
The problem (left) the original (right)
How to repeat only li tags?
<!-- Category posts -->
<!-- Entretencion -->
<article class="six column">
<?php
$count = '';
$perpage = 4;
$caps = new WP_Query();
$caps->query('posts_per_page='.$perpage.'&category_name=entretencion');
while($caps->have_posts()) {
$caps->the_post();
$count++;
if($count == 1) {
?>
<!--First post -->
<h4 class="cat-title"><?php $category = get_the_category(); echo $category[0]->cat_name; ?></h4>
<div class="post-image">
<img src="<?php bloginfo( 'template_url' ); ?>/upload/imagepost1.jpg" alt="">
</div>
<div class="post-container">
<h2 class="post-title">Create a Flexible Folded Paper Effect Using CSS3 Features</h2>
<div class="post-content">
<p>Venenatis volutpat orci, ut sodales augue tempor nec. Integer tempus ullamcorper felis eget dipiscing. Maecenas orci justo, mollis at tempus ac, gravida non</p>
</div>
</div>
<div class="post-meta">
<span class="comments">24</span>
<span class="author">nextwpthemes</span>
<span class="date">13 Jan 2013</span>
</div>
<!-- End of first post -->
<?php
}
//only on second post/loop
if($count == 2) {
?>
<!-- Second and others posts -->
<div class="other-posts">
<ul class="no-bullet">
<?php
}
if($count >= 2) { //Contador
?>
<!-- Repeat this list with post 2, 3, and 4 -->
<li id="<?php echo $post->ID; ?>">
<img src="<?php bloginfo( 'template_url' ); ?>/upload/thumb1.jpg" alt="">
<h3 class="post-title">Check Out the New Recommended Resources on Webdesigntuts+</h3>
<span class="date">13 Jan 2013</span>
</li>
<?php
}
//again, only on final loop
if($count == $perpage) {
?>
</ul>
</div>
<?php
}
}
?>
</article>
That will only output one li in the second loop, and by the end of $perpage (i keep those 4 perpage you ask to the original WP_Query).
It's ugly, but should works.
I'm having an issue with this page http://goo.gl/Vdu4Q0 having extra space on the x axis and have no clue why. I searched this forum for answers as well, but didn't find anything that applied, so I apologize if something is out there that I overlooked. I rechecked my HTML structure to see if there were any unclosed divs, but I'm not seeing anything. Does anyone have any ideas? Here's the Wordpress structure:
HEADER
<header class="full left header-bg">
<div class="container">
<div class="container-inside left">
<div class="sixteen columns">
<h1 class="logo abs">
<a href="<?php echo get_option('home'); ?>"/>
<img src="<?php echo get_stylesheet_directory_uri();?>/images/logo.png"/></a>
</a>
</h1>
<nav>
<?php st_navbar(); ?>
</nav>
</div>
</div>
</div><!--container-->
</header>
>
LOOP PAGE
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<?php if (!is_page_template('onecolumn-page.php')) { ?>
<?php if (is_front_page() && !get_post_meta($post->ID, 'hidetitle', true)) { ?>
<div class="full left secondary-bg">
<div class="container">
<div class="sixteen columns">
<div class="eight columns offset-by-four">
<div class="hp-text-bg">
<?php the_content(); ?>
</div>
</div>
</div>
</div>
</div>
<div class="full left home-posts-bg">
<div class="container">
<div class="sixteen columns">
<div class="five columns post-bg alpha">
<div class="post-bg-wrapper">
<h2>TATTOO OF THE WEEK</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="center img">
<img src="<?php echo get_stylesheet_directory_uri();?>/images/tow-img.png"/>
</div>
<p class="primary-link">Read More</p>
</div>
</div>
<div class="six columns post-bg">
<div class="post-bg-wrapper">
<h2>JEWELRY</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="center img">
<img src="<?php echo get_stylesheet_directory_uri();?>/images/jewelry.png"/>
</div>
<p class="primary-link">Read More</p>
</div>
</div>
<div class="five columns post-bg omega">
<div class="post-bg-wrapper">
<h2>AFTERCARE</h2>
<p class="p-description-blue"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="center img">
<img src="<?php echo get_stylesheet_directory_uri();?>/images/aftercare.png"/>
</div>
<p class="primary-link">Read More</p>
</div>
</div>
</div>
</div><!--container-->
</div>
<?php } elseif (!get_post_meta($post->ID, 'hidetitle', true)) { ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php } else {
echo '<br />';
} ?>
<?php } ?>
<div class="full left">
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'skeleton' ), 'after' => '</div>' ) ); ?>
<?php edit_post_link( __( 'Edit', 'skeleton' ), '<span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-content -->
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
FOOTER
<!-- start of footer -->
<footer>
<div class="full left pre-footer-bg">
<div class="container ">
<div class="sixteen columns">
<div class="five columns alpha">
<h5>CONNECT</h5>
<img src="<?php echo get_stylesheet_directory_uri();?>/images/icon-fb.png"/>
<img src="<?php echo get_stylesheet_directory_uri();?>/images/icon-mail.png"/>
</div>
<div class="six columns">
<h5>CALL</h5>
<p>303.830.7272<br />
303.832.8282</p>
</div>
<div class="five columns omega">
<h5>GET TO US</h5>
<p>1332 East Colfax Ave<br />
Denver, CO 80218 | Map
</p>
</div>
</div>
</div><!--container-->
</div>
<div class="full left bottom-footer-bg">
<div class="container">
<div class="sixteen columns">
<p class="bottom-footer-text">© <?php echo date('Y'); ?> Bound By Design Tattoo | Site by brentthelendesign</p>
</div>
</div>
</div>
</footer>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/javascripts/plugins.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/javascripts/nav.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/javascripts/script.js"></script>
<?php wp_footer();?>
</body>
in style.css please add this css you are using 100% width and also applying padding that y its happening
.bottom-footer-bg,.home-posts-bg,.secondary-bg{
width:100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
If you're able to use css3, you can use box-sizing on your footer. You have a width of 100% set and a padding on top of that. Try:
.full {
box-sizing: border-box;
}
I am using jQuery UI tabs to make a dynamic tabs using php and mysql.
My php code below get the data from the mysql database and display it out.
Normally the html code will look like:
<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="images/image1.jpg" alt="" />
<div class="info" >
<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image3.jpg" alt="" />
<div class="info" >
<h2><a href="#" >35 Amazing Logo Designs</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image4.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
</div>
</div>
</div>
And i am using php to dynamically echo out the html :
<div id="featured" >
<ul class="ui-tabs-nav">
<?php
$count = 0; // Initialize counter
$rows = array();
while($row = mysql_fetch_array( $query )) {
$rows[] = $row;
$count = ++$count;
echo "<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-" . $count . "'><a href='#fragment-" . $count . "'><img class='thumb' src='$row[imagelink]' alt='' /><span>$row[title]</span></a></li>\n";
}
?>
</ul>
<?php
$count2 = 0; // Initialize counter
$rows2 = array();
while($row2 = mysql_fetch_array( $query )) {
$rows2[] = $row2;
$count2 = ++$count2;
echo "<div id='fragment-" . $count2 . "' class='ui-tabs-panel' style=''>\n";
echo "<img src='$row[imagelink]' alt='' />\n";
echo "<div class='info' ><h2><a href='$row[link]'>$row[title]</a></h2><p>$row[description]</p></div>\n";
}
?>
</div>
However, it only generates the li(tabs) and not the fragments(the content).
What's my problem here?
Your problem is that your $query (MySQL result object) reaches the end of the result rows, and then your second loop will not start over from the beginning.
This should solve the problem: http://www.krio.me/loop-twice-through-a-php-mysql-result-set/
However, I would suggest something closer to creating your own temporary PHP variable to store all the data in and use that to loop over it the first and second time. Just a suggestion.
I do not know the performance of the data seek method described in the website linked above.
EDIT: You are already storing the data in the $rows variable. In your second loop, loop through the $rows variable instead of using the mysql_fetch_array function.
Code Added (did not test, but should give you a good idea):
<div id="featured" >
<ul class="ui-tabs-nav">
<?php
$count = 0; // Initialize counter
$rows = array();
while($row = mysql_fetch_array( $query )) {
$rows[] = $row;
$count = ++$count;
echo "<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-" . $count . "'><a href='#fragment-" . $count . "'><img class='thumb' src='$row[imagelink]' alt='' /><span>$row[title]</span></a></li>\n";
}
?>
</ul>
<?php
$count2 = 0; // Initialize counter
$rows2 = array();
foreach($rows as $row2) {
$count2 = ++$count2;
echo "<div id='fragment-" . $count2 . "' class='ui-tabs-panel' style=''>\n";
echo "<img src='$row[imagelink]' alt='' />\n";
echo "<div class='info' ><h2><a href='$row[link]'>$row[title]</a></h2><p>$row[description]</p></div>\n";
}
?>
</div>
just change your
while($row2 = mysql_fetch_array( $query )) {
to
foreach($rows as $row2) {
However, here is a better version of your code
First, get your data into array. Do it near the place where you run your query. Keep all SQL operations in one place. And do not mix them with HTML operations!
$count = 0; // Initialize counter
$rows = array();
while($row = mysql_fetch_array( $query )) {
$rows[++$count] = $row;
}
Then move to HTML operations:
<div id="featured" >
<ul class="ui-tabs-nav">
<?php foreach($rows as $count => $row): ?>
<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-<?=$count?>'>
<a href='#fragment-<?=$count?>'>
<img class='thumb' src='<?=$row['imagelink']?>' alt='' />
<span><?=$row['title']?></span>
</a>
</li>
<?php endforeach ?>
</ul>
<?php foreach($rows as $count => $row): ?>
<div id='fragment-<?=$count?>' class='ui-tabs-panel' style=''>
<img src='<?=$row[imagelink]?>' alt='' />
<div class='info' >
<h2><a href='<?=$row['link']?>'><?=$row['title']?></a></h2>
<p><?=$row['description']?></p>
</div>
</div>
<?php endforeach ?>
See how it become concise and at the same time keeps all HTML as is.