I'm using raphaeljs to create an app allowing people to customize doors. I'm basically separating the sections of the door and using raphaeljs to draw them via a path, then filling this path with the corresponding image.
This is my code that draws the door.
function drawDoor(style, color){
door = paper.path(door_paths[style].path).translate(105, 93);
door.attr({ fill: "url(images/door/"+style+"/"+style+"_"+color+".png)", stroke: 0 });
door.node.setAttribute("class","door");
door.click(element_click);
}
This works great in all browsers except Safari. It seems to draw the path fine, but when you scroll the page the image scrolls as though it is fixed to the background, the path act as a mask.
I've recorded a short video to demonstrate this, you can see it on vimeo here http://vimeo.com/24539065
This happens with both pngs and jpg, and I have tried removing my translate from the draw function but no luck. I have also ruled out css issues by removing my stylesheet.
Any suggestions would be appreciated, thanks.
Related
I am building an AureliaJS based application which contains a SVG based component. My problem is that in MS Edge, the gradients of this SVG are not rendered (see image below: the "gauge" is supposed to be transparent and the two circles green). It is correctly displayed in all the other browsers I tested (FireFox, IE11, Chrome).
The gradients are defined inside the SVG in a defs section. They are then used by their ids.
I tried:
To open the SVG part of the component as an SVG file in Edge. Strangely it renders correctly. So I guess the SVG is correct.
To remove the Aurelia markup: the problem is still here.
To change the value of fill (currently fill: url(#gauge-fill-2)) into fill: url('#gauge-fill-2') or fill: url('/#gauge-fill-2') without success.
I also get the message below in the console, which disappears if I remove this SVG (I translated it from French as I have a French edition of Windows 10)
XML5633: The name of the ending tag doesn't match the name of the starting tag.
Line. 60, column 7
However, when I read the code, I couldn't find any problem about closing tags. To be sure of this, I remove most of the code and left only one element with a gradient on it. This message was still there.
The full code of the component is available here: https://bitbucket.org/arenaoftitans/arena-of-titans/src/9f5f70ff3fc71832bcac90ce0dcc5204a471b095/app/game/play/widgets/gauge/gauge.html?at=master&fileviewer=file-view-default
Any idea of what the problem might be and how to solve it?
The problem is solved by the creators update. I just need for it to be widely deployed.
I'm not good at all this website creating. But i need my web portfolio for graphic design. So i created template on photoshop. Sliced it. And saved for web. Then i opened it in Dreamweaver. All i did rollover for my buttons. And here how it looks in IE
stormilloart.com
check it in Opera, Safari, Firefox - looks perfect. But in Internet Explorer ist all messed up. Maybe there is a fix. Please help me out.
When you put images inside anchor tags, IE adds border around it. But Photoshop takes exact width and height of the sliced images. Because of the border added around the images, it creates layout issue.
To fix this, remove border around images inside anchor tags.
Add following code in head section.
<style>
a img {
border-width : 0;
}
</style>
Does anyone know if there is a workaround for this? Internet Explorer 10 and Window phone 8 are not able to correctly scale background SVG images when a user zooms. Looks like IE rasterizes the SVG on load.
Here is an example: The first image is the SVG as a background image. Zoom in on a MS Surface or Windows 8 phone and you'll see it blurs horribly.
The second image is the same SVG as an img tag. Zoom this on a Surface or Windows 8 mobile phone and it scales as you would expect (nice and clean).
Is there any property that can be added to make IE10 behave? Or is it merely a case of waiting for the folks at Redmond to fix it?
The problem is that IE, and other browsers such as Firefox rasterise the SVG before displaying it, so it will become blocky when zoomed.
The easiest way to fix this is to make the SVG file larger than is needed. For example double the size, or more if the user is likely to zoom in further. You can then resize the SVG image with CSS to display it at the correct size. This way the image will be naturally larger, so wont become blocky, unless you zoom in even further. At default zoom level the image is scaled down rather than up, which browsers usually handle better.
Edit: You can find further info on this issue under the “SVG and CSS Backgrounds” heading at http://dbushell.com/2012/03/11/svg-all-fun-and-games/
I'm using a UIWebView in my application to show some information to the user. Everything works fine when rotating the Simulator: the objects are resizing just fine, as I would expect.
The only problem is the UIWebView that, although it seems to resize correctly (the frame, in fact, does resize well), keeps shrinking its content by 1px at each rotation.
The more I rotate the device, the more a black column grows at the right side of the UIWebView.
Fixes that I've tried and that haven't worked:
calling setScalesPageToFit: YES on the UIWebView;
setting the viewport meta tag;
setting the content mode of the UIWebView;
calling [myWebView reload];
reloading the HTML after setting UIWebView's frame size
This is not a severe problem for me, but it's rather annoying. Can you help me, please?
Thanks in advance.
Luca
ive used an online srpite service http://spritegen.website-performance.org/ but i want to know how to make them by myself.
How can i save an image that it should be so small but when used on my web site it comes out normal size?
Sprites aren't about making the image itself small, it's about decreasing filesize by packing several images into one.
Take a look at Yahoo's icon sprite. Notice that they have all their section icons stacked vertically in one large image. They then use CSS to position the background to only show a small window of the sprite image, thus giving you just the icon.
In the end, it's up to you how you arrange your sprite. Check out the bottom of Amazon's sprite.
Either way, hopefully that helps gives you a better idea of the concept of sprites.
From the very site you link:
CSS sprites are a way to reduce the
number of HTTP requests made for image
resources referenced by your site.
Images are combined into one larger
image at defined X and Y coorindates.
Having assigned this generated image
to relevant page elements the
background-position CSS property can
then be used to shift the visible area
to the required component image.
So there is nothing magical involved: you simply need to pack all your pictures into a single giant image with your favourite graphics tool and insert them as CSS background. Just look at this CSS sprite by Google: