Can't add found item for search bar - html

Actually, I have this:
I want to make a search bar like that:
Specially add all founded things below the search bar.
I'm using angular material and color theme such as explained in this question.
After compiling, then edit, this is the code of the second picture (with green div) :
<div style="display: contents;">
<div style="display: contents;">
<mat-form-field appearance="fill" class="mat-form-field ng-tns-c111-0 mat-primary mat-form-field-type-mat-input mat-form-field-appearance-fill mat-form-field-can-float ng-star-inserted" style="width: 33%; min-width: 50px; padding: 0;max-width: 500px;bottom: 0;" ng-reflect-appearance="fill">
<div class="mat-form-field-wrapper ng-tns-c111-0" style="bottom: 0;">
<div class="mat-form-field-flex ng-tns-c111-0">
<div class="mat-form-field-infix ng-tns-c111-0">
<input matinput="" type="text" class="mat-input-element mat-form-field-autofill-control ng-tns-c111-0 cdk-text-field-autofill-monitored" style="width: 33%; min-width: 50px; max-width: 500px;" ng-reflect-type="text" ng-reflect-placeholder="Search" placeholder="Search" id="mat-input-0" data-placeholder="Search" aria-invalid="false" aria-required="false">
<span class="mat-form-field-label-wrapper ng-tns-c111-0">
</span>
</div>
</div>
<div class="mat-form-field-underline ng-tns-c111-0 ng-star-inserted" style="padding: 0;margin: 0;visibility: hidden;"><span class="mat-form-field-ripple ng-tns-c111-0"></span></div>
<div class="mat-form-field-subscript-wrapper ng-tns-c111-0" ng-reflect-ng-switch="hint">
<div class="mat-form-field-hint-wrapper ng-tns-c111-0 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);">
<div class="mat-form-field-hint-spacer ng-tns-c111-0"></div>
</div>
</div>
</div>
<div style="background-color: green;">text</div>
</mat-form-field>
</div>
</div>
The HTML part that is compiled is this:
<div style="display: contents;">
<div style="display: contents;">
<mat-form-field appearance="fill" style="width: 33%; min-width: 50px; max-width: 500px;">
<input matInput type="text" placeholder="Search" style="width: 33%; min-width: 50px; max-width: 500px;">
</mat-form-field>
</div>
</div>
I don't know how to add the "test" div with my actual HTML code. I tried to add a div below the form field, or in the form field, like that:
<div style="display: contents;">
<div style="display: contents;">
<mat-form-field appearance="fill" style="width: 33%; min-width: 50px; max-width: 500px;">
<input matInput type="text" placeholder="Search" style="width: 33%; min-width: 50px; max-width: 500px;">
</mat-form-field>
</div>
<div id="search-field"></div>
</div>
Then, in typescript use:
let div = document.getElementById("search-field");
let next = document.createElement("div");
next.innerHTML = "text";
next.classList.add("search-result");
div.appendChild(next);
But the div is added on the right of search bar (instead of below) :
Also, with different value than display: contents, I get things like that:
How can I make a good search bar?
Here is a stackblitz that is not very well ...

It could not work by adding div into the angular material components. This is how I fix it :
Create own component for the result. For this answer, it will be named <app-search-result>.
Below the head bar, add a new div:
<div style="position: fixed; z-index: 100;" id="search-result">
<app-search-result *ngFor="let searchedItem of allSearchedItem" [item]="searchedItem"> </app-search-result>
</div>
The position: fixed allow it to move everywhere without moving other div. The x-index is only to make it showed hover other divs.
Move the search result div :
#HostListener('window:resize')
onResize() {
this.moveSearchResult();
}
moveSearchResult() {
let searchResult = document.getElementById("search-result");
if(searchResult == null)
return;
let fieldBox = document.getElementById("search-field").getBoundingClientRect();
searchResult.style.marginLeft = fieldBox.x + "px";
}
The search-field is the id of the mat-form-field.
Just after adding content to the allSearchedItem array (that will contains all result), call moveSearchResult() method.
Now, this is what I have :
Bonus: I personnally add the same width/max-width as the input to make it as same size. Also, be careful with class that are declared into a specific component.

Related

