14 replies [Last post]
paulk
paulk's picture
Offline
Regular
Last seen: 8 years 49 weeks ago
Timezone: GMT-5
Joined: 2013-10-13
Posts: 18
Points: 22

i want to show this using css

<div class="control-group custom "><label for="ticket[selections]" title="selections">Selections:</label><div class="controls"><select id="ticket_selections" name="ticket[selections]"><option value=""></option>
<option value="office">office</option>
<option value="pool">pool</option>
<option value="party">party</option>
<option value="Meeting">Meeting</option>
<option value="Miscellaneous">Miscellaneous</option>
<option value="Projects">Projects</option></select></div></div>
 
and hide the other control-group custom's that don't match this....
 
 
What would the css look like? 

Cook

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 23 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

How are you hiding it ? Can

How are you hiding it ?

Can you show what the other control-group's look like?

paulk
paulk's picture
Offline
Regular
Last seen: 8 years 49 weeks ago
Timezone: GMT-5
Joined: 2013-10-13
Posts: 18
Points: 22

<div class="

    <div class=" control-group"><label for="ticket_summary">Summary:</label><div class="controls"><input id="ticket_summary" name="ticket[summary]" size="30" type="text" /><span class="help-inline"></span></div></div>
    <div class=" control-group" rows="4"><label for="ticket_description">Description:</label><div class="controls"><textarea cols="40" id="ticket_description" name="ticket[description]" rows="4"></textarea><span class="help-inline"></span></div></div>
 
    <div class="ticket-custom-attrs">
 
       <div class="control-group custom "><label for="ticket[c_ai_south]" title="y South">y South:</label><div class="controls"><select id="ticket_c_y_south" name="ticket[c_y_south]"><option value=""></option>
<option value="Washington DC">Washington DC</option></select></div></div>
 
       <div class="control-group custom "><label for="ticket[c_sales]" title="Sales">Sales:</label><div class="controls"><select id="ticket_c_sales" name="ticket[c_sales]"><option value=""></option>
<option value="West Region">West Region</option></select></div></div>
 
       <div class="control-group custom "><label for="ticket[c_bcdh]" title="BCIH">BCIH:</label><div class="controls"><select id="ticket_c_bcdh" name="ticket[c_bcih]"><option value=""></option>
<option value="Sales">Sales</option></select></div></div>
 
       <div class="control-group custom "><label for="ticket[category]" title="Category">Category:</label><div class="controls"><select id="ticket_category" name="ticket[category]"><option value=""></option>
<option value="Support">Support</option>
<option value="Project">Project</option></select></div></div>
 
       <div class="control-group custom "><label for="ticket[c_cell_phone]" title="Cell Phone">Cell Phone:</label><div class="controls"><select id="ticket_c_cell_phone" name="ticket[c_cell_phone]"><option value="" selected="selected"></option>
<option value="Android">Android</option></select></div></div>
 
       <div class="control-group custom "><label for="ticket[c_division]" title="Division">Division:</label><div class="controls"><select id="ticket_c_division" name="ticket[c_division]"><option value=""></option>
<option value="y South">y South</option>
<option value="NT">NT</option></select></div></div>
 
       <div class="control-group custom "><label for="ticket[c_hardware]" title="Hardware">Hardware:</label><div class="controls"><select id="ticket_c_hardware" name="ticket[c_hardware]"><option value=""></option>
<option value="Other">Other</option></select></div></div>
 
       <div class="control-group custom "><label for="ticket[c_nt]" title="NT">NT:</label><div class="controls"><select id="ticket_c_nt" name="ticket[c_nt]"><option value=""></option>
<option value="Call Center">Call Center</option>
<option value="West Region">West Region</option></select></div></div>
 
       <div class="control-group custom "><label for="ticket[c_pps]" title="PPS">PPS:</label><div class="controls"><select id="ticket_c_pps" name="ticket[c_pps]"><option value="" selected="selected"></option>
