View Demo»
To Do List
- Design the tabs
- Upon clicking on a link, open it in a new tab
- When closing a tab, show the previous opened tab
- Flash the tab 3 times to inform the user about new opened tab
- If too many tabs are open, resize them all
- Use the link text as the tab's title
- Add a frame for testing purpose, so that, whatever address is typed, can be opened in a new tab.
Journal
Saturday, April 8, 2006 - Design Tabs
Time: 2 hours
Right now, I'll just try to do the tab design, since loading a link in a frame is very simple. The tabs will be made out of html <ul> elements and they will be layed out like a horizontal menu using css. There should be a close button, which can be used to close the tab. The tab should have a min. width since the normal width will change based on how many tabs are open.
Sunday, April 9, 2006 - Open Links Into Frame
Now that the tabs are designed and layed out, it's time to put the "frame" into action. For now, I'll just try to load the links into the frame and stop the link from loading into current page. This could easily be done by leaving the <a href="" > empty. But I'll just leave them like a normal links, so that, even if javascript is disabled on client's machine, the link will still work and load on the current page.
Time: 3 hours
ok, I just finished this task. But I have to write this down. All I did was adding a frame and open the links inside the frame. Sounds very simple. In fact, it is, because there was exactly 1 line of javascript code that simply changes the target of the link to the frame. That probably took about 10 min. including testing and stuff. Still wondering why it took 3 hours? Well... say what, as usual IE had to be a stubborn ass and ofcourse test my patience. Firstly, it wouldn't allow any scrollbar to show up for the frame just because the containing <div> didn't have any "width" mentioned in the css. It would only allow the vertical scrollbar, but not the horizontal one. Secondly, it was leaving about 200 pixel of gap on top of the frame. I'm assuming that it's because of the "float" property that was used for the tabs, which are by the way inside another <div>. In both cases, it was working fine in Firefox. Anyways, I fixed the problem by putting the tabs div and frame div inside another div, but I had to sacrifice the border, because it wouldn't show up properly.
sometimes I wonder if Microsoft wanted to challange the programmers by means of IE? otherwise, how could world's "most used!!!" browser have so much bugs. Only a few problems would've been understandable. Well... there's no point in cracking my head over this. I'll be waiting for Windows Vista, where IE is supposed to be better and follow standared even though I doubt it because if they couldn't do it in 6 versions, they probably won't do it in the next either. We'll see...
Monday, April 10, 2006 - Add Mouse Events To Tabs
Today I'll try to create the javascript function for the tabs that will create the tabs and control the expected functionalities. However, I would like to do it in a "Object Oriented" fashion. Since, I'm not that experienced in making object oriented javascript, this might take a while. The idea is that, everytime a link is clicked, a javascript function will redirect the link to the frame and create a new tab that will receive the url of the link as a parameter. The constructor then will make the tab using an <li> element inside the <ul>, which is already layed out properly via css.
Time: about 7 hours
once again, IE have to be different than everyone else. Everything for the tab works just fine except in IE. I even got the tabs to change to their original url. The main problem is that, since I'm creating those tabs, which are <li> elements, dynamically by using dom "createElement", I can't use the "setAttribute" to set the onClick event. Well... "setAttribute" will work in other browsers, but for IE I have to uses "attachEvent" but I just couldn't get it to work yet. Now I'm thinking of doing it in a different way. The solution could be that, instead of creating an element and appending it to the <ul>, I'll simply save the current innerHTML of the <ul> and add the html for the <li> to that innerHTML and then replace the innerHTML of <ul> with the new innerHTML. This way, the problem of registering an event listener will not occure since the event listener is added as part of the HTML code. I hate it when I have to change my coding style just to get it to work on IE. I'll try that out next time.
Tuesday, April 11, 2006 - Different Approach To Adding Events
I've just seen an example on the web for the problem that I mentioned in the previous report. I'll try this out and see if that works on both browser. If it doesn't, then I guess I have to switch to that innerHTML solution instead of using DOM's createElement and appendElement since that has a cross browser problem with setting events using setAttribute. I found the suggestion at joelonsoftware.com
Time: 10 min.
Good news :D . That solution actually worked. So, that means that, for cross browser issue, I can't use setAttribute to set any onclick or any other event. I have to do the following:
myObject.onclick = new Function( "return doSomething(param1, ...) ;") ;
The above did the trick. That works in both Firefox and IE. However, if I use setAttribute, which goes as:
myObject.setAttribute("onclick", "doSomething(param1, ...)") ;
This will work in everything else except for IE. Instead IE uses "attachEvent", which didn't work for me. Moreover, in my research, you can't pass any parameter when using "attachEvent". That's it for now...
Friday, April 14, 2003 - Change Code To Fit in IE
Previously, I was using javascript's createElement to add new Tab. However, I need to change that and use innerHTML method, because IE won't display the tabs properly. It will show the close button of the tabs on a different line, even though in CSS, it is defined to be shown on the side. This means that my previous 7.30 hours of work is worthless. It was a good lesson by the way.
Time: 30 min.
For the first time in this project, something was finished without much of a trouble. The "operation - cross browser solution" was successful and didn't take much time. Next, I'll have to work on the close button in order to close the tab. Well..., I'll leave that for later. I've got exams to study for.
Tuesday, April 18, 2006 - Save the tab content before switching to a different tab.
The way tab switching works right now, is that, it simply reloads the first url again. But if the user clicks on another link inside the frame, then that page should be shown when the user returns back to this tab. So, I'll need to save the url of the current tab, before switching to a different one
Time: 1 hour 30 min.
Simply, what I'm trying to do cannot be done. It appears that, I can't get the url of the frame or the innerHTML of the frame, that is pointing to external domain. So, I'm just gonna leave it as is.
Wednesday, April 19, 2006 - Hide and Seek
As it was mentioned in the previous post, javascript won't allow me to grab the url or the innerHTML of the frame that is refering to an external domain. And because of that, in my project, whenever, I switch to a different tab, it reloads the very first url again on the frame, which that frame started with, since that url was already saved from the link. Anyways, if I can't do that, I'll just have to play hide and seek. This is how it'll work... Every time a new tab opens, it'll create a new frame and put it on top of the other frames. So, because each tab has its own frame, I don't need to save the url or the innerHTML. I'll just have to make sure that the appropriate frame is visible.
Time: 4 hours
It took longer than I expected. First of all, I was making a lot of stupid mistakes. Secondly, I have two problems that I couldn't fix yet. The first problem is that, I can't stop the links from loading. When the links are clicked, I removed the value of href, but the link will load on the current page anyways. So, just to solve this problem temporarily, I made an iframe, that is not visible and i'm loading the links into that iframe and using it's url and title creating a new tab object that creates a new iframe and loads the saved url into that one.
2nd problem is that, everytime a new tab object is created, all the previous iframe reloads to it's original url that it started with. I have no idea why it's doing it. But changing the tab works though. I have to fix these 2 problems, but I don't know how.
Thursday, April 20, 2006 - Fix url redirection
Last time when I was working on this project, I encountered two problem trying to solve another issue by Hide and Seek trick. One of them were that I had to use another iframe that is invisible, and open the links in that. This was slowing down the whole tab browsing thing, since the page had to load two pages at the same time. One in that invisible iframe and another in the actual tab content. I'll try to solve this one so that I don't have to use that extra iframe.
Time: 45 min.
I tried a lot of different ways, but nothing worked except one trick. I tried to change the url of the link, changing the target to some random jumbled words, but nothing worked. What actually worked was that, I changed the url to "#" and then I restored the url back to whatever it was. But if i do it right away, then it won't work. So, I had to use a timer, restores the url after a few milliseconds. So, now it works. One down, one more to go...
Saturday, April 22, 2006 - Make it OOP
At the beginning of this project I decided to use OOP paradigm. However, as I was moving along, I realized that I was slowly moving away from that goal. Since most of it works now, I'll try to redesign the whole thing making it a proper OOP as much as possible. This will probably take a long time. Well... here it goes...
Time: about 5 hours
Wasted a lot of time, but didn't accomplish much. I don't know how could I make it proper OOP, becuase the tabs are stored in an array and the main problem of making it proper OOP was adding the tab... I can't explain it... too hard... But I did make some more methods to access the variables such as getTabTitle, setTabTitle and so on. Those are working fine. While I was working on these, i found out that using the onload event on the frame tag, I can determine when the frame has finished loading. That's why I was trying make my tabs look more realistic. I wanted that tab's title to be "Loading..." and when the tabs are loaded, it'll simply change the tab title to the proper title. Well, the function, that is supposed to change the tab's title, which is setTabTitle works just fine, but I'm having trouble calling that function. Basically, when I'm creating those frames using innerHTML, I have to put the onload event in there like "<frame onload="frameLoaded(tabId)"... and then the frameLoaded will call the appropriate object's setTabTitle. But for some wired reason, when I'm adding that in there, it doesn't work simply because then innerHTML gets messed up. When I checked the dom for the innerHTML that was actually received, it looks totally wrong. I just can't figure out why it's doing this. Well... gotta go to work.
Monday, April 23, 2006 - Fix Hide and Seek
The 2nd problem with the "Hide And Seek", which was done on April 19th, was that after loading the websites in the frame, the frame would reload after I add another frame. So, if I'm on a particualr page on another tab, that tab's content will go back to the page that it started with. This way, there's no way to stay on the current page. I will see if this works or not. I will take out the src attribute from the frame. and once the frame is created, I will use the location.href to refer it to the page.
Time: 45 min.
Couldn't solve the problem that I wanted to, but I solved another problem that I encountered last time, which is changing the tab title from "Loading..." to appropriate title after the website is finished loading. To me it looks like exactly the same thing that I tried before, but it didn't work. May be I did something wrong that is really hard to notice.
Anyways, the actual problem with "Hide and Seek" still remains. each frame reloads after a new tab or frame is added. I don't think, I'll be able to solve this one on my own, casue first of all, the problem doesn't make sense at all. It's acting like a ghost or something. Secondly, I couldn't find anyone else having the similar problem on the web. There's only two more major part remains for this project. Those are: Close Tab and Resize tabs when there's more tab added.
Friday, July 21, 2006 - Close The Tab
It's been a long time I didn't touch this project. I was very busy lately and also, worked on some other projects. Anyways... I'll try to implement the closing function of the tabs, which was left untouched. As the title suggests, this function will close the associated tab when clicked on the close button.
Time: 15 min.
WOW !!!, I thought this would take a while, but appearantly, it took a lot less time than I expected. What I did was, added an onclick event to the close button, and the function for that simply used DOM node to remove itself. Well... now the most functionalities for this project is done. I don't think anything else is left for this project except for making the tabs a little nicer and showing some visual effects when the user hover on the tab. That's it for now... Oh... I just realized that when deleting the currently viewing tab, the previously visited tab needs to be shown. I will work on that later, but I gotta go to work now.
