Tag Archives: CSS

HTML

HTML – Hide the broken icon when the is not yet loaded

2 Comments

Updated @ 2015-10-12: The following snippet could get rid of the broken icon without using CSS and JS.

<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
  <image width="1920" height="500" xlink:href="" ng-href="{{ image.href }}"></image>
</svg>

 

Thanks Wouter De Loose.

–

 

i have the following <svg> in an AngularJS template and the image source would be assigned by the controller which loaded the image info from a .json file.

<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
  <image width="1920" height="500" xlink:href="{{ image.href }}"></image>
</svg>

 

It works fine on my local machine but when i put it on a webserver. There would be a flash of the broken image before the image is loaded. Continue reading HTML – Hide the broken icon when the is not yet loaded →

CSS, HTML, Web Development

Offset the anchor link for sticky header

Leave a comment

If you have a sticky header (Position fixed header on the top of the html page), your anchor link with CSS ID would not work as you expected. The target section would be covered by the position fixed header.

You can use the following CSS to offset the fixed header height.

/* The target CSS ID with :before pseudo class */
.offset:before { 
  display: block; 
  content: " "; 
  height: 150px;      /* Give height of your fixed element */
  margin-top: -150px; /* Give negative margin of your fixed element */    
  visibility: hidden; 
}

 

Done =)

Reference: Offsetting Anchor Hash Tag Links To Adjust For Fixed Header

CSS, HTML

CSS – Number rating widget

2 Comments

I have a HTML form which has radio inputs range from 1 to 5:

<form>
  <input type="radio" name="num" value="1" checked>1
  <input type="radio" name="num" value="2">2
  <input type="radio" name="num" value="3">3
  <input type="radio" name="num" value="4">4
  <input type="radio" name="num" value="5">5
</form>

 

I want to convert it into a rating widget. I found a very good post with an example to convert radio inputs into a star rating widget.

Code by Stephen Morley – A star rating widget using CSS

But instead of rating by stars, i would like to create a number rating widget. So i modified the example a bit. First, create a image as follow.
icon_number_widget.png
icon_number_widget
Continue reading CSS – Number rating widget →

CSS

Bootstrap 3 – Tooltip width

2 Comments

Say i have the following text field which i would like to show the tooltip on the right.

<input type="text" class="form-control" name="nickname" rel="txtTooltip" title="tooltip text" data-toggle="tooltip" data-placement="right"/>

 

Let’s invoke the tooltip in Javascript as follow:

$('input[rel="txtTooltip"]').tooltip();

 

The tooltip above has a limited width.
bootstrap-3-tooltip-width-1
Continue reading Bootstrap 3 – Tooltip width →

CSS, CSS3

CSS3 – Image zoom on mouse hover

Leave a comment

With CSS3 transition property, we can do some simple animation effects. The following example will zoom in the image when mouse hover.

<!DOCTYPE html>
<html>
<head>
  <title>Eureka! | CSS3 - Image zoom on mouse hover</title>
  <style type="text/css">
    .image-wrapper {
      width: 200px;
      height: 200px;
      overflow: hidden;
    }

    .image {
      width: 200px;
      height: 200px;
      position: relative;
      left: 0;
      top: 0;
      transition: all 1s linear;
    }

    .image:hover {
      width: 400px;
      height: 400px;
      left: -100px;
      top: -100px ;
    }
  </style>
</head>
<body>
  <div class="image-wrapper">
    <img class="image" src="https://eureka.ykyuen.info/wp-content/uploads/2014/03/mickey-mouse.jpg">
  </div>
</body>
</html>

Done =)

HTML5, jQuery

100% height does not work for HTML5 Doctype

Leave a comment

Recently doing some proof of concept on using jQuery SnapScroll. The demo worked without any problem but when i implemented it, i couldn’t make my div taking 100% height of the view port. Finally i figured out that the failure was caused by the HTML5 Doctype declaration on the index.html.

<!DOCTYPE html>
<html>
...
</html>

Continue reading 100% height does not work for HTML5 Doctype →