Develop Reference

How to add custom CSS to paypal smart buttons

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.

JssorCaptionSlideo is Undefined

I am helping rebuild a website. They have a jssor Slider on the page.
On the old server and project it runs just fine. I have copy and pasted the contents of those files into a new project and server.
So now, the page runs, but there is a javascript runtime error that says
" '$JssorCaptionSlideo$' is undefined",
I didn't write any of this code, just simply trying to get it to run in a fresh solution environment.
<!-- #region Jssor Slider Begin -->
<!-- Generated by Jssor Slider Maker Online. -->
<!-- This demo works without jquery library. -->
<script type="text/javascript" src="js/jssor.slider.min.js"></script>
<!-- <script type="text/javascript" src="js/jssor.slider.debug.js">
</script> -->
<!-- use jssor.slider.debug.js instead for debug -->
<script type="text/javascript">
jssor_1_slider_init = function() {
var jssor_1_SlideoTransitions = [
...Bunch of machine code
];
var jssor_1_options = {
$AutoPlay: true,
$Idle: 5000, //how long pages is idle before changing pages.
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions,
$Breaks: [
[{
d: 5000,
b: 2500
}]
]
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
};
So I see where the script is trying to apply the class $JssorCaptionSlideo$. but it comes back undefined. jssor.slider.debug.js, the first <script> block points to, has the definition for the $JssorCaptionSlideo$. I am very new to web development and I was wondering if anyone could shed some light on this problem.
Is there a setting I need to enable in visual studio 2010?
Does the development server need to be configured a certain kind of way?
What Am I missing?
Just to clarify, I've literally never wrote or worked with javascript or html. So even the most basic solutions may be correct. I was kind of thrown into this project, and it may be something fundamental that I am missing.
oh and for good measure here is where I think the definition is
var $JssorCaptionSlideo$ = window.$JssorCaptionSlideo$ = function (j, c, i){ $JssorDebug$.$Execute(function () { if (!c.$Transitions) $JssorDebug$.$Error("'$CaptionSlideoOptions' option error, '$CaptionSlideoOptions.$Transitions' not specified."); else !$Jssor$.$IsArray(c.$Transitions) && $JssorDebug$.$Error("'$CaptionSlideoOptions' option error, '$CaptionSlideoOptions.$Transitions' is not an array.") });

Try this. Put the code after <script type="text/javascript">
$(document).ready(function() {
jssor_1_slider_init = function() {
var jssor_1_SlideoTransitions = [
...Bunch of machine code
];
var jssor_1_options = {
$AutoPlay: true,
$Idle: 5000, //how long pages is idle before changing pages.
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions,
$Breaks: [
[{
d: 5000,
b: 2500
}]
]
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
}
});

I really appreciate your help, but as I study the architecture of the website more closely, I realize the actual problem may be in several places. There is also a C# script associated with .aspx that helps in building the slideshow we have been trying fix. There is a strong possibility that key paths referenced in the C# script are no longer working on the new server space we are using to build the slideshow.

Detecting scroll event of Iframe called by AJAX reqest

i have a link in my main page that uses ajax to retrieve a PDF which is displayed in an Iframe, i am trying to detect scroll event of the PDF document and display a message or do something. i have tried different solutions from other solutions on stackoverflow and google search in general and couldn't find a good solution.
Main.php
<html>
<!--ajax request-->
<script type="text/javascript">
$(document).on('click','#nextpdf',function(event) {
event.preventDefault();
var reg = $(this).attr("href");
var str = reg.split('?')[1];
$.ajax({
type: "GET",
url: '../functions/pdfreader.php',
data: 'pdfxs='+str+'',
cache:false,
async: false,
success: function(data) {
// data is ur summary
$('.refresh').html(data);
return false;
}
});//end of ajax
});
</script>
<?php
while($obj = $c_content->fetch())
{
$title = $obj['lecture_title'];
echo '<article class="comment2">
//pdf link
<div class="comment2-body">
<div class="text" style="color:#999;padding-right:130px;">
<p><a href="../functions/pdfreader.php?'.$title.'""
style="color:#999" id="nextpdf">'.$title.'</a></p>
</div>
</div>
</article>
';
}
?>
</html>
pdfreader.php
//detect iframe pdf scroll
<script type="text/javascript">
$("myiframe").load(function () {
var iframe = $("myiframe").contents();
$(iframe).scroll(function () {
alert('scrolling...');
});
});
</script>
<?php
........
while($obj = $gettrend->fetch())
{
$coursefile = $obj['lecture_content'];
//this is my iframe
echo '<div class="mov_pdf_frame"><iframe id="myiframe"
src="https://localhost/einstower/e-learn/courses/pdf/'.$coursefile.'"
id="pdf_content"
width="700px" height="800px" type="application/pdf">
</iframe></div>';
}
?>
The major problem here is that nothing happens when i scroll the pdf document, how can i detect scrolling?
i found this fiddle that works but i cant view the javascript solution. http://fiddle.jshell.net/czw8pbvj/1/

First off, $("myiframe") isn't finding anything, so it attaches a load event to nothing. 1) change it to $("#myiframe") or $("iframe").
Here's a working fiddle (for iframe scroll detection)
UPDATE: to detect the scroll within PDF document, you can't use iframe. For that, you need embed or object tags AND a JS-enabled PDF document (hopefully its your PDFs..), who can send messages to your page's JS (see this answer).
Unfortunately, I couldn't find a scroll event in Adobe's Acrobat API Reference. It lists only these events:
Event type: Event names
App: Init
Batch: Exec
Bookmark: Mouse Up
Console: Exec
Doc: DidPrint, DidSave, Open, WillClose, WillPrint, WillSave
External: Exec
Field: Blur, Calculate, Focus, Format, Keystroke, Mouse Down, Mouse Enter, Mouse Exit, Mouse Up, Validate
Link: Mouse Up
Menu: Exec
Page: Open, Close
Screen: InView, OutView, Open, Close, Focus, Blur, Mouse Up, Mouse Down, Mouse Enter, Mouse Exit
So, basically, I think what you want just isn't possible as for now, at least with default rendering. With custom rendering (https://github.com/mozilla/pdf.js) it could be possible, though I'm not sure.
Apparently, it could be done with page scroll (see this issue). So back to iframes solution. :^D

Because this question is asked a long time ago, i think i need to help with my experience before.
The answer is: You can not
Why? because PDF is rendered by external apps, such as adobe pdf reader, foxit or else. And you can not attach event on them.
if you are using adobe reader, The only you can do is goto page, change zoom etc. Full example you can read here: https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf#page=8 (see. i bring you to page 8 directly instead to first page).
But, hei.. how if our client using another apps? we will confused more
The way to do this is only build your own pdf viewer.
we can using js library, like: http://www.bestjquery.com/2012/09/best-jquery-pdf-viewer-plugin-examples/
but here i only will show you to use pdf.js which created by mozilla.
main.php
<style>
.preview{
display:none;
width: 400px;
height: 400px;
border: 1px solid black;
}
</style>
file/test.pdf<br>
file/test1.pdf<br>
<div class="preview">
<iframe id="myiframe" frameborder="0" width="400px" height="400px" >not support iframe</iframe>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(document).on('click', '#nextpdf', function(e){
e.preventDefault();
$('#myiframe').attr('src', $(this).attr('href'));
$('.preview').show();
});
//handle iframe on scroll
$('#myiframe').on('load', function () {
$(this).contents().scroll(function () {
console.log('scrolled');
}).click(function(){
console.log('clicked');
});
});
});
</script>
pdfreader.php
<?php
$path = 'file/';
$pdf = isset($_GET['pdfxs']) ? $path . $_GET['pdfxs'] : '';
if(!file_exists($pdf) || !mime_content_type($pdf) =='application/pdf') die('file not found');
?>
<div id="pdf-container">
<div id="pdf-box"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<script>
$(function(){
//original script : https://gist.github.com/fcingolani/3300351
function renderPDF(url, canvasContainer, options) {
var options = options || { scale: 1 };
function renderPage(page) {
var viewport = page.getViewport(options.scale);
var canvas = $(document.createElement('canvas'));
var renderContext = {
canvasContext: canvas[0].getContext('2d'),
viewport: viewport
};
canvas.attr('width', viewport.width).attr('height', viewport.height);
canvasContainer.append(canvas);
page.render(renderContext);
}
function renderPages(pdfDoc) {
for(var num = 1; num <= pdfDoc.numPages; num++)
pdfDoc.getPage(num).then(renderPage);
}
PDFJS.disableWorker = true;
PDFJS.getDocument(url).then(renderPages);
}
renderPDF('<?=$pdf;?>', $('#pdf-box'));
});
</script>
Note: i put pdf on folder file/
in main.php you will notice that you can attach event scroll (and click too) to the pdf. because our pdf is not rendered by external apps now.
and the last part is, if you read pdfreader.php carefully, you will notice that you no need iframe anymore. You just need div, and then you can fully handle all event that do you want to your pdf : like scroll, click, change page, zoom, etc. why?? because your pdf is redered as canvas now (pdf.js render your pdf as HTML5 canvas). see full example of pdf.js

Please try this
iframe.on( "scroll", handler )

$("#frame").scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height())
alert('Bottom reached');
});
I found this in the JSFiddle that was referenced in the Fiddle you linked. The HTML field is empty. This CSS was in there, too.
body {
height: 1500px;
}
In the fiddle that you linked, the <iframe> has an ID of frame. I figured you can use the jQuery selector like $("#frame").