Incorrect auto size column template on CSS Grid when jsf 2.1 generates an inputNumber-button xhtml

I have create a jsf 2.1 page with the following content:
<h:panelGroup layout="block" id="grupodetalleCodprovincia"
style="display: grid; grid-template-columns: auto auto 1fr;">
<p:inputNumber value="#{cc.attrs.sptiti28Controller.mensajeDto.cabecera.codprovincia}"
style="width: 4ch;" id="detalleCodprovincia" styleClass="campoNumero"
minValue="0" maxValue="99" decimalPlaces="0"
readonly="#cc.attrs.sptiti28Controller.getSoloLectura('codprovincia')}" />
<p:commandButton
action="#{cc.attrs.sptiti28Controller.buscardetalleCodprovinciaClick()}"
title="#{mensajes['SPTITI28.buscarCodprovincia']}"
update="detalleCodprovincia" icon="pi pi-search" />
<p:inputText value="#{cc.attrs.sptiti28Controller.mensajeDto.cabecera.provincia}"
id="detalleProvincia" styleClass="campoTexto" style="width: 52ch;"
converter="trimConverter" maxlength="50" readonly="true" />
</h:panelGroup>
that generates roughly the following html on browser (simplified for understanding the problem)
<div style="display: grid; grid-template-columns: auto auto 1fr;">
<span style="display: block; width: 4ch;">
<input type="text" style="text-align: right; width: 100%;" value="20">
<input type="hidden" autocomplete="off">
</span>
<button style="width: 20px;"/>
<input type="text" style="text-align: right; width: 100%; margin-left: 4px; width: 52ch;"/>
</span>
</div>
The html produces a mistake, at least on chrome version 106.0.5249.103, and position the button overlapping the first input.
Execution on chrome
This behaviour doesn't show if the input changes to inputText instead of an inputNumber.
Anyone knows if there is a hack to allow the correct calculation of the column width? Anyone can explain me if there is any problem on my definition?
Best regards,

How to add indexing marks and values to input type range

Hi I'm trying to add a label to the range slider I had tried using options but it is not working.
How can I make range value 100% it is showing an overall 4% because of Max="4" i want to increase 25% every slide and make it 100% in 4 steps
Can anyone suggest to me how do I add a label to the range slide.
var slider = document.querySelector('#slider');
function range_change_event() {
var percent = slider.value;
lbl.textContent = percent + '%';
}
slider.addEventListener('input', range_change_event);
<input id="slider" type="range" min="1" max="4" step="0" list="volsettings" />
<label id="lbl" id="value" for="slider">0%</label>
<datalist id="volsettings">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</datalist>
</div>
Trying to achieve desire output
¿something like this?
<div style="width: 300px">
<input style="width: 100%;" id="slider" type="range" min="0" max="100" step="25" />
<div style="width: 100%; display: inline-block; padding-left: 8px;">
<div style="display: inline-block; width:24%; float:left;">|</div>
<div style="display: inline-block; width:24%; float:left;">|</div>
<div style="display: inline-block; width:24%; float:left;">|</div>
<div style="display: inline-block; width:24%; float:left;">|</div>
<div style="display: inline-block; float: left;">|</div>
</div>
<div style="width: 100%; display: inline-block; padding-left: 5px;">
<div style="display: inline-block; width:24%; float:left;">0</div>
<div style="display: inline-block; width:24%; float:left;">1</div>
<div style="display: inline-block; width:24%; float:left;">2</div>
<div style="display: inline-block; width:24%; float:left;">3</div>
<div style="display: inline-block; float: left;">4</div>
</div>
</div>
<label id="lbl" id="value" for="slider" list="volsettings"></label>
<br />
<label id="lbl2" id="value" for="slider" list="volsettings"></label>
<script>
var slider = document.querySelector('#slider');
range_change_event();
function range_change_event() {
var percent = slider.value;
lbl2.textContent = (percent / 25);
lbl.textContent = percent + '%';
}
slider.addEventListener('input', range_change_event);
</script>

Position: sticky; not working no matter what

