Javascript mobil-detect og redirect

(function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://www.DINURL.com/mobile');

jQuery tool tip der virker!

Har endelig fundet en ordentlig jQuery-kode til at vise tooltips på alle elementer!

<script>

this.tooltip = function(){ 
 /* KONFIGURATION */ 
 xOffset = 10;
 yOffset = 20; 
 // Disse variabler bestemmer hvor langt fra cursoren popup'en vises

 $(".tooltip").hover(function(e){ 
  this.t = this.title;
  this.title = ""; 
  $("body").append("<p id='tooltip'>"+ this.t +"</p>");
  $("#tooltip")
  .css("top",(e.pageY - xOffset) + "px")
  .css("left",(e.pageX + yOffset) + "px")
  .fadeIn("fast"); 
 },
 
 function(){
  this.title = this.t; 
  $("#tooltip").remove();
 }); 
 
 $("a.tooltip").mousemove(function(e){
  $("#tooltip")
  .css("top",(e.pageY - xOffset) + "px")
  .css("left",(e.pageX + yOffset) + "px");
 }); 
}; 

// Start script "on page load"
$(document).ready(function(){
 tooltip();
});

</script>

Og CSS'en - jeg har lagt lidt runde hjørne og lidt skygge på for hyggens skyld.

#tooltip{
  display:none;
  position:absolute;
  top:120px;
  max-width:250px;

  padding:2px 5px;
  text-align:left;

  color:#fff;
  background:#333333;

  border: 2px #999 solid; 
  border-radius: 8px;
  -moz-border-radius: 8px;
  -web-border-radius: 8px;

  -moz-box-shadow: 0px 2px 10px  #333333;
  -webkit-box-shadow: 0px 2px 10px #333333;
  box-shadow: 0px 2px 10px #333333; 
} 

Herefter tilføjes class="" bare til et element, hvad enten det er

eller  og titlen kan indeholde HTML-koder!
 

<img src=".." class="tooltip" title="her er teksten.<br />Der kan bruges HTML-koder" />

Super tool tip!

jQuery FadeOut på ID

Fint lille script til at fade div's ud med.

<script>
  $(document).ready(function() {
     $('#fadeOut').delay(3000).fadeOut(400) 
  });
</script>

Herefter sættes ID="fadeOut" på den div, span, etc. man vil fade ud.

Fjern Submit-knap efter klik

Har tit manglet et script til at disable submit-knappen når den er blevet trykket på.
Og fandt så på at udskifte text og baggrund på knappen ved onClick.

<input ID="btn" type="button" value="GEM" class="buttonReserverPopup" onclick="javascript:document.getElementById('btn').disabled=true;javascript:document.getElementById('btn').value='GEMT';javascript:document.getElementById('btn').style.backgroundImage='url(../images/button-DISABLE.png)';return document.returnValue"/>

Ovenstående ændre baggrund og texten ved klik på submit.
1) Baggrunden ændres til et nyt billede...

javascript:document.getElementById('btn').style.backgroundImage='url(../images/button-DISABLE.png)';

2) Texten på knappen ændres til 'GEMT'...

javascript:document.getElementById('btn').value='GEMT';

3) Knappen gøres inaktiv med

document.getElementById('btn').disabled=true;

HTML5 storage-objekt

Lagring af data 
HTML5 tilbyder to nye objekter til lagring af data:
- localStorage - gemmer data uden tidsbegrænsning
- sessionStorage - gemmer data for en session

Tidligere blev dette gjort med cookies. Cookies er ikke egnet til store mængder data, da de hentes ved hver eneste anmodning til serveren, hvilket gør metoden meget langsom og in-effektiv.

I HTML5, er dataene lagret og bruges kun når de bliver spurgt om. Det er muligt at gemme store mængder data uden at påvirke webstedets ydeevne.

En hjemmeside kan kun få adgang til data lagret af sig selv.

HTML5 bruger JavaScript til at lagre og få adgang til data.

localStorage Object
localStorage objekt gemmer data uden tidsbegrænsning. Disse data vil være tilgængelig den næste dag, uge ​​eller år.

<script type="text/javascript">
  localStorage.lastname="Jensen"
  document.write(localStorage.lastname)
</script>

sessionStorage Object
sessionStorage objekt gemmer data for en session. Data slettes, når brugeren lukker browser-vinduet.