<option value="ytania">ytania</option></select></div></div>
 
       <div class="control-group custom "><label for="ticket[c_phone]" title="Phone">Phone:</label><div class="controls"><select id="ticket_c_phone" name="ticket[c_phone]"><option value="" selected="selected"></option>
<option value="Desk Phone">Desk Phone</option>
<option value="Cell Phone">Cell Phone</option></select></div></div>
 
       <div class="control-group custom "><label for="ticket[c_resource_group]" title="Resource Group">Resource Group:</label><div class="controls"><select id="ticket_c_resource_group" name="ticket[c_resource_group]"><option value="" selected="selected"></option>
<option value="Property Mgmt">Property Mgmt</option>
<option value="Purchasing">Purchasing</option></select></div></div>
 
       <div class="control-group custom "><label for="ticket[c_software]" title="Software">Software:</label><div class="controls"><select id="ticket_c_software" name="ticket[c_software]"><option value=""></option>
<option value="VPN">VPN</option></select></div></div>
 
       <div class="control-group custom "><label for="ticket[c_support]" title="Support">Support:</label><div class="controls"><select id="ticket_c_support" name="ticket[c_support]"><option value="" selected="selected"></option>
<option value="Software">Software</option></select></div></div>
 
       <div class="control-group custom "><label for="ticket[c_tsp]" title="TSP">TSP:</label><div class="controls"><select id="ticket_c_tsp" name="ticket[c_tsp]"><option value=""></option>
<option value="TSPI">TSPI</option></select></div></div>
 
       <div class="control-group custom "><label for="ticket[c_tablet]" title="Tablet">Tablet:</label><div class="controls"><select id="ticket_c_tablet" name="ticket[c_tablet]"><option value=""></option>
<option value="MS Surface">MS Surface</option></select></div></div>
 
       <div class="control-group custom "><label for="ticket[c_iphone]" title="iPhone">iPhone:</label><div class="controls"><select id="ticket_c_iphone" name="ticket[c_iphone]"><option value=""></option>
<option value="iPhone5">iPhone5</option></select></div></div>
 
    </div>

The above is how it's setup. I'm looking to show only: Summary, Description, Category, & Division, Summary and description are under a different div so no challenge with them showing up. It's category and division that I need to show up while hiding the rest.

Any suggestions are appreciated.

Cook

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 23 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

As it is it's not so easy to

As it is it's not so easy to target specific ones.
You would be best to add another class to the ones you want to show.

Do you want to show the others when an action occurs, like selecting an option?
Looks like a job for JavaScript.

paulk
paulk's picture
Offline
Regular
Last seen: 8 years 49 weeks ago
Timezone: GMT-5
Joined: 2013-10-13
Posts: 18
Points: 22

The java script is setup as

The java script is setup as you described. That part works. I just need to hide the other ones. When I review the dev site through chrome's web developer it shows the number of instances. Is there anyway to hide them that way?

Using visible:hidden and visible:visible I can sorta make it work but the spaces still show up and due to the number of instances it makes that a bad fix.

Cook

paulk
paulk's picture
Offline
Regular
Last seen: 8 years 49 weeks ago
Timezone: GMT-5
Joined: 2013-10-13
Posts: 18
Points: 22

associated a .js

associated a .js file.

Supposed to work as you described is a better choice of works.

function SubCat(){
  var sub = plugin.settings.ctree.toLowerCase().split(';');
  var category = $('ticket_category');
 
 
  for (i=0;i<sub.length;i++){
    sub[i]=sub[i].split(',');
 
    var cWatch=$("ticket_c_" + sub[i][0].replace(/ /g, "_"));
    if (sub[i][0]==cat ){
      cWatch=category;
   }
 
    var trigger=false;
    var action=$("ticket_c_" + sub[i].last().replace(/ /g, "_"));
    if (plugin.settings.bCatSub ===true && sub[i].last().replace(/ /g, "_") == cat ){
      action = $('ticket_category');
    }
    for (t=1;t<sub[i].length-1;t++){
      if (cWatch.value.toLowerCase()==sub[i][t]){
        trigger=true;
        break;
      }
    }
    if (trigger===false){  
      $(action.parentNode).hide();
      action.value = '';
      action.selectedIndex=0;
  }
    if (trigger===true){
      cWatch.parentNode.parentNode.insertBefore(action.parentNode,cWatch.parentNode.nextSibling);
      $(action.parentNode).show();
      }
 
 
 
  }
}
 
