What I am trying to achieve is not actually get the payment button background to be black but rather be a custom color, so for instance lets say I want it pink with white letters (just as example), How can I achieve this?
<div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?client-id=#################&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script>
<script>
paypal.Buttons({
style: {
shape: 'pill',
color: 'black',
layout: 'vertical',
label: 'subscribe',
size: 'responsive',
},
createSubscription: function(data, actions) {
return actions.subscription.create({
'plan_id': 'P-##########'
});
},
onApprove: function(data, actions) {
alert(data.subscriptionID);
}
}).render('#paypal-button-container');
</script>
I have already tried the following (offcourse it didn't work):
<style>
.paypal-button.paypal-button-shape-pill {
background: pink!important;
color: white!important;
}
</style>
and because it is generated inside an iframe I also tried the following:
<script>
window.onload = function() {
let myiFrame = document.getElementById("someId");
let doc = myiFrame.contentDocument;
doc.body.innerHTML = doc.body.innerHTML + '<style>.paypal-button.paypal-button-shape-pill{background: pink!important;color: white!important;}</style>';
}
</script>
Sadly, It still is not achieved yet. Can someone help me out with this problem?
Edit:
Just want to mention I cannot just change the style color in the script of paypal.buttons because than the buttons don't show up anymore.
It cannot be done. PayPal controls the CSS of the button within its iframe, for its own standardized look and feel.
The options you have for changing the style of the button are documented here; it's expected and hoped that one of the style alternatives will be a reasonable fit for your site colorscheme.
Related
Hi i want to show/hide the legend of my linechart (chart.js) by clicking a button.
I tried this so far:
The following code changes the value of scatterChart.legend.options.display but after executing scatterChart.update() the value changes automatically to the initial value!
function showHideLegend() {
console.log(scatterChart.legend.options.display); // -> "inital-value" e.g.: true
if (scatterChart.legend.options.display == true) {
scatterChart.legend.options.display = false;
} else {
scatterChart.legend.options.display = true;
}
console.log(scatterChart.legend.options.display); // -> value successfully changed e.g.: false
scatterChart.update();
//Chart.defaults.global.legend.display = false; // <- does not have an effect
console.log(scatterChart.legend.options.display); // -> "inital-value" e.g.: true
}
function initMap() {
scatterChart = new Chart(document.getElementById("scatterChart"), {
type: 'line',
data: {
/*datasets: [
]
*/
},
showScale: false,
options: {
legend: {
position: 'right',
labels: {
fontSize: 15
}
}
}
});
HTML
<canvas id="scatterChart" style="width: 1920px; height: 1080px; background-image:url('image.jpg'); background-size: 100% 100%;"></canvas>
<div id="scatterLegend"> //howToPutLegendHere??// </div>
<input type="button" value="Show/Hide Legend" onclick="showHideLegend()">
It looks like you were just trying to update the wrong legend config in the chart.js instance object. Here is the correct way.
document.getElementById('hideLEgend').addEventListener('click', function() {
// toggle visibility of legend
myLine.options.legend.display = !myLine.options.legend.display;
myLine.update();
});
The thing that you were trying to update (e.g. chart.legend.options) is just the default legend configuration object. This gets merged with whatever options you define in your chart's options.legend config.
Here is a codepen example showing the legend show/hide behavior from a button click.
You could also opt to not use the built in legend and generate your legend as pure HTML/CSS anywhere on your page, and then use jQuery (or standard javascript) to show and hide. I won't provide an example for the showing/hiding (see jQuery's show/hide functions) but I will demonstrate how to generate a custom legend. First you need to use the options.legendCallback option to create a function that generates the custom legend.
options: {
legend: {
display: false,
position: 'bottom'
},
legendCallback: function(chart) {
var text = [];
text.push('<ul class="' + chart.id + '-legend">');
for (var i = 0; i < chart.data.datasets.length; i++) {
text.push('<li><div class="legendValue"><span style="background-color:' + chart.data.datasets[i].backgroundColor + '"> </span>');
if (chart.data.datasets[i].label) {
text.push('<span class="label">' + chart.data.datasets[i].label + '</span>');
}
text.push('</div></li><div class="clear"></div>');
}
text.push('</ul>');
return text.join('');
}
}
Then use the .generateLegend() prototype method to generate the template (which executes the legendCallback function defined above) and insert it into the DOM.
$('#legend').prepend(mybarChart.generateLegend());
Here is a codepen example that demonstrates the custom legend approach. You can modify the legendCallback function to use whatever HTML you want for the legend structure and then use standard CSS to style it. And finally, use javascript to show/hide it on the button click.
Did you try putting it in a div and hide/show it with CSS? it will be present but hidden and update() will make changes to the existing data so when u want it, just remove class "hidden".
to all Javascript experts this question might be just basics. I'm using jQuery and I am working on a tooltip created with jQuery.flot.
The following is a part of my javascript function within an html file and this is exactly what I need to have the tooltip div to be rendered correctly:
$('<div id="tooltip">' + contents + '</div>').css( {
Because the div is not shown I used Firebug to look for the reason and the line of code from above shows the special characters < and > encoded as html entities < and > as you can see here:
$('<div id="tooltip">' + contents + '</div>').css( {
I was searching several online sources for a solution and tried things like .replace(/lt;/g,'<') or .html().text() and it took me more than three hours but nothing was helpful.
I works fine on localhost.
Full Source Code:
<script language="javascript" type="text/javascript" src="../JavaScript/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../JavaScript/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../JavaScript/flot/jquery.flot.categories.js"></script>
<![CDATA[
<script type="text/javascript">
$(function () {
var data = [ ]]>{e1Array}<![CDATA[ ];
$.plot($("#placeholder1"), [ data ], {
series: {
bars: {
show: true,
barWidth: 1,
align: "center"
}
},
grid: {
hoverable: true,
clickable: true
},
xaxis: {
mode: "categories",
tickLength: 0
},
yaxis: {
min: 0,
max: 1,
ticks: 0
}
} );
});
var previousPoint = null;
$("#placeholder1").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip1").remove();
showTooltip(item.pageX, item.screenY, item.series.data[item.dataIndex][0] + ': ' + item.series.data[item.dataIndex][1] + ' Einträge');
}
} else {
$("#tooltip1").remove();
previousPoint = null;
}
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: 100,
left: x,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("#e1-container").fadeIn(0);
}
</script>
]]>
<div class="e1-container" id="e1-container">
<div id="placeholder1" class="e1"></div>
</div>
<![CDATA[
<script type="text/javascript">
This seems to be your problem, or at least the reason why FireBug does show html entities in your code. If you want to use cdata at all, you should place it inside of the <script> tags.
On why the tooltip is not shown at all, I can only guess, but for text content I'd recommend to use
$('<div id="tooltip"></div>').text(contents)
instead of using it as a html string.
You use appendTo(), which is fine.
You append the node only when the plothover flot event is fired.
This is correct, too.
So your code looks fine, you should probably look into this:
Jquery Flot "plothover" event not working
EDIT: You also can put the JS <script> after the HTML.
Do not directly add the contents inside the selector.
1) Create your DOM : var k = $('<div id="tooltip"></div>');
2) Fill your DOM :
// Add after
k.append(contents);
// Replace
k.html(contents);
// Replace and the content is just some text
k.text(contents);
3) Set the CSS : k.css({ ... })
4) Add the DOM to your page k.appendTo('#container');. You can also use $('#container').html(k); to replace the container contents and avoid to have a duplicate
In short :
var k = $('<div id="tooltip"></div>')
.append(contents)
.css({})
.appendTo('#container');
NOTE: The best way is to already create your tooltip div and just fill the elements to avoid to create two div with same ID, ... If you are afraid it perturbs the page, add display : none; to the CSS before to edit it, then change the classes when you edit it.
You will need to create div on 2 conditions :
The pages is created on load with variable number of components
You want to dynamically load CSS or JS.
Here is my code,
<div id="wistia_bqur1fvyag" class="wistia_embed" style="width:420px;height:234px;"> </div>
<script charset="ISO-8859-1" src="//fast.wistia.net/assets/external/E-v1.js"></script>
<script>
wistiaEmbed = Wistia.embed("bqur1fvyag", {
plugin: {
"socialbar-v1": {
buttons: "",
videoFoam: true
}
}
});
</script>
When i run this code, it shows black bar on left and right side.
I put videoFoam: true but, it didn't work.
Can anyone help me to remove black bar, still am i right? or can i use different api?
Thanks in advance.
I did it via the embed code directly, from the page linked below, using the two parameters to disable the social bar and enable videoFoam.
http://wistia.com/doc/iframe-embed-options
?videoFoam=true&plugin%5Bsocialbar-v1%5D%5Bon%5D=false
For what you have above, videoFoam is not part of the plugin but a standard parameter, so I'd try the following:
wistiaEmbed = Wistia.embed("bqur1fvyag", {
videoFoam: true,
plugin: {
"socialbar-v1": {
on: false
}
}
});
I've found a few posts on this but none that have helped me solve the situation. I'll try to explain the best I can.
My HighCharts example code works fine when I put it in an ASP.NET user control and simply browse to a page that contains my user control, as it is simply the same example that comes with the highcharts package. The following code is therefore in an asp.net web user control.
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/highcharts.js"></script>
<!-- 1a) Optional: add a theme file -->
<!--
<script type="text/javascript" src="/js/themes/gray.js"></script>
-->
<!-- 1b) Optional: the exporting module -->
<script type="text/javascript" src="/js/modules/exporting.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Under / Over 2.5 Goals'
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Under / Over 2.5 Goals',
data: [
['Under', 33.0],
['Over', 67.0]
]
}]
});
});
</script>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto">
</div>
When however I am loading this same user control into my page dynamically using AJAX the chart is not rendering and I am getting an empty white as per the inline styling. I am presuming that this is because the JS code is executing when the document is ready and this will not work when I am loading the control dynamically.
The following code resides in an external .js file
Service.GetChartData(OnGetChartDataSuccess, OnGetChartDataFailure);
function OnGetChartDataSuccess(result) {
$get('ChartDataContent').style.display = 'none';
Sys.UI.DomElement.removeCssClass($get('ChartDataContent'), 'loading');
$get('ChartDataContent').innerHTML = result;
$('#ChartDataContent').fadeIn(500);
}
function OnGetChartDataFailure(result) {
alert('Error loading control data');
}
Now at the point where the Ajax call to the service has succeeded I need to be able to get the chart to do its rendering etc to the container.
As it stands this is just using the example and there is no need for me to be using Ajax, but in practice there will be some long running calculations that need to take place before the chart is rendered.
If I need to add more information to this then please say and Ill do my best to explain further.
Thanks in advance
The simplest option you have is to use the Highcharts .Net library from codeplex that acts as a wrapper around the Highcharts js library, allowing you to create the charts using only C#.
However, if you so not want to go that way, you can always use a helper function to load the series into the chart as shown in the example here
I'm trying to create a simple function, but at runtime firebug says the function does not exist.
Here's the function code:
<script type="text/javascript">
function load_qtip(apply_qtip_to) {
$(apply_qtip_to).each(function(){
$(this).qtip(
{
content: {
// Set the text to an image HTML string with the correct src URL to the loading image you want to use
text: '<img class="throbber" src="/projects/qtip/images/throbber.gif" alt="Loading..." />',
url: $(this).attr('rel'), // Use the rel attribute of each element for the url to load
title: {
text: 'Nieuwsbladshop.be - ' + $(this).attr('tooltip'), // Give the tooltip a title using each elements text
//button: 'Sluiten' // Show a close link in the title
}
},
position: {
corner: {
target: 'bottomMiddle', // Position the tooltip above the link
tooltip: 'topMiddle'
},
adjust: {
screen: true // Keep the tooltip on-screen at all times
}
},
show: {
when: 'mouseover',
solo: true // Only show one tooltip at a time
},
hide: 'mouseout',
style: {
tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
border: {
width: 0,
radius: 4
},
name: 'light', // Use the default light style
width: 250 // Set the tooltip width
}
})
}
}
</script>
And I'm trying to call it here:
<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function()
{
load_qtip('#shopcarousel a[rel]');
// Use the each() method to gain access to each elements attributes
});
</script>
What am I doing wrong?
You are missing a ), closing the each call.
Change last line in the function declaration to
);}
For similar problems in the future, try pasting your code into http://www.jslint.com/