I created the notification bar with the text effect everything seems ok but when i add the text effect like moving from left to right in that it seems work when in first time and after that it looks like this way see the FIDDLE
jQuery('.text').animate({
'right': '300px'
}, 'slow', 'linear').animate({
'left': '300px'
}, 'slow', 'linear').animate({
'left': '0',
'right': '0',
});
For the second time when i click expand it appears from center to right when i refreshing the page itself it appear properly for the first time.
Is there is a way to show the message as from left to right to center whenever i open the bar.
Thanks in Advance.
jQuery('.text').animate({
'right': '300px',
}, 'slow', 'linear').animate({
'left': '300px'
}, 'slow', 'linear').animate({
'left': '0',
'right': '0',
});
jQuery('.text').css('right', 'auto')
jQuery('.text').css('left', 'auto')
});
working demo : http://jsfiddle.net/UCTgR/12/ (Note: this demo has partial functionality yo just show what u missed, to check click on the banner)
Related
I'm having an issue with trying to reset a div, containing an image, to the original value after I have animated it.
So I have a sort of quiz with 6 pictures positioned next to each other.
The user has to select one of 6 pictures. When clicked on that picture I make the picture go fullscreen. Afterwards, when the user doubleclicks on the picture the picture should go back to the original position for the next question.
However the return is not working and I don't understand why.
Beware: the divsare floated divs with specific left-positions so I would need to retain these...
This is the animation-code:
$(".candidatePicture").click(function(e){
$(e.target).css('z-index', 1);
$(e.target).animate({top: '0', left: '0', width: '1920px', height: '1080px'}, 1000);
});
This is the return code:
$(".candidatePicture").css({ 'width': '250px', 'height': '300px', 'z-index': '0' });
You can find the code here: http://jsbin.com/gotuqenoce
Thank you for your help.
please try to change the events handlers as follow:
$(".candidatePicture").click(function(e){
var $this = $(this);
$this.css('z-index', 1);
$this.animate({top: '0', left: '0', width: '1920px', height: '1080px'}, 1000);
$this.off("click");
});
$( ".candidatePicture" ).dblclick(function(e) {
$(this).css({ top: '', left: '', 'width': '', 'height': '', 'z-index': '' });
showNextQuestion();
});
http://jsbin.com/latiqemozo/edit?html,output
I have the below code set up to move certain objects upon clicking an object, but you'll see in Safari and Chrome that the animation for the boxes is a bit off, whereas Firefox shows it correclty.
Is there a way to fix this bug?
http://coreytegeler.com/jg/
$(function(){
$("#nav li").click(function() {
$("#nav").css({
'left' : $(this).position().left + 'px',
'top' : $(this).position().top + 'px'
})
.animate({
'margin-top' : '-175px',
'margin-left' : '0px',
'left' : '10px',
'top' : '50%',
'height' : '370px',
'width' : '70px'
}, 500, 'swing');
$("#name").css({
'top': $(this).position().top + 'px'
})
.animate({
'top' : '100px'
} , 500, 'swing');
});
$("#nav li#a").click(function() {
$(".set#a").animate({
'opacity' : '1' ,
'top' : '50%',
'margin-top' : '-200px'
}, 500, 'swing');
});
});
What you are experiencing is the way that webkit handles conversion of an inline element into a fixed element. No matter what, it is going to default the left to 0 when you change the element to fixed, even if you explicitely tell it otherwise. You can ready more about how to work around it here: Center a position:fixed element
Basically you need to set the left position of the element to 50%, then calculate the a negative margin of 1/2 the width of the element.
Good luck and perhaps look at rewriting your code. You should check out JQuery chaining as some of your code is redundant. Also, since you are only targeting one element, you can drop the .each() as they are not needed. You would only use .each when you want to loop through a selector that could have returned more than one element. In your case, your selectors only target the one element. I've rewritten your code a bit to be more readable, less redundant:
$(function(){
$("#nav ul li").click(function() {
$("#nav ul").css({
'position' : 'fixed',
'left' : $(this).position().left + 'px',
'top' : $(this).position().top + 'px'
})
.animate({
'left' : '10px',
'top' : '50%',
'margin-top' : '-140px',
'height' : '280px',
'width' : '70px'
}, 500, 'swing');
$("#name").css({
'top': $(this).position().top + 'px'
})
.animate({
'position' : 'fixed',
'top' : '100px'
} , 500, 'swing');
});
$("#nav ul li#a").click(function() {
$(".set#a").animate({
'opacity' : '1' ,
'top' : '50%'}, 500, 'swing');
});
});
console.log("FADIG");
console.log(modal);
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
console.log("background GONE!");
modal.animate({
"opacity": 0
}, 300, function () {
console.log("FADED OUT MODAL");
modal.css({
'opacity': 1,
'visibility': 'hidden',
'top': topMeasure
});
unlockModal();
});
That's my JavaScript code. I know that it finds the object named modal just fine. It then immediately spits out background GONE! then it takes about 10 seconds for me to see FADED OUT MODAL. Which means the animate didn't run for a good 10 seconds.
Any idea why this would be?
Super simple... I think a few animations were being queued, so I changed it to:
modal.stop().animate and all is well
Need a bit of help with this query
Any way you guys can help?
-R
You must modify the leanModal.js source and add an <img> with some styling and click() handler calling close_modal().
Code:
$("<img />").css({
// styling for the img
'position': 'fixed', 'top': o.top + 'px', 'left': '50%'
}).click(function() {
// onclick behaviour - just close it
close_modal(modal_id);
// icon URL vvvvvvvvvvvvvvvvvvvvv
}).attr('src', 'http://bit.ly/ttN6Qs').appendTo($(modal_id));
See working code HERE.
Styling and icon-placement is very primitive, but you should be able to modify it how you like. It is only a demonstration :).
This is what I did for the div element:
$("<div >").css({
'position': 'absolute',
//'top': o.top + 'px',
'top': '-20px',
'right': '20px'
}).click(function() {
// onclick behaviour - just close it
close_modal(modal_id);
}).attr('class', 'cross-close').appendTo($(modal_id));
$(modal_id).fadeTo(200, 1);
e.preventDefault();
});
});
And had this has my CSS...
.cross-close:before {
content: "x";
}
I actually had the same issue, and resolved it by simulating the click on the overlay. For example, any link or image could be used and you simply add an onclick event:
Close
or
<img src="" onclick="$('#lean_overlay').click();" />
Seems to work well :D
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!