function SubCatHDT(){
  var sub = plugin.settings.ctree.toLowerCase().split(';');
 
  if (plugin.settings.ctreeAdmin.toLowerCase() !== ''){
  var sub1 = plugin.settings.ctree.toLowerCase().split(';');
  var sub2 = plugin.settings.ctreeAdmin.toLowerCase().split(';');
  sub = sub1.concat(sub2);
}
 
  var nRow=1;
   var category = $('ticket_category');
  for (i=0;i<sub.length;i++){
     sub[i]=sub[i].split(',');
 
    //console.log(sub[i]+"=");
    var cWatch=$("ticket_c_" + sub[i][0].replace(/ /g, "_"));
 
     if (sub[i][0]==cat ){
       cWatch=category;
    }
    var trigger=false;
    var action=$("ticket_c_" + sub[i].last().replace(/ /g, "_"));
   if (plugin.settings.bCatSub ===true && sub[i].last().replace(/ /g, "_") == cat ){
      action = $('ticket_category');
    }
    for (t=1;t<sub[i].length-1;t++){
      if (cWatch.value.toLowerCase()==sub[i][t]){
        trigger=true;
        break;
      }
   }
    if (trigger===false){
        action.value = '';
        action.selectedIndex=0;
      $(action.parentNode).hide();
      $(action.parentNode).previous().hide();
      }
    if (trigger===true && $(cWatch.parentNode.previous()) == $(cWatch.parentNode.parentNode.childNodes[1]) || trigger===true && nRow===0 ){
 
 
      cWatch.parentNode.parentNode.insertBefore(action.parentNode.previous(),cWatch.parentNode.nextSibling);
      cWatch.parentNode.parentNode.insertBefore(action.parentNode,cWatch.parentNode.nextSibling.nextSibling);
      $(action.parentNode).show();
      $(action.parentNode).previous().show();
      nRow=1;
    } else if (trigger===true && $(cWatch.parentNode.previous()) != $(cWatch.parentNode.parentNode.childNodes[1])){
      var tr = document.createElement('tr');
      tr.appendChild(action.parentNode.previous());
      tr.appendChild(action.parentNode);
 
      cWatch.parentNode.parentNode.parentNode.insertBefore(tr,cWatch.parentNode.parentNode.nextSibling);
      $(action.parentNode).show();
      $(action.parentNode).previous().show();
      nRow=0;
    }
     }
}
 
function SubCatNT(){
 
  // var sub = plugin.settings.ctree.toLowerCase().split(';');
  var sub = plugin.settings.ctree.toLowerCase().split(';');
 
  if (plugin.settings.ctreeAdmin.toLowerCase() !== ''){
  var sub1 = plugin.settings.ctree.toLowerCase().split(';');
  var sub2 = plugin.settings.ctreeAdmin.toLowerCase().split(';');
  sub = sub1.concat(sub2);
}
   var category = $('ticket_form').getElementsByTagName('label');
    for (i=0;i<category.length;i++){
      if (category[i].innerHTML == lblcat ){
               category = category[i].next();
        break;
          }
    }
 
  for (i=0;i<sub.length;i++){
     sub[i]=sub[i].split(',');
 
    var cWatch=$("c_" + sub[i][0].replace(/ /g, "_") + "_popup");
 
      if (sub[i][0]==cat){
       cWatch=category;
    }
 
    var trigger=false;
    var action=$("c_" + sub[i].last().replace(/ /g, "_") + "_popup");
   if (plugin.settings.bCatSub ===true && sub[i].last().replace(/ /g, "_") == cat){
      action = $('ticket_form').getElementsByTagName('label');
     for (c=0;c<action.length;c++){
      if (action[c].innerHTML == lblcat ){
               action = action[c].next();
        break;
          }
    }
    }
    for (t=1;t<sub[i].length-1;t++){
      if (cWatch.value.toLowerCase()==sub[i][t]){
        trigger=true;
        break;
      }
   }
    if (trigger===false){
      if(action.parentNode)
        $(action.parentNode).hide();
      action.value = '';
      action.selectedIndex=0;
      }
    if (trigger===true){
      cWatch.parentNode.parentNode.insertBefore(action.parentNode,cWatch.parentNode.nextSibling);
      $(action.parentNode).show();     
        }    
  }
}
 
