Ich versuche mich gerade ein wenig in Javascript einzuarbeiten um das Effektframework mootools besser nutzen zu können. Meine Kenntnisse sind noch sehr rudimentär, mittlerweile kenne ich jedoch die Event Handler, diese führen eine Funktion meist nur nach händischer Aktion aus (Bsplw. oncklick, onmouseover etc.). Ich würde nun gerne folgenden Lightbox Clone aufrufen wenn ein Kontaktformular erfolgreich gesendet wurde:
Alles anzeigen
Kann man solch eine Aktion denn wirklich nur nach "cklick" ausführen? [/url]
Quellcode
- window.addEvent('domready',function(){
- $$('a').each(function(x){
- y = x.getAttribute('rev');
- if(navigator.appVersion.indexOf('MSIE') != -1){
- if(y != ""){
- $(y).setStyle('visibility','hidden');
- }
- }else{
- if(y != null){
- $(y).setStyle('visibility','hidden');
- }
- }
- })
- })
- var xxx = new Array();
- $$('a').each(function(el){
- if(el.getAttribute('rel') == "designSlide"){
- // preload images
- a = new Image();
- lnk = el.getAttribute('href');
- a.src = lnk;
- xxx.push(a);
- el.addEvent('click',function(x){
- // old container still existing? remove it
- if($('container') != false){
- $('container').remove();
- }
- //go
- bd = document.body;
- windowHeight = 0;
- windowWidth = 0;
- title = el.getAttribute('title');
- titleSplitPos = title.indexOf("::");
- titleHead = title.substring(0,titleSplitPos);
- lengthContent = title.length + titleSplitPos
- titleContent = title.substring(titleSplitPos+2,lengthContent);
- addContent = el.getAttribute('rev');
- if($(addContent) != false){
- addContentCont = $(addContent).innerHTML;
- $(addContent).setStyle('visibility','hidden');
- }
- nav = navigator.appName;
- windowHeight = window.getHeight() -10;
- var x = new Event(x).stop();
- var hrefSrc = el.getAttribute('href');
- var preloadPrev = new Image();
- preloadPrev.src = hrefSrc;
- var imgWidth = preloadPrev.width;
- var imgHeight = preloadPrev.height;
- var space = imgHeight + 40;
- var top = windowHeight - space;
- // create a new div with the width of the screen
- container = new Element('div', {
- 'styles':
- {
- 'display': 'block',
- 'visibility':'hidden',
- 'width': '99%',
- 'height': space,
- 'background':'#000',
- 'border': '1px solid #AAA',
- 'padding':'0px',
- 'left':'3px',
- 'margin':'0px',
- 'position': 'absolute',
- 'top': top
- }
- })
- container.setAttribute('id','container');
- image = new Element('img', {
- 'styles':
- {
- 'border': '3px solid #FFF',
- 'display':'block',
- 'visibility': 'hidden',
- 'float':'left',
- 'background': '#000 url(images/loading.gif) center center no-repeat',
- 'margin-top':'20px',
- 'margin-left':'20px',
- 'height':imgHeight,
- 'width': imgWidth,
- 'src': hrefSrc,
- 'z-index':'1000'
- }
- })
- div = new Element('div', {
- 'styles':
- {
- 'float':'left',
- 'width':'300px',
- 'height':'auto',
- 'display':'block',
- 'margin-top':'20px',
- 'margin-left':'20px',
- }
- })
- off = new Element('img', {
- 'styles':
- {
- 'float':'left',
- 'width':'64px',
- 'height':'20px'
- }
- })
- off.src="images/close.jpg";
- off.addEvent('click',function(){
- container.effect('opacity',{duration: 700, transition: Fx.Transitions.linear, wait:true}).start(0.9,0).chain(function(){
- container.remove();
- })
- })
- div.setAttribute('id','info');
- if($(addContent) != false){
- div.innerHTML = "<h1>" + titleHead + "</h1><p>" + titleContent + "</p>" + "<p>" + addContentCont + "</p>";
- }else{
- div.innerHTML = "<h1>" + titleHead + "</h1><p>" + titleContent + "</p>";
- }
- image.src = preloadPrev.src;
- container.injectInside(bd);
- image.injectInside(container);
- image.effect('opacity',{duration: 200, transition: Fx.Transitions.linear, wait:false}).start(0,1);
- container.effect('opacity',{duration: 700, transition: Fx.Transitions.linear, wait:false}).start(0,0.9);
- container.effect('top',{duration: 700, transition: Fx.Transitions.linear, wait:false}).start(windowHeight-40,top);
- div.injectAfter(image);
- off.injectInside(div);
- container.makeDraggable();
- return false;
- })
- }
- })
Kann man solch eine Aktion denn wirklich nur nach "cklick" ausführen? [/url]