Develop Reference

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 load multiple CKEditor toolbars on the same web page

I have two divs on the same page using CKEditor. I can get a toolbar to load for the first div, but not the second. I realize this is the case because I'm using an id for ckToolbar instead of a class. However, if I use a class, the toolbar doesn't show up.
Div 1
<div id="ckEditor">
<div id="ckToolbar"></div>
<div class="editor" data-bind="wysiwyg: txtBody, value:txtBody, valueUpdate:'keydown'"></div>
</div>
Div 2
<div id="ckEditor">
<div id="ckToolbar"></div>
<div class="editor" data-bind="wysiwyg: txtHelpText, value:txtHelpText, valueUpdate:'keydown'"></div>
</div>
Config.js
config.extraPlugins = 'sharedspace';
config.sharedSpaces = { top: 'ckToolbar' };
I am also using Knockout JS. I created a custom binding and a div instead of a textarea because I couldn't use the CKEDITOR replace function with my binding.

You can't have two elements on the same page with same id's. How is JavaScript supposed to recognize which one you have in mind? You should either use classes or different id's and adjust you knockout code to handle that.
Sorry for the general answer but there is simply no way around it. You can't have two elements with same id on a single page.
NOTE: CKEditor auto replaces elements with ckeditor class however if you are using knockout, I don't think this will me much of a use for you.

Copy CSS class A to class B

Here's some code
<button id="test" class="ui-state-hover" value="Button">
Context:
I am using JQuery UI CSS class ui-state-hover on an HTML button (I want that button to always looks like its hover). But that class keep on disappearing when I mouseout another JQuery UI element, I guess this is normal behavior tought,
<button id="test" class="" value="Button">
so I figured that in that particular JQuery element there must be a line of code similar to this:
$('.ui-state-hover').on('mouseout', function(){$(this).removeClass('ui-state-hover');})
Which remove the class on every element that has the class. So I tough I'd only have to have a class of my own with the same CSS as ui-state-hover but different name. So I could just give that element the copy and POUF! problem solve!
MyCssClass = ui-state-hover
<butotn id="test" class="MyCssClass" value="Button">
So need a way to copy content of one CSS class to another. I would rather have a pure CSS answer but if none exist JQuery or Javascript would do.
I though using something like this but it just seems silly I it doesn't work.
$('.MyCssClass').css($('.ui-state-hover').css());
Thanks!
EDIT:
Here is a bit more on what a tried to do.
I put a sh*t tone of different JQuery Theme in a directory and depending on users choice I switch the .css file and reload the page. Since every theme or almost every theme has the same classes they are interchangeable. So ui-state-hover might in the ui-darkness JQuery UI Theme have a black background color but in the ui-lightness JQuery UI Theme background might be gray.
This is why I need to dynamically copy some of those on page load into my own class and I can't just copy/paste the content of the .css file.
EDIT:
here is a fiddle illustrating my problem:
http://jsfiddle.net/yr89tg9g/
see how when you hover test2 it loose the ui-state-hover class? To stop this I tough about cloning the class but it seems it can't be done...

Maybe this?
$("#myButton").on("mouseout blur", function(){
$(this).addClass("ui-state-hover");
});

Probably that solves the Q:
A css is just a tag and HTML. It can have an ID:
<style type="text/css" id="sourcecss">
/* your definition here */
</style>
and thus:
jQuery("head").append('<style type="text/css" id="targetcss"></style)');
jQuery("#targetcss").html( jQuery("#sourcecss").html() );
works like a charm in one of our apps.

Modifying :hover styling for an element with jQuery/javascript

I am building a WYSIWYG page styling editor with jquery/javascript. I'm trying to provide a way to modify the :hover state of links so my users can change the color, size, weight, etc of links. I know how to apply styling to elements for their default state, but can't find any documentation on how to apply styling to an element :hover state.
Any help out there?
To currently apply anything I am doing the following:
$('#content a').css('color','#ffcc00');
I need to do something similar for a:hover. ie:
$('#content a:hover').css('color','#000');

If you want to make the change using javascript you can attach it to jQuery.hover().
Here's a full working example
$('a.link').hover(
function(){
$(this).css('color',$('input').val());
}
);
I built a WYSIWYG editor and I store the user defined settings in a db so instead of reloading the page after I save their change to the form I update the behavior with javascript.

you can use css like assert your element´s id is
"element1"
css :
#element1:hover {
background-color:pink;
}

Can I have a css div class mock a different css div class?

I just started using bootstrap for my site. I love the look and I want to make some changes to a ton of different blog post to include the bootstrap style. I don't want go through hundreds of post to change the div's class element. Can I do something like this:
<div class="important_note">
this is a old note that I want to use bootstrap styling on.
</div>
css:
<style>
.important_note{
mimick(.alert)
}
</style>
alert is a bootstrap styling.
I apologize if this is a simple question, but web dev isn't much my thing. I also couldn't find any similar questions. Thanks for your help!

with css you can do the following:
.important_note, .alert{
//styling
}
this will apply the same styling to important_note and alert classes

Without "upgrading" your CSS, if it's just about adding a class to each affected element, you can use a small script:
[].forEach.call(document.getElementsByClassName('important_note'), function(node) {
node.classList.add('alert');
});
jQuery equivalent:
$('.important_note').each(function() {
$(this).addClass('alert');
}