Worcester Web Site Development Blog

+ Almost all quality improvement comes via simplification of design, manufacturing... layout, processes, and procedures.

September 7, 2008, 10:24 am

Categories

Archives

Latest

-
-

Jquery Wizard Plugin

June 4, 2007

After looking for a jquery plugin that will emulate a windows wizard I decided to make my own (with the help of cody lindley’s css step menu). I am using Jquery which can be found here and css step menu found here.

The code:

First we need a simple javascript function will hide and display a div, this method is used with jquery and you can learn how to use this here

Code (javascript)
  1.  
  2. function loadnext(divout,divin){$("." + divout).hide();$("." + divin).fadeIn("slow");}

Next the html code, notice how each step is wrapped in the ID wizardwrapper and each div is assigned a class for the corresponding step number.

Code (html)
  2. <p id="wizardwrapper"> </p>
  3. <p class="1"> </p>
  5. <h3>Step 1</h3>
  6. <p id="wizardcontent"> </p>
  8. <p class="buttons">
  9.       <button type="submit" disabled="true" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
  11.       <button type="submit" onclick="loadnext(1,2);" class="next"> Next <img src="/images/arrow_right.png" /> </button>
  12. <ul id="mainNav" class="fiveStep">
  13. <li class="current"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  14.         <li><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  15.         <li><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  16.         <li><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  17. <li class="mainNavNoBg"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
  18. </ul>
  19. <p id="wizardpanel" class="2"> </p>
  21. <h3>Step 2</h3>
  22. <p id="wizardcontent"> </p>
  24. <p class="buttons">
  25.       <button type="submit" onclick="loadnext(2,1);" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
  27.       <button type="submit" onclick="loadnext(2,3);" class="next"> Next <img src="/images/arrow_right.png" /> </button>
  28. <ul id="mainNav" class="fiveStep">
  29. <li class="lastDone"><a href="/"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  30. <li class="current"><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  31.         <li><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  32.         <li><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  33. <li class="mainNavNoBg"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
  34. </ul>
  35. <p id="wizardpanel" class="3"> </p>
  37. <h3>Step 3</h3>
  38. <p id="wizardcontent"> </p>
  40. <p class="buttons">
  41.       <button type="submit" onclick="loadnext(3,2);" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
  43.       <button type="submit" onclick="loadnext(3,4);" class="next"> Next <img src="/images/arrow_right.png" /> </button>
  44. <ul id="mainNav" class="fiveStep">
  45. <li class="done"><a href="/"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  46. <li class="lastDone"><a href="/"><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  47. <li class="current"><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  48.         <li><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  49. <li class="mainNavNoBg"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
  50. </ul>
  51. <p id="wizardpanel" class="4"> </p>
  53. <h3>Step 4</h3>
  54. <p id="wizardcontent"> </p>
  56. <p class="buttons">
  57.       <button type="submit" onclick="loadnext(4,3);" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
  59.       <button type="submit" onclick="loadnext(4,5);" class="next"> Next <img src="/images/arrow_right.png" /> </button>
  60. <ul id="mainNav" class="fiveStep">
  61. <li class="done"><a href="/"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  62. <li class="done"><a href="/"><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  63. <li class="lastDone"><a href="/"><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  64. <li class="current"><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></li>
  65. <li class="mainNavNoBg"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
  66. </ul>
  67. <p id="wizardpanel" class="5"> </p>
  69. <h3>Step 5</h3>
  70. <p id="wizardcontent"> </p>
  72. <p class="buttons">
  73.       <button type="submit" onclick="loadnext(5,4);" class="previous"> <img src="/images/arrow_left.png" /> Back </button>
  75.       <button type="submit" onclick="submit()" class="next"> Finish <img src="/images/arrow_right.png" /> </button>
  76. <ul id="mainNav" class="fiveStep">
  77. <li class="done"><a href="/"><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  78. <li class="done"><a href="/"><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  79. <li class="done"><a href="/"><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  80. <li class="lastDone"><a href="/"><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
  81. <li class="mainNavNoBg current"><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></li>
  82. </ul>
  83.  

A Demo of the wizard

Posted by Anthony LeBoeuf under jquery | Comments (25)

Create Custom google maps

May 19, 2007

I was browsing the google maps API the other day and came up on something pretty cool, google now allows you to make custom maps right on their website. Previously only the tech savvy knew how to accomplish through server side scripts such as PHP, not anymore! I played around with it a bit making a map for a website I’m working WCMP. You can draw lines, squares and circles and put markers wherever you want on the map. Google also boasts a rich editor to format the description of your marker even going as far as putting in pictures. This is a great tool for your clients website or even document a recent vacation you went one. Check it out, heres the one I made. If you make a cool map feel free to post it here so I can take a look.

Posted by Anthony LeBoeuf under Web Technology | Comments (0)

Dynamic PHP Email Forms without massive amounts of code

May 19, 2007

Ever had a HUGE form that just emails basic information and just thought to yourself, damn there has to be an easier way to do this! I’ve got a solution that will work, basicly what it does is takes the form loops all the input fields and sends them through email (or proccess them any way you would like) I’ll go over the basics here.

First we need a form Lets start with something simple

Code (html)
  2. <form method="post" action="process.php">
  3. Name:   
  4. <input name="Name" />
  6. Email:   
  7. <input name="Email" />
  9. Address:   
  10. <input name="Address" />
  11. <input name="Address" type="submit" />
  12. </form>

Now to process it, first we will import all variables and send them through a loop

Code (php)
  1.  
  2.  
  4.  
  5. $server = $_SERVER[‘HTTP_HOST’];   
  6.  
  7. foreach($_POST as $key => $data) {
  8.   if($key != ‘required’) {
  9.       if($data !=”) {
  10.           $message .= ‘<strong>’.$key.‘</strong>: ‘.$data.”;
  11.       }
  12.   }
  13. }

Now you can display your information if you wish or go further to send it with an email, im using a email class i built which you can download here.

Code (php)
  1.  
  2.  
  3. echo ‘
  4. <p style="margin: 20px; background-color: #f2fced; border: #cccccc 1px solid; padding: 20px"> </p>
  5.  
  6. <h4>Your forum Has been sucessfully sent with the following information</h4>
  7. ‘.$message.‘ 
  8.  
  9. ‘;   
  10.  
  11. $m = new Mail(); // create the mail
  12. $m->From( "email@server.com" );
  13. $m->To( "email@server.com"  );
  14. $m->Subject( ‘New forum submission from  ‘.$server.‘ Contact Page’ );
  15. $m->Body( $message);
  16. $m->Priority(4);   
  17.  
  18. $m->Send(); // send the mail

This method is very easy for sending simple forms where serverside validation is not needed. Check it out play with it and post if you have any questions ill be happy to help!

Posted by Anthony LeBoeuf under PHP | Comments (1)

Worcester Wide Web gets new website

May 19, 2007

I started development on this new website you are currently viewing, this website is going to be a little bit different then the previous website I had up. I am going to focus on posting design code and snippets from php to ajax. This site is now sort of a side project as one of my contractors (one of the largest growing design firms in Worcester) opened up into what seems to becoming a full time employment position.  Dont get me wrong I am still taking projects on any scale but my time is just limited as of lately. I will be posting some new work as well as all my old work in the category “portfolio” and I will have a new get a quote section coming up very soon. So make sure you bookmark this website and check back soon.

Posted by Anthony LeBoeuf under News | Comments (0)

« Previous Page

Copyright © 2008 Worcester Web Site Development Blog | RSS Feed | CSS and XHTML
Powered by Wordpress | Design by Worcester Wide Web