I am iterating through a php array to display a list of photo filters.
I need to be able to pass the selected filter name to my javascript function to load it, for now I am only able to get the $i id but the full filter name would be so much more easier.
How can pass $filters[$i] to getFilterName()?
<?php
for ($i = 0; $filters[$i]; $i++)
{
if (strpos($filters[$i], '.png'))
{
?>
<!-- get php variable for javascript : -->
<div id="filter-target" style="display: none;">
<?php
echo htmlspecialchars($i);
?>
</div>
<!-- ... -->
<?php
echo '<div tabindex="-1" class="filter_box" onclick="getFilterName('.$i.')">';
echo '<img class="filter" src="pictures/filters/'.$filters[$i].'"/>';
echo '</div>';
}
}
?>
Thank you!
Because the filename is a string, you need to escape it in ' ' like so:
<?php
for ($i = 0; $filters[$i]; $i++)
{
if (strpos($filters[$i], '.png'))
{
?>
<!-- get php variable for javascript : -->
<div id="filter-target" style="display: none;">
<?php
echo htmlspecialchars($i);
?>
</div>
<!-- ... -->
<?php
echo '<div tabindex="-1" class="filter_box" onclick="getFilterName(\''.$filters[$i].'\')">';
echo '<img class="filter" src="pictures/filters/'.$filters[$i].'"/>';
echo '</div>';
}
}
?>
Otherwise it would treat the string as a variable name in JavaScript and wouldnt fint it because it doesnt exist.
Related
This is my first time ever using isotope. So, I create the isotope instance inside of my document.ready function like so:
var grid = $('.headshots-list');
grid.isotope({
// options
itemSelector: '.headshots-list-item-alt',
layoutMode: 'fitRows',
sortBy: '[data-number]'
});
Then I set the values of each element in my grid layout including setting the data-number attribute.
$("#headshot_" + $(this).val()).attr('data-number', 2); // Users who are not chairpersons
$("#headshot_" + $(this).val()).attr('data-number', 1); // Users who are chairpersons
Then I try to sort the grid. Currently, I am using the setTimeout only because I was testing to see if maybe I had a race condition but it made no difference. The grid does not order itself in the way that I am expecting so that the user with data-number 1 will show before all other users. These attributes are being set. I have viewed the elements in dev tools to be sure.
As I mentioned earlier, this is the first time I have ever used isotope so not sure what I am doing wrong. Any pointers in the right direction will be greatly appreciated.
As requested below, this is the HTML where I build out the li that goes with this.
<li id="headshot_<?php echo $user->ID; ?>"
data-number = "1" class="headshots-list-item-alt js-headshot <?php echo $user_terms_classes . ' ' . $board_status . ' ' . $number; ?>"
data-toggle="modal"
data-target="#memberInfo_<?php echo $member_id; ?>">
<div class="headshot-list-item-inner">
<div class="headshot-list-photo">
<?php //suppress photo until they come in
?>
<?php if ($photo_id): ?>
<?php // echo wp_get_attachment_image( $photo_id, 'Avatar' ); ?>
<?php else: ?>
<?php // echo '<img src="https:somedomain.com/imgs/user_img.jpg"/>'; ?>
<?php endif; ?>
</div>
<h4 class="no-margin">
<?php echo $name; ?>
<input type="hidden" class="user_id" value="<?php echo $user->ID; ?>">
<span style="font-size:14px; display: block; position: relative; width: 100%;"
class="chair_designation" id="chair_designation_<?php echo $user->ID ?>">
</span>
</h4>
<p class="no-margin"><?php echo $title; ?></p>
<span class="headshot-list-item-tag">View Bio</span>
</div>
</li>
I am trying to display my images in a for loop in the form tag using PHP but it does not seem to work. I have also tried doing a return statement but nothing still appears.
<?php
$data = array("images/architecture-57e8d34a48_640.jpg",
"images/gateway-arch-57e2d64548_640.jpg",
"images/horseshoe-bend-57e6d6434f_640.jpg",
"images/lake-irene-57e6d24a4d_640.jpg",
"images/silhouette-57e8d5444e_640.jpg");
function displayCheckboxes(){
for ($i=0; $i<count($data); $i++) {
echo "<img src='".$data[$i] . "<br>";
}
}
?>
<body>
<main id ="main">
<form id="pics" action="process.php" method="get">
<label>Name: </label>
<?php echo displayCheckboxes();?>
</form>
</main>
</body>
Maybe Like This:
<?php
$data = array("images/architecture-57e8d34a48_640.jpg",
"images/gateway-arch-57e2d64548_640.jpg",
"images/horseshoe-bend-57e6d6434f_640.jpg",
"images/lake-irene-57e6d24a4d_640.jpg",
"images/silhouette-57e8d5444e_640.jpg");
function displayCheckboxes(){
global $data;
for ($i=0; $i<count($data); $i++) {
echo "<img src='".$data[$i]."'>" . "<br>";
}
}
displayCheckboxes();
?>
function displayCheckboxes($img_array){
foreach($img_array as $img) {
echo "<img src='".$img."'>'" . "<br>";
}
}
and
echo displayCheckboxes($data);
There is several errors with your function :
- $data is not inside the function
- .jpg is already in the image name.
this should work,call the function with $data
$data = array("images/architecture-57e8d34a48_640.jpg",
"images/gateway-arch-57e2d64548_640.jpg",
"images/horseshoe-bend-57e6d6434f_640.jpg",
"images/lake-irene-57e6d24a4d_640.jpg",
"images/silhouette-57e8d5444e_640.jpg");
/* Write your displayCheckboxes() function here */
displayCheckboxes($data);
function displayCheckboxes($data){
for ($i=0; $i<count($data); $i++) {
echo "<img src='".$data[$i]."'.jpg>'" . "<br>";
}
}
?>
<?php
$data = array(
"images/architecture-57e8d34a48_640.jpg",
"images/gateway-arch-57e2d64548_640.jpg",
"images/horseshoe-bend-57e6d6434f_640.jpg",
"images/lake-irene-57e6d24a4d_640.jpg",
"images/silhouette-57e8d5444e_640.jpg"
);
?>
<body>
<main id ="main">
<form id="pics" action="process.php" method="get">
<label>Name: </label>
<?php foreach($data as $image): ?>
<img src="<?= $image; ?>"></br>
<?php endforeach; ?>
</form>
</main>
</body>
This is an alternative way. Looks much cleaner and readable. And I actually don't think we need a function for printing HTML.
I would say NEVER put HTML inside PHP echo unless it is compulsory. The reason I am stating this is if you put HTML inside PHP, the code becomes easily messy. It becomes hard to understand the logic unless you are the one who coded. Particularly, if you are working with some designers or in future, they will have a hard time making even little changes.
Even I think using <?= than <?php echo is better.
You are trying to give an extension ".jpg" of the images that you previously gave to it in the path of images in the array "$data".
For exemple:We will take the first element in the array $data with index = 0 "$data[0]" (images/architecture-57e8d34a48_640.jpg):
In PHP looks like -> echo "<img src='".$data[0]."jpg'>" . "<br>";
,but in HTML looks like -> <img src='images/architecture-57e8d34a48_640.jpg.jpg'>
You shold have to delete the extension ".jpg" from your echo to seem like:
echo "<img src='".$data[$i]."'>" . "<br>";
I've flexible content based on wordpress page which gives our client opportunities to configure pop-ups in specific page by himselfs.
So the problem is that on one page we've quite a few, let's say infinity numbers of rows of content.
Every specific row has a unique ID created by counting "$i++;".
I'm trying to create a script which will give me the possibility to create unique pop-ups for unique flexible content automatically, based on numbers of current rows.
Here is PHP code
<div class="row">
<?php if( have_rows('service_component') ): $i = 0; ?>
<?php while( have_rows('service_component') ): the_row(); $i++; ?>
<div class="six columns">
<img onclick="openRightMenu()" src="<?php the_sub_field("feature_image"); ?>">
<h3><?php the_sub_field("title"); ?></h3>
<div class="servicesHidden sidenav" id="right_slider_<?php echo $i; ?>">
×
<?php the_sub_field("services"); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
Code above works correctly: content is generated and every div is unique:
<div class="servicesHidden sidenav" id="right_slider_<?php echo $i; ?>">
So next step is to create javascript. Code below also works properly, but only on one unique ID.
<script>
function openRightMenu() {
document.getElementById("right_slider_1").style.width = "33%";
document.getElementById("main").style.marginRight = "33%";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeRightMenu() {
document.getElementById("right_slider_1").style.width = "0";
document.getElementById("main").style.marginRight = "0";
document.body.style.backgroundColor = "white";
}
</script>
Question is: how to modify function above to to let it display and hide unique content endlessly?
You could pass the id into the function
function openRightMenu(id) {
document.getElementById(id).style.width = "33%";
...
}
And in your html
<img onclick="openRightMenu('right_slider_<?php echo $i; ?>')" src="<?php the_sub_field("feature_image"); ?>">
I'm working with a template in Wordpress that someone else set up and I need to fix something.
There is a javascript function that adds a class to every css class that's called object-fit - the added class is called bg--image. This was to fix an error showing up in IE11 , where all the images where messed up.
The problem now is that there's a page where this function shouldn't apply even though the css class is also called object-fit.
I'm a little confused on how to work here. As I don't want to mess up the whole theme and my coding options are quite limited, it just makes a knot in my brain.
Is there any possibility I can add a javascript function to not apply the IE 11 function on this one specific class? the difference is that the one img where it shouldn't apply is a span, the other one is not.
Any ideas?
try {
if (ie_ver() == 11) {
var $img = $('.banner--small').find('img');
$('.banner--small').attr('style', 'background-image:url(' + $img.attr('src') + ')');
$('.banner--small').addClass('bg--image');
$img.addClass('hidden');
var $img2 = $('.object-fit').find('img');
$('.object-fit').attr('style', 'background-image:url(' + $img2.attr('src') + ')');
$('.object-fit').addClass('bg--image');
$img2.addClass('hidden');
$('.slick__inner').each(function() {
var $img3 = $(this).find('img');
$(this).attr('style', 'background-image:url(' + $img3.attr('src') + ')');
$(this).addClass('bg--image');
$img3.attr('style', 'display:none');
});
<div class="article--text">
<div class="container container--tiny spacing--huge">
<?php the_content(); ?>
</div>
<div class="container margin-bottom--huge">
<?php if (get_field('direktionen')) { ?>
<div class="flex flex--wrap flexgrid--gutter flexgrid--normal">
<?php foreach (get_field('direktionen') as $key => $child) { ?>
<div class="flex__item one-third lg-one-half xs-one-whole">
<a href="<?php echo $child['link']; ?>" class="link--direction text--center margin-bottom--medium" target="_blank">
<span class="object-fit"><img src="<?php echo $child['photo']['sizes']['medium']; ?>"
srcset="<?php echo $child['photo']['sizes']['mobile']; ?> 2x,<?php echo $child['photo']['sizes']['medium']; ?> 1x"
alt="<?php echo $child['name']; ?>" /></span>
<h3>
<?php echo $child['name']; ?>
</h3>
<p>
<?php echo $child['adresse']; ?>
</p>
</a>
</div>
<?php } ?>
</div>
<?php } else if ($children) { ?>
<div class="flex flex--wrap flexgrid--gutter flexgrid--normal">
<?php foreach ($children as $key => $child) { ?>
<div class="flex__item one-third lg-one-half xs-one-whole">
<a href="<?php echo get_permalink($child->ID); ?>" class="link--direction text--center margin-bottom--medium">
<span class="object-fit"><img src="<?php echo get_the_post_thumbnail_url($child->ID, 'medium'); ?>"
srcset="<?php echo get_the_post_thumbnail_url($child->ID, 'mobile'); ?> 2x,<?php echo get_the_post_thumbnail_url($child->ID, 'medium'); ?> 1x"
alt="<?php echo $child->post_title; ?>" /></span>
<h3>
<?php echo $child->post_title; ?>
</h3>
<p>
<?php echo get_field('adresse', $child->ID); ?>
</p>
</a>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
Since this is a WordPress template, you have a couple of solutions.
Solution 1 - HTML & jQuery modification
If you can add an additional class to only this page's HTML, then applying the following updates to this page template should allow you to avoid having the .bg--image class added to just this page:
HTML
<span class="object-fit avoid-change">
jQuery
$('.object-fit').not( '.avoid-change' ).addClass('bg--image');
More info on jQuery's .not() method:
https://api.jquery.com/not/
Solution 2 - WordPress Conditional
Another option is to use a WordPress conditional to avoid running the entire script on this page.
You could use the following to prevent the script from loading in this template:
<?php if(! is_page_template( 'your-template-name.php' )){ ?>
// place your script or wp_enqueue_script() code here
<?php } ?>
You could also target an exact page by its page ID. In this example, your page ID would be 7.
<?php if(! is_page( '7' )){ ?>
// place your script or wp_enqueue_script() code here
<?php } ?>
More info on WordPress conditionals:
https://codex.wordpress.org/Conditional_Tags
I need help to display result a sum of values of a json file that's like this:
http://www.base.gov.pt/base2/rest/contratos?&sort(-publicationDate)
I have this code in php to do that:
(name of this file: estat.php)
<?php
//include "sum.php";
$x="active";
$y='';
if(isset($_GET['tabsoft'])){
$y="active";
$x="";
}
?>
<html>
<?php include 'cab.php'; ?>
<body>
<?php include 'menu.php'; ?>
<div class="container">
<div calss="row">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="<?php echo $x ?>">Valor Total Gasto</li>
<li class="<?php echo $y ?>">Número de Empresas Envolvidas</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane <?php echo $x ?> " id="val">
<p>
<form>
<h2>Dinheiro gasto nos contratos</h2>
<input type="submit" name="soma" value="Somar Valores" class="btn btn-primary" formaction="action_sum.php"/>
<!-- <p><?php echo $total; ?></p> -->
</form>
</p>
</div>
<div class="tab-pane <?php echo $y ?> " id="emp">
</div>
</div>
</div>
</div>
<?php include 'rodape.php';?>
</body>
</html>
And i need to display the sum value of 'initialContractualPrice' from the json file, to do this i write this code in other file that i name sum.php:
<?php
// Get json from url
$json = file_get_contents("file.json");
// Decode json into an array
//$json = json_decode($content, true);
$data = json_decode($json, TRUE);
// Set default
global $total;
// Loop through the array created when decoding json
foreach ($data as $key)
{
// remove symbol from the end leaving only digits
$value = substr(utf8_decode($key['initialContractualPrice']), 0, -1);
// remove the decimal point
$value = str_replace('.', '', $value);
// replace the comma with a decimal point
$value = str_replace(',', '.', $value);
// add this number to the total value
$total += $value;
}
//echo $total;
?>
My question is how can i do for the page do the sum without redirect to the sum.php but do it and print the result in estat.php
I can change the type of sum.php to js or jquery if are more easy to do that.
Thank you very much.
as you did, include your sum.php at the beggining of your file estat.php. Hide the sum value with css.
<input id="sum-btn" type="submit" name="soma" value="Somar Valores" class="btn btn-primary" formaction="action_sum.php"/>
<p id="sum"><?php echo $total; ?></p>
css:
#sum {
display:none;
}
and with jQuery (as you tag it) put a click handler on your button:
<script>
$(document).ready(function() {
$('#sum-btn').click(function() {
$('#sum').show();
});
});
</script>
FIDDLE DEMO
Alternative, if you dont want to calculate the sum when the page is loaded, you can call your sum.php with an AJAX call when the button is clicked.
<script>
$(document).ready(function() {
$('#sum-btn').click(function() {
var request = $.ajax({
url: "sum.php",
type: "GET"
});
request.done(function( value ) {
$('#sum').text( value );
$('#sum').show();
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
});
});
</script>
and in sum.php, echo $total; at the end.