PHP and Javascript getelementbyid, how to pass on parameters - javascript

I have a Javascript function that is called many time within a while loop with <div id='c$value'>.
When calling countdown() I would need to pass on some parameters. In this case $m and $s.
How can this be done ?
window.onload = function() {
<?php
$nbcounters = 5;
for ($i = 0; $i < $nbcounters; $i++) {
echo "countdown('c$i', 0, 7);";
}
?>
}
the php code
<?php
$value = 0;
while ($value < $nbcounters) {
$m = rand(1, 3);
$s = rand(10, 20);
echo "<div id='c$value'></div><br>";
$value++;
}
?>
Thanks!

Related

How to asynchronously preload images

I have a set of videos that I exported to frames and show current frame based on scroll position (something like this but using image frames instead of video)
And using this in <head> casues lots of initial delay but afterwards the frame transition is very smooth.
<?php for ($i = 0; $i <= 99; $i++) {
$number = $i < 10 ? '0'.$i : $i; ?>
<link rel="preload" href="<?php echo get_stylesheet_directory_uri()?>/media/frames/01/optim/_scene-1-00<?php echo $number; ?>.jpg" as="image">
<?php } ?>
<?php for ($i = 0; $i <= 99; $i++) {
$number = $i < 10 ? '0'.$i : $i; ?>
<link rel="preload" href="<?php echo get_stylesheet_directory_uri()?>/media/frames/01/optim/_scene-2-00<?php echo $number; ?>.jpg" as="image">
<?php } ?>
<?php for ($i = 0; $i <= 99; $i++) {
$number = $i < 10 ? '0'.$i : $i; ?>
<link rel="preload" href="<?php echo get_stylesheet_directory_uri()?>/media/frames/01/optim/_scene-3-00<?php echo $number; ?>.jpg" as="image">
<?php } ?>
...
Any thought on how can I only preload the first scene and the rest to be preloaded after window.onload ?
I ended up Doing it like so:
function preloadRestOfScenes() {
/* Scene 2 */
let html = "";
for (let i = 0; i <= 249; i++) {
let number;
if (i < 10) {
number = "00" + i;
} else if (i >= 10 && i < 100) {
number = "0" + i;
} else {
number = i;
}
html += `<link rel="preload" href="${stylesheet_directory_uri}/media/frames/02/optim/scene-2-${number}.jpg" as="image">`;
}
document.querySelector("head").insertAdjacentHTML("beforeend", html);
/* Scene 3 */
html = "";
for (let i = 0; i <= 549; i++) {
let number;
if (i < 10) {
number = "00" + i;
} else if (i >= 10 && i < 100) {
number = "0" + i;
} else {
number = i;
}
html += `<link rel="preload" href="${stylesheet_directory_uri}/media/frames/03/optim/scene-3-${number}.jpg" as="image">`;
}
document.querySelector("head").insertAdjacentHTML("beforeend", html);
/* Scene 4 */
html = "";
for (let i = 0; i <= 299; i++) {
let number;
if (i < 10) {
number = "00" + i;
} else if (i >= 10 && i < 100) {
number = "0" + i;
} else {
number = i;
}
html += `<link rel="preload" href="${stylesheet_directory_uri}/media/frames/04/optim/scene-4-${number}.jpg" as="image">`;
}
document.querySelector("head").insertAdjacentHTML("beforeend", html);
}
And
window.onload = () => {
preloadRestOfScenes();
};

How do I create directory using array_column

