show some / hide some

14 replies [Last post]

Sun, 2013-10-13 15:23

paulk

Offline

Regular

Last seen: 9 years 31 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

Tags:

Sun, 2013-10-13 22:52

Tony

Offline

Moderator

Brisbane

Last seen: 3 weeks 22 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?

Sun, 2013-10-13 23:04

paulk

Offline

Regular

Last seen: 9 years 31 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

Mon, 2013-10-14 00:01

Tony

Offline

Moderator

Brisbane

Last seen: 3 weeks 22 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.

Mon, 2013-10-14 00:21

paulk

Offline

Regular

Last seen: 9 years 31 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

Mon, 2013-10-14 00:26

paulk

Offline

Regular

Last seen: 9 years 31 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

Mon, 2013-10-14 00:40

paulk

Offline

Regular

Last seen: 9 years 31 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

Mon, 2013-10-14 00:44

paulk

Offline

Regular

Last seen: 9 years 31 weeks ago

Timezone: GMT-5

Joined: 2013-10-13

Posts: 18

Points: 22

any suggestions or direction

any suggestions or direction appreciated...

Cook

Mon, 2013-10-14 23:02

Tony

Offline

Moderator

Brisbane

Last seen: 3 weeks 22 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; */
}

Tue, 2013-10-15 05:19

paulk

Offline

Regular

Last seen: 9 years 31 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

Tue, 2013-10-15 12:02

#10

paulk

Offline

Regular

Last seen: 9 years 31 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

Tue, 2013-10-15 12:55

#11

paulk

Offline

Regular

Last seen: 9 years 31 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

Tue, 2013-10-15 15:16

#12

paulk

Offline

Regular

Last seen: 9 years 31 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

Tue, 2013-10-15 21:38

#13

paulk

Offline

Regular

Last seen: 9 years 31 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

Mon, 2013-10-28 14:31

#14

jackth

Offline

newbie

thailand

Last seen: 9 years 30 weeks ago

thailand

Timezone: GMT+7

Joined: 2013-10-28

Posts: 4

Points: 4

just come to know solutions.

Good question, very good answers.

show some / hide some

How are you hiding it ? Can

<div class="

As it is it's not so easy to

The java script is setup as

associated a .js

This is the old css file that

any suggestions or direction

I really don't want to waste

works perfect!!! one final

any reason it would work

Is there something that I can

I got it to work using this

I resolved it without that

just come to know solutions.

User login

Navigation