CSS – full screen overlay layer

Often when you display a gallery of pictures, you want to dim the website in to the background. I have tryed implementing several solutions based on placing a html element on top of all the others by setting position to absolute, and height and width to 100%. That worked ok as long as the page was no bigger than the screen. But when i scrolled the page i noted that my absolute layer was attached to the top of the page,.. so it scrolled with the page,.. so that was clearly not the way to go,..
So here’s what i came up with to solve this,..

.dim
{
			height:100%;
			width:100%;
			position:fixed;
			left:0;
			top:0;
			z-index:1 !important;
			background-color:black;
}

and it worked as a charm,.. position fixed did the trick,. woohoo,..
to make this overlay more fancy you can add opacity to it by setting a
semitransparent png pixel to the background(works in most browsers)
or do it the old fashioned way

filter: alpha(opacity=75); /* internet explorer */
-khtml-opacity: 0.75;      /* khtml, old safari */
-moz-opacity: 0.75;       /* mozilla, netscape */
opacity: 0.75;           /* fx, safari, opera */

Advertisement

Get YouTube video Data via JSON

I will start with one big thanks to peaple from goole and their documentation of Youtube API (c: thay rock ,..
Well, I wanted to get the title of a youtube video by using javascript, and this proved to be very dificult until i found this article
It apears that Youtube Data API alows you to get all the data you need, title, thumbnail You name it, well read the article (c:

ony how i only wanted the title and this is how i did it ..
first add you function.

<script type="text/javascript">
 function FeedCallback( data )
 {
 //get title from YouTube Data API via JSON
   document.getElementById('Title').innerHTML = data.entry[ "title" ].$t;
 }
 </script>

Now this is the busines end of it all

 <script type="text/javascript" src =
 "http://gdata.youtube.com/feeds/api/videos/<yourVideoID>?v=2&amp;alt=json-in-script&amp;callback=FeedCallback"
 </script>

This bit is described her under how it works, here are the bolts and bits of this url

<yourVideoID> is your video ID (c:
v=2 instructs the server to use version 2 of the Youtube API to handle this request
alt=json-in-script instructs the server to send the data in JSON format wrapped inside a call to the callback function; this method is used to avoid crossdomain restrictions imposed by modern browsers.
callback=FeedCallback is the name of the callback function that will handle the JSON data.

that is sweet (c:

P.S here’s some more http://code.google.com/intl/da-DK/apis/youtube/2.0/developers_guide_json.html

How to disable caching of input fields

this is one pesky feature,.. if you ask me. well to the point ,. if u make your ordanary<input> html control the content of it will be cached in browser memory,.  this way if you press F5 it will remember your input,.. and from time to time you want to diable that ,.. and this is how you do it.

add autocomplete=”off” attribute to your her’s an exsample.

<input  type=”text”  id=”myInput runat=”server”   value=”” autocomplete=”off”  />

CSS Compatibility and Internet Explorer

Did you ever wonder about the CSS compatibility of IE trou out the browsers history ,.. well wonder no more and read this article on MSDN
http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx and good luck (c:

Using javascript width a-tag href atribute

Recently i’ve descovered a problem with using javascript and events with anchor tags
the folowing code is not compatible with IE6, but works on everything else

<a href=”javascript:return;”  onclick=”javascript:doSomething();”>mjau</a>

when run this code results in Javascript – error  in IE6..
to resolve this,. issue ,.. you can do following ,.. move the return statment after
your javascript funktion.. like this

<a href=”#” onclick=”javascript:doSomething(); return false;”>mjau</a>

problem solved ,.. (c:

RSS feed madness in IE7/IE8

Beeing a developer, i was a bit irritated about the way IE formats RSS feeds to HTML,..
so this is how you turn it off,..

1) Choose Tools menu from the top menu ,
2) Look for and Click on Internet Options,
3) Click on the Content tab,
4) Look for Feed section and Click on the Settings button to bring up Feed Settings dialog box,
5) Un-tick the check-box of Turn On Feed Reading View option.
6) Click OK all the way to close all opened dialog boxes.

and enjoy your nonformated RSS feed in pure XML in your IE browser ,.. I feel so much better now ,.. (c: