JavaScript: Tips & Tricks

Published On: 28 Mar, 2015 Updated On: 21 Apr, 2017

In this blog, I am going to list down JavaScript tips and tricks that might be of great help for you. The list includes something I found over the internet, some I found by myself while developing web-apps.

iPhone LightBox Background Gap Issue

Have you ever got an issue in iPhone where you’re displaying a lightbox with some background overlay(which wraps entire screen) and when you scroll, a gap is introduced at the bottom? Well, that’s really a weird problem. But, don’t worry. There is a solution.

Actually, on-scroll and on smartphone (landscape/portrait) rotation, smartphones' browser triggers window “resize” event. So, all we need to do is add a listener to this event and, when this listener gets called, fetch the window height and use it to set the height of background overlay. Check out below jQuery code example. Same can be acheived using JavaScript.


// Update the background box height everytime on scroll.
$('body').bind('touchend', function() {
  $(lightboxBackgroundElem).css('height', window.innerHeight);
});

// On viewport change (landscape/portrait), update the height.
$(window).resize(function() {
  $(lightboxBackgroundElem).css('height', window.innerHeight);
});

Internet Explorer 8 “allowTransparency” Issue With Iframe

Imagine that you’ve developed some web application. User is going to use iFrame to host your application on his/her website. Using iFrames is one of good approach in this case since webpage’s CSS and application’s CSS stay in clash-free state.

Now-a-days, people are much concerned about page speed and UX. So, let’s imagine that the user of your application has lots of things to show on his/her webpage. Hence he/she creates iFrame dynamically using below JavaScript code once document is loaded and references to your application.


var iframe = document.createElement('iframe');
iframe.src = '//www.myapps.com/great-app.html';
iframe.allowTransparency = true;

No problem with above code until user looks your application in IE8. In IE8, a white patch is rendered wherever there are additional spaces surrounding the application. Alas! iFrames should’ve been transparent. What did we miss ?

The above code mentions a property: “allowTransparency”. This property has different values for different browsers. IE8 tries to apply allowTransparency="true", but fails to do so. Hence, allowTransparency attribute is not applied. So, how do we acheive a cross-browser solution for this problem ?

Well! A simple solution here is to use “setAttribute” method on iFrame DOM.


var iframe = document.createElement('iframe');
iframe.setAttribute('src', '//www.myapps.com/great-app.html');
iframe.setAttribute('allowTransparency', true);

Once done with it, add below code inside your application’s CSS. That’s it!


body
{
  background: transparent;
}

Like this blog ? Share it on your favourite social network.
Search powered by Google

Didn’t find what you were looking for? Try here.

Template Monster

Where you can search over 26K+ Premium Templates.

Now, get flat 10% discount by using “b3fbdxkv49mosrt59dsh0dx29” promo-code.

Email NewsLetter

By subscribing, you’ll get access to latest blogs and other resources. Also, whenever there is any new content addition here, you’ll receive those updates directly to your inbox.

NOTE: I’m a strict antispammer. So you don’t have to worry about spams.

This website is designed by keeping modern browsers in mind. Never mind about legacy browsers. It’s high time we upgrade ourselves.

The website and its contents are created, edited and maintained solely by me (Santosh K Shetty). No one else shall possess any kind of resources unless explicitely mentioned.

Some of the Creative Credit goes to FreePik.

Copyright © from Jun 2014 to May 2018

Table  Of  Contents
On this page,