The following code creates two folders, one with the $folderName and one with the $date with the files uploaded. If I change the $folderName to something static like "uploadingFolder" it creates the folder with the files uploaded.
How can I get the naming convention for the folder I want uploaded with its contents: firstname lastname date.
$formdata = json_decode(file_get_contents("php://input"),true);
$fname = array_column($formdata, 'firstname');
$lname = array_column($formdata, 'lastname');
$date = date('d-m-Y');
$folderName = $fname[0].$lname[0].$date;
//$folderName = "uploadingFolder";
mkdir('uploads/'.$folderName, 0777, true);
$total = count($_FILES['files']['name']);
for( $i=0 ; $i < $total ; $i++ ) {
$tmpFilePath = $_FILES['files']['tmp_name'][$i];
$newFilePath = "uploads/".$folderName."/".$_FILES['files']['name'][$i];
if(move_uploaded_file($tmpFilePath, $newFilePath)){
echo "upload successful ";
} else {
echo "error uploading files ";
}
}
Sample of json
$sampledata = '{"step":3,"form":{"firstname":"Jackie","lastname":"Hamer","address":"#45 test street","phone":"8681234567","email":"jackie#gmail.com","id":"a0e4c2c2g6c2b1g6","passport":"4545454787T","country":"Grenada","date":"2020-06-13","rdate":"2020-06-11","hotel":"True Blue Bay","package":"10","payment":"10","pfirstname":"Jamie","plastname":"Grant","atravellerfirstname":"Jackie","atravellerlastname":"Browne","refereefname":"Jamie","refereelname":"Lester","refereeaddress":"#45 Test","refereephone":"8684567894","refereefname2":"Jamie","refereelname2":"Louis","refereeaddress2":"#45 Test","refereephone2":"8687878787","formfiles":[]},"countries":[{"Country":"Grenada","_mby":"5ebef4733964375a880000ca","_by":"5ebef4733964375a880000ca","_modified":1591657087,"_created":1591657074,"_id":"5edec27264396144390000cd"},{"Country":"Barbados","_mby":"5ebef4733964375a880000ca","_by":"5ebef4733964375a880000ca","_modified":1591657105,"_created":1591657105,"_id":"5edec2913763637d1700010f"},{"Country":"St. Lucia","_mby":"5ebef4733964375a880000ca","_by":"5ebef4733964375a880000ca","_modified":1591657142,"_created":1591657142,"_id":"5edec2b6303466c0d0000254"},{"Country":"Curacao","_mby":"5ebef4733964375a880000ca","_by":"5ebef4733964375a880000ca","_modified":1591720520,"_created":1591720483,"_id":"5edfba233336352eef0002f9"},{"Country":"Panama","_mby":"5ebef4733964375a880000ca","_by":"5ebef4733964375a880000ca","_modified":1591720527,"_created":1591720527,"_id":"5edfba4f363331fc08000133"},{"Country":"Cancun","_mby":"5ebef4733964375a880000ca","_by":"5ebef4733964375a880000ca","_modified":1591720558,"_created":1591720558,"_id":"5edfba6e38353443d10002c6"}],"hotels":[{"HotelName":"True Blue Bay","URL":"https://www.truebluebay.com/","Country":["Grenada"],"Image":{"path":"storage/uploads\\truebluebay.jpg"},"_mby":"5ebef4733964375a880000ca","_by":"5ebef4733964375a880000ca","_modified":1591720577,"_created":1589575617,"_id":"5ebeffc134306446460002b9","TestCountry":null}],"selectValue":"Grenada","files":[{},{},{},{},{},{}],"disabled":false,"sumbitted":false,"submitted":true}';
Like this;
<?php
$formdata = json_decode(file_get_contents("php://input"), true);
$fname = $formdata['form']['firstname'];
$lname = $formdata['form']['lastname'];
$date = date('d-m-Y');
$folderName = $fname.' '.$lname.' '.$date;
// Added spaces between for ya. Would recommend to do it like [YYYY-MM-DD Lastname Firstname] though
mkdir('uploads/'.$folderName, 0777, true);
$total = count($_FILES['files']['name']);
for( $i=0 ; $i < $total ; $i++ ) {
$tmpFilePath = $_FILES['files']['tmp_name'][$i];
$newFilePath = "uploads/".$folderName."/".$_FILES['files']['name'][$i];
if(move_uploaded_file($tmpFilePath, $newFilePath)){
echo "upload successful ";
} else {
echo "error uploading files ";
}
}
I did an test on this;
<?php
$sampledata = '{"step":3,"form":{"firstname":"Jackie","lastname":"Hamer","address":"#45 test street","phone":"8681234567","email":"jackie#gmail.com","id":"a0e4c2c2g6c2b1g6","passport":"4545454787T","country":"Grenada","date":"2020-06-13","rdate":"2020-06-11","hotel":"True Blue Bay","package":"10","payment":"10","pfirstname":"Jamie","plastname":"Grant","atravellerfirstname":"Jackie","atravellerlastname":"Browne","refereefname":"Jamie","refereelname":"Lester","refereeaddress":"#45 Test","refereephone":"8684567894","refereefname2":"Jamie","refereelname2":"Louis","refereeaddress2":"#45 Test","refereephone2":"8687878787","formfiles":[]},"countries":[{"Country":"Grenada","_mby":"5ebef4733964375a880000ca","_by":"5ebef4733964375a880000ca","_modified":1591657087,"_created":1591657074,"_id":"5edec27264396144390000cd"},{"Country":"Barbados","_mby":"5ebef4733964375a880000ca","_by":"5ebef4733964375a880000ca","_modified":1591657105,"_created":1591657105,"_id":"5edec2913763637d1700010f"},{"Country":"St. Lucia","_mby":"5ebef4733964375a880000ca","_by":"5ebef4733964375a880000ca","_modified":1591657142,"_created":1591657142,"_id":"5edec2b6303466c0d0000254"},{"Country":"Curacao","_mby":"5ebef4733964375a880000ca","_by":"5ebef4733964375a880000ca","_modified":1591720520,"_created":1591720483,"_id":"5edfba233336352eef0002f9"},{"Country":"Panama","_mby":"5ebef4733964375a880000ca","_by":"5ebef4733964375a880000ca","_modified":1591720527,"_created":1591720527,"_id":"5edfba4f363331fc08000133"},{"Country":"Cancun","_mby":"5ebef4733964375a880000ca","_by":"5ebef4733964375a880000ca","_modified":1591720558,"_created":1591720558,"_id":"5edfba6e38353443d10002c6"}],"hotels":[{"HotelName":"True Blue Bay","URL":"https://www.truebluebay.com/","Country":["Grenada"],"Image":{"path":"storage/uploads\\truebluebay.jpg"},"_mby":"5ebef4733964375a880000ca","_by":"5ebef4733964375a880000ca","_modified":1591720577,"_created":1589575617,"_id":"5ebeffc134306446460002b9","TestCountry":null}],"selectValue":"Grenada","files":[{},{},{},{},{},{}],"disabled":false,"sumbitted":false,"submitted":true}';
$formdata = json_decode($sampledata, true);
$fname = $formdata['form']['firstname'];
$lname = $formdata['form']['lastname'];
$date = date('d-m-Y');
$folderName = $fname.' '.$lname.' '.$date;
var_dump($folderName); // string(23) "Jackie Hamer 16-06-2020"
Extra important note: Be sure no illegal chars for folders exists in the first or lastname ! You should strip or replace illegal special chars!

