jQuery Smooth Scroll Howto – Code Sample & Demo

With the jQuery library, you can do a ton of cool things to make a webpage ‘live’. From colours to animations and other special effects, most things are possible. One of these neat things to do is smooth scrolling with jQuery. Ever wondered to see a code example in HTML, CSS and JavaScript for smooth … 

 

Make Google Calendar iFrame responsive

Google Calendar allows you to embed one or more calendars on the web using an HTML iFrame. This is a great solution to publish an agenda online since it allows you to quickly share your existing calendar online with just a copy and paste. Still, the output is an outdated iFrame of the Google Calendar … 

 

WebRTC in a Nutshell

In a world where almost everyone has a smartphone (or any other smart device, e.g. a smartwatch), the customer is spending an increasing amount of time online such as in the web browser or on mobile apps. Consumer-grade solutions for real-time audio-visual and textual communication are widely available and popular among audiences of all ages. Examples … 

 

Style every other element with CSS

Styling your webpages with CSS is mostly quite basic. Still, sometimes you may be looking for a more challenging task. One I hadn’t had before was styling every other element in CSS. So in essence, I wanted to add a styling to the even or odd elements that occurred in HTML. To exemplify this, let’s … 

 

Add falling snow to your website

It’s Christmas time: let’s make it snow! It’s this time of the year again: Christmas and New Year. Maybe you’ve seen on some sites that the website owner/designer has added a nice snow effect on their webpages. The snow overlay gives a nice, cosy feeling to the visitor. And you may have thought: how did … 

 

Adding a print option on your HTML page

Companies and individuals are doing great efforts to print less and “go green”. However, as a web developer, you may still want to add a print option on your website. Printing out a webpage is still often used on some types of website, so offering an easy to use button or link is a good … 

 

Enable AMP HTML on your website

AMP HTML is an initiative from Google to speed up page load times drastically. The idea is to only load the essential content of that page, while leaving the Javascript and other non-essential elements behind. AMP stands for Accelerated Mobile Pages. Google, on their official blog, themselves say the following about this project: We hope … 

 

Embed a Google Drive folder on your website

If you want to show a folder from Google Drive on your website or blog, you can use an iframe to accomplish this. First, get the public URL of the folder. This might light like this: https://drive.google.com/#folders/unX9VBU8x9m66rJdZv (not an actual link). That last bit is the folder ID: unX9VBU8x9m66rJdZv. The iframe HTML code is: List view This will … 

 

CSS3 mouse cursor styles

Here is an overview of most CSS3 cursor styles that you might want to use in your web development applications. All modern browsers should work. Hover with your mouse over the boxes below to see a preview of the cursor style. cursor: alias; cursor: all-scroll; cursor: cell; cursor: col-resize; cursor: context-menu; cursor: copy; cursor: ew-resize; … 

 

Making a div element clickable in HTML

To make an element, for example a <div>, clickable in HTML, you can use the following code: We simply add the onlcick event and add a location to it. Then, additionally and optionally, we add a cursor: pointer to indicate to the user the div is clickable. This will make the whole div clickable. Making … 

 

Add blur in CSS to text

To obtain a blurry text effect with CSS, simply apply a text shadow and make the color transparant. This should be your CSS: And this your HTML code: Ultimately, you should see something like this: Add blur in CSS to text was last modified: December 1st, 2014 by Thomas

 

Set toolbar color in Chrome on Android

By using the theme-color meta tag, you set a toolbar color in Chrome on Android 5.0 and up. This color will then be used in the app drawer as well and by using a color, your website can stand out and be recognized immediately. Add the code, as found below, in your <head> of your … 

 

Add a custom logo to WordPress’ wp-admin login page

The default image you find when you go to example.org/wp-admin is the WordPress logo. To change this is an image of your choice, let’s say the logo of your company, simply add the following code to your functions.php file which can be found in the wp-content/themes/your-theme directory. Of course, make sure that the /wp-admin/images/wordpress-logo.png file … 

 

Dynamic HTML5 meta tags for WordPress header.php file

WordPress dynamically generates the title of your pages, as well as other meta tags which are then displayed to your users as well as search engines. The number of meta tags is, however, limited. To add additional social meta tags to the default HTML5 page, such as Facebook’s Open Graph so search engines can better understand … 

 

HTML5 barebone index page

A barebone HTML5 index page which contain some common elements and meta tags to start with. HTML5 barebone index page was last modified: November 2nd, 2014 by Thomas