How To trigger play button of flow player - php

I have integrated flowplayer in my website.
As a next step, I want to trigger its video play function, so that when a user plays a video, she/he will simply press a play button, that will call a function.
Can anybody please help me achiving that?
I am trying to do this:
<script language="javascript">
$(document).ready(function(){
$( ".fp-play" ).change(function() {
alert( "Handler for .click() called." );
});
});
</script>
This is my HTML code:
<div class="artist_vidoe_player fl clear">
<div class="flowplayer" data-swf="<?php echo WEB_URL; ?>assets/styles/frontend/js/flowplayer.swf" data-ratio="0.4167">
<video>
<source type="video/flv" src="<?php echo WEB_URL; ?>assets/styles/uploads/videos/<?php echo $rowvid->v_uploadname; ?>">
</video>
</div>
<div style="float:left; margin-top:15px;">
<div class="clear"></div>
<h1><?php echo $rowvid->v_filename; ?></h1>
<p>258 Views</p>
<p><img src="<?php echo WEB_URL; ?>assets/styles/frontend/images/stars_img.png" width="90" height="16" alt="" /></p>
</div>
</div>
The above code dynamically generates my videos, but this is all not working for me anyway.

You can use .click() instead of .change() as well as using .trigger() to trigger click event:
$(document).ready(function(){
$( ".fp-play" ).click(function() {
alert( "Handler for .click() called." );
}).trigger('click');
});

Related

Jquery only works on one certain page. Shows no errors on the other ones, but does not work

The idea:
The script and php is placed in one php-file so it should be easy to insert into different pages.
What works:
The script works fine on the front page.
What does not work:
The script does not work on any other pages.
There are no errors appearing when the script does not work.
What I have tried:
Moving the script to the footer, header, start of body. Nothing worked.
Drop the script, and do the effects with CSS (did not work, it's complicated for CSS)
Script + php:
<script>
$(function() {
$('#lear_forside').hover(function() {
$('#bestill_forside').css('background-color', 'white');
$('#bestill_forside').css('color', 'black');
$('#lear_forside img').attr('src', '<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_h.png');
$('#bestill_forside img').attr('src', '<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_v_ny.png');
}, function() {
// on mouseout
$('#bestill_forside').css('background-color', 'black');
$('#bestill_forside').css('color', '#99cc66');
$('#lear_forside img').attr('src', '<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_h_ny.png');
$('#bestill_forside img').attr('src', '<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_v.png');
});
});
</script>
<div id="bestill_lear_forside" class="row">
<a href="#myModal" role="button" class="btn btn-custom" data-toggle="modal">
<div id="bestill_forside" class="col-sm-6 svart">
<div class="pull-right vertical-center half-content-wrapper" style="width: 100%;margin-right: 80px">
<img class="pull-left" src="<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_v.png">
<span class="pull-right bestill_forside_venstre">Bestill foredrag!</span>
</div>
</div>
</a>
<a href="http://sookvisuals.com/dev/innbokskontroll/laer-innbokskontroll/" target="_self">
<div id="lear_forside" class="col-sm-6 hvit">
<div class="pull-left vertical-center half-content-wrapper" style="width: 100%;margin-left: 80px">
<img class="pull-right" src="<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_h_ny.png">
<span class="bestill_forside_hoyre">Lær innbokskontroll!</span>
</div>
</div>
</a>
</div>
I guess that there are something missing, or somethings is overwriting the script. What should I do? Should I insert the script an other place?
I include the following in my header:
<?php wp_enqueue_script("jquery"); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
There is one error on page:-
$('#lear_forside img').attr('src', '<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_h.png');
Has been changed to
$('#lear_forside img').attr('src', "<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_h.png");
You have used Single quotes for bloginfo, there were four places, Try the Script below and re run the Code.
<script>
$(function() {
$('#lear_forside').hover(function() {
$('#bestill_forside').css('background-color', 'white');
$('#bestill_forside').css('color', 'black');
$('#lear_forside img').attr('src', "<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_h.png");
$('#bestill_forside img').attr('src', "<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_v_ny.png");
}, function() {
// on mouseout
$('#bestill_forside').css('background-color', 'black');
$('#bestill_forside').css('color', '#99cc66');
$('#lear_forside img').attr('src', "<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_h_ny.png");
$('#bestill_forside img').attr('src', "<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/pil_v.png");
});
});
</script>
The problem was fixed by replacing all the ID's with Classes.

php mysql + ajax + jquery + delete action

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);
});
});

Loading more than 5 SWF objects on one page

