I am drawing an image inside panel and slider field using ExtJS 4. I want to change opacity of image whenever of value of slider field changes.
I am aware that opacity and filter:alpha(opacity=); rule of CSS can be applied to image which will change its opacity.
However I do not know how to apply this css rule to the image. Can anyone please guide me on this?
You can use Ext.dom.Element.setOpacity method:
Ext.fly('image-id').setOpacity(0.5); // this will make img with id 'image-id' become half-transparent
Here is live demo
Update
If you are using Ext.Img component you will have to do something like the following:
imgCmp.getEl().setOpacity(0.5);
Related
I have navbar
and I wrote the navbar in src/app.component.html
I am using router-link for the page to swap components
for every component I have a different background
if I am using background-image for a component it will not display in the whole page
only in the router-link that is under the navbar
what is the best method to do it?
I thought maybe I should an empty div and set it to display absolute and make the background-image width and height for fullscreen
Basic Solution:
Create an app.service
Create a BehaviourSubject in the service with the default bg image path as initial.
Subscribe to that BehaviorSubject value in the app.component and set the background-image path from this value, you can use the ngStyle directive for this.
ngOnInit of every single navigation component, fire its own bg image path via BehaviorSubject from the app.service.
Working stackblitz example
this is my result (i'm creating carousel):
For example i want to style the right image, Just the visible part not the whole part, How can i do that? If there is a JS way, What's that way?
I'm trying to animate the state of an element, by changing the svg background color.
To be more easy I try to interpolate an SCSS(Sass) variable #{$scss-variable} inside SVG.
Off course is not working, probabilly need some form of encoding before, so I'm looking for an scss function that can do this.
.span {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%
2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%
20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A#**#{$scss-variable}**%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M25
5.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%20
4.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c
3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");
}
<span>aas</span>
I would Export the SVG via Illustrator after expanding it.
Here's an example of how to do that.
Once you create the SVG, you can then add it into your HTML by actually including the SVG element directly in the HTML or render it with an image tag (I usually put it directly into HTML).
The SVG is made up of vector shapes. These shapes are called either <circle>, <line>, <square>, or <paths>.
To change the color of the path, all you need to do is target it with CSS and change the fill property of the element. If you want to change the outside lining of the element you edit the stroke and stroke-width attributes.
If you want to animate the color changing, you can do this using keyframe animations as shown here.
In my gwt-application i got a tree with a few images. These images can be copied by drag and drop to a panel. Now i want to make them resizable in this panel. when i test my css-code with a concrete image-path for "background-image", resize:both and background-size:cover works! My problem is, that i cannot set a concrete url to the css, becacuse the imagepath is dynamic.
when i delete background-image from css and set backgroundimage in my code, the surrounding container resizes, but the image not. Is it possible to set 'background-image' to the image that I choose during runtime? how can i solve that with css?
Thank you!!
You can set background image at any time in your code. For example:
myPanel.getElement().getStyle().setBackgroundImage("url(/myImage.jpg)");
To make it resizable, you need to apply the correct CSS to this panel. There are several CSS options for you to consider.
I just wrote a tinymce plugin, which has a drop down box. I can increase the size of the select box, by manipulating the CSS file of the advanced theme (the theme I am using). Is there any other way to do it, without changing the CSS? Say in the function of the javascript code that actually creates the select box?
Edit:
I did set the max_width property while creating the listbox, in the createListBox function. But it only changes the width of the elements in the dropdown, not the drop down itself :(
You can always change the css using javascript:
document.getElementById("ATTRIBUTE_ID").style.width = "1000px";
See this SOF link for more details: Change an element's class with JavaScript
You should have a closer look at the tinymce configuration option editor_css.
Using this setting you may configure a css file which will overwrite the default css for the toolbar stuff. This way you don't need to change anything of the core css.
tinymce dropdown generates internally and it's hard to do this in right way, but you always can access the needed element by CSS like:
div[id*='mceu_'].mce-container.mce-panel.mce-floatpanel.mce-menu.mce-animate.mce-fixed.mce-menu-align.mce-in div.mce-container-body.mce-stack-layout {
max-height: 200px !important;
}
for me it works for all dropdown select lists inside modal windows like link-plugin - reduce height of select list block.