Ask your JavaScript questions! Pay money and get answers fast! (more info)

fadeIn new div not entire ID on new image (jQuery) JavaScript

  • SOLVED

<strong>Problem: </strong>When a new item is available and loaded the entire ID (#do-work) reloads and fades in.
<strong>Requested Solution:</strong> I want only new items added to fadeIn when available rather than the entire container of items re-fading in.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script>
(function( $ )
{
window.IMGS = {};
IMGS.lastID = 0;
IMGS.Url = '{% url search_it %}apilist/{{ den.slug }}/';
IMGS.Refresh = function()
{
$.getJSON( IMGS.Url, function( data )
{
var obj = {};
var id = 0;
var html = '';
$.each( data, function()

{
obj = $( this ).get( 0 );
id = parseInt( obj.pk );
html += '<div class="imgr"><img src="{{ MEDIA_URL }}' + obj.fields.thumbnail + '.260x260_q85_crop.jpg" alt="" /></div> ';

});
// show new images only if last ID has changed
if( IMGS.lastID != id )
{
IMGS.lastID = id;
$( '#do-work' ).hide().html( html ).fadeIn();
}
// check again in 3 seconds
setTimeout( IMGS.Refresh, 3000 );
});
}
})( jQuery );

$(function()
{
// start the loop
IMGS.Refresh();
});

</script>



Thanks for your help!

Answers (2)

2013-02-09

Rainner Lins answers:

I haven't tested it, but give this a try.
I added an array to keep a record of all the last IDs loaded: IMGS.Log
Comments on the source should help..


(function( $ )
{
window.IMGS = {};
IMGS.lastID = 0;
IMGS.Url = '{% url search_it %}apilist/{{ den.slug }}/';
IMGS.Log = []; // array of image IDs
IMGS.Refresh = function()
{
$.getJSON( IMGS.Url, function( data )
{
var obj = {};
var tmp = [];
var id = 0;
var cls = '';
var html = '';

// new images will have a css class called "newimg"..
$.each( data, function()
{
obj = $( this ).get( 0 );
id = parseInt( obj.pk );
cls = ( $.inArray( id, IMGS.Log ) > -1 ) ? '' : ' newimg';
html += '<div class="imgr'+ cls +'"><img src="{{ MEDIA_URL }}' + obj.fields.thumbnail + '.260x260_q85_crop.jpg" alt="" /></div> ';
tmp.push( id );
});

// show new images only if last ID has changed
if( IMGS.lastID != id )
{
IMGS.lastID = id;
IMGS.Log = tmp;

// add all images to wrapper
$( '#do-work' ).html( html );
// fade in only new ones
$( '#do-work .newimg' ).hide().fadeIn();
}

// check again in 3 seconds
setTimeout( IMGS.Refresh, 3000 );
});
};
})( jQuery );




platinum01 comments:

Thanks for the response.

It's works great in Firefox but in Chrome and Safari the #do-work div flickers when loading new items. So to clarify, the fadeIn works great on those new items but it causes the full div to blink once when it starts to load them.


Rainner Lins comments:

The flicker might be because of the way the new divs inside #do-work are being handled, after the images are loaded.
Try adding this to the CSS for the page, so that new images will automatically be hidden.


#do-work .newimg { display:none; }




platinum01 comments:

I think you're right and it could be something along those lines but that unfortunately didn't fix it. It still flickers All the images when loading in the new ones. So no change.


Rainner Lins comments:

It's hard to troubleshoot the flicker error without seeing it.

Try go figure out if the flicker is coming from updating the do-work div with .html(), or if it's coming from fading the images in.
You can also remove the .hide() before .fadeIn()

Or, you can forget about hiding them all together and play with opacity instead.

CSS..


#do-work .newimg { opacity:0; /*IE opacity styles here*/ }


Then, on the JS code..


$( '#do-work .newimg' ).stop().animate( { opacity:1 } );


[[LINK href="https://www.google.com/search?q=jquery+flicker+problem"]]jquery flicker problem[[/LINK]]

It's a common problem, you'll just have to play with it.


platinum01 comments:

Here is a quick Vine loop so you can see what I mean. The flicker happens on the preloaded items when new items are loaded in with or without the .fadeIn

[[LINK href="http://vine.co/v/bvedxPD5zpd "]]vine.co/v/bvedxPD5zpd [[/LINK]]

2013-02-09

Christianto answers:

Did all image id is return in order each time requested?
id = parseInt( obj.pk );

Assuming that id has same order each time we request it and the id not "0",
we can append and fadeIn only new images, not putting all images data inside #do-work.

Please try this code:

<script>
(function( $ )
{
window.IMGS = {};
IMGS.lastID = 0;
IMGS.Url = '{% url search_it %}apilist/{{ den.slug }}/';
IMGS.Refresh = function()
{
$.getJSON( IMGS.Url, function( data )
{
var obj = {};
var id = 0;
var html = '';
var newImages = false;

$.each( data, function()
{
obj = $( this ).get( 0 );
id = parseInt( obj.pk );

// if this first time run ( IMGS.lastID still equal 0 ), set newImages to true so it will grab all images
newImages = (IMGS.lastID == 0) ? true : false;

// check if IMGS.lastID value is same with id,
// if it has same id, we set newImages to true so it will add only new image to var html
if(newImages)
html += '<div class="imgr"><img src="{{ MEDIA_URL }}' + obj.fields.thumbnail + '.260x260_q85_crop.jpg" alt="" /></div> ';
else
newImages = (IMGS.lastID == id) ? true : false;
});

// put all image at first time run to #do-work
if( IMGS.lastID == 0 )
{
IMGS.lastID = id;
$( '#do-work' ).hide().html( html ).fadeIn();
}
// only appead new image to #do-work
else if( IMGS.lastID != id )
{
IMGS.lastID = id;
var images = $('div',$('<div>').html(html)).hide().addClass('newImages');
$( '#do-work' ).append(images).find('.newImages').fadeIn().removeClass('newImages');
}
// check again in 3 seconds
setTimeout( IMGS.Refresh, 3000 );
});
}
})( jQuery );

$(function()
{
// start the loop
IMGS.Refresh();
});
</script>