I am trying to fix a rendering bug with my program, which currently works perfectly in Chrome and Edge. Firefox does not render the foreignObjects at all
I am using the SVG.js library, which produces the code below for one of my foreignObjects. I have tried a fix from an earlier question, which was to use the css code below to no effect.
<foreignObject width="256" height="66" x="76" y="1113">
<span id="run" xmlns="http://www.w3.org/1999/xhtml">
<button type="button" id="runButton" class="userButtons" style="width:133px;height:65px">RUN</button>
</span>
</foreignObject>
svg {
overflow: visible;
}
If anyone has any ideas I would be very grateful.
Quite likely, your svg doesn't have a explicit height.
Try to add a viewBox and height/width properties:
svg{
overflow: visible;
border:1px solid red;
}
.scroll{
height:900px;
overflow:auto;
}
<div class="scroll">
<svg viewBox="0 0 256 66" width="256px" height="66">
<foreignObject width="256" height="66" x="76" y="500">
<span id="run" xmlns="http://www.w3.org/1999/xhtml">
<button type="button" id="runButton" class="userButtons" style="width:133px;height:65px">RUN</button>
</span>
</foreignObject>
</svg>
</div>
Related
I am new to javascript and I am having a problem when linking the .js file to the .html one. It is working fine in codepen, but when i implement it in visual code studio, the text on hover doesn't show. I linked the .js file with the general syntax "https://codepen.io/przemoo83/pen/vJPvmy
Ps: I want to use javascript for the tooltip "text on hover" so that i could later on be able to update that data through a channel. Do you think that it is a good idea, or could i just use css and still be able to update it later on ? or will i need to use php, since the data is coming from a server?
Thank you guys
It seems that perhaps you have simply failed to include all the right imports in your local HTML file, or perhaps put them in the wrong order or in the wrong place in the file.
I have set it up as the following and if you use this it should be fine. Just make sure you have all the external resources mentioned in your HTML, so that means bootstrap.min.css for CSS, and jquery.min.js and bootstrap.min.js in that order. Bootstrap needs jQuery to be loaded first for it to run. And then your own linked or embedded JS should be third, as this is referencing both.
If you look in your browser's Developer window (press F12 for Chrome) it will show you any error messages that will help you to fix problems.
$(document).ready(function(){
$('.path').tooltip({container:'.img-container'});
});
.img-container {
width: 50%;
margin: 0 auto;
}
path {
fill: transparent;
transition: 1s;
stroke: transparent;
stroke-width: 2px;
opacity: 1;
}
#screen:hover {
fill: red;
}
#one:hover {
stroke: green;
}
#two:hover {
fill: blue;
stroke: yellow
}
#three:hover {
fill: grey;
opacity: 0.5
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>z</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel='stylesheet' href="/mysite/static/.other/z.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='/mysite/static/.other/z.js'></script>
</head>
<body>
<div class="img-container">
<svg viewBox="0 0 960 714" height="100%" width="100%" version="1.1" id="svg4160">
<image width="960" height="714" preserveAspectRatio="none" xlink:href="http://i68.tinypic.com/apa4x0.png" id="" />
<path class="path" id="screen" data-placement="top" title="Screen!" d="m 303.80326,47.378347 263.07451,144.628633 0.41559,3.3248 -187.85098,154.18743 -6.6496,1.6624 -265.5681,-174.96741 z" />
<path id="one" class="path" data-placement="top" title="One!" d="m 511.81083,476.48487 32.00116,22.44237 10.80559,7.68859 4.57159,1.039 2.078,-1.4546 67.11933,-60.05413 1.039,-2.4936 -16.00059,-12.26018 -27.01397,-16.41619 -2.07799,-1.24679 -1.2468,0.4156 -22.85798,19.74097 -47.79394,39.48196 z" />
<path class="path" id="two" data-toggle="tooltip" data-placement="top" title="Two!" d="m 589.52794,411.23574 29.09197,17.66298 13.50698,11.01339 3.3248,0 77.71711,-78.34052 -1.039,-2.70139 -14.54598,-9.76659 -25.14377,-14.54599 -4.3638,-1.45459 -2.70139,2.07799 -76.67812,73.56112 1.4546,2.2858 z" />
<path class="path" id="three" data-placement="top" title="Three!" d="m 670.77765,331.23283 29.50757,15.37718 13.09138,9.97439 4.5716,0.4156 47.58614,-53.61234 0.8312,-3.117 -13.71478,-8.10419 -30.54657,-16.41618 -1.4546,0.8312 -48.41734,51.74214 z" />
</svg>
</div>
</body>
</html>
Below is the code i made to recreate issue in a simpler manner
<html>
<head>
<title>test</title>
<style>
#container{
width:500px;
background-color:green;
}
table{
width:100%;background-color:blue;
}
table tr td img{
max-width:100%;
width:100%;
}
</style>
</head>
<body>
<div id="container" style="">
<table style="">
<tr>
<td><img src="http://go-grafix.com/data/wallpapers/20/green-574309-3888x2592-hq-dsk-wallpapers.jpg"/></td>
</tr>
</table>
</div>
</body>
</html>
Basically this works fine in chrome and other browsers
But in IE8, the max-width property is not obeyed. I also tried using the width property still no luck
Any suggestions?
P.S: I dont want to have it in px, i want to have it in % only
Here is the fiddle link
Try by giving width and height properties inline
<img width="100" height="100"/>
or
<img style="width:100;height:100"/>
To make the responsive image. Just apply the style as follows:
<img src="img/xyz.jpg" class="xyz-img" width="100" height="100" />
<style> .xyz-img{width:100%; height:auto;} </style>
I have an incredibly odd case of IE9 displaying blurry graphics when the <svg> is floated next to another element.
Here's the simplest case I could come up with that is similar to our application:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/2000/svg">
<head>
<meta content="IE=Edge,chrome=1" http-equiv="X-UA-Compatible">
<title>IE9 SVG Resize Issue</title>
<script type="text/javascript">
window.onload = function() {
var i = 0;
var increaseWidth = function() {
var w = 500 + i++;
window.resizeTo(w, 500);
document.getElementById('currentWidth').innerHTML = w + 'px';
};
document.getElementById('btn').addEventListener('click', increaseWidth);
increaseWidth();
};
</script>
</head>
<body>
<div style="float: left; width: 20%">
Left
</div>
<div style="float: left; width: 80%">
<svg width="200" height="200" version="1.1">
<rect fill="#fff" stroke="#000" x="0.5" y="0.5" width="100" height="100" />
</svg>
</div>
<span style="color: #999; display: block">NOTE: In IE9 you can only have one tab open to resize the window</span>
<button type="button" id="btn">Increase Width</button>
<span id="currentWidth" style="color: #666; font-size: 15pt"></span>
</body>
</html>
Here's a gallery that shows resizing the window from 500px to 507px. You can see that the lines of the rectangle go from blurry to crisp when resizing by one pixel. The bug seems to occur when having the two columns with a percentage width. It can also happen when the div containing the svg overflows onto a new line (things become slightly blurry). FWIW, in the actual application we're using Raphael.js.
Is there a known issue associated with this and is there an easy fix to keep the lines crisp (with the usual offset by 0.5px fix)?
Hi can someone please help me with getting the buttons to resize the shape. I have had a go myself but cannot get it to work. Below is the code I have so far thanks in advance
<html>
<head>
<script>
function Smaller()
{
document.getElementById("rectangle1").height="50";
document.getElementById("rectangle1").width="50";
}
function resetsize()
{
document.getElementById("rectangle1").height="200";
document.getElementById("rectangle1").width="300";
}
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 500px; height: 500px">
<rect id="rectangle1" x="150" y="0" width="300" height="200" />
</svg>
<input type="button" onclick="Smaller" value="Smaller" />
<input type="button" onclick="resetsize" value="ResetSize" />
</body>
</html>
<html>
<head>
<script>
function smaller() {
document.getElementById("rectangle1").style.height="50px";
document.getElementById("rectangle1").style.width="50px";
}
function resetsize() {
document.getElementById("rectangle1").style.height="200px";
document.getElementById("rectangle1").style.width="300px";
}
</script>
</head>
<body>
<div style="min-height:500px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 500px; height: 500px" id="rectangle1">
<rect x="150" y="0" width="300" height="200" />
</svg>
</div>
<input type="button" onclick="smaller()" value="smaller" />
<input type="button" onclick="resetsize()" value="ResetSize" />
</body>
</html>
Please look at the on click propery of the buttons. And there is no id for yor svg element. :- )
You can access a DOM element's CSS properties with the style attribute, like this:
function smaller() {
document.getElementById("rectangle1").style.height="50";
document.getElementById("rectangle1").style.width="50";
}
function resetsize() {
document.getElementById("rectangle1").style.height="200";
document.getElementById("rectangle1").style.width="300";
}
A few notes about your coding conventions: You typically want to having opening function brackets on the same line as the name of the function. Function names should be camelCase at all times; save UpperCase for class names only. Finally, make sure you tab in stuff inside of functions, if statements, etc. Your fellow developers will thank you. =)
Edit: make sure your HTML looks like this:
<input type="button" onclick="smaller()" value="Smaller" />
<input type="button" onclick="resetsize()" value="ResetSize" />
use jQuery to avoid this DOM abomination document.getElementById("fooo")
For some reason, when I first go to a recent page I built, the jQuery Cycle plugin does not work. The site is located here (site is in a different language [Hebrew]).
Regardless of the language it's in, the Cycle plugin works fine in Firefox and IE. I'm wondering if this is a bug on my end or a bug on the plugin's end.
If it's a bug on my end, how can I fix it?
The solution to this problem, based on the fact that Google Chrome fails to properly render the height of the dynamically generated div's (as #ulima69 observed), is to give the wrapping div (.slideshow) a designated width & height that is congruent with the images' width/height.
This fixes the bug for now. If the images were all different dimensions, a more complicated solution should be sought. #ulima69 provided two links to alternative cycle plugins that should work with Chrome. Do what works for you.
Amit
You have to use .load instead of .ready to allow the images to load on the page
$(window).load(function() {
$('.element').cycle();
});
Here is a quick demo for you: http://jsfiddle.net/VpnPb/4/. I have used jQuery 1.6.4 and everything works fine with different image dimensions.
$('#s5').cycle({
fx: 'fade',
pause: 1
});
$('#s6').cycle({
fx: 'scrollDown',
random: 1
});
.pics {
height: 232px;
width: 232px;
padding: 0;
margin: 0;
}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}
<link href="http://jquery.malsup.com/cycle/cycle.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle.all.js"></script>
<script src="http://malsup.github.io/chili-1.7.pack.js"></script>
<div id="s5" class="pics">
<img src="http://desmond.yfrog.com/Himg735/scaled.php?server=735&filename=u2tc.jpg&res=iphone" width="200" height="200" />
<img src="http://desmond.yfrog.com/Himg611/scaled.php?server=611&filename=ei41.jpg&res=iphone" width="200" height="200" />
<img src="http://desmond.yfrog.com/Himg616/scaled.php?server=616&filename=2113.jpg&res=iphone" width="200" height="200" />
</div>
<br/>
<div id="s6" class="pics">
<img src="http://desmond.yfrog.com/Himg735/scaled.php?server=735&filename=u2tc.jpg&res=iphone" width="200" height="200" />
<img src="http://desmond.yfrog.com/Himg611/scaled.php?server=611&filename=ei41.jpg&res=iphone" width="200" height="200" />
<img src="http://desmond.yfrog.com/Himg616/scaled.php?server=616&filename=2113.jpg&res=iphone" width="200" height="200" />
</div>