Open a new DIV / external content side by side

I'm trying to open up new DIVs side by side something similar to this

https://www.itriagehealth.com/

Click 'Symptoms' then you have an area that opens up, if you click a part on the avatar then another area opens up on the side, and if you click a symptom in that second area then a third area opens up on the side and so on. Most of my content will be loaded from external files, some of the areas that open up will have a form which will submit data to a database.

Thanks
zerogAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Do you have a question? Your post seems a bit openended - what are you looking for?
0
zerogAuthor Commented:
"I'm trying to open up new DIVs side by side something similar to this"

The question is that I need to create something similar to the sample I mention. Any ideas on how to start, sample code etc will be useful.

It's open ended because I need expert guidance. There might be many ways to do this and I'm not too sure how to start.
0
zerogAuthor Commented:
Hope I make sense. My apologies for my confusing explanation.

I need a hyperlink to open a DIV that will load external content and then a link from that DIV to open another DIV to its right and so on.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
This can be solved a number of ways.

In the example given content is retrieved by ajax and the div's are created dynamically using a style of inline-block - the container has an overflow auto.

What exactly are you looking for - just guidance - full working source code (Which you have on the reference site) - confused as to how to answer this.

Have you had a look at the code / css of the site with Firebug (FF) or the Chrome Inspect Element window - that is a good place to start to see what is going on. Once you have done that come back and ask specific questions and we will try to assist you.
0
zerogAuthor Commented:
I tried this. It opens a DIV below my link. How would I

- get it to open the DIV next to it (on its right).
- load external content in the DIV
- if a link is clicked in the newly created DIV to get it to open another DIV next to the existing one

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<link href="" type="text/css" rel="stylesheet">
</head>
<body >
<h1>example</h1>
<p>
<a onclick="document.getElementById('div_name2').style.display='';return false;" href="" style="text-decoration:none;border-bottom:1px dotted blue;">Show text</a><br />
<div id="div_name2" style="display:none;margin:15px 15px 0px 15px;padding:5px;border:1px solid #aaa;">Sample text sample text <a onclick="document.getElementById('div_name2').style.display='none';return false;" href="" style="text-decoration:none;border-bottom:1px dotted blue;">hide</a></div>
<br />
</body>
</html>

Open in new window

0
Julian HansenCommented:
1. Make your div element style display: inline-block
2. Make your container overflow: auto
3. When you add a new block check the width of the container and update the width if necessary
Here is some sample code that demonstrates the concept
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
    $('a.adddiv').click(function(e) {
        e.preventDefault();
        $('#block-container').append($('<div/>').addClass('block').append($('<a/>').html('X').addClass('close-div')));
        setWidth();
    });
    $('#block-container').on('click', 'a.close-div', function(e) {
        e.preventDefault();
        $(this).parent().nextAll().remove();
        $(this).parent().remove();
        setWidth();
    });
});
function setWidth()
{
    var width = $('#block-container div.block').length * ($('.block').width() + 20);
    $('#block-container').width(width);
}
</script>
<style type="text/css">
#block-container {
    overflow: auto;
    font-size: 0;
    background: #ccccff;
    min-width: 100%;
}
.block {
    width: 350px;
    height: 500px;
    background: blue;
    margin-right: 10px;
    display: inline-block;
    position: relative;
    margin: 30px 10px;
}
a.close-div {
    position: absolute;
    top: 0;
    right: 0;
    background: #aaaaff;
    color: #000088;
    font-size: 12px;
    padding: 2px 4px;
}
a.close-div:hover {
    cursor: pointer;
}
</style>
</head>
<body>
    <div id="block-container">
        <div class="block"></div>
    </div>
    <a href="#" class="adddiv">Add Div</a>
</body>
</html>

Open in new window

Working code here
0
zerogAuthor Commented:
Greetings. Thank you so much. The sample code works perfect. I'm just trying to figure how do I load external content in the new DIVs.
0
Julian HansenCommented:
With the .load function

$('#somediv').load('someurl.html');

Open in new window

or
$('#somediv').load('someurl.php');

Open in new window

