I have a PNG image that has some transparency it is a 20px x 20px png image of an X. Given the shape of the X the hit state is odd since it gets interpreted as transparent. How do you make the whole area 20px x 20px clickable?
<s:Image id="closeOut" y="10" source="#Embed('/assets/png/X.png')" click="this.visible=false"/>
If you hover over where ever there isn't the X, left and right mostly it isn't clickable. Thoughts?
Add the image in a group of 20x20px and add the mouse event on the group and not on the image.
<s:Group y="10" width="20" height="20" click="this.visible=false">
//Your image here
</s:Group>
Hope this helps.
Related
I have a SVG which is wrapped in a link. By 'default' the SVG is a bordered circle with a triangle in the middle. When the SVG is hovered over, the shape goes solid, however the triangle in the middle should be transparent showing the background behind.
I've created this effect in the CodePen below but I'd like to know if there's a better way. Maybe just using the 1 path and changing how the path is filled on hover.
http://codepen.io/moy/pen/ygNeJL
Currently I have 3 path's in the SVG. A border, triangle and a circle with a hollowed out triangle. You can see the SVG code below.
<a href="#" title="TITLE TEXT." class="btn-next-panel">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="icon-play">
<path class="triangle" d="M19,35V15l16,10L19,35z"/>
<path class="border" d="M25,0C11.2,0,0,11.2,0,25c0,13.8,11.2,25,25,25c13.8,0,25-11.2,25-25C50,11.2,38.8,0,25,0z M25,48C12.3,48,2,37.7,2,25 C2,12.3,12.3,2,25,2c12.7,0,23,10.3,23,23C48,37.7,37.7,48,25,48z"/>
<path class="solid" d="M25,0C11.2,0,0,11.2,0,25s11.2,25,25,25s25-11.2,25-25S38.8,0,25,0z M19,35V15l16,10L19,35z" />
</svg>
</a>
I show/hide each path depending on if the icon is hovered over or not. Originally I thought I could just use the solid path and fill the middle instead of the outer shape but I couldn't figure out how to do that.
Any ideas, or should I just stick with what I have?
I am trying to align my text over a VBox correctly. The VBox I am using has a background image. Then the label overlaps the image. This is basically creating an button I want.
The issue is that the background image I am using has a shadow effect on the bottom. So when I use verticalAlign="middle" on the VBox it isn't actually centered.
I have tried changing the VBox and the Labels y value, top & bottom properties, and verticalCenter property. None of them seem to shift the label up or down in anyway. I am confused on why these would not shift the label.
Here is my current code w/o any y, top, bottom or verticalCenter set.
<mx:VBox height="70" width="175" backgroundImage="{buttonBackground}" verticalAlign="middle" horizontalAlign="center" backgroundSize="100%" buttonMode="true" useHandCursor="true" mouseChildren="false" click="{controller.goToPage('configPg')}">
<mx:Label text="Configure" buttonMode="true" useHandCursor="true" mouseChildren="false" fontSize="24" color="white"/>
</mx:VBox>
Any help would be greatly appreciated.
Thanks
I was able to solve this by adjusting the paddingBottom. Thanks drkstr1 for the answer.
All the properties you tried are irrelevant in a layout container. Use the font styles to position your text (EG. padding, verticalAlign, textAlign, etc.), Or use a Canvas with manual positioning if there is nothing else in the VBox. – drkstr1 Nov 14 at 17:25
I have a set up that looks something like:
<mx:Canvas>
<mx:Image id="mayimage"/>
</mx:Canvas>
<mx:Button id="watermark"/>
Where the button is the watermark that I want to keep on top of the image.
But after loading the actual image dynamically using addChild into "myimage", the skin of the button(which is embeded using #Embed) is covered up by the new image.
The weird thing is, it looks fine in Firefox, where the watermark button is still on the very top layer, it only gets covered up in Chrome. Also, the button is still clickable even though it's covered by the image, meaning only the skin of the button is covered...
Anyway of keeping the skin of the button on the very top layer?
If we consider this:
<mx:Canvas id="myCanvas">
<mx:Image id="mayimage"/>
</mx:Canvas>
<mx:Button id="watermark"/>
and you use myCanvas.addChild(myImage) the image will never overlap the watermark. Are you by any chance adding it to the upper level canvas?
Don't use addChild to display your image, just change the source property of myimage.
I have a page with background set to some img.
I have a div(say div_1) at top:50% which is a horizontal black bar of opacity 0.6.
Above that right at left 50% i want to show a div(with some content in it) with white background it is a round cornered box with opacity 0.6 say this as div_2.
I want div_2 to look like it is directly on page background with no effect from div_1.
may be it is a little confusing.
Thing is as div_2 is on div_1 and div_2 has transparent background, div_1 is effecting the look of div_2.(as i'm placing white transparent box over black box).
Why not remove div_1 then..? I can not as i want that black strip in the center of the page.
May be i need one of this
1)something like reverse of anti clip so that i can cut off the exact part of div_1 where div_2 will be present,so that div_2 looks right on page background with no interference from div_1.
2)take an extra div(div_3) and show the exact part of page background which is present underneath div_2 and put it over div_1 and then put div_2 so that it look as if it is on page background.
But I'm unable to get an idea on how to do at least one of those two solutions.
Any other solution is also happily accepted.
EDIT
Here is the code which I have so far,
[Code](http://jsfiddle.net/5sDce/)
Please check the look and feel of "required" tag which can not be seen in div_2, cause of div_1 behind it,
and i can not make div_1 to float next to div_2 as div_2 is of rounded corner.
Tried it myself and SOLVED IT, if someone needs it, please refer to my answer below.
Thanks in advance.
I assume you are searching for something similar to this.
Two commonly used operations in computer graphics are clipping and masking. Both operations hide visual portions of an element. If you have worked with SVG or HTML Canvas before, these operations are probably not new for you. Clipping defines the region of an element that is visible. Everything around this region does not get rendered - it gets "clipped". On masking, a mask image is composited with the element, affecting the alpha channel of this element. Portions of a masked element get fully or partially transparent. The new CSS Masking specification aims to bring these two operations to the HTML world.
Clipping in CSS 2.1
CSS 2.1 already specified the clip property. This property is limited to rectangular clipping with the rect() function taking four distance arguments for the top, right, bottom and left edges. The annoying part: The clip property applies to absolutely positioned elements exclusively. The property is just ignored on other elements.
CSS:
img {
position: absolute;
clip: rect(10px, 290px, 190px, 10px);
}
HTML:
<img src="image.jpg" width="568">
The clip property is limited to specific elements in SVG as well. This is one reason why the SVG specification added the clip-path property that is adapted by CSS Masking now.
The clip-path property
The clip-path property can be applied to all HTML elements, SVG graphic elements and SVG container elements. It either references a element or one of the basic shapes introduced with CSS Exclusions.
The element takes any graphical element from SVG and uses them as clipping region. Graphical elements in SVG are , , , , , and . allows combining multiple graphical elements as well. The union of all shapes is then used as clipping region. The following example demonstrates the use of :
CSS:
img {
clip-path: url(#clipping);
}
HTML:
<svg>
<defs>
<clipPath id="clipping">
<circle cx="284" cy="213" r="213" />
</clipPath>
</defs>
</svg>
<img src="image.jpg" width="568">
Basic shapes on the other hand do not require any SVG markup. They were added to clip-path to provide easy shorthand functions for simple clipping operations.
rectangle(, , , , , ) defines a
rectangle, similar to the rect() function of clip, and adds two
optional radius parameters for rounded rects.
circle(, , ) defines a simple circle with a center point
and a radius.
ellipse(, , , ) defines an ellipse with a center
point and a horizontal and a vertical radius.
polygon( , , ..., ) defines a polygon based
on the passed point list.
The CSS markup can look like the following example:
img {
clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
}
Clipping can be very useful for the presentation of visual content. The following examples apply different clipping operations to images.
Hope this helps.
EDIT
The updated Solution.
You have two solutions. One the existing scenario and the next one you want as reverse.
You have to use masking concept for the same.
The HTML:
<svg>
<defs>
<linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%">
<stop stop-color="black" offset="0"/>
<stop stop-color="white" offset="1"/>
</linearGradient>
<mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect y="0.3" width="1" height=".7" fill="url(#)" />
<circle cx=".5" cy=".5" r=".35" fill="white" />
</mask>
</defs>
</svg>
<img id="a" src="http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/masking/adobe/xclip1a.png.pagespeed.ic.zv42frgxly.jpg">
<svg>
<defs>
<linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%">
<stop stop-color="black" offset="0"/>
<stop stop-color="white" offset="1"/>
</linearGradient>
<mask id="masking1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect y="0.3" width="1" height=".7" fill="url(#gradient)" />
<circle cx=".5" cy=".5" r=".35" fill="black" />
</mask>
</defs>
</svg>
<img id="b" src="http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/masking/adobe/xclip1a.png.pagespeed.ic.zv42frgxly.jpg">
The CSS:
img#a {
mask: url(#masking);
}
img#b {
mask: url(#masking1);
}
Hope this Helps.
I think I understand what you what but I don't get why you have div_1 fully under div_2 and not just floating next to it if div_1 it's going to be hidden by div_2. Maybe it will be easier I you post what you have.
Here is what i did after experimenting with most of the things in css.
I made div_1 as parent to div_2 and gave a huge shadow to div_2 which can easily spread all over page, then i gave overflow as hidden to its parent div_1 and fixed its size to the width and height of strip which i need.
what it did is it just showed the shadow of the div_2 in the limited space in a fixed rectangle shape which looks as a black strip behind the div_2 as i need and this time there is no interference of any black strip behind div_2(remember its just a shadow!!).so i have the thing which i need which would work in almost all browsers.
And here is the code if some one needs it in future :)
[Code](http://jsfiddle.net/uP8UU/)
Working with Flex 4.6 spark forms, i encountered strange behaviour:
FormItem element ALWAYS has inner gap (padding), which cannot be removed.
Red area on image ilustrates the unwanted GAP that i cannot manage to get rid of.
Blue border represents Form component. Grey border (thin) represents FormItem component.
FormItem has no padding or gap property.
This is the code for image above:
<s:Form id="form">
<s:layout>
<s:FormLayout gap="0"
paddingBottom="50"
paddingTop="0"/>
</s:layout>
<s:FormItem width="100%" label="RC">
<s:TextInput id="myTextInput" width="215"/>
</s:FormItem>
</s:Form>
When developing for mobile, you want to make best use of every pixel on your screen. This is unacceptable for me since i want to have several TextInput fields and having this gap will waste lots of space...
So my question is, can the red GAP be removed? I want my FormItem to have padding 0 - meaning TextInput border will touch FormItem border...
Well things like that are usually managed by the skin of the component, so what you have to do is to provide your own skin for your FormItem components. The easiest way to do it is to copy the skin provided by Adobe and make some tweaks that'll accomplish what you require. Most of all you have to set baseline to maxAscent:0 on row1 ConstraintRow and bottom to row1:0 on sequenceLabelDisplay, labelDisplay and contentGroup components.