Add a Div dynamically to another div where ever I want

Question

0.00/5 (No votes)

See more:

Hi all,

I have small problem in HTML that I have one main div in that some div's are displayed based on user select some link like Display All Items, All Quotes, All Events etc...

and the point is For GetAllQuotes the Quote has a list of Items and a List of Events.

I will get the list value from my DB. Its fine that point.Now I have created a div with labels and textboxes for the Item and Event Div's

for Item(Name,Price,Barcodenumber,Depreciation etc) and for Events like (EventName, Start Date, End Date etc...)

Now I want that div's to appear whenever and where ever I want to display say for suppose If click on GetAllEvents then only EventDiv should display and when I click on GetAllQuotes link AllItems and AllEventsDiv should appear inside the QuoteDiv.

Hope every one has got understood what my problem is?
I want to display a div whereever I want in my main div?

Can this is possible using either CSS or Javascript?

Please do help me.

Thanks in Advance
Ganesh

Posted 26-Sep-12 20:45pm

Ganesh KP

Add a Solution

3 solutions

Solution 1

I 60-70% got your problem and i am having little good knowledge in this languages. So can you please help me by sending your sample code and error?? this will help me to find your exact problem and then i will give you better solution. If you are not comfortable to revel your code at public site, then you can mail me on support@techicom.org
Thank you.

Posted 26-Sep-12 22:33pm

Kumash

v2

Comments

Ganesh KP 28-Sep-12 1:35am

Thanks Kumash
Here is my code

<div id="ItemsDiv" align="left" class="invoptDiv">

<label for="Caption" style=" font-family:Verdana ; font-size:larger; font-weight:bold; font-variant:small-caps; color:#5190cf;">Inventory Item</label>
<label for="Name" class="showLBL">Name :</label><br />
<div class="showTxtDiv"><input type="text" id="txtItemname" class="txtboxCSS"/></div>

<label for="Make" class="showLBL">Make :</label><br />
<div class="showTxtDiv"><input type="text" id="txtMake" class="txtboxCSS"/></div>

<label for="Model" class="showLBL">Model :</label><br />
<div class="showTxtDiv"><input type="text" id="txtModel" class="txtboxCSS"/></div>

</div>

and it is my EventDiv.

<div id="EventDiv" align="left" class="invoptDiv" style="display:block;">

<label for="Caption" style=" font-family:Verdana ; font-size:larger; font-weight:bold; font-variant:small-caps; color:#5190cf;">Event Details</label>

<label for="Make" class="showLBL">Name :</label><br />
<div class="showTxtDiv"><input type="text" id="txtName" class="txtboxCSS"/></div>

<label for="Name" class="showLBL">Event Start Date :</label><br />
<div class="showTxtDiv"><input type="text" id="txtStartDate" class="txtboxCSS"/></div>

<label for="Name" class="showLBL">Event End Date :</label><br />
<div class="showTxtDiv"><input type="text" id="txtEndDate" class="txtboxCSS"/></div>

<label for="Model" class="showLBL">Location :</label><br />
<div class="showTxtDiv" style="height:auto;">
<textarea id="txtLocation" class="txtboxCSS" rows="3" cols="17"></textarea></div>

<label for="Model" class="showLBL">Description :</label><br />
<div class="showTxtDiv" style="height:auto;">
<textarea id="txtEventDescription" class="txtboxCSS" rows="3" cols="17"></textarea></div>
<br />

<%--Event Despatch Combo Box--%>
<label for="EventDespatches" class="showLBL">Event Despatches :</label><br />
<div class="showTxtDiv">
<select id="cmbEventDespatch" class="txtboxCSS" önchange="javascript:GetEventDespatch();">
<option selected="selected" value="0">Select</option>
<option value="1">Event DespatchId 1</option>
<option value="2">Event DespatchId 2</option>
<option value="3">Event DespatchId 3</option>
</select></div>
<%--Event Despatches Combo Box--%>
<br />
<%--Despatch Container Combo Box--%>
<label for="DespatchContaoiners" class="showLBL">Despatch Containers:</label><br />
<div class="showTxtDiv">
<select id="cmbDespatchContainers" class="txtboxCSS">

</select></div>
<%--Despatch Container Combo Box--%>
<br />

<%--Container Items Combo Box--%>
<label for="ContainerItems" class="showLBL">Container Items:</label><br />
<div class="showTxtDiv">
<select id="cmbContItems" class="txtboxCSS">

</select></div>
<%--Container Items Combo Box--%>
<br />

<%--Single Items Combo Box--%>
<label for="SingleItems" class="showLBL">Single Items:</label><br />
<div class="showTxtDiv">
<select id="cmbSingleItems" class="txtboxCSS">

</select></div>
<%--Single Items Combo Box--%>
<br />

So I think you have got my problem I want to display the Items DIv when I click Items link and also when I click Events Div I want that div to be under the events div. i.e where ever I want I can be placed. and I donot got any error I donot know how to add using javascript. Hope you have got my complete problem.

<div class="showTxtDiv" align="cente

Kumash 29-Sep-12 4:02am

i will be back in few hours..... with solution!

Solution 2

try this example:

http://jsfiddle.net/BdaMb/[^]

is it what you need?

it's done using jquery

Posted 26-Sep-12 22:49pm

nrgjack

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)

Ganesh KP · Accepted Answer · 2012-09-30T19:58:00

I have used Jquery.after() and .before() functions and place that div id

$("#EmpDiv").before($("#CustDiv").toggle('slow'));

and

$("#QuoteDiv").after($("#ItemsDiv").show('slow'));

using this two we can show our div where evr we want just before or after and inner code in between paenthesis to show /hide div's

Thanks
Ganesh