Vi har byggt en ny site till Dentway som säljer tandblekning på den nordiska marknaden. Vi börjar med att lansera svenska siten idag, under veckan kommer norska sidan ut. Dentway startades 2005 och har 4 anställda. De produkter Dentway säljer är exakt samma som du kan köpa hos tandläkaren. Då kostar dock behandlingen ett par tusen kronor extra.
Inlägg märkta ‘Mootools’
Tandblekning
måndag, 26 april, 2010Make Div clickable, klickbar
onsdag, 27 maj, 2009Ibland ä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!
SqueezeBox ajax och formulär
onsdag, 27 maj, 2009SqueezeBox ä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();
});
Background opacity med Mootools
onsdag, 27 maj, 2009Nä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');
});
Mouseenter och Mouseleave för att hantera muspekarevent med mootools
torsdag, 16 april, 2009Vi 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);