Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript CSS HTML
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
Rate this: bad
good
Please Sign up or sign in to vote.

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.
  Permalink  
v2
Comments
Ganeshcse at 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 at 29-Sep-12 4:02am
   
i will be back in few hours..... with solution!
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

try this example:
 
http://jsfiddle.net/BdaMb/[^]
 
is it what you need?
 
it's done using jquery
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

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
  Permalink  

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

  Print Answers RSS
0 OriginalGriff 410
1 Gihan Liyanage 338
2 ChauhanAjay 180
3 Vinay Mistry 160
4 Sergey Alexandrovich Kryukov 138
0 Sergey Alexandrovich Kryukov 9,011
1 OriginalGriff 7,941
2 CPallini 2,603
3 Richard MacCutchan 2,121
4 Abhinav S 1,928


Advertise | Privacy | Mobile
Web02 | 2.8.140827.1 | Last Updated 1 Oct 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100