function clickedNT(){
 // var sub = plugin.settings.ctree.toLowerCase().split(';');
  var sub = plugin.settings.ctree.toLowerCase().split(';');
 
  if (plugin.settings.ctreeAdmin.toLowerCase() !== ''){
  var sub1 = plugin.settings.ctree.toLowerCase().split(';');
  var sub2 = plugin.settings.ctreeAdmin.toLowerCase().split(';');
  sub = sub1.concat(sub2);
}
  var category = $('ticket_form').getElementsByTagName('label');
    for (i=0;i<category.length;i++){
      if (category[i].innerHTML == lblcat ){
               category = category[i].next();
        break;
          }
    }
  for (i=0;i<sub.length;i++){
    sub[i]=sub[i].split(',');
 
    var cWatch=$("c_" + sub[i][0].replace(/ /g, "_") + "_popup");
    if (sub[i][0]==cat){
      cWatch=category;
   }
    var watched = "false";
    for (s=i-1;s>0;s--){
      var sameCat = sub[s][0];
      if  (sameCat==sub[i][0]){
        watched="true";
        break;        
      }
    }
 
          if (watched !=="true"){
            Event.observe(cWatch, 'change', SubCatNT);
          }
  }
}
 
 
function NTFormCheck(){
     document.stopObserving('ajax:completed', NTFormCheck);
 
  if ($("ticket_form")){
   clickedNT();
   SubCatNT();
   document.observe('ajax:completed', NTFormCheck);
    }
    else{
      document.observe('ajax:completed', NTFormCheck);
        }
  }
 
 
function NTToolBar(){
  document.observe('ajax:completed', NTFormCheck);
}
 
function SubCatHD(){
 
  NTToolBar();
  if (plugin.settings.tEdit === true) {
    SubCatHDT();
  }
   }
 
function clicked(){
  var sub = plugin.settings.ctree.toLowerCase().split(';');
   var category = $('ticket_category');
  for (i=0;i<sub.length;i++){
    sub[i]=sub[i].split(',');
 
    var cWatch=$("ticket_c_" + sub[i][0].replace(/ /g, "_"));
    if (sub[i][0]==cat){
      cWatch=category;
   }
    var watched = "false";
    for (s=i-1;s>0;s--){
      var sameCat = sub[s][0];
      if  (sameCat==sub[i][0]){
        watched="true";
        break;        
      }
    }
          if (watched !=="true"){
            Event.observe(cWatch, 'change', SubCat);
          }
  }
}
function clickedHD(){
  //var sub = plugin.settings.ctree.toLowerCase().split(';');
  var sub = plugin.settings.ctree.toLowerCase().split(';');
 
  if (plugin.settings.ctreeAdmin.toLowerCase() !== ''){
  var sub1 = plugin.settings.ctree.toLowerCase().split(';');
  var sub2 = plugin.settings.ctreeAdmin.toLowerCase().split(';');
  sub = sub1.concat(sub2);
}
 
   var category = $('ticket_category');
  for (i=0;i<sub.length;i++){
    sub[i]=sub[i].split(',');
 
    var cWatch=$("ticket_c_" + sub[i][0].replace(/ /g, "_"));
    if (sub[i][0]==cat){
      cWatch=category;
   }
    var watched = "false";
    for (s=i-1;s>0;s--){
      var sameCat = sub[s][0];
      if  (sameCat==sub[i][0]){
        watched="true";
        break;       
      }
    }
          if (watched !=="true"){
            Event.observe(cWatch, 'change', SubCatHDT);
          }
  }
}
 
