Skydda epost-adress på hemsida mot spam

Om man skriver ut en e-post-adress på en hemsida så dammsuger snart olika spam-företag upp den och inbox fylls av oönskad e-post. Med hjälp av jQuery kan du kryptera adressen för spamrobotarna.

Skriv inom head-taggen:

<script type="text/javascript">
jQuery.fn.mailme = function() {
var at = / at /;
var dot = / dot /g;
this.each( function() {
var addr = jQuery(this).text().replace(at,"@").replace(dot,".");
var title = jQuery(this).attr('title')
$(this)
.after('<a href="mailto:'+addr+'" title="'+title+'">'+ addr +'</a>')
.remove();
});
};
$(function()
{
$('span.mailto').mailme();
});
</script>


Skriv i body-taggen där du vill visa din mailto-adress:

<span class="mailto">info at dinadress dot se</span>


Ladda ner Mailme - Email Defuscator

Föreslå användarnamn baserat på förnamn och efternamn

Låt besökaren slippa fylla i användarnamn - föreslå automatiskt ett namn baserat på förnamn och efternamn! Låt jQuery fixa det:

Lägg inom HEAD-taggen:

<script type="text/javascript" src="includes/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if(firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
});
});
</script>

I formuläret:

Förnamn:
<input type="text" name="firstname" id="firstname" />
Efternamn:
<input type="text" name="lastname" id="lastname" />
Användarnamn:
<input type="text" name="username" id="username" />

Använd jQuery för att kolla om användarnam är ledigt

Visst blir formuläret snyggare och enklare att fylla i om besökaren direkt ser om användarnamnet redan är upptaget. Fixa det enkelt med jQuery!

Lägg inom HEAD-taggen:

<script type="text/javascript" src="includes/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#username").change(function() {
var usr = $("#username").val();
if(usr.length >= 3) {
$("#validateUsername").html('<img src="images/loader.gif" height="16" width="16" /> kontrollerar tillgänglighet...');
$.ajax({
type: "POST",
url: "includes/availability.php",
data: "username="+ usr,
success: function(msg){
$("#validateUsername").ajaxComplete
(function(event, request, settings){
$("#validateUsername").html
(msg);
});
}
});
}
});
});
</script>

I formuläret:

<input type="text" name="username" id="username" /> <span id="validateUsername"></span>

I filen check.php kontrollerar du om användarnamnet ($_POST['username']) är tillgängligt och skriver ut (echo) resultatet som då hamnar inom span-taggen med id validateUsername.

Laddningssymbolen kan du spara härifrån:

Validera formulär med jQuery

jQuery går alldeles utmärkt att använda till att validera olika fält i formulär.

Lägg inom HEAD-taggen:

<script type="text/javascript" src="includes/jquery.js"></script>
<script type="text/javascript" src="includes/jquery.validate.min.js"></script>

Obligatoriska fält
Ange klassen required för de fält i ditt formulär som ska vara obligatoriska att fylla i.

Ex:
<input type="text" name="username" class="required" />

Validera epost
Ange klassen email för att kontrollera om ifylld epost-adress är giltiga.

Ex:
<input type="text" name="email" class="email" />

Kräva ett visst antal tecken
Vill man begränsa antalet tecken som matas in till minsta antal och högsta antal anger man klassen rangelength.

Ex:
<input type="password" name="password" class="rangelength" maxlength="10" minlength="5" />

Stämmer lösenorden överrens?
Ska besökaren skriva in sitt lösenord två gånger? Då kan jQuery matcha lösenorden så att de stämmer överrens.

Ex:
Lösenord: <input type="password" name="password1" id="password1" />

Bekräfta lösenord: <input type="password" name="password2" id="password2" equalto="#password1" />

Godkänn villkoren
Har du en checkruta som måste kryssas i för att besökaren ska kunna skicka formuläret, t ex "Acceptera våra villkor annars..."? Gör en specialare!

Lägg inom HEAD-taggen:

<script type="text/javascript">
$(document).ready(function(){
$("#form").validate({ //#form är formulärets id
rules: {
agree: "required"
},
messages: {
agree: "Du måste godkänna villkoren!"
}
}); });
</script>

I formuläret:
Jag godkänner villkoren <input type="checkbox" id="agree" name="agree" />

Läs mer och ladda ner plugin

Spelare till video på webben

Har du en video du vill lägga på din hemsida så kan du använda open source mediaspelaren
JW FLV Player, gjord i Flash. Man kan välja bland olika s k skins och den har stöd för flera filformat, bl a FLV, MP3, MP4 och AAC.

När jag lägger in Flash på en hemsida använder jag alltid swfobject. Här är två exempel på hur man lägger in sin film med JW FLV Player:

Ladda hem JW FLV Player >>

En film i storlek 640 x 480:
(lägg till 20 pixlar på höjden för spelarens kontrollpanel)

