The following element works fine in Chrome, but not in firefox.
What I'm expecting to see is my theme colours, which is defined in a separate place.
Now in firefox, the component itself renders, and it even creates the .swatch div, with the correct size of 40x40, as specified in the shadow dom styles. Unfortunately the background-color and border css rules are never applied.
The console output in firefox and chrome is exactly as I would expect, with the correct colours, which tells me that the values does exist, but for some reason the data is not bound to the template in firefox?
<polymer-element name="color-sample" attributes="color border">
<template>
<style>
.swatch {
width: 40px;
height: 40px;
margin-right: 0.5em;
background-color: {{ swatchColor }};
border: 1px solid {{ borderColor }};
}
</style>
<div id="sample" layout horizontal center>
<div class="swatch"></div>
<content></content>
</div>
</template>
<script>
Polymer({
color: "white",
border: "lightGrey",
ready: function() {
this.swatchColor = CoreStyle.g.theme[this.color];
this.borderColor = CoreStyle.g.theme[this.border];
console.log(this.swatchColor);
console.log(this.borderColor);
}
});
</script>
</polymer-element>
I should also point out that if I use inline styles directly on the .swatch div, then the binding seems to work fine, but I'm specifically looking for a solution to bind to the css directly to keep the html clean.
Seems I found the problem right after I posted.
Data binding isn't fully supported in <style> under the shadow dom.[1]
[1] https://github.com/Polymer/polymer/issues/456
Related
For angular2 material project, the md-content is not available. There is no ETA when it's going to be available for use. Basically, I need a container with scrollable for overflow. What's the "material" way of doing this besides wrapper div and set overflow.
Angular2-drag-scroll is the library you are looking.
It is essentially a directive with overflow: scroll and other goodies
<style>
.demo-one {
height: 260px;
background-color: #FFFFFF;
}
.demo-one img {
height: 260px;
width: 260px;
margin-right: 10px;
}
</style>
<div drag-scroll drag-scroll-y-disabled="true" scrollbar-hidden="true" >
<img *ngFor="let image of imagelist" [src]="'assets/img/' + image" />
</div>
I'm applying "drag-scroll" to the div so everything in side of this div will be
draggable and has the attribute overflow: scroll etc.
Setting "drag-scroll-y-disabled" to true will disable y-axis scrolling/dragging.
Setting "scrollbar-hidden" to true will hide the scroll bar(ugly).
Github page: https://github.com/bfwg/angular2-drag-scroll
Demo site: https://bfwg.github.io/angular2-drag-scroll/
I have a png with blue lines, a transparent background and nothing else. Is there a way in css to make the lines white?
CSS is used to modify the appearance of HTML. It cannot really affect an image directly. You could use two images of the same size, and use JavaScript to switch between them.
Here's one possible way to do this:
HTML
<body>
...
<div>
<image id="blue-img" class="currentFrame" src="/img/blue.png" />
<image id="white-img" class="hiddenFrame" src="/img/white.png" />
</div>
...
</body>
CSS
.currentFrame {
display: block;
}
.hiddenFrame {
display: none;
}
At this point, you could use the following JavaScript to hide one image and show the other. Because the images are the same size, and appear together in the HTML DOM, it will look like the images occupy the same space.
function changeFrame() {
removeClass("blue-img", "currentFrame");
addClass("blue-img, "hiddenFrame");
removeClass("white-img", "hiddenFrame");
addClass("white-img", "currentFrame");
}
// Add the given class to the DOM element with the given id
function addClass(id, class) {
...
}
// Remove the given class from the DOM element with the given id
function removeClass(id, class) {
...
}
The implementation of addClass and removeClass() functions are left as an exercise for the reader, but it can be much easier if you use jQuery or some other DOM API library.
You could also use the HTML5 <canvas> element, if you're not concerned about backwards compatibility, or if you need a transition animation. That would also involve some JavaScript coding.
You have at least 2 ways to achieve this effect
Option 1: Use the image as a mask
Here only the transparent part of the image is used, as a mask. If you apply it on a white element, the parts not masked will be white
.base {
width: 300px;
height: 200px;
background-color: yellow;
}
.test {
width: 300px;
height: 200px;
background-color: white;
-webkit-mask-image: url(http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png);
-webkit-mask-size: contain;
}
<div class="base">
<div class="test"></div>
</div>
Option 2: use a filter to change the color. For instance, use brightness(100)
.base {
width: 300px;
height: 200px;
background-color: yellow;
}
.test {
width: 300px;
height: 200px;
background-image: url(http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png);
background-size: contain;
-webkit-filter: brightness(100);
}
<div class="base">
<div class="test"></div>
</div>
However, both options have a limited support
Why don't you use the Canvas in HTML5 to create the image on user interface :-
it will give you more clarity as the images are created using px.
it will give you liberty to change in what every color, size you want as they are created using javascript .
I am building a responsive web site and I am finding that Auto Image resize with broswer window resize using img max-width:100% works in Chrome but not IE and Firefox when any parent or ancestor has position:absolute;
(For information about this technique see
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
)
The following code can be used to demonstrate or reproduce this problem. you can also see this at http://sketchmotion.com/image-test2/. You will notice that resizing the browser window will resize the image in Chrome but not IE (I am running IE 11) . However, if you remove the following lines:
.mydiv{
position: absolute;
}
You will find that it now works in both Chrome AND IE.
This is not helpful since I I use position: absolute; on some of my parent divs on my site. And I need my site to work in IE and Firefox.
Please let me know if there is a work around for this problem so I can get the images to resize with the browser window on my site.
<html>
<head>
<!-- <link href="/cssh/ImageTest.css" rel="stylesheet" type="text/css"></link> -->
<style type="text/css">
.mydiv{
position: absolute;
}
img{
/*** Scaling Images with the Browser Window in CSS is pretty simple to implement for both images and video. ***/
/*** You can set the media element’s max-width to 100 percent, and the browser will make ***/
/*** the image shrink and expand depending on its container. ***/
/*** To maintain the right proportions use auto height ***/
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
</style>
</head>
<body>
<!-- -->
<div class="mydiv">
<div class="slides">
<div class="slide">
<img alt="" src="http://sketchmotion.com/ImagesSM/SM_Slider_1_SketchMotion_w_Sketch.jpg" />
</div>
</div>
</div>
</body>
</html>
Try this:
.mydiv {
position: absolute;
width: 100%;
}
I don't have an explanation exactly why, but this works. :)
I confirmed that using width: 100%; for parent and all ancestor divs makes it work in IE. However this is a bit of a pain because often that is not what you want to do. Chrome does not have that limitation and scales the image regardless which seems like a more sensible and consistent approach IMHO.
Thanks again Terry Clancy
For the responsive to work on IE. Do not include pictures in a <table>. Just use <div> and use CSS:
img {
max-width: 100%;
height: auto;
width: auto\9;
}
I am writing a simple HTML5 application for iPad and I am looking for a simple jquery solution for page transition. I know you would recommend jQueryMobile but problem with that it uses ajax to loads next page in current page and then kicks off transition so css of the page that I m trying to load is getting disturbed see my question. I also tried this and this plugin was the thing that I was looking for but problem with this is that it is not working with iPad and also page flickers a lot while transition so I dropped this option. Another option I found is jQTouch but as far as I know jQTouch only works for transition effects to div, not sure how to use it for page transition.
What I want is that on click of Transition link in Transition index.html should get displayed with transition effects without flickering and css disturbance of index.html page.
Could someone please recommend me some plugins using which I can achieve page transitions without disturbing CSS while transitions.
Hopefully this works for you... the below solution worked for me although jQuery is needed:
First right after the body tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your css:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
And finally add this javascript to your page (preferably at the end of your page, before closing body tag of course):
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide(); });
</script>
Then adjust the position of the loading image and the background color of the loading div via the style class.
This is it, works just fine. But of course you have to have an ajax-loader.gif somewhere.
Try AJAXLoad They have some great animated GIF's there.. :)
I have a content element which fades in if the user is above a certain area. The content element has a background image, which is in IE7/IE8 only a big black border instead of a gradient.
Animation code:
$(function(){
$('#TopPackets').mouseenter(function(){
jQuery('#TopPacketsContents').animate({
opacity: 1,
width: 'toggle'
}, 307, function() {
});
});
$('#TopPackets').mouseleave(function(){
jQuery('#TopPacketsContents').hide('slow');
});
});
Now the content element with the transparent background image:
<div id="TopPacketsContents" style="opacity: 1; display: none;">
<!-- content -->
</div>
CSS:
#TopPacketsContents {
background-image: url("../images/transparentBackground.png");
background-repeat: no-repeat;
height: 303px;
width: 411px;
}
I tried the high ratest answer of this thread, but I cannot set background: transparent because I have a background image!
I also tried to create a wrapper element like on this page.
HTML
<div id="TopPacketsContents">
<div class="BackgroundImageWrapper">
<!-- content -->
</div>
</div>
CSS
#TopPacketsContents {
height: 303px;
width: 411px;
}
.BackgroundImageWrapper {
background-image: url("../images/TopPacketsBackground.png");
background-repeat: no-repeat;
}
So what are my options? I could use a non transparent image only for IE7/IE8 with conditional comments (would look ugly). Should I use another animation? Should I use a hover effect instead of the animation (only for IE7/IE8)? Are there any other fixes out there?
See W3Schools on the opacity setting for CSS:
The CSS for this is: opacity=1.
IE8 and earlier: filter:alpha(opacity=100).
Seems I got this working. As I said I removed the opacity parameter:
<script type="text/javascript">
$(function(){
$('#TopPackets').mouseenter(function(){
jQuery('#TopPacketsContents').animate({
width: 'toggle'
}, 307, function() {
});
});
$('#TopPackets').mouseleave(function(){
jQuery('#TopPacketsContents').hide('slow');
});
});
</script>
New CSS with filter:
#TopPacketsContents {
width:411px;
height:303px;
background-image:url(../images/transparentBackground.png);
background-repeat: no-repeat;
/* IE hack */
background:none\9; /* Targets IE only */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/images/transparentBackground.png", sizingMethod="crop");
}
The following answer didn't work for me. I took my solution from this answer.