This weeks article and webinar is titled “Breadcrumbs 3 Ways”. No you haven’t tuned into my cooking blog, I am talking about website navigation links. In our continuing series on extending WebDev via CSS and JQuery this week we will be looking at 3 different styles of Breadcrumb links that you can use for you WebDev sites with just a bit of CSS coding

Last week we were switching the CSS file on the fly, to allow for branding based on the client. This week we will look at using a single CSS file, which if you are designing a web application that has a single look and feel, would be more the normal approach. Most of the concepts are the same with either method, but as you will see this week, we can take advantage of a few more WebDev features since we won’t be changing the CSS file on the fly.

Importing and using an external CSS file

In this example I already have a CSS file that has a collection of styles that I want to use in my WebDev project. This could be a CSS file provided by a Web Designer, or perhaps a CSS file that was part of an example technique you found via Google. So step one is to import the file into WebDev so we can use it. So from the Project Menu, chose Import, then “A CSS Style Sheet”

Next we are given two options. The first option is to import the styles into WebDev. This will create CSS styles that can be edited via the WebDev CSS styles editor. Once important the external CSS file is no longer needed or referenced. Any changes to the styles is done via the WebDev interface. For simple CSS styles that you don’t need to change outside of WebDev, this option is the simplest. However, be careful if you are working with any advanced CSS, the WebDev interface doesn’t support every possible feature of CSS, so some of you CSS might be lost if importing it into the WebDev interface. The other drawback is if you want to tweak the CSS in the future, you need to do it via WebDev, if you would with a Web Designer that doesn’t use WebDev, it might be more convenient to reference the CSS externally, that way the CSS file can be changed outside of WebDev.

Which brings us to our second option. Use an external CSS style sheet. With this option the CSS classes are imported and available inside the WebDev interface, but they reference the external CSS file, so changes can be made via the CSS file. This is the option we will be using in this example.

The next screen ask for the CSS file to import, and then processing the file, and show what classes will be imported.

So what has happened at this point? If we choose the “Edit the CSS styles” option from the Page, Styles menu.

And look at the external references tab, we will see that it copied our CSS file into a directory called “ext” under our Web directory. Since it is under the Web directory it will be published with our side and accessible via the web, and we all see the list of classes that were imported via this file.

Warning: Notice the add button on this tab, it seems that you can use this button to add an external CSS file from this screen and you can. But for some reason when you do it via this screen you don’t see the list of classes to be imported, in fact you will notice that screen flashes by quickly without stopping. I think this is a bug, but it isn’t one I have bothered to report since, I can accomplish it via the import CSS function.

 

Another feature on the External References tab is the Synchronize button. Notice the icon has changed in the screen shot below.

This is indicating that the CSS file has been changed, and that the WebDev interface is not reflecting those changes in the styles. Pressing the Synchronize button will reimport the file, and refresh the styles in WebDev base on the changes to the file.

But don’t get to excited, this will only update the CSS styles that were part of the original import, the ones shown under the file name. Any new styles added to the file will not be imported. However if you use the import function, and reimport the file that way, the new styles will be imported. Again I think this is a bug.

At this point the CSS styles are available in the WebDev interface and can be used on WebDev styles, the same as CSS styles defined on the Project Styles. In the screen shot below the CurrentStep, DisabledStep, and PreviousStep class are all from our external CSS file.

Notice when we select one of these styles the icon indicates that it is an external CSS style.

Versus a CSS style defined in the project, which has the below icon.

Note: I would have thought that the external CSS file would automatically be referenced in the site at this point. However even though the styles are available in the WebDev interface, when you run the site you will notice that none of your CSS styles are there. You need to go to the Project Description and include the external CSS file, so that it will be loaded in the pages.

On to the Breadcrumbs

Now that we know how to use an external CSS file, we can continue on with looking at our Breadcrumb example. So just what are Breadcrumbs? Traditionally Breadcrumbs are used to show the path through a content site, hence the name Breadcrumb, as in Hansel and Gretel. Here is a classic example of Breadcrumb use on Ebay.com

