Images "jumps" into the grid? how to stup the jump effect? - javascript

This is my script;
<script src="http://static.tumblr.com/mviqmwg/XyYn59y3a/jquery.photoset-grid.min.js"></script>
<script>
$(document).ready(function() {
$('.photoset-grid').photosetGrid({
gutter: '0px',
});
});
</script>
<!-- /Photoset-grid script -->
This makes the images "jump into grid effect"
I want everything to show up normaly.
Is there a hide effect with css and then show it when everything is loaded?
Thank you for anny advice!

If you look at the source for Photosetgrid:
https://github.com/stylehatch/photoset-grid/
You can see that they use a simple style tag: style="visibility: hidden;"
If you prefer to use jquery it would be:
$(".photoset-grid").hide();
To make it visible it would be this way:
$('.photoset-grid-basic').photosetGrid({
onComplete: function(){
$('.photoset-grid-basic').attr('style', '');
//or $('.photoset-grid-basic').show();
}
});
You can see more info about its usage here:
http://stylehatch.github.io/photoset-grid/#demo-basic-usage

Related

Trigger a js animation when opening the page

I want to launch an animation as soon as my home page opens, but it takes time to display (the body remains displayed for a while).
My script :
$(document).ready(function(){
$('.logo').hide();
});
$(window).load(function(){
$('.logo').fadeIn('fast');
$(".logo").animate({
marginTop:'0px',
opacity:1
},200,'swing');
});
I tried to manipulate this code but I'm new to javascript :(
$(window).on('load', function() {
$('.logo').hide().fadeIn('fast').animate({marginTop:'0px', opacity:1}, 500, 'swing');
});
This code uses the $(window).on('load', function(){}) function to ensure that the entire page, including images and other assets, is loaded before running the animation.
The $('.logo').hide().fadeIn('fast').animate({marginTop:'0px', opacity:1}, 500, 'swing'); function hides the logo initially, then fades it in quickly, and finally animates it by moving it up by 0 pixels and setting the opacity to 1 over a period of 500 milliseconds using the "swing" easing function.
Note: Make sure that you have included the jQuery library in your HTML file for this code to work. You can do so by adding the following code in the head section of your HTML file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I hope this helps!
Great thanks a lot. I just forgot to say that the logo goes up. I forgot to script. I'm giving you all of it, but of course just the fact that the logo goes up is enough for me. Thanks again, you're GREAT :)
<!-- /logo descend -->
$(window).on('load', function() {
$('.logo').hide().fadeIn('fast').animate({marginTop:'0px', opacity:1}, 500, 'swing');
});
<!-- /Slider goes up a bit -->
$(document).ready(function(){
$('#slider').hide();
});
$(window).load(function(){
$('#slider').fadeIn('slow');
$("#slider").delay(400).animate({
marginTop:'-1200px',
opacity:1
},800,'swing');
});
<!-- /logo and Slider rise (2 scripts) -->
$(document).ready(function(){
$('.logo').hide();
});
$(window).load(function(){
$('.logo').fadeIn('slow');
$(".logo").delay(200).animate({
marginTop:'-2400px',
opacity:1
},800,'swing');
});
$(document).ready(function(){
$('sl.slider').hide();
});
$(window).load(function(){
$('.sl-slider').fadeIn('slow');
$(".sl-slider").delay(800).animate({
marginTop:'0px',
opacity:1
},800,'swing');
});

How can I change or remove the blue loading animation on masonry infinite scroll? [Tumblr]

