How to add content of file after text in div using jQuery?

StackOverflow https://stackoverflow.com/questions/21207921

Question

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Culminating</title>
    <link href="style.css" rel="stylesheet" type="text/css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="./javascript.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCJnj2nWoM86eU8Bq2G4lSNz3udIkZT4YY&sensor=false"></script>

    <script>
        <!-- Calling the Google Maps API -->
    </script>
</head>

<body>
    <div class="content">
        <div id="googleMap"></div>
        <div id="right_pane_results">hi</div>
        <div id="bottom_pane_options">
            <div id="parameters">
                <h4>Please choose a parameter:</h4>
                <script>
                    $.get('./test.txt', function(data) {
                        $("#parameters").append(data);
                    }, 'text');
                </script>
                <?php //include("test.html") ?>
            </div>
        </div>
    </div>
</body>

style.css

.content {
    border-style: solid;
    border-color: black;
    border-width: 15px;
}

#parameters  {
    background-color: #ffcc00;
    margin: 0px;
}

#bottom_pane_options {
    position: absolute;
    top: 70%;
    bottom: 0;
    right: 20%;
    left: 0;
    background-color: #FAFAFA;
}

text file test.txt:

<select>
    <option value="1">Parameter 1</option>
    <option value="2">Parameter 2</option>
    <option value="3">Parameter 3</option>
</select>

I would like the output to look like:

Please choose a parameter: option menu from test.txt here

Right now, the option menu is appearing under the text. I have tried display: inline; but that broke it. I'm sure this is a quick fix but I am new to jQuery and CSS.

Was it helpful?

Solution

Try floating the h4 element to the left. That will break the container though so use the code at link below to clearifx the container. Forgot to mention that, you have to give the h4 element a specific width because it is a block level emelement and will take up as much width as it need( Even if it means taking up the whole line). Inline-block should have worked on it but the width might be an issue.

http://www.lswebapps.com/code-snippet/css-clearfix/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top