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.
Related
I'd be grateful if some kind person would glance over this PayPal SmartButton code?
I've put in the NO_SHIPPING and I'm not sure about all the brackets (){}[] and whether there should be double " or single ' inverted commas etc.
I'm OK with html, but this scripting mystifies me.
Thanks in anticipation, Steve
<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&e nablefunding=venmo¤cy=GBP" data-sdk-integration-source="button- factory"></script>
<script>
function initPayPalButton() {
paypal.Buttons({
style: {
shape: 'pill',
color: 'gold',
layout: 'vertical',
label: 'buynow',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{"description":"item for sale\nacceptM/accept43_BB1frT6.htm","amount":{"currency_code":"GBP","value":20}}],
application_context: {
shipping_preference: 'NO_SHIPPING'
}
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(orderData) {
// Full available details
console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
// Show a success message within this page, e.g.
const element = document.getElementById('paypal-button-container');
element.innerHTML = '';
element.innerHTML = '<h3>Thank you for your payment!</h3>';
//actions.redirect('https://www.website.com/');
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
</script>
Script SDK line is not correct, has extra spacing and a missing hyphen. You need:
<script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo¤cy=GBP" data-sdk-integration-source="button-factory"></script>
That's simply the code the button factory would have generated for you, and it works.
For future reference most HTML/JS problems can be troubleshooted in a browser's Developer Tools, on the Console and Network and (for HTML) Inspect tabs, reloading the page once the Network tab is open for example.
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 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
I got the following component:
var Tile = React.createClass({
render: function() {
return (
<div>
{ this.renderToolbar() }
{ this.renderBody() }
</div>
);
},
renderToolbar: function() {
return (
<div className="toolbar">
{ this.props.toolbar }
</div>
);
},
renderBody: function() {
return (
<div className="body">
{ this.renderHeader() }
{ this.renderContent() }
</div>
);
},
renderHeader: function() {
return (
<div className="header">
<button>Bar</button>
</div>
);
},
renderContent: function() {
return (
<div className="content">
{ this.props.children }
</div>
);
}
});
JS fiddle here: https://jsfiddle.net/v0h1omx8/1/ that shows the problem. Simply open it in Chrome and Firefox.
The component behaves as follows:
It can display a header
It can show a toolbar
It shows some content
The width of the content is dynamically adjusted depending on the width of the toolbar
So far so good. In chrome everything works fine. However, in Firefox I get into trouble when I nest the component, and also use it to render the toolbar. Then the component used for the toolbar will always be too narrow.
Do you guys have any idea how I can get firefox to show the toolbar always in the correct width (meaning just stretch the element as wide as it needs to be?)
Any help or hints on how to solve this in a different way are much appreciated.
I have a problem where my Google Maps is only showing top tiles (much like this issue PhoneGap + JQuery Mobile + Google Maps v3: map shows Top Left tiles?) but in iOS and with jQuery UI Map.
However this only occurs after I play around with the app for some time switching tabs (it works fine on a Desktop Browser, only fails on the Device App)
I've tried several solutions from other posts (as you can see from the code) but my problem is a bit different, as it doesn't happen at first
Here is my HTML
<div data-role="page" id="page3" data-url="page3" tabindex="0" style="padding-bottom:19px">
....
<div data-role="content" id="ct">
<div id="map_canvas" style="height:100%"></div>
</div>
....
</div>
And JS
$(document).bind('pagechange', function () {
if ($.mobile.activePage.attr('id') === 'page3') {
if (!mapInited) {
mapInited = true;
$('#map_canvas').gmap().bind('init', function () {
var bounds = new google.maps.LatLngBounds();
navigator.geolocation.getCurrentPosition(locSuccess, locError);
$.each(markers, function (i, marker) {
var latlong = new google.maps.LatLng(marker.latitude, marker.longitude);
bounds.extend(latlong);
$('#map_canvas').gmap('addMarker', {
'position': latlong,
'bounds': true,
'primaryColor': "#0000FF",
'icon': './img/train.png'
}).click(function () {
$('#map_canvas').gmap('openInfoWindow', {
'content': marker.content
}, this);
});
});
$('#map_canvas').css('height', getRealContentHeight());
$('#map_canvas').css('width', '100%');
google.maps.event.trigger($('#map_canvas'), "resize");
setTimeout(function () {
google.maps.event.trigger($('#map_canvas'), 'resize');
}, 500);
});
}
}
});
}
Thanks in advance for any thoughts
"Fixed" the issue with a very ugly work around
Basically I recreate the Map everytime the page is loaded, like this
if (!mapInited) mapInited = true;
else { $('#map_canvas').remove(); $('#ct').append('<div id="map_canvas" style="height:100%"></div>'); }
You trigger the resize-event for a jQuery-object, what will not have any effect, because you must trigger the event for the google.maps.Map-instance:
google.maps.event.trigger($('#map_canvas').gmap('get','map'),'resize');
You may also use the plugin-method triggerEvent to trigger the event:
$('#map_canvas').gmap().triggerEvent('resize');
If you are using jquery-ui-map, why are you using the native google maps api instead of the gmap functions?
Why not call the $('#map_canvas').gmap('refresh');