Notification messages on demand?

richiejones24 · January 14, 2012

Total Noob to Ajax,

Been trying to get this to work for 2 days now and i've been pulling my hair out!

Any help would be much appreciated.

I am trying to get the following notification banner to run on demand

<!DOCTYPE html>
<html>
<head>
<title>Cool notification messages with CSS3 & Jquery demo - Redteamdesign</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
var myMessages = ['info','warning','error','success']; // define the messages types
function hideAllMessages()
{
	 var messagesHeights = new Array(); // this array will store height for each

	 for (i=0; i<myMessages.length; i++)
	 {
			  messagesHeights[i] = $('.' + myMessages[i]).outerHeight();
			  $('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport	  
	 }
}

function showMessage(type)
{
$('.'+ type +'-trigger').click(function(){
	  hideAllMessages();				  
	  $('.'+type).animate({top:"0"}, 500);
});
}

$(document).ready(function(){

	 // Initially, hide them all
	 hideAllMessages();

	 // Show message
	 for(var i=0;i<myMessages.length;i++)
	 {
		showMessage(myMessages[i]);
	 }

	 // When message is clicked, hide it
	 $('.message').click(function(){			  
			  $(this).animate({top: -$(this).outerHeight()}, 500);
	  });		 

});       
</script>

<style>

body
{
	 margin: 0;
	 padding: 0;
	 font: 12px Arial, Helvetica, sans-serif;
	 background: #f1f1f1;
}

.message
{
	-webkit-background-size: 40px 40px;
	-moz-background-size: 40px 40px;
	background-size: 40px 40px;
	background-image: -webkit-gradient(linear, left top, right bottom,
							color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
							color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
							color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
							to(transparent));
	background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
						transparent 75%, transparent);
	background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
						transparent 75%, transparent);
	background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
						transparent 75%, transparent);
	background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
						transparent 75%, transparent);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
						transparent 75%, transparent);

	 -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
	 -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);		
	 box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
	 width: 100%;
	 border: 1px solid;
	 color: #fff;
	 padding: 15px;
	 position: fixed;
	 _position: absolute;
	 text-shadow: 0 1px 0 rgba(0,0,0,.5);
	 -webkit-animation: animate-bg 5s linear infinite;
	 -moz-animation: animate-bg 5s linear infinite;
}

.info
{
	 background-color: #4ea5cd;
	 border-color: #3b8eb5;
}

.error
{
	 background-color: #de4343;
	 border-color: #c43d3d;
}

.warning
{
	 background-color: #eaaf51;
	 border-color: #d99a36;
}

.success
{
	 background-color: #61b832;
	 border-color: #55a12c;
}

.message h3
{
	 margin: 0 0 5px 0;													 
}

.message p
{
	 margin: 0;													 
}

@-webkit-keyframes animate-bg
{
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
}


@-moz-keyframes animate-bg 
{
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
}


#trigger-list
{
	 text-align: center;
	 margin: 100px 0;
	 padding: 0;
}

#trigger-list li
{
	 display: inline-block;
	 *display: inline;
	 zoom: 1;
}

#trigger-list .trigger
{
	 display: inline-block;
	 background: #ddd;
	 border: 1px solid #777;
	 padding: 10px 20px;
	 margin: 0 5px;
	 font: bold 12px Arial, Helvetica;
	 text-decoration: none;
	 color: #333;
	 -moz-border-radius: 3px;
	 -webkit-border-radius: 3px;
	 border-radius: 3px;
}

#trigger-list .trigger:hover
{
	background: #f5f5f5;
}

/*--------------------------------------*/

.centered
{
	 text-align: center;
}

.twitter-follow-button
{
	 position: relative;
	 top: 7px;
}

</style>
</head>

<body>

<div class="info message">
	 <h3>FYI, something just happened!</h3>
	 <p>This is just an info notification message.</p>
</div>

<div class="error message">
	 <h3>Ups, an error ocurred</h3>
	 <p>This is just an error notification message.</p>

</div>

<div class="warning message">
	 <h3>Wait, I must warn you!</h3>
	 <p>This is just a warning notification message.</p>
</div>

<div class="success message">
	 <h3>Congrats, you did it!</h3>
	 <p>This is just a success notification message.</p>

</div>

<ul id="trigger-list">
	 <li><a href="#" class="trigger info-trigger">Info</a></li>
	 <li><a href="#" class="trigger error-trigger">Error</a></li>
	 <li><a href="#" class="trigger warning-trigger">Warning</a></li>
	 <li><a href="#" class="trigger success-trigger">Success</a></li>
</ul>


</body>
</html>

i have been trying to inter-grate the following script so that i can call it from a php script


// Customise those settings

var seconds = 5;
var divid = "timediv";
var url = "boo.php";

////////////////////////////////
//
// Refreshing the DIV
//
////////////////////////////////

function refreshdiv(){

// The XMLHttpRequest object

var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Your browser does not support AJAX.");
return false;
}
}
}

// Timestamp for preventing IE caching the GET request

fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;

// The code...

xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
setTimeout('refreshdiv()',seconds*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}

// Start the refreshing process

var seconds;
window.onload = function startrefresh(){
setTimeout('refreshdiv()',seconds*1000);
}

trq · January 14, 2012

No where near enough information I'm afraid.

richiejones24 · January 14, 2012

No where near enough information I'm afraid.

Sorry let me explain some more, i need the banner to display when the user receives a new message, without refreshing the page, to do this i have tried to integrate the "Refreshing Div" script so that every 30 seconds the, script call the php page if there is a new message it updates the trigger class and triggers the banner. but i havent been able to get it to work.

Sign In

Notification messages on demand?

Recommended Posts

richiejones24

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

richiejones24

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information