The general concept of Breadcrumbs can also be used to show the steps required to complete a task, and which step the user is currently on. For today’s example we will be working on the “task navigation” for for a hotel room booking site. There are four steps to the process: Dates and Rates, Guest Details, Payment, Confirmation. While on the site we want to show them how many steps there are, which step they are currently on, and give them the ability to go back to a previous step.

So lets take a look at the example page running.

The Radio button control and the Next, Previous buttons are just ways for us to navigate through the example to see the effect as we change the step number. Let’s move to the third step and take a look.

In each Breadcrumb example you see that there are 3 different “styles” to indicate Previous Steps, the Current Step, and Future Steps. Each also has a hover style for the previous steps, to indicate to the user that they can click on those steps to go back.

If we look at the page at design time in the WebDev editor, we will see it looks quite a bit different than it does at run time.

That is one of the challenges you face as you incorporate more and more CSS and Jquery into your site, in the first two Breadcrumb examples, they are fairly similar, its just that WebDev is not showing us the radius borders from are external CSS file, which is especially noticeable on our numbers that become circles. Depending on what you are doing this might mean you need to leave a bit more space between controls, etc. to accommodate the changes made via CSS. If you chose the option to import the CSS directly into WebDev, instead of using an external file, more of the styling will be rendered at design time, but remember the WebDev CSS editor doesn’t support all CSS options, for instance the circles are done via a percentage radius which is not supported in the WebDev CSS editor, so in order to accomplish that I must use an external CSS file.

Our third example is pure HTML code and therefore doesn’t render at all at design time, making it the most challenging for a design stand point. But of course it is also the most visually appealing at runtime, so its a matter of picking your poison, and as I have mentioned before in this series its just a matter of peppering in a little CSS and Jquery here and there to give your site those finishing touches, you don’t want to over do it, or you will lose the whole advantage that WebDev gives you in the first place.

So on to the code! You thought we would never get there didn’t ya? First I should mention that your production code might be considerably different than this code, depending on how your site works. The code for rendering all four steps and changing them on the fly is included in this example, since it is a one page example. In your production site if they are separate pages, you could chose to only have the code that render that specific step. In the Project that I borrowed this example from, I have included the Breadcrumb in the page template, and each page simply sets its step number, and all the rendering code is contained in the template, making it easier to tweak in the future, as it only lives in one place.

The Navigation Code of Our Example Page

The bulk of our work is done in two local procedures, one a server procedure, and the other a browser procedure. Depending on what we are doing with each example so of the code is WebDev Server code and some Browser code. Naturally any Jquery code must be executed in the browser. Here is the code behind the radio button control.

I should mention here just how much WebDev has evolved, to make our life easier. By AJAX enabling our server code event, the page will not do a full reload. And then we are using a feature, that I believe first became available in v19, which is a special browser event for when returning from the AJAX call.  This is a prime example of something that in previous versions I would have to create a timer event to “wait” for the server code to signal that it was complete, so that I could execute any browser code. Not I just put that browser code in this event and the rest is handled for me. Have I mentioned lately just how much I love WebDev?

In the initialization of our page, we set the current step to the first step, by executing the server procedure. We also need to fire the browser procedure which we do “onload” which is the browser equivalent of Global Declarations.

Our Previous and Next buttons, just increments or decrements the step number and then fires the two procedures

Finally there is a bit of house keeping code at the beginning of the server procedure

We set the radio button controls value to the step passed in. We are using the value of the radio button as our “global variable” to store the current step number. There is also a bit of code to hide or unhide the Previous and Next buttons based on which step we are on.

You might notice that the procedure is AJAX enabled. We will see why that is when we look at our 3rd example.

Breadcrumb #1

So finally, finally we can look at our actual Breadcrumbs! Example one is using links for each step, with a simple separator between each link. The CSS for the example includes four styles, CurrentStep, DisabledStep, PreviousStep, and BreadcrumbSeparator. Notice there is also a hover style for the PreviousStep. Here is the CSS code.

/* #1 Breadcrumbs */
.CurrentStep{
font-family:Verdana,Arial, Helvetica, sans-serif !important;
font-size:10pt !important;
font-weight:bold !important;
color:#2D2D2D !important;
text-align: center !important;
vertical-align:middle !important;
text-decoration: none !important;
background-color: #B5CBF0 !important;
-ms-border-radius:3px !important;
-moz-border-radius:3px !important;
-webkit-border-radius:3px !important;
-o-border-radius:3px !important;
border-radius:3px !important;
}
.DisabledStep{
font-family:Verdana,Arial, Helvetica, sans-serif !important;
font-size:10pt !important;
font-weight:bold !important;
color:#C0C0C0 !important;
vertical-align:middle !important;
text-align: center !important;
text-decoration: none !important;
}
.PreviousStep{
font-family:Verdana,Arial, Helvetica, sans-serif !important;
font-size:10pt !important;
font-weight:bold !important;
color:#2D2D2D !important;
vertical-align:middle !important;
text-align: center !important;
text-decoration: none !important;
}
.PreviousStep:hover{
text-decoration: underline !important;
color:#FF0000 !important;
background-color: #B5CBF0 !important;
-ms-border-radius:3px !important;
-moz-border-radius:3px !important;
-webkit-border-radius:3px !important;
-o-border-radius:3px !important;
border-radius:3px !important;
}
.BreadCrumbSeparator{
font-family:Verdana,Arial, Helvetica, sans-serif !important;
font-size:12pt !important;
color:#C0C0C0 !important;
vertical-align:middle !important;
font-weight: bold !important;
}

In WebDev I only use the CurrentStep and BreadCrumbSeparator styles, the others are only used at runtime, so that is why at design time all my steps look like they are the current step. So I created a WebDev style based on those two styles.

The controls are the window are just links, for each step, with the CurrentStep Style applied, and statics for the separators.

The code behind the links, is similar to the code from our radio buttons, each one calls our two function passing in the appropriate step number.

Our server procedure has the following code for Breadcrumb #1, which simply make the appropriate links either inactive or active, so that they may be clicked on or not.

Our browser procedure contains the following code for Breadcrumb #1

The code is all very similar, the only difference is which CSS class is applied to each control based on the current step. So lets look at one of the lines, Line #7 for instance. We can break this line into 3 sections, lets look at the first portion of it

We are using the WebDev jQuery function. As explained in other articles I have done, jQuery is simply a method of using JavaScript to apply runtime changes to your HTML code. The first step is to tell it which HTML control to effect. For very simply items we can just refer to a WebDev control here and let WebDev do the work for us, but often I find that I need to be more precise with the selection.

Jquery has a very powerful set of options for this selection, and if you do a Google search for Jquery Selectors you can find many websites devoted to the topic. Often the two toughest parts about using jQuery in WebDev is finding out what object I need to apply it to, and what jQuery selector will select that object. There are a number of selector conditions but most often you use the objects id as part of the selection and that is what we are doing here, we are looking for any html object that has an id that ends with LNKSTEP1.

But where do these id’s come from? First as a reminder, in order to work efficiently with jQuery and JavaScript we need to configure WebDev so that it uses our control names for the HTML ids instead of using the generic A1, A2, etc. We can do this at either the project level or the page level. In this example we are doing it at the page level.

Next we use a tool I have show you many times now. Chrome developer tools, Inspect Element tool. If we run the page and inspect one of the links, we will see that it consist of a anchor (<a>) tag nested instead a table cell (<td>) tag.

The <td> tag has an id of tzLNKSTEP1 and the <a> tag has an id of LNKSTEP1. We need our class applied to both of these tags to get the desired effect we want, which is why I used the $= jQuery select, so that all ids that end with LNKSTEP1 were selected. And in fact if we take another look at the inspected element we can see that the CurrentStep class has been applied to both of these objects.

So now we know how I determined which ids to select, and how to format the jQuery selector to select them, lets take a look at the next portion of the line.

