locked
CSS counter re-assign dynamically RRS feed

  • Question

  • I've created a pop-up form which uses multiple fieldsets as form pages and I've used the CSS counter to create a page counter at the top of the form. The counter counts the number of li elements (which each represent a fieldset form) and will highlight the current fieldset & increment/decrement with a next/previous button click.

    This works fine but I want to dynamically hide a fieldset depending on the type of form that is selected before the pop-up form is triggered. I'm able to do this by hiding the li element and setting the 'title' of the fieldset to 'hidden' (this is picked up in the next/previous click code and skipped - I couldn't use display:none as the inactive fieldsets are set to this as default). Again, this works EXCEPT that the CSS counter for each step displays the wrong count. So if fieldset & li 2 are hidden they won't display but my counter will go 1,3,4.  I need it to still count the visible li elements to create the correct count. Is there a way of doing this in CSS or Jquery?

    Here is the key section of CSS:

        #progressbar {
            margin-bottom: 20px; /*30px;*/
            overflow: hidden;
            /*CSS counters to number the steps*/
            counter-reset: step;
        }
        #progressbar li {
            list-style-type: none;
            color: #C21111;
            text-transform: uppercase;
            font-size: 9px;
            min-width:25%;
            max-width: 33.3%;
            width:100%;
            float: left;
            ;
        }
        #progressbar li:before {
            content: counter(step);
            counter-increment: step;
            width: 20px;
            line-height: 20px;
            display: block;
            font-size: 10px;
            color: black;
            background: lightgrey !important;
            border-radius: 3px;
            margin: 0 auto 5px auto;
        }
    
    
        /*progressbar connectors*/
        #progressbar li:after {
            content: '';
            width: 100%;
            height: 2px;
            background: lightgrey !important;
            ;
            left: -50%;
            top: 9px;
            z-index: -1; /*put it behind the numbers*/
        }
        #progressbar li:first-child:after {
            /*connector not needed before the first step*/
            content: none; 
        }
        /*marking active/completed steps green*/
        /*The number of the step and the connector before it = green*/
        #progressbar li.active:before,  #progressbar li.active:after{
            background: #C21111 !important; /*#27AE60;*/
            color: white;
        }

    Here is the HTML Pop-up form code:

            <!-- multistep form -->
        <form id="msform">
            <!-- progressbar -->
            <ul id="progressbar" style="align-content:center;text-align:center;">
                <li id="liDetails" class="active">Your Details</li>
                <li id="liLevel">Level Selection</li>
                <li id="liAccess">Access Items</li>
                <li id="liSummary">Summary</li>
            </ul>
            <!-- fieldsets -->
            <fieldset id="fsDetails">
                <h2 class="fs-title">Enter your details</h2>
                @*<h3 class="fs-subtitle">This is step 1</h3>*@
                <div class="fs-leftDiv">
                    <input type="datetime" name="RequestDate" id="RequestDate" placeholder="Request Date  " />
                    <input type="text" name="RequestedFor" id="RequestedFor" placeholder="Requested For   " />
                    <input type="text" name="ForOtherStaff" id="ForOtherStaff" placeholder="Form For Other Staff?   " />
                    <input type="text" name="DirectorateName" id="DirectorateName" placeholder="Directorate   " />
                </div>
                <div class="fs-rightDiv">
                    <input type="text" name="PhysicalSite" placeholder="Site   " />
                    <input type="text" name="Dept" placeholder="Department   " />
                    <input type="text" name="PhoneNo" placeholder="Phone Number   " />
                    <input type="text" name="Payroll" placeholder="Payroll Number   " />
                </div>
                <input type="button" name="next" class="next action-button" value="Next" />
                <input type="button" name="save" class="save action-button" value="Save" />
            </fieldset>
            <fieldset id="fsLevel" title="hidden">
                @* title="hidden" *@
                <h2 class="fs-title">Level Selection</h2>
                <h3 class="fs-subtitle">We will never sell it</h3>
                <input type="text" name="fname" placeholder="First Name" />
                <input type="text" name="lname" placeholder="Last Name" />
                <input type="text" name="phone" placeholder="Phone" />
                <textarea name="address" placeholder="Address"></textarea>
                <input type="button" name="previous" class="previous action-button" value="Previous" />
                <input type="button" name="next" class="next action-button" value="Next" />
            </fieldset>
            <fieldset id="fsAccess">
                <h2 class="fs-title">Access Item Selection</h2>
                @*<h3 class="fs-subtitle">Your presence on the social network</h3>*@
                <input type="text" name="twitter" placeholder="Twitter" />
                <input type="text" name="facebook" placeholder="Facebook" />
                <input type="text" name="gplus" placeholder="Google Plus" />
                <input type="button" name="previous" class="previous action-button" value="Previous" />
                <input type="button" name="next" class="next action-button" value="Next" />
            </fieldset>
        <fieldset id="fsSummary">
            <h2 class="fs-title">Summary</h2>
            <h3 class="fs-subtitle">We will never sell it</h3>
            <input type="text" name="fname" placeholder="First Name" />
            <input type="text" name="lname" placeholder="Last Name" />
            <input type="text" name="phone" placeholder="Phone" />
            <textarea name="address" placeholder="Address"></textarea>
            <input type="button" name="previous" class="previous action-button" value="Previous" />
            <input type="button" name="submit" class="submit action-button" value="Submit" />
        </fieldset>
        </form>

    Friday, January 16, 2015 6:04 PM

