jQuery Modal (jQuery div popup window)

Vi designere synes at kunne lide brugen af modal windows mere og mere, da de giver en hurtig måde at vise data uden at genindlæse hele siden. Det er nemt at bruge og relativt nemt at designe. Men her er hjælpen, der gør det rigtig nemt!



NyroModal v2 :: jQuery Plugin er et rigtigt godt plugins med mange mulighed for styling.

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.

Er facebook blevet hacket?!

 

Fjæsbog er i dette øjeblik i store dele af verden utilgængelig. Sitet svarer slet ikke! Da jeg var inde kl 7.30 var siden stadig nede - og her kl. 8.50 virker det stadig ikke.
Der er ingen der ved noget hos Facebook ... har Anonymous været på spil?!

Der er nok nogle der vågner op til en forskrækkelse :-) hvad skal de så bruge deres arbejdstid til?! Haha

Jazz

En gang i mellem falder man i sin søgen over noget unikt ... denne gang har du et brilliant musik nummer ... http://www.youtube.com/watch?v=YM8drbH_YvQ

Koop ... check det ud!