function hideAtts(){
  var findAtts = document.getElementsByTagName('p');
  var remove = plugin.settings.defaultV.replace(/ /g, "_");
  remove = new RegExp("<strong>\\w*?<\\/strong>:\\&nbsp;"+ remove + ",|,\\S<strong>\\w*?<\\/strong>:\\&nbsp;" + remove, "gi");
       for (i=0;i<findAtts.length;i++){
 
        if ($(findAtts[i]).className == "ticket-custom-fields"){
          findAtts[i].innerHTML = findAtts[i].innerHTML.replace(/ /g,"_");
        findAtts[i].innerHTML = findAtts[i].innerHTML.replace(/<strong>\w*?<\/strong>:\&nbsp;not_provided,|,\S<strong>\w*?<\/strong>:\&nbsp;not_provided|<strong>\w*?<\/strong>:\&nbsp;not_provided/gi, "");
        findAtts[i].innerHTML = findAtts[i].innerHTML.replace(remove, "");
         findAtts[i].innerHTML = findAtts[i].innerHTML.replace(/_/g," ");
             }
      }
 
    }
 
 
//====================
 
function SubCat1()
{
 
  var sub = plugin.settings.rtree.toLowerCase().split(';');
  var category = $('ticket_c_region');
 
 
  for (i=0;i<sub.length;i++)
  {
    sub[i]=sub[i].split(',');
 
    var cWatch=$("ticket_c_" + sub[i][0].replace(/ /g, "_"));
    if (sub[i][0]==rcat )
    {
      cWatch=category;
    }
 
    var trigger=false;
    var action=$("ticket_c_" + sub[i].last().replace(/ /g, "_"));
    if (plugin.settings.bCatSub ===true && sub[i].last().replace(/ /g, "_") == rcat )
    {
      action = $('ticket_c_region');
    }
    for (t=1;t<sub[i].length-1;t++){
      if (cWatch.value.toLowerCase()==sub[i][t]){
        trigger=true;
        break;
      }
    }
    if (trigger===false){
      $(action.parentNode).hide();
      action.value = '';
      action.selectedIndex=0;
  }
    if (trigger===true){
      cWatch.parentNode.parentNode.insertBefore(action.parentNode,cWatch.parentNode.nextSibling);
      $(action.parentNode).show();
      }
 
 
 
  }
}
 
function clicked1(){
  var sub = plugin.settings.rtree.toLowerCase().split(';');
   var category = $('ticket_c_region');
  for (i=0;i<sub.length;i++){
    sub[i]=sub[i].split(',');
 
    var cWatch=$("ticket_c_" + sub[i][0].replace(/ /g, "_"));
    if (sub[i][0]==rcat){
      cWatch=category;
   }
    //console.log(sub[i][0]);
    var watched = "false";
    for (s=i-1;s>0;s--){
      var sameCat = sub[s][0];
      if  (sameCat==sub[i][0]){
        watched="true";
        break;
      }
    }
          if (watched !=="true"){
            Event.observe(cWatch, 'change', SubCat1);
          }
  }
}
 
 
function processcustomform()
{
 
  setTimeout(
 
    function aa()
    {
 
      var forms = document.forms;
 
      for(var i in forms)
      {
        var form = forms[i];
        var index = ($(form).id)?($(form).id).indexOf("custom_ticket_form"):-1;
        //console.log(index);
        if( index !== -1 )
        {
 
          console.log(($(form).id));
          break;
        }
      }
 
    }
  ,5000
  );
 
}

Cook

paulk
paulk's picture
Offline
Regular
Last seen: 8 years 49 weeks ago
Timezone: GMT-5
Joined: 2013-10-13
Posts: 18
Points: 22

This is the old css file that

This is the old css file that use to work:

