I am trying to bind jplayer on my site to mediaelement player(wordpress) that plays music on my site.
I done somethings already but I am missing something. In functions.php file I added
//Enqueue scripts
function register_scripts() {
wp_enqueue_script('jplayer',get_template_directory_uri().'/jplayer/jplayer.min.js',null,'1',false);
}
add_action('wp_enqueue_scripts','register_scripts');
then I added in header
<div id="WM" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<div class="jp-controls-holder" style="width:100px">
<div class="jp-controls" style="float:left;">
<button class="jp-play" role="button" tabindex="0" style="padding:0;">p</button>
<button class="jp-stop" role="button" tabindex="0" style="padding:0;">s</button>
</div>
<div class="jp-current-time" role="timer" aria-label="time"> </div>
</div>
</div>
</div
then I added in footer
<script>
jQuery(document).ready(function() {
jQuery("#WM").jPlayer({
ready: function(){
jQuery(this).jPlayer("setMedia", {
mp3: "https://example.com/mymp.mp3"
});
},
});
});
</script>
and now here is part that and I am struggling with. Jplayer needs to play along with mediaelement player on my site because jplayer contains file that has audio watermark on it so it will play over my music that is played over mediaelement(my theme supports it). So code that I added also in footer is:
<script>
// click on play button
jQuery('.home, .page-id-53, .page-id-29 ,.tax-download_tag, .tax-download_category, .search-results,.tax-download_tempo,.tax-download-artist').find('.mejs-button.mejs-playpause-button').on('click', function () {
jQuery(window).load(function() {
setTimeout( function(){
jQuery("#WM").jPlayer("volume", 1);
jQuery("#WM").jPlayer("play", 0);
}, 1000 );
});
jQuery(document).on('click', '.mejs-play > button', function() {
</script>
so for some reason jplayer is not playing that file when I click play button(mediaelement) I guess I am missing something, but dont know what, if anyone maybe knows what to do to make it play when I click on play button, but when I pause it and play it again it should play from start.
Thank you
Lets say this is start of code
<script>
// click on play button
jQuery('.home, .page-id-53, .page-id-29 ,.tax-download_tag, .tax-download_category, .search-results,.tax-download_tempo,.tax-download-artist').find('.mejs-button.mejs-playpause-button').on('click', function () {
now I need to add something to run jplayer play button
Related
I'm using PayPal JS SDK payment buttons where all you do is copy the code into your HTML site and the PayPal buttons appear to initiate a checkout.
This works for only one button on the page, but I have 3 subscriptions a user can choose from (daily, weekly, monthly)
If I copy the code into my daily div area it works correctly, but then if I copy the code into the weekly div it wont appear and only the daily div PayPal button appears. But if I remove the code from the daily div the button will appear under the weekly div.
It seems I can only use button code once?
I tried modifying the code by changing the id name and function names but still no luck.
Is there a way to have multiple PayPal on my page?
Here is the generated code from PayPal:
<div id="smart-button-container">
<div style="text-align: center;">
<div id="paypal-button-container"></div>
</div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=test¤cy=AUD" data-sdk-integration-source="button-factory"></script>
<script>
function initPayPalButton() {
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{"description":"daily","amount":{"currency_code":"AUD","value":1}}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
</script>
<br><br><br>
<p> gefwdsa</p>
<div id="smart-button-container">
<div style="text-align: center;">
<div id="paypal-button-container"></div>
</div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=sb¤cy=AUD" data-sdk-integration-source="button-factory"></script>
<script>
function initPayPalButton() {
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{"description":"weekly sub","amount":{"currency_code":"AUD","value":5}}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
</script>
This only makes the first button appear
The SDK script,
<script src="https://www.paypal.com/sdk/js?client-id=sb¤cy=AUD" data-sdk-integration-source="button-factory"></script>
Should only be loaded exactly once per page, above all the buttons.
Additionally, each button must render to a div with a unique HTML id, so this line:
<div id="paypal-button-container"></div>
And this line:
}).render('#paypal-button-container');
Both need some corresponding different/additional string suffix for each button, e.g. paypal-button-container-1 , -2 for the next buttons' etc.
Also client-id of test or sb is sandbox mode, you need a live client-id from the 'Live' section of an app in https://www.paypal.com/signin?intent=developer&returnUri=https%3A%2F%2Fdeveloper.paypal.com%2Fdeveloper%2Fapplications
I have this VueJS component that displays a star-shaped button
<template >
<div id="tenseFav">
<button>
<img :src="imgForFavButton">
</button>
</div>
</template>
The computed property imgForFavButton returns a different image depending on if the item is in the list of favorites or not.
computed: {
imgForFavButton() {
const isFav = this.favs.has(this.id);
return isFav ? starOn : starOff;
},
},
I want to add animation on hover, so the image is the one with the yellow star and maybe some transition effects. I am not sure if I have to do this on CSS or VueJS.
On VueJS, I have no event to control the hover natively so I have to use something like:
<template>
<div id="tenseFav">
<button #click="emisor">
<img
#mouseover="hover = true"
#mouseleave="hover = false"
:src="imgForFavButton">
</button>
</div>
</template>
and then in the computed property use an if:
computed: {
imgForFavButton() {
if (this.hover === true) {
return starOn;
}
const isFav = this.favs.has(this.id);
return isFav ? starOn : starOff;
},
},
This works but it looks a bit hacky.
Is there a better way in 2022 for this kind of thing?
I feel that I will face a lot of problems trying to add a transition effect to this.
tailwindcss and phoenix liveview.
My code look like this
<div x-data="{isExpaned: false}">
<button #click="isExpanded = !isExpaned">Parent menu</button>
<div x-show="ixExpanded">Sub menu</div>
</div>
And First loaded page, even though isExpanded value is false, it shows sub menu.
and refresh the page also shows submenu.
And I checked that x-data="{isExpanded: false}"
why is it happened?
This problem is not related to tailwindcss nor alpinejs
It relates to Phoenix liveview setup
I need to add this code to work with alpinejs and liveview together in app.js file
let liveSocket = new LiveSocket('/live', Socket, {
dom: {
onBeforeElUpdated(from, to) {
if (from.__x) {
window.Alpine.clone(from.__x, to)
}
}
},
params: {
_csrf_token: csrfToken
},
hooks: Hooks
})
There seem to be an issue with the last version of jQueryUI (1.11) when it comes to using several modal dialogs.
What I am trying to achieve is the following: I have two modal dialogs, the first one contains a button which should open the second dialog:
HTML
<div id="test1">
Test 1
<button id="open_test2">Open Test 2</button>
</div>
<div id="test2">
Test 2
</div>
JS
$(function() {
$('#test1').dialog({
autoOpen: true,
modal: true
});
$('#test2').dialog({
autoOpen: false,
modal: true,
position: {
my: "right top", at: "right top", of: window
}
});
$('#open_test2').click(function() {
$('#test2').dialog('open');
});
})
Once the second dialog is opened, I am still able to click on the first dialog !
Here is a link to a fiddle that shows what I am trying to achieve:
http://jsfiddle.net/JC4t5/1/
Thanks a lot in advance for your help !
This has been fixed with the jQuery UI 1.11.2 release.
I have a dashboard in Google Analytics.
I want to only capture a certain part of the dashboard using CasperJS.
No matter what I've tried it captures the entire page.
What I'm I doing wrong here?
This is the HTML hierarchy that I find when I inspect the Google Analytics dashboard:
<div id="ID-view">
<div class="_GAeH" id="ID-dashboard">
<div id="ID-layout">
<div class="_GARW ">
<div class="_GAoA">
<!-- more <div>s with the content -->
</div>
</div>
</div>
</div>
</div>
CasperJS code snippet:
var casper = require('casper').create();
casper.start('https://www.google.com/analytics/web/the/rest/of/the/url/', function() {
this.fill('form#gaia_loginform', { 'Email': 'user', 'Passwd':'pass' }, true);
});
casper.waitForSelector('.ID-row-4-0-0', function() {
casper.page.paperSize = {
height: '11in',
width: '8.5in',
orientation:'portrait',
border: '0.4in'
};
// NONE of these work the way I think they should
// this.captureSelector('ga.pdf','#ID-view');
// this.captureSelector('ga.pdf','#ID-dashboard');
// this.captureSelector('ga.pdf','#ID-layout');
this.captureSelector('ga.pdf','._GAoA');
// this.captureSelector('ga.pdf','._GARW'); // <-- this one fails, capture height is messed up
},
function() {
this.echo("Timeout reached");
});
casper.run();
Try this:
this.captureSelector('ga.pdf','div._GAoA', {quality: 100});
If you cant take the screenshot of the element _GAoA please share the output of your casperjs scrpit.
Good luck.