Category: HTML

Quick Tip

Responsive Image Overlay over Another Image

NG How to, HTML

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 .overlay-container { position: relative; overflow: hidden; } .overlay-top{ height: 33%; position: absolute; top: 0; width: 100%; } .overlay-middle{ height: 33%; position: absolute; top: 33%; width: 100%; } .overlay-bottom{ height: 33%; position: absolute; top: 66%; width: 100%; } .title { text-align: center; margin-left: auto; display: block; margin-right: auto; max-width:100%;} .play { text-align: center; margin-left: auto; display: block; margin-right: auto; max-width:80%; } .img-responsive{ width: 100%; } There are 3 overlay images divided equally in height. Top container is set[…]

View More

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

NG How to, HTML, JavaScript, jQuery, Windows Store App

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 <a href=”javascript:void(0)” id=”somelink” onclick=”callMethod();”>Link</a> Since I was using jQuery in the project, I simply used jQuery to bind click event to the element $(“#somelink”).click(function () { callMethod(); }); 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[…]

View More
Quick Tip

Tip of the day: Blank href in html A link

NG HTML, JavaScript, Quick Tip

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 <a href=”#” onclick=”javascript:callMethod();”>Link</a> 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. <a href=”javascript:void(0)” onclick=”javascrit:callMethod();”>Link</a> Simple and elegant..  

View More