removeClass is a jQuery function, that does just what it sounds like it would do. It removes CSS classes from the object. We have 3 different CSS classes that might have been applied to our Links, so we simply list those as a parameter of the function. This will remove the CurrentStep, DisabledStep or PreviousStep classes from the selected object.

Note: Remember all CSS, JavaScript and jQuery is case sensitive, so removeClass has to use that exact case or it will not work.

So now we have removed any of the 3 classes that might have been applied to the links, all we need to do is add the appropriate class, which we do in the final section of our code.

addClass again does exactly what you would expect it to do, it adds the class to the selected object. Put the 3 pieces of code together and we have the following line

Which selects the appropriate object, removes the specified classes and then add the appropriate class. This is using a format of jQuery commands known as chained commands, which is simploy a method of apply several jQuery functions to the same selected objects. We could have written this as two separate lines, but that would cause jQuery to have to perform the searching twice and makes our code a bit longer.

The rest of the browser code for Breadcrumb #1 is just variations of this same code selecting the appropriate links and applying the appropriate classes based on the current step number.

Breadcrumb #2

Breadcrumb #2 is just a variation of #1. I have removed the separator, and added a number inside a circle to indicate the step number for each step. The CSS follows:

/* #2 Breadcrumbs */
.CurrentCircle{
font-family:Verdana,Arial, Helvetica, sans-serif !important;
font-size:10pt !important;
font-weight:bold !important;
color:#2D2D2D !important;
text-align: center !important;
vertical-align:middle !important;
text-decoration: none !important;
background-color: #B5CBF0 !important;
border-radius: 50% !important;
-ms-border-radius:50% !important;
-moz-border-radius:50% !important;
-webkit-border-radius:50% !important;
-o-border-radius:50% !important;
}
.PreviousCircle{
font-family:Verdana,Arial, Helvetica, sans-serif !important;
font-size:10pt !important;
font-weight:bold !important;
color:#2D2D2D !important;
text-align: center !important;
vertical-align:middle !important;
text-decoration: none !important;
background-color: #E0E0E0 !important;
border-radius: 50% !important;
-ms-border-radius:50% !important;
-moz-border-radius:50% !important;
-webkit-border-radius:50% !important;
-o-border-radius:50% !important;
}
.PreviousCircle:hover{
text-decoration: underline !important;
color:#FF0000 !important;
background-color: #B5CBF0 !important;
border-radius: 50% !important;
-ms-border-radius:50% !important;
-moz-border-radius:50% !important;
-webkit-border-radius:50% !important;
-o-border-radius:50% !important;
}
.DisabledCircle{
font-family:Verdana,Arial, Helvetica, sans-serif !important;
font-size:10pt !important;
font-weight:bold !important;
color:#C0C0C0 !important;
text-align: center !important;
vertical-align:middle !important;
text-decoration: none !important;
background-color: #E0E0E0 !important;
border-radius: 50% !important;
-ms-border-radius:50% !important;
-moz-border-radius:50% !important;
-webkit-border-radius:50% !important;
-o-border-radius:50% !important;
}
.CurrentStep2{
font-family:Verdana,Arial, Helvetica, sans-serif !important;
font-size:10pt !important;
font-weight:bold !important;
color:#2D2D2D !important;
text-align: left !important;
vertical-align:middle !important;
text-decoration: none !important;
padding-left: 2px;
background-color: #B5CBF0 !important;
-ms-border-radius:3px !important;
-moz-border-radius:3px !important;
-webkit-border-radius:3px !important;
-o-border-radius:3px !important;
border-radius:3px !important;
}
.DisabledStep2{
font-family:Verdana,Arial, Helvetica, sans-serif !important;
font-size:10pt !important;
font-weight:bold !important;
color:#C0C0C0 !important;
vertical-align:middle !important;
text-align: left !important;
text-decoration: none !important;
padding-left: 2px;
}
.PreviousStep2{
font-family:Verdana,Arial, Helvetica, sans-serif !important;
font-size:10pt !important;
font-weight:bold !important;
color:#2D2D2D !important;
vertical-align:middle !important;
text-align: left !important;
text-decoration: none !important;
padding-left: 2px;
}
.PreviousStep2:hover{
text-decoration: underline !important;
color:#FF0000 !important;
background-color: #B5CBF0 !important;
-ms-border-radius:3px !important;
-moz-border-radius:3px !important;
-webkit-border-radius:3px !important;
-o-border-radius:3px !important;
border-radius:3px !important;
}

