Copy elements pseudo :hover styles using jQuery - javascript

I am using Twitter Bootstrap and the uploadify library.
I have got the button uploadify creates styled using buttonClass: 'btn btn-primary' and I resize the object (which does not take into account padding etc by itself) using:
var uploader = $('#document_upload_'+variant_id);
var button = $('.uploadify-button', uploader);
var swfobject = $('object', uploader);
swfobject.css({
height: button.outerHeight(),
width: button.outerWidth()
});
Which all works great, the only problem is that we lose the hover styles on the button.)
So, we need to style the button using it's hover styles when the object is hovered over.
I am aware that the below won't work:
swfobject.hover(
function(){button.mouseover();},
function(){button.mouseleave()}
);
But as this is being used in a general setting, where all the sites are using bootstrap, but they are styled differently (and I cannot modify the core bootstrap files) I cannot simply apply another class, that has the same as the hover pseudo classes.
So, is there a way in jQuery to copy an elements "hover styles"?

Is there a way in jQuery to copy an elements "hover styles"?
Not easily. You could listen to jQuery.hover() and use jQuery.css() to get the custom CSS, iterate over styles in document.styleSheets or you could try a library like jss:
jss('.button:hover').get()['color']
JSS JSFiddle: http://jsfiddle.net/7kEJ9/2/

Related

Trying to add styles using jQuery in dialog of UI5

I am trying to add styles to my dialog header of my ui5 application, but the effect is not applied.
Here is the code:
`
onValueHelpRequest : function(oEvent) {
var sInputValue = oEvent.getSource().getValue(),
oView = this.getView();
if (!this._pValueHelpDialog) {
this._pValueHelpDialog = sap.ui.xmlfragment(
"zpractice.fragment.ValueHelp", this);
this._pValueHelpDialog.addEventDelegate({
onAfterRendering : function(oEvent) {
$("#selectDialog-dialog-header-BarPH").css({
"background-color" : "white"
});
}
})
var oDialog = this._pValueHelpDialog;
this.oView.addDependent(oDialog);
oDialog.getBinding("items").filter(
[ new Filter("name", FilterOperator.Contains,
sInputValue) ]);
}
this._pValueHelpDialog.open(sInputValue);
},
`
Could anyone help me with this?
Thanks in advance!
I tried to change the background of the header of the dialog box into white using jQuery.
The effect is nit getting apllied!
Instead of adding the background style manually in the controller you should style the dialog in the XML of the dialog. If there's no UI5 element (in the linked docs it's the sap.m.Button in your case it's the header) which you could style using a class attribute and corresponding css selectors in your stylesheet you could either use the dialog itself and the programmatic approach (see last section of previous link) or override the UI5 provided style classes. This approach is however not recommended as it is not upgrade-safe.
In general I would highly discourage using jQuery to manipulate your UI5 applications as there's almost always a better supported and less intrusive way to achieve the desired outcome.
Also as mentioned in the linked doc the inline stylesheet should not be used and an external stylesheet (in your project) should be used instead. An example for this can be found here: https://ui5.sap.com/#/topic/723f4b2334e344c08269159797f6f796.html
$("#selectDialog-dialog-header-BarPH").css("background-color", "white");

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.

Changing CSS of something using DOM

I am actually trying to develop a Firefox Plugin. And I need to Dynamically Change The CSS of the Icon.
How do I do that for this CSS
#sample-button {list-style-image: url("chrome://sample /skin/sample24.png");}
toolbar[iconsize="small"] #sample-button {list-style-image: url("chrome://sample/skin/sample16.png");}
I want to change the CSS of toolbar[iconsize="small"] #sample button.
I can change the css of sample button by simply doing
document.getElementById("sample-button").style.listStyleImage = url('chrome://sample/skin/sample_change24.png')
But I don't knw how to do it for the second part that is in square brackets [].
Waiting for The Answer,
Thanks
You can use querySelector:
document.querySelector('[iconsize="small"] #sample-button').style.listStyleImage = '...';

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;
}

CKEditor plugin to set classes

What I want to do is something similar to the native foreground / background colors dialog. The difference is, it will have buttons with colors directly in a toolbar. So one plugin has to have multiple buttons, with different styles (colors). The other problem is, that this native plugin sets CSS color and background-color properties. I need to use classes instead, like this:
text <span class="fg red">colored text</span> text
and
text <span class="bg blue">colored background</span> text
Clicking into colors have to change color of a span with fg class (and background colors - bg class)
How can I achieve this?
First of all you have to add your own buttons. Check source of any plugin that does this - e.g. basicstyles/plugin.js. You've got to create command for each button and then register all buttons. Simple.
Then I propose to use our styles implementation. It allows to apply/remove defined style from the given selection/range. In the style definition you can specify that it will apply span element with given classes. Check this style definition.
And the last step - join these things together. Command associated with button should apply/remove this style. There's ready to use one - check CKEDITOR.styleCommand usage here.
Everything you need is in basicstyles plugin, so just refer there.
Pozdrawiam :)
If you're flexible about the interface, you could just add your styles to the "Styles" selector.
It would be less work than creating your own plugin. Especially if you're using CKEditor 3.6 or later where you could use the new Stylesheet Parser Plugin.
You're welcome to use the plugin from the answer where you asked me to look at this question.
It's based on the "basicstyles" plugin. If you look at the comments I included, you'll see that you can use it to add multiple buttons and multiple styles.
// This "addButtonCommand" function isn't needed, but
// would be useful if you want to add multiple buttons
You would have multiple calls to the addButtonCommand method.
addButtonCommand( 'Fg_red' , 'Label' , 'fg_red' , config.coreStyles_fg_red );
addButtonCommand( 'Bg_blue' , 'Label' , 'bg_blue' , config.coreStyles_bg_blue );
The last line of code after the plugin code is what you add to your configuration. You can use any attributes that you like:
CKEDITOR.config.coreStyles_fg_red = { element : 'span', attributes : { 'class': 'fg red' } };
CKEDITOR.config.coreStyles_bg_blue = { element : 'span', attributes : { 'class': 'bg blue' } };
You could also create a plugin based on the "colorbutton" plugin. It creates the native foreground / background colors dialog.

Categories

Resources