or
$('#somediv').load('someurl.aspx');

Open in new window

etc
i.e. you can load a straight html page or point the url to a script.

The .load function will perform an AJAX load of the element with the returned html from the url.

If you are stuck - post back and I will post sample code
0
zerogAuthor Commented:
Been trying the .load function , but I'm stuck. Each new DIV created will load a different html/php file. The other thing I've been trying to get right is that in the sample code that you provided , if one closes the first new DIV it closes the others after it also, is there a way I can keep the other DIVs open. Thank you for your patience with me
0
Julian HansenCommented:
Yes there is but I did that on purpose due to the fact that the sample site you pointed to - the div's were hierarchically based.

To make it remove only the one div remove line 15.

Each new DIV created will load a different html/php file.

How will you know what to load for which div - what criteria will you use?
0
zerogAuthor Commented:
The page opens default with one div block (external content loaded) and the hyperlink which adds a new div, then a hyperlink within that new div will open the next div and so on. So a selection in one div will open another div with its external content loaded. Hope this makes sense. The sample code creates the DIV with the class=block (linked to stylesheet). I was trying to get the class to equal different for each new div  so I could link it to the .load but it got messy.
0
zerogAuthor Commented:
Still stuck, any ideas?
0
Julian HansenCommented:
Here is some modified code. The key thing to note here is the .load() function is asynchronous. So you need to wait for it to finish loading the target page before adding the close button and appending the newblock to the block container.
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
// Template for the close button;
var closebutton = $('<a href="#" class="close-div">X</a>');
$(function() {

   // We make the click event handler dynamic so that links
   // in the new block will bind to the event handler

    $('#block-container').on('click', 'a.adddiv', function(e) {
        e.preventDefault();
        // Create our new block and load the content with a completion function
        var newblock = $('<div/>').addClass('block').load($(this).attr('href'), function(){ 

            // We are done loading so now add the close button
            // we clone the button otherwise the button will just move 
            // from one window to the next

            $(this).append(closebutton.clone());

            // Append to the block container

            $('#block-container').append($(this));

            // And adjust the width of the block container if necessary

            setWidth();
        });
    });

    // Close event handler - changed to only remove block closed.
    
    $('#block-container').on('click', 'a.close-div', function(e) {
        e.preventDefault();
        $(this).parent().remove();
        setWidth();
    });
});
// Function to set width of block container
function setWidth()
{
    var width = $('#block-container div.block').length * ($('.block').width() + 20);
    $('#block-container').width(width);
}
</script>
<style type="text/css">
#block-container {
    overflow: auto;
    font-size: 0;
    background: #ccccff;
    min-width: 100%;
}
.block {
    width: 350px;
    height: 500px;
    background: blue;
    margin-right: 10px;
    display: inline-block;
    position: relative;
    margin: 30px 10px;
    color: white;
    font-size:14px;
}
a.adddiv {
    color: yellow;
}
a.close-div {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #aaaaff;
    color: #000088;
    font-size: 12px;
    padding: 2px 4px;
}
a.close-div:hover {
    cursor: pointer;
}
</style>
</head>
<body>
    <div id="block-container">
        <div class="block">
            This is the first div.
            <a href="t492.page2.html" class="adddiv">Page 2</a>
        </div>
    </div>
    
</body>
</html>

Open in new window

t492.page3.html
t492.page2.html
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
zerogAuthor Commented:
Thank you! It works great. Just one question, why does it do this? (see screenshot)

I played around with CSS and added

white-space: nowrap;

But I think I'm doing the wrong thing.screenshot
0
zerogAuthor Commented:
Got it right. Just added overflow:auto; to the CSS for the block. Thank you for all your help and for being patient with all my questions.

.block {
    width: 350px;
    height: 500px;
    overflow:auto;
    background: #fff;
    margin-right: 10px;
    display: inline-block;
    position: relative;
    margin: 30px 10px;
    color: blue;
    font-size:14px;
	
}

Open in new window

0
zerogAuthor Commented:
Excellent solution provided
0
Julian HansenCommented:
You are welcome - and thanks for the points.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.