Trying to get a class to remain sticky and constantly be in view when the user scrolls down the page, but doesn't seem to work no matter what.
I tired:
.entry-summary{
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;}
But this does nothing.
The full code can be seen below and is part of this webpage https://aqwaa.net/product/constriction/:
<div class="qode-single-product-summary">
<div class="summary entry-summary">
<div class="clearfix">
<h1 class="product_title entry-title">Constriction</h1><p class="price"><span class="woocs_price_code" data-product-id="459"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">€</span>173.39</span></span></p>
<div class="woocommerce-product-details__short-description">
<p><strong>Mental Health Description: </strong>So often a symptom of anxiety is the feeling of a tightness or tension in the rib cage area. Anxiety has the ability to kick start your bodies fight or flight response, which can increase your stress which often leads to your bodies muscles to contract and tighten, hence, the ribcage tightness symptom. This piece is designed to bring awareness to how it feels inside for someone who is suffering with mental health problems.</p>
</div>
<form class="cart" action="https://aqwaa.net/product/constriction/" method="post" enctype="multipart/form-data">
<div class="quantity buttons_added">
<input type="button" value="-" class="minus">
<input type="text" id="quantity_5cba756e35068" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby="Constriction quantity">
<input type="button" value="+" class="plus">
</div>
<button type="submit" name="add-to-cart" value="459" class="single_add_to_cart_button button alt single_add_to_cart_button qbutton button alt">Add to cart</button>
</form>
<div class="product_meta">
<span class="sku_wrapper">SKU: <span class="sku">AQ1007</span></span>
<span class="posted_in">Category: AQWAA</span>
<span class="tagged_as">Tag: Necklace</span>
</div>
<div class="q_accordion_holder toggle boxed woocommerce-accordion accordion ui-accordion ui-accordion-icons ui-widget ui-helper-reset" style="visibility: visible;">
<h6 class="title-holder clearfix description_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
<span class="tab-title">Description</span>
</h6>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="accordion_content_inner">
<p><strong>Material Description:</strong> Produced in Dubai, UAE, the “Constriction” necklace is is .925 Sterling Silver finished in 18k Gold.</p>
<p><strong>Size:</strong> The pendant is 26.5 mm width – 27.3 mm height on a chain of X cm length.</p>
<style>.woocommerce-product-gallery__image{width: 100% !important;}</style>
</div>
</div>
<h6 class="title-holder clearfix additional_information_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
<span class="tab-title">Additional Information</span>
</h6>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="accordion_content_inner">
<table class="woocommerce-product-attributes shop_attributes">
<tbody><tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--dimensions">
<th class="woocommerce-product-attributes-item__label">Dimensions</th>
<td class="woocommerce-product-attributes-item__value">26.5 × 27.3 mm</td>
</tr>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_gold">
<th class="woocommerce-product-attributes-item__label">Gold</th>
<td class="woocommerce-product-attributes-item__value"><p>18k Gold</p>
</td>
</tr>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_silver">
<th class="woocommerce-product-attributes-item__label">Silver</th>
<td class="woocommerce-product-attributes-item__value"><p>.925 Sterling Silver</p>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div><!-- .clearfix -->
</div><!-- .summary -->
</div>
I expect the class .summary.entry-summary to remain visible as the user scrolls down the page, this does not happen.
Based on your code snippet, it looks as though the .entry-summary class belongs to one div, which is a single child element in a container.
The position:sticky can only allow the child to 'float' over sibling elements within the same container.
I copied your code into codepen, and added another blank <div> in your <div class="qode-single-product-summary"> to take up some vertical space and provide a sibling element, and it appears to be working just fine.
(Look for my comments "I added this" towards the bottom of your code)
Also if you run the snippet I provided, you should see the sticky property working until approximately half way down when the dummy div I added ends...
.entry-summary {
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
}
/* i added this */
#spacefill {
height: 10000px;
}
<div class="qode-single-product-summary">
<div class="summary entry-summary">
<div class="clearfix">
<h1 class="product_title entry-title">Constriction</h1>
<p class="price"><span class="woocs_price_code" data-product-id="459"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">€</span>173.39</span>
</span>
</p>
<div class="woocommerce-product-details__short-description">
<p><strong>Mental Health Description: </strong>So often a symptom of anxiety is the feeling of a tightness or tension in the rib cage area. Anxiety has the ability to kick start your bodies fight or flight response, which can increase your stress
which often leads to your bodies muscles to contract and tighten, hence, the ribcage tightness symptom. This piece is designed to bring awareness to how it feels inside for someone who is suffering with mental health problems.</p>
</div>
<form class="cart" action="https://aqwaa.net/product/constriction/" method="post" enctype="multipart/form-data">
<div class="quantity buttons_added">
<input type="button" value="-" class="minus">
<input type="text" id="quantity_5cba756e35068" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby="Constriction quantity">
<input type="button" value="+" class="plus">
</div>
<button type="submit" name="add-to-cart" value="459" class="single_add_to_cart_button button alt single_add_to_cart_button qbutton button alt">Add to cart</button>
</form>
<div class="product_meta">
<span class="sku_wrapper">SKU: <span class="sku">AQ1007</span></span>
<span class="posted_in">Category: AQWAA</span>
<span class="tagged_as">Tag: Necklace</span>
</div>
<div class="q_accordion_holder toggle boxed woocommerce-accordion accordion ui-accordion ui-accordion-icons ui-widget ui-helper-reset" style="visibility: visible;">
<h6 class="title-holder clearfix description_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
<span class="tab-title">Description</span>
</h6>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="accordion_content_inner">
<p><strong>Material Description:</strong> Produced in Dubai, UAE, the “Constriction” necklace is is .925 Sterling Silver finished in 18k Gold.</p>
<p><strong>Size:</strong> The pendant is 26.5 mm width – 27.3 mm height on a chain of X cm length.</p>
<style>
.woocommerce-product-gallery__image {
width: 100% !important;
}
</style>
</div>
</div>
<h6 class="title-holder clearfix additional_information_tab ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom">
<span class="tab-title">Additional Information</span>
</h6>
<div class="accordion_content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: none;">
<div class="accordion_content_inner">
<table class="woocommerce-product-attributes shop_attributes">
<tbody>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--dimensions">
<th class="woocommerce-product-attributes-item__label">Dimensions</th>
<td class="woocommerce-product-attributes-item__value">26.5 × 27.3 mm</td>
</tr>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_gold">
<th class="woocommerce-product-attributes-item__label">Gold</th>
<td class="woocommerce-product-attributes-item__value">
<p>18k Gold</p>
</td>
</tr>
<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_pa_silver">
<th class="woocommerce-product-attributes-item__label">Silver</th>
<td class="woocommerce-product-attributes-item__value">
<p>.925 Sterling Silver</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="spacefill">
</div>
</div>
<!-- .clearfix -->
</div>
<!-- .summary -->
<div id="spacefill">
<!-- I added this -->
</div>
</div>
Here's the solution that worked best for me. You can see the final result on the webpage. Involves using position:fixed and some nifty z-index cheats.
.woocommerce-product-gallery__image{width: 100% !important;}
#media all and (min-width:1000px) {
.qode-single-product-summary {
position: fixed;
z-index: 110;
right: 113px;
width: 40%;
}
.woocommerce .summary {
float: right;
width: 100%;
margin-bottom: 45px;
}
.woocommerce ul.products {
background: #fff;
z-index: 999999999999999999999;
position: relative;
display: table;
}
.qode-single-product-summary {
position: fixed;
z-index: 110;
right: 113px;
width: 40%;
}
.woocommerce .summary {
float: right;
width: 100%;
margin-bottom: 45px;
}
.woocommerce ul.products {
background: #fff;
z-index: 999999999999999999999;
position: relative;
display: table;
margin: 0 0 0px;
}
.content_bottom {
padding-top: 80px;
background: #fff;
}
.woocommerce-page .content .container .container_inner {
padding-bottom: 0!important;
}
h2.qode-related-upsells-title {
z-index: 99999999999;
background: #fff;
padding-top: 0!important;
display: table;
position: relative;
width: 100%;
margin-bottom: 0!important;
padding-bottom: 34px;
}
}
#media all and (min-width:1500px) {
.qode-single-product-summary {
width: 1300px; right:initial;
}
.woocommerce .summary {
width: 500px;
}
}

