Fade in når siden er hentet

Her er et lille jQuery-script til at fade en side ind når indholdet er hentet.

<script>
$(document).ready(function(){
  $('#page_effect').fadeIn(2000);
});
</script>

<!-- jQ container --> 
<div id="page_effect" style="display:none;">
     {INDHOLD}
</div>

Opret custom Ajax-loading-file

Opret dit eget "loading-icon" her http://ajaxload.info/

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.

jQuery ScrollTo - animeret scroll-funktion

Hvis man vil lave en animeret scroll-funktion til sine sider og lave en smooth scroll til sit anchor kan det gøres vha. jQuery.

<script src="jquery.js" type="text/javascript"></script>
<script>
function goToByScroll(id){
   $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
</script>

'slow' kan med fordel udskiftes med 1000 (svarer til slow i millisekunder), så der kommer til at stå:

   $('html,body').animate({scrollTop: $("#"+id).offset().top},1000);

Her er a href'en...

<a href="javascript:void(0)" onClick="goToByScroll('1')">Go to anchor 1</a>
<a href="javascript:void(0)" onClick="goToByScroll('2')">Go to anchor 2</a>

Her linkes til id="1" og id="2" som kan sættes på h1, h2, p, span, osv.

Exempel:

<h1 id="1">Overskrift</h1>

Integreret CSS3 og DB Inline scripts

Har med mit seneste projekt www.skæppeskønt.dk kastet mig ud i HTML5 og CSS3.
Og det ikke uden problemer.
Problemerne opstår fordi der skal laves extra mange styles, da stort set hvert eneste browser på markedet viser siderne forskelligt.
Firefox viser ikke texten ens på PC og Mac til trods for det er samme version. Windows 7, Vista og XP viser heller ikke det samme til trods for at browser-versionen er den samme på alle systemer.

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