refresh multiple classes every n secs from php backend

I have some code in jquery that connects to php and refreshes the class with latest data. This is working ok. However, I need to update 3 classes and when it refreshses the values are empty.
Is there a way I can query db and update 3 classes with fresh data every n sec. Many thanks
js
// Update server with latest actions,destructions and return requests
setInterval(function() {
$.get('/domain/admin/refreshBox.php', function(data) {
$(".actions").text(data);
$(".retrievals").text(data);
$(".returns").text(data);
});
}, 10000);
php
$sql= mysqli_query($conn,"SELECT count(*) as total FROM act WHERE new = '1'");
$rows = mysqli_fetch_assoc($sql);
$num = $rows['total'];
//echo $num;
$ni = $num;
if($ni < 1) {
$ni = '0';
}
echo $ni;
$nisql= mysqli_query($conn,"SELECT count(*) as ni FROM act WHERE activity='New Intake' AND new = '1'");
$niintknum_row = mysqli_fetch_assoc($nisql);
$niintknum = $niintknum_row['ni'];
//echo $num;
$niintk_num = $niintknum;
if($niintk_num < 1) {
$niintk_num = '0';
echo $niintk_num;
$brtvsql= mysqli_query($conn,"SELECT count(*) as rtrv FROM act WHERE activity='Box Retrieval' AND new = '1'");
$brtv_row = mysqli_fetch_assoc($brtvsql);
$brtvnum = $brtv_row['rtrv'];
//echo $num;
$brtv_num = $brtvnum;
if($brtv_num < 1) {
$brtv_num = '0';
echo $brtv_num;
$brtnsql= mysqli_query($conn,"SELECT count(*) as brtn FROM act WHERE activity='Box Return' AND new = '1'");
$brtn_row = mysqli_fetch_assoc($brtnsql);
$brtnnum = $brtn_row['brtn'];
//echo $num;
$brtn_num = $brtnnum;
if($brtn_num < 1) {
$brtn_num = '0';
}
echo $brtn_num;

Opencart customization: server-side script for rating

I've added a custom table into the Opencart database, where I have a field/column, called average_rating (value = null to 5).
In my (custom) template (.tpl file) I've added a code to get and show the rating of current record from database.
Here is the code within .tpl file:
<div class="form-group">
<label class="col-sm-2 control-label" for="input-average_rating"><?php echo $entry_average_rating; ?></label>
<div class="col-sm-10">
<input type="hidden" name="average_rating" value="<?php echo $average_rating; ?>" id="input-average_rating" />
<?php for ($i = 0; $i < $average_rating; $i++) { ?>
<div class="rating_hover" id="<?php echo 'r' . ($i+1) ?>" title="<?php echo $i+1 ?>" data-toggle="tooltip"><i class="fa fa-star"></i></div>
<?php } ?>
<?php for ($i = $average_rating; $i <= 4; $i++) { ?>
<div class="rating_normal" id="<?php echo 'r' . ($i+1) ?>" title="<?php echo $i+1 ?>" data-toggle="tooltip"><i class="fa fa-star"></i></div>
<?php } ?>
</div>
</div>
For the blue-stars, I use .rating_hover class, for the grey-ones: .rating_normal class (see the picture below).
All this stuff works fine. But now I want to do something I have no experience with and I would appreciate any tip concerning my question.
Question: When a mouse pointer is over a grey star, it must become blue, like the ones before it. And when clicked on a star, my hidden input must get the value of title attribute of the clicked div-element. I wouldn't like to write a client-side Javascript to do this. Could somebody give a tip on how to do this with JSON or AJAX... or somehow please?
I mean: something like this:
$('div[id=\'r*\']').onmouseover({
// for (i=$average_rating; i<=[current_id]; i++) {
// ??? document.getElementById('r[i]').style.ClassName = 'someclass';
});
Javascript-alternative works fine, but I still have problems with JSON-script:
This is how javascript works:
Inside every div-element I added following commands:
<div ... onclick="rOnClick(<?php echo ($i+1) ?>);" onmouseover="rOnMouseOver(<?php echo ($i+1) ?>);" onmouseout="rOnMouseOut(<?php echo ($i+1) ?>);" ... >
And my Javascript functions are now, as follows:
<script type="text/javascript">
function rOnMouseOver(id) {
var ar = parseInt(document.getElementById('input-average_rating').value);
if (isNaN(ar)) {
ar = 0;
}
for(i = (ar+1); i <= id; i++) {
document.getElementById('r' + i).className = 'rating_hover';
}
}
function rOnMouseOut(id) {
var ar = parseInt(document.getElementById('input-average_rating').value);
if (isNaN(ar)) {
ar = 0;
}
for(i = 1; i <= ar; i++) {
document.getElementById('r' + i).className = 'rating_hover';
}
for(i = (ar+1); i <= id; i++) {
document.getElementById('r' + i).className = 'rating_normal';
}
}
function rOnClick(id) {
document.getElementById('input-average_rating').value = id;
for(i = 1; i <= id; i++) {
document.getElementById('r' + i).className = 'rating_hover';
}
for(i = (id+1); i <= 5; i++) {
document.getElementById('r' + i).className = 'rating_normal';
}
}
</script>
Please add another css class 'rating' in all rating divs. Also you will be needed to add a different class 'rated' for existing/clicked rated value. Then add following script:
$('.rating').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('rating_over');
$(this).nextAll().removeClass('rating_normal');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
$('.rated').addClass('ratings_over'); // back to rated one
}
);
$('.rating').bind('click', function() {
$('.rating').removeClass('rated');
$(this).addClass('rated');
$('#input-average_rating').val($(this).attr('title'));
});

