Solved

jquery notification messages

Posted on 2013-02-04
5
251 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

914 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

16 Experts available now in Live!

Get 1:1 Help Now