I think this will help you.
$("#myiframe").load(function () {
$(this).contents().scroll(function () {
//your code here
});
});

How to load image on demand

I have this simple image zoom jQuery. Here is a Demo example. It uses the elevateZoom jQuery.
The code behind is very simple:
<img id="zoom_05" src='small_image1.png' data-zoom-image="large_image1.jpg"/>
<script>
$vc("#zoom_05").elevateZoom({
zoomType : "inner",
cursor: "crosshair"
});
</script>
My question, is how can i make the large image load on demand, only when the mouse is over it. Please have a look at this demo example and let me know what i need to add in the code.

img element (id="zoom_05") above, would not load large_image1.jpg on its own.
Large image load happens because elevateZoom() looks into its data-zoom-image value and immediately loads it. One way around this behaviour is to defer elevateZoom() until user hover's over the small image for the first time. Quick example:
jQuery( function () {
var elevate_zoom_attached = false, $zoom_05 = $("#zoom_05") ;
$zoom_05.hover(
// hover IN
function () {
if ( ! elevate_zoom_attached ) {
$zoom_05.elevateZoom({
zoomType : "inner",
cursor : "crosshair"
});
elevate_zoom_attached = true ;
};
},
// hover OUT
function () {
if ( elevate_zoom_attached) { // no need for hover any more
$zoom_05.off("hover");
}
}
);
}) ;
Mind you this is an quick, on-top-of-my-head code, but should work ...
Also in this case elevateZoom() action might not be immediate while large image loading is going on.

