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.

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.

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.