swfobject 1.5

Lägg i bodyn:
<div id="filmkontainer"></div>
<script type="text/javascript">
var so = new SWFObject('player.swf','mpl','640','500','8');
so.addParam('allowfullscreen','true');
so. addParam('flashvars','file=film.flv&autostart=true');
so.write('filmkontainer');
</script>

swfobject 2.0

Lägg i headern:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var params = {
allowfullscreen: "true",
allowscriptaccess: "always",
};
var vars = {
file: "film.flv",
autostart: "true"
}
swfobject.embedSWF("player.swf", "filmkontainer", "640", "500", "8", null, vars, params);
</script>

Lägg div-taggen där filmen ska visas i bodyn:

<div id="filmkontainer"></div>

Med thickbox

Om du vill visa videon på skärmen med jQuery thickbox:

<a href="#TB_inline?inlineId=filmkontainer&height=500&width=640" class="thickbox">Visa filmen</a>

Rolig fisheye meny med jQuery

Hittade en rolig meny som växer när man för musen över menyns olika länkar, en s k fisheymeny. Den kräver jQuery och ett interface.

Se exempel på fisheye-meny >>

Ladda hem interface.js >>

Lägg inom HEAD-taggen:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="interface.js"></script>
<script type="text/javascript">
$(document).ready(

function()
{
$('#fisheye').Fisheye(
{
maxWidth: 81,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 51,
proximity: 73,
halign : 'center'
}
)
}
);
</script>

Lägg i BODYn:

<div id="fisheye" class="fisheye">
<div class="fisheyeContainter">
<a href="#" class="fisheyeItem"><img src="images/menyflik_start.png" height="40" /><span>Start</span></a>
<a href="#" class="fisheyeItem"><img src="images/menyflik_funktion.png" height="40" /><span>Funktion</span></a>
<a href="#" class="fisheyeItem"><img src="images/menyflik_garanti.png" height="40" /><span>Garanti</span></a>
<a href="#" class="fisheyeItem"><img src="images/menyflik_faq.png" height="40" /><span>FAQ</span></a>
<a href="#" class="fisheyeItem"><img src="images/menyflik_bestall.png" height="40" /><span>Beställ</span></a>
</div>
</div>
</div>

Lägg i din CSS:

.fisheye{
text-align: center;
height: 51px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
font-weight: bold;
text-decoration: none;
width: 88px;
position: absolute;
display: block;
top: 0;
}
.fisheyeItem img
{
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.fisheyeItem span {
display: none;
positon: absolute;
}
.fisheyeContainter
{
height: 51px;
width: 200px;
left: 500px;
position: absolute;
}

På hemsidan finns mer förklaringar och förslag på inställningar.

IE6 förstör transparenta png-bilder - perfekt lösning

Av någon anledning stödjer IE6 inte transparenta png-bilder trots att formatet fanns innan IE6 lanserades.

Det finns en snygg lösning - jquerys plugin unitpngfix - som dessutom är enkel att installera. Du länkar till jQuery och pngFix och aktiverar funktionen i HEAD-sektionen. Sedan visas alla png perfekt även i IE 5.5 och IE 6.

Png-fixen fungerar även med CSS-bakgrunder.

Ladda hem PNG-Transparency for Windows IE 5.5 & 6

Designad scrollbar för DIV-tagg

Använder du jQuery på din hemsida kan du få till en snygg scrollbar av egna bilder. På jQuerys pluginsida hittar du mängder med roliga plugins till jQuery, bl a jScrollPane. Med jScrollPane kan du göra olika varianter av scrollbars. Här är ett exempel på en scrollbar där bakgrunden och slidern är bilder.

Skapa en bakgrundsbild för din scrollbar i gif-format med måtten 16 x 1 pixlar och döp till "bar.gif". Skapa en sliderbild i måtten 16 x 56 och döp till slider.gif. Ändra eventuellt inställningar i filen jScrollPane.js. Sök efter "settings".

Inom HEAD-taggen lägg:
<script src="/jquery.js" type="text/javascript"></script>
<script src="/jScrollPane.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('.scroll-pane').jScrollPane({
scrollbarWidth: 16
});
});
</script>

Ange klassen "scroll-pane" till en div-tagg:
<div class="scroll-pane">
Ditt innehåll.
</div>

I din CSS lägger du till:
.scroll-pane { width: 100%; overflow: auto; height: 400px; }
.scroll-pane_start { width: 100%; overflow: auto; height: 380px; }
.jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1; }
.jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%;
background: url(/images/bar.gif) top center repeat-y; }
.jScrollPaneDrag { position: absolute; background: url(/images/slider.gif) center center no-repeat; cursor: pointer; overflow: hidden; }

Ladda hem jQuery >>

Ladda ner jScrollPane >>

Fler exempel på scrollbars >>