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; ?>
Related
I am making a portfolio site with kirby cms.
my site is a single page website. I want to add an incrementing number after id by using foreach in the part shown in the code below..!
Is there easy way to do..?
regards,
<?php foreach ($pages->listed() as $p): ?>
<div class="slideshow">
<div class="slideshow-box">
<div class="slideshow-holder">
<?php foreach ($p->images() as $workimage): ?>
<div class="slide">
<?= $workimage ?><br><br>
</div>
<?php endforeach ?>
</div>
<div class="tooltip">
<p id="myText📍<here>"><?= $p->worktitle() ?></p>
</div>
<div class="toolbox" id="myDIV📍<here>">
<?= $p->description() ?>
</div>
</div>
<div class="actions">
<span>1/3</span>
</div>
←
→
</div>
<?php endforeach ?>
<script>
var button📍<here> = document.getElementById('myText📍<here>');
var div📍<here> = document.getElementById('myDIV📍<here>');
div📍<here>.style.display = 'none';
button📍<here>.onclick = function () {
if (div📍<here>.style.display !== 'none') {
div📍<here>.style.display = 'none';
} else {
div📍<here>.style.display = 'block';
}
};
</script>
I know I am late to the party, but here is my version.
You can actually just set a $counter Variable before the foreach() and just count it up right before the end of the foreach.
Furthermore I would you data-attributes and query them instead of an id.
Here's my Code. I tested it and it worked fine. If there are any questions let me now.
<?php $counter = 1;
foreach ($pages->listed() as $p): ?>
<div class="slideshow">
<div class="slideshow-box">
<div class="slideshow-holder">
<?php foreach ($p->images() as $workimage): ?>
<div class="slide">
<?= $workimage ?><br><br>
</div>
<?php endforeach ?>
</div>
<div class="tooltip">
<p data-tooltip="<?= $counter ?>"><?= $p ?></p>
</div>
<div class="toolbox" data-toolbox="<?= $counter ?>" style="display: none;">
<?= $p ?>
</div>
</div>
</div>
<?php $counter++; endforeach ?>
<script>
const TOOLTIPS = document.querySelectorAll('[data-tooltip]');
TOOLTIPS.forEach(TOOLTIP => {
TOOLTIP.addEventListener('click', () => {
const TOOLBOX = document.querySelector(`[data-toolbox="${TOOLTIP.dataset.tooltip}"]`);
if (TOOLBOX) {
if (TOOLBOX.style.display !== 'none') {
TOOLBOX.style.display = 'none';
} else {
TOOLBOX.style.display = 'block';
}
}
});
});
</script>
I have setup a small webstore and I want to show this <div class ="data-plan"></div> only for one single product. My database table from where I want to match this id is called sb_files and it has these fields id table_id path type slide_link, so I am trying to get my code to go trough that table, search up the id ( Its 13040100 ) and if it matches then to show the div, else it shows an empty div. I am using the Yii2 framework, which is php based. So far I have tried this
<?php if($product->$this->id('13040100')): ?>
<ul>
<?php
$index = 1;
foreach($product->() as $prd):
if(strpos($prd->getPath(), '13040100') == true) {
?>
<div class="wrap">
<div class="data-plan" style="height:20px; width:65px; background-color:#00a651; float:right;color:white;margin:10px;text-align:center;">A+++ </div>
<div class="data-plan" style="height:20px; width:65px; background-color:#ed1c1c; float:right;color:white;margin:10px;">Datu lapa </div>
</div>
<?php
$index++;
}
endforeach;
?>
</ul>
<?php else: ?>
<div class="wrap">
</div>
<?php endif; ?>
I'm not that familiar with Yii2 framework myself, but are you sure that $product->$this->id('13040100') is correct? It looks weird to me, shouldn't it be something like $product->id('13040100')?
The solution was way easier than I tought, just had to think simple
<?php if ($product->id == '13001100'): ?>
<div class="wrap">
<div class="data-plan" style="height:20px; width:65px; background-color:#00a651; float:right;color:white;margin:10px;text-align:center;">A+++ </div>"
<div class="data-plan" style="height:20px; width:65px; background-color:#ed1c1c; float:right;color:white;margin:10px;">Datu lapa </div>
</div>
<?php else: ?>
<div class="wrap">
</div>
<?php endif;
I'm using newspaper7 theme for WordPress and have inside td_module_mx16 the following code:
<?php
class td_module_mx16 extends td_module {
function __construct($post) {
//run the parrent constructor
parent::__construct($post);
}
function render() {
ob_start();
?>
<div class="<?php echo $this->get_module_classes();?>">
<div class="meta-info-container ">
<div class="td-info-container">
<div class="td-module-image">
<?php echo $this->get_image('td_356x364');?>
<?php if (td_util::get_option('tds_category_module_mx16') == 'yes') { echo $this->get_category(); }?>
</div>
<div class="td-item-details">
<div class="td-module-meta-info ">
<?php echo $this->get_date();?>
<? // php echo $this->get_category();?>
<?php echo $this->get_comments();?>
</div>
<div class="td-excerpt">
<?php echo $this->get_title();
?>
<?php // echo $this->get_excerpt();?>
</div>
<?
/*
<div class="td-read-more">
<?php echo __td('Read more', TD_THEME_NAME);?>
</div>
*/
?>
</div>
</div>
</div>
</div>
<?php return ob_get_clean();
}
}
In this file inside I want to get:
CATEGORY ID for each listing post
AND ROW number for each post like (title near 1,2,3,4,5)
Any idea?
Ive got the follow PHP:
<div class="slide-background">
<div class="slide">
<?php foreach (array_chunk($items->submenu, $linkCount) as $items): ?>
<?php if (12 / $cols == 1):?>
<div class="col-md-12">
<?php else: ?>
<div class="col-md-<?php echo 12 / $cols; ?>">
<?php endif; ?>
<ul>
<?php foreach($items as $submenu): ?>
<?php echo $submenu; ?>
<?php endforeach; ?>
</ul>
</div>
<?php endforeach; ?>
</div>
<ul class="pager">
<li>prev</li>
<li>next</li>
</ul>
</div>
</div>
basically it calculates how many links to display and how many columns, but i now need to place the links in <div class="slide"></div>, but based on the columns.. so basically i need to say if $cols = 2 place two div's in a div and close.. so its basically how many every $cols it should place so many div's in that div..
Its Confusing for me to even explain.. I think Ive explained it rather well above.. If not place say so and ill try again..
Any Help Greatly Appreciated..
UPDATE:
thanks to Hans ive now have the following:
<?php $linksPerColumn = ceil($linkCount / $cols); $linkCounter = 0;?>
<div class="slide-background">
<div class="slide">
<div class="col-md-<?php echo 12 / $cols ?>">
<ul>
<?php foreach ($items->submenu as $link): ?>
<?php $linkCounter++;?>
<?php if($linkCounter % $linksPerColumn == 0):?>
</ul>
</div>
<div class="col-md-<?php echo 12 / $cols ?>">
<ul>
<?php endif; ?>
<?php echo $link; ?>
<?php endforeach; ?>
</ul>
</div>
</div>
<ul class="pager">
<li>prev</li>
<li>next</li>
</ul>
</div>
</div>
only problem is when there's only one column and i need 2 links and then for it to close the div and the ul and start new ones.. right now it does that except for everyone and not for every two links...
You could use modulus for this one. You should calculate how many items you need per column. And then create a close and open div for example:
<?
$linksPerColumn = 4;
if ($linkCount > 4){
$linksPerColumn = ceil ($linkCount / $amountOfColums);
}
$linkCounter = 0;
?>
<div class="slide-background">
<div class="slide">
<?
foreach ($links as $link)
{
$linkCounter++;
?>
// Do your HTML Here.
<?
if($linkCounter % $linksPerColumn = 0)
{
?>
</div>
<div class="slide">
<?
}
?>
</div>
</div>
// Rest of the HTML here.
I think this should do the trick for you.
My page http://www.allyourpods.no/ has some odd "holes" that I cant for the life of me figure out.
I would love some help to figure out how to make it automagickly fill the site in a proper fashion.
My template-file for the start-screen looks like this:
<?php
/*
Template Name: Home Template
*/
get_header(); ?>
<?php query_posts('cat='.recPodcastCategory.'&showposts=30');?>
<?php $categories = get_categories('child_of='.recPodcastCategory); ?>
<?php if($categories): $count=0;?>
<div class="recommended">
<div class="wrapper">
<div class="main_recommended_main_block">
<?php foreach($categories as $category) { if($count<30) { $count++;
if($count!=30) $class='recommend_block'; else $class='recommend_block_1'; ?>
<?php if (function_exists('get_terms_meta'))
{
$cat_image = get_terms_meta($category->term_id, 'image',true);
$add_play_podcast = get_terms_meta($category->term_id, 'play_download',true);
}?>
<div class="<?php echo $class;?>">
<div class="main">
<?php $play_podcast = get_post_meta($post->ID,'play_podcast',true);?>
<div class="view view-fifth"><?php if($cat_image):?><img src="<?php echo $cat_image;?>" alt="category image" /><?php endif;?>
<?php if($add_play_podcast):?>
<div class="mask">Play</div>
<?php endif; ?>
</div>
</div>
<?php echo substr( category_description( $category->term_id ),0,100 ) . "..."; ?>
</div>
<?php } } ?>
</div>
</div>
</div>
<?php endif; ?>
<?php if(!isset($_GET['pod_category']))$class_all = ' class="active"'; ?>
<div class="clr"></div>
<?php get_footer(); ?>
If any more information is needed please let me know.
You should add this css:
.recommend_block:nth-child(4) {
clear: left;
}
The problem is one of the first two is a little lower than the others, so it is blocking the float.
Edit: that should be
.recommend_block:nth-child(4n)