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 }?>

How to add onload event to a div using jquery or javascript?

hi guys i am trying to call a function on the onload event of a div but i can't find anything that would help me call a function on the onload event.
i did try to call it using this "oQuickReply.swap" but it didn't work as that would only swap the position. so can you tell me how can i add a onload event on a div?
my question is different as i have a function that can only be called in a loop to take the 'post_id' value to the function the onload event i want is to call my function select_comment() which would get me all the comments from my database to the page. let me show you my code and if there is something you dont understand tell me beforehand i will detail it.
<script type="text/javascript">
$(window).load(function(e){
// grab the scroll amount and the window height
loadmore();
select_likes();
select_share();
// get_recieve_friend_requests();
// get_sent_friend_requests();
});
function loadmore(){
var lastID = $('.load-more').attr('lastID');
// alert(lastID);
jQuery.ajax({
type:'POST',
url:'<?php echo base_url("user/get_all_post"); ?>',
data: {id: lastID },
dataType: 'json',
beforeSend:function(data){
$('.load-more').show();
},
success:function(data){
var ParsedObject = JSON.stringify(data);
var json = $.parseJSON(ParsedObject);
if (json=="") {
$("#bottom").append('<div class="btn btn-default col-md-6" >'+'No More Results'+'</div>');
$("#Load_more_data").hide()
}else{
$postID=json[json.length-1].id;
$('.load-more').attr('lastID', $postID);
$.each(json, function (key, data) {
var post_id=data.id;
var post_status=data.status;
var status_image=data.status_image;
var multimage=data.multimage;
if(!post_status=="" && !status_image==""){
$("#status_data").append('<div class="panel-footer" onload="select_comment('+post_id+');"><div class="row"><div class="col-md-12">13 people like this</div></div><ul class="media-list"><li class="media_comment"></li><li class="media"><div class="media-left media-top"><?php echo img($user_file_image); ?></div><div class="media-body"><div class="input-group"><form action="" id="form_content"><textarea name="textdata" id="content_comment" cols="25" rows="1" class="form-control message" placeholder="Whats on your mind ?"></textarea><button type="submit" id="comment_button" onclick="comment_here('+post_id+');">Comment</button></form></div></div></li></ul></div></div>');
});
}
}
});
}
function select_comment(post_id)
{
alert(post_id);
var User_id = $('.id_data').attr('value');
jQuery.ajax({
type:'POST',
url:'<?php echo base_url("user/select_comment"); ?>',
data: {Post_id:Post_id,User_id:User_id},
dataType: 'json',
success:function(data)
{
alert('you have like this');
}
});
}
now you see that's how i want to use my function to call when that div loads.

Please Refer Below Code. may Be help you
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
#divstyle {
text-align: center;
background-color: cadetblue;
width: 550px;
height: 180px;
margin-left: 100px;
}
</style>
</head>
<body onload="myFunction()">
<div id="divstyle">
<h2>Welcome to the tutorial for onload event!</h2>
<hr />
<h3>The function will be executed once the page is fully loaded.</h3>
</div>
<script>
function myFunction() {
alert("Hello, User!");
}
</script>
</body>
</html>

use jQuery to this:
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script>
$('.when-element-with-this-class').ready(function() {
alert( "ready!" );
});
</script>
<div class="when-element-with-this-class">
when this div is ready, js procced function with alert command
</div>
https://jsfiddle.net/g7re6khu/

you can use ready function on any element, window or document. Once the targeted element is loaded the required block is executed. Below is example for same.
$("#myid").ready(function(){
//block will be loaded with element with id myid is ready in dom
})

How to load php page and its output after post inside a div?

I made the code to load the pages inside the content div; however; when I want to submit, it doesn't redirect to the div when submitting. How can I make this possible.
//test.php is the index
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#content').load('home.php');
$('ul#menu li a').click(function(){
var page = $(this).attr('href');
$('#content').load(page + '.php');
return false;
});
});
</script>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Math</li>
</ul>
Menu left
<div id="content"></div>
MenuRight
</body>
</html>
//////////////////////home.php is the first link and welcome page
<?php
echo "HOME PAGE";
?>
//////////////////////math.php is the second link and the one I'm having problems with.
<?php
if($_POST){
$a=$_POST['a'];
$b=$_POST['b'];
$c=$a+$b;
echo $c;
}
else{
echo"
<form name=f method=post action=math.php>
<input name=a>+<input name=b>=?
<input id='buttoncalc' name=calc type=submit value=Calc>
</form>
";
}
?>
Thank you.

