<div id="notices"> <div class="notice round confirmation 001"> <div class="icon icons-state-default icon-confirmation"></div> <p>Message 1</p> <a href="url/hide/001" class="hide"><input type="hidden" value=" 001" /></a> </div> <div class="notice round confirmation 002"> <div class="icon icons-state-default icon-confirmation"></div> <p>Message 2</p> <a href="url/hide/002" class="hide"><input type="hidden" value=" 002" /></a> </div><div class="notice round confirmation 002"> <div class="icon icons-state-default icon-confirmation"></div> <p>Message 3</p> <a href="url/hide/002" class="hide"><input type="hidden" value=" 002" /></a> </div><div class="notice round confirmation 002"> <div class="icon icons-state-default icon-confirmation"></div> <p>Message 4</p> <a href="url/hide/002" class="hide"><input type="hidden" value=" 002" /></a> </div><div class="notice round information group-redakteur"> <div class="icon icons-state-default icon-information"></div> <p>Message 5</p> <a href="" class="hide"><input type="hidden" value="" /></a> </div><div class="notice round error"> <div class="icon icons-state-default icon-error"></div> <p>Message 6</p> <a href="" class="hide"><input type="hidden" value="" /></a> </div> </div> <br class="clear" />
var level = new Array('information', 'confirmation', 'warning', 'error');
var element = new Array();
element['hide'] = 'a.hide';
element['icon'] = '.icon';
element['notice'] = '.notice';
$.each(level, function(index,val){
if($(element['notice']+'.'+val).size() > 1){
$('.'+val+":first").removeClass('round').addClass('round-t notice-first');
$('.'+val+":last").removeClass('round').addClass('round-b notice-last');
$('.'+val+":not(:last):not(:first)").removeClass('round').addClass('notice-middle');
}
$(element['notice']+'.'+val).hover(function(){
if($(element['notice']+'.'+val).size() > 1){
$(this).addClass('round').removeClass('round-t round-b notice-middle notice-first notice-last');
if($(this).next().hasClass('notice-last')){
$(this).next().addClass('round').removeClass('notice-last');
}else{
$(this).next().addClass('notice-first round-t').removeClass('notice-middle');
}
if($(this).prev().hasClass('notice-first') || $(this).prev().hasClass('round')){
$(this).prev().addClass('round').removeClass('notice-first');
}else{
$(this).prev().addClass('notice-last round-b').removeClass('notice-middle');
}
}else{
$(this).addClass('round').removeClass('round-t round-b notice-middle notice-first notice-last');
}
}, function(){
if($(element['notice']+'.'+val).size() > 1){
$('.'+val+".notice-first").removeClass('notice-first round-t ');
$('.'+val+".notice-last").removeClass('notice-last round-b ');
$('.'+val+":first").removeClass('round').addClass('round-t notice-first');
$('.'+val+":last").removeClass('round').addClass('round-b notice-last');
$('.'+val+":not(:last):not(:first)").removeClass('round').addClass('notice-middle');
}
});
});
// unbind click, real html link is onl used when js is deactive
$(element['hide']).bind('click', function(){ return false});
// hide action
$(element['hide']).hover(function(){
$(this).parents(element['notice']).addClass('deactivate');
$(this).siblings(element['icon']).removeClass('icons-state-default');
$(this).siblings(element['icon']).addClass('icons-state-deactive');
}, function(){
$(this).parents(element['notice']).removeClass('deactivate');
$(this).siblings(element['icon']).removeClass('icons-state-deactive');
$(this).siblings(element['icon']).addClass('icons-state-default');
}).click(function(){
$(this).parents(element['notice']).fadeOut("slow", function(){
$(this).remove();
});
});
Refactorings
No refactoring yet !
clonecd383
May 9, 2011, May 09, 2011 00:30, permalink
No rating.
Login to rate!
What the eye does not see the heart does not grieve over.
Hey,
so I have all this messages in a page and I want to be able to delete them via jQuery, also if they are standard messages (e.g. “This page is unpublished.“) they will be saved for the user as deactivated.
If there are multiple messages for one type (e.g. confirmation) they are grouped.
If you hover an element, it gets detached and the ones below and above will be grouped.
It does work like this, but I am wondering whether there is a more efficient, faster and simpler way to do this.
If it is to hard to understand, please drop a comment and I will just upload a demo.