Tag Archives: HTML5

Web Development

SVG clip-path doesn’t work in html5mode

Leave a comment

I am working on an AngularJS project with html5mode enabled. I would like to implement the Card Expansion effect written on Codrops. Everything works fine but the SVG clip-path animation doesn’t work.

This is because i have ended the <base> tag in the index.html for the html5mode so the clip-path value has to be an absolute path. i.e.

<!-- fail with base tag -->
<image clip-path="url(#clipPath1)" width="1920" height="500" xlink:href="a.jpg"></image>

Change to

<!-- it works! -->
<image clip-path="url(http://localhost:10000/project#clipPath1)" width="1920" height="500" xlink:href="a.jpg"></image>

 

If you want it to work on IE, please refer to the post in the reference.

Done =)

Reference: StackOverflow – Svg clipPath in AngularJS app with url in hashbang mode

Advertisement
Web Development

Gulp – Handle page reload in gulp-connect using connect-history-api-fallback

Leave a comment

Page reload doesn’t work after enabled the html5mode. We have to rewrite the url and it could be easily done by using a middleware for the connect server.

gulpfile.js

var connect            = require('gulp-connect');
var historyApiFallback = require('connect-history-api-fallback');

gulp.task('connect', function() {
  connect.server({
    middleware: function(connect, opt) {
      return [ historyApiFallback({}) ];
    }
  });
});

 

Done =)

Reference: GitHub – bripkens/connect-history-api-fallback

Javascript

Javascript – Add query parameter to current URL without reload

3 Comments

The following example adds a query parameter to the URL without refreshing the page but only works on modern HTML5 browsers.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Add query parameter to the url without reload</title>
</head>
<body>
  <button onclick="updateURL();">Update</button>
  <script type="text/javascript">
    function updateURL() {
      if (history.pushState) {
          var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?para=hello';
          window.history.pushState({path:newurl},'',newurl);
      }
    }
  </script>
</body>
</html>

 

Reference: StackOverflow – How do we update URL or query strings using javascript/jQuery without reloading the page?

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 →

Web Development

Setup Yeoman in Windows PowerShell

4 Comments

Update @ 2015-09-23: Using PowerShell is just my personal preference, You could use MS-DOS in Windows if your machine doesn’t have PowerShell installed.

1. Download Node.js and install it and make sure you have the npm package manager selected before the installation.
setup-yeoman-in-powershell-1
 
Continue reading Setup Yeoman in Windows PowerShell →

HTML5

HTML5 Doctype

Leave a comment

In HTML5, you can just use the following Doctype before the <html> tag.

<!DOCTYPE html>

Quote from W3Schools

The declaration must be the very first thing in your HTML5 document, before the tag.

The declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

In HTML 4.01, all declarations require a reference to a DTD, because HTML 4.01 was based on SGML.

HTML5 is not based on SGML, and therefore does not require a reference to a DTD.

Continue reading HTML5 Doctype →

CSS, Javascript

CSS Browser Selector – Align the CSS styles for different browsers and OS

Leave a comment

We have Modernizr to handle the HTML5 and CSS3 problem in old browsers.
Modernizr – Tackle the HTML5 and CSS3 problems in old browsers for frontend programming

Today, i would like to introduce another tool which could help you aligning the CSS styles for different browsers as well as OS. This tool is called CSS Browser Selector. Although it is not updated for more than a year, it is still very useful if you need to deal with Internet Explorer 7 & 8.

Similar to Modernizr, what u need to do is just included the library in the <head> tag.
Continue reading CSS Browser Selector – Align the CSS styles for different browsers and OS →

CSS3, HTML5, Javascript

Modernizr – Tackle the HTML5 and CSS3 problems in old browsers for frontend programming

3 Comments

Having problem on HTML5 and CSS3 with Internet Explorer? The Modernizr library could help you to tackle the problem. It checks the HTML5 and CSS3 features supported by the browser and developers could determine them by checking the classes of the <html> tag.

Download Modernizr and create the following index.html.
Continue reading Modernizr – Tackle the HTML5 and CSS3 problems in old browsers for frontend programming →

HTML5

HTML5 – Sound on mouseover

4 Comments

This is an example which will play a beep sound when the mouse enter an element with the help of HTML5.

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        var beep = $("#beep")[0];
        $("#play").mouseenter(function() {
          beep.play();
        });
      });
    </script>
  </head>
  <body>
    <audio id="beep" controls preload="auto">
      <source src="music.ogg" type="audio/ogg" />
      <source src="music.mp3" type="audio/mp3" />
      Your browser isn't invited for super fun audio time.
    </audio>
    <span id="play">play sound</span>
  </body>
</html>

Continue reading HTML5 – Sound on mouseover →