The CurrentStep2, NextStep2, and PreviousStep2 or very similar to our first example, I just did them as their own classes so that each example could stand on its own. The difference is we have now added a CurrentCircle, NextCircle, and PreviousCircle class. This classes are very similar to the step classes, the main difference is the border-radius attribute. Notice we set the border radius to 50%, which means the radius with be 50% of the controls size, so if we make our control size square, in this example 25 x 25 pixels, then the radius will be half of that, forming a circle.

Note this is an example of a CSS setting that is not supported via the WebDev CSS editor, although it does support border-radius, it only support them based on pixels. So if you want to do a radius based on a percent, you must do it as an external CSS file.

Creating the screen controls is similar to the first breadcrumb, except there is a second link, for each number, and the additional of a WebDev style that references our CurrentCircle CSS style.

The code is also similar to the first example.  For the server code we need to active or inactive both the main link, and the numbered circle link.

And on the browser the code is also similar, we just need to remove and apply the appropriate classes to each of the eight controls.

Breadcrumb #3

The third example is the most visually appealing, but it is also the one that is furthest outside the WebDev “box”.  It relies on an HTML element known as an Unordered list. Since that is an HTML element that doesn’t have a coresponding WebDev control we use an HTMLcontrol to place the control on the screen.

But but before we get ahead of our self, let’s take a look at the CSS code, which is fairly extensive with this example. This uses a more traditional method of layered CSS code. We start with a “base” class called Breadcrumb, which sets the font, and a few other defaults.

Next we extend the class, to say that any <li> (List Element) that is used with a Breadcrumb class gets the additional attribute of float: left. Which lets the element float over the top of other elements.

Next we extend it further to say that any <a> tag that is inside a <li> tag should have the following additional CSS applied to it. This sets our background and font color, as well as some padding of the element, and keeps the link form displaying the underline.

Next we use was is called a Pseudo Element called after. This allows use to insert new html content, instead of just effecting existing content. In this case we are saying after every <a> tag contained inside an <li> tag, that is part of the Breadcrumb class, create this additional content. So what exactly is this code doing. Well it is creating the triangle at the end of our link, it is using a bit of fancy CSS to hide the portion that is larger than our link, and to make the two right hand corners transparent, so that the color of the next link shows through and gives us the appearance of a triangle.

If we inspect the element, we can see the after tag, and highlight it, and the element will be highlighted in the browser so we can see what is actually generated.

Next comes another Pseudo Element this time a before element. Notice this uses the margin-left attribute to offset itself one pixel from the after element, and it uses our font color. This is creating the black arrow separator at the end of our tag.

Next we need a hover element for our <li> <a> tags so that the color changes and an underline appears when the mouse moves over them.

Of course we can’t forget the also change the color of the after element so that the triangle also changes colors during the hover.

Next we use one of the CSS features that is available to use because we are using a unordered list. first-child is a selector, that selects only the first <li> tag of our unordered list. In this case what we are accomplishing is adding a bit of padding to our first link. The other links get pushed over by our “triangles” but since our first link doesn’t have a triangle in front of it, the text would be right against the edge, so 10 pixels of padding, moves it over and makes it match the look of the other links.

And now we get into some specific extensions for our Previous, Current, and Next logic. Just like the jQuery has selectors, CSS has the same selectors, so we are saying any <a> tag that has an id that starts with (^=) Previous will be selected. So this CSS is changing the colors of our previous links.

Once again we need to do the same thing to the after element so that our triangle’s color will be changed to match as well.

