I am writing below code to play audio using jwplayer
<?php
$extension="m4a";
$audiopath="http://myapp.com/player.php";
?>
<div id="jquery_jplayer_1" class="media" autoplay></div>
<div id="jp_container_1" class="player">
<div class="controls">
<div class="playback">
<i class="icon icon-play"></i>
<i class="icon icon-pause"></i>
</div>
</div>
<div class="controls jp-no-solution">
<div class="playback">
<i class="icon icon-warning-sign warning"></i>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", { "<?php echo $extension ?>": "<?php echo $audiopath ?>" });
$(this).jPlayer("play");
},
supplied: "<?php echo $extension ?>"
});
$("a").click(function(event) {
event.preventDefault();
});
});
</script>
The audio is autoplaying in desktop, but it is not autoplaying in iphone and ipad devices.
Can any one tell me how to fix this problem
There's no PHP in the code snippet. But my guess is your http://localhost/player.php line is the culprit - localhost would be the iPhone/iPad, which probably isn't running a webserver. That should be whatever the actual URL is to the player.php file.
Autostart is disabled by iOS in html5 natively.
Check out our html5 report about this - http://www.jwplayer.com/html5/autoloop/
Related
I have a custom PHP page in WordPress and need to display buttons connected to a map plugin's shortcode. Each button needs to change the map displayed on the page. The Ajax action is working, but only displays the map's ID, not the full shortcode.
I found a similar post here on StackOverflow doing something similar with Contact Form 7 shortcodes.
Javascript used:
<script type="text/javascript">
$(function () {
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
$('.button-map').click(function () {
$.ajax({
url: ajaxurl, //global variable provided by WP
type: 'GET',
data: {
'action': 'get_map_frame',
'map_id': $(this).data('id')
},
success: function (data) {
$('#map_area').html(data);
}
});
});
});
</script>
Ajax Call in functions.php:
add_action('wp_ajax_get_map_frame', 'get_map_frame');
add_action('wp_ajax_nopriv_get_map_frame', 'get_map_frame' );
function get_map_frame() {
if (isset($_GET['map_id'])) {
$map_id = (int) $_GET['map_id'];
echo do_shortcode('[cspm_main_map id="' . $map_id . '"]');
}
exit();
}
On-page code HTML:
<div class="w-col w-col-12">
<div class="column-29 w-col w-col-3">
<div><a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5425">Dining and Drinks</a>
</div>
</div>
<div class="column-30 w-col w-col-3">
<div>
<a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5695">Entertainment and Transportation</a>
</div>
</div>
<div class="column-30 w-col w-col-3">
<div>
<a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5697">Shopping</a>
</div>
</div>
<div class="column-30 w-col w-col-3">
<div>
<a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5698">Pets and Parks</a>
</div>
</div>
<div id="map_area"></div>
</div>
What I'm trying to achieve is each button pulls up its individual map associated with the map ID. Currently when the button is clicked it only returns the actual map ID on the page, but not the rest of the shortcode to display the map intended.
http://aopmap.villagegreenmarketingservices.com/test123/
i have 2 owl carousel in my page. my problem is one works perfectly but another one. i am using php codeigniter. how to resolve this..i have no idea.how to fix.
1. <script> $(document).ready(function(){ $('#owl-carousel1').owlCarousel({
loop:true,
items:3,
margin:9,
autoplay:true,
autoplayHoverPause:true,
nav:true,
autoplayTimeout:1000,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:3, autoplay:true,
nav:true,
loop:true, slideBy:3,
}
} }); }); </script>
<!----view page---->
<div class="row" style="background-color:#00263A">
<div class="container" style="margin-bottom:50px; margin-top:50px" >
<div class="owl-carousel" id="owl-carousel2" >
<?php
foreach($featuredJobs as $fjobs){ ?> <?php if($fjobs->attachment_url != '' ) {?>
<div class="item"><img src="<?php echo base_url(); ?>files/job_attachment/<?php echo $fjobs->attachment_url;?>"
width="250" height="250" class="responsive" />
<h5><?php echo $fjobs->job_name;?></h5>
<span><?php echo $fjobs->job_categories;?></span> <h6><strong><?php echo
'$'.$fjobs->budget_min.'- $'.$fjobs->budget_max;?></strong></h6>
<a href="<?php if(isset($loggedInUser->id) AND $loggedInUser->id != ''){echo site_url("users/login");}else {
echo site_url("job/createBid/".$fjobs->id);}?>"> <button
type="button" class="btn btn-primary pull-left" title=""><i
class="fa fa-gavel"></i>Bid For This Job</button></a>
</div>
<?php } } ?>
</div>
</div>
</div>
Alright, let me give you some insight. Always cross check your code, your Javascript vs your HTML.
Your first line of your Javascript is:
$(document).ready(function(){ $('#owl-carousel1').owlCarousel({
Yet your HTML is as followed
<div class="owl-carousel" id="owl-carousel2">
See your error already? You refer to owl-carousel2 in the HTML, while your Javascript seeks for instance #owl-carousel1. I leave to you then if you want to change your Javascript or your HTML.
I don't know what I am doing wrong, but the PHP does run (I can notice it with the POST data on Firebug), but isn't echoed.
Here's my JS file :
$('.table_item').click(function() {
var ticket_nbr = $(this).children('td').attr("class");
var dataString = 'ticket_nbr='+ ticket_nbr;
$.ajax({
url: 'display.php',
type: 'POST',
data: dataString,
success: function(data) {
console.log(data);
$("#DisplayTicket").modal('setting', 'transition', 'vertical flip').modal('show');
},
error: function(e) {
console.log(e)
}
});
});
and the called PHP file :
if($_POST)
{
$ticket_nbr=$_POST['ticket_nbr'];
?>
<div id="DisplayTicket" class="ui large modal transition active visible" style="margin-top: -110px;">
<i class="close icon"></i>
<div class="header">
<?php echo $ticket_nbr; ?>
</div>
</div>
<?php
}
And here's the output I get on Firebug :
<div id="DisplayTicket" class="ui large modal transition hidden" style="margin-top: -110px;">
<i class="close icon"></i>
<div class="header">
ticket_3 // The post data sent
</div>
<div class="content">
<p>Merci, <span class="test_display"></span>.
</div>
</div>
Any help or hint would be great !
Thanks.
You're returning HTML but never adding it to body
success: function(data) {
console.log(data);
$(data).appendTo('body'); // <----------------------
$("#DisplayTicket").modal('setting', 'transition', 'vertical flip').modal('show');
},
Also, ideally dataString = 'ticket_nbr='+ ticket_nbr should be dataString = {'ticket_nbr': ticket_nbr}
You have to show/append the below div in the body or div.
<div id="DisplayTicket" class="ui large modal transition active visible" style="margin-top: -110px;">
<i class="close icon"></i>
<div class="header">
<?php echo $ticket_nbr; ?>
</div>
</div>
then use the below code on success.
$('#DisplayTicket').addClass('active');
$('#DisplayTicket').css('visibility','visible');
i am creating a comment system using the php and mysql to store data and ajax with jquery all the system work well but when it comes to the delete action nothing it happen like this button do not have any action or relation with the system can anyone help me ???
comment_box.php
<li class="comment-holder" id="_<?php echo $comment->comment_id; ?>">
<div class="user-img">
<img src="<?php echo $user->profile_img; ?>" class="user-img-pic" />
</div>
<div class="comment-body">
<h3 class="username-field">
<?php echo $user->userName; ?>
</h3>
<div class="comment-text">
<?php echo $comment->comment; ?>
</div>
</div>
<div class="comment-buttons-holder">
<ul>
<li id="<?php echo $comment->comment_id; ?>"class="delete-btn">X</li>
</ul>
</div>
</li>
comment_delete.js(i am testing the delete button with firebug)
$(document).ready(function() {
$('.delete-btn').each(function() {
var btn = this;
$(btn).click(function(){
console.log("the id " + btn.id);
})
});
});
Try this
$(document).ready(function() {
$('.delete-btn').each(function(i,el) {
$(el).click(function(){
console.log("the id " + $(this).attr('id'));
})
});
});
<li id="<?php echo $comment->comment_id; ?>"class="delete-btn">X</li>
Since you are missing whitespace here between the id value and the class attribute, I think the browser just does not assign that class to the element.
Edit (for people who don’t know what “missing” means):
Your PHP code will generate HTML output of the form
<li id="123"class="delete-btn">X</li>
whereas it should of course be
<li id="123" class="delete-btn">X</li>
Please always validate your HTML code before asking questions.
Try
$(document).ready(function() {
$('.delete-btn').click(function() {
var comment_id = $(this).attr('id');
alert(comment_id);
});
});
Alright not sure what to do and i am honestly bit lost. What I am trying to do is upload a file to site via jQuery and push it to PHP which then deletes original image file and makes a a copy of it called header.jpg and pushes it where it needs to go. That part works with no problem. The problem here is how would I go about updating the div element if the header.jpg image is the background?
Note: no matter what the img will always be header.jpg but it needs to be re-cached by browser and outputed to user without page refresh
Here is how the header div is layed out
<div id="headerEmpty"></div>
<div id="pageName">
<h2><?php echo $pageName; ?></h2>
</div>
<?php if ( $_SESSION['signed_in'] == true ) { ?>
<div id="header" style="background-image:url(uploads/header.jpg);">
<span class="edit" fn="header">
<img src="uploads/icon/16/018.png" />
</span>
<div class="fn_menu" style="display:none;"></div>
</div>
<?php } else { ?>
<div id="header"></div>
<?php } ?>
and here is the jquery bit which displays loader and auto-starts the upload process
$('#photoimg').live('change', function() {
$("#preview").html('');
$("#preview").html('<img src="uploads/icon/16/ajax-loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm(
{
target: '#header',
success : function(data) {
$("#header").html(data).fadeIn('fast');
}
}).submit();
});
When you want to update the image, change it's source. You can append a time-stamp to the source so it will not come from the browser's cache. In PHP that would be something like:
<div id="headerEmpty"></div>
<div id="pageName">
<h2><?php echo $pageName; ?></h2>
</div>
<?php if ( $_SESSION['signed_in'] == true ) { ?>
<div id="header" style="background-image:url(uploads/header.jpg?_=<?php echo time(); ?>);">
<span class="edit" fn="header">
<img src="uploads/icon/16/018.png" />
</span>
<div class="fn_menu" style="display:none;"></div>
</div>
<?php } else { ?>
<div id="header"></div>
<?php } ?>
The time-stamp should just be ignored and the image will be downloaded each update.
Update
Ok, I see now that the background image is on the element you are replacing the HTML of. You could use jQuery to update the url() of the image:
success : function(data) {
var theDate = new Date();
$("#header").css('background-image', 'uploads/header.jpg?_=' + theDate.getTime()).html(data).fadeIn('fast');
}
You could also use PHP to output the #header element and use replaceWith() instead of .html():
success : function(data) {
$("#header").replaceWith(data).fadeIn('fast');
}
This assumes that your PHP output now looks like this:
<div id="header" style="background-image:url(uploads/header.jpg?_=1234567890);">
<span class="edit" fn="header">
<img src="uploads/icon/16/018.png" />
</span>
<div class="fn_menu" style="display:none;"></div>
</div>