DIV Tags - Help Needed (3 column design)

[anilsingh1605]

I am building admin control panel for a website.

 

The admin cp has 3 columns(div):

1st column/div - left menu items (left column)

2nd column/div - content display area (which is in center)

3rd column/div - right menu items (right column)

 

This is how it works; when a link is clicked from 1st column/div, the page linked will be opened in the 2nd column/div and in the similar way when a link is clicked from 3rd column/div, the page linked will be opened in the 2nd column/div.

I used iframe in 2nd column/div to achieve this i.e, open links in the same page without refreshing the page.

 

The problem I have:

 

When the page opened in 2nd column/div has the height greater than the height mentioned in the iframe, scroll bar appears inside the div.

 

What I want:

 

I want to display the linked page either from 1st column/div or 3rd column/div in 2nd column/div with its full height without the scroll bar appearing inside the div. The browser window (all columns combined) should get the scroll bar instead, using which I shall be able to scroll down. The left and right columns/div should go upwards/downwards when I use the scroll bar displaying the page linked/opened totally in 2nd column/div.

 

****In simple I want a facebook like design which should have menu items on either side of the browser window, clicking the links should open the page linked in center and if the linked page has more data that cannot be displayed in that div, it should expand the center div downwards to display the data (not dynamically, statically).****

 

Please get me this solved or suggest me another way to achieve this.

 

Thanks in advance.

admin.php

styles.css

view.php

[Ch0cu3r]

The problem is the iframe, once you set the height of the iframe it does not adapt the height of the content being loaded into it and so the scroll bars appear.

 

However the use of iframes is no longer the trend. The trend now a days is ajax, this what facebook/google use to load their content dynamically onto the page. With ajax you can load content in the background and then dynamically add it the page seamlessly with the out the page refreshing.

[anilsingh1605]

The problem is the iframe, once you set the height of the iframe it does not adapt the height of the content being loaded into it and so the scroll bars appear.

 

However the use of iframes is no longer the trend. The trend now a days is ajax, this what facebook/google use to load their content dynamically onto the page. With ajax you can load content in the background and then dynamically add it the page seamlessly with the out the page refreshing.

I too thought the same and used a different approach using include function and removing iframe but that hasn't solved the problem but created more problems. Can you modify the above attached files and use ajax as you say to achieve the same. That would be a great help for me.

[Ch0cu3r]

The very basics with JQuery will be adding the following in admin.php at the bottom of the page before the </body>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- Link to the JQuery cdn, hosted by google -->
    <script type="text/javascript">
        // on page load
        $(document).ready(function() {
            // add an onClick event to all links on the page
            $('a').click(function(e) {
                e.preventDefault(); // overrides default behaviour of links

                // get the target page from the href attribute of the link
                var target = $(this).attr('href');

                // now load the target page using ajax
                $.ajax({
                    url: target,
                    success: function(res) {
                        $('div#content').html(res); // add the contents of the target page to the div with the id of content
                    },
                    error: function(res) {
                        alert(target + ' was not found'); // display error
                    }
                });

                return false; // prevent the link from working
            });
        });
    </script>

Any link clicked, will load the contents of the page into the contents div without the page refreshing.

 

JQuery ajax docs

http://api.jquery.com/jQuery.ajax/

 

You can also apply some transition affects, such as making the content fadeIn/fadeOut when links are clicked etc.

Edited April 6, 2014 by Ch0cu3r

[anilsingh1605]

The very basics with JQuery will be adding the following in admin.php at the bottom of the page before the </body>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- Link to the JQuery cdn, hosted by google -->
    <script type="text/javascript">
        // on page load
        $(document).ready(function() {
            // add an onClick event to all links on the page
            $('a').click(function(e) {
                e.preventDefault(); // overrides default behaviour of links

                // get the target page from the href attribute of the link
                var target = $(this).attr('href');

                // now load the target page using ajax
                $.ajax({
                    url: target,
                    success: function(res) {
                        $('div#content').html(res); // add the contents of the target page to the div with the id of content
                    },
                    error: function(res) {
                        alert(target + ' was not found'); // display error
                    }
                });

                return false; // prevent the link from working
            });
        });
    </script>

Any link clicked, will load the contents of the page into the contents div without the page refreshing.

 

JQuery ajax docs

http://api.jquery.com/jQuery.ajax/

 

You can also apply some transition affects, such as making the content fadeIn/fadeOut when links are clicked etc.

Thanks for the code. Will try the code and let you know.

[Ch0cu3r]

OH, I forgot to mention you need to replace the iframe with a div

<div id="content"></div>

[anilsingh1605]

The code worked. But now because of using that code I have two other problems.

 

1) After the page has been loaded in "content" div, and if the loaded page has link and when the link is clicked, the page gets refreshed and the linked page gets loaded. I want to open the link present in the "content" div in the same "content" div without refreshing the page.

 

2) After the page has been loaded in "content" div, and if the loaded page has submit button and when the submit button is clicked, the page gets refreshed and the action page gets loaded. I want to load the action page in the same "content" div that has the submit button without refreshing the page.

 

In both the process, the basic 3 column design is getting effected.

 

Kindly look at the screenshots I attached to grasp the issue. I even attached screens before clicking the link, after clicking the link and before clicking the submit and after clicking the submit.

 

 

Eagerly waiting for your response.

[Ch0cu3r]

I will put hand up here and say I am out of my depth here. My JQuery knowledge is limited at best. 

However what you are doing is totally possible, but Im not the right person to direct you. Maybe someone else here will have a better insight into this.

 

But what I do know is you are creating a Single Page Application. Which there are frameworks specifically designed to help you with this. You may want to check out AngularJS or similar.

[anilsingh1605]

I will put hand up here and say I am out of my depth here. My JQuery knowledge is limited at best. 

However what you are doing is totally possible, but Im not the right person to direct you. Maybe someone else here will have a better insight into this.

 

But what I do know is you are creating a Single Page Application. Which there are frameworks specifically designed to help you with this. You may want to check out AngularJS or similar.

Yep. And it seems none of the users here are interested to answer this. Seems like I have to follow some other route to get this done.