Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    show using css and hide others that do not match

    i want to show this using css

    <code><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" that don't match this....


    What would the css look like?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,096
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Quote Originally Posted by paulk@ View Post
    i want to show this using css.....

    and hide the other "control-group custom" that don't match this....
    What would the css look like?
    CSS isn't needed to show your
    Code:
    <div class="control-group custom ">
    Set the other one
    Code:
    display:none;
    You don't show us 'the other one'.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i want to hide all of the others with the parent name and their setup is similar. So I would want to show it after hiding all of them. Are is there another method?

  • #4
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    complete code

    Code:
     
    
    
        <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="Prytania">Prytania</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>
    so from above I'm looking to show only: Summary, Description, Category, & Division,

    any suggestions?
    Last edited by vinyl-junkie; 10-13-2013 at 07:02 PM. Reason: added code tags

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,096
    Thanks
    23
    Thanked 594 Times in 593 Posts
    You will need to use javascript to show the other DIV.s. To make it easier you should give each div you want to hide/show an ID.

    And it would be a large help to do that and then post the HTML here.
    And tell us if the shown div has to disappear when the next one is show, ie., how you things to go.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #6
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    They all show up now... i just need to hide the ones that are not being pulled in the javascript. is there no way to hide the others with css?

    I can hide everything easily but i need select ones to show up.

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,096
    Thanks
    23
    Thanked 594 Times in 593 Posts
    OK. I'll color code this so it's easier to understand.

    Quote Originally Posted by sunfighter View Post
    You will need to use javascript to show the other DIV.s. To make it easier you should give each div you want to hide/show an ID.

    And it would be a large help to do that and then post the HTML here.
    And tell us if the shown div has to disappear when the next one is show, ie., how you things to go.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #8
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    .js file

    This is the .js file... I'm a novice user and could use a little direction.

    <code>

    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.nextSiblin g);
    $(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
    );

    }

  • #9
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,096
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Paul, I'm at a lost here. I missed your editing of post #4, so never seen the html.

    Are you trying to make a choice in a dropdown that will make the next dropdown appear?
    Next question. Does the choice you make above present the program with a choice of dropdowns? Like: given the choice odd or even show a different set of numbers depending on the outcome?
    ==================================================

    I'm guessing here, but I think you need onchange='PUT JS FUNCTION CALL HERE' in the dropdowns. But I still think you need IDs .

    Please explain a little further.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #10
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm able to hide the menu lists using nth-of-type.

    i.e.

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

    }

    However now I need labels. Can I use ::before on the following when each option is selected? Something similar to click here to select.

    <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="Example 1">Example 1</option>
    <option value="Example 2">Example 2</option>
    <option value="Example 3">Example 3</option>
    <option value="Example 4">Example 4</option>
    <option value="Example 5">Example 5</option>
    <option value="Example 6">Example 6</option>
    <option value="Example 7">Example 7</option>
    <option value="Example 8">Example 8</option></select></div></div>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •