Solved

jquery notification messages

Posted on 2013-02-04
5
262 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

738 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