[SOLVED] Javascript and framesets

[maxz_pc]

Hi,

 

I have a main page that has some content at the top and a frame set. There are two frames in the frameset: one of the left(menu:150px) and one on the right(content:auto width)

 

Now I want to create a dynamic autosuggest search tool with AJAX. The problem is that when the autosuggest suggest things, it makes a scrollbar in the left frame because the auto suggest is larger than the frame's width.

 

The thing is that I don't want to have a scroll. I want my auto suggest to be on top of everything. This is where i need help.

 

I would need to create a div element in the root page. This element would need to be positioned at the same place as it would in the frame. So I need horizontal and vertical offsets to add them up.

 

I'm using prototype but the solution doesn't need to have prototype involded.

The harder thing is that it needs to work on IE6, IE7 and FF

 

Thanks

Max

 

[maxz_pc]

If this can help:

Here is the picture:

 

Green is the window

Red is the frames in my frame set

 

What i need is to get the x,y coordinates of where my textbox is in the Green window.

 

[attachment deleted by admin]

[phpQuestioner]

all you really need to do is; set the overflow-y of your auto suggest div to "auto" and give it the same width as your textbox and set the height so it will not go far enough down your page to make the left frame scroll.

[maxz_pc]

My problem is not really vertical scroll but more horizontal scroll, that is the reason why i want to create a div element with absolute coordinates on the root window. So that it would be on top of everything with a z-index higher than anything else on the page.

[phpQuestioner]

take a look at this example and you can see how this is done:

 

http://molendijk.110mb.com/dynamic/

[maxz_pc]

Thank you for the example, but it doesn't show the right things.

 

anyways, i found my solution with window.parent

 

top frame

<div id="autoSuggestions" style="position: absolute; z-index: 100; width:200px;">
<div id="autoSuggest" style="postion: relative; width: 100%;" ></div>
</div>

 

left frame

<input type="text" id="test" name="test" value="test" onkeyup="myFunction(this);">

<script>
	function myFunction(e){
		var name = e.value;
		if(name.length > 2){
			var viewPortOffset = [e.offsetLeft,e.offsetTop];
			var xOffset = viewPortOffset[0] + (e.clientWidth * 0.5) ;
			var yOffset = viewPortOffset[1] + (e.clientHeight);

			xOffset += window.parent.$('frmMenu').viewportOffset()[0];
			yOffset += window.parent.$('frmMenu').viewportOffset()[1];

			window.parent.$('autoSuggestions').style.top = yOffset +'px';
			window.parent.$('autoSuggestions').style.left = xOffset +'px';

			var myhash = new Hash();
			myhash.name = name;

			new Ajax.Request('/search_person_results.php',
			  {
			    method:'post',
			    parameters: myhash,
			    encoding: 'iso-8859-1',
			    onSuccess: function(transport){
			      window.parent.$('autoSuggest').update(transport.responseText);
			    },
			    onFailure: function(){ alert('Something went wrong...') }
			  });
		}
	}
</script>