/** * ********************************************************************** * ********************************************************************** * Verbraucherzentrale Bundesverband: Website Behavior * contains: * - Navigation * - Tipps * - Artikel: Bilder Gallerie * - Link Verhalten * - css behavior with enabled JS * * @author stefan kloiber, zero+ones * @date 2009-08 * * @version 0.0.20 * * @dependencies: jQuery 1.3.2 * * @tested Firefox 3, IE 7 * ********************************************************************** * ********************************************************************** */ /* define namespace */ var zo; // declares a global symbol if (!zo) zo = {}; else if (typeof zo != 'object') throw new Error('zo exists, but is not an object!'); /** * append some stylesheet to the header * * @attribute (String) file url to the css file */ zo.css = { include: function(file) { document.write(''); } }; /** * snippets * set with swf object */ zo.snippets = { clTips: function(duration) { jQuery('
') .attr('id', 'wndw-nfo') .insertAfter('div#wndw') ; var duration = duration || 0, show = jQuery.Event('show'), items = jQuery('div#cl-tps div#wndw img').not('span.rtng img'), pItems = jQuery('div#cl-tps div#wndw div'), dist = (jQuery(items[0]).width()+24), /** function fired if clicked on the prev button */ prev = function(ev) { jQuery('div#cl-tps div.btn.prev a').unbind('click'); jQuery('div#wndw').animate({left:"+=" +dist+ "px"}, duration); jQuery('div#wndw-nfo').delay(duration).fadeOut(0, function() { jQuery('div#cl-tps div.btn.prev a').bind('click', prev); jQuery('div#cl-tps div.wndw-brd').trigger('show', --cnt); }); }, /** function fired if clicked on the next button */ next = function(ev) { jQuery('div#cl-tps div.btn.next a').unbind('click'); jQuery('div#wndw').animate({left:"-=" +dist+ "px"}, duration); jQuery('div#wndw-nfo').delay(duration).fadeOut(0, function() { jQuery('div#cl-tps div.btn.next a').bind('click', next); jQuery('div#cl-tps div.wndw-brd').trigger('show', ++cnt); }); } cnt = 0 ; jQuery('div#wndw').css('width', (items.length * (jQuery(items[0]).width()+20) + jQuery('div#wndw').offset().left)+ 'px'); /** create the buttons */ jQuery('div#cl-tps') .append(jQuery('') .addClass('btn next') .append(jQuery('') .attr({href: '#nx', title: 'weiter'}) ) ) .append(jQuery('') .addClass('btn prev') .append(jQuery('') .attr({href: '#pv', title: 'zurück'}) ) ) ; /** show Event action */ jQuery('div#cl-tps div.wndw-brd').bind('show', function(ev, pos) { jQuery('div#wndw-nfo') .html(jQuery(pItems[pos]).html()) .hide() .fadeIn(0) ; if (pos === 0) { jQuery('div#cl-tps div.btn.prev') .find('a') .css({'background-position': '-4px -1010px', cursor:'default'}) .unbind('click') ; } if (pos === 1) { jQuery('div#cl-tps div.btn.prev') .find('a') .css({'background-position': '-4px -970px', cursor:'pointer'}) .bind('click', prev) ; } if (pos === (items.length - 2)) { jQuery('div#cl-tps div.btn.next') .find('a') .css({'background-position': '-974px -970px', cursor:'pointer'}) .bind('click', next) ; } if (pos === (items.length - 1)) { jQuery('div#cl-tps div.btn.next') .find('a') .css({'background-position': '-974px -1010px', cursor:'default'}) .unbind('click') ; } }); jQuery('div#cl-tps div.btn.prev a').bind('click', prev); jQuery('div#cl-tps div.btn.next a').bind('click', next); jQuery('div#cl-tps div.wndw-brd').trigger('show', cnt); items.each(function(i) { jQuery(this).bind('click', function(ev) { if (i < cnt) { jQuery('div#cl-tps div.btn.prev a').trigger('click'); } else if (i > cnt) { jQuery('div#cl-tps div.btn.next a').trigger('click'); } }); jQuery(this).bind('mouseover', function(ev) { jQuery(this).css('cursor', 'pointer'); }); }); }, toggleSize: function(tHeight) { jQuery('div#nearYou>div') .css('height', tHeight) .find('object, embed') .attr('height', tHeight) ; } }; /** * link behavior * replaces the HTML 4 'target'-attribute * * @method tab open the link target in a new tab; replaces target=_blank */ zo.target = { tab: function(selector) { jQuery(selector).click(function(ev) { ev.preventDefault(); window.open(jQuery(this).attr('href')); }); }, popup: function(selector) { jQuery(selector).click(function(ev) { ev.preventDefault(); var options = "", windowName = ""; switch(true) { case (jQuery(this).hasClass('co2rechner')): windowName = "co2rechner"; options = "width=700,height=670,status=yes,resizable=yes"; break; } window.open(jQuery(this).attr('href'), windowName, options); }); }, buildTal: function() { var headline = jQuery('div#taf h3').text(), rtclHdg = jQuery('div.rtcl p.heading').clone(), rtclH1 = jQuery('div.rtcl h1').clone(), rtclHdl = jQuery('div.rtcl h3.hdl').clone(), errMsg = jQuery('div#taf p.error').clone(), form = jQuery('div#taf form') .clone() .find('div') .wrapAll('') .each(function(i) { if (i === 0) jQuery(this).addClass('hl-left'); else jQuery(this).addClass('hl-right'); }) .end() .submit(function(ev) { var recpField = jQuery(this).find('input#tafMlRecp'), sendField = jQuery(this).find('input#tafMlSend') ; if ((!recpField.val().match(/^[\d\w!\#\$%&\'*+\-/=?\^_`{|}~]+(\.?([\d\w!\#\$%&\'*+\-/=?\^_`{|}~]+\.)*[\d\w!\#\$%&\'*+\-/=?\^_`{|}~]+)?\@(([a-zA-Z0-9]+-?)*[a-zA-Z0-9]+\.)+[a-zA-Z]{2,6}$/) || recpField.val() === "") || (!sendField.val().match(/^[\d\w!\#\$%&\'*+\-/=?\^_`{|}~]+(\.?([\d\w!\#\$%&\'*+\-/=?\^_`{|}~]+\.)*[\d\w!\#\$%&\'*+\-/=?\^_`{|}~]+)?\@(([a-zA-Z0-9]+-?)*[a-zA-Z0-9]+\.)+[a-zA-Z]{2,6}$/) || sendField.val() === "")) { if (!recpField.val().match(/^[\d\w!\#\$%&\'*+\-/=?\^_`{|}~]+(\.?([\d\w!\#\$%&\'*+\-/=?\^_`{|}~]+\.)*[\d\w!\#\$%&\'*+\-/=?\^_`{|}~]+)?\@(([a-zA-Z0-9]+-?)*[a-zA-Z0-9]+\.)+[a-zA-Z]{2,6}$/) || recpField.val() === "") { recpField .css({'border-color': '#cd0716'}) .animate({backgroundColor: '#f9d0d3'}, 500) .animate({backgroundColor: '#fff'}, 500) ; } else { recpField.css('border-color', '#444'); } if (!sendField.val().match(/^[\d\w!\#\$%&\'*+\-/=?\^_`{|}~]+(\.?([\d\w!\#\$%&\'*+\-/=?\^_`{|}~]+\.)*[\d\w!\#\$%&\'*+\-/=?\^_`{|}~]+)?\@(([a-zA-Z0-9]+-?)*[a-zA-Z0-9]+\.)+[a-zA-Z]{2,6}$/) || sendField.val() === "") { sendField .css({'border-color': '#cd0716'}) .animate({backgroundColor: '#f9d0d3'}, 500) .animate({backgroundColor: '#fff'}, 500) ; } else { sendField.css('border-color', '#444'); } return false; } else { recpField.css('border-color', '#444'); sendField.css('border-color', '#444'); return true; } }) , content = jQuery('').addClass('tsr blue') ; content .append(rtclHdg) .append(rtclH1) .append(rtclHdl) .append(form.prepend(errMsg)) ; return content; }, /** * create the lightbox * * @attribute (Object) content lightbox content */ openLightBox: function(content) { var cgSelect, cgSelectSubmit; // remove legacy layers jQuery('div.zoLightBoxBG, div#zoLightBox').remove(); // create lightbox background jQuery('') .addClass('zoLightBoxBG') .css({ 'position': 'absolute', 'top': 0, 'left': 0, 'width': jQuery(document).width() +'px', 'height': jQuery(document).height() +'px', 'z-index': 99998, 'background': '#004687', 'opacity': 0.0}) .bind('click', function(ev) { ev.stopPropagation(); jQuery('div.zoLightBoxBG, div#zoLightBox').animate({opacity:0.0},400); setTimeout(function() { jQuery('div.zoLightBoxBG, div#zoLightBox').remove(); },500); }) .animate({opacity:0.7},400) .appendTo(jQuery('body')); // create the lightbox and append the content jQuery('') .attr('id', 'zoLightBox') .addClass('zoLightBoxContainer') .css({ 'position': 'absolute', 'top': jQuery('div.inner').offset().top +'px', 'left': jQuery('div.inner').offset().left +'px', 'width': '42.25em', 'z-index': 99999, 'opacity': 0.0, 'background': '#fff'}) .append(jQuery('') .addClass('zoLightBoxTitleBar') .append(jQuery('').text('Seite empfehlen')) ) .append(content) .animate({opacity:1.0}, 500) .draggable({ containment: 'document', handle: 'div.zoLightBoxTitleBar' }) .appendTo(jQuery('body')) .end() .find(':text:first').focus() .end() ; // ESC: escape key pressed quits the lightbox jQuery(document) .bind('keydown', function(ev) { if (ev.keyCode === 27) { jQuery('div.zoLightBoxBG, div#zoLightBox').animate({opacity:0.0},400); setTimeout(function() { jQuery('div.zoLightBoxBG, div#zoLightBox').remove(); },500); jQuery(this).unbind('keydown'); } }) ; // create the cancel button and append it to the titlebar of the lightbox jQuery('') .addClass('zoLightBoxCancelButton') .append(jQuery('') .attr({ href: '#close', title: 'Fenster schließen' }) .addClass('close') .html('Fenster schließen') .bind('click', function(ev) { ev.preventDefault(); jQuery('div.zoLightBoxBG, div#zoLightBox').animate({opacity:0.0},400); setTimeout(function() { jQuery('div.zoLightBoxBG, div#zoLightBox').remove(); },500); jQuery(document).unbind('keydown'); }) ) .appendTo(jQuery('div#zoLightBox div.zoLightBoxTitleBar')); } }; zo.toolbar = { print: function() { jQuery('li[id=print]') .append(jQuery('') .attr({ title: 'Seite drucken', href: '#print' }) .addClass('print') .text('Seite drucken') .bind('click', function(ev) { ev.preventDefault(); window.print(); }) ) ; } } zo.form = { // default email address used as example for email address fill-ins defEmailAddr: "name@provider.com", // default search value used as example for search fields defSearch: "Suche", // clears the input field value if the default value is set clearFieldDef: function(selector, defVal) { if (jQuery(selector).val() === defVal) { jQuery(selector).val(''); } jQuery(selector).blur(function(ev) { if (jQuery(selector).val() === "") { jQuery(selector).val(defVal); } }); }, validate: { // comments cmtForm: function() { jQuery('form#wrtCmt').submit(function(ev) { var nameField = jQuery('input#wrtCmtName'), msgArea = jQuery('textarea#wrtCmtMsg') ; if (nameField.val() === "" || msgArea.val() === "") { if (nameField.val() === "") { nameField .css({'border-color': '#cd0716'}) .animate({backgroundColor: '#f9d0d3'}, 500) .animate({backgroundColor: '#fff'}, 500) ; } else { nameField.css('border-color', '#444'); } if (msgArea.val() === "") { msgArea .css({'border-color': '#cd0716'}) .animate({backgroundColor: '#f9d0d3'}, 500) .animate({backgroundColor: '#fff'}, 500) ; } else { msgArea.css('border-color', '#444'); } return false; } else { nameField.css('border-color', '#444'); msgArea.css('border-color', '#444'); return true; } }); } } }; zo.toggle = function() { jQuery('h3.link').each(function(k, v) { // display the box marked as shown if (jQuery(this).next().hasClass('shown') === true) { jQuery(this) .next() .removeClass('shown') .show() .append( jQuery('') .addClass('cls') .append( jQuery('') .attr({title:'Schließen', href:'#close'}) .text('Zurücksetzen') .bind('click', function(ev) { ev.preventDefault(); jQuery(this).parent().closest('div.tg').prev('h3').trigger('click'); }) ) ) ; } jQuery(this) .addClass('js') // wrap the inner text with a link to provide the possibility to set the focus for users navigating through the page with the keyboard .wrapInner('') .click(function(ev) { ev.preventDefault(); jQuery(this) .next() // toggle visibility .slideToggle(500, // callback: change the icon function() { jQuery(this) .prev() .hasClass('closed') ? jQuery(this) .prev() .removeClass('closed') .addClass('open') : jQuery(this) .prev() .removeClass('open') .addClass('closed') ; // add an additional closing link at the end of the opened box // link will not be added for article relatives on overview pages if (jQuery(this).parent().hasClass('rtcl-rel') === false) { jQuery(this) .find('p.cls') .remove() .end() .append( jQuery('') .addClass('cls') .append( jQuery('') .attr({title:'Schließen', href:'#close'}) .text('Zurücksetzen') .bind('click', function(ev) { ev.preventDefault(); // trigger the click event on the headline jQuery(this) .parent() .closest('div.tg') .prev('h3') .trigger('click') ; }) ) ) ; } } ) ; }) ; }); }; zo.toggleRating = function() { jQuery('h3.toggleRating').each(function(k, v) { // display the box marked as shown if (jQuery(this).parent().next('div.rtng-tl').hasClass('shown') === true) { jQuery(this) .parent() .parent() .next('div.rtng-tl') .removeClass('shown') .show() ; } jQuery(this) // wrap the inner text with a link to provide the possibility to set the focus for users navigating through the page with the keyboard .wrapInner('') .click(function(ev) { ev.preventDefault(); jQuery(this) .parent() .parent() .next('div.rtng-tl') // toggle visibility .slideToggle(500, // callback: change the icon function() { jQuery(this) .prev('div.mk-rtng') .find('h3') .hasClass('closed') ? jQuery(this) .prev('div.mk-rtng') .find('h3') .removeClass('closed') .addClass('open') : jQuery(this) .prev('div.mk-rtng') .find('h3') .removeClass('open') .addClass('closed') ; } ) ; }) ; }); }; zo.slideshow = { init: function() { this.slides().each(function(i) { jQuery(this).attr('id', 'sld-' +i); }); this.slidesWidth(); //this.centerImage(); this.buildControlPanel(); this.buildButtons(); }, container: function() { return jQuery('div#sldshw'); }, slides: function() { return jQuery('div#sldshw div.sld'); }, slidesLength: function() { return this.slides().length; }, slidesWidth: function() { jQuery('div#slds').css('width', this.slidesLength() * jQuery(this.slides()[0]).width()); }, centerImage: function() { var contHeight = this.slides().find('div.img').height(), marginTop = 0; jQuery(this.slides()) .find('div.img img') .each(function(i) { if (jQuery(this).height() !== 0 && jQuery(this).height() < contHeight) { marginTop = (contHeight - jQuery(this).height())/2; jQuery(this).css({ position: 'absolute', 'top': marginTop+ 'px' }); } }) ; }, buildControlPanel: function() { var controlPanel = jQuery('