<a href=”http://www.gaos.se” target=”_blank”>

<div class=”linkDemo”>

Massa innehåll i form av andra divar och texter mm.

</div>

</a>

Om vi skall göra hela container diven klickbar gör vi det via följande Mootools kommando:

$$(’.linkDemo’).addEvents({
click: function(){
document.location = this.getParent().getProperty(’href’);
}

});

Så kommer länken fungera alldeles utmärkt i alla webläsare!

Testa det här:

Här kommer JavaScript koden:

$(’formNamn’).addEvent(’submit’, function(el) {
new Event(el).stop();
this.set(’send’, {
onSuccess:function(response){
var div = new Element(’div’,{html:response});
SqueezeBox.fromElement(div,{
size: {x: 1000, y: 450}
});
}
}).send();
});

här är ett exempel:

Test av knappeffekter

Här kommer JavaScript koden:

$$('.startButton').addEvents({
       mouseenter: function(){
           $(this.getElement('.startButtonBackground')).morph({
       		'opacity': [1]
       	   });
       },
       mouseleave: function(){
           $(this.getElement('.startButtonBackground')).morph({
       		'opacity': [0.5]
       	   });
        }
});
$$('.startButtonBackground').each(function(el) {
   el.set('opacity','.5');
});

$$('.Gaos').addEvents({
	'mouseenter': function(){
		this.className += " over";
	},
	'mouseleave': function(){
		this.className = this.className.replace(" over", "");
	}
});

På detta vis kan ju css defineras för att sköta förändringen t.ex. om objekten ligger i en div som har id ”page” skulle man kunna göra såhär:

#page .over{border:1px solid red}

Nu är detta ett inlägg som vänder sig till nybörjare och det är väl på tiden att vi visar lite kod som inte behöver göras något med innan den används, så här kommer koden den kompletta koden för att göra följande om du bara har pekat in mootoolsbiblioteket:

var Site = {
	start : function () {
	    window.addEvent('domready', function() {
		    $$('.Gaos').addEvents({
				'mouseenter': function(){
					this.className += " over";
				},
				'mouseleave': function(){
					this.className = this.className.replace(" over", "");
				}
		    });
	    });
	}
}
window.addEvent('load', Site.start);

Antingen kan ni köra:
var border = RUZEE.ShadedBorder.create({ corner:8, shadow:16 });
border.render(’classnamn’);

Detta blir dock jobbigt eftersom du måste definiera det för varje element som skall använda skriptet. Betydligt bättre och enklare blir det om ni använder er av Mootools för att generera det på de element som skall köras. JS koden för att använda Mootools för detta skulle kunna se ut såhär:

gaosBorder : function () {
window.addEvent(’domready’, function() {
$$(’.gaosRundaHorn’).each(function(el){
var border = RUZEE.ShadedBorder.create({ corner:8, shadow:16 });
border.render(el.getProperty(’id’));
});});}

Vad vi gör här är att vi hämtar alla element som har class=”gaosRundaHorn”, efter det så hämtar vi det id som dessa classer har, på så sätt blir matchningen unik per element, men det gör att man måste sätta ett unikt id per element som skall använda de snygga runda hörnen. De variabler som sätts är ”corner:8″ och ”shadow:16″, ingen idé att förklara detta det är bättre att du testar.

För att få det att fungera med en bakgrund behöver vi sätta lite css på detta. Det gör vi med:

. gaosRundaHorn, . gaosRundaHorn .sb-inner {background-color:#DDD;}

Självklart kan du göra samma funktion med prototype eller något annat JS bibliotek, men då får du lösa det själv.. ;)

Som exempel kan jag nämna att denna sida som du är på (www.gaos.se) använder inte en enda bild på sidan utan alla hörn är gjorda med just shadedBorder.

Du kan ladda ner shadedborder här

(Jag förstår inte riktigt varför de har låst höjden i ”sb-inner” diven till 2048 px så jag har satt den till 100% ist. Hade lite problem när rutorna blev för långa.. Detta görs i JavaScriptet på rad 154 om ni får problem!)

Kod:

$$(’.opacity’).each(function(el) {
el.set(’opacity’,’.’ + el.getProperty(’rel’));
});

Förklaring:

Vad vi gör är att vi tilldelar alla element med klassen ”opacity”  den mängd opacitet som är definerat i elementets ”rel”.

Så:
<div id=”testDiv” class=”opacity” rel=”30″>hejhopp</div>
skulle göra att diven ”testDiv” visas med 30% opacitet.

Varför:

Genom att låta Mootools sköta all opacitet så undviker vi webläsarspecifik kod i css. Och när man testar opacitet i ie8 så är man ganska glad för att Mootools finns! ;)