Jacob Jensen | Jacob Jensens blog om webdesign

Viser opslag med etiketten script. Vis alle opslag

lørdag den 14. april 2012

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.

fredag den 30. marts 2012

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.

mandag den 21. november 2011

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.

torsdag den 8. september 2011

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>