Solved

jquery notification messages

Posted on 2013-02-04
5
248 Views
Last Modified: 2013-02-09
Hi,

I'm trying to implement this error and notification script:
Cool notification messages

Now I have 2 challenges with the script:

1. For some reason the error message is not expanding to page full width, it only expands to about 60% of my screen 1920 x 1200.

2. i would like to implement it not by clicking links but by when a certain url is loaded ex.
index.php?id=2&success=s1
index.php?id=2&success=s2
index.php?id=2&error=e0
index.php?id=2&error=e1
index.php?id=2&error=e2

Now I have setup it the following way:

the Script:
<script type="text/javascript">
function GetURLParameter(sParam) // get url parameters script
{
	var sPageURL = window.location.search.substring(1);
	var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
 }
}
var error = GetURLParameter('error'); warning
var success = GetURLParameter('success'); //succes
var warning = GetURLParameter('warning'); //warning or delete

var myMessages = ['e0','e1','e2','s1','s2','w1']; // 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(){
	 if(success == 's1' || success == 's2' || error == 'e0' || error == 'e1' || error == 'e2'){ 
		  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>

Open in new window


Now almost works.. well when url goes to index.php?id=2&error=e0
it shows the error message or to be more exact it shows all of the error messages not the one that url has loaded.

Help is much appreciated.

Thanks,
Toby
0
Comment
Question by:Toube
  • 4
5 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 38853349
It's showing all message because you are saying show all messages
for(var i=0;i<myMessages.length;i++)
		 {
			showMessage(myMessages[i]);
		 }

Open in new window

Instead of
showMessage(myMessages[i]);

Open in new window

...it should be something more like
if(myMessages[i]==error ){showMessage(myMessages[i]);}

Open in new window

If I'm reading your code correctly

Edit..
Rereading your code you are seperating the types of message (in the url), you should only need one var for the message type to be shown. Maybe a little rethinking of how you are returning the message - shouldn't matter if it's an error or success - you just need the message code returned.
0
 

Author Comment

by:Toube
ID: 38853780
Hi,

thanks for your reply. You are right. I will try to fix..
0
 

Author Comment

by:Toube
ID: 38853978
Hmm.. any clues on how to use this.. this is not working:

var info = GetURLParameter('info'); //includes all error messages s1,s2,e0,e1,e2
var success = GetURLParameter('success'); //Testing not in use
var warning = GetURLParameter('warning'); //remove file

var myMessages = ['e0','e1','e2','s1','s2','w1']; // define the messages types
//var info = [info];
function hideAllMessages()
{
		 var messagesHeights = new Array(); // this array will store height for each
	 
		 for (i=0; i<myMessages.length; i++)
		 {
				//myMessages[i] = info[];	
				if (myMessages[i] == '0')
				{
				 messagesHeights[i] = $('.' + myMessages[i]).outerHeight();
				 $('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport	  
				 }
		 }
}

function showMessage(type)
{
	//$('.'+ type +'-trigger').click(function(){
	 if(info == 's1'){ 
		  hideAllMessages();				  
		  $('.'+type).animate({top:"0"}, 500);
		  }
	else if(info == 's2'){ 
		  hideAllMessages();				  
		  $('.'+type).animate({top:"0"}, 500);
		  }
	else if(info == 'e0'){ 
		  hideAllMessages();				  
		  $('.'+type).animate({top:"0"}, 500);
		  }
	else if(info == 'e1'){ 
		  hideAllMessages();				  
		  $('.'+type).animate({top:"0"}, 500);
		  }
	else if(info == 'e2'){ 
		  hideAllMessages();				  
		  $('.'+type).animate({top:"0"}, 500);
		  }		  
	//});
}

Open in new window

0
 

Accepted Solution

by:
Toube earned 0 total points
ID: 38854208
Here my working solution:

function GetURLParameter(sParam)
{
	var sPageURL = window.location.search.substring(1);
	var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
 }
}
var info = GetURLParameter('info'); //tämä sisältää kaikki virheet s1,s2,e0,e1,e2
var success = GetURLParameter('success'); //kuvan lisäys
var warning = GetURLParameter('warning'); //kuvan poisto

var myMessages = ['e0','e1','e2','s1','s2','w1']; // define the messages types
//myMessages = info;
var infonum;

if (info == 'e0'){
infonum = 0; }
else if (info == 'e1'){
infonum = 1; }
else if (info == 'e2'){
infonum = 2; }
else if (info == 's1'){
infonum = 3; }
else if (info == 's2'){
infonum = 4; }
else if (info == 'w1'){
infonum = 5; }

var content = myMessages[infonum];
//alert(content);
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(){
	 if(info == 's1'){ 
		  hideAllMessages();				  
		  $('.'+type).animate({top:"0"}, 500);
		  }
	else if(info == 's2'){ 
		  hideAllMessages();				  
		  $('.'+type).animate({top:"0"}, 500);
		  }
	else if(info == 'e0'){ 
		  hideAllMessages();				  
		  $('.'+type).animate({top:"0"}, 500);
		  }
	else if(info == 'e1'){ 
		  hideAllMessages();				  
		  $('.'+type).animate({top:"0"}, 500);
		  }
	else if(info == 'e2'){ 
		  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[infonum]);
		 //}
		 
		 // When message is clicked, hide it
		 $('.message').click(function(){			  
				  $(this).animate({top: -$(this).outerHeight()}, 500);
		  });		 
		 
});    

Regards,

Toby

Open in new window

0
 

Author Closing Comment

by:Toube
ID: 38870874
Solved it myself
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now