Develop Reference

How to add ChargeBee link to HTML element with JavaScript?

I'm using Charge Bee Payment Gateaway on my website (who don't know what it is, it's a payment gateaway created from their website, I just insert the link into my website and the "Plan" can be bought from my website). Now I'm using Supsystic Pricing Tables Plugin and at the bottom I have a button which should lead to payment, but the plugin doesnt allow me to add HTML element inside the button so I can actually add it, and I think my only option is to somehow append the classes to already existing classes with javascript or jQuery.
This is the button from plugin:
<a class="ptsEditArea ptsInputShell dt-sc-button charge-bee" style="color: #fff !important;">GET STARTED</a>
And this are the data-cb-types that I need to append to this button code so it can open ChargeBee transcation:
data-cb-type="checkout" data-cb-plan-id="Pet_sitter_three_monthly"
Now is there any way I can add this classes to the <a> link I shared above.
Note that on the plugin page I can add classes to the button but I can't add data-cb-type and data-cb-plan.
If anyone can help I would be much appricated. Best wishes!

You can use Element.setAttribute() to achieve this in JS.
var e = document.getElementsByClassName('charge-bee');
e.setAttribute('data-cb-type', 'checkout');
e.setAttribute('data-cb-plan-id', 'Pet_sitter_three_monthly');
Doing so would add data-cb-type="checkout" data-cb-plan-id="Pet_sitter_three_monthly" to .charge-bee.
CodePen Example

How to put button in SAPUI5 quickview?

I have a sapui5 QuickView, which looks something like this:
<QuickView id="quickView">
<QuickViewPage pageId="PageId123">
<QuickViewGroup>
<QuickViewGroupElement label="Material" value="{Material}" type="{sap.m.QuickViewGroupElementType.text}"></QuickViewGroupElement>
</QuickViewGroup>
</QuickViewPage>
</QuickView>
Now, I want to add a button in bottom of Quickview. Is it possible? I tried adding
<Button icon="sap-icon://action"> </<Button>
But this does not work somehow. Is there any way I can add button? Thanks in advance.

It's not possible.
According to Fiori Design Guidelines
The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.
(...)
Do not use the quick view if:
You want to provide information in a way other than displaying it in groups.
Basically this can be understood checking the Type of the following aggregations:
pages from class sap.m.QuickView
groups from class sap.m.QuickViewPage
elements from class sap.m.QuickViewGroup
Finally, class sap.m.QuickViewGroupElement is not a container that allows you to add controls (like a Button) inside it.
So, you should use a Popover like in this sample from the documentation

Use a View. Put a button first and then add a QuickView as fragment. There is an example in the UI5 Demo Kit.
https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.QuickViewCard/sample/sap.m.sample.QuickViewCard

How to add a class to a specific stylesheet?

I want to use CSSStyleSheet.insertRule() to insert a new class inside a specific stylesheet. That stylesheet has the id "customStylesheet" for example.
This page says "A specific style sheet can also be accessed from its owner object (Node or CSSImportRule), if any.". However I can't figure out how to access that specific stylesheet.

It is fairly straight forward.
var sheet = document.getElementById('customStylesheet').sheet;
sheet.insertRule('.someclass {display: none;}'); // was missing a ' here
Here is a fiddle showing it working. I have updated the fiddle to show it working on a style tag in the head also.

This can be done with no jQuery. Say that you wished to set everything with the class purpleText to color: purple. First, you would get the stylesheet using document.styleSheets[_index_].ownerNode.sheet. Next, use the insertRule() method. The parameter is just a string holding the CSS code, as in ".purpleText{color: purple}". So, for the first stylesheet, the whole command would be document.styleSheets[0].ownerNode.sheet.insertRule(".purpleText{color: purple}");

To get a styleSheet by ID, use this:
document.getElementById('stylesheet').sheet;

Add inline styling to link in CK Editor 4

I would like to add a inline styling color to a link when it is created by the user in CK editor. Is this possible?
Regards, Andreas

Yes ..
Create a separate style in new css file and then assign path in ContentCSS.
info : http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss

ckeditor default style or class for the textarea

Does anyone know how i can make my textarea in a ckeditor object, use a class or custom style so i can show to the user something similar to what is getting rendered in the site?
Thanx
So i'm using bodyClass: 'class' in the config object, i use firebug and see the iframe body has my class applied, but it doesn't get the classes properties neither from my CSS, nor from contents.css (ckeditor)...
Well i was able to do it, adding an event to the object like this:
editor.on('instanceReady', function(){
$('#'+divname).find('iframe:first').contents().find('body').css({
'background-color':'#000000',
'font-family':'arial',
'font-size':'12pt',
'color':'#cdcdcd'
});
});
if anyone has the real solution, i think bodyClass should be it, i will gladly change my code.
Thanx

Simply edit the css file located at contents.css - edit the .cke_editable class to whatever suits your needs. Works 24/7