I used this idea to initiate zoom on any number of images on the same page by adding a zoom class to the image. It works without any HOVER OUT
<img class="zoom" src="myimage.png" data-zoom-image="mybigimage.png"/>
$('.zoom').hover(
// hover IN
function () {
var currImg = $(this); //get the current image
if (!currImg.hasClass('zoomon')) { //if it hasn't been initialized
currImg.elevateZoom(); //initialize elevateZoom
currImg.addClass('zoomon'); //add the zoomon class to the img so it doesn't re-initialize
}
})

How to get logo out of twitter widget

I am using the Twitter widget from Twitter itself.
You can download it at http://twitter.com/about/resources/widgets/widget_profile
Now i get this code:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 180,
height: 320,
theme: {
shell: {
background: '#6e6e6e',
color: '#ffffff'
},
tweets: {
background: '#fefefe',
color: '#545454',
links: '#b05c5c'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('SchmidtGlobal').start();
</script>
When I embed this in my website I get my logo at the top left side.
Is there any possibility to get this out?
It's refereing to this script: http://widgets.twimg.com/j/2/widget.js
Any help would be appreciated.
Thanks

The easiest way would be to use CSS. Create a CSS document and link it to your web page. In the css paste:
.twtr-hd, .twtr-ft{display: none;}
This will remove the header and footer. Hope this helps!

In the full source the location of the logo is defined here:
var logo = isHttps ? 'https://twitter-widgets.s3.amazonaws.com/i/widget-logo.png' : 'http://widgets.twimg.com/i/widget-logo.png';
and embedded in HTML here:
<a target="_blank" href="http://twitter.com"><img alt="" src="' + logo + '"></a>
So you should just drop that part and you're done.
That said, I wonder if this isn't against the license agreement.
UPDATE: Above method indeed removes the Twitter logo, as the OP suspected, but it is not that difficult to remove the profile image. A look at the resulting widget (using 'Test Settings') shows me that the image's markup is
<a class="twtr-profile-img-anchor" href="http://twitter.com/***" target="_blank">
<img src="http://a1.twimg.com/profile_images/***/***.jpg" class="twtr-profile-img" alt="profile">
</a>
so it's just a matter of finding code that sets class twtr-profile-img-anchor in the source code. And look, it's there:
/**
* #public
* #param {string}
* sets the profile image source to display in the widget
* #return self
*/
setProfileImage: function(url) {
this._profileImage = url;
this.byClass('twtr-profile-img', 'img').src = isHttps ? url.replace(httpsImageRegex, httpsImageReplace) : url;
this.byClass('twtr-profile-img-anchor', 'a').href = 'http://twitter.com/' + this.username;
return this;
}
I highly suspect that removing the line that calls setProfileImage will suffice:
this.setProfileImage(resp[0].user.profile_image_url);
The only thing you'll notice is that the header will now be too far to the right. You'll have to override this CSS rule:
.twtr-widget-profile h3, .twtr-widget-profile h4 {
margin: 0 0 0 40px !important;
}

find twtr-hd in the script, add
style="display:none"
find twtr-ft in the script, add
style="display:none"
this should do it.
inspired by the Queen of Nerds' solution