Build Your Own Business Website header image

How to Convert a Static HTML Site to Thesis Part 14 – Transfer Java Script Driven Content

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we show how to transfer Javascript driven content. We start off with the multiple listing service code that we want to add to the site. We open up aspx file, copy the old html code and paste it in the new site. We also show how to customize the width and inline styling to get the site pages lay out correctly and behave the way it should.

Video Transcript

Rick: The next thing to do is to start putting in the rest of our content here. So we’ll go over to the site, just take a look at what we have here. If we just start off with this first thing which I think what we’ll do, we have this multiple listing service code that we want to add to the site. And this is actually just an iframe that is generated by the… and all the content of it is actually generated by the company that’s providing this information. So all we really have to do is paste in the iframe. So what we’re going to do is come over and take a look at the old HTML file and get the code out of there and then we’ll put it in our new site.

So let’s see, that was under tutorial sites and then Biltmore etc old site. And actually, we have to figure out which page that is, forgot to look at that. This is arcadiasale.aspx so that’s the file that we’re looking for. Arcadiasale.aspx, we’ll open up that file and then what we have is a file inclusion and that file inclusion is located in the content folder and it’s arcadia-sale.html. So we have to go… that’s where we’re going to find the code then instead of this place. So let’s go ahead and open that file up. It’s arcadia-sale in content so arcadia-sale.html. And I think we can just go ahead and grab this, copy that and paste it directly into that HTML page.

So we’re looking at our Arcadia Properties for Sale which, in this case, our Arcadia Properties for Sale down here. So we edit this page. We need to make it a no sidebars template. We’re in the HTML view. If we paste that, we probably need to do a little bit of editing. Let’s just update it and see how that turns out. Yeah, it turns out just find. It hink what we’ll do is get rid of the width because right now, what’s happening is it’s being specified. It’s got an inline width. Let’s just get rid of this inline style and see what happens. Yeah, we’ll get rid of the inline style entirely and hit update again. I’m going to guess that it fills the space that’s availble to it and… no. So let’s give it an inline width of 760 pixels then. Let’s see what happens.

So width 760… a little bit of trial and error in this kind of thing. No, that’s not going to do it because this thing actually is 700… this is actually 800 pixels wide and is insisting on staying 800 pixels wide. So what we’re really going to do then is we’re going to create some custom CSS which shifts this thing over. And… oh no, here’s the width here so we could say 760 here. Let’s try that. I was changing the wrong thing. I was changing the list above which I think we can go ahead and just get rid of and… perfect. Yeah maybe evern 760 doesn’t matter. I wonder if we can just get rid of the width. Let’s try that. Let’s try… oh no, let’s just go to 780. Let’s get rid of this inline style though. Go back to getting rid of that, we’ll make this one 780. We’ll update it, refresh it. It looks like it’s working just fine, doesn’t it?

So if we pick one of the other options you know, it’s loading information just fine. It’s laying out on the page just fine now and behaving exactly the way it does over on the other side. So now the only thing we have to do is to repeat this, right?

So we’ve got Phoenix Biltmore Properties and so that’s the biltmore.aspx. I’m not going to waste everybody’s time just doing this whole thing here but we will go take a look at one more. Let’s do it one more time just to repeat it, make sure it’s repeatable. And actually, I guess we can probably just assume that this Biltmore Sale HTML just like it was before… looks like it is. So we’ll go ahead and copy that code, come back over to the site and we’re looking at Biltmore Sale which is the Phoenix Biltmore. So we come over here to the Phoenix Biltmore and we edit the page and we use the no sidebars template, paste the stuff in HTML, remove the inline style and change this from 780… I mean, from 800 to 780. Update that, refresh it. Oh, wrong one to refresh. Let’s view that page. Okay, looks like it’s working.

So for those of you who have come in after I started, we are doing something a little different. Ordinarily, people have asked questions in advance to this class but I don’t have any outstanding questions. If you’ve got a question, please feel free to post it in the question box. Otherwise, I’m just going through this process of… I’m continuing a case study that we starte a few weeks ago which is converting an existing static HTML site to a Thesis WordPress site. And so if you’ve got a question that’s related to your specific situration or you have a question you want to ask, please feel free to post it. Otherwise, I’m just going to continue to go through this case study to fill the time.

So we’re not going to do any… all the rest of those because I’ve already… we’ve already accomplished the educational objective. But I think the next thing we’re going to do is look at how to create a complex… oh let’s see. Well, let’s take a look at this. This one’s a little bit differnet. This is the ML Sale aspx so let’s take a look at that one and see how that shakes out. Close this file, ML Sale aspx. So we’re going to open that file up, go up one level, ML Sale… MLS Sale aspx. Okay, we lok down here at the thing and it has this iframe. No… yeah, it does. It has this iframe right there. We’re just going to copy that one iframe. That’s actually even easier than the other one where it has been. Let’s see, MLS Property Search, edit the page, paste the iframe and just change it to 780. Make it a no sidebars template, update, view the page. There it is, look at that. Just dropped right in place, just like we want it to.

Okay so that’s so much for adding these iframes in.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment