I have a bit of jQuery that animates in some text then animates it out. The parameters of the animation are passed via PHP. I need the animation to loop but only after the animation is complete, but can't quite work it out.
<?php if ($text1_1 != "") { ?>
setTimeout(one_1,0); // From 0 to duration
setTimeout(one_2,<?php echo $duration * 2 ?>);
// From duration x2 to duration x3
<?php } ?>
<?php if ($text2_1 != "") { ?>
setTimeout(two_1,<?php echo $duration * 3 ?>); // From duration x3 to duration x4
setTimeout(two_2,<?php echo $duration * 5 ?>); // From duration x5 to duration x6
<?php } ?>
<?php if ($text1_1 != "") { ?>
function one_1() {
$('.text-1_1').animate({ <?php echo $animate1_1 ?>: '<?php echo $text1_1_end ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
$('.text-1_2').animate({ <?php echo $animate1_2 ?>: '<?php echo $text1_2_end ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
$('.text-1_3').animate({ <?php echo $animate1_3 ?>: '<?php echo $text1_3_end ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
$('.text-1_4').animate({ <?php echo $animate1_4 ?>: '<?php echo $text1_4_end ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
$('.text-1_5').animate({ <?php echo $animate1_5 ?>: '<?php echo $text1_5_end ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
}
function one_2() {
$('.text-1_1').animate({ <?php echo $animate1_1 ?>: '<?php echo $text1_1_start ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
$('.text-1_2').animate({ <?php echo $animate1_2 ?>: '<?php echo $text1_2_start ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
$('.text-1_3').animate({ <?php echo $animate1_3 ?>: '<?php echo $text1_3_start ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
$('.text-1_4').animate({ <?php echo $animate1_4 ?>: '<?php echo $text1_4_start ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
$('.text-1_5').animate({ <?php echo $animate1_5 ?>: '<?php echo $text1_5_start ?>' }, <?php echo $duration ?>, 'easeInOutCubic');
}
<?php } ?>
How would you get function one_1() & function one_2() to loop after they've finished animating. There is also the possibility that there will be more similar functions.
Very sorry if this is a bit vague! having a bit of trouble explaining it.
Thanks for looking!
You can use the animate finish callback as described here:
http://api.jquery.com/animate/
$(element).animate( { animation params }, duration, function(){
// this is the animation finish callback
});
My suggestion is to use a recursive function, put the animation inside and call it recursively when the animation is finished
You could use something like this as a template. If the durations within each group are not the same, will require considerably more logic to set up and you would likely be best to provide all the animation data as an array, not echo to each animation
function one_1() {
/* use complete callback of one animation to call next function*/
$('.text-1_5').animate({ /* anim*/}, /*duration*/, /* easing*/, function(){
/* this animation is complete, call next function */
two_1();
});
/* other animations for this group*/
}
Maybe the solution is to replace setTimeout with
setInterval(two_1,<?php echo $duration; ?>);
setInterval(two_2,<?php echo $duration; ?>);
There is now need for doing $duration * 3 because your animations will start all in the same time
Related
I am running a loop that will pick up any news items that should appear in a corner pop up on a website. I have the popup working great for the first item, but the second doesn't show. I've tried to do it by calling the function twice with a different delay & timeout on each one, so they should appear in sequence. I don't really do much jquery/javascript, so I don't understand why that doesn't work. I am guessing it is because the function is the same? Can anyone help me out? Code below!
TIA
<?php $delay = 50;
$timeout = 3000;
$i = 1;
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php if (have_rows('home_page_pop_up')) :
while(have_rows('home_page_pop_up')) : the_row();
if (get_sub_field('show_home') == 'Yes') :
$showdate = get_sub_field('until_date');
$today = date('Ymd');
if ( $today <= $showdate ):
?>
<script>
jQuery.fn.cornerpopup({
variant: 9,
//displayOnce: true,
slide: true,
timeOut: <?php echo $timeout; ?>,
delay: <?php echo $delay; ?>,
link2: "<?php echo site_url(); ?>/news-community/",
header: "Recent News",
text2: "<h5><?php the_title(); ?></h5><p><?php the_excerpt(); ?> ... <a href='<?php the_permalink(); ?>'>Read more</a></p>",
button3: "View all News",
stickToBottom: true,
});
</script>
<?php endif;
endif;
$i++;
$delay = $delay + 3000;
$timeout = $timeout + 3000;
endwhile;
endif;
endwhile;
?>
I written code below that will extract the js like this:
src="assets/js/jquery.min.js"
src="assets/smooth-scroll/smooth-scroll.js"
I would like to have it like: (I guess my regex is wrong):
<script src="assets/js/jquery.min.js"></script>
<script src="assets/smooth-scroll/smooth-scroll.js"></script>
Here is my code:
$htmlData = file_get_contents($url);
if ($htmlData === false) {
echo "error!!";// Handle the error
die();
}
preg_match_all("/\<script(.*?)?\>(.|\\n)*?\<\/script\>/i", $htmlData, $matches);
//example output #1
echo "<pre>";
echo print_r($matches[1]);
echo "</pre>";
//example output #2
$matches = $matches[1];
foreach ($matches as $val) {
//echo "<script";
echo $val;
//echo "</script>"; //<-- adding <script> tags breaks this code
}
So how would I add all scripts into a textarea from this point?
Not sure the regex for styles to do the same.
You need to include the script part in the captured segment.
preg_match_all("/(\<script(.*?)?\>(?:.|\\n)*?\<\/script\>)/i", $htmlData, $matches);
Ok I figured out my code:
$htmlData = file_get_contents($wurl);
if ($htmlData === false) {
echo "error!!";// Handle the error
die();
}
preg_match_all("/(\<script(.*?)?\>(?:.|\\n)*?\<\/script\>)/i", $htmlData, $scripts);
preg_match_all('/<link(.*?)?\>/is', $htmlData, $styles);
//$scripts.=implode(" ",$matches[2]);
//Print array for scripts to get array level;
echo "<pre>";
print_r($scripts[2]);
echo "</pre>";
//Print array for styles to get array level;
echo "<pre>";
print_r($styles[1]);
echo "</pre>";
$scripts = $scripts[2];
foreach ($scripts as $script) {
$all_scripts.= "%script ".$script."#%/scripts#"."\n";
}
$styles = $styles[1];
foreach ($styles as $style) {
$all_styles.= "%link ".$style."#"."\n";
}
$all_scripts = str_replace(array('%', '#'), array(htmlentities('<'), htmlentities('>')), $all_scripts);
$all_styles = str_replace(array('%', '#'), array(htmlentities('<'), htmlentities('>')), $all_styles);
echo "<p>My Scripts:<br/>";
echo $all_scripts;
echo "</p>";
echo "<p>My Styles:<br/>";
echo $all_styles;
echo "</p>";
?>
<textarea name="my_Styles" rows="8" cols="100">
<?php echo $all_styles; ?>
</textarea>
<textarea name="my_Scripts"rows="8" cols="100">
<?php echo $all_scripts; ?>
</textarea>
I have a setTimeout function I am using in a wordpress loop, and for each post I am trying to increment eq(i). For whatever reason so, everything Ive been trying doesnt work. This is my code --
jQuery(document).ready(function() {
var i = this;
var sNum = 0;
var iNum = sNum + 1;
setTimeout(function(i) {
$('.postidf:eq(i) input').val("<?php echo $id; ?>");
}, 500);
});
I basically need it to be +1 for each post on the page --
$( '.postidf:eq(0) input' ).val( "<?php echo $id; ?>" );
$( '.postidf:eq(1) input' ).val( "<?php echo $id; ?>" );
$( '.postidf:eq(2) input' ).val( "<?php echo $id; ?>" );
$( '.postidf:eq(3) input' ).val( "<?php echo $id; ?>" );
etc..
use String concatenation to treat the i as a variable.
$('.postidf:eq(' + i + ') input').val("<?php echo $id; ?>");
or
$('.postidf').eq(i).find("input").val("<?php echo $id; ?>");
If you are in WordPress loop then
<?php
$i = 0;
foreach($all_results as $data) { ?>
$('.postidf:eq(<?php echo $i; ?>) input' ).val( "<?php echo $id; ?>");
<?php $i++; ?>
<?php } ?>
Here $all_results means your all posts in array which you fetch by WP_Query and increment $i by defining it $i = 0.
I am building a statistical view for a client's booking system. They'd like to see which activities were booked in specific months.
I'm using Google Charts for this but the data doesn't match the labels being produced - i.e. the correct data is being attached to the wrong activity.
I've verified via the database and print_r's that the product IDs are being pulled from the database successfully and attached to the correct activity ID number, and that the number and order of labels matches the number and order of activities, which they are:
$sql = "SELECT ProductID, ProductName FROM products ORDER BY ProductID ASC";
$set = $link->query($sql);
while($row = $set->fetch_row())
{
$arrLabels[$row[0]] = "#".$row[0].": ".$row[1];
}
ksort($arrLabels);
$sql = "SELECT * FROM bookings_products INNER JOIN bookings ON bookings.BookingID=bookings_products.BookingProductBooking WHERE BookingConfirmed>0 ORDER BY BookingProductProduct ASC";
$set = $link->query($sql);
while($row = $set->fetch_array(MYSQLI_ASSOC))
{
$dm = substr($row['BookingDate'],5,2); // To get the month from YYYY-MM-DD dates
$arrPeople[$dm][$row['BookingProductProduct']] = $arrPeople[$dm][$row['BookingProductProduct']] + (1 * $row['BookingGroupSize']);
}
ksort($arrPeople);
echo "<pre>"; print_r($arrLabels); echo "</pre>";
echo "<hr/>";
echo "<pre>"; print_r($arrPeople); echo "</pre>";
I then build the Google Charts JS code like this:
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart()
{
var data = google.visualization.arrayToDataTable([
[<?php foreach($arrLabels as $p) { ?>'<?php echo str_replace("'","\'",$p); ?>', <?php } ?>{ role: 'annotation' } ],
['Jan', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['01'][$k] ?: '0'; ?>, <?php } ?>],
['Feb', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['02'][$k] ?: '0'; ?>, <?php } ?>],
['Mar', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['03'][$k] ?: '0'; ?>, <?php } ?>],
['Apr', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['04'][$k] ?: '0'; ?>, <?php } ?>],
['May', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['05'][$k] ?: '0'; ?>, <?php } ?>],
['Jun', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['06'][$k] ?: '0'; ?>, <?php } ?>],
['Jul', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['07'][$k] ?: '0'; ?>, <?php } ?>],
['Aug', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['08'][$k] ?: '0'; ?>, <?php } ?>],
['Sep', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['09'][$k] ?: '0'; ?>, <?php } ?>],
['Oct', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['10'][$k] ?: '0'; ?>, <?php } ?>],
['Nov', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['11'][$k] ?: '0'; ?>, <?php } ?>],
['Dec', <?php foreach($arrLabels as $k=>$v) { ?><?php echo $arrPeople['12'][$k] ?: '0'; ?>, <?php } ?>],
]);
var options = {
title: 'Product popularity by month - Number of people (based on activity date)',
isStacked: true,
};
var chart = new google.visualization.BarChart(document.getElementById('chart3b'));
chart.draw(data, options);
}
</script>
<div id="chart3b" style="margin-top:15px; width: 900px; height: 500px; border:solid 1px #000;"></div><hr/>
You can see (via a static HTML copy-and-paste of the dynamic PHP output) the Google Chart produced here: http://www.stuart-pinfold.co.uk/stats.htm
You'll notice that activity #50 (Santa Experience) which had 195 visitors in December (month 12) is being assigned in the chart to activity #51 ("Zombie Air Rifle, Zombie Pistol, 10 Clay Shoots") instead.
Where am I going wrong?
Your first column of values is the month name, but your first cell at your headers row isn't a "month" label.
If you look at your example the activity #50 (Santa experience), you can see that the value of this label is 1 step to the left in the graph.
Make sure that instead of
['#5: Special Offer Ultimate Shooting Package ', '#6: CPSA Shotgun Skills Course',.....],
['Jan', 0,....
it looks like
['Months', '#5: Special Offer Ultimate Shooting Package ',.....],
['Jan', 0,.....
and everything should work just fine.
I am running a foreach loop and I want to be able to change the content and class of the affected div elements.
foreach ($fields as $key => $value) { ?>
<script type="text/javascript">
document.getElementById('<?php echo $key ?>').innerHTML = '<?php echo $value ?>';
</script>
<?php } ?>
foreach ($fields as $key => $value) { ?>
<script type="text/javascript">
document.getElementById('<?php echo $key ?>').innerHTML = '<?php echo $value ?>';
</script>
you better use it like this .
<script>
<?php foreach ($fields as $key=>$value){ ?>
document.getElementById("<?php echo $key; ?>").innerHTML = "<?php echo $value; ?>";
<?php } ?>
</script>
and make sure you have all correspoinding elements with the same id as $key in this script for example.
<?php foreach($fields as $key=>$value){ ?>
<div id="<?php echo $key; ?>" ></div>
<?php } ?>
Regards
You may use only one part...
server-side with PHP and more tempting
client-side with Javascript
For the last approach, it could be okay to store / request the array as an JavaScript array, or json object and iterate it / update the existing elements during a loop after the site has been loaded.
A mixture of both may lead to a non-maintainable source and more render and execution time as expected.
I have not got what you actually want, But lets with this code. It may help you...
<script type="text/javascript">
$( document ).ready(function() {
<?php
foreach ($fields as $key => $value) {
?>
document.getElementById('<?php echo $key ?>').innerHTML = '<?php echo $value ?>';
<?php
}
?>
});
</script>