Missing image problem

I have often come across the problem of a missing image when developing a site.

The solution is simple.

<img src=”image.gif” width=”100″ height=”100″ onerror=”this.src=’error.gif’;”>

If the correct image doesn’t exist the image named error.gif will be used instead.

Credit goes to Rob Gonda for this tip.

Posted in Uncategorized on the April 23rd, 2008 | No Comments »

CSS font shorthand

font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 1em;
line-height: 140%;
font-family: Helvetica, sans-serif;

/* Combined into one shorthand rule */
font: italic small-caps bold 1em/140% Helvetica, sans-serif;

Posted in css on the March 25th, 2008 | No Comments »

ASCII Entities with Entity Names

ASCII Entities with Entity Names

ISO 8859-1 Symbol Entities

ISO 8859-1 Character Entities

Posted in Uncategorized on the March 10th, 2008 | No Comments »

jQuery fading images

A nice way to fade in and out of images

include
<script type=”text/javascript” src=”js/jquery-1.2.1.min.js”></script>
<script type=”text/javascript” src=”js/common.js”></script>
<script type=”text/javascript” src=”js/jquery.slideshow.js”></script>

javascript for common.js
    // Animate homepage banner…
var obj = $(’#slideshow’);
// check object exists…
if (obj.length>0) {
// remove the hideslide class as javascript is enabled…
$(’#slideshow img.hideslide’).each(function(i){
$(this).removeClass(”hideslide”);
});

$(obj).slideshow({
timeout: 5000,
type: ’sequence’
});
}

 CSS

#slideshow{
margin:0;
padding:0;
height:161px;
}

#slideshow img {
position: relative;
left: 0;
top: 0;
width: 900px;
height: 161px;
}

XHTML 

<div id=”slideshow”>
<img src=”images.jpg” alt=”slide 1″ />
<img src=”images.jpg” alt=”slide 2″ width=”900″ height=”161″ class=”hideslide” />
<img src=”images.jpg” alt=”slide 3″ width=”900″ height=”161″ class=”hideslide” />
<img src=”images.jpg” alt=”slide 4″ width=”900″ height=”161″ class=”hideslide” />
</div>

Posted in jQuery on the March 4th, 2008 | No Comments »

Lining up labels with radio/checkboxes

I used to battle with trying to line up labels horizontally with radio or checkboxes…. it never looked the same in all browsers.

Solution:

HTML:

<ul class=”form-check”>
<li><input name=”radio” type=”radio” value=”yes” /><label>Yes</label></li>
<li><input name=”radio” type=”radio” value=”no” /><label>No</label></li>
</ul>

CSS:

ul.form-check{
padding: 0;
margin: 0;
}

ul.form-check li{
display: block;
list-style: none;
clear: both;
float: none;
height: auto;
overflow: auto;
background:#f2ffe4;
}

ul.form-check li input{
display: block;
float: left;
}

ul.form-check li label{
display: block;
margin-left: 0.4em;
margin-top: 0.1em;
float: left;
clear: right;
font-size:0.9em;
}

If you would like the list inline:

<ul class=”form-check-inline”>
<li><input name=”checkbox” type=”checkbox” value=”" /><label>Option 1</label></li>
<li><input name=”checkbox” type=”checkbox” value=”" /><label>Option 2</label></li>
<li><input name=”checkbox” type=”checkbox” value=”" /><label>Option 3</label></li>

</ul>

ul.form-check-inline{
padding: 0;
margin: 0;
}

ul.form-check-inline li{
display: inline;
list-style: none;
float: none;
height: auto;
overflow: auto;
background:pink;
}

ul.form-check-inline li input{
display: block;
float: left;
}

ul.form-check-inline li label{
display: block;
margin:1px 10px 0 0;
float: left;
clear: right;
font-size:0.9em;
}

Posted in css on the February 27th, 2008 | No Comments »

Subscribe to this site

• Categories

  • coldfusion
  • css
  • jQuery
  • reviews
  • tools
  • Uncategorized
  • XHTML CSS

• Links

  • aliaspooryorik

• About Me

  My name is Andy Beer and I am a creative developer from Torquay in the UK. This site is all about design, development, flex, flash, frameworks, XHTML, photogrpahy, design concepts and workflow techniques.

© 2008 Flamingsquirrel