Bootstrap Datetime picker z-index

I am using bootstrap date time picker. Its working fine with the date and time selection. But the problem is the visibility. If I put it outside any sort of container the modal is visible. But If I try to put it as a td inside a table, then the modal is not visible. I have created a jsfiddle illustrating the same.
I have gone through the css file from the site mentioned above, and tried to set size, z-index etc. But nothing works.
Please help me set an z-index or some other solution to improve visibility.
<div class="panel panel-info" style="margin-top: 1%">
<div class="panel-heading" id="JnName">Date Picker</div>
<div class="panel-body">
<form name="form3" role="form">
<div class="table-responsive" style="size:auto; max-width: 100%;">
<table class="table table-bordered table-striped" id="System Analysis">
<tbody>
<tr>
<td width="50%">
<div class="row-fluid">
<div class="col-xs-4">
<div class="box">From Date:</div>
</div>
<div class='col-sm-8'>
<div class="form-group">
<div class='input-group date' id='rptDateFrom'>
<input type='text' name='rptDateFrom' class="form-control" id="rptDateFrom" onkeydown="return false" value='' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#rptDateFrom').datetimepicker({
//viewMode: 'months',
format: 'DD/MM/YYYY',
widgetPositioning:
{
horizontal: 'left',
vertical: 'bottom'
}
});
});
</script>
</div>
</div>
</td>
<td width="50%">
<div class="row-fluid">
<div class="col-xs-6">
<div class="box">From Time [HH]:</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='cboFromTime'>
<input type='text' name='cboFromTime' class="form-control" id='cboFromTime' onkeydown="return false" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#cboFromTime').datetimepicker({
//format: 'HH:mm'
format: 'HH',
widgetPositioning:
{
horizontal: 'left',
vertical: 'bottom'
}
});
});
</script>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>
I have added an image to show the problem. The date picker window is hidden behind the table inside the panel and a scroll appears. Instead of that it should appear on top of all that.
Change overflow-y: hidden; to overflow-y: visible;
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: visible; // Add overflow-y visible
overflow-x: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
-webkit-overflow-scrolling: touch;
}
Fiddle:http://jsfiddle.net/cjonkdf2/1/
The section you have added it in has overflow hidden set on it.
.table-responsive // overflow: hidden
This stops anything showing outside of itself.
Remove that and all will be good - with this at least but it might break other things
Add this css to your page/style sheet with the table in the header:
.table-responsive {
overflow: visible !important;
}

