Friday, April 25, 2008

iframes and cloneNode

During my implementation of favs and its various submenu i got to know about the limitation in IE 6 of using DOM functions like cloneNode, insertBefore, appendChild.
Problem:
1. Node is defined / made in a different frame
2. That node is accessed from parent or a different frame
3. The node is accessible and one can change all its properties but when it used as an arguement in one of the DOM functions like cloneNode, insertBefore, appendChild, 'invalid argument' error is thrown.
Solution:
Simple, make a new node and make its outerHTML equal to the node in other frame. You will have to set its position though.
I read that this problem doesn;t appear in case of mozilla and safari. other browsers cannot handle this.

Tuesday, April 22, 2008

Make space for moving divs between other divs

I am glad today because I really found a better way of doing things than what I had found. Isn't the feeling of achievement which gives the best exhilaration?
Problem - You have a list of divs. You have to make these divs movable and when it is moving, it should become transparent and when it is put on some other div in the list, the latter should move to the former's place to make space for it to land.
Solution on net -
  1. Make a list of divs.
  2. Make them transparent as discussed in the last post.
  3. Keep the left, top, width and height of divs as attributes.
  4. As the mouse moves, check if the mouse has entered some other div's dimensions and if so swap it with the position of the div being moved
  5. If the target div is not the last div, then get its next div and move the source div before its next sibling using insert before
  6. If the target div is the last div use appendchild

My solution -

3. Why the dimensions of the div is to be kept is very important. Since the moving div was always found to be above the target div, no mouse events reached the target div. Therefore this round about solution was used. I found a way to keep the source div beneath the target div. In the process I learnt about the z-index. z-index only works when its scope is the same. In other words, z-index only works correctly when it is used to order sister elements. Therefore the z-index of the parentNode can only be compared to the those of its sister elements and not its children. Similarly the z-index of the children cannot be compared with its parents. And yeah, the z-index only when the position attribute is explicitly set to absolute / relative

Anyway, so finally, by adjusting the z-index, I positioned the divs correctly and now the source div was always below the target div and now all the mouse events reached it. Now on mouseover, I can swap the positions. Saved a lot of CPU :)

5. Not much improvement here, just a little more elegant method. If the source div is before the target div, then the target div has to be inserted before the source div. This is done by insertBefore method. if the source div is after target div, then the source div is to be inserted before the target div

All this can be seen in action at fewbs.com. (not immediately, the release is not final. Check in a weeks time)

Monday, April 21, 2008

Auto reload

alpha opacity in IE seems to work only when width and height is given.
It also works with position absolute even when width and height is not given.
I could not find much about its behavious even on MSDN nor in forums.
For now i am done with what I was doing...
and yeah the opacity thingy works in mozilla by giving opacity : x where 0 < x < 1.

Friday, February 22, 2008

iframes and history

Iframes implements history on their own. They are not necessarily realted to the window history. Accessing that history creates a problem when the window and frames belong to different domains. The familiar "Access denied" or "permission denied" pops up on the IE. IE also doesn't allow access to the properties of location object. So parent frame is not allowed to know the location details of the child frame. Now if the parent doesn't know the location details of the child, how can it reload the child frame. Now reloading a child frame by parent frame is no security violation and is allowed in case of Mozilla. I wouldn't let IE take credit for more security because it is plain baseless. When a page is allowed to open a page in its iframe, why isn't it allowed to reload it or make it move back or forward!
Problem: Open a page in iframe, navigate through its links, reload the last page that was visible Possible approaches: in iframe.window.reload causes the whole page to reload, window.history.go(0) too does that. iframe.src="dummy page" --> window.history.go(-1); loads the page from the cache and not the server. iframe.src="javascript" - doesn't work for cross domain pages.
To bypass this problem, I created 3 tier structure: window --> frame1 --> frame 2
frame 1 is local to window and frame 2 loads a different domain. Now the user navigates in the frame 2 using its links, and reaches a page he wants to be reloaded again. Now if there is a button on the window which refreshes the frame 1 (possible since its local to window), the frame 2 refreshes to the last page in it and not the one defined in the src attribute off rame 2.
Quite a feat for me as i could not find this approach even on extensive searching on net.

Monday, February 4, 2008

web dekstop

1. Javascript - frames and pop up windows
  • Javascript doesn't let the two frames communicate when both of them are from different domains
  • The above also applies when pop up windows are opened
  • Javascript lets location.href property of a frame(child/parent) or window (child/parent) to be set but not read if both are from different domains.
2. Javascript has onbeforeunload which can stop reloading of a page with a confirm box. It also lets you add some text to it

3. Javascript provides no way to stop the page from loading at onunload stage
4. target properties can alter the way windows and frames react with their parents. _top, _self,_parent etc.
5. providing the names of the frames enable to be found when accessed by document.frames[0] without which it will fail. -- not tried though, i guess i just read it.
6. divs can be made resizable but not editable by providing disabled preoperty with contentEditable property
7. onresize method is useless!!
8. javascript can be run in the address bar and huge things can be accomplished by it, including the way things look on a static page! try web preview.
9. there is a security property in a frame, when specified all the hrefs and form submits will opena new page.
10. implemented drag and drop for the first time - was an awesome feeling!
Java
1. URL connection is wrapped by HttpURL connection a much richer class.
2. when the page redirects from a url to another, the another url is also available once the connection has been set. This url also has the path relative to the url used to hit the site.
3. Downloaded the html of a page using java... awesome!
4. System.setProperty("http.proxyHost", "10.100.0.8");
System.setProperty("http.proxyPort", "3129");
when trying to connect a server using URLconnection and trying it behind proxies.