Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 279
  • Last Modified:

jquery notification messages

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
Toube
Asked:
Toube
  • 4
1 Solution
 
GaryCommented:
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
 
ToubeAuthor Commented:
Hi,

thanks for your reply. You are right. I will try to fix..
0
 
ToubeAuthor Commented:
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
 
ToubeAuthor Commented:
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
 
ToubeAuthor Commented:
Solved it myself
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now