How do I divide the display in this page such that the text boxes appear on the left and the data appears on the right.

Question

0.00/5 (No votes)

See more:

XML

<!doctype html>
<html lang="en">
<head id="head1" runat="server">
  <meta charset="utf-8">
  <title>Department of Computer Science Christ University:560029</title>
     <script src="jquery-1.11.1.js"></script>
    <script type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="g77.css"/>
 <style>


</style>


</head>
    <body>
        <section>
        <script>
            var counter = 1;
            $(document).ready(function () {

                $("#dd1").mouseenter(function () {
                    $("#z1").fadeIn();
                    $("#z2").fadeIn();
                    $("#z3").fadeIn();

                });

                $("#button1").click(function () {
                    $("#button1").hide();
                    $("#mainContent").hide();
                    $("#dd1").hide();
                    $("#add").hide();
                    $("#f1").hide();
                    print();
                    $("#button1").show();
                    $("#mainContent").show();
                    $("#dd1").show();
                    $("#add").show();
                    $("#f1").show();
                });

                $("#add").click(function () {
                    var elem = $("#dd1").val();
                    var str = " ";
                    var str2 = " ";
                    if (elem == "heading") {
                        str = "<span> Heading </span><input type='text' onkeyup='func1(this.id);' class='' id='t_" + elem + counter + "'></input>";
                        str2 = "<h1 id='h_" + elem + counter + "'class='ct'></h1>";
                    }
                    else if (elem == "paragraph") {

                        str = "<span> Paragraph </span><input type='text' onkeyup='func2(this.id);' class='' id='t_" + elem + counter + "'></input> ";
                        str2 = "<p id='p_" + elem + counter + "' class='c'></p>";
                    }
                    else if (elem == "sub-heading") {
                        str = "<span> Sub-Heading </span><input type='text' onkeyup='func1(this.id);' class='' id='t_" + elem + counter + "'></input>";
                        str2 = "<h3 id='h_" + elem + counter + "'class='subct'></h3>";
                    }

                    $("#mainContent").append(str);
                    $("#printArea").append(str2);
                    ++counter;

                });
            });


            function func1(id) {
                var value = $("#" + id).val();
                var id2 = id.split("_")[1];
                $("#h_" + id2).text(value);
            }
            function func2(id) {
                var value = $("#" + id).val();
                var id2 = id.split("_")[1];
                $("#p_" + id2).text(value);
            }


</script>

</section>
        <section>
        <select id="dd1">
    <option>-----Select-----</option>
    <option id="z1" value="heading">Heading</option>
    <option id="z2" value="sub-heading">Sub-Heading</option>
    <option id="z3" value="paragraph">Paragraph</option>
    <option id="z4" value="pageb">Page Break</option>
</select>
<button id="add" onclick="">Add</button>

<button id="button1">PRINT/SAVE</button>
<p id="mainContent"></p>
<p id="printArea"></p>
            </section>

    </body>
    </html>

Posted 28-Jan-15 7:15am

Floyd Fernandes

Add a Solution

Comments

Sergey Alexandrovich Kryukov 28-Jan-15 13:55pm

Christ the Scientist taught you to focus on CSS rather than Javascript in such cases, but you did not even show your CSS file. You can find many 2-column CSS designs on the Web and see how people solved similar problems.
—SA

ZurdoDev 28-Jan-15 14:11pm

Either use CSS or a table. Where are you stuck?

2 solutions

Solution 2

Use grid system of bootstrap and divide the page in two columns. you will get the exact division of the page

Posted 29-Jan-15 19:06pm

Atish K. Singh

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Nilendra Nath · Accepted Answer · 2015-01-29T00:49:00

Solution 1

here is some solution for your problem, you can modify as per your requirements..

 $("#add").click(function () {
            $("#printArea").css("display","block");
/*
rest code as it is
*/
});

XML

<div id="mainContent" style="float:left; width:10%; border-style:solid; border-radius:5px; padding:10px; margin-top:35px;"></div>
<div id="printArea" style="float: left; border-width: 3px; border-style: solid; border-radius: 5px; margin-left: 5px; margin-top: 35px; display:none;"></div>

let me know anything else you want..

Posted 29-Jan-15 0:49am

Nilendra Nath

Comments

Floyd Fernandes 29-Jan-15 10:38am

Will try this code ASAP and let you know. Thanks

Floyd Fernandes 29-Jan-15 10:49am

Hey Nilendra, the code is very good but there are 2 issues with it. According to my requirement:
1> the screen has to be divided into 2 exact halves. left side completely dedicated to text boxes and right side completely dedicated to data display
2> after adding your code, the print button now prints even the black box border. I don't want it to print the black border- only data.
If you could help me with this i would be very much grateful.

Nilendra Nath 30-Jan-15 5:29am

Hi Floyd,
Ans 1: to divide the screen in exact two halves, change the CSS of both div(update width style) as per your requirements.
Ans 2: Remove the border-style attribute from "printArea" on click of print button.

if not able to do, let me know, I will give code for it.

Floyd Fernandes 4-Feb-15 10:03am

Hey Nilerndra, thanks for your help. The entire code works great now. I have one last problem. I need a delete button beside each dynamically created text box, which when clicked will delete the text box as well as the corresponding data. If you could give me the code for that it would be great help. Thanks in advance.

Nilendra Nath 5-Feb-15 3:06am

Floyd,
here are some changes you need to put on your code of creating dynamic controls, I am giving just 1 example:
/*----------------------------------------------------------------*/
if (elem == "heading") {
str = "<span id='s_" + elem + counter + "'> Heading </span><input type='text' ></input><input type='button' value='Delete' ></input>";
str2 = "

";
}
/*----------------------------------------------------------------*/

Also add 1 more method in js part:
/*----------------------------------------------------------------*/
function deleteControl(id)
{
var value = $("#" + id).val();
var id2 = id.split("_")[1];
//alert(id2);
$("#s_" + id2).css("display", "none");
$("#t_" + id2).css("display", "none");
$("#" + id).css("display", "none");
}
/*----------------------------------------------------------------*/

I hope you can update the CSS as per your choice. If any issue let me know.

Floyd Fernandes 5-Feb-15 9:31am

Ok Nilendra ill try this out and get back to you soon