I want to load a few flash banners on my single page.
I'm using swfobject ( http://code.google.com/p/swfobject/ ). When i'm loading these ten banners in traditional way - just static way, often some of them (3-4) are not loaded, just empty field, when I refresh page - there are always some banners not loaded. Is there a way to load them all in a way, that they will work properly? : ) Maybe some asynchronous loading?
I'm using codeigniter and PHP.
I'm trying to load them in that way:
<?php foreach($category_res as $results){ ?>
<script type="text/javascript">
var id = <?php echo $results['id'];?>;
swfobject.registerObject("banner"+id, "9.0.115");
</script>
<div class="baner">
<div class="kreacja" style="padding-top:25px;" onclick="return false;">
<object id="banner<?php echo $results['id']; ?>" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" >
<object class="flash_banner" type="application/x-shockwave-flash" data="<?php echo '/prod_bann/kategorie/'.$results['category_name'].'/'.$results['file']; ?>"></object>
</object>
</div>
</div>
<?php } ?>
UPDATE
I've also tried dynamic SWf fiels embedding - but it's even worse. More banners are not loaded, here's code:
<script type="text/javascript">
var id = <?php echo $results['id'];?>;
var path = "<?php echo '/prod_bann/kategorie/'.$results['category_name'].'/'.$results['file']; ?>";
swfobject.embedSWF(path, "banner"+id, "300", "120", "9.0.0");
</script>
<div class="baner">
<div class="kreacja" style="padding-top:25px;" onclick="return false;">
<div id="banner<?php echo $results['id']; ?>" >
</div>
</div>
</div>
<?php } ?>

Code to toggle HTML-elements is called twice

// Here based on the class rply1 I am displaying replies
<div class="biz_gary_btn width80 pl5 fl rply1<?php echo $comm['comment_id'];?>">
<div class="fl pt5_ie pt1"><img src="<?php echo base_url();?>images/green_callot.png" alt="Green Callot"></div>
<div class="arial bold fnt11 c7b7b7b fl pl5 ">2 Replies </div>
</div>
<!--2 Replies-->
<!--Reply-->
<div class="biz_gary_btn width84 pl5 fl rply2<?php echo $comm['comment_id'];?>">
<div class="fl pt5_ie pt1 pl5"><img src="<?php echo base_url();?>images/light_blue_callot.png" alt="Blue Callot"></div>
<div class="arial bold fnt11 c7b7b7b fl pl7">Reply</div>
</div>
This is the script
<script type="text/javascript">
$(document).ready(function(){
$(".rply1<?php echo $comm['comment_id'];?>").click(function(){
alert("sdfsd");
//return true;
$("#2replies<?php echo $comm['comment_id'];?>").toggle();
$(".rply1<?php echo $comm['comment_id'];?>").toggleClass("advice_white_btn_active");
});
$(".rply2<?php echo $comm['comment_id'];?>").click(function(){
$("#reply<?php echo $comm['comment_id'];?>").toggle();
$(".rply2<?php echo $comm['comment_id'];?>").toggleClass("advice_white_btn_active");
});
});
</script>
But the function is being called twice. I can see the alert twice. After the first alert my #2replies div is visible. This working just fine in the HTML set-up.
This might not be ideal because without seeing your full code it is hard to tell if you are actually binding the event twice. But, instead you could ensure that a click event is unbound before binding it again:
<script type="text/javascript">
$(document).ready(function(){
$(".rply1<?php echo $comm['comment_id'];?>").unbind("click").bind("click", function(){
alert("sdfsd");
//return true;
$("#2replies<?php echo $comm['comment_id'];?>").toggle();
$(".rply1<?php echo $comm['comment_id'];?>").toggleClass("advice_white_btn_active");
});
$(".rply2<?php echo $comm['comment_id'];?>").unbind("click").bind("click", function(){
$("#reply<?php echo $comm['comment_id'];?>").toggle();
$(".rply2<?php echo $comm['comment_id'];?>").toggleClass("advice_white_btn_active");
});
});
</script>

Multiple instances of SlideToggle which toggle everything

I have the following script which appears multiple times on my page. I have a simple slide toggle attached to <div class="info"> and contolled by <a rel="viewinfo"> tag, but when I click on the anchor, all the divs with class info slide.
here is the HTML/PHP
<div class="couplistMeta">
<a class='view' rel="viewinfo" href="#">View Coupon</a>
<a class="print" href="#">Print</a>
</div>
<div class="info">
<p><?php echo $rec2[4]." -- Phone: ".$rec2['phone']; ?></p><p><?php echo $rec2['address']." -- ".$rec2['city'].", ".$rec2['state']." ".$rec2['zip']; ?></p>
</div>
Here is the Javascript
$(document).ready(function() {
$('div.info').hide();
$("a[rel='viewinfo']").click(function() {
$('div.info').slideToggle(400);
return false;
});
});
I tried using $(this).next('div.info').slideToggle(400); but this just broke the effect. So $('div.info') is too general, how can I be more specific with the JS?
Try this:
$(document).ready(function() {
$('div.info').hide();
$("a[rel='viewinfo']").click(function() {
$(this).parent().next('.info').slideToggle(400);
return false;
});
});
The issue being due to $('div.info') implicitly iterating over all div elements with the class info on the page.

Categories