Using IxEdit to Build jQuery Interactions Easily with Business Catalyst

In this tutorial, I'm going to show you how to use a tool called IxEdit to rapidly add jQuery to your Business Catalyst designs when your not a JavaScript or jQuery expert.

Friday, June 10, 2011 - Posted by Brian Lowry to Technical How-tos

Video Transcript

In this tutorial, I'm going to show you how to use a tool called IxEdit to rapidly add jQuery to your designs. I'm not a JavaScript or jQuery expert at all, but like most designers I can usually find a jQuery plugin and get it working just fine. There's another option for those of us who don't write our own jQuery and maybe there's not a need for a plugin to exist for what we want to accomplish or we want to do something slightly custom. What we're going to do in this video is create an animated drop-down subscribe form. Once you get the hang of IxEdit, you'll see that there's a lot that you can accomplish with it.

The first thing you're going to want to do is go to Ixedit.com, and you're going to download a ZIP file there. You're going to upload the contents of that ZIP file up to your Business Catalyst website. Look at the Read Me. There's going to be some code. I will show you what it looks like. It's going to go in the head of your document.

What you're going to end up with is this interface right here. You can move it around. This is what we're going to use to build our jQuery functionality. You can see this is just a Business Catalyst setup, a default setup. The only thing I've added is this subscribe box up here. What it is, is a form that's inside a DIV and the DIV has negative top positioning, so it's off the page.

Actually above this button right here is a web form. What we're going to do is we're going to set it up so that when this subscribe button is clicked, the form slides down and then the subscribe button is going to change to a close form button. When it's clicked again, it's going to slide up. That's what we're going to do. This is what we are starting with, and now let's take a look at the code.

Once you've uploaded the IxEdit files to your Business Catalyst website, you just need to include this snippet of code into the head of your template. The first part right here is just loading jQuery and jQuery UI. Then the second part down here is what you need to load the IxEdit interface. It's got a JavaScript file and a CSS file, but this here can both be deleted once you're done. Once IxEdit gives you the code for your functions, you can delete those lines. So all you'll be left with is jQuery and the functions that you created in IxEdit.

If we look at our page, we'll start off looking at the CSS. The DIV drop- down is the DIV that contains the form that I created, and it is negative positioned 254 pixels. So that's what is keeping it off the page when the page loads. I set the labels to block the text boxes to 200 pixels wide and gave them a border. The subscribe and close form links, these are going to be interchangeable. There was the subscribe link at the top of the page. That's this right here. But once someone clicks it, it's going to change to a close form link, and that is what's going to enable the form to be opened and closed. Both of these have the same styling. Then when the page initially loads, the close form is set to display none, but we're going to change that with JavaScript.

This drop-down item focus is just a background color. I'm going to set the DIVs that surround the text areas on focus to. When someone clicks inside, say, the first name text area, that DIV surrounding it is going to change colors and highlight it. It's just a good usability thing you can do on forms. It's just something else I want to use as an example of how you can easily use IxEdit to add additional functionality.

Looking at the HTML, we have our DIV here and then just the form. This is a regular Business Catalyst subscribe form. The only thing I changed is on each of these DIV class items, I added a unique class. So for first name, I called it first name. Last name, last name. Email address, email, and that's going to let me target those when I want to highlight them later. Other than that, I removed the breaks out of here and set label to block instead.

If we scroll down a little more, we can see our two links - close form and subscribe - and these are going to be what's used to control the form. Like I said, when the page initially loads, close form is set to Display None. So all we can see is the subscribe button.

The first thing we want to do is whenever somebody clicks subscribe, we want that to change to a close form button and we want the form to slide down. We're going to go ahead and click new. The event is click, so we just leave that as it is. For selector, we're going to just choose it like this and choose A - ID Subscribe, just like that.

For command, we're going to hit animate, and the DIV we want to animate is called drop-down. I can't use this button here to select it like I did last time because it's absolutely positioned off the page, so there's no way I would be able to select it. But I know what it is, so I can just type it in there.

Duration, we'll go with 250 milliseconds. The property we want to change is the absolute top positioning. We want to change that to -30 pixels. We leave delay to none, and then we need to add another reaction. We want to hide subscribe and add one more, and we want to show close form. Hit done and reload.

Let's see if I did it right. There we go. So right now this close form link doesn't do anything though because we haven't created any functionality for that. The next thing we want to do is if someone clicks close form, the form should slide up, and this link should change back to subscribe. We're going to hit new. On click, close form. We want to add an animation of DIV drop-down, duration 250 milliseconds, and we're going to set the top positioning back to -254 pixels. Then we're going to hide close form, and we're going to show subscribe. Hit done and reload and we'll test it. Everything works fine.

The next thing I wanted to do is when someone selects one of these text areas, I want to highlight the surrounding DIV. I want to go to new. For event, this time I want to choose focus. Focus is used for forms whenever someone puts their cursor inside of a text area or a text field. For selector, we're going to choose that text field. It's input first name. We are going to add a class to the DIV first name, and the class is going to be focus. Done and reload. I'm going to open the form up and select it. See, it highlights the surrounding DIV. Then I would do the same thing for last name and the same thing for email address so that as they change through the different form fields they will highlight.

Another thing I would want to do is go ahead and new, focus out of first name. I would want to remove class on DIV first name, and I want to remove focus. Done and reload. Now when I change, it unfocuses first name. Like I said, you'll want to do that for each of these also.

I'll just go ahead and show you one more quick example of something cool. What we'll do is we'll make these two forms here re-orderable. You'll be able to drag and drop them and rearrange them. If you're doing some kind of client interface or something where you want people to be able to move content around, then this is something that you could use. We'll go to on load. We want to do re-orderable, and the selector is going to be DIV enter. That's the DIV that surrounds these two forms here. We're going to use move cursor opacify while dragging and animated insertion. Click done and reload. Now I should be able to move these around. Let me try it the other way. Just like that. So there is a quick way to add some drag and drop functionality too, and it took about three seconds.

Once you get this all done how you want it and everything is working fine, you're going to go over here to this little gear icon and click deploy. It's going to give you some code right here that you're going to copy. Go back to your template, and now you can delete the IxEdit code and paste in the code you just got from IxEdit. I'm going to go ahead and apply source formatting and make it look a little better. Anyway, here's the code that IxEdit has given me. It's just this little code snippet right here. Let me refresh my page after saving it. When I refresh this, I won't have IxEdit, but my functionality is still good.

Now if we go over to IxEdit, we can see some samples on their site. Some of them aren't real practical, but it shows the power of what you can do. This one here is add and remove a class. These are all set up on click, but you could easily do this on page load. We've got change style, change value, so this changes the value of this form element. I think this would be good if you had a coupon code and you wanted to require an action of a customer to get that coupon code. Maybe have this be a Facebook Like button in a heading that says "Like us for a 10% discount." They click this and the discount shows up here. Insert HTML, each time this is clicked it's inserting another block of HTML. Slide up, slide down, animate, drag and drop, make a date picker. Make tabs, this is a pretty handy one. You can see it's just simple HTML, a DIV, with an unordered list and three DIVs inside it. Then you would want to do this on page load, but make tabs and it give this nice tabbed content feature.

There are some more examples. Check out the IxEdit website. Look at their User Guide. Play around with the different events and commands that you can set. If you create something cool, go ahead and post a link to it. I think that your imagination is the limit of what you could use this for in your designs. If you're good with writing JavaScript and jQuery already, then maybe you can just use this to save some time and do some rapid prototyping.

I hope this has been useful. Let me know your feedback in the comments below. Thank you.

comments powered by Disqus