Is it possible to animate a background color change with toggleClass?
Here is the page working currently. - this has been updated since first post
Is it possible to animate this? I have to use toggleClass instead of the JQuery UI extended animate because there are background-images in the original CSS and animate will change the background-color, but not remove the background-image. Plus, I want to toggle it, not change the background-color permanently.
Here is the current javascript:
function ToggleClass() {
$("#Section2").toggleClass("errorpanel");
$("#Secion2HeaderText").toggleClass("errortext");
}
Secondly, as you see, I have to change the CSS files twice. I can't understand why this class for the
.errorpanel{ color: #ffffff !important; background: red !important;}
does not endtend down to the tag. It will change the accordion header to white when it is not selected, but when it is selected, it leaves the background as red, but changes the color to the original shade of blue. I can override that and get it to stay white all the time by adding this class:
.errortext{color: #ffffff !important;}
Anyway, I would like to animate those both forward and back.
Edit:
I am thinking something like this:
function ToggleClass() {
var color = $("#Section2").css("background-color");
if (color == 'rgb(255, 0, 0)') {
$("#Section2").animate({ backgroundColor: "#507CD1" }, 2500);
$("#Section2").toggleClass("testerrorpanel");
}
else {
$("#Section2").toggleClass("testerrorpanel");
$("#Section2").animate({ backgroundColor: "red" }, 2500);
}
$("#Secion2HeaderText").toggleClass("errortext");
}
That looks to see if the background is red. If it is, it changes the background color back to the original value, with the background image (and the panel still changes to a lighter color when selected, so all original functionality is returned), it just doesn't animate back to blue. The only thing the toggle does now is remove the background image because that can't be animated. This page shows the current functionality.
You could try using delay
$("#Section2").animate({ backgroundColor: "red" }, 2500).delay(800).animate({ backgroundColor: "#507CD1" }, 2500);
Not 100% sure but I think this may work.
Related
My goal is to make all "accent" buttons (<button mat-raised-button color="accent">) in my theme to have a blue border, blue text and a white background. I was reading about the custom theme setting in angular-material.
What I could do is, set my "primary" and "accent" colors in a theme and set that to all the button elements. With this, all my primary buttons are solid blue and accent buttons are white.
$my-button-primary: mat-palette($my-blue, 500, 200, 800);
$my-button-accent: mat-palette($my-white, 500, 200, 800);
$my-button-theme: mat-light-theme(
$my-button-primary,
$my-button-accent
);
#include mat-button-theme($my-button-theme);
But, to set a blue border and a blue text, I need to manually write an SCSS style.
#mixin buttons-theme($theme) {
$accent: map-get($theme, accent);
.mat-raised-button.mat-accent,
.mat-stroked-button.mat-accent,
.mat-flat-button.mat-accent,
.mat-button.mat-accent {
background-color: white;
color: mat-color($accent);
border: solid 1px mat-color($accent);
}
}
Now, is there a way to include the button style while creating the theme? Or is there a better way to write the above code?
Quick question:
Is there a way to add class and/or ID of the elements in the path of TinyMCE status bar under content?
TinyMCE has no such capability built into its status bar. If you wanted to add that you could do so by modifying the code. I would note that with any type of longer ID or Class labels that status bar will get filled up quickly which is why it does not do so by default.
The Elements in the Statusbar have a bunch of classes from Tiny Editor, you can examine it in the browser (chrome or firefox) with f12.
From there, it is no problem to override the current styling with some code like
.mce-statusbar.mce-container {
position : relative;
height : 0;
margin-top : -20px;
opacity : 0.5;
background-color :#fff;
border : 1px solid #333;
}
Beside, you can manipulate the code, where content is written in the Statusbar. See Plugin Wordcount for example. They are using some code like this to update the statusbar and enter a class name:
if (statusbar) {
Delay.setEditorTimeout(editor, function () {
statusbar.insert({
type: 'label',
name: 'wordcount',
text: ['Words: {0}', getCount()],
classes: 'wordcount',
disabled: editor.settings.readonly
}, 0);
editor.on('setcontent beforeaddundo undo redo keyup', debouncedUpdate);
}, 0);
}
I would like to customize the tooltip in intro.js .(Change the background color of tooltip to blue) Is it possible to achieve in intro.js
overlayOpacity property Adjust the overlay opacity of backdrop created by intojs. The range is 0 to 1
Add overlayOpacity:0 in introJs options to completely remove the backdrop.
introJs().setOption("overlayOpacity", 0);
override .introjs-tooltip class to change background of tooltip.
.introjs-tooltip{
background-color:#0000FF;
}
All you need to do is adding a new CSS rule to override the background-color of .introjs-overlay:
.introjs-overlay {
background-color: blue;
}
Also you can add background gradient, opacity, whatever you want.
I'm trying to make a modal backdrop completely transparent (specifically for one modal) and I'm having a difficult time achieving this. From the docs it says I can apply a custom class with backdropClass. When I open my modal, I call:
backdropClass: 'transparent-backdrop'
But no matter what styling I put in this class (whether to achieve transparency or just change the backdrop color), the backdrop does not change. My CSS looks like this:
.transparent-backdrop {
opacity: 0;
}
I can modify the backdrop color using windowClass (and the 'in' class):
windowClass: 'my-window-class'
.my-window-class.in {
background-color: #000;
}
However, if I try to set the opacity in a similar way:
.my-window-class.in {
opacity: 0;
}
my backdrop is still present, but now my modal disappears. Can anyone tell me the correct way to modify the opacity of the backdrop?
This works for me:
.transparent-backdrop.in {
opacity: 0;
}
Here's a screenshot showing the transparent backdrop in Chrome
When I read the demo at https://material.angularjs.org/#/demo/material.components.input
app.config( function($mdThemingProvider){
// Configure a dark theme with primary foreground yellow
$mdThemingProvider.theme('docs-dark', 'default')
.primaryPalette('yellow')
.dark(); });
What's the meaning of .dark()?
What if I want to make the background color to blue, red or sth else?
As mentioned, it swaps the palette to use dark values. I am basing this on code in theming.js from the 0.10 release.
First, setting dark() on a theme changes the background values:
var DARK_FOREGROUND = {
name: 'dark',
'1': 'rgba(0,0,0,0.87)',
'2': 'rgba(0,0,0,0.54)',
'3': 'rgba(0,0,0,0.26)',
'4': 'rgba(0,0,0,0.12)'
};
This makes the most noticeable change by changing the background. You also get this shadow around some text elements:
var DARK_SHADOW = '1px 1px 0px rgba(0,0,0,0.4), -1px -1px 0px rgba(0,0,0,0.4)';
Default hues for 'primary', 'accent', 'warn', and 'background' are also changed if not specified in the theme definition. This will cause the application to look slightly differently if you do not explicitly set values in the theme definition. Light themes have a value of
var LIGHT_DEFAULT_HUES = {
'accent': {
'default': 'A200',
'hue-1': 'A100',
'hue-2': 'A400',
'hue-3': 'A700'
},
'background': {
'default': '50',
'hue-1': 'A100',
'hue-2': '100',
'hue-3': '300'
}
};
And dark themes have a value of:
var DARK_DEFAULT_HUES = {
'background': {
'default': 'A400',
'hue-1': '800',
'hue-2': '900',
'hue-3': 'A200'
}
};
If theme has no definition for 'primary', 'accent', 'warn', or 'background' the default for those entries will be:
var defaultDefaultHues = {
'default': '500',
'hue-1': '300',
'hue-2': '800',
'hue-3': 'A100'
};
If you are creating a custom palette, you can also specify contrast colours by setting:
'contrastDefaultColor': 'dark'
and defining some contrasting colours with 'contrastLightColors' and 'contrastStrongLightColors'.
I personally haven't really been able to make a good looking dark theme, and have also found the documentation a little bit lacking regarding dark themes. Another thing you could do is check out the palette definitions to help understand the mapping for contrasting colours.
I believe it darkens the background itself, not necessarily the highlight colors. Have you tried just applying it and seeing what happens?
Separately, are the other highlight colors appearing as you intend, or is this just the demo code?
If other theming isn't working, make sure you inserted the correct dependencies in the configuration for your app. You have to have
ngMaterial