I have a sprite image that i have added to a drawComponent instance.
On click of that sprite, I want to draw a border around that image.
var myImg=surface.add({
type: "image",
src: <some path>,
x:50,
y:50,
height:100,
width:100,
draggable:true
});
I also tried using the addCls() method to include this CSS
.imgCls
{
border-style:solid;
border-color: black;
border-width: 5px;
}
But I don't find it drawing any border aroound the image.
Please help. Thanks !
Update:
Used setStyle() method and redrew the image.
myImg.setStyle('border','5px solid #000000');
myImg.redraw();
No border is drawn and no errors reported either.
Related
I want to add an image inside the doughnut
you can see my doughnut here
I already tried by using background-image:url(image.png) but is there any way to do it.
Technically, it's not possible to add images in Charts.
However, you can easily work with that by adding an image as a background for chart container. I.e.:
#chartdiv {
width: 210px;
height: 210px;
margin: 0 auto;
background: transparent url(YourImage) no-repeat center 70px;
}
I have to begin by apologizing for my inability to grasp what can only be described as logic. I have photoshopped the proposed layout. Here is a snapshot:
Layout:
I do not have example code. This is because I can't write code if I don't know how to approach it. Which brings me to:
I'm trying to design an overlayed SVG navigation menu (achieved as red rectangle + trapezoid polygon) that's always at the bottom of the page and pops out when clicked/touched to show expanded menu options. From what I've read and understand, using absolute (do I mean "static" here?) values to define position (pixels vs percent) is bad design because of wildly varying resolutions and DPI across many devices. I've tried a simple example in W3's Try Me editor just to get a grasp of how I'll position the red rectangle. I used:
<svg>
<rect width="100%" height="10%" x="0%" y="90%" style="fill:#ff0000;" />
</svg>
This places a red rectangle spanning the entire width of the page (regardless of resolution) at the bottom, without clipping the rectangle outside the viewport. Success! Right..? Well.. the menu isnt just a rectangle. There will be a polygon trapezoid "bump" in the center where the hamburger menu icon will go. This led to my problem. The polygon is defined by coordinates. And coordinates are absolute (or static?). Defined in pixels or inches or various other units. It doesn't support percentages from what I've read, and I'm not sure that's what I'd want anyway. Using percentages means that rectangle will stretch to fill whatever "10%" of the viewport height is. On a desktop it will be thinner than on mobile in portrait. It also means that the polygon won't necessarily be centered, as 550px will not always represent 50% (example values).
I'm going about this wrong. Help me find the proper logic for laying out this page. Honestly, after this, dynamically loading content underneath seems like the easy part.
FYI, I'd like to avoid JS and plugins as much as possible. By that I mean, I don't want to use them AT ALL. CLARIFICATION: If it can be avoided.
I'd be more than happy to clarify ad nauseum. Though this is the first time I'm actively using SO, and have only been previously exposed to it via google searches.
EDIT: I'm asking in the context of working with SVG, since this is what I'm having trouble finding proper documentation on. What I find is blog posts and "download this code/plugin to achieve this effect" instead of conceptual descriptions of how to achieve those effects. I've coded websites (personal, not professional) when HTML4 and CSS2 were the tools. Back then, you didn't have to worry about mobile phones. You could work within commonly used resolutions and aspect ratios (16:9 and 4:3 were pretty much it). But now those devices have wildly varying pixel densities and methods of rendering and 2 aspect ratios (portrait and landscape). I'm going from a background in fairly static webpages to mighty morphin' power webpages.
TLDR: How to do SVG? How do I put that trapezoid in the center, and have it retain its width/height regardless of the viewport's. Also, if I'm supposed to avoid absolute values (defining the height of the rectangle in pixels), how do I maintain a consistent height and proper positioning of the absolutely positioned polygon with relative values?
EDIT2: Thank you Paul! This has helped me immensely!! Being able to see the code and have it explained why and under what circumstance it does or does not work allows me to understand how this kind of tool is used. Especially when explained in context to to my own ideas. The CSS version is also very helpful. I've never used it beyond basic styling of elements. Both answers are excellent.
You don't need SVG for this. What you want to achieve is very easy to do with CSS.
var tabcontainer = document.querySelector(".tabcontainer");
var tabbutton = document.querySelector(".tabbutton");
tabbutton.addEventListener("click", function() {
tabcontainer.classList.toggle("open");
});
.container
{
width: 500px;
height: 500px;
position: relative;
background-color: black;
overflow: hidden;
}
.tabcontainer
{
position: absolute;
width: 100%;
bottom: -44px;
}
.tabcontainer.open
{
bottom: 0px;
}
.tabbutton
{
width:100px;
height: 0;
margin: 0 auto;
border-bottom: solid 20px red;
border-left: solid 16px transparent;
border-right: solid 16px transparent;
text-align: center;
cursor: pointer;
}
.tabbutton I
{
color: white;
}
.tabbody
{
width: 100%;
height: 60px;
background-color: red;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="tabcontainer">
<div class="tabbutton"><i class="fa fa-bars"></i></div>
<div class="tabbody"></div>
</div>
</div>
Using SVG
Generally, anything in an SVG gets scaled if the SVG scales. This can cause a problem when people want to create responsive SVG documents on a page.
However, with some particular SVG layouts it is possible to do what you want. In particular it is when you have simple designs with elements that need to sit in the corners, or centred on one of the sides.
Here's a version of the above CSS-only example that uses SVGs for the tab part.
How this works is that we are using the feature where, if the aspect ratio of the contents (defined by the viewBox) is different from the SVG (defined by width and height), the contents will automatically get scaled and centred.
So here we are defining a button that is 132x20, and putting it in an SVG that is 100% x 20. Where "100%" here is the width of the container/page. Because the aspect ratio is different, <polygon> representing the button will get automatically centred horizontally.
var tabcontainer = document.querySelector(".tabcontainer");
var tabbutton = document.querySelector(".tabbutton");
tabbutton.addEventListener("click", function() {
tabcontainer.classList.toggle("open");
});
.container
{
width: 100%;
height: 500px;
position: relative;
background-color: black;
overflow: hidden;
}
.tabcontainer
{
position: absolute;
width: 100%;
bottom: -44px;
}
.tabcontainer.open
{
bottom: 0px;
}
.tabbutton
{
fill: red;
cursor: pointer;
}
.tabbody
{
fill: red;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<svg width="100%" height="80" class="tabcontainer">
<svg width="100%" height="20" viewBox="0 0 132 20" class="tabbutton">
<polygon points="16,0, 116,0, 132,20, 0,20"/>
<g transform="translate(66,0)" fill="white">
<rect x="-8" y="4" width="16" height="3"/>
<rect x="-8" y="9" width="16" height="3"/>
<rect x="-8" y="14" width="16" height="3"/>
</g>
</svg>
<rect y="20" width="100%" height="60" fill="red" class="tabbody"/>
</svg>
</div>
I am working on this project. I have an angular-google-map directive. I am overwritting defaults markers with labelClass.
CSS is working fine but does not hover.
.marker {
color: white;
border: 2px white solid;
border-radius: 50px;
text-align: center;
font-size: 20px;
letter-spacing: 0.1em;
font-weight: bold;
}
.marker:hover {
background-color: #C52183;
animation: pulse 1s;
}
/* ANIMATIONS */
#keyframes pulse {
50% {
transform: scale(4);
}
100% {
transform: scale(1);
}
}
If you check the example you can see an animation but not with real color. I sometimes get the real animation.
The full project is here.
pd: The problem can't be the animation, if i just try to change some css properties i dont get effect, so i think that the problem is with google maps and css.
I finally fixed this "bug".
The problem was on the MarkerWithLabel library but really isn't a bug, its just an impossibility (with this library). Checking the library we see :
// Set up the DIV for handling mouse events in the label. This DIV forms a transparent veil
// in the "overlayMouseTarget" pane, a veil that covers just the label. This is done so that
// events can be captured even if the label is in the shadow of a google.maps.InfoWindow.
// Code is included here to ensure the veil is always exactly the same size as the label.
this.eventDiv_ = document.createElement("div");
this.eventDiv_.style.cssText = this.labelDiv_.style.cssText;
I just modified the library so i don't create invisible div anymore and also i intercept events with real label. Now it's working under my requirements.
more info about the problem
demo working
I am trying to figure out how to make vertical and horizontal images at the same height. The height I need by vertical image. any ideas..
I was thinking to make the same height, but when I resize it shows like above...
css: max-height: 375px!important;
Update:
http://jsfiddle.net/LG2B8/
use min-height for horizontal image
min-height: height of vertical image;
as mention above, just give
css: height: 375px!important;
or
css: height: 4%0!important; //give in percent which is good for responsive ui
Some basic rule is
Height - apply when you need / know proper height
Max-height - apply when you want to restrict image height when exceed, this is good to used for images, you can also use for all other content too.
Min -height - apply when you want to minimum height should be, this is used for div/table/tr/td for responsive ui
I rectify and only change in css. just remove everything and add this. I added width for understand.
img
{
display: inline-block;
height: 300px;
width:200px;
}
img is html tag and all images will work as per "img" css attributes
Here is my solution:
Html:
<div class="w">
<div class="img"><img src="http://i.imgur.com/4OAz0Cf.jpg"/></div>
<div class="img o"><img src="http://i.imgur.com/EJsmCmT.jpg"/></div>
</div>
Css:
.w {
display: table-row;
}
.img{
width: 50%;
display: table-cell;
}
.img img{
min-height: 500px;
max-height: 500px;
}
.img.o img {
width: 100%;
}
Example
Can anyone have any idea how to make title text of groupbutton not above the icons but under in ExtJS? I was trying to do bbar to the groupbutton but the default td align is to left and I don't know how to change it by css? Thanks for any response.
You can achieve the effect by adding the following CSS to the button:
height: 64px;
background-position: top center;
padding-left: 0px
I this case, I have set the height of the button to be 64px. The will definitely distort the tool bar if you have a combination of default buttons and buttons with the above CSS.