Arkiv för kategori ‘Mootools’

« Äldre inlägg

Make Div clickable, klickbar

onsdag, 27 maj, 2009

Ibland är det jobbigt att få till så att divstrukturer får länkar som är klickbara  överallt. Det brukar sluta med att bara textfält i <div> element är klickbara. Oftast ser strukturen ut ungefär såhär:

<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!

Etiketter:, , ,
Postat i Mootools | Inga kommentarer »

SqueezeBox ajax och formulär

onsdag, 27 maj, 2009

SqueezeBox är ett förträffligt system för att hantera ajax och iframe popups med Mootools. Grunden till det är elementär att använda men när det kom till att implementera det till ett formulär blev det lite mer komplicerat. Genom att initiera SqueezeBox på ett element (div) med fromElement kunde vi dock få in formulärets svarsinformation på ett ok vis. Sen väljer vi att sätta begränsningar på boxens storlek, men om ni inte vill göra det så är det ju bara att ta bort size delen.

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();
});

Etiketter:,
Postat i Mootools, medel | Inga kommentarer »

Background opacity med Mootools

onsdag, 27 maj, 2009

När man skall göra lite roliga onmouseover effekter är det alltid roligt att att jobba med opacitet. Och varför inte använda Mootools för att sköte effekterna? Problemet är att från och till att man vill inte dra ner opaciteten på texten för att det då blir svårläst. Istället kan man lägga en div med en bakgrundsbild som man sätter opacitet på genom mouseenter och mouseleave funktionerna. Effekten kan göras väldigt påtaglig och koden är extremt liten jämfört med att ladda flera bilder representerar de olika stegen. Med lite utveckling av koden kan ju olika stadier i knapptryckningen ha olika effekter, men det får bli ett annat inlägg.

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');
});

Etiketter:, , , ,
Postat i Mootools, nybörjare | Inga kommentarer »

Mouseenter och Mouseleave för att hantera muspekarevent med mootools

torsdag, 16 april, 2009

Vi visade ett menyscript för några veckor sedan och nu kommer lite mootools kod som på ett mycket enkelt vis hanterar onmouseover. Det bygger på addEvents på ett objekt. Som vi har satt det nu så hämtar det ju alla objket med classnamnet ”Gaos”. Men självklart kan du få detta att peka på id eller kanske ul li taggar. Sen använder vi funktionerna ‘mouseenter’ och ‘mouseleave’ och så förändrar vi hur detta objekts class definition görs. Så när musen kommer över objektet läggs först ett mellanslag och sedan classdefinitionen over på. Samma sak tas givetvis bort när musen inte längre är på objektet.

$$('.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);

Etiketter:, , , ,
Postat i Mootools, css, nybörjare | Inga kommentarer »

JavaScript, runda hörn och skuggor

måndag, 9 mars, 2009

Runda hörn har, är och kommer alltid vara lite roligare och snyggare än kvadratiska. Att göra hörnen med bilder är ok, men om man pga olika bakgrunder skall blanda in .png bilder så blir det även om det är lösbart alltid lite krångligt och lite tungladdat. Med ett JavaScript som heter shadedborder.js så löser vi våra problem på ett ganska smidigt.

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!)

Etiketter:, , ,
Postat i Mootools, css, html, medel | Inga kommentarer »

« Äldre inlägg