You mean that this form should works in ajax either?
$('#buttoncalc').on('click', function(e){
e.preventDefault();
var form = $(this).closest('form');
$.post( form.attr('action') , form.serialize(), function( data ) {
alert( "Data Loaded: " + data );
});
});
Function click won't works on dynamically created content. You need to use on() and send data by post. When you receive, you can insert it into #content again.

Ajax WordPress post popup with SimpleModal and jQuery

I tried to implement this mode here http://wordpressthemescollection.com/ajax-wordpress-post-popup-with-simplemodal-and-jquery-488.html but nothing seems to work.
This is what I do.
1 / Include in header
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.simplemodal.js"></script>`
The links are goods cause I checked them both.
2 / Include in header this script
<script>
jQuery(document).ready(function() {
jQuery('a.postpopup').live('click', function(){
var id = jQuery(this).attr('rel');
jQuery('<div id="ajax-popup"></div>').hide().appendTo('body').load('<?php bloginfo('url')?>/ajax/?id='+id).modal({
opacity:90,
position: ["0%"],
overlayClose:true
});
return false;
});
});
</script>
3 / Make a custom template with this code
<?php
/*
Template Name: Ajax
*/
?>
<?php
$post = get_post($_GET['id']);
?>
<?php if ($post) : ?>
<?php setup_postdata($post); ?>
<div class="whatever">
<h2 class="entry-title"><?php the_title() ?></h2>
<div class="entry-content">
<?php the_content(); ?>
</div>
</div>
<?php endif; ?>
And after that made a page named Ajax and assign the template Ajax.
4 / Implement a link
this link
If i click on the link nothing happens.
What did I do wrong cause I did not have a clue about it?
Thanks.

jQuery .load() is ajax and so you need to do any subsequent things in a callback like this:
var $ajax-div = jQuery('<div id="ajax-popup"></div>').hide().appendTo('body');
var url = '<?php bloginfo('url')?>/ajax/?id=' + id;
$ajax-div.load(url), function() {
// the callback
jQuery('#ajax-popup').modal({
opacity: 90,
position: ["0%"],
overlayClose:true
});
});

when you create an new post or page content on wordpress admin, select the "Ajax" template for your page

Multiple Javascript Functions in Jquery

