The question has to do with Firefox refreshing the browser window to 100% when a function is called.
If the browser view is at say, 75%, and I use .click method on a link - the page refreshes at 100% THEN the function executes. Safari executes the function without refreshing the window.
The code now looks like:
function hideFlag(){
$("#ftm").click(function () {
var stageWidth = $("#window_div").width();
if (stageWidth <= 1200){
$( "#window_div" ).animate({
width: 1250,
opacity: ".8",
}, 1000 );
$( "#flagDiv" ).animate({
opacity: "0",
}, 1000 );
}
else{
$( "#window_div" ).animate({
width: 500,
opacity: ".6",
}, 1000 );
$( "#flagDiv" ).animate({
opacity: "1",
}, 1000 );
}
});
}
In Firefox, if my browser view is zoomed out to 75% and I replace the .click() method with .mouseenter, the divs animate without the screen redrawing or resizing on mouseenter. I don't understand the difference between the click() and mouseenter() implementations.
Solved it.
It was far simpler than I thought. Proper use of the "return false;" argument on the click method
solved my problem. Revised code is as follows:
function hideFlag(){
$("#ftm").click(function () {
var stageWidth = $("#window_div").width();
if (stageWidth <= 1200){
$( "#window_div" ).animate({
width: 1250,
opacity: ".8",
}, 1000 ); return false;
$( "#flagDiv" ).animate({
opacity: "0",
}, 1000 ); return false;
}
else{
$( "#window_div" ).animate({
width: 500,
opacity: ".6",
}, 1000 );return false;
$( "#flagDiv" ).animate({
opacity: "1",
}, 1000 );return false;
}
});
}
Thanks all for the help.
Not that this a direct answer to your question, but it's rather long for a comment.
You're using jQuery. I think you're missing the point of the whole cross-browser-library thing. Change
stageWidth = document.getElementById("window_div").clientWidth
to
stageWidth = $("#window_div").width()
no browser-specific code needed. There also no need for that addEventHandler function when using jQuery. It takes care of the differences between browsers so that you don't have to. That means you can change the setUpClickHandler function to this:
function setUpClickHandler() {
$('#ftm').click(hideFlag);
$('#ath').click(showFlag);
}
and change showFlag to this:
function showFlag(e){
$('#flagDiv').show();
}
and change
addEventHandler(window, "load", setUpClickHandler, false);
to
$(window).load(setUpClickHandler);
Related
I wanna move content with animation.
There's an animation in the jquery function, like that:
.on('click', '.btn', function () {
var contentWidth = $(window).width() - $('.sidebar').width();
$( ".content" ).animate({
left: "+=1000",
}, 5000, function() {
// moving content function
}
);
});
So, because I have various positions of content, I need to use this value in the variable contentWidth. How I can set this value in a variable and decrement the left value every time when I call a function?
Something like left: "+=contentWidth" doesn't work. Is where I make mistake?
Not sure if i got it but...
maybe you could use string interpolation
.on('click', '.btn', function () {
var contentWidth = $(window).width() - $('.sidebar').width();
$( ".content" ).animate({
left: `+=${contentWith}`,
}, 5000, function() {
// moving content function
}
);
});
Not tested but should work theoretically
I have been experimenting with Javascript animations for the first time recently and have run into this problem on one of my projects.
The below jquery scrolls horizontally without a problem. However when I add a second value in an attempt to scroll vertically nothing happens, and no errors are thrown up.
$( ".space_background" ).ready(function() {
$( ".space_background" ).animate({
backgroundPosition: "+=200px"
}, 5000, function() {
});
});
The below code is what I thought I would have to add to achieve the effect
$( ".space_background" ).ready(function() {
$( ".space_background" ).animate({
backgroundPosition: "+=200px 200px"
}, 5000, function() {
});
});
I have also tried backgroundPositionX and backgroundPositionY, neither of which work.
Any help sorely appeciated
To move background in vertical direction using jQuery
$( ".space_background" ).ready(function() {
$( ".space_background" ).animate({
backgroundPositionY: "+=200px"
}, 5000, function() {
});
});
Above code works for few browsers reason being jQuery can't animate background position properly as one need it to animate with two values. Above code is working for browsers that implemented the non-standard background-position-x and -y like Internet Explorer. So you need to use any plugins for this like following -
/**
* #author Alexander Farkas
* v. 1.02
*/
(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);
or
http://snook.ca/technical/jquery-bg/jquery.bgpos.js
Now you can write following code to animate backgrond position using jQuery
$( ".space_background" ).animate({backgroundPosition:"(-150px 0)"});
For more reference:
http://snook.ca/archives/javascript/jquery-bg-image-animations
I'm testing out some code for making names float around randomly. My general question is how do we apply variables to style attributes? My specific example is as follows. First I tried this:
<body>
Is this it?
<button id="go">ยป Run</button>
<div id="floatName" style="left:50px; top:150px">James</div>
<div id="n2">Sarah</div>
<script>$( "#go" ).click(function() {
$( "#floatName" ).animate({
left: "100px",
top: "200px"
}, 500, function() {
// Animation complete.
});
$( "#2" ).animate({
left: "300px",
top: "20px"
}, 500, function() {
// Animation complete.
});
});
</script>
</body>
This works as I expected. Next I wanted to randomize the animation to that the left and top change. However, I don't know how to do this. One try looks like this:
$( "#floatName" ).animate({
x = Math.random()*500
y = Math.random()*500
left: x + "px",
top: y + "px"
}, 500, function() {
// Animation complete.
});
Obviously didn't work and I'm having problems finding the solution.
http://jsfiddle.net/veqne72f/
$( "#floatName" ).animate({
left: Math.random()*500 + "px",
top: Math.random()*500 + "px"
}, 500, function() {
// Animation complete.
});
As the title says and if I remove the setTimeout method it works but I need a delay before the function fires.
$( ".pa-wrap" ).hover(
function() {
$( this ).find( ".pa-ano-wrap" ).css({
"display": "block",
"opacity": 0
}).animate({
"opacity": 0.8
}, 200);
}, function() {
$( this ).find( ".pa-ano-wrap" ).animate({
"opacity": 0
}, 200);
setTimeout(function() {
$( this ).find( ".pa-ano" ).css({
"height": "24px",
"top": "-33px"
});
}, 201);
}
);
That's because this refers to the current context which has changed by setTimeout, thus you need to bind it to the one you want:
setTimeout(function() {
// ...
}.bind(this), 201);
Also I would recommend from both performance and readility reasons to cache the element:
var paWrap = $('.pa-wrap');
paWrap.hover(function() {
paWrap.find('.pa-ano-wrap').css({
// and so on
});
It also helps with all this this confusion since you always know what this refers to.
If the following code works (which certainly does)
$( 'html, body' ).animate(
{
"scrollTop": "500"
},
500
);
then why doesn't the following code work?
$( window ).animate(
{
"scrollTop": "500"
},
500
);
If the following code works
$( window ).scroll( myScrollFunctionHandler );
then why doesn't the following code work?
$( 'html, body' ).scroll( myScrollFunctionHandler );
Can somebody please make a comprehensive explanation as to why this has to be this way?
window does not have a scrollTop property, which is why your first example doesn't work. document.body does.
As to your second example, $(window).scroll is the event handler installer for window.onscroll. There is no "body onscroll" event, so obviously an event handler installed on the body (or html) element won't be invoked, as events do not bubble down the DOM, but only up.
This should be due to the internal working of $(window).animate(). Experiment results suggested that inside this jQuery animate() code, $(window).scrollTop() would ALWAYS return zero and $(window).scrollTop(value) could NOT set the value properly.
However, these work before the animate() and in its step callback function. Thus, the code like below would work properly.
function scrollNow(final_val){
var initial_val = $(window).scrollTop(),
diff = final_val - initial_val
;
$(window).animate(
{
scrollTop: diff,
},
{
duration: 1000,
step: function(now, fx){
$(window).scrollTop(initial_val + now);
}
}
);
}