drop down menu targeting div layer

njerkins · 05-30-2006, 10:41 PM

I'm trying to avoid iframes so that I can skin easily, so I'm looking for a way make a drop down menu open links in a div layer rather than a frame.
This is what I have now:

Code:

<script language="javascript" type="text/javascript">
function jump(form) {
var myindex=form.menu.selectedIndex
if (form.menu.options[myindex].value != "0")
{
window.open(form.menu.options[myindex].value,
target="window");
}
}
//-->
</script>

and then

Code:

<form name="redmenu" style="position:absolute; top:250; left:40; z-index:2;" ACTION=URI>
<select name="menu" onchange="jump(this.form)">
<option value="0">Navigate</option>   
<option value="0" style="background-color:#B82854;"></option>
<option value="http://nattily.org/" style="background-color:#B82854;">Home</option>
<option value="http://nattily.org/blog" style="background-color:#B82854;">Blog</option>
</select>
</form>

with the div id as "window" but that clearly doesn't work. Any ideas?

jskaar · 05-31-2006, 08:24 AM

I don't think that would be so easy. But I have a suggestion that will work.

You could use Ajax-"technology" to load the content into a div. When a item is clicked, then the corresponding url (link) is sent as a xhttp reequest, and then you may put it any where you want. Another advance with this, is that the hole site doesen't need to be reloaded.

Just say so, if you need some code to get started.

njerkins · 05-31-2006, 02:55 PM

That sounds good, but unfortunately I know nothing about that. Do you think you could start me off or at least point me in the right direction?

jskaar · 05-31-2006, 03:17 PM

First some general javascript code:

Code:

<script type="text/javascript">
var myRequest;

function startXMLHttpRequest(url)
{
    if (window.XMLHttpRequest)
    {
        myRequest = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        try { myRequest = new ActiveXObject("Msxml2.XMLHTTP");}
        catch(e) 
        {
        	try {myRequest= new ActiveXObject("Microsoft.XMLHTTP");}
            catch(e) {myRequest=null;}
        }
    }
    else
    {
        myRequest=null;
    }
        
    if (myRequest) 
    {
        myRequest.onreadystatechange = processRequestChange;
        myRequest.open("GET", url, true);
        myRequest.send(null);
    }
    else
    {
        alert("The browser is not capable of this");
    }
}

function processRequestChange()
{
    // if the request is complete and successfull
    if (myRequest.readyState == 4) 
    {
        if ((myRequest.status == 200) || (myRequest.status == 304)) 
        {
            useResponse(myRequest.responseText);
        }
        else
        { 
            alert("Can not access data:\n" + myRequest.statusText);
        }
    }
}

// This is the clue, where you do the work
function useResponse(content)
{
	obj = document.getElementById("div_to_show_content");
	obj.innerHTML = content;
}
</script>

Then you can do something like this:

Code:

<p style="cursor:pointer" onclick="javascript:startXMLHttpRequest('your_link');return false;">
Click here
</p>
<div id="div_to_show_content">This text is replace by the content from the link</div>

This will display the hole content from the url "your_link" into the div with id "div_to_show_content".

I think this should get you started.