Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    drop down menu targeting div layer

    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?

  • #2
    New Coder
    Join Date
    Jan 2006
    Location
    Oslo, Norway
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    DrÝmmejenta: Kristen jente som progger Python!

  • #3
    New to the CF scene
    Join Date
    May 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    New Coder
    Join Date
    Jan 2006
    Location
    Oslo, Norway
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    DrÝmmejenta: Kristen jente som progger Python!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •