Page Refresh in JavaScript

Refreshing a page from JavaScript is not used much but still it comes handy sometimes (like when you want to override all changes that your user has done in the page). I used to use it a few years ago when I didn’t knew anything about AJAX but now AJAX does everything. Still I thought about writing this down. Maybe it might help you (or even me in the decades to come, if ever I forget).

It is just a single line that does the job. Just type:
location.href=location.href;

You assign the window’s location to itself which forces the browser to reload the page since it observes any changes made to the URL. In a function you might implement it like:

function doSomething() {
  // do something here which would eventually
  // require a full-page refresh
  location.href=location.href;
}

Done. But note one thing, everything you write after that refreshing line won’t be executed since the control will pass to the browser to reload the page. In other words, it is like a return statement of a function.

Circular elements in CSS

Note that this technique works only on square elements. So for example you have a square selfie of yourself, say of 500px X 500px and you want to give it dashing circular look rather than that dull square photo. Here’s a quick tip for making it a perfect circle.

Continue reading

Resetting everything in CSS

If you are an experienced CSS styler like me, you would have sometimes notice how different web browsers apply their own styles to elements which sometimes look unappealing.

Continue reading

Developing mobile responsive sites

The use of mobiles (or smartphones) is increasing day-by-day and almost everyone today has a mobile (or a smartphone). So developing mobile responsive websites is a must.

Continue reading

JavaScript: Charms of localStorage and sessionStorage

Main Page

I recently developed a HTML5 app which was basically a totally offline sticky notes app. It could save all your sticky notes and load them even if you closed your browser and came back. It is achieved using the JavaScript local storage API.

Continue reading

Toggling visibility via CSS

Toggling elements basically means hiding them or displaying them for specific purposes. This is mostly achieved by using JavaScript or jQuery. But there is another way to do it, and that’s through CSS.

Continue reading

Introduction to Custom Elements in HTML5

Custom elements are a new way to package things for users. Once you make a custom element you can use it anywhere you want and as many times as you wish. Making a custom element is pretty simple.

Continue reading

Aside

Earlier, I had posted about how to create shadow roots in HTML5. But after trying it out myself a little bit, I have found that it wasn’t working in Chrome 35. Most probably Google hasn’t supported in it yet. It works though in Chrome Canary. Here’s a simple tip to make it work:

Just change the createShadowRoot() method to webkitCreateShadowRoot().

createShadowRoot() not working in Chrome

Introduction to Shadow DOM

Since the launch of HTML5, many and many things are being added to make it more useful and efficient. One such thing is the shadow DOM. Most of you must be knowing what DOM is. So you must be thinking what shadow DOM actually is.

Continue reading