Thursday, July 2

Learnings #0008 - Web development

Chrome - Execute JavaScript inside an iFrame
Recently I tried to console a piece of javascript in console but it returned undefined. Later realized that I was working in iFrames and the Javascript was more related to the content frame instead of the top frame. Was surprised to see that chrome has a freature in console that let's you choose which frame you want to execute your javascript command in. Pretty neat!!!

All this while it was seating next to the clear button, but never noticed. Below is the screenshot

It's important that you put the JavaScript after your HTML div container.
I forget it most of the time. Well working on an existing application, where the script is placed right above in head somewhere. In my defense, I am used to working on application where javascript is placed right at bottom just above closing body div. So issues like this never suffice. However, note to self, always think about the issue and its root cause before jumping on to Google for a solution.

document.getElementsByClassName and document.getElementsByTagName returns an array
Can literally see in the console that it returns of type array, but sometimes we just cannot get our head around it. Feel ashamed due to my limited knowledge. jQuery has made me handicap.

document.getElementsByClassName("someClass")[0].innerHTML = "Yes, I will be changed";

same with

document.getElementsByTagName("strong")[0].innerHTML = "Yes I am Bold";

Strange padding error in table
So clicking on a tr should hide and show another tr was the scenario. This was done in long time back and the way the animation was achieved was incrementing the height of the content tr using setTimeOut javascript function. The main td had padding of top, right and left 20px and the bottom padding was 0. However the td inside the main td had bottom padding so the design looked a little even.

When clicking on the title tr, the body tr should collapse and hide. Just like an accordian. And to achieve this, a height was being applied dynamically to the body tr. Since an inline css for height was being applied, somehow, the padding was applied to even the bottom. And now, since offsetHeight of the body tr was being calculated, it would calculate inclusive of the padding bottom. Strange situation and I still have no clue if my analysis are correct and justifiable. However in the interest of time, I removed any CSS applied to the main body td and applied padding to the data that was inside that main td. I know, quite a mouthful but solving this issue was quite a feat considering how dull I had been with CSS for fast so many months. After writing it down here, now I feel I have achieved something.

Be the first one to Comment!!!

Post a Comment