Jump to content

Using DIVs as frames - updating main div with jQuery?


andreasb

Recommended Posts

Hello,

 

I don't know if this is the correct (sub)-forum to place this, but it's mainly a question that I think has something to do with jQuery or JS in general.

 

Well, I got a website which has several divs.

One of the divs is a menu div, which is on the very left of the site.

In the middle I got a "main div".

On the right side of the site I got another div.

 

Now, I want the main div to show a page once I click a link in the menu div, kinda like how frames work.

 

Let's say I click a link called "Profile", then the main div should show profile.php inside the div, like a frame would have done with "target=main'".

 

I just wonder, is this possible?

 

I got a huge script, and I don't want to make them all over again, therefor begin able to load pages into DIVs would be very helpful.

 

Thank you.

Link to comment
Share on other sites

yeah its possible. Actually pretty simple with jQuery at hand.

 

<html>
    <head>
        <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $('[name]=item-*').click(function() {
                    $('#main').html(
                        $('#'+$(this).attr('name')).html()
                    );
                });
            });
        </script>
    </head>
    <body>
        <div id="menu">
            <ul>
                <li><a href="#" name="item-1">Item 1</a></li>
                <li><a href="#" name="item-2">Item 2</a></li>
                <li><a href="#" name="item-3">Item 3</a></li>
            </ul>
        </div>
        <div id="main">
            This is default text.
        </div>
        <div id="item-1" style="visibility: hidden;">
            Item 1 content.
        </div>
        <div id="item-2" style="visibility: hidden;">
            Item 2 content.
        </div>
        <div id="item-3" style="visibility: hidden;">
            Item 3 content.
        </div>
    </body>
</html>

 

It would be easy to convert this into loading external content as well instead of content from the inline divs like that.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.