I am trying to display the table on my wordpress using days "today, yesterday, tomorrow"
The table "Today" is working fine. But when I click on yesterday or tomorrow Nothing appears.
I need to adjust the buttons well for them to work
This is the code:
<?php $today = new DateTime('today'); $linkmatchs = get_option('link'). $today->format('m-d-y'); $tomorrow = new DateTime('tomorrow'); $linktomorrow = get_option('link'). $tomorrow->format('m-d-y'); $yesterday = new DateTime('yesterday'); $linkyesterday = get_option('link'). $yesterday->format('m-d-y'); ?>
<div class="tab filter-days">
<a class="tablinks yesterday" onclick="openTabs(event, 'yesterday')">yesterday</a>
<a class="tablinks today active" onclick="openTabs(event, 'today')">today</a>
<a class="tablinks tomorrow" onclick="openTabs(event, 'tomorrow')">tomorrow</a>
</div>
<div class="contents widget-content" id="content">
<div id="today" class="tabcontent">
<?php echo strip_tags(do_shortcode('[getthetable url="'.$linkmatchs.'" class="matchesCenter" id="" debug="" tablesorter]')) ;?>
</div>
<div id="yesterday" class="tabcontent">
<?php echo strip_tags(do_shortcode('[getthetable url="'.$linkyesterday.'" class="matchesCenter" id="" debug="" tablesorter]')) ;?>
</div>
<div id="tomorrow" class="tabcontent">
<?php echo strip_tags(do_shortcode('[getthetable url="'.$linktomorrow.'" class="matchesCenter" id="" debug="" tablesorter]')) ;?>
</div>
</div>
<script type="text/javascript">
function openTabs(evt, tabsyName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabsyName).style.display = "flex";
evt.currentTarget.className += " active";
}</script>
Related
I use acf to creat 3 fields, below, i put 3 buttons to switch between 3 fields, problem is, i embed iframe to play video, when i play, even i clicked on another button, it still play on field 1, anyone can help me this ? i want when click on button, it will stop loading iframe from field 1, then replace with iframe from field 2. Tks, sorry for my bad english.
Here my code to show 3 fields...
<script type="text/javascript">
$(function() {
var $allItems = $(".food-container > div");
$(document.body).on("click", "a.button", function(evt) {
var id = this.id,
itemId = ".food-container > #item-" + id;
$allItems.not($(itemId).fadeToggle()).hide();
if (evt.target.id == 4) {
$('.burger-disclaimer').toggle();
} else {
$('.burger-disclaimer').hide();
}
});
});
</script>
<div class="food-container">
<div id="item-1" style="display: block;">
<div class="food"><iframe class="re-if" src="<?php the_field('sv1'); ?>"></iframe></div>
</div>
<div id="item-2" style="display: none;">
<div class="food"><iframe class="re-if" src="<?php the_field('sv2'); ?>"></iframe></div>
</div>
<div id="item-3" style="display: none;">
<div class="food"><iframe class="re-if" src="<?php the_field('sv3'); ?>"></iframe></div>
</div>
<a id="1" href="javascript:void(0)" class="button" onclick="pauseVideo()">Server 1<i class="fa fa-caret-right"></i></a>
<a id="2" href="javascript:void(0)" class="button" onclick="pauseVideo()">Server 2<i class="fa fa-caret-right"></i></a>
<a id="3" href="javascript:void(0)" class="button" onclick="pauseVideo()">Server 3<i class="fa fa-caret-right"></i></a>
<?php
$link = get_field('download');
if( $link ): ?>
<a class="button" href="<?php echo esc_url( $link ); ?> target=">Download</a>
<?php endif; ?>
</div>
I'm using a masonry image gallery plugin for a Wordpress site.
Images have started appearing on top of each other suddenly. I don't think it is to do with the plugin itself, as it was working fine before. But I had to change some of the HTML/CSS code and perhaps it is something to do with that. I can't reconstruct it though.
What it looks like:
Of course the content area should expand with the gallery. It happens on several pages like this. I pull the images via custom fields, it's just a gallery.
Where should I go looking for the source of the error?
<div class="container">
<!-- current start -->
<?php
$fields = CFS()->get('current');
foreach ($fields as $field) {
echo '<div class="row"><div class="col-md-3 topmargin"><h2>'.$field['current_title'].'</h2></div>';
echo '<div class="col-md-6 col-sm-9 topmargin2"><h1>'.$field['current_artist'].'</h1>';
echo '<h4>'.$field['current_exhibition_title'].'</h4>';
echo '<h3>'.date( 'j.m.', strtotime( $field['current_exhibtion_start'] ) ).' - '.date( 'j.m.Y', strtotime( $field['current_exhibition_end'] ) ).'</h3>';
foreach ($field['where'] as $select => $label) {
echo '<span class="h3-2">'.$label.'</div>';
}
if ( (in_category('MQ ART BOX')) || (in_category('MQ ART BOX EN')) ) {
echo '<div class="col-sm-2 col-xs-9 topmargin2-6 textwidget3"><h5><img class="mqimg2" src="http://smolkacontemporary.at/wp-content/uploads/2016/10/mqlogo2.png?x16700"/> ART BOX</h5></div>';
}
echo '</div><div class="row"><div class="col-md-3 topmargin"></div><div class="col-md-9 topmargin2-2">'.$field['current_text'].'</div></div>';
}
?>
<!-- current end -->
<!-- more start -->
<?php
$fields = CFS()->get('images');
$fields2 = CFS()->get('text_continued');
?>
<?php if ( $fields ) : ?>
<div class="row>"><div class="col-md-3 topmargin"></div><div class="col-md-7 topmargin2-13">
<?php echo $fields; ?>
</div></div>
<?php endif; ?>
<?php if ( $fields2 ) : ?>
<div class="row>"><div class="col-md-3 topmargin"></div><div class="col-md-9 topmargin2-8">
<?php echo $fields2; ?>
</div></div>
<?php endif; ?>
<!-- more end -->
<?php
$currentlang = get_bloginfo('language');
if ($currentlang=="de-DE") {
$lang = 'Zurück';
$lang1 = 'Übersicht';
} else {
$lang = 'Back';
$lang1 = 'Overview';
}
$values = CFS()->get('more');
if (count($values) != 0) {
foreach ($values as $post_id) {
$the_post = get_post($post_id);
$link = get_permalink($post_id);
$back = wp_get_referer();
if ( $back != $link) {
echo '<div class="row"><div class="col-md-3 topmargin"></div><div class="col-md-9 topmargin2-12"><a class="btn btn-default" href="'.$back.'" >'.$lang.'</a> <a class="btn btn-default" href="'.$link.'" >'.$lang1.' '.$field['current_artist'].'</a></div></div><br>';
}
else {
echo '<div class="row"><div class="col-md-3 topmargin"></div><div class="col-md-9 topmargin2-12"><a class="btn btn-default" href="'.$back.'" >'.$lang.'</a></div></div><br>';
}
} }
else {
echo '<div class="row"><div class="col-md-3 topmargin"></div><div class="col-md-9 topmargin2-12"><a class="btn btn-default" href="'.wp_get_referer().'" >'.$lang.'</a></div></div><br>';
}
?>
</div>
</article><!-- #post-## -->
It's because the Masonry grid is being constructed before the images have all loaded. You'll need to also call the imagesloaded library.
You haven't posted the JS which is instantiating the masonry, so I can't give you an exact example, but here's the link to the Masonry site about it: https://masonry.desandro.com/layout.html#imagesloaded
I'd use the 2nd example:
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$grid.masonry({
// options...
});
});
I'm fairly new to Handlebars so you'll have to excuse my naiveté.
I'm currently working on a Handlebars blog template that utilizes Bootstrap 4 as a CSS framework. For my articles, I would like to iterate through a pattern that repeats itself after the 5th article is displayed on the homepage.
My first article's markup would be the default. Every 2nd and 3rd would use a different block of markup and same with every 4th and 5th.
If you review my code below you will see I am using placeholders for conditionals at the moment (e.g; 'every-2nd & every-3rd'). I am just not sure what I should do here and I haven't been able to find a helper to solve my problem.
<div id="main" class="col-md-8">
{{#each content}}
{{#if every-2nd & every-3rd}}
<div class="col-md-6">
<h4>{{title}}</h4>
<p>{{description}}</p>
<button>{{button_text}}</button>
</div><!-- /.col -->
{{else if every-4th & every-5th}}
<div class="col-md-5">
<img src="{{img_src}}" />
</div>
<div class="col-md-7">
<h4>{{title}}</h4>
<button>{{button_text}}</button>
</div><!-- /.col -->
{{else}}
<div class="col-md-12">
<img src="{{img_src}}" />
<h4>{{title}}</h4>
<button>{{button_text}}</button>
</div><!-- /.col -->
{{/if}}
{{/each}}
Thanks in advance for your time and consideration.
Hello I'll advise you to use a "test" helper that will check for your index loop number.
Handlebars.registerHelper('test', function(lvalue, operator, rvalue, options) {
var doDisplay = false;
var items = (""+rvalue).split("|");
var arrayLength = items.length;
for (var i = 0; (i < arrayLength); i++) {
if (operator == "eq") {
if (lvalue == items[i]) {
doDisplay = true;
}
} else if (operator == "ne") {
if (lvalue != items[i]) {
doDisplay = true;
}
} else if (operator == "gt") {
if (parseFloat(lvalue) > parseFloat(items[i])) {
doDisplay = true;
}
} else if (operator == "lt") {
if (parseFloat(lvalue) < parseFloat(items[i])) {
doDisplay = true;
}
}else if (operator == "le") {
if (parseFloat(lvalue) <= parseFloat(items[i])) {
doDisplay = true;
}
}else if (operator == "ge") {
if (parseFloat(lvalue) >= parseFloat(items[i])) {
doDisplay = true;
}
}
}
if (doDisplay) {
return options.fn(this);
} else {
return "";
}
});
So your code will look like that after using the helper :
<div id="main" class="col-md-8">
{{#each content}}
{{#test #index 'eq' '1|2'}}
<div class="col-md-6">
<h4>{{title}}</h4>
<p>{{description}}</p>
<button>{{button_text}}</button>
</div><!-- /.col -->
{{/test}}
{{#test #index 'eq' '3|4'}}
<div class="col-md-5">
<img src="{{img_src}}" />
</div>
<div class="col-md-7">
<h4>{{title}}</h4>
<button>{{button_text}}</button>
</div><!-- /.col -->
{{/test}}
{{#test #index 'ne' '1|2|3|4'}}
<div class="col-md-12">
<img src="{{img_src}}" />
<h4>{{title}}</h4>
<button>{{button_text}}</button>
</div><!-- /.col -->
{{/test}}
{{/each}}
Let me know in comments if you need more explanations
I want to create a dynamic div.
I have a list of products which maximum 3 can be in one row "col-xs-4" but if they are 4 products I want 3 with "col-xs-4" and the 4th being with "col-xs-12" to fill the entire row. If I have 5 products I want 3 with "col-xs-4" and the other 2 with "col-xs-6".
I was thinking about depending on the count of the items I set the class
<div class="flippersContainer">
<div class="container">
<div class="col-xs-12">
#{
var children = Model.Content.Children.ToList();
if (children.Any())
{
foreach (var item in children.OfType<RedButtonItem1>())
{
string imagePath = string.Empty;
if (!string.IsNullOrEmpty(item.Image))
{
var itemImage = Umbraco.TypedMedia(item.Image);
imagePath = itemImage.GetCropUrl(80, 160);
}
{
string colCSS = string.Empty;
var productNumber = children.OfType<RedButtonItem1>().Count();
}
<div class="col-xs-4">
<div class="front-two">
<div class="flipperAllFront">
<div class="big-button">
<img class="img-responsive" src="https://www.atlantico.ao/SiteCollectionImages/PARTICULARES/ContaGlobal/Atlantico-Conta-Global-375X178.jpg">
<div class="productTitle">
<span>#item.Title</span>
</div>
<div class="productText">
<span>#item.Description</span>
</div>
#{
if (item.CallToAction != null && item.CallToAction.HasValues)
{
var linkUrl = (item.CallToAction.First.Value<bool>("isInternal")) ? (item.CallToAction.First.Value<int?>("internal").HasValue ? Umbraco.NiceUrl(item.CallToAction.First.Value<int>("internal")) : string.Empty) : item.CallToAction.First.Value<string>("link");
var linkTarget = item.CallToAction.First.Value<bool>("newWindow") ? "_blank" : null;
#:<a role="button" href="#linkUrl" target="#linkTarget">
}
else
{
#:<a class="link-big-button" role="button" data-parent="#accordion" href="##item.Id">
}
#:</a>
}
</div>
</div>
</div>
</div>
}
}
}
</div>
</div>
Thanks in Advance
<div class="col-xs-#(childrenCount==3?"4":childrenCount==4?"3":childrenCount==5?"3":"6")">
<div class="flippersContainer">
<div class="container">
<div class="col-xs-12">
#{
var children = Model.Content.Children.ToList();
int childrenCount = children.OfType<RedButtonItem1>().Count;
if (children.Any())
{
foreach (var item in children.OfType<RedButtonItem1>())
{
string imagePath = string.Empty;
if (!string.IsNullOrEmpty(item.Image))
{
var itemImage = Umbraco.TypedMedia(item.Image);
imagePath = itemImage.GetCropUrl(80, 160);
}
{
string colCSS = string.Empty;
var productNumber = children.OfType<RedButtonItem1>().Count();
}
<div class="col-xs-#(childrenCount==3?"4":childrenCount==4?"3":childrenCount==5?"3":"6")">
<div class="front-two">
<div class="flipperAllFront">
<div class="big-button">
<img class="img-responsive" src="https://www.atlantico.ao/SiteCollectionImages/PARTICULARES/ContaGlobal/Atlantico-Conta-Global-375X178.jpg">
<div class="productTitle">
<span>#item.Title</span>
</div>
<div class="productText">
<span>#item.Description</span>
</div>
#{
if (item.CallToAction != null && item.CallToAction.HasValues)
{
var linkUrl = (item.CallToAction.First.Value<bool>("isInternal")) ? (item.CallToAction.First.Value<int?>("internal").HasValue ? Umbraco.NiceUrl(item.CallToAction.First.Value<int>("internal")) : string.Empty) : item.CallToAction.First.Value<string>("link");
var linkTarget = item.CallToAction.First.Value<bool>("newWindow") ? "_blank" : null;
#:<a role="button" href="#linkUrl" target="#linkTarget">
}
else
{
#:<a class="link-big-button" role="button" data-parent="#accordion" href="##item.Id">
}
#:
</a>
}
</div>
</div>
</div>
</div>
}
}
}
</div>
</div>
I have 3 submit forms in tabs.after submitting the form it displays the message registration successfully. But it goes to home page so only after clicking the particular tab I can see the message. I want to make the tab to stay in the current tab after submitting the form.
<div class="tabs">
<form id="target">
<ul class="tab-links">
<li ><a href="#tab1" id="tabs-A" >Incident Report</a></li>
<li>Death Report</li>
<li><a href="#tab3" id="tabs-C" >Negative Case Data</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab ">
<p>
<?php
include("Report1.php");
?>
</p>
</div>
<div id="tab2" class="tab">
<p>
<?php
include("Report2.php");
?>
</p>
</div>
<div id="tab3" class="tab">
<p>
<?php
include("Report3.php");
?>
</p>
</div>
</div>
</form>
</div>
this is my jquery:
<script>
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
</script>
this is my Report1.php.
<?php
include_once 'dataAccessControl.php';
$DataAccessController = new DataAccessController();
if (isset($_POST['report1']))
{
$daydropdown111=$_POST['daydropdown111'];
$monthdropdown111=$_POST['monthdropdown111'];
$yeardropdown111=$_POST['yeardropdown111'];
$dreport_place=$_POST['dreport_place'];
$dreport_address=$_POST['dreport_address'];
$dreport_additional=$_POST['dreport_additional'];
}
else
{
$daydropdown111="";
$monthdropdown111="";
$yeardropdown111="";
$dreport_place ="";
$dreport_address="";
$dreport_additional="";
}
if (isset($_POST['report1']))
{
$death = $DataAccessController->death_reports($_POST['daydropdown111'],$_POST['monthdropdown111'],$_POST['yeardropdown111'],$_POST['dreport_place'], $_POST['dreport_address'], $_POST['dreport_additional']);
if ($death) {
echo"<p><font color=red size='5pt' > Your Report has been Registered</font></p>";
//header("Refresh:3;url='deathReport.php'");
}
}
?>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Death Report</title>
<script type="text/javascript">
var monthtext=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];
function populatedropdown(dayfield, monthfield, yearfield)
{
var today=new Date()
var dayfield=document.getElementById(dayfield)
var monthfield=document.getElementById(monthfield)
var yearfield=document.getElementById(yearfield)
for (var i=0; i<=31; i++)
dayfield.options[i-1]=new Option(i, i)
dayfield.options[today.getDate()-1]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
for (var m=0; m<12; m++)
monthfield.options[m]=new Option(monthtext[m], monthtext[m])
monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
var thisyear=1999
for (var y=0; y<45; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear+=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}
</script>
</head>
<body >
<div id="color" >
<table>
<h1 align="center"><p>Death Report</h1>
<form action="" method="POST">
<tr><td>Date </td><td>
<select name="daydropdown111" id="daydropdown111"></select>
<select name="monthdropdown111" id="monthdropdown111"></select>
<select name="yeardropdown111" id="yeardropdown111"></select>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
populatedropdown("daydropdown111", "monthdropdown111", "yeardropdown111")
</script>
</td></tr>
<tr><td></br> Place of </td><td></br><select name="dreport_place"id="wgtmsr">
<option value="hospital" >Hospital</option><option value="residence">Residence</option><option value="others">Others</option></select></td></tr>
<tr><td>Address </td><td></br><textarea name="dreport_address" rows="5" cols="32" id="loc" value=""> </textarea></td></tr>
<tr><td>Additional Cases if any</td><td></br> <textarea name="dreport_additional" rows="5" cols="32" id="loc" value=""> </textarea></td></tr></label></td></tr>
<tr><td></td><td><input type="submit" name="report1" value="Save" id="btnsize" /></td></tr>
</form>
</table></br>
</div>
</body>
</html>