We do a similar thing for an id’s that start with Next. However we add two additional attributes.  pointer-events:none disables the anchor so that it can’t be clicked, and cusor:default changes the cursor to the normal arrow, so that it doesn’t look like a point and make the user think they should be able to click on it.

And a reoccurring theme, we need to also change the color of the triangle for our next links.

Since our base class is very close to our Current step colors, the only thing we need to do is to disable it, change the cursor and font color.

The last three extensions of our class all use yet another selector that is available because we are doing an unordered list, last-child, which is selecting the last <li> of our list. What these three sections are doing is removing the triangle from our final link. Both myself and the my client felt that having a trailing triangle gave the impression that there were more steps to come, so we removed it.

Mercifully we are through the CSS code for the third breadcrumb now. And you are about to find out that was the hardest part, it takes very little WebDev code for the third example, all the work is being done via CSS.

Since we are generating the HTML code on the fly, there is no WebDev controls or events to attach to so everything needs to be done on the browser, so there is no code in our server procedure for the third example.

And here is the browser code to render the third breadcrumb.

Pretty simple right! First we define the HTML code, and we are using a couple of WX features that you have seen me use many times. First defining the value of a string as a block of lines via the [ ] assignments, and second using StringBuild to do replacements for the %1, %2, %3, and %4 text in the string.

So lets take a look at the code. First we declare an unordered list <ul> that using the Breadcrumb class, that is the key to everything to all of the CSS we just reviewed!

Next we declare 4 list items <li> each uses an id we declare via string build. Notice that the href is #, which means that the target of the click will be the current page. And the onclick even is calling a function BreadCrumbClick(event). So how did I come up with that format for calling a WebDev Browser function from a link? Well I created a link in Webdev, and called the function in the browser code, inspected the element and saw how WebDev formatted the <a> tag.  Which is a hand trick to help you with HTML code when you need it.

So then I simply declare the ids as Current1, Next2, etc. based on the step number we are on. So why the 1, 2, 3, and 4? Why not just make the id’s Current, Next, etc. Well we need to know which link we clicked on. We will look at that code shortly. But first lets look at the HTML that actually gets generated in our page.

Look familar? The ::before and ::after lines are not really in the HTML, those are just indicators from the inspect element, so you can see how the code matches our the code in placed in the HTML control.

So the onclick event was running a function called BreadCrumbClick, which is a WebDev browser procedure. Lets take a look at its code.

Just like our other breadcrumbs examples we need to run both the server procedure and the browser procedure. The only issue is that we are in browser code here, so in order to run the server code we need to use AJAXExecute, which is why we AJAX enabled the ChangeStep server procedure earlier.

And this gives me a perfect place to talk about one of my favorite new Webdev v20 features. In the past the AJAXExecute call would look like this.

However with v20 they added a new constant that can be part of the call. Below is the relavent portion of the help file concerning this constant.

Prior to v20 all AJAXExecute calls behaved like the default ajaxStraightCall. Which meant that any control that were effected by the server code ran via AJAXExecute were not reflected on the browser screen. This was always the biggest difference between Automatic AJAX (AJAXenabling the server code event behind a button etc) and programmed AJAX, via AJAXExecute.  In the past I always had to use additional code and logic to get any values back from the AJAX call and effect the screen controls via browser code. Now I can just use the ajaxUpdateControls constant and not do any additional coding. Without that constant our radio button would not change when we call change step and there for the rest of our logic would not work correctly.

To me this is probably one of the biggest additions to Webdev with v20 and I am not sure it was even in the list of 920 new features!!! But I am loving it!!!!

But I digress :-). So remember we need to pass the step number to the ChangeStep function. Which is why we added the 1, 2, 3, 4 to the ids in the HTML code. We call a JavaScript function GetClickID which returns the id of the object clicked, and then we use the Right function to use the last character, the 1,2,3,4. Let’s take a quick look at the JavaScript function.

Hopefully it won’t surprise you to find out, I got this straight from a google search.

So once we call the server procedure, all we need to do is call the browser procedure the same as we did on the other links.

