I have a weird error with jwplayer.
I configure it from a Angular JS Controller and load it with a simple preview button which loads the jwplayer with the requested conf.
As simple as this.
jwplayer(id).setup(config);
I have a skin and the skin colors (active, inactive, background) configured.
The issue happens when I click the preview button. Sometimes the player loads with the correct colors and sometimes the player loads with the default skin colors.
Every other jwplayer property get loaded correctly. If I change the skin model it will always load that model but will have the same issue with the colors.
I ran a jwplayer(attribute_id).getConfig() to check which conf has been loaded in both cases and they are exactly the same.
So how is it possible the jwplayer has the skin colors loaded but they don't work in some cases?
Skin related conf obtained from the js api:
skin: "seven"
skinColorActive: "#FFFFFF"
skinColorBackground: "#3B0239"
skinColorInactive: "#EE2A7B"
skinUrl: undefined
The player's version I am using is the 7.4.3
UPDATE
I figured out the issue. I have a function to random generate (number and characters) jwplayer id's in case I have a couple of jwplayers in the same page they have different ids.
Every time I generated a new jwplayer it would use a different id. So I noticed the colors weren't working when the jwplayer id was starting with a number.
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
followed by any number of letters, digits ([0-9]), hyphens ("-"),
underscores ("_"), colons (":"), and periods (".").
So for some reason although the JQuery selector was wrong, just the colors weren't working, the rest of the setup was working fine.
I assume the CSS couldn't work with a wrong id selector and that's why the colors wouldn't show up...
Skin changes are implemented in your CSS file or within <style></style> tags in the header. It looks like your config file is attempting to pull them into the JavaScript player setup. Here are guidelines for designing and implementing your own skin: https://developer.jwplayer.com/jw-player/docs/developer-guide/customization/css-skinning/skins_creating/
Additionally, I would ensure that you're referencing the correct playback states (idle, buffering, playing, paused) as defined in the JavaScript API when you call for the skin change: https://developer.jwplayer.com/jw-player/docs/developer-guide/api/javascript_api_reference/#playback
I figured out the issue. I have a function to random generate (number and characters) jwplayer ids in case I have a couple of jwplayers in the same page they have different ids.
Every time I generated a new jwplayer it would use a different id. So I noticed the colors werent working when the jwplayer id was starting with a number.
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
followed by any number of letters, digits ([0-9]), hyphens ("-"),
underscores ("_"), colons (":"), and periods (".").
So for some reason although the JQuery selector was wrong, just the colors werent working, the rest of the setup was working fine.
I assume the CSS couldnt work with a wrong id selector and that's why the colors wouldnt show up...
Related
I wanted to know, how I can use more than one light boxes from Lightbox2 on a one-pager.
It works but its all in one Gallery.
How can I divide that galleries to be separated in a Lightbox?
Please help.
I am using the following within the html:
Initial symbol deleted at beginning to get it to get it to display!
a href="photos_2021/photo1.jpg" data-lightbox="member" data-title="Text to display">
.... and again!
img src="photos_2021/photo1.jpg" alt="Text to display"/>
As an aside, Note that the thumbnail photo is the same as the actual photo to be displayed - saves on having to produce 2 versions.
The word "member" defines which group of photos it is part of so you can add "member2","member3" etc. for different groups of photos within the same page.
In my mobile app, we use the docusign API to create a pdf enveloppe in a mobile app and change its content to match our customers expectations.
There are text components of the pdf that I'm supposed to be able to change, like DocuSign_SignerPlacedCompleteConfirm. Problem is, when changing the value, nothing appears on the enveloppe, while the change does happen for other fields.
Our doc includes the Docusign-Signing-Resource-File pdf v2.0 and the original resource file from docusign (master downloaded on their site).
I've already observed a difference between our master resource file and what the doc says about what's inside.
So I guessed that the field key was not the right one and I tried other names for the key, like placing "_Mobile" at the end.
But it still doesn't work.
I really feel like the doc is missing something, and it bothers me as everything looks changeable and this item is supposed to be but I can't get it to change.
<data name="DocuSign_SignerPlacedCompleteConfirm">Bla bla bla</data>
doesn't change the field I want. But
<data name="DocuSign_HelpfulStart_Mobile">Click on START to start</data>
does change something, a text which is near the previous one.
The field I want to change is circled in black here :
Field to change
App is coded in React Native, opens a WebView in which you can see above page, generated by DocuSign.
I can't see any error log from docusign, and I just expect my text in the header to be set at 'Bla bla bla' for example. Instead, it's set at the default value.
I'm sorry Axel, but I'm afraid what you are asking is not possible.
Changing the UI of the actual signature tabs in a signed envelope is not supported at this time.
It is a major security concern to enable this type of change, as it would potentially allow someone to make it look like someone else signed their envelope.
I am building an Angular test preparation app (with Laravel 5.1 API). One of the requirements is to allow the user to print a certificate of achievement.
The client wants the person's name and credentials interpolated into the document (e.g., highlighted below). Here is a snapshot of the PDF template they sent:
The way I'm handling PDF viewing is simply by storing the file on S3 and giving them a link to that file.
Interpolating information into a PDF doc doesn't seem trivial and I haven't found much information on programmatically allowing this, but there are tools like DocHub, that allow you do edit while viewing the PDF.
I'm interested in learning:
is doing this programmatically trivial?
are there 3rd party tools I'm unaware of?
would I even be able to send this information along to the S3 link to interpolate in the first place?
Using PDF as a format for editing is usually a bad choice. If you have a form with fixed fields, then it's easy. Create a PDF template with an interactive form. In this form, based on AcroForm technology, you'll define fields with fixed coordinates, and a fixed size. You can then add content to these fields.
One major disadvantage with this approach is the lack of flexibility. Did you notice that I used the word "fixed" three times in the previous paragraph? If text doesn't fit the predefined field, you're out of luck. If the field is overdimensioned, you'll end up with plenty of white space. This approach is great if you can predict what the data will be like. A typical use case is a ticket or a voucher. For instance: the empty form is a really nice page, with only a couple of fields where an automated system can put a name, a date, a time, and a seat number.
This isn't the best approach for the example you show in your screen shot. The position of every line of text, every word, every character is known in advance. If you want to replace a short word with a long word (or vice-versa), then all those positions (of each line, of the complete page, possibly of the complete document) need to be recalculated. That's madness. Only people with very poor design skills come up with such an idea.
A better idea, is to store the template as HTML. See for instance chapter 5 of iText's pdfHTML tutorial, where we have this snippet of HTML:
<html>
<head>
<title>Invitation to SXSW 2018</title>
</head>
<body>
<u><b>Re: Invitation</b></u>
<br>
<p>Dear <name>SXSW visitor</name>,
we hope you had a great SXSW film festival experience last year.
And we would like to invite you to the next edition of SXSW Film
that takes place from March 9 until March 17, 2018.</p>
<p>Sincerely,<br>
The SXSW crew<br>
<date>August 4, 2017</date></p>
</body>
</html>
Actually, it's not really HTML, because the <name> tag and the <date> tag don't exist in HTML. All HTML processors (browsers as well as pdfHTML) ignore those tags and treat their content as if the tag was a <span>:
It doesn't make much sense to have such tags in the context of pure HTML, but it does make a lot of sense in the case of pdfHTML. With pdfHTMLL, you can configure custom tags, and have a result that looks like the PDFs shown below:
Look at the document for "John Doe" and compare it with the document for "Bruno Lowagie". The name "John Doe" is much shorter than my name, hence more words fit on that first line. The text flows nicely (we could also have chosen to justify the text on both sides). This "flow" is impossible to achieve with your approach, because you will never get a PDF template to reflow nicely.
OK, I get it, you probably say, but what about the practical aspects? You talk about a Java / .Net library, but I am working with Laravel and Angular.js. First, let me tell you that I don't think you'll find any good PDF tools for Laravel or Angular.js, because of the nature of PDF and those development environments (in my opinion, those technologies don't play well together). Regardless of my opinion, this shouldn't be much of a problem for you because you work in an Amazon environment. AWS supports Java, and the Java code needed to get pdfHTML working is minimal. Most of the code samples I wrote for the pdfHTML tutorial are shorter than 15 lines. So why not try Java and pdfHTML?
If you're already using Amazon services, why not use an amazon lambda function, in combination with iText7 (java), to generate the pdf on demand?
That way, you are guaranteed that the pdf is correct, and has nice layout every time.
Generating the pdf can either be done by:
converting HTML,
programmatically creating your entire document,
filling and flattening an XFA form.
I think for your use-case, either option 1 or 2 are the most sustainable.
In Drupal one can basically style the elements, like the search box, or the basic page etc. and then put some content in the site and the resulting page will be generated. But what if you want one specific site (e.g. the index page) to be different? E.g. have a image as a background, a different navigation styling etc.
What's the best paractice way of doing this?
Best practice is to have a different theme which you can switch to by using hook_custom_theme() where you check the current path. Also make sure that your theme to switch to is enabled:
/**
* Implements hook_custom_theme().
*/
function YOUR_MODULE_custom_theme() {
# check path with arg(0)
# return theme name to switch to
return 'different_theme_machine_name';
}
Alternatively you can also try ThemeKey doing this out of the box with an interface & allowing you the specify rules.
If you need to change only the content(body) section of your page, use Disply Suite. You can create unique look and feel layouts for your body section of each page.
If you trying to change the complete layout of one page (eg: Services), Create new Content Type 'Services'. Then create a template file for this content type, You must name this template call page--services.tpl.php. And also you can overwrite the index page layout by creating page--front.tpl.php template. Done!
What you are saying you want to change is all styling. And you know you can do a page to look drastically different with CSS... and you can do it that way depending on your chosen Drupal theme.
Now, with the Chrome Inspector (or FF inspector) look at the body tag, it probably has many classes which indicates in what page you are, what type of node (if it's a node) or if it's an admin section, or an anonymous user.
Using those specific classes you can style a frontpage, or a view, or a node, or anything, without installing more modules... with some limitations because you can't change rendered HTML this way.
Finally, don't get scared by using modules in Drupal, it's how Drupal works and it works pretty well. The thing is to install the best tools to increase your productivity, and Drupal have excellent options to change your theming and content like Display Suite (like #BaikHo suggested).
Hope that helps.
PD: Using the less module and with custom your theme you can have LESS css which is considerably faster than using only CSS, and because it's integrated with Drupal you can theme make everything even faster. Give it a try.
I have a custom list renderer that has a logo for a business in it. It has a label Logo_URLImage that has the placeholder image. In my code I get the data and assign HashMaps to the list model, h.put("Logo_URLImage",imageURL); where imageURL is a string that has the absolute URL to the image.
On Android it seems to always work, but most of the testing has been on iOS devices. What happens is that images are updated as you'd expect the first time or two that you run it. A run later on will show blank images (flash the place holder image and then blank) and once that happens images will never come back.
Any thoughts on what might be causing this?
Check that you defined the LogoName map entry. Check that it is unique per image?
Check that it doesn't include special characters that might cause an issue.