Working Mootools Drag-Drop and Sort after drop. Need ID replace after sort to track input order

Description:
Drag and drop form elements to build a form that will be displayed later.
Needed:
- input and textarea formfields need to have id's in order after they have been sorted. I need to reference the answer to the questions and the instructions. Right now if they are sorted, I would not know what order to display them in later when viewing the record. there may be a better way, but Im stuck now.
Sort issue: The sortable area does not work until after the drag drop event. There are default fields that need to be sorted right away.
Here is the fiddle: http://jsfiddle.net/htscraig/vhkGD/3/
<div class="vf">
<div id="edit_menu">
<p style="text-align: center; margin: -5px 5px 5px;">Form Elements Menu</p>
<button href="#" id="questions_toggle" style="margin-left: 9px;">Questions<span id="questions_status"> show</span>
</button>
<button id="answers_toggle" href="#">Answer Type<span id="answers_status"> show</span>
</button>
<button id="instructions_toggle" href="#">Instructions<span id="instructions_status"> show</span>
</button>
<div id="questions">
<div style="text-align: center;">
<h3>VF-300 Questions<h3></div>
<div class="item">
<li style="float:left, height:40px, width:200px">
<textarea class="" cols="43" rows="3"style="border: medium none; width: 240px;" name="vf300-Q1" form="GeneralVerdict">Did <? echo $all_pla;?> and <? echo $all_def;?> enter into a contract?</textarea>
</li>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item">
<li style="float:left, height:40px, width:200px">
<textarea class="mooeditable" cols="43" rows="4" style="border: medium none; width: 240px;" name="vf300-Q2" form="GeneralVerdict">[Did <? echo $all_pla;?> do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
</li>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item">
<textarea class="mooeditable" cols="43" rows="6" style="border: medium none; width: 240px;" name="vf300-Q3" form="GeneralVerdict">[or]
[Was <? echo $all_pla;?> excused from having to do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
<span class="delete"><button>Delete Line</button></span>
</div>
<hr>
</div>
<div id="answers">
<div style="text-align: center;"><h3>VF-300 Answer Formats<h3></div>
<div class="item">
<input type="radio" value="Yes" name="yes-no" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">Yes
<input type="radio" value="No" name="yes-no" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No
<span class="delete" style="opacity: 0.7;"><button>Delete Line</button></span>
</div>
<div class="item"><span>Answer 222222</span>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item"><span>Answer 333333</span>
<span class="delete"><button>Delete Line</button></span>
</div><hr>
</div>
<div id="instructions">
<div style="text-align: center;"><h3>Juror Instructions<h3></div>
<div class="item"><textarea class="" cols="43" rows="5" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-i2" form="GeneralVerdict">If your answer to [either option for] question 2 is yes, then answer question 3. If you answered no [to both options], stop here, answer no further questions, and have the presiding juror sign and date this form.]</textarea>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item"><textarea class="" cols="43" rows="4" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-i3" form="GeneralVerdict">If your answer to question 3 is yes, then answer question 4. If you answered no, stop here, answer no further questions, and have the presiding juror sign and date this form.]</textarea>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item"><textarea class="" cols="43" rows="5" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-i4" form="GeneralVerdict">If your answer to [either option for] question 4 is yes, then answer question 5. If you answered no [to both options], stop here, answer no further questions, and have the presiding juror sign and date this form.</textarea>
<span class="delete"><button>Delete Line</button></span>
</div><hr>
</div>
</div>
<div id="edit_right">
<div class="info"><h1>CoPO Verdict Builder</h1>Drag and drop form elements in box. Drag elements into position to sort</div>
<ol>
<div id="edit_area">
<div class="item_dz" id="1">
<li style="float:left, height:40px, width:200px">
<textarea class="" cols="43" rows="3"style="border: medium none; width: 240px;" name="vf300-Q1" form="GeneralVerdict">Did <? echo $all_pla;?> and <? echo $all_def;?> enter into a contract?</textarea>
</li>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item_dz">
<input type="radio" value="Yes" name="yes-a1" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">Yes
<input type="radio" value="No" name="no-a1" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No
<span class="delete" style="opacity: 0.7;"><button>Delete Line</button></span>
</div>
<div class="item_dz">
<li style="float:left, height:40px, width:200px">
<textarea class="" cols="43" rows="4" style="border: medium none; width: 240px;" name="vf300-Q2" form="GeneralVerdict">[Did <? echo $all_pla;?> do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
</li>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item_dz">
<input type="radio" value="Yes" name="yes-a2" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">Yes
<input type="radio" value="No" name="no-a2" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No
<span class="delete" style="opacity: 0.7;"><button>Delete Line</button></span>
</div>
<div class="item_dz">
<textarea class="" cols="43" rows="6" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-Q3" form="GeneralVerdict">[or]
[Was <? echo $all_pla;?> excused from having to do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item_dz">
<input type="radio" value="Yes" name="yes-a2b" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">Yes
<input type="radio" value="No" name="no-a2b" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No
<span class="delete" style="opacity: 0.7;"><button>Delete Line</button></span>
</div>
<div class="item_dz"><textarea class="" cols="43" rows="5" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-i2" form="GeneralVerdict">If your answer to [either option for] question 2 is yes, then answer question 3. If you answered no [to both options], stop here, answer no further questions, and have the presiding juror sign and date this form.]</textarea>
<span class="delete"><button>Delete Line</button></span>
</div>
</div>
</div>
</ol>
</div>
window.addEvent('domready', function () {
$$('.item').addEvent('mousedown', function (event) {
if (event.target == this.getParent().getElement('.delete button')) return;
event.stop();
// `this` refers to the element with the .item class
var item = this;
var clone = item.clone().setStyles(item.getCoordinates()).setStyles({
opacity: 0.7,
position: 'absolute'
}).inject(document.body);
var drag = new Drag.Move(clone, {
droppables: $('edit_area'),
onDrop: function (element, droppable) {
if (!droppable) {
item.removeClass('item_dz');
item.addClass('item');
item.tween('background-color', '#c0c0c0', '#fff');
} else {
item.removeClass('item');
item.addClass('item_dz');
item.clone().inject(edit_area);
edit_area.highlight('#4679BD', '#AFD2FF');
item.removeClass('item_dz');
item.addClass('item');
var mySortables = new Sortables('', {
clone: true,
opacity: 0.4,
});
setTimeout(function () {
mySortables.addLists(edit_area);
}, 1);
}
element.dispose();
},
onEnter: function (dragging, edit_area) {
edit_area.tween('background-color', '#9FFF8F');
},
onLeave: function (dragging, edit_area) {
edit_area.tween('background-color', '#fff');
},
onCancel: function (dragging) {
dragging.destroy();
edit_area.tween('background-color', '#fff');
}
});
drag.start(event);
});
$$('.delete').addEvents({
mouseover: function () {
this.tween('opacity', '1');
this.getParent(['.item_dz']).fade(0.3);
this.getParent(['.item_dz']).tween('background-color', '#fff', '#FF9F9F');
},
mouseleave: function () {
this.tween('opacity', '0.7');
this.getParent(['.item_dz']).fade(1);
this.getParent(['.item_dz']).tween('background-color', '#FF9F9F', '#fff');
}
});
// start delegation relays
window.addEvent('click:relay(.delete)', function () {
if (confirm('Delete this line item?')) {
this.getParent(['.item_dz']).destroy();
this.destroy();
} else {
// Do nothing
}
})
window.addEvent('mouseover:relay(.delete)', function () {
this.tween('opacity', '1');
this.getParent(['.item_dz']).fade(0.3);
this.getParent(['.item_dz']).tween('background-color', '#fff', '#FF9F9F');
})
window.addEvent('mouseleave:relay(.delete)', function () {
this.tween('opacity', '0.7');
this.getParent(['.item_dz']).fade(1);
this.getParent(['.item_dz']).tween('background-color', '#FF9F9F', '#fff');
})
//end delegation relays
// menu toggle menus start
var status = {
'true': ' show',
'false': ' hide'
};
// questions slide start
var questionsSlide = new Fx.Slide('questions');
// set default slide as hidden
questionsSlide.hide();
$('questions_toggle').addEvent('click', function (event) {
event.stop();
questionsSlide.toggle();
$('questions_status').set('text', status[questionsSlide.open]);
});
// questions slide end
// answers slide start
var answersSlide = new Fx.Slide('answers');
// set default slide as hidden
answersSlide.hide();
$('answers_toggle').addEvent('click', function (event) {
event.stop();
answersSlide.toggle();
$('answers_status').set('text', status[answersSlide.open]);
});
// answers slide end
// instructions slide start
var instructionsSlide = new Fx.Slide('instructions');
// set default slide as hidden
instructionsSlide.hide();
$('instructions_toggle').addEvent('click', function (event) {
event.stop();
instructionsSlide.toggle();
$('instructions_status').set('text', status[instructionsSlide.open]);
});
// instructions slide end
// menu toggle menus end
$('textarea').mooEditable();
});
The sortables is only added after the first drop event. To have the .item_dz sortable from the beggining you can add this line directly after the domeready function opening: http://jsfiddle.net/ke7nq/
var sortableItem_dz = new Sortables().addItems($$('.item_dz'));
I would suggest you change the HTML for .item_dz a bit so it would include both the question and the Yes/No element. Something like the exmple under so each block would be inside a item_dz:
<div class="item_dz">
<textarea class="" cols="43" rows="6" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-Q3" form="GeneralVerdict">[or] [Was <? echo $all_pla;?> excused from having to do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
<span class="delete"><button>Delete Line</button></span>
<input type="radio" value="Yes" name="yes-a2b" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;" />Yes
<input type="radio" value="No" name="no-a2b" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No<span class="delete" style="opacity: 0.7;" />
<button>Delete Line</button>
</span>
</div>
To get all the elements after you are done dropping/sorting you can do
var questions = document.getElements('.item_dz');
// or to get just the ID's:
// var questions = document.getElements('.item_dz').map(function(el){ return el.get('id'); });
or use the .serialize() method: http://mootools.net/docs/more/Drag/Sortables#Sortables:serialize