Hey guys im trying to use a ie feature or bug, but it works fine for my solution.
In IE if i have a smaller svg with a larger polyline, the polyline shows through the svg edges.
The same code not work on other browsers and i need to understand why works only on IE.
Has any css or js that i can change to set all browsers to make results equal ie ?
Here is the code, run on IE and run on other browsers, you only view the line in ie and is what i need.
svg
{
border: solid 1px red; margin: 40px 40px 20px 20px;
}
<!DOCTYPE html> <html> <style> svg { border: solid 1px red; margin: 40px 40px 20px 20px; } </style> <body> <svg height="20" width="50"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180 200,-10" style="fill:none;stroke:black;stroke-width:3" /> </svg> </body> </html>
See that only IE draws the line over the edges.
Setting a style overflow: visible; for the svg element should help.
For details on the rules, see the SVG overflow spec. A overflow: hidden; is set by a conforming browser stylesheet if a <svg> element is not the root of a stand-alone document.
Note that you will still have to deal with the overflow rules of all parent elements.
Related
I'm trying to get hyphenation working correctly.
<!doctype html>
<!-- lset language-->
<html lang="nl">
<head>
<link href="https://fonts.googleapis.com/css?family=Chivo:400,700,900" rel="stylesheet">
<title>HYPHENATE</title>
<style>
html {
background: #fff;
/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.product-name {
width: 113px;
font-weight: 900;
color: #231f20;
font-size: 18px;
line-height: 22px;
text-transform: uppercase;
overflow: hidden;
font-family: "Chivo", sans-serif;
background-color: grey;
}
</style>
</head>
<body>
<div class="product-name">Bijzettafel Aspen met tijdschriftenrek</div>
</body>
</html>
This results in a text box with is hyphenated as follows:
I can forgive instances where words are hyphenated incorrectly as I understand that some words aren't always in 'htmls' dictionary. But what I find strange is that hyphenated words somethimes leave gaps in paragraphs. In this example this would make much more sense:
BIJZETTA-
FEL ASPEN
MET TIJD-
SCHRIFTEN-
REK
As after hyphenation there would be enough space after 'MET' TO PUT 'TIJD-' BEHIND IT.
How can I fix the code so that hyphenated syllables automatically continue behind previous words when there would be plenty of space for it?
The basic problem is that the browser has a hyphenation algorithm and you can't interfere with it. The browser will lay the text out as it wants. (The same is true in MS Word, InDesign or any other text software, of course. It's just that with proper layout software, you get more control over the text properties.)
The reason that the browser has moved "TIJD-" to the next line is that it's fractionally too wide for the space the browser has left to place text in so it has no choice but to move it.
You have two options for changing how the text flows. The first is to make a tiny adjustment to the element width, the font size or the font kerning. (You can do this across the whole text, or just to offending portions using a span.) This will change the maths behind the text flow and may let you produce a more aesthetic result.
The second is to use hard spaces ( ), thin spaces ( ) or (as a real bodge) spans with padding and no real spaces at all, to try and force the browser to lay the text out as you want.
But, because all browsers are different, you can't guarantee the result, whatever option you choose. If it's essential to get the right look, you'll need to use an image (but don't forget the accessibility if you do)!
Strangely enough I found out that by commenting out 'overflow: hidden' and adding 'display: table' to the product-name class I got what I wanted. Removing 'overflow: hidden' made the syllables move nicely behind the previous words. When I went to another browser window those syllables moved down again for some reason, but that was fixed by adding 'display: table'. The resulting code below. Leading to above good result. Not a clue why this works but css sometimes works mysteriously :-)
<!doctype html>
<!-- lset language-->
<html lang="nl">
<head>
<link href="https://fonts.googleapis.com/css?family=Chivo:400,700,900" rel="stylesheet">
<title>HYPHENATE</title>
<style>
html {
background: #fff;
/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.product-name {
/* added display: table*/
display: table;
width: 113px;
height: 300px;
font-weight: 900;
color: #231f20;
font-size: 18px;
line-height: 22px;
text-transform: uppercase;
font-family: "Chivo", sans-serif;
/*overflow: hidden;*/
background-color: grey;
}
</style>
</head>
<body>
<div class="product-name">Bijzettafel Aspen met tijdschriftenrek</div>
</body>
</html>
i get source code, in CKEDITOR demo, and put in index.html in empty body.
Included:
<script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
But, content dispayed very bad, appears ugly in style and displayed.
<html>
<head>
<script src="//cdn.ckeditor.com/4.4.7/full/ckeditor.js"></script>
</head>
<body>
---Content source in CKEDITOR demo HERE
</body>
</html>
displayed:
http://i.stack.imgur.com/ATTWO.png
why it is displayed not as in a demo as it is correct to me to display content created through CKEDITOR
I took a look at their homepage and downloaded the basic package. I
found a file called content.css in the package folder,
img.right
{
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
img.left
{
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
And if you look at the source code of the content snippet on their demo,
<h1><img alt="Saturn V carrying Apollo 11" class="right" src="http://c.cksource.com/a/1/img/sample.jpg" /> Apollo 11</h1>
The image has a class called right, which is defined in content.css, and therefore it is floating to the right.
I think your problem is that the css file in not present/found in your project.
Maybe you can try to download the package and see if it works locally, so you can make sure that the problem is caused by the CDN and the missing file.
Just in case, I download the package here (no advertisements intended)
http://ckeditor.com/download
It is rendered by the browser in this way. If you want to add additional styles and modify the look you need to learn some CSS. There is no CSS whatsoever in the source from the editor.
I see a bug on google chrome.
run the below html code on Chrome V 31
<!DOCTYPE html>
<html>
<head>
<title>Chrome scrollWidth issue</title>
<meta charset="utf-8">
</head>
<body style="direction: ltr;">
<div style="overflow: auto; height: 100px; width: 800px; border: 1px solid red;">
<div style="height: 150px; width: 1080px; background: blue;"></div>
</div>
</body>
</html>
When I change the body direction from ltr to rtl, the scrollWith of the parent div is different.
This is not occurred on FireFox V25 or Internet Explorer V10.
I report the issue on chrome issue tracker.
My question is how can I fix this with css or javascript?
Try to use clientWidth in the child element and you'll get 1080 in both rtl and ltr, hope that's a good enough solution till they fix the bug on chrome.
Add this on parent div's CSS
float:left
I'm new to Raphael as well as to JS.. I need to be able to drag the Canvas itself, not the object in it, to various locations on the screen. I looked everywhere on the web and can't find a clue. Of course, the user would have to try and grab the canvas at some free spot ... free from child objects...
Any clue would be greatly appreciated.
Here is how I constructed the Canvas on this site:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Raphael Play</title>
<script type="text/javascript" src="js/raphael.js"></script>
<script type="text/javascript" src="js/mood.js"></script>
<style type="text/css">
#canvas_container {
position:absolute;
width: 803;
left:200px;
top:100px;
border: 0px solid #555;
-webkit-box-shadow: 0px 0px 84px #999;
-moz-box-shadow: 0px 0px 84px #999;
box-shadow: 0px 0px 84px #000;
border-radius: 20px 20px 20px 20px;
background-color:#fff;
background-image:url(static/VAZZZ.png);
}
</style>
</head>
<body>
<div id="canvas_container" ></div>
</body>
</html>
Here is a cross-browser drag function and event listener for the <div>.
http://jsfiddle.net/MtbJe/
Your CSS was incomplete (no height specified and width was missing "px").
The box-shadow significantly reduces the smoothness of the dragging, you may actually want to use an image in this instance (remove the box-shadow to see how much smoother it is).
If you want to make something else in the UI be the actual drag handler (but still move the entire <div>) you will have to change the event listener to be for that element and change the 15th line of the JavaScript from:
var dragObj = e.target ? e.target : e.srcElement;
to something like:
var dragObj = e.target ? e.target.parentNode : e.srcElement.parentNode;
I've had this code saved for many years and I believe the original author is http://www.quirksmode.org/ though I don't see it there anymore. You will find a lot of great information about JS on this site. Again, this is a cross-browser script which I'm not sure you need given you are using canvas. If you are very new to JS and working with the DOM, then I'm sure the code will look a bit confusing and I encourage you to ask additional questions.
Is it possible to embed a scrollable text box to output text on my web page, in HTML or JavaScript?
I am trying not to use any Java libraries if possible.
<textarea></textarea>
<style type="text/css" media="screen">
#messages{
border : solid 2px #ff0000; background : #D5D5D5; padding : 4px; width : 500px; height : 350px; overflow : auto;
}
</style>
<div id='messages'>
</div>
to scroll down with jquery:
$('#messages').scrollTop( $('#messages')[0].scrollHeight );
Since the question is pretty vague i am going to recommend jScroller (since i've used it for some projects)