31

I'm using jquery-steps plugin to create a wizard in my application. I followed the instructions here: https://github.com/rstaib/jquery-steps I load the js files, created my markup, called the .steps(settings) function with the settings from the github wiki.

I get the HTML elements on the page, but it seems that I'm missing the CSS file to go with it, so my interface doesn't look like the example code.

My Markup:

<div id="wizard" role="application" class="wizard clearfix"><div class="steps clearfix"><ul role="tablist"><li role="tab" class="first current" aria-disabled="false" aria-selected="true"><a id="wizard-t-0" href="#wizard-h-0" aria-controls="wizard-p-0"><span class="current-info audible">current step: </span><span class="number">1.</span> Basic Info</a></li><li role="tab" class="last done" aria-disabled="false" aria-selected="false"><a id="wizard-t-1" href="#wizard-h-1" aria-controls="wizard-p-1"><span class="number">2.</span> Brief Info</a></li></ul></div><div class="content clearfix">
    <h1 id="wizard-h-0" tabindex="-1" class="title current">Basic Info</h1>
    <div id="wizard-p-0" role="tabpanel" aria-labelledby="wizard-h-0" class="body current" aria-hidden="false" style="display: block;">
        <label>Client</label>
        <input name="client" type="text" value="">
        <br>
        <label>Brief</label>
        <input name="brief" type="text" value="">
        <br>
        <label>Plan name</label>
        <input name="plan_name" type="text" value="Yes Comedy">
        <br>
        <label>Start Date</label>
        <input name="start_date" type="text" value="2013-10-01" id="dp1384690179731" class="hasDatepicker">
        <br>
        <label>Type</label>
        <input type="radio" name="plan_type" value="1" checked="checked">Recurring
        <input type="radio" name="plan_type" value="2">One Time
        <br>
        <div id="field_end_date" class="field" style="display: none;">
            <label>End Date</label>
            <input name="end_date" type="text" value="2013-10-31" id="dp1384690179732" class="hasDatepicker">
            <br>
        </div>
    </div>
    <h1 id="wizard-h-1" tabindex="-1" class="title">Brief Info</h1>
    <div id="wizard-p-1" role="tabpanel" aria-labelledby="wizard-h-1" class="body" aria-hidden="true" style="display: none;">
        <label>Start Date</label>
        <input name="age" type="text" value="2013-10-01">
        <br>
        <label>Start Date</label>
        <input name="age" type="text" value="2013-10-01">
        <br>
    </div>
</div><div class="actions clearfix"><ul role="menu" aria-label="Pagination"><li class="disabled" aria-disabled="true"><a href="#previous" role="menuitem">Previous</a></li><li aria-hidden="false" aria-disabled="false" style="display: list-item;"><a href="#next" role="menuitem">Next</a></li><li aria-hidden="true" style="display: none;"><a href="#finish" role="menuitem">Finish</a></li></ul></div></div>

My UI:

https://i.stack.imgur.com/0iKf9.png

Can anyone suggest what CSS file I should load, or otherwise how to make my UI look and behave like the demo?

4
  • 16
    The css file for the demo is right there in the git -> github.com/rstaib/jquery-steps/blob/master/demo/css/…
    – adeneo
    Nov 17, 2013 at 12:35
  • 38
    This question should not have been closed. I just spent the last two and a half hours trying to figure out what the **** I've been doing wrong with this plugin because I have the exact same problem! I have found no place on the jquery steps website that tells me I have to supply my own CSS, because every ounce of documentation code I found made absolutely no reference to this! May 19, 2015 at 20:21
  • I voted to reopen this as it is not off-topic and deserves an answer.
    – Matt
    Dec 5, 2019 at 2:19
  • you can check the this url for reference of css check readme.md getting started it's mentionedjquery-steps Mar 5, 2020 at 12:23

1 Answer 1

2

As the user adeneo said in 2013, the Git Repo contains a demo CSS file if you wish to use it - Demo CSS

Additionally, in the Git Repo under Getting Started, Step 2 shows jquery.steps.css included in the HTML.

Here is the HTML referenced in the repo:

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <meta charset="utf-8">
        <script src="jquery.js"></script> 
        <script src="jquery.steps.js"></script>
        <link href="jquery.steps.css" rel="stylesheet">
    </head>
    <body>
        <script>
            $("#wizard").steps();
        </script>
        <div id="wizard"></div>
    </body>
</html>

The original poster said this was the correct answer, but it was never posted as an "Answer" so it could not be accepted.

3
  • 1
    While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
    – Andreas
    Dec 10, 2019 at 2:20
  • 1
    @Andreas I feel that Anthony D has provided some details with the answer. Hence this may be OK.
    – Sid
    Dec 10, 2019 at 4:53
  • I edited the answer to include the HTML referenced in Getting Started. I think it would be a tad overkill to paste in the entire Stylesheet. While true, the link could change. In this case, it seems unlikely. The last commit to that folder was 6 years ago...
    – Anthony D
    Dec 10, 2019 at 15:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.