Comments (7)
GoogleCodeExporter
commented on June 13, 2024
Can you provide simple test case so I can add this to a test cases please ?
Thank you!
Original comment by [email protected] on 10 Mar 2011 at 2:58
from jqueryrotate.
GoogleCodeExporter
commented on June 13, 2024
A part of one of my website:
HTML
<div style="position: relative; float:left;
display:inline;width:400px;height:400px">
<a class="photo1" href="image.jpg"><img alt="" class="cnv"
src="image_small.jpg" /></a>
</div>
CSS
.photo1
{width:200px;z-index:10;position:absolute;top:0px;left:0px;float:left;display:in
line;}
.photo1 img.cnv {width:100%;}
JQUERY
$('.photo1 img.cnv').rotate(8);
Original comment by [email protected] on 10 Mar 2011 at 3:05
from jqueryrotate.
GoogleCodeExporter
commented on June 13, 2024
Well using width:100% is not very safe as this might causing problems. Its
always better to rotate image with not changed width/height (this changes
aspect ratio of images and makes rotation harded). Is this still happening if
you remove that?
Thanks!
Original comment by [email protected] on 10 Mar 2011 at 9:29
from jqueryrotate.
GoogleCodeExporter
commented on June 13, 2024
Yes.
I tried to remove { width:100% } from image, but the bug still remain.
In other cases I used { left:0; top:0; } to fix position absolute bug in IE,
because if you set a DIV with { position: absolute; } without "left" IE set the
top-left corner of the DIV in the middle of the container.
PS. Sorry for my bad english. I'm italian ;)
Original comment by [email protected] on 11 Mar 2011 at 7:14
from jqueryrotate.
GoogleCodeExporter
commented on June 13, 2024
Hi,
I tried to reproduce error but I cant. Here is what I have based on what you've
told me. Can you please check it and try to make it reproducable? Currently I
tested this on IE6/IE7/Chrome and got exactly the same results o_O
<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script type='text/javascript' src='http://jqueryrotate.googlecode.com/files/jQueryRotate.2.0.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
$('.photo1 img.cnv').rotate(8);
});
</script>
<style type="text/css">
.photo1 {width:200px;z-index:10;position:absolute;top:0px;left:0px;float:left;display:inline;}
.photo1 img.cnv {width:100%;}
</style>
</head>
<body>
<div style="position: relative; float:left; display:inline;width:400px;height:400px">
<a class="photo1" href="image.jpg"><img alt="" class="cnv" src = 'http://4.bp.blogspot.com/_9a9gJG-E2Ig/SAsb-ijoBJI/AAAAAAAAAAk/OM7W_4sBAgk/s320/agatka.jpg'/></a>
</div>
</body>
</html>
Original comment by [email protected] on 11 Mar 2011 at 8:59
from jqueryrotate.
GoogleCodeExporter
commented on June 13, 2024
Ok.
I've reproduced the bug.
The code:
<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script type='text/javascript' src='http://jqueryrotate.googlecode.com/files/jQueryRotate.2.0.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
$('.photo1 img.cnv').rotate(8);
});
</script>
<style type="text/css">
.photo1 {width: 180px; z-index:10; position: absolute; top:20px; left:190px; float:left; display:inline; text-align: center; vertical-align: middle}
.photo1 img.cnv {width:100%;}
</style>
</head>
<body style="height: 614px; width: 990px; float:left; display:inline; position: relative;">
<div style="width: 415px; height:520px; overflow:hidden; margin: 25px 0 0 55px; padding: 0px; float:left; display:inline; text-align:left; position:relative;">
<a class="photo1" href="image.jpg"><img alt="" class="cnv" src = 'http://4.bp.blogspot.com/_9a9gJG-E2Ig/SAsb-ijoBJI/AAAAAAAAAAk/OM7W_4sBAgk/s320/agatka.jpg'/></a>
</div>
</body>
</html>
Solution: In my css i've insert { text-align:center; } and IE gives importance
to that instead of { position: absolute; }
LoL
Pardon ;)
Original comment by [email protected] on 11 Mar 2011 at 9:59
from jqueryrotate.
GoogleCodeExporter
commented on June 13, 2024
Original comment by [email protected] on 28 Mar 2011 at 7:00
- Changed state: Invalid
from jqueryrotate.
Related Issues (20)
- using jqueryrotate with canvas not working as expected HOT 2
- Patch for /trunk/jQueryRotate.js HOT 1
- Throws error when page contains no 'HEAD' element HOT 4
- Issue on IE8 - not working properly in sequence of animation, after being called after first HOT 3
- "rotate" function doesn't allow string for angle parameter HOT 1
- Bower integration
- JQueryRotate not working when used within a jquery UI Dialog HOT 1
- Patch for /trunk/jQueryRotate3.js HOT 2
- Callback not working! HOT 1
- Using center with angle: 0 does not center the image at the specified coordinate HOT 3
- Not working in IE8 on a div HOT 1
- (supportedCSSOrigin[0] == "T") supportedCSSOrigin[0]="t" isn't useful
- Patch for /trunk/jQueryRotateExample.html
- http://visichattt.blogspot.com/ HOT 1
- JQueryUI HOT 1
- callback does not behave as expected HOT 3
- Rotating from (eg) 350degrees to 10degrees goes backwards HOT 4
- Not Working IN IE8 HOT 6
- SCRIPT5007: Error HOT 45
- jQuery Conflict in WP. HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jqueryrotate.