I am trying to change the loading progress bar animation on my Tumblr theme to just look nicer than the regular blue loading bar over my container that I'd implemented masonry infinite scroll on.
I would prefer to use an loading bar animation that I'd created using cssload.net, but I'm open to removing or hiding the load bar all together as well. I have tried messing with it myself but I don't know anything about javascript or jquery.
Here is the code for my infinite scroll.
{block:indexpage}
{block:NextPage}
<div id="page-nav"></div>
{/block:NextPage}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/bswe8t6/UFVlryaq2/jquerymsnryv2.js"></script>
<script type="text/javascript">
$(window).load(function(){
var $wall = $('#container');
$wall.imagesLoaded(function(){
$wall.masonry({
itemSelector: '.entry, .entry_photo',
isAnimated : true
});
});
$wall.infinitescroll({
navSelector : '#page-nav',
nextSelector : '#page-nav a',
itemSelector : '.entry, .entry_photo',
bufferPx : 2000,
debug : false,
errorCallback: function() {
$('#infsrc-loading').hide('normal');
}},
function( newElements ) {
var $newElems = $( newElements );
$newElems.hide();
$newElems.imagesLoaded(function(){
$wall.masonry( 'appended', $newElems,{isAnimated: true}, function(){$newElems.fadeIn('slow');} );
});
}); $('#content').hide(500);
});
</script>
{/block:indexpage}
I did not write this code myself, I pulled it off of a base theme that I'd used in the past and put it into my custom theme I made for myself.
I tried adding a CSS tag for #infscr-loading to hide it, but I've had no luck.
Sorry if this question seems unclear, I am very new to coding (this is my first major project), and I only know the basics of HTML and CSS.
Here is a link to my site: http://www.katting.tumblr.com
Also I had tried following the steps given in this answer but I had no luck with that either.. and it only seemed to break my code.
Try adding this CSS class.
#infscr-loading {
display: none !important;
}

Slide DIV Right to Left with jQuery

I'm using jQuery code to animate a div from left to right on load, and then by clicking the close button the div hides from right to left. It's working fine, it's just not going left to right horizontally but diagonally. What am I doing wrong? Here's an example of the code I'm using http://jsfiddle.net/N8NpE/2/
$(function(){
$("#content-box").hide(0).delay(0).show(500);
});
$(function(){
$("#ClosePanel").click(function () {
$("#content-box").hide("slow");
});
});
Any help will be greatly appreciated.
You could try using .animate() instead of .hide() and .show(). This will give you a little more control over everything.
$("#content-box").animate({'width': 240},500);
And to close, include a callback function to set display to none after the animation:
$("#content-box").animate({'width': 0},500,function(){
$("#content-box").css('display','none');
});
http://jsfiddle.net/N8NpE/6/
You should include jQuery UI in your script and change your function a little bit:
$(function(){
$("#content-box").hide(0).delay(0).toggle('slide', {
direction: 'left'
}, 1000);
});
Here is an updated jsfiddle: http://jsfiddle.net/N8NpE/4/
$('#content-box').animate({width: 'toggle'});
http://jsfiddle.net/U7wGt/

Delay jQuery animation until the background image is displayed by Supersized plugin

People asked similar questions before, but mine is with a twist:
I'm using Supersized jQuery plugin to load a single full-screen background image. The code loading the image is this:
<script type="text/javascript">
jQuery(document).ready(function($) {
$.supersized({
//Background image
slides : [ { image : 'http://www.cybart.com/bscg/wp-content/themes/Custom/images/backgrounds/bg.jpg' } ]
});
$('#content').delay(3500).fadeIn(600);
});
</script>
As you can see in the code, I chained the fadeIn effect after the "supersized" function. I want to fade in the #content div after the background image (bg.jpg) not just finished loading but also finished fading in. I used the solution I don't particularly like: setting a long delay before my fadeIn effect.
What would be the best way to fade in the content div after Supersized image finihsed fading in?
Would be grateful for your help!
If anyone is still looking for a solution, here's what I did:
Supersized.3.2.7.js
Right after the img.load function, within the base._start function, I added the following:
img.fadeOut();
img.bind("load", function () { $(this).fadeIn(750); });
Found my own answer:
the solution is to edit the supersized core js file. In the file, after this bit of code:
$('#supersized-loader').hide(); //Hide loading animation
element.fadeIn('fast'); //Fade in background
resizenow();
I added my own line:
$('#content').delay('fast').fadeIn('fast');
Worked like magic!
Have you tried using the jQuery .ready() function?
jQuery(document).ready(function($) {
$.supersized({
//Background image
slides : [ { image : 'http://www.cybart.com/bscg/wp-content/themes/Custom/images/backgrounds/bg.jpg' } ]
});
$.supersized.ready( function() {
$('#content').fadeIn(600);
});
});

