Im having this problem only with IE8 it even works well on IE6!!...
Im appending 2 divs dynamically to the body and absolute positioning them so they get one above the other so it looks like one div... this works ok, untill i make then transparent with
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
I made the simplest demo to show the problem: http://anferth.com/tests/divs-problem/
In the demo first appear the two divs without opacity, they look like one, but 1sec after it sets the opacity to 0.5 and the divs get separated by 1px (only in IE8).
The code here: http://jsfiddle.net/messutiEdd/MNPrq/
Thanks in advance
If you have an off-by-one-pixel bug in IE8 that other people can't reproduce, chances are good that you have the page zoomed to something other than the default level. IE doesn't seem to be great at scaling the page in some cases, and so zooming will sometimes cause problems with object positioning and image scaling.
Try resetting your zoom level and see if the problem disappears. I'd guess that (a) there's not a lot you can do about this, and (b) that people who habitually use zoom in IE8 are used to these little issues and probably won't shout about it...
After playing around with your sample i have come up with this:
$(document).ready(function() {
$("body").append('<div class="af_sel af_right"></div>');
$("body").append('<div class="af_sel af_bottom"></div>');
var _top = (screen.deviceXDPI / screen.logicalXDPI) < 1 ? 291 : 290;
$(".af_sel.af_right").css({
'top': _top ,
'left': 202,
'width': 400,
'height': 114
});
$(".af_sel.af_bottom").css({
'top': 404,
'left': 202,
'width': 400,
'height': 263
});
$(".af_sel").css({
'position': 'absolute',
'display': 'none',
'z-index': '1000'
});
setTimeout(function() {
$(".af_sel").show();
setTimeout(function(){
$(".af_sel").css({
'filter': ' alpha(opacity=50)'
});
}, 1000);
}, 2000);
});
window.onresize = function()
{
var _top = (screen.deviceXDPI / screen.logicalXDPI) < 1 ? 291 : 290; // (screen.deviceXDPI / screen.logicalXDPI) = Zoom Level
$(".af_sel.af_right").css({
'top': _top ,
'left': 202,
'width': 400,
'height': 114
});
}
There is still a pixel gap when zoomed to 125%, however this should set you on your way.
to get the current zoom factor you will use (IE8) screen.deviceXDPI / screen.logicalXDPI
this will return zoom relative to 1. i.e 75% = 0.75, 100% = 1, 125% = 1.25, ect...
Best of luck!
Related
I have a number of divs positioned absolutely on a background image.
On the page will also be some buttons. When those are clicked different variables will trigger, shrinking and growing these divs.
Here is the javascript I'm currently using...
$(document).ready(function() {
var title = 1;
$(".button1").click(function() {
title = 1;
});
$(".button2").click(function() {
title = 2;
});
$(document).click(function(e) {
console.log(title);
if (title==1){
$('.london').animate({ backgroundColor:'green', width:'50', height:'50' }, 300);
} else if (title==2){
$('.london').animate({ backgroundColor:'red', width:'40', height:'40' }, 300);
}
});
});
As they are absolutely positioned they are scaled from the corner they are positioned with.
see an example here.
What I need to do is shrink and grow these divs from their center point. The only solutions I've seen seem overly complicated.
I guess I could add a negative margin of half the divs width in the jQuery to counteract this? I'll try that if there are no better solutions
Thanks for any help.
bboybeatle, your "negative margin of half the divs width" idea is spot on, and not at all difficult to implement. Just include the required marginTop and marginLeft settings in the two animations.
$(function() {
var cssMap1a = {
backgroundColor: 'green'
};
var cssMap1b = {
width: 50,
height: 50,
marginTop: -10,
marginLeft: -10
};
var cssMap2a = {
backgroundColor: 'red'
};
var cssMap2b = {
width: 30,
height: 30,
marginTop: 0,
marginLeft: 0
};
$(".button1").click(function () {
$('.london').css(cssMap1a).animate(cssMap1b, 300);
});
$(".button2").click(function () {
$('.london').css(cssMap2a).animate(cssMap2b, 300);
});
});
And here's a fiddle. Fiddles are not difficult to set up. Hopefully this will help you next time you need to ask a question here.
As you will see :
"London" and the buttons are moved to a better position for demo purposes
The colour changes are separated out as separate css maps. They didn't work in the fiddle when included in the animation maps. jQuery needs a plugin to animate colours.
Thanks very much for that #Roamer-1888, I actually used some variables to make it slightly easier to apply the margin. I will remember that technique of putting multiple css properties in a variable..
Heres a snippet of my code I ended up using...
londonMargin = london/2 - london;
$('.london').animate({ width:london, height:london, marginLeft:londonMargin, marginBottom:londonMargin }, 300);
Just for fun I put together a little FIDDLE that has a function to which you pass an element name, the x and y coordinates of the center, and it will position the element in the larger element.
JS
var myelement = $('.boxdiv');
var myelement2 = $('.boxdiv2');
putmycenter( myelement, 90, 90 );
putmycenter( myelement2, 160, 280 );
function putmycenter (element, x, y)
{
var boxdivxcentre = element.width()/2;
var boxdivycentre = element.height()/2;
var boxdivposx = (x - boxdivxcentre);
var boxdivposy = (y - boxdivycentre);
element.css({
"top" : boxdivposy + 'px',
"left" : boxdivposx + 'px'
});
}
i am using one plugin for slider. That slider contains H & W is mentioned by pixel. I want that in %
$("#section4").awShowcase(
{
content_width: 1000,
content_height: 300,
}
});
They are mentioned by like this. how to change this by % - Percentage.
I want that for responsive model
Try to use:
$("#section4").awShowcase({
content_width: '50%',
content_height: '50%',
//} // Remove this
});
Also, you're having redundant } in your code.
$("#section4").awShowcase(
{
content_width: 100%,
content_height: 30%,
}
});
Is this what you looking for?
I am trying to make a fairly simple animation; on mouse over, the button will animate to be bigger. When not hovering, it will return to it's original size. However, whenever when I try this sample code, it warps the button to odd sizes
$('.btn').hover(function() {
$(this).removeClass('btn-primary').addClass('btn-warning');
$(this).stop().animate({
'height': $(this).height() * 2,
'width': $(this).width() * 1.3
}, 300);
}, function() {
$(this).removeClass('btn-warning').addClass('btn-primary');
$(this).stop().animate({
height: $(this).height(),
width: $(this).width()
}, 300);
});
http://jsfiddle.net/RBLqY/1/
how could this problem be solved?
I'm not entirely sure why your code is failing, seems like you have some sort of calculation error when returning to the original size. After fiddling around a bit I found this solution. By animating the padding instead of the height and width you don't have to worry about the height width ratio when it comes to resizing the link.
$('.btn').hover(function() {
$(this).removeClass('btn-primary').addClass('btn-warning');
$(this).stop().animate({
padding: '12px'
}, 300);
}, function() {
$(this).removeClass('btn-warning').addClass('btn-primary');
$(this).stop().animate({
padding: '7px'
}, 300);
});
jsfiddle
Hope this helps.
I'm trying to animate a menu where the hovered block is getting bigger, while the siblings are offering their space for this size increase. All blocks together are taking up the whole window width.
I successfully accomplished that using some basic Jquery, but the result is a bit clunky.
The rightmost div suffers from all the calculations and rounding :
var width = $(window).width() - 44;
var blockwidth = width/12;
var blockwidthLarge = blockwidth+154;
var blockwidthSmall = blockwidth-14;
$('.headerblock').css('width',blockwidth+'px').hover(function()
{
$(this).siblings().stop(false,false).animate({width: blockwidthSmall},300);
$(this).stop(false,false).animate({width: blockwidthLarge},300);
},function()
{
$(this).siblings().stop(false,false).animate({width: blockwidth},300);
$(this).stop(false,false).animate({width: blockwidth},300);
});
This is a working jsfiddle (I would recommend to resize the preview frame to something larger to increase the effect's visibility):
jsfiddle
How can I improve this to have the boxes appear stable? Maybe this has already been developed?
The website should be IE8+ compatible, so I cannot use fancy css rules.
There's a jQuery plugin called hoverIntent by Brian Cherne that might solve your issue.
Basically, what it does is only firing the hover event when it thinks that the user actually meant to hover. It's a little less fluid than the original, but it works big time and looks fancy.
Here's a fiddle with the plugin added under "External Resources" and the
$('.headerblock').hover(function() {
changed to ".hoverIntent"
http://jsfiddle.net/Matze/c4uyR/1/
var width = $(window).width() - 44;
var blockwidth = Math.round(width / 12);
var blockwidthLarge = blockwidth + 154;
var blockwidthSmall = blockwidth - 14;
$('.headerblock').css('width', blockwidth + 'px').hoverIntent(function ()
{
$(this).siblings().stop(false, false).animate({
width: blockwidthSmall
}, 300);
$(this).stop(false, false).animate({
width: blockwidthLarge
}, 300);
}, function () {
$(this).siblings().stop(false, false).animate({
width: blockwidth
}, 300);
$(this).stop(false, false).animate({
width: blockwidth
}, 300);
});
I am creating a coverflow plugin but I have a slight problem when it first loads.
The size/styles of the images is set based on their position in the coverflow. When the page first loads the images all resize properly but they do not reposition themselves. If I them use the left and right navigation they work correctly.
I am not sure what is causing this. I thought it might be something to do with the variable that sets the starting position of the coverflow...
Here's my code:
<script type="text/javascript" src="/scripts/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var coverflowPos = Math.round($('#coverflow img').length / 2)
$('#coverflow img').each( function(i) {
$(this).css({'opacity' : 1-(Math.abs(coverflowPos-i)*0.4), 'z-index' : 100-(Math.abs(coverflowPos-i)) }).width(200-(Math.abs(coverflowPos-i)*50)).height(128-(Math.abs(coverflowPos-i)*50));
});
// If I run the testme() function here, it animates to the right place but I want it to start in this position rather than animate to it
$('#moveLeft').click( function() {
if(coverflowPos > 1) {
coverflowPos = coverflowPos-1
}
testme();
});
$('#moveRight').click( function() {
if(coverflowPos < $("#coverflow img").length -1) {
coverflowPos = coverflowPos+1
}
testme();
});
function testme() {
$('#coverflow img').each( function(i) {
$(this).animate({
opacity: 1-(Math.abs(coverflowPos-i)*0.4),
width: 200-(Math.abs(coverflowPos-i)*50),
height: 128-(Math.abs(coverflowPos-i)*50)
}, {
duration: 500,
easing: 'easeInOutSine'
}).css({ 'z-index' : 100-(Math.abs(coverflowPos-i)) });
});
};
});
</script>
And here's a link to a jsfiddle:
http://jsfiddle.net/r8NqP/4/
Calling testme() at the end of the ready() function moves them into place. It does ease them in though, which looks a bit odd, could get rid of the ease in testme() by adding a doease parameter.
Check you fist each :
'z-index' : 100-(Math.abs(coverflowPos-i)) }).width(200-(Math.abs(coverflowPos-i)*50)).height(128-(Math.abs(coverflowPos-i)*50));
I think U mean:
'z-index' : 100-(Math.abs(coverflowPos-i)),
'width' : 200-(Math.abs(coverflowPos-i)*50),
'height': 128-(Math.abs(coverflowPos-i)*50)
Linke In your testme() function ?!
After that, you can also add a "Hack", by executing testme(true); at the end of script.
And add, in your testme() function , a test parameter to set the duration at 0 or simply disable animate and replace by CSS().
But, it just a Hack.
200-(Math.abs(coverflowPos-i)*50) may be less than 0 -- e.g.,
200-(5-0)* 50= 200 - 250 = -50
And the negative width ends up not being applied, leaving the width at its original 200px value. The opacity gets set properly, so all you get is a huge blank space where the image is.
var width = 200-(Math.abs(coverflowPos-i)*50);
if ( width < 0 ) width = 0;
covers the init nicely.
I haven't bothered to check why it's okay once it's animated -- my guess is, that the images were already small, so it's not as noticeable.
The problem came from "Each index", that not correctly used to compute the Width and Height of the first image.
Try this :
$('#coverflow img').each( function(i) {
i++;
$(this).css({...
And remove the Blank.gif...
Here, you find my fork fiddle : http://jsfiddle.net/akarun/FQWQa/