Quick Tip

Responsive Image Overlay over Another Image

I was working on a gaming site which would have two modes to play and a title for each game. I decided to display two options on the game logo itself and since the entire website was responsive, I needed to handle some responsive stuff which I wanted to share here. Bootstrap 4 was used for overall responsive behavior in the site and the additional CSS required to handle individual game title is as following

There are 3 overlay images divided equally in height. Top container is set to relative and overlay images sections are set to absolute taking 1/3 height each. See below for the working example Click here to check this on your system. Try changing the browser window size to see how it works. The complete code for this is as following

You can download example code here.

Windows 10 App :Host Defined Policy: Inline Script. Resource will be blocked.

I recently ported one of my java script projects to Windows store app and got the error as following CSP14321: Resource violated directive ‘script-src ms-appx: ‘unsafe-eval’ blob:’ in Host Defined Policy: inline script, in ms-appx://13bdc914-5111-4c95-a5e6-82029c5105ec/index.html at line 21 column 12. Resource will be blocked. If you have something like the following, it won’t work

Since I was using jQuery in the project, I simply used jQuery to bind click event to the element

and Voila, everything works but I had many pages which had this reference and I had to make this change to all pages. After some research I found that there is an alternate way which is much faster to change. By default ms-appx:/// protocol is used in store apps to fetch the content. For web apps specify a specific protocal ms-appx-web which is then used for the app. This can be done by changing start page from index.html to ms-appx-web:///index.html[…]

Quick Tip

Tip of the day: Blank href in html A link

When you are using <a> link and want to bind it with onclick event in stead of href location, it can be set to # as following

As you know setting href to “#some_id” is an approach used to link content inside the page so if you are using above approach, it will make the page jump to top which is not an elegant solution. There is an alternate way which is much better as it does not make page jump.

Simple and elegant..