SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    564
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to create these ?

    Hi,

    How to create the following ? Sorry I don't know what to call it exactly.

    ss.jpg

    I want to create a form similar to that. How to achieve that ?

    Thanks.

  2. #2
    SitePoint Addict FizixRichard's Avatar
    Join Date
    May 2003
    Location
    UK
    Posts
    372
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    What do you mean exactly?

    I'm assuming you mean a multi-part form where the step graphic changes as you move through the form steps without page reload?

    If so, the answer is JavaScript, so the form html changes as you move through the steps.


    So for example, if you have a form that has 4 steps; you'd code the 4 steps in HTML and use javascript to show step 1 at the start, and as the next button is pressed you show step 2 and so on.

    As you move through you would update the step graphic as appropriate.


    How you would best achieve that through code would really depend on the form itself, it's purpose and the actual effects you want to have on the form; i.e. if the form slides, or if it just changes when you click next.
    FIZIX - Full Service Digital Agency - Engaging websites, apps and games.
    Follow us @FIZIXAgency

  3. #3
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    564
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I found it, here's the code for anyone else who wants this:

    Code:
    .progressbar { 
    	width:500px; 
    	height:30px; 
    	-webkit-border-radius:6px; 
    	-moz-border-radius:6px; 
    	border-radius:6px; 
    	background-color:#ffffff; 
    	text-transform:uppercase;
    	padding:0;
    	margin:0;
    }
    .progressbar li {
    	list-style-type:none;
    	float:left;
    	width:125px;
    	padding:0;
    	margin:0;
    	text-align:center;
    	font:14px/30px Arial;
    }
    .progressbar li strong {
    	float:left;
    	text-align:center;
    	margin:0 26px;
    }
    .progressbar li#p1 {
    	-webkit-border-top-left-radius:6px;
    	-webkit-border-bottom-left-radius:6px;
    	-moz-border-radius-topleft:6px;
    	-moz-border-radius-bottomleft:6px;
    	border-top-left-radius:6px;
    	border-bottom-left-radius:6px;
    }
    .progressbar li#p4,.progressbar li#p4.current_step span.next_arrow {
    	-webkit-border-top-right-radius:6px;
    	-webkit-border-bottom-right-radius:6px;
    	-moz-border-radius-topright:6px;
    	-moz-border-radius-bottomright:6px;
    	border-top-right-radius:6px;
    	border-bottom-right-radius:6px;
    }
    .progressbar li span.next_arrow {
    	width:20px;
    	height:30px;
    	display:block;
    	float:right;
    }
    .progressbar li.completed_step span.next_arrow {
    	background:url('../images/progressbar_bg.gif') repeat-x right top
    }
    .progressbar li.completed_step
    {
    	background:url('../images/progressbar_bg.gif') repeat-x 0px 0px;
    	color:#fff;
    }
    .progressbar li.current_step span.next_arrow {
    	background:url('../images/progressbar_bg.gif') repeat-x right -60px
    }
    .progressbar li#p4.current_step span.next_arrow {
    	background:url('../images/progressbar_bg.gif') repeat-x left -60px
    }
    .progressbar li.current_step {
    	background:url('../images/progressbar_bg.gif') repeat-x 0px -60px;
    	color:#fff;
    }
    HTML Code:
    Code:
    	<ol class="progressbar">
    		<li id="p1" class="current_step"><strong>Step 1</strong><span class="next_arrow"></span></li>
    		    <li id="p2" class="next_step"><strong>Step 2</strong><span class="next_arrow"></span></li>
    		    <li id="p3" class="next_step"><strong>Step 3</strong><span class="next_arrow"></span></li>
    		    <li id="p4" class="next_step"><strong>Step 4</strong><span class="next_arrow"></span></li>
    	</ol>
    1 image is required which is attached. Please download that.
    progressbar_bg.gif

    Hope this helps!

    Thanks.


Bookmarks

Posting Permissions

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