And that is it, as promised, there is very limit WebDev code for the 3rd breadcrumb example.

Bonus Content – Breadcrumb #4

While working on the example, it occurred to me that we could actually use the radio button as a method of doing breadcrumbs. So lets look at a bit of CSS and jQuery code to accomplish this look.

The CSS is very similar to the first two examples. Nothing really new to explore there.

/* #4 Breadcrumbs */
.radCurrentStep{
font-family:Verdana,Arial, Helvetica, sans-serif !important;
font-size:10pt !important;
font-weight:bold !important;
color:#2D2D2D !important;
text-align: left !important;
vertical-align:middle !important;
text-decoration: none !important;
background-color: #B5CBF0 !important;
-ms-border-radius:3px !important;
-moz-border-radius:3px !important;
-webkit-border-radius:3px !important;
-o-border-radius:3px !important;
border-radius:3px !important;
}
.radDisabledStep{
font-family:Verdana,Arial, Helvetica, sans-serif !important;
font-size:10pt !important;
font-weight:bold !important;
color:#C0C0C0 !important;
vertical-align:middle !important;
text-align: left !important;
text-decoration: none !important;
}
.radPreviousStep{
font-family:Verdana,Arial, Helvetica, sans-serif !important;
font-size:10pt !important;
font-weight:bold !important;
color:#2D2D2D !important;
vertical-align:middle !important;
text-align: left !important;
text-decoration: none !important;
}
.radPreviousStep:hover{
text-decoration: underline !important;
color:#FF0000 !important;
background-color: #B5CBF0 !important;
-ms-border-radius:3px !important;
-moz-border-radius:3px !important;
-webkit-border-radius:3px !important;
-o-border-radius:3px !important;
border-radius:3px !important;
}

However, the code in WebDev is slightly different than the first two examples. WebDev doesn’t give use a method of disabling specific options of radio buttons, so again there is no server code for example #4.

The browser code does introduce a few new jQuery selectors and functions. Lets take a look at the code for Step 1.

Lets look at Line 94

 

Which selects an element that has the id of RADCURRENTSTEP_1, which is the first option of the Radio Button. Can you guess how I know that? If you guessed inspect element you are a winner, if not you must be sleeping through my webinars 🙂

If we look at the inspected element we will see that WebDev generates both a <label> and an <input> element for each option.  So line 94 is adding the disabled=true attribute to the <input> tag, cause it to not be clickable.

Now lets look at link 98.

Here we see yet another new jQuery selector. In this case we are selecting any <label> tag that has the for attribute of RADCURRENTSTEP_1. And we are setting the css attribute cursor to default. Which is changing the cursor to an arrow instead of a pointer so that it doesn’t give the user the impression that it can be clicked.

And if we look at like 102.

We see a very familiar bit of code removing our three classes and then adding the appropriate class, the only difference is we are using the same jQuery select as we did on Line 98.

The other steps are just variations based on the step number, but there is a few things we should take a look at.

On line 107, we want to enable the first option and you might think you would do that by setting the disabled attribute to false or something. But what you actually need to do is remove the disabled attribute all together, which is done via the jQuery function removeAttr

And on line 111 we set the cursor to pointer, because we want the cursor to indicate that this link is clickable.

Wrap up

So there you have it, not three but four different ways to do Breadcrumbs in WebDev. But more importantly I have you have learned a bit more about using CSS and jQuery to extend WebDev and make your sites top notch.

There is plenty more CSS and jQuery examples for us to look at as we continue this series in the coming weeks, so be sure to subscribe to the blog and the Google Plus group.

Uncle Pete’s Corner is webinar series on all things WX, to watch the watch the Uncle Pete’s corner webinar that is the companion to this article, and many other WX related webinars go to the WinDev US YouTube Channel and be sure to also join the WxLive – US Communityon Google+ to get notices about upcoming webinars. On the Google+ community you will find a active group developers discussing all things WX.

[suffusion-the-author display=’author’]

[suffusion-the-author display=’description’]

• WEBDEV