Magento Images switcher for custom options

I have created a custom options image switcher for Magento, script compares value from options in drop-down with all image names related to product, and finds the most similar one, you can see an example here
The problem is how to add the "selected" option image to the cart, or better to say how to apply that image instead of the default thumbnail in the cart?
anyway here is the complete code - maybe someone can even find this part useful :)
<?php
// load all images related to product
$product = $this->getProduct();
$galleryData = $product->getData('media_gallery');
$images_array = array();
foreach ($galleryData['images'] as $image) {
array_push($images_array, $image['file']);
}?>
<?php
$colour_select_id = '';
$custom_options_arr = array();
foreach ($_options as $_option) {
if ($_option->getTitle() == 'Helmet Color/Design' || $_option->getTitle() == 'Color') {
$colour_select_id = 'select_' . $_option->getId();
$values = $_option->getValues();
foreach ($values as $value) {
$current_option = ($value->getData());
$custom_options_arr[$current_option['option_type_id']] = $current_option['title'];
}
}
}
// $custom_options_arr now holds key=>value pairs of option_type_id => title
$custom_images_to_output = array();
foreach ($custom_options_arr as $key => $value) {
$best_match = $images_array[0];
for ($i = 1; $i < count($images_array); $i++) {
if (similar_text(strtoupper($images_array[$i]), strtoupper($value)) > similar_text(strtoupper($best_match), strtoupper($value))) {
$best_match = $images_array[$i];
}
}
$custom_images_to_output[$key] = $best_match;
}
$base_url = Mage::getBaseUrl('media') . 'catalog/product';
?>
<?php if ($colour_select_id) { ?>
<script type="text/javascript">
jQuery(document).ready(function() {
var opt_object = <?php echo json_encode($custom_images_to_output); ?>;
var base_path = '<?= $base_url;?>';
jQuery("#<?= $colour_select_id ?>").change(function() {
var optionValue = jQuery(this).attr('value');
if (optionValue) {
var optionValueText = jQuery.trim(jQuery('#<?= $colour_select_id ?> :selected').text());
if (opt_object.hasOwnProperty(optionValue)) {
optionValueText = opt_object[optionValue];
}
jQuery("#image").fadeOut(function() {
jQuery(this).load(function() {
jQuery(this).fadeIn(); });
jQuery(this).attr("src", base_path + optionValueText);
jQuery('#image-zoom').attr("href", base_path + optionValueText);
});
}
});
});
</script>

Categories

Resources