jquery animate background-size onload - javascript

I'm working on a Wordpress site (it's in "coming soon" mode so I can't give a link) where the client wants a background image to zoom slightly. I figured I could achieve this easily with CSS animation, manipulating the background-size. It worked great!... except in Safari and IE.
Why not use an image and set the z-index and use scale(), you ask? Well, they only want the background on one post. And that means 'post', not 'page', otherwise I'd just set up a new page template and be done. It forced me to specify the background image on the individual post body class (body.postid-23.custom-background {...}).
So I need a way to animate the background-size, without hovering or clicking, as soon as the page loads. Anyone do this before? Any help is appreciated. I'm not a javascript/jquery coder, but I can use them well enough to make it work for my sites.

This is what you want:
$(function() {
$("yourSelector").animate({
backgroundSize: "100px 100px"
});
});

Just use the document.ready function in this way :
$(document).ready(function) {
$("selctorOfYourBackgroundImage").animate({
backgroundSize: "100px 100px"
});
});
As soon as the DOM has finished loading, the animation will occur!

This will fire once the page has finished loading.
$( document ).ready(function() {
console.log( "ready!" );
});
Not sure if you require the code in the middle aswell?

Related

Using setIntervel() to offset content on page with fixed header with dynamic height

My problem is very similar to this one except the thing that fixed element may change his height dynamically during application lifecycle (other data, viewport change, etc... ).
I'm using setInterval() function with 100ms interval to update offset of content element depending on header height.
jQuery(function($){
setInterval(function(){
$('article').css('padding-top', $('header').outerHeight());
}, 100)
});
Here is jsfiddle for it (change the width of the resulted page to see how it works).
For user experience it looks just great, but I'm curious is there a better way?
What are the disadvantages of this approach?
The major disadvantage is that you consume CPU every 100ms. And it doesn't do anything most of the time.
There is a better way. Just emit an event after the fixed element changes height and bind your css adjusment to it. Something like:
$(document).trigger('my_element_changed_height');
wherever the height changes and
$(document).on('my_element_changed_height', function() {
$('article').css('padding-top', $('header').outerHeight());
});
I suppose you can use jquery.ba-resize.js library. Here is a link: http://benalman.com/projects/jquery-resize-plugin
It allows you to use resize event on any DOM element. But if I'm not mistaken this library uses setTimeout functionality and I'm not sure that's better in performance.
UPDATE: time goes and web evolve, position: sticky
header{
position: sticky;
}
Old Answer:
Here is another solution that comes to my head. I was thinking how would be great have such position : fixed-relative :) (That fixed on viewport but doesn't desapear from normal flow) And here is an idea how to emulate this behaviour. Set header element position as relative.
header{
position: relative;
}
And add some listner to scroll event.
jQuery(function($){
$(window).scroll(function(){
$('header').css('top',$(this).scrollTop() );
});
});
It's much pretty than have infinity loop with setInterval or trigger some event across your application.
Unfortunately it will not work on most touch devices

Javascript Scroll by one pixel on load of a div

I am using a mixture of jQueryTools overlay (lightbox type thing) and a scroll-bar called Perfect Scrollbar. The problem I have is that when the overlay is loaded the scroll-bar doesn't show until you scroll within that box. I need to be able to make it clearer so that everyone knows it is a scroll-able content box. One way this could be possible is to make the content box scroll up one pixel when the overlay is opened. I have found the following code
$(".scroll-content").load(function() {
window.scrollBy(0,-1);
}
which I have been told should work but no matter what I can't get it to scroll at all.. Is there something i'm doing wrong?
Since you have the scroll bar method bind to an element that is initially in a 'hide' status, in fact .BigSuperBlock .block_overlay is hidden by display:none; in Css, the plugin can not properly calculate the height of the overlay container.
So, when you call the function that show-up the 'overlay' container, you have to call the method on the scroll-content class:
$('.scroll-content').perfectScrollbar('update');
You can find the documentation of this in the author's page.
To make it works, you have to call the plugin 'update' method, again, in the jQueryTools modal function, as a callback.
$(".block_overlay").overlay({
onLoad: function(event) {
$('.scroll-content').perfectScrollbar('update');
// here you update the perfectScrollbar plugin
},
onClose: function(event) {
// other custom code
}
});
Try with this:
jQuery("container").animate({ scrollTop: 50 }, 800);
Give that you want to make clear that there is a scrollbar, you can have it on all the time if you change the perfect-scrollbar.css
.ps-container .ps-scrollbar-x-rail {
...
opacity: 0.6;
}
.ps-container .ps-scrollbar-y-rail {
...
opacity: 0.6;
}

Smoothly Fade In Entire Web Page With MooTools

I want to fade in an entire web page after all its elements finished loading. The web page includes the background image repeated left to right, and the main content area with some text and pictures. I assume I should set body opacity to 0 in CSS, and use JavaScript code to fade in the page.
I have to use MooTools, more specifically, version 1.2.6, because that library is already linked to the page (and shouldn't be upgraded to a more recent version, for a number of reasons).
One of the StackOverflow experts suggested this MooTools snippet as a solution:
window.addEvent('load', function() {
$$('body').set('morph', {duration: 300}).morph({'opacity': '1'});
});
PROBLEM: for some reason, instead of smoothly fading in the page, the snippet makes the background appear right away, and then, a second or so later, the page pops up, without any fade-in effect. Most likely it's me who's not doing things right.
I'd appreciate a bit of advice from a knowledgeable person.
The answer to your question is to do the following.
Remove the CSS opacity:0; in the stylesheet and use this code adjusted from yours
I increased from 300 to 3000 which in seconds is from .3seconds to 3seconds.
chained:
window.addEvent('load', function () {
$$('body').fade('hide').set('morph', {
duration: 3000
}).morph({
'opacity': '1'
});
});
expanded:
window.addEvent('load', function () {
var el = $$('body');
el.fade('hide'); // hide body tag
el.set('morph', {duration: 3000});
$$('body').morph({'opacity': '1'});
});
Notice:
I do agree with LifeInTheGrey about bad practice, but i said i would answer your question.

Issue when trying to use CSS transitions with jQuery Isotope

I've replicated the fluid/responsive mode of Isotope: http://isotope.metafizzy.co/demos/fluid-responsive.html but with the addition of animating the width of the clicked element using "transition: width 0.3s". This does work, however it disables the 'reLayout' animation of which I'm triggering on 'transitionend'.
I'm thinking that one is overriding / conflicting with the other. Has anyone had similar issues or know a way around this? I've tried setting 'animationEngine : 'jquery', and this does resolve the issue, but it looks terrible - browser re-paining issues!?
Thanks for any help!
And here's a live demo...
http://www.voyced.com/isotope-test/
If you disable the css property "transition: width 0.3s" in the developer tools the 'reLayout' animation works again.
Issue a $(window).resize() after you animate the item.
or
$container.isotope('reLayout', function() {
$(window).resize();
});

element animation

i saw an effect in iconArchive site and i don't no how to apply it if one of you help me to get the idea with small example this will be nice.
under this link :http://www.iconarchive.com/search?q=share&page=3 if you go over the heart img then a copy of it will move to the bottom and add the icon you have selected. i have no idea how to start for that reason i don't have any code .
i think they use java script +jquery+ css to do it.
The jQuery animate function can do this neatly: http://jsfiddle.net/bX6Uk/.
$('#button').click(function() {
$('#div').animate({
top: 300,
left: 10,
}, 'slow');
});
To achieve the specific effect on your example page you should check out the jQuery UI Transfer effect.

Categories

Resources