#ticket_form_content {
  -moz-column-count: 2;
  -moz-column-gap: 2px;
  -webkit-column-count: 2;
  -webkit-column-gap: 2px;
  column-count: 2;
  column-gap: 2px;
 
}
div#ticket_form_fields li.ticket_form_field  
{float:none; width:98%; min-height: 35px;}
div#ticket_form_fields textarea {
  width: 98%;
  min-width: 50%;
  max-width: 98%;
}
div#ticket_form_fields input.long {
  width: 98%;
  min-width: 50%;
  max-width: 98%;
}
element.style {
position: fixed;
left: 188px;
top: 5px;
z-index: 450;
}
 
div.quick_form p label, div.quick_form p.no_label strong, div.tip_form p label, div.tip_form p.no_label strong
{font-size: 1.1em;}
 
<!--Priority-->
div#ticket_form_fields li.ticket_form_field {float:left;}
div#ticket_form_fields li.grouping span { float:right;}
<!--div#ticket_form_fields li.ticket_form_field span label {float:right;}
<!--Layout-->div#ticket_form_fields input {float: left;}
div#ticket_form_fields label { float:left;}
div#ticket_form_fields input { float:right;}
div#ticket_form form div#ticket_form_fields select { float:right;}
div#ticket_form_fields li.long_field {width:98%;}
#ticket_form div.quick_form { width:800px  !important; }
div#ticket_form.quick_form {
    width: 780px !important;
}
 
 
<!--  -moz-column-width: 430px;
  -webkit-column-width: 430px;
  column-width: 430px;
textarea#ticket_description_ {width:98%;}
div#ticket_form.quick_form{ width:780px; }
 
-->

Cook

paulk
paulk's picture
Offline
Regular
Last seen: 8 years 49 weeks ago
Timezone: GMT-5
Joined: 2013-10-13
Posts: 18
Points: 22

any suggestions or direction

any suggestions or direction appreciated...

Cook

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 23 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

I really don't want to waste

I really don't want to waste time putting the parts together into a working example.
Can you provide a link?

You can hide things by the number that they exist in the collection either with JavaScript or css.
Check out the pseudo classes like :nth-of-type

.control-group.custom:nth-of-type(3){
  display:none; 
  /* or visibility:hidden; */
}

paulk
paulk's picture
Offline
Regular
Last seen: 8 years 49 weeks ago
Timezone: GMT-5
Joined: 2013-10-13
Posts: 18
Points: 22

works perfect!!! one final

works perfect!!! one final step -- any suggestions on getting the names to appear next to the drop down menu?

Cook

paulk
paulk's picture
Offline
Regular
Last seen: 8 years 49 weeks ago
Timezone: GMT-5
Joined: 2013-10-13
Posts: 18
Points: 22

any reason it would work

any reason it would work perfect in chrome using the real time cqstyle css editor but when i save it to the actual css file the drop down menus stop working?

Anything that I can add to it to prevent this?

Cook

paulk
paulk's picture
Offline
Regular
Last seen: 8 years 49 weeks ago
Timezone: GMT-5
Joined: 2013-10-13
Posts: 18
Points: 22

Is there something that I can

Is there something that I can use besides "display:none; " that would just hide it until it's called upon by the script? I've got a few that almost work but they create space. suggestions?

Cook

paulk
paulk's picture
Offline
Regular
Last seen: 8 years 49 weeks ago
Timezone: GMT-5
Joined: 2013-10-13
Posts: 18
Points: 22

I got it to work using this

I got it to work using this -- now i just need the label to show up next to the drop down menu. Any suggestions?

.control-group.custom:nth-of-type(1)
{ position: absolute;
top: -9999px;
left: -9999px;
}

Cook

paulk
paulk's picture
Offline
Regular
Last seen: 8 years 49 weeks ago
Timezone: GMT-5
Joined: 2013-10-13
Posts: 18
Points: 22

I resolved it without that

I resolved it without that approach.

Cook

jackth
jackth's picture
Offline
newbie
thailand
Last seen: 8 years 48 weeks ago
thailand
Timezone: GMT+7
Joined: 2013-10-28
Posts: 4
Points: 4

just come to know solutions.

Good question, very good answers.