alexyz » CSS

jQuery .hover change div background-position example

admin — Wed, 16 Nov 2011 23:48:11 +0000

example for reference:

$(“#formButtonSubmit“).hover(function(){
$(this).css({
backgroundPosition: ’0px 0px’
});
}, function(){
$(this).css({
backgroundPosition: ’0px 30px’
});
});

CSS !important override

admin — Tue, 01 Feb 2011 20:23:05 +0000

A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.

example:

p { color: #ff0000 !important; }

CSS text-transform

admin — Tue, 01 Feb 2011 20:22:24 +0000

{text-transform:uppercase}
{text-transform:capitalize}
{text-transform:lowercase}

also consider:
{font-variant:small-caps}

CSS pseudo elements & pseudo classes

admin — Tue, 01 Feb 2011 20:21:21 +0000

CSS Pseudo Elements

:after
Adds content after an element

:before
Adds content before an element

:first-letter
Adds a style to the first character of a text

:first-line
Adds a style to the first line of a text

example:
h1:after
{
content:url(smiley.gif);
}

Posted on 5 Oct 2009, 17:00 – Category: CSS
Comments – Edit – Delete

Pseudo Classes

:active
Adds a style to an element that is activated

:first-child
Adds a style to an element that is the first child of another element

:focus
Adds a style to an element that has keyboard input focus

:hover
Adds a style to an element when you mouse over it

:lang
Adds a style to an element with a specific lang attribute

:link
Adds a style to an unvisited link

:visited
Adds a style to a visited link

CSS em

admin — Tue, 01 Feb 2011 20:18:36 +0000

pixels/16=em
example:
h1 {font-size:2.5em} /* 40px/16=2.5em */
h2 {font-size:1.875em} /* 30px/16=1.875em */
p {font-size:0.875em} /* 14px/16=0.875em */

I always like to have a nice simple AJAX example on hand, you never know…

admin — Wed, 28 Jul 2010 04:52:02 +0000

reference:

http://w3schools.com/php/php_ajax_php.asp

HTML:

Start typing a name in the input field below:

Suggestions:

Script:

// Fill up array with names
$a[]=”Anna”;
$a[]=”Brittany”;
$a[]=”Cinderella”;
$a[]=”Diana”;
$a[]=”Eva”;
$a[]=”Fiona”;
$a[]=”Gunda”;
$a[]=”Hege”;
$a[]=”Inga”;
$a[]=”Johanna”;
$a[]=”Kitty”;
$a[]=”Linda”;
$a[]=”Nina”;
$a[]=”Ophelia”;
$a[]=”Petunia”;
$a[]=”Amanda”;
$a[]=”Raquel”;
$a[]=”Cindy”;
$a[]=”Doris”;
$a[]=”Eve”;
$a[]=”Evita”;
$a[]=”Sunniva”;
$a[]=”Tove”;
$a[]=”Unni”;
$a[]=”Violet”;
$a[]=”Liza”;
$a[]=”Elizabeth”;
$a[]=”Ellen”;
$a[]=”Wenche”;
$a[]=”Vicky”;

//get the q parameter from URL
$q=$_GET["q"];

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint=”";
for($i=0; $i {
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint==”")
{
$hint=$a[$i];
}
else
{
$hint=$hint.” , “.$a[$i];
}
}
}
}

// Set output to “no suggestion” if no hint were found
// or to the correct values
if ($hint == “”)
{
$response=”no suggestion”;
}
else
{
$response=$hint;
}

//output the response
echo $response;
?>

CSS link rollover class change

admin — Mon, 08 Mar 2010 14:24:40 +0000

onMouseOver=”this.className=’on’” onMouseOut=”this.className=’off’” href=”10_9_08 MEETING.mp3″>October 9, 2008

Inline Javascript CSS properties

admin — Mon, 01 Mar 2010 13:55:34 +0000

Inline Javascript CSS properties

dash replaced by capital

href=”#”
onmouseover=”this.style.textDecoration=’none’”
onmouseout=”this.style.textDecoration=’underline’”
style=”color:#FFFFFF text-decoration:underline;”
>
Details