Div is jumpy with fadeIn jQuery

When I roll over .comptext_rollover div it should hide the initial div on the page and show the minipage div. but it does but is sometimes really jumpy and also the minipage div sometimes shows below the initialpage div. any ideas? sorry i am new to coding! Thanks in advance.
$(document).ready(function() {
$('#mini_page').hide();
$('.comptext_rollover').hover(function() {
$('#initial_page').hide();
$('.register_button').hide();
$('#mini_page').fadeIn(100);
$('#container').css({
'margin-top': '-217px'
});
}, function() {
$('#mini_page').hide();
$('#initial_page').show();
$('.register_button').show();
$('#container').css({
'margin-top': '-150px'
});
});
});
I prepared a fiddle demo HERE
re-EDIT:
JSFIDDLE DEMO
(the demo may be incorrect while the main CSS is an external link)
I used:
<div id="container">
<div id="initial_page" class="page">
<div id="playvideo_hoverbutton"></div>
<div class="register_button"></div>
<div id="invisible_register2"></div>
<div id="termsandconditionsapplyshort"></div>
</div>
<div id="mini_page" class="page">
<div id="minicar_animated"></div>
<div id="worth25k"></div>
<div class="register_button"></div>
<div id="invisible_register"></div>
</div>
<!-- THE ROLLOVER IS OUT OF ALL 'PAGES'! -->
<div class="comptext_rollover">
<!--<div id="competition_text"></div>-->
</div>
</div>
$('#mini_page').hide();
$('.comptext_rollover').mouseenter(function() {
$('.page').fadeToggle(400);
});
$('.comptext_rollover').mouseleave(function() {
$('.page').fadeToggle(400);
});
In any case what you should do:
Position absolute the 2 screens you need to 'swap' into a container.
Than what you do:
Position the 'rollover' element outside the 'screens'.
Adjust the marginTop of the bigger image(car image) in the CSS (like I did) to fix the buggy 'jumps'.
IF POSSIBLE: ONLY ONE rollover ACTION ELEMENT!
Fix the margin-top of the car image. (give it a -Npx)
Doing so you don't need to do that stuff with positioning your container -Npx
There is also a simpler way to do the same effect:
you add to BOTH screens a class .swappable, making the second one (CSS)display:none; , and than you just use jQuery toggling just this class.
you've not set a great deal of time for the fade in. you're also just hiding some of the divs which makes the fade in move around depending on where you put them. maybe use slides instead. I have saved an example here: http://jsfiddle.net/kBEUH/
$(document).ready(function(){
$('#mini_page').hide();
$('.comptext_rollover').hover(function () {
$('#initial_page').fadeOut(1000);
$('.register_button').fadeOut(1000);
$('#mini_page').slideDown(1000);
}, function(){
$('#mini_page').slideUp(1000);
$('#initial_page').fadeIn(1000);
$('.register_button').fadeIn(1000);
});
});
if you put a console.log in your hover() function, you'll see hover is firing like crazy. This causes the animation to start over and over again, while moving your mouse.
You could take advantage of the jquery :animated selector:
$('.comptext_rollover').hover(function() {
//enable this line to see the hover event is firing every time your mouse moves
//console.log("hovering")
//if the div is in the middle of an animation, do nothing
if (!$("#mini_page").is(":animated")) {
$('#initial_page').hide();
$('.register_button').hide();
$('#mini_page').fadeIn(100);
$('#container').css({
'margin-top': '-217px'
});
}
}, function() {
//etc
});
EDIT:
Now I think of it, your probably want to use .mouseenter() and .mouseleave() instead of hover()
$('.comptext_rollover').mouseenter(function() {
//your code
}).mouseleave(function() {
//your code
});

Categories