[el_pancho]

Hi there, a few days ago i created a java/ajax chat, but i had a problem with the "Friend list", and "Message List",

when the user gets a new message the "History" div is resfresh, something like this:

 if(newMsg == true)
   {
              $("#history").html(allMsgs);
   }

But this method makes the History Div blinks whenever i get a new message because it clears all the content and then print it all again, how do i do to make it not clear the content but just ADD the new content(new message) to the older one?

[Astalor]

I cannot think off the top of my head for a method to prevent the blinking however if it was me, I would fade the content out smoothly, refresh it, then fade it back in. This would be more elegant than the element blinking in my opinion and also makes the user aware that the content has been refreshed.

[el_pancho]

Astalor, on 17 July 2012 - 08:58 AM, said:

I cannot think off the top of my head for a method to prevent the blinking however if it was me, I would fade the content out smoothly, refresh it, then fade it back in. This would be more elegant than the element blinking in my opinion and also makes the user aware that the content has been refreshed.

Yeah, its a good idea but i don´t think it solve the problem because while the content is fading, the user cannot click on a link for example.

[el_pancho]

To clear things up, check the http://www.avaaz.org/en/ website, we will see next to the bottom - left corner a HAPPENING RIGHT NOW box, there we can see a content box being refresh all along but the new content is being ADD to the older one.

[Kruithne]

The example site you just gave shows something a little different to what you had described.

The content for the widget "What's happening now" is not being rewritten into the div as you are planning to do it, rather a new DIV element is created in jQuery and then appended to the parent container. As this happens the bottom element is removed. Both these actions have a transition effect applied to make them seemlessly slide but at no point is the entire DIV rewritten.

If you would like, I can mock-up an example for you?

[el_pancho]

Kruithne, on 17 July 2012 - 11:04 AM, said:

The example site you just gave shows something a little different to what you had described.

The content for the widget "What's happening now" is not being rewritten into the div as you are planning to do it, rather a new DIV element is created in jQuery and then appended to the parent container. As this happens the bottom element is removed. Both these actions have a transition effect applied to make them seemlessly slide but at no point is the entire DIV rewritten.

If you would like, I can mock-up an example for you?

Thank you, i didn´t tought about creating new divs and removing older divs, i would be gratefull if u show an example.

[Kruithne]

Hello again, hope you're having a good day!

With a little bit of magic and a fair amount of coffee, I present a simple mockup of what you were after, hopefully this gives you a better picture of how to achieve the desired effect!

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<style>
	/* This is just a small cross-browser tweak, not relevant */
	*
	{
		margin: 0;
		padding: 0;
	}
	
	/* Styling for the scrolling container */
	#slider
	{
		list-style: none;
		border: 1px solid #999;
		width: 200px;
		margin: 50px;
	}
	
	/* Mad styles for the scrolling items */
	#slider li
	{
		margin: 5px 0;
		padding: 10px 5px;
		background-color: #B9E2EB;
		text-align: center;
	}
</style>

<script>
	//Written to each element to show them scrolling, not needed really.
	var currentNumber = 1;
	
	// The total amount of items that will render before it starts 'scrolling'.
	var totalItems = 10;
	
	// This function is called once every second.
	function scrollItems()
	{
		// Checks if the slider contains the specified total items.
		if ($('#slider').children().length == totalItems)
		{
			// The slider is full, so we remove the bottom element.
			$('li:last-child', '#slider').remove();
		}
		
		// Regardless of the above, we append a new element.
		$('#slider').prepend('<li>Item number #' + currentNumber + '</li>');
		
		// Increase the pointless counter.
		currentNumber++;
	}
	
	// This is called when the document is ready.
	$(document).ready(function()
	{
		// Calls the scrollItems function every 1000 MS (1 Second).
		setInterval(scrollItems, 1000);
	});
</script>

<ul id="slider"></ul>

I've included comments in the code to explain what each function/varible/line does along the way. Throw that in a HTML file and open it in your browser and you should see it working without any problems.

As always with these things, don't just throw my code into your website and expect it to work, it's merely a reference for you to build a more suitingly structured widget for your site.

[el_pancho]

Kruithne, on 17 July 2012 - 12:22 PM, said:

Hello again, hope you're having a good day!

With a little bit of magic and a fair amount of coffee, I present a simple mockup of what you were after, hopefully this gives you a better picture of how to achieve the desired effect!

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<style>
	/* This is just a small cross-browser tweak, not relevant */
	*
	{
		margin: 0;
		padding: 0;
	}
	
	/* Styling for the scrolling container */
	#slider
	{
		list-style: none;
		border: 1px solid #999;
		width: 200px;
		margin: 50px;
	}
	
	/* Mad styles for the scrolling items */
	#slider li
	{
		margin: 5px 0;
		padding: 10px 5px;
		background-color: #B9E2EB;
		text-align: center;
	}
</style>

<script>
	//Written to each element to show them scrolling, not needed really.
	var currentNumber = 1;
	
	// The total amount of items that will render before it starts 'scrolling'.
	var totalItems = 10;
	
	// This function is called once every second.
	function scrollItems()
	{
		// Checks if the slider contains the specified total items.
		if ($('#slider').children().length == totalItems)
		{
			// The slider is full, so we remove the bottom element.
			$('li:last-child', '#slider').remove();
		}
		
		// Regardless of the above, we append a new element.
		$('#slider').prepend('<li>Item number #' + currentNumber + '</li>');
		
		// Increase the pointless counter.
		currentNumber++;
	}
	
	// This is called when the document is ready.
	$(document).ready(function()
	{
		// Calls the scrollItems function every 1000 MS (1 Second).
		setInterval(scrollItems, 1000);
	});
</script>

<ul id="slider"></ul>

I've included comments in the code to explain what each function/varible/line does along the way. Throw that in a HTML file and open it in your browser and you should see it working without any problems.

As always with these things, don't just throw my code into your website and expect it to work, it's merely a reference for you to build a more suitingly structured widget for your site.

Wow, This is just simple and fantastic! ty for your time Kruithne.

[Kruithne]

el_pancho, on 17 July 2012 - 01:59 PM, said:

Wow, This is just simple and fantastic! ty for your time Kruithne.

No problem, it's my pleasure to help out!