Develop Reference

How to lazy load videos with jquery or javascript

So I am trying to the load a embed video after a image(Splash-Imag) is clicked. The Delay should be 1.5 Seconds
<div id="mv-info">
<div id="content-embed" style="<?php $splash = info_movie_get_meta('fondo_player'); if(empty($splash)) { echo 'display:block;';}?>">
<div class="mplay">
<?php if (get_sub_field('type_player') == "p_iframe") {?>
<?php if($dato = get_sub_field('embed_player')) { ?>
<iframe src="<?php echo $dato; ?>" frameborder="0" allowfullscreen></iframe>
<?php }?>
</div>
Here $dato is the embed URL, Once I click the splash-image(class) in div class mvi-info the splash image goes and video pops out. But what i want to do is delay the video for 1.5 seconds or less so that it doesn't hinder my page speed.
I used this code but it doesn't seem to work
<script type="application/javascript">
$('.mvi-cover').click(function(){
var iframe = $('.mplay iframe').each(function(item){
var src= $(this).data('src');
$(this).attr("src",src);
});
$( ".splash-image" ).fadeOut(function(){
$( ".splash-image" ).remove()
});
$('#content-embed').fadeIn();
})
</script>
If anyone can help me then I will be really grateful.

You could use some jQuery objects to load the iframes without appending them to DOM. And using a timeout, you could do this 1,5 second after the page has finished loading.
Then, on a click event, change the src attribute of the iframe next to the clicked splash image (not all). Since the browser already has loaded the content, it will be instantanous.
I am pretty sure you have many iframes like this because you use a PHP loop. DO NOT use id in that kind of loop that produces HTML. It ends up in multiple time the same id. Use classes instead.
Try that to load the iframes 1.5 sec after page load:
$(document).ready(function () {
let iframes = $(".mplay iframe");
setTimeout(function () {
iframes.each(function (index) {
console.log(`Looping through iframes... #${index+1}`)
// Create a temporary jQuery object just to load
let temp = $("<iframe>")[0];
temp.src = $(this).data("src");
// Make sure the content gets loaded
temp.on("load", ()=> console.log(`The content of Iframe #${index+1} is loaded... The url was ${$(this).data("src")}`) )
});
},1500);
});
And this to handle the click events on the splash images:
$(".mvi-cover").click(function () {
let src = $(this).data("src");
$(this).attr("src", src);
let embed = $(this).next(".content-embed");
$(this).fadeOut(function () {
$(this).remove();
embed.fadeIn();
});
});
I am not 100% sure of your rendered HTML structure... But you get the idea.

Try this:
<div id="mv-info">
<?php if($splash = info_movie_get_meta('fondo_player')) {?><a title="<?php the_title(); ?>" class="thumb mvi-cover splash-image" style="background-image: url(<?php echo $splash;?>)"></a><?php }?>
<?php }?>
<div id="content-embed" style="<?php $splash = info_movie_get_meta('fondo_player'); if(empty($splash)) { echo 'display:block;';}?>">
<div class="mplay">
<?php if (get_sub_field('type_player') == "p_iframe") {?>
<?php if($dato = get_sub_field('embed_player')) { ?>
<iframe data-src="<?php echo $dato; ?>" frameborder="0" allowfullscreen></iframe>
<?php }?>
</div>
<script type="application/javascript">
$('.mvi-cover').click(function(){
var iframe = $('.mplay iframe').each(function(item){
var src= $(this).data('src');
$(this).attr("src",src);
});
$( ".splash-image" ).fadeOut(function(){
$( ".splash-image" ).remove()
});
$('#content-embed').fadeIn();
})
</script>

This code works fine for delay for one source. But not able to get it right for multiple sources.
<div class="mplay">
<?php if (get_sub_field('type_player') == "p_iframe") {?>
<?php if($dato = get_sub_field('embed_player')) { ?>
<script>
window.setTimeout(function () {
var iframe = document.getElementById('myIframe');
iframe.setAttribute('src', '<?php echo $dato;?>');
}, 1500);
</script>
<iframe id="myIframe" src="" frameborder="0" allowfullscreen></iframe>
<?php }?>

Using php to run a JavaScript that edits the css after a from is submitted?

After the user submits a form the .php file is supposed to display only certain parts of the forum depending on if cc_owner has a value of personal or something else. I have the contents to be displayed in two separate div elements one called CreditContent_ID and the other called BillContent_ID the inline css sets both div display elements to 'none'. I am trying to use php to check whether the value of cc_owner is personal or something else. If it's personal I want it to change the CreditContent_ID display to block.
I think the problem is with this line:
echo 'document.getElementById("CreditContent_ID").style.display="block"';
Here is my code:
<style>
.CreditContent{
display:none;
}
.BillContent{
display:none;
}
</style>
<body>
<?php
if($_POST['cc_owner']=='personal'){
echo '<script language="javascript">';
echo 'document.getElementById("CreditContent_ID").style.display="block"';
echo '</script>';
}else{
echo '<script language="javascript">';
echo 'document.getElementById("BillContent_ID").style.display="block"';
echo '</script>';
}
?>
<div class=CreditContent id="CreditContent_ID">
//I have other code here.
</div>
<div class=BillContent id="BillContent_ID">
//more code here
</div>
</body>

<style>
.hideContent {
display: none;
}
</style>
<body>
<div class="CreditContent <?php echo $_POST['cc_owner'] != 'personal'? 'hideContent': ''; ?>"
id="CreditContent_ID">
//I have other code here.
</div>
<div class="BillContent <?php echo $_POST['cc_owner'] == 'personal'? 'hideContent': ''; ?>"
id="BillContent_ID">
//more code here
</div>
</body>
Add css class hideContent to div based on cc_owner value.

Javascript gets only the first id from a foreach loop. Why?

I use a foreach loop to get some tabs with different id's. This way I get tabs with ids tab1, tab2, tab3, etc. Than, when I want to get the id of each tab using javascript, it returns only the id of the first tab and uses this for all tabs. It does not loop as php do. Why?
<?php
foreach ($DB_con->query($foos) as $foo) {
?>
<div id='tab<?php echo $counter_foo; ?>'>
<div id="divid" style="visibility: hidden"><?php echo $counter_foo; ?></div>
<script>
$(document).ready(function() {
var dividvalue = document.getElementById('divid').innerHTML;
alert(dividvalue);
});
</script>
<?php
}
?>

Change the id in your HTML to class, and use getElementsByClassName instead of getElementById your in JavaScript.
Your div:
<div class="divid"> <!-- etc -->
and your JS..
var dividvalue = document.getElementsByClassName('divid')[0].innerHTML;
Also consider changing divid to divclass for consistency's sake.
Full edited code:
<script>
var i = 0;
</script>
<?php
foreach ($DB_con->query($foos) as $foo) {
?>
<div id='tab<?php echo $counter_foo; ?>'>
<div class="divclass" style="visibility: hidden"><?php echo $counter_foo; ?></div>
<script>
$(document).ready(function() {
var divclassvalue = document.getElementsByClassName('divclass')[i].innerHTML;
alert(divclassvalue);
i++;
});
</script>
<?php
}
?>

Image gallery with php password protected upload: some issues

I made a simple image gallery, I'm adding a password protected upload. With some help I'm using this php (thanks to sulthan-allaudeen). Attached the code I'm using.
The problem is that I can't find a way to have on the left side the thumbnails of all the images in the folder, but with this code I have the full-width images only. any idea?
thanks
<body>
<div id="containerfoto">
<div id="gallery">
<div id="minipics">
<?php
$dir = 'Images/photo/';
$files = scandir($dir);
$i = 1;
foreach ($files as $key)
{
if ($i>3)
{
$j = $i-3;
echo "<a href='Images/photo/".$key."'><img src ='Images/photo/".$key."'>".$key."</a>";
}
$i++;
}
?>
<div style="clear:left"> </div>
</div>
<div id="zoom">
<img src="Images/foto/foto7.jpg" id="bigimage" alt="">
<h3 id="titolo">Click to enlarge images.</h3>
</div>
</div>
</div>
<script>
window.onload=function(){
if(!document.getElementById || !document.getElementsByTagName) return;
links=document.getElementById("minipics").getElementsByTagName("a");
for(i=0;i<links.length;i++)
links[i].onclick=function(){Show(this);return(false)}
}
function Show(obj){
bigimg=document.getElementById("bigimage");
bigimg.src=obj.getAttribute("href");
smallimg=obj.getElementsByTagName("img")[0];
t=document.getElementById("titolo");
t.removeChild(t.lastChild);
t.appendChild(document.createTextNode(smallimg.title));
}
</script>
</body>

Scandir() put's the file names within your directory into an array. Therefore, we can print each image using a for loop. I've given you an example below:
<?php
$dir = 'Images/photo/';
$files = scandir($dir);
for($number = 0; $number <= count($files); $number++) { ?>
<div class="thumbnail">
<img src="<?php echo $dir; echo $files{$number} ?>">
</div>
<?php } ?>
Now you just need to apply some css to the .thumbnail class and it should do the trick. For starters, you just need to apply some width and height to .thumbnail img, let me know if you need help with that too.

Run PHP After Page Loads up

I created a facebook app recently that posts some content to the user group. If the user posts to multiple groups then I would like to display a progress bar. The HTML part of it I created a form that has got a text area and the form redirects to a post.php file. And I post to the user groups in that post.php page. As I said I use a progress bar to show the progress. But the message gets posted first and only then the progress bar works. I'm pretty sure about the progress bar that it works.
To put it short the PHP part gets executed first before the JS or the HTML. So please do help me out in overcoming this problem.
This is what I have in the post.php file :
<body style = "background-color: #4ea6e6;">
<center>
<div style = "width: 50%; margin-top: 5%; padding: 50px; background-color: #fff;">
<div class="input-group" style = "height: 30px;">
<progress min = "0" max = "100" value = "50" style = "height: 30px;">
</progress>
<span class="input-group-addon">
0%
</span>
</div>
<br>
<div class = "message">
</div>
<br>
<div class = "alert alert-success success" style = "font-size: 18px; font-family: Muli; visibility: hidden;"><b>Great !</b> Your message was successfully posted !</div>
</div>
</center>
</body> <?php
require_once 'libs/facebook.php';
$config = array(
'appId' => 'My app id',
'secret' => 'my app secret',
'fileUpload' => false, // optional
'allowSignedRequest' => false, // optional, but should be set to false for non-canvas apps
);
$facebook = new Facebook($config);
$groups = $_POST['groups'];
$link = $_POST['link'];
$message = $_POST['message'];
$count = count($groups);
for($i=1; $i<count($groups); $i++){
$api = $facebook->api($groups[$i] . '/feed', 'post', array(
link => $link,
message => $message
));
$api = $facebook->api($groups[$i]);
$name = $api['name'];
$j = ($i/(count($groups)-1))*100;
?>
<script type = "text/javascript">
var timeout = setTimeout(post, 0);
function post(){
$('progress').attr("value" , "<?php echo $j; ?>");
$('.message').html("Posting to <?php echo $name; ?>");
$('.input-group-addon').html("<?php echo $j; ?> %");
if(<?php echo ($i/count($groups)); ?> != 1){
var timeout = setTimeout(post, 0);
}
else{
clearTimeout(timeout);
}
}
</script>
<?php
}

You can't execute sync PHP after html and js are loaded.
BUT you can execute an XHR call to a PHP script so that once js is loaded the AJAX call starts and PHP script is executed in background
Here is how to use AJAX with jQuery

You can execute a separate PHP file after the page has loaded, without JS, like this.
Notice that the "background image" is actually a PHP file. The PHP file will execute when it is called at the bottom of the body, after the html file and all elements above it.
You can send data to the PHP file via GET in the CSS property...
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#runPHP
{
background-image:url(script.php);
display:none;
}
</style>
</head>
<body>
<div id="runPHP"></div>
</body>
</html>