I have this code which I found on Stack a few weeks ago.
<script type="text/javascript">
$(document).ready(function() {
// I added the video size here in case you wanted to modify it more easily
var vidWidth = 300; // 425;
var vidHeight = 200; // 344;
var obj = '<object width="' + vidWidth + '" height="' + vidHeight + '">' + '<param name="movie" value="http://www.youtube.com/v/[vid]&hl=en&fs=1">' + '</param><param name="allowFullScreen" value="true"></param><param ' + 'name="allowscriptaccess" value="always"></param><em' + 'bed src="http://www.youtube.com/v/[vid]&hl=en&fs=1" ' + 'type="application/x-shockwave-flash" allowscriptaccess="always" ' + 'allowfullscreen="true" width="' + vidWidth + '" ' + 'height="' + vidHeight + '"></embed></object> ';
$('.posthold:contains("youtube.com/watch")').each(function() {
var that = $(this);
var vid = that.html().match(/v=([\w\-]+)/g); // end up with v=oHg5SJYRHA0
that.html(function(i, h) {
return h.replace(/(http:\/\/www.youtube.com\/watch\?v=+\S+\S?)/g, '');
});
if (vid.length) {
$.each(vid, function(i) {
that.append(obj.replace(/\[vid\]/g, this.replace('v=', '')));
});
}
});
});
</script>
It works great at embeding videos from url's. But I have a small problem with it that I have been trying to solve but i keep breaking the code.
Basically I have the following div setup
<div class="grid_10 alpha omega posthold" >
<div class="clearfix">
<div class="grid_2 alpha">
<img src="/images/no-image/logo_default.jpg" width="100" height="100" />
</a></div>
<div class="grid_8 omega">
<h1>Some Name Here</h1>
<p>Some Comment here</p>
</div>
</div>
</div>
Im trying to get the video to appear directly after the closing paragraph tag where it says some comment here. The user enters the video as part of a post. I store the post in a database and when I pull the post out I swap the url from youtube to the embed code. This is a repeating div so there maybe many instances that a video appears. Is this even possible. At the minute the video appears after the last closing div tag.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
EDITED QUESTION
I'm working on a PHP page (not in WordPress so I can't use a plugin) and I want to use AJAX to bring in blog posts (three per page) from a WordPress multisite with pagination.
There is a problem with the pagination in what is rendered on the page.
On accessing the page three posts are displayed however when clicking page two all posts are displayed. The desired behaviour is that the next three posts should be displayed.
<div id="paging"></div>
<ul class="pagination text-center" role="navigation" aria-label="Pagination" data-page="6" data-total="16">
<li class="pagination-previous disabled" onclick="previous()">Previous<span class="show-for-sr" >page</span></li>
<li class="current"><span class="show-for-sr">You're on page</span> 1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="pagination-next" onclick="next()">Next <span class="show-for-sr">page</span></li>
</ul>
</div>
</div>
</div>
<script>
$( document ).ready(function() {
myFetchPosts(1)
});
//start with page one
// var page = 1;
function myFetchPosts(page) {
//pass in the page number
var page = page;
// used a template literal to add the page parameter
var api_url = `example.com/wordpress/wp-json/wp/v2/posts?per_page=3&page=${page}`;
$("#results").empty();
$.ajax({
url: api_url,
contentType: 'application/json',
dataType: 'json',
// headers: 'X-WP-Total',
success: function(response){
// console.log(response.headers);
var len = response.length;
for(var i=0; i<len; i++){
var id = response[i].id;
var date = new Date(response[i].date_gmt);
var mydate = date.getDate();
var mymonth = date.getMonth();
var myyear = date.getFullYear();
var slug = response[i].slug;
var excerpt = response[i].excerpt.rendered;
var link = response[i].link;
var tr_str =
'<td>'+
'<div class="card" style="width: 250px;">' +
'<div class="card-divider">' + (id+1) + ' ' + slug + '</div>' +
'<img src="example.com/images/model.jpg">' +
' <div class="card-section">' +
'<p>' + excerpt + '</p>' +
'<h4>' + mydate + '/' + mymonth + '/' + myyear + '</h4>' +
'<a href="' + link + ' " target="_blank">'+
'<input type="button" value="read more" style="margin-right: 15px;">' +
'</input>' +
' </a>' +
'<i onclick="myFunction(this)" class="fa fa-thumbs-up" style="margin-right: 15px;" id="' + slug + '">' +
'</i>'+
'<i onclick="myReadingList(this)" class="fa fa-book" style="margin-right: 15px;" id="' + slug + link + '">' +
'</i>'+
' </div>' +
'</div>'+
'</td>'
;
$("#results").append(tr_str);
$("#paging").append(paging);
// increment page so the next time this is called it will fetch the next page
page += 1;
} // end of for loop
} // end of success
}); // end of ajax call
} // end of fetch posts function
So, seems like the v2 version of wordpress API isn't allocated under wp-json address, therefore the address is not valid. According to wordpress support, you must change your url to http://example.com/?rest_route=/wp/v2/posts to make it work.
I'm trying to made made zoom preview image. It's almost work but I need to show it in the centre of my window by Y and move left right with cursor. Now my large image move in X and Y. How to fixed it? I understand that I have to change e.pageY but for what?
this.product_img_link = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
/* END CONFIG */
$("a.product_img_link").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='product_img_link'><img src='"+ this.rel +"' ' alt='Image preview' /> "+ c +"</p>");
$("#product_img_link")
.css("top",(e.pageY -100) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#product_img_link").remove();
});
$("a.product_img_link").mousemove(function(e){
$("#product_img_link")
.css("left",(e.pageX + yOffset) + "px");
});
};
$(document).ready(function(){
product_img_link();
});
And this is my template:
<script type="text/javascript" src="/modules/productimage/js/zoomi.js"></script>
<link media="all" type="text/css" rel="stylesheet" href="/modules/productimage/css/product_zoom.css">
{if isset($products)}
<!-- Products list -->
<ul id="product_list" class="clear">
{foreach from=$products item=product name=products}
<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">
<div class="left_block">
{if isset($comparator_max_item) && $comparator_max_item}
<p class="compare">
<input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} />
<label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
</p>
{/if}
</div>
<div class="center_block">
<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" rel="{$link->getImageLink($product.link_rewrite, $product.id_image, 'large_default')}">
<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="gallery thumbnail" /></a>
If you want to find the center "y" point for the window, using jQuery:
$(window).height() / 2
This will find the height of the window and divide by two to find the center.
You could replace "e.pageY" with this, however the image will still appear a bit off-center.
To fully center it, you will also want to adjust the image's "y" position up a bit so that the center point of the image is at the center point of the window. So, we can do something similar to the paragraph holding the image to find its center point, leading us to code that looks like this:
($(window).height() / 2) - ($('#product_img_link').height() / 2)
...making your full jQuery css statement look like this:
$("#product_img_link")
.css("top",( ($(window).height() / 2) - ($('#product_img_link').height() / 2) ) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
I have a conversations flow who is refresh with .load() of jQuery every 3 seconds.
This system work, but in each conversation I have an answer button who slide a form (textarea and submit button) with .toggle().
To display the flow, I use a while with PHP.
My issue is, when the is loading by .load(), and answer button is clicked, the form hide again and text contain too.
<div id="the_river_loading">
<?php
$sql_the_river = 'SELECT u.nickname, u.firstname, u.lastname, u.main_photo, u.locality,
id_conversation, id_messages, owner, participants, text, date
FROM users AS u
INNER JOIN the_river
ON u.nickname = owner
WHERE answer = 0
ORDER BY date DESC';
$result_the_river = mysqli_query($mysqli, $sql_the_river);
$count = 0;
while ($data_the_river = mysqli_fetch_assoc($result_the_river))
{
$count++;
echo '<div class="message_container_news">'; // Start block conversation
echo '<a href="/profile/' . $nickname . '" class="name_links" style="vertical-align: top; font-size: 16px;">
<img src="' . $main_photo . '" title="' . $name . '" class="members_actu_photo" />' . $name . '</a>
<span style="vertical-align: top">, ' . $locality . '</span><span style="float: right; font-size: 12px;">Posté le Octobre 25, 2012</span>
<p style="margin-top: 5px;">' . $data_the_river['text'] . '</p>
<div class="btnAnswer_nb">' . $count_answer . '</div> Answers
See conversation
<div class="btnAnswer_news" id="btnAnswer_news_id_' . $count . '">Reply</div>
<form method="post" id="display_form_id_' . $count . '" action="" style="display: none;">
<br />
<textarea name="answer_text"></textarea><br />
<input type="submit" name="answer_valid_id_' . $count . '" value="Post" />
</form>
</div>'; // End block conversation
}
?>
</div>
<script type="text/javascript">
$(".btnAnswer_news").live("click", function(){
var num_show = this.id.replace(/\D/g, "");
$("#display_form_id_" + num_show).toggle("fast");
});
var auto_refresh = setInterval(
function() {
$("#the_river_loading").load("/home" + " .message_container_news");
}, 3000
);
</script>
In pleasure of read you.
This is because if you load the content again into the container, the styles applied per js will get removed (because they were applied through style="" and this gets refreshed). You should move the Form and the Button to another Div, wich is not in the loading Div.
If I understand your problem correctly (you've not be very descriptive), you just want to not hide the form when clicking again, for that use show() instead of toggle() , so replace your following line:
$("#display_form_id_" + num_show).toggle("fast");
for this one:
$("#display_form_id_" + num_show).show("fast");
If you want to keep the text of the textarea, you can like so:
var auto_refresh = setInterval(
function() {
tx = $("#the_river_loading textarea[name='answer_text']").val();
$("#the_river_loading").load("/home" + " .message_container_news", function(){
$("#the_river_loading textarea[name='answer_text']").val(tx);
});
}, 3000
);
So I am using the jsplayer HTML5 player on my wordpress site, as well as some custom script to load in the next post and replace the old content once the video is finished:
$(document).ready(function(){
$(".video-js").livequery('ended', function(){
var sStr = "<?php echo get_permalink(get_adjacent_post(true,'',true)); ?>";
var adj_numb = "<?php
$adj = get_adjacent_post(true,'',true);
$numb = $adj->ID;
echo $numb
?>";
var cur_numb = "<?php echo $post->ID; ?>";
$.post(sStr, function(data) {
var content = $( data ).find( '#post-' + adj_numb);
$( "#post-" + cur_numb ).html( content );
var vid = VideoJS.setup( "vid" );
vid.play();
});
});
});
This works great, for 2 videos. It loads in the next video and plays it, and one after that, but after the 3nd video plays it just stops. I figure this means I have to sort of "reset" all my variables and start again from the beginning of the script, and that it's not doing this because of $(document).ready(function(), as it's already all loaded at this point.
Is there a standard way to loop through this script again, and re-set all the variables after its run once?
Or am I approaching the whole issue incorrectly?
Thanks!
Rendered JS:
$(document).ready(function(){
$(".video-js").livequery('ended', function(){
var sStr = "http://www.theloniousfilms.com/zachmath/volkswagon/";
var adj_numb = "94";
var cur_numb = "96";
$.post(sStr, function(data) {
var content = $( data ).find( '#post-' + adj_numb);
$( "#post-" + cur_numb ).html( content );
var vid = VideoJS.setup( "vid" );
vid.play();
});
});
});
HTML:
<div class="post-96 post type-post status-publish format-standard hentry category-zachmath" id="post-96">
<h2 id="director">Director Name</h2>
<h2 id="post_title">Post-Name
<span id="post_name">
"Hot Tub"
</span>
<span id="home">HOME</span>
<div class="entry">
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody --><br />
<video id="vid" class="video-js" width="640" height="360" preload autoplay poster="http://www.site.com/wp-content/uploads/2011/03/poster.jpg"><br />
<source src="http://d29zgp48wvs9kv.cloudfront.net/orkin.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><br />
<source src="http://d29zgp48wvs9kv.cloudfront.net/orkin.ogv" type='video/ogg; codecs="theora, vorbis"' /><br />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. --><br />
<object class="vjs-flash-fallback" width="640" height="360" type="application/x-shockwave-flash"<br />
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"><param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /><param name="allowfullscreen" value="true" /><param name="flashvars" value='config={"playlist":["http://www.theloniousfilms.com/wp-content/uploads/2011/03/poster.jpg", {"url": "http://d29zgp48wvs9kv.cloudfront.net/orkin.m4v","autoPlay":true,"autoBuffering":true}]}' /><!-- Image Fallback. Typically the same as the poster image. --><br />
</object><br />
</video>
</div>
I ended up going with a different method, where I pulled all the posts URLs into a array, then iterated through each of them, going to the next item in an array once playback finished.
So I am using the jsplayer HTML5 player on my wordpress site, as well as some custom script to load in the next post and replace the old content once the video is finished:
$(document).ready(function(){
$(".video-js").bind('ended', function(){
var sStr = "<?php echo get_permalink(get_adjacent_post(true,'',true)); ?>";
var adj_numb = "<?php
$adj = get_adjacent_post(true,'',true);
$numb = $adj->ID;
echo $numb
?>";
var cur_numb = "<?php echo $post->ID; ?>";
$.post(sStr, function(data) {
var content = $( data ).find( '#post-' + adj_numb);
$( "#post-" + cur_numb ).html( content );
var vid = VideoJS.setup( "vid" );
vid.play();
});
});
});
This works great, for exactly one video. It loads in the next video and plays it, but after the 2nd video plays it just stops. I figure this means I have to sort of "reset" all my variables and start again from the beginning of the script, and that it's not doing this because of $(document).ready(function(), as it's already all loaded at this point.
Is there a standard way to loop through this script again, and re-set all the variables after its run once?
Thanks!
EDIT: Rendered JS:
$(document).ready(function(){
$(".video-js").live('ended', function(){
var sStr = "http://www.theloniousfilms.com/zachmath/volkswagon/";
var adj_numb = "94";
var cur_numb = "96";
$.post(sStr, function(data) {
var content = $( data ).find( '#post-' + adj_numb);
$( "#post-" + cur_numb ).html( content );
var vid = VideoJS.setup( "vid" );
vid.play();
});
});
});
HTML:
<div class="post-96 post type-post status-publish format-standard hentry category-zachmath" id="post-96">
<h2 id="director">Zach Math</h2>
<h2 id="post_title">Orkin -
<span id="post_name">
"Hot Tub"
</span>
<span id="home">HOME</span>
<div class="entry">
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody --><br />
<video id="vid" class="video-js" width="640" height="360" preload autoplay poster="http://www.theloniousfilms.com/wp-content/uploads/2011/03/poster.jpg"><br />
<source src="http://d29zgp48wvs9kv.cloudfront.net/orkin.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><br />
<source src="http://d29zgp48wvs9kv.cloudfront.net/orkin.ogv" type='video/ogg; codecs="theora, vorbis"' /><br />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. --><br />
<object class="vjs-flash-fallback" width="640" height="360" type="application/x-shockwave-flash"<br />
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"><param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /><param name="allowfullscreen" value="true" /><param name="flashvars" value='config={"playlist":["http://www.theloniousfilms.com/wp-content/uploads/2011/03/poster.jpg", {"url": "http://d29zgp48wvs9kv.cloudfront.net/orkin.m4v","autoPlay":true,"autoBuffering":true}]}' /><!-- Image Fallback. Typically the same as the poster image. --><br />
</object><br />
</video>
</div>
Looks like the HTML is being rewritten by
$( "#post-" + cur_numb ).html( content );
Change
$(".video-js").bind('ended', function(){
to
$(".video-js").live('ended', function(){
that should take care of it.
Also, change
$( "#post-" + cur_numb ).html( content );
with
$( "#post-" + cur_numb ).replaceWith( content );
i ended up just pulling all the post urls into an array, then iterated through each of them, moving to the next item in an array once the previous video finished playback.