I've been having the same issue for a very long time and I'm wondering if someone can teach me what I'm doing wrong.
I created a multipage Jquery (like the one in the example below) however, when I go to add a reference to a .js file I've saved it always tends to either not load up the pages content or if positions somewhere else it just simply wont work!
My HTML code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Find A Deal</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
img.fullscreen {
max-height: 100%;
max-width: 100%;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
$(document).on('pagebeforeshow', '#index', function(){
$("#list").empty();
var url="http://localhost/tmp/json4.php";
$.getJSON(url,function(json){
//loop through deals
$.each(json.deals,function(i,dat){
$("#list").append("<li><a id='"+dat.dealid+"' data-restaurantid=" + dat.restaurantid + " data-image=" + dat.image + "><h1>"+dat.name+"</h1><h6>"+dat.dname+"</h6><h5>"+dat.description+"</h5></a></li>");
$(document).on('click', '#'+dat.dealid, function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
dealObject.dealID = $(this).attr('id');
dealObject.restaurantid = $(this).attr('data-restaurantid');
dealObject.shortName = $(this).find('h1').html();
dealObject.image = $(this).attr('data-image');
//dealObject.dname = $(this).find('input').html();
//dealObject.dname = $(this).find('desc').val();
dealObject.dealName = $(this).find('h6').html();
dealObject.description = $(this).find('h5').html();
//dataObject.dname=$(this).find('p').html()
//dealObject.name = $(this).find('desc').eq(0).val(dealObject.name);
$.mobile.changePage( "#index2", { transition: "slide"} );
event.handled = true;
}
});
});
$("#list").listview('refresh');
});
});
$(document).on('pagebeforeshow', '#index2', function(){
//$('#index2 [data-role="content"]').html('You have selected Link' + dealObject.dname);
$('#index2 [data-role="content"]').find('#deal-img').attr('src',dealObject.dealObject);
$('#index2 [data-role="content"]').find('#title').html(dealObject.name);
//$('#index2 [data-role="content"]').find('#description').html(dealObject.dname);
$('#index2 [data-role="content"]').find('input#desc').val(dealObject.description);
$('#index2 [data-role="content"]').find('input#tname').val(dealObject.dealName);
$('#index2 [data-role="content"]').find('input#dealid').val(dealObject.dealID);
});
var dealObject = {
dealID : null,
restaurantid : null,
shortName : null,
image : null,
dealName : null,
description: null
}
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
<h1>Current Deals</h1>
</div>
<div data-role="content">
<div class="content-primary">
<ul id="list" data-role="listview" data-filter="true"></ul>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>My Deals</li>
</ul>
</div>
</div>
</div>
<!--New Page -->
<div data-role="page" id="index2">
<!--<script src="js/ammend.js"></script>--!>
<div data-role="header">
<h1> Find A Deal </h1>
</div>
<div data-role="content">
<!-- <?php
if( !isset( $_SESSION ) ){
session_start();
}
if( isset( $_SESSION['username'] ) ){
echo ".";
} ?> --!>
<form id="test">
<label for="name">Deal Name:</label>
<input type="text" value="" name="tname" id="tname"/>
<label for="desc">Description</label>
<input type="text" value="" name="desc" id="desc"/>
<a data-role="button" id="amend" data-icon="star" data-iconpos="left">Amend Deal </a>
<input type="text" value="" name="dealid" id="dealid"/>
<h3></h3>
<!--<img src="" width="100px" height="100px" id="deal-img">
<h1 id="title"></h1>
<h3 id="description"></h3>
<p id="name"></p>--!>
</div>
<footer data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li>Home</li>
<li>My Deals</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
Apologies if it's hard to read. This javascript function will work just fine by itself. When an item in index is clicked it brings you to a new page in index2. On index 2 there's a submit button to which is connect to a file referenced <script src="js/ammend.js"></script>. This is where things normally seem to go wrong for me as it's like they're cancelling eachother out or just not co-operating together.
The js file at that location is:
$(document).on('pagebeforeshow', '#index2', function(){
$('#amend').on('click', function(){
if($('#tname').val().length > 0 && $('#desc').val().length > 0 && $('#dealid').val().length > 0){
userObject.tname = $('#tname').val(); // Put username into the object
userObject.desc = $('#desc').val(); // Put password into the object
userObject.dealid = $('#dealid').val();
// Convert an userObject to a JSON string representation
var outputJSON = JSON.stringify(userObject);
// Send data to server through ajax call
// action is functionality we want to call and outputJSON is our data
ajax.sendRequest({action : 'index2', outputJSON : outputJSON});
} else {
alert('Please fill all nececery fields');
}
});
});
$(document).on('pagebeforeshow', '#index2', function(){
if(userObject.name.length == 0){ // If username is not set (lets say after force page refresh) get us back to the login page
$.mobile.changePage( "#index2", { transition: "slide"} ); // In case result is true change page to Index
}
$(this).find('[data-role="content"] h3').append('Deal Amended:' + userObject.name); // Change header with added message
//$("#index").trigger('pagecreate');
});
// This will be an ajax function set
var ajax = {
sendRequest:function(save_data){
$.ajax({url: 'http://localhost/test/login/amend.php',
data: save_data,
async: true,
beforeSend: function() {
// This callback function will trigger before data is sent
$.mobile.showPageLoadingMsg(true); // This will show ajax spinner
},
complete: function() {
// This callback function will trigger on data sent/received complete
$.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
},
success: function (num) {
if(num == "true") {
$.mobile.changePage( "#index", { transition: "slide"} ); // In case result is true change page to Index
} else {
alert('Deal has been added successfully'); // In case result is false throw an error
$.mobile.changePage( "#index", { transition: "slide"} );
}
// This callback function will trigger on successful action
},
error: function (request,error) {
// This callback function will trigger on unsuccessful action
alert('Error: " . mysql_error() . "Query: " . $query;');
}
});
}
}
// We will use this object to store username and password before we serialize it and send to server. This part can be done in numerous ways but I like this approach because it is simple
var userObject = {
tname : "",
desc : "",
dealid: ""
}
The above should be called when the button is being pressed but most of the time I cant even get to the stage of seeing the button once I add the referecne to this code.
If anybody has had the same issue as this before or can shed some light on the problem I'd really appreciate it.

Your problem is related to jQuery Mobile page handling.
Because you are using multiple HTML pages loaded with ajax into the DOM all your js scripts must be referenced from the first HTML files. All other HTML files will be loaded only partially, only BODY part will be loaded while HEAD is going to be discarded.