Showing posts with label Google Chrome. Show all posts
Showing posts with label Google Chrome. Show all posts

April 30, 2014

I had this strange issue earlier today where I could not log into windows azure portal. The error message was irritating and yet funny and the site kept saying "you cannot login to the windows azure as you have logged out from somewhere else" and then "clock OK to log out". However, when log out button is clicked it takes some time and then eventually it comes back with the message that it cannot sign me out of windows azure portal.

January 11, 2014

Few days back, while I was at work, I found that my computer running slow. I quickly checked the task manager and found that I was running out of memory. That was a bit strange as I have 8GB of memory. Anyways, what I found is there were lot of processes running from Google Chrome that was killing it. Basically, each of the tab is a process and there is no way to add up the full memory usage in Task Manager. So, I did something silly and add up the memory from each of the processes in the calculator. But that's silly!

January 8, 2014

html import–a reality

Few days back I was reading an article on html5rocks.com about html imports and I was delighted even it's experimental at this stage. Html import did not exist and was always an import feature to me for web development. I remember creating asp pages for small sites when html would have easily suffice. I needed to add header / footer and using asp for just that did not make any sense to me. Html had ways for importing javascript and css and I was always wondered about html imports. I also used iframes and frames instead but never really liked the way frames work.

So, how does html import work? Well, it does not work in most browsers. In fact, it only works in Chrome 31+ when "html imports" is turned on. It is important to note that it is a standard mentioned in W3C so the feature might become common in other browsers. So, how do I write the import code snippet. Here's how.

  1. <link rel="import" id="id1" href="page2.html" />

 

As you can see, it's similar to css import except the rel attribute value is now import. So, as a next step, I ran the page in the Chrome browser and it does not do anything. Oh, I need to turn on the html import feature first. To do so, I went to chrome://flags/#enable-html-imports and clicked on enabled and fingers crossed.

image

But no luck, nothing happened. I could see a flicker that the document is loaded while running the browser but it does not appear in the display. After more readings, I figured html import only the import the file. To display the content or a portion of the content from the file, we need to use javascript. Here's the javascript and the full page.

page1.html
  1. <!DOCTYPE html>
  2. <html><!-- xmlns="http://www.w3.org/1999/xhtml">-->
  3. <head>
  4.         <title></title>
  5.     <link rel="import" id="id1" href="page2.html" />
  6. </head>
  7. <body>
  8.       <div id="page1div"></div>
  9.     
  10. <script>
  11.      var content = document.querySelector('link[rel="import"]').import;
  12.      var el = content.querySelector('#page2div'); //id of div whose content will be displayed
  13.      document.getElementById("page1div").appendChild(el.cloneNode(true));
  14.    </script>
  15. </body>
  16. </html>

 

page2.html
  1. <div id="main">main content
  2. <div id="page2div">page 2 content</div>
  3. </div>

 

The javascript uses the .import selector to get the content from the html document. I then select the div from imported html document whose content will be displayed and clone the node. Then, I run the page and that's it. It works now.

Reference: Shahed Kazi at AspNetify.com