<script type="text/javascript">
  sessionStorage.lastname="Jensen"
  document.write(sessionStorage.lastname)
</script>

Ajax, jQuery tips and tricks

Sådan ender det jo når man sidder og surfer.

Jeg faldt lige over http://cssglobe.com/post/9801/easy-paginate-jquery-plugin-for-pagination. herudover er der mange andre fede scripts og tutorials

Og denne her http://superdit.com/category/freebies/

TOOLTIPS
http://superdit.com/2011/01/20/jquery-tooltip-plugins-and-tutorial-collection/
http://vadikom.com/demos/poshytip/

13 gode jQuery-slider-links
http://webdesignledger.com/tutorials/13-super-useful-jquery-content-slider-scripts-and-tutorials

TEMPLATES
http://www.os-templates.com/

jQuery pop-up

Her er et rigtig godt script til at lave CSS-popups.

<title>Test Document</title>
<script src='http://code.jquery.com/jquery-1.4.2.min.js'></script>
<script src='http://plugins.jquery.com/files/jquery.koverlay.1.3.js.txt'></script>
</head>
<body>
  <a href='javascript: void(0);' onclick="$('#my_hidden_div_id_1').koverlay({title: 'OVERSKRIFT HER'});$('.css_koverlay').css({'background-color':'#9c183a'});">Link Text</a>
  <div id="my_hidden_div_id_1" style="display: none;">INDHOLD HER...</div>
</body>
</html>

http://flowplayer.org/tools/demos/overlay/index.html

CSS popup centreret

Faldt lige over dette script. Eneste problem er at man ikke kan anvende billeder i pop-up'en, da den ligger inden i #displaybox. Har prøvet mig lidt frem, men kan ikke få vist billeder som baggrund i pop-up'en.

<head>
<style>
#displaybox {
   z-index: 10000;
   filter: alpha(opacity=50); /*older IE*/
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
   -moz-opacity: .50; /*older Mozilla*/
   -khtml-opacity: 0.5; /*older Safari*/
   opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/
   background-color:#000000;
   position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}

<script>
function clicker(){
   var thediv=document.getElementById('displaybox');
   if(thediv.style.display == "none"){
      thediv.style.display = "";
      thediv.innerHTML = "TEXTEN<a href='#' onclick='return clicker();'>LUK</a>";
   }else{
      thediv.style.display = "none";
      thediv.innerHTML = '';
   }
return false;
}
</script>

<body>
<div id="displaybox" style="display: none;"></div>
<a href='#' onclick='return clicker();'>ÅBEN VINDUE</a>
</body>

Facebook Metatags

Må hellere lige for en god ordens skyld præsentere hele FB-koden
Nedenstående placeres i <head>

<!-- facebook meta #start ************************* -->
<meta content='Jacob Jensens blog om Webdesign, mm.' property='og:title'/>
<meta content='website' property='og:type'/>
<meta content='http://jacob-jensen.blogspot.com/' property='og:url'/>
<meta content='http://www.jjweb.dk/images/jjweb-blog-facebook.png' property='og:image'/>

<meta content=http://www.ditsite.dk' property='og:site_name'/>
<meta content='din beskrivelsen som af sitet' property='og:description'/>
<meta content='DIT-FB-BRUGER-ID' property='fb:admins'/> 
<!-- facebook meta #end   ************************* -->

Nedenstående skal placeres i <body> hvor man ønsker FB.

<!-- facebook #start ************** -->
<div id='fb-root'/>
<script language='javascript' src='http://connect.facebook.net/da_DK/all.js#xfbml=1'/>
<fb:like action='like' font='segoe ui' href='http://jacob-jensen.blogspot.com/' layout='button_count' send='false' show_faces='false' width='200'/>
<!-- facebook #end   ************** -->

Du skal være opmærksom på at du ikke kan være logget på FB, når du bruger deres værktøjer. Dette også selvom du er medlem af deres developer group. Jeg kunne i hvert fald ikke!

Du skal også være opmærksom på at W3.org ikke anerkender Facebook metatags som valide!

Kryptering

Får du mange spammails? Det kan være fordi du ikke har krypteret din mail-adresse på din hjemmeside. Det er meget vigtigt at man får krypteret sin mail-adresse i footeren eller at man bruger en kontakt-formular i stedet for en mailto: kommando.

Man kan enten vælge HTML-eller Java-kryptering. 

Klik her for at få mere hjælp