I' try to drawing canvas using example2 taken from http://dev.opera.com/articles/view/html5-canvas-painting/. It works on Firefox 8.0.1 and Opera 11.52.
Then I modified the code put the canvas into a table cell and stop working.
I tried to put canvas outside the table and absolute positioned the canvas on a cell table still doesn't work.
The above problem happened only on Firefox, running well on Opera.
Here's the code
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Sign-In</title>
<style type="text/css"><!--
#imageView { border: 1px solid #000; }
--></style>
</head>
<body>
<p>Please fill in name and id card no. Then sign-in on provided box</p>
<table>
<tr><td>Full Name</td><td><input name="name"><td> </tr>
<tr><td>ID Card No</td><td><input name="idcard"><td> </tr>
<tr><td>Signature</td><td>
<div id="container">
<canvas id="imageView" width="200" height="100"> </canvas>
</div>
</td> </tr>
</table>
<script type="text/javascript" src="http://dev.opera.com/articles/view/html5-canvas-painting/example2.js"></script>
</body></html>
Any idea?
Well, here is your code in jsfiddle: http://jsfiddle.net/7PRDq/
The problem is almost certainly the mouse handling code giving a bad X,Y in Firefox. If you try to draw a signature in the upper-left corner of the box you'll see that it is drawing with an incorrect offset.
If you make the canvas 2000x1000 instead of 200x100 you'll see the problem much more clearly!
You'll need to find more modern mouse code for FireFox.
Related
i am currently inserting css coding to make my site (PHP) mobile responsive for a mobile phone. The problem i am encountering is when wanting to reduce the size of an image to 50% on both height and width. it does not resize the image... ? Below is the code for the image and the css section for my mobile settings:
HTML
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<div class="logo">
<img src="./img/newlogo.png" alt="logo" />
</div>
CSS code:
#media only screen and (max-width: 736px){
.logo{
position:absolute;
top:2%;
left:10%;
Width:50%;
Height:50%
}
}
Any ideas ?
Move your logo class on image
<div>
<img class="logo" src="./img/newlogo.png" alt="logo" />
</div>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function show1() {
document.getElementById("img1").display = 'block';
}
function hide1() {
document.getElementById("img1").display = 'none';
}
</script>
</head>
<body>
<span onMouseOver="show1()" onMouseOut="hide1()">Corporate Team Outing - LNT</span>
<div id="img1" style="display:none">
<img src="" alt="image 1" />
<img src="" alt="image 2" />
</div>
</body>
</html>
i want that when u put mouse on text it show image in div i m trying to do it but it not working.
Forget javascript for this one! CSS is the answer. Put a hover state on ID:img1 and the images inside the div (if u don't do the latter, mousing over the images will cancel out the div mouse over. So it will look like this (not inline styles due to mouse over states declaration):
#img1 {
Background-image: none;
}
#img1:hover, img1:hover img {
Background-image: url(your URL);
}
You could change the IDs to classes, so the CSS can be reused and keep the IDs for coding (javascript etc)
IE is a mystery to me. My web app is working on Safari, Firefox, Chrome, even iPhones and iPads, but when it comes to IE, I simply can't comprehend how hard it is to comply to the given standards. Anyway enough ranting.
My Twitter bootstrap buttons are completely ignored in IE8. Absolutely nothing happens when I click on any button. I couldnt find anything on google, has anyone come across this?
Many Thanks,
#Kave You uploaded only plain html to jsfiddle - which includes links to js which doesn't exists (so its kind of hard to debug when js is not attached)..
Try using a href instead of so many buttons.. twitter bootsrap supports styling of links to look like buttons, example is at first page of twitter bootstrap like this: (source copied & bit of modified):
<a class="btn btn-success btn-large" href="http://twitter.github.com/bootstrap/base-css.html">Example link with button styles</a>
Edit: Alternatively, full example with twitter bootstrap (modified from demo templates - link with button styles inside a hero unit) - copy & paste to file, save as testing.html and open with browser - enjoy!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="http://getbootstrap.com/2.3.2/assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-success btn-large" onclick="alert('its working :)')">Learn more »</a></p>
</div>
</div>
</div>
<hr>
<footer>
<p>© Company 2012</p>
</footer>
</div><!--/.fluid-container-->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://getbootstrap.com/2.3.2/assets/js/jquery.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-transition.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-alert.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-scrollspy.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tab.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-popover.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-button.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-collapse.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-carousel.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
IF still not working, make sure when you restart IE that you click "Allow blocked content" if pop-up for asking it is shown.
Allow blocked content referes to javascript content,the buttons are purelly CSS code,the problem is that IE 6....8 don't have a very good support for CSS3.
If you look on the getbootstrao.com website you dont see them using their own buttons :))
the best solution is create buttons using simple CSS,if someone using IE is browsing your website they might not see the border-radius effect but they will find actual square but working buttons.
I had the same problem and solved it using this jQuery/js:
<a href="http://www.example.com">
<button class="btn"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Button text</button>
</a>
<!--[if lt IE 9]>
<script>
$(".btn").click(function() {
var t = $(this).parent();
window.location.href = t.attr("href");
});
</script>
<!--[if lt IE 9]>
I've looked all over for more information on this, and would like to know why it happens.
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<div style="position:absolute; top:200px; left:200px; height:200px; width:200px; border:1px solid black; filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9886188373396114, M12=-0.15044199698646263, M21=0.15044199698646263, M22=0.9886188373396114);">
<div style="position:absolute; top:10px; left:10px; border:1px solid darkblue;">
I do not rotate in IE 8.
</div>
</div>
</body>
</html>
The problem is that absolutely or relatively positioned elements within a div that has been rotated using MS's dximagetransform.matrix do not inherit the transformation in IE 8.
IE 6 & 7 render correctly, and I can solve the IE8 problem by triggering compatibility mode, but I'd rather not do that. Does anyone have any experience with this? I'm using css3 transform on other browsers and using dximagetransform.matrix to achieve this effect in IE.
EDIT: Added the opening html tag. Problem still exists.
http://i45.tinypic.com/nf4gmq.png
I solved it magicaly just adding z-index: 1 to parent element with matrix filter. Well, any z-index should work.
I think the position absolute stops the filter from inheriting. I found the same thing when I was experimenting with blur filters recently, except in that case I wanted a way to make the filters stop inheriting. I hadn't realised IE8 was different from IE6/7 in this respect.
Is this the effect you're trying to get?
(source: boogdesign.com)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<div style="position:absolute; top:200px; left:200px; height:200px; width:200px; border:1px solid black; filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9886188373396114, M12=-0.15044199698646263, M21=0.15044199698646263, M22=0.9886188373396114);">
<div style="margin-top:10px; margin-left:10px; border:1px solid darkblue;">
I do not rotate in IE 8.
</div>
</div>
</body>
</html>
Of course, if you needed the child element absolutely position for a specific reason you may be out of luck (might be able to achieve something with floats, but it would depend exactly what you needed).
Noticed a problem with a simple splash page using jquery.cycle.
http://www.rynicdesign.com/
With firefox (firebug installed), the rotating images will not display the first time the page is accessed (without cache - ctrl-f5) yet will load properly on subsequent requests.
Not seeing this condition with other browsers (ie, chrome, safari).
Any ideas why?
(page is small - but here is relevant info)
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css&2.8.0r4/build/base/base-min.css" />
<link rel="stylesheet" type="text/css" href="/templates/splash/css/splash.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.73.js"></script>
<script type="text/javascript"><!--//--><![CDATA[//><!--
$(document).ready(function() {
$('.middle').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
autostop: 1,
timeout: 2500 // milliseconds between slide transitions (0 to disable auto advance)
});
});
//--><!]]></script>
</head>
<body id="page">
<div id="doc4" class="main-frame">
<div class="top"></div>
<div class="middle" align="center">
<img src="/templates/splash/images/rynic-design.gif" alt="Welcome to RYNiC Designs" />
<img src="/templates/splash/images/enter.gif" alt="click to enter website" />
</div>
<div class="bottom"></div>
</div>
</body>
</html>
And here is splash.css
html, body, #page, #doc4 {height:100%;margin:auto;}
.top, .middle, .bottom {clear:both;overflow:auto;display:block;}
.middle {background-color:#ffffff;overflow:hidden;}
.top, .bottom {height:35%;}
.top {background: #ffffff url(/templates/splash/images/left-bg.gif) repeat-y scroll top left;}
.bottom {background: transparent url(/templates/splash/images/right-bg.gif) repeat-y scroll top right;}
#doc4 {background:transparent url(/templates/splash/images/right-bg.gif) repeat-y scroll right bottom;}
I've seen this problem before (this is an excerpt of my earlier answer to Jquery Cycle + Firefox Squishing Images).
The problem is that Firefox fixes the img element's size once and for all at the point the display style is set to none (when you start cycle). So if the image hasn't finished loading (which it probably hasn't on an initial GET request), its height and width style attributes are small (I'm not sure exactly what they correspond to - perhaps the size of Firefox's image placeholder, though in your case it comes up 164 X 16 pixels).
On subsequent requests, Firefox knows their dimensions since they're in the cache (I'm guessing a bit here: maybe it just loads them before cycle can set display: none).
You can solve this by specifying your middle div's size in advance:
#middle {
width: 974px;
height: 110px;
}
(That is, as long as you're not doing anything complicated with your images - my web site is dynamically loading images of varying size so I had to perform additional footwork.)