Solving development problems  |  About this blog

Triangle in pure HTML/CSS

Infinity in pure HTML/CSS

.triangle {
    border-bottom: 100px solid #FC2E5A;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 0;
}

Model 1:

<img src="images/blank.gif" onload="replaceImage(this, 'your-image-url')" width="75" height="75" />

Use function to replaceImage:

function replaceImage(img, replacementImage)
{
  img.onload = null;
  img.src = replacementImage;
}

blank.gif is an 1px x 1px pixel transparent image. Basically, the idea is that this blank image is loaded and expanded to 75×75 (to preserve layout). That almost immediately fires the onload handler, which changes the image’s source to the desired image.

Model 2:

var img = new Image();
img.onError = function(){
  //error handling here
}
img.onLoad = function(){
  //success
containerForImg.removeClass('loading-image').append($(img));
}
img.onAbort = function(){
  //user clicked stop
}
img.src = "http://example.com"   //loading begins NOW!

References:

http://goo.by/wE3TFa
http://goo.by/w7AjZN
http://goo.by/w0CsbA

Background image animations:

$('#nav a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -250px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})

Background transitions:

http://goo.by/wIJ6iD

Cool JQuery Animated robot:

TUTORIAL: http://goo.by/w4znKB
DEMO: http://goo.by/wmSMKs

Nice login page:

TUTORIAL: http://goo.by/wBrnQi
DEMO: http://goo.by/wdgmT1

Loading content:

TUTORIAL: http://goo.by/wn53Y0
DEMO: http://goo.by/wTGKDx

Some HTML WYSIWYG editors create ‘br’ tags or leave ‘ ’ garbage spaces when no content is entered. Described TrimWhiteSpaces method is useful when you need to determine if user left blank content in WYSIWYG editor or if you just want to clean HTML code.

TrimWhiteSpaces accepts raw HTML content and removes white spaces, tabs, new line characters, ‘br’ tags and ‘ ’ chunks from before and after the actual content.

public static string TrimWhiteSpaces(string html)
{
  string result = html;

  //Remove leading spaces
  result = Regex.Replace(result, @"^(?<leading>(\s|\r|\n|\<br\s*/?\>|&nbsp;)*)", "",
RegexOptions.IgnoreCase);

  //Remove trailing spaces
  result = Regex.Replace(result, @"(?<trailing>(\s|\r|\n|\<br\s*/?\>|&nbsp;)*)$", "",
RegexOptions.IgnoreCase);

  return result;
}

&nbsp;<br /><BR   ><BR> &nbsp;
&nbsp;&nbsp;<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
&nbsp;&nbsp;<br />
<p>Pellentesque lorem neque, accumsan eget euismod ut, tristique et odio.</p>
&nbsp;<br /> <br>
&nbsp;

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
&nbsp;&nbsp;<br />
<p>Pellentesque lorem neque, accumsan eget euismod ut, tristique et odio.</p>

Sometimes you need to detect browser version in CSS in order to apply additional, browser specific, properties to the same class.

Here are the ways for selecting specific versions of Internet Explorer by using followind conditional comments:

• IE 6 and below

  • Use * html {} to select the html element.

• IE 7 and below

  • Use *:first-child+html {} * html {} to select the html element.

• IE 7 only

  • Use *:first-child+html {} to select the html element.

• IE 7 and modern browsers only

  • Use html>body {} to select the body element.

• Modern browsers only (not IE 7)

  • Use html>/**/body {} to select the body element.

Example for IE7 only (change left padding to 5px instead of 20px as it is for other browsers)

.your_css_class
{
	color: #000;
	padding: 20px;
	background: #fff;
}

/* IE7 hack */
*:first-child+html .your_css_class
{
	padding-left: 5px;
}

This can be one possible implementation (not very clean, but working):

function sleep(numberMillis){
	var now = new Date();
	var exitTime = now.getTime() + numberMillis;
	while (true){
		now = new Date();
		if (now.getTime() > exitTime) return;
	}
};