Answers

  • Please post your question on http://forums.asp.net/. This forum is to discuss C# problem.

    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    • Marked as answer by Just Karl Tuesday, January 20, 2015 9:26 PM
    Monday, January 19, 2015 5:08 AM

All replies

  • Please post your question on http://forums.asp.net/. This forum is to discuss C# problem.

    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    • Marked as answer by Just Karl Tuesday, January 20, 2015 9:26 PM
    Monday, January 19, 2015 5:08 AM
  • I've created a pop-up form which uses multiple fieldsets as form pages and I've used the CSS counter to create a page counter at the top of the form. The counter counts the number of li elements (which each represent a fieldset form) and will highlight the current fieldset & increment/decrement with a next/previous button click.

    This works fine but I want to dynamically hide a fieldset depending on the type of form that is selected before the pop-up form is triggered. I'm able to do this by hiding the li element and setting the 'title' of the fieldset to 'hidden' (this is picked up in the next/previous click code and skipped - I couldn't use display:none as the inactive fieldsets are set to this as default). Again, this works EXCEPT that the CSS counter for each step displays the wrong count. So if fieldset & li 2 are hidden they won't display but my counter will go 1,3,4.  I need it to still count the visible li elements to create the correct count. Is there a way of doing this in CSS or Jquery?

    Here is the key section of CSS:

        #progressbar {
            margin-bottom: 20px; /*30px;*/
            overflow: hidden;
            /*CSS counters to number the steps*/
            counter-reset: step;
        }
        #progressbar li {
            list-style-type: none;
            color: #C21111;
            text-transform: uppercase;
            font-size: 9px;
            min-width:25%;
            max-width: 33.3%;
            width:100%;
            float: left;
            ;
        }
        #progressbar li:before {
            content: counter(step);
            counter-increment: step;
            width: 20px;
            line-height: 20px;
            display: block;
            font-size: 10px;
            color: black;
            background: lightgrey !important;
            border-radius: 3px;
            margin: 0 auto 5px auto;
        }
    
    
        /*progressbar connectors*/
        #progressbar li:after {
            content: '';
            width: 100%;
            height: 2px;
            background: lightgrey !important;
            ;
            left: -50%;
            top: 9px;
            z-index: -1; /*put it behind the numbers*/
        }
        #progressbar li:first-child:after {
            /*connector not needed before the first step*/
            content: none; 
        }
        /*marking active/completed steps green*/
        /*The number of the step and the connector before it = green*/
        #progressbar li.active:before,  #progressbar li.active:after{
            background: #C21111 !important; /*#27AE60;*/
            color: white;
        }

    Here is the HTML Pop-up form code:

            <!-- multistep form -->
        <form id="msform">
            <!-- progressbar -->
            <ul id="progressbar" style="align-content:center;text-align:center;">
                <li id="liDetails" class="active">Your Details</li>
                <li id="liLevel">Level Selection</li>
                <li id="liAccess">Access Items</li>
                <li id="liSummary">Summary</li>
            </ul>
            <!-- fieldsets -->
            <fieldset id="fsDetails">
                <h2 class="fs-title">Enter your details</h2>
                @*<h3 class="fs-subtitle">This is step 1</h3>*@
                <div class="fs-leftDiv">
                    <input type="datetime" name="RequestDate" id="RequestDate" placeholder="Request Date  " />
                    <input type="text" name="RequestedFor" id="RequestedFor" placeholder="Requested For   " />
                    <input type="text" name="ForOtherStaff" id="ForOtherStaff" placeholder="Form For Other Staff?   " />
                    <input type="text" name="DirectorateName" id="DirectorateName" placeholder="Directorate   " />
                </div>
                <div class="fs-rightDiv">
                    <input type="text" name="PhysicalSite" placeholder="Site   " />
                    <input type="text" name="Dept" placeholder="Department   " />
                    <input type="text" name="PhoneNo" placeholder="Phone Number   " />
                    <input type="text" name="Payroll" placeholder="Payroll Number   " />
                </div>
                <input type="button" name="next" class="next action-button" value="Next" />
                <input type="button" name="save" class="save action-button" value="Save" />
            </fieldset>
            <fieldset id="fsLevel" title="hidden">
                @* title="hidden" *@
                <h2 class="fs-title">Level Selection</h2>
                <h3 class="fs-subtitle">We will never sell it</h3>
                <input type="text" name="fname" placeholder="First Name" />
                <input type="text" name="lname" placeholder="Last Name" />
                <input type="text" name="phone" placeholder="Phone" />
                <textarea name="address" placeholder="Address"></textarea>
                <input type="button" name="previous" class="previous action-button" value="Previous" />
                <input type="button" name="next" class="next action-button" value="Next" />
            </fieldset>
            <fieldset id="fsAccess">
                <h2 class="fs-title">Access Item Selection</h2>
                @*<h3 class="fs-subtitle">Your presence on the social network</h3>*@
                <input type="text" name="twitter" placeholder="Twitter" />
                <input type="text" name="facebook" placeholder="Facebook" />
                <input type="text" name="gplus" placeholder="Google Plus" />
                <input type="button" name="previous" class="previous action-button" value="Previous" />
                <input type="button" name="next" class="next action-button" value="Next" />
            </fieldset>
        <fieldset id="fsSummary">
            <h2 class="fs-title">Summary</h2>
            <h3 class="fs-subtitle">We will never sell it</h3>
            <input type="text" name="fname" placeholder="First Name" />
            <input type="text" name="lname" placeholder="Last Name" />
            <input type="text" name="phone" placeholder="Phone" />
            <textarea name="address" placeholder="Address"></textarea>
            <input type="button" name="previous" class="previous action-button" value="Previous" />
            <input type="button" name="submit" class="submit action-button" value="Submit" />
        </fieldset>
        </form>

    this forum about Visual c#, please move to asp.net forum.
    Monday, January 19, 2015 11:10 AM
  • Have done.

    My apologies for posting in the wrong section.

    Shuja


    PS. how do I get rid of the post I created on this forum?
    • Edited by dabooj Monday, January 19, 2015 12:07 PM How to remove post
    Monday, January 19, 2015 12:01 PM