Michael T Ganschow Green: boom alrighty then so now press record and we are recording everything for posterity Hello pre recorded people are watching this class at a later date.
Michael T Ganschow Green: Today is going to be a pretty good one here we're going to continue in with jquery a bit, but first I want to show you guys how to set up your project threes to make sure they work.
Michael T Ganschow Green: And then we will then we'll get to having fun with jquery alright so open up just shop here okay time to do a little screen sharing.
Michael T Ganschow Green: And let me know okay cool, so let me move you guys over so I can alright so i'm going to grab our class files.
Michael T Ganschow Green: When copy paste them so we're gonna go copy.
Michael T Ganschow Green: paste based item alright so.
Michael T Ganschow Green: i'm going to name.
Michael T Ganschow Green: This guy here project to.
Michael T Ganschow Green: With a space even moon capital letters now naughty of you, yes, yes indeed, and we're gonna get another duplicate here so we're going to.
Michael T Ganschow Green: duplicate this project to copy and call that project that we.
Michael T Ganschow Green: were going to pretend that these are my project to and project three yeah.
Michael T Ganschow Green: So how do I want you to put project three online well file zilla here we'll go back into it in a second.
Michael T Ganschow Green: Hopefully, let me in via ftp I accidentally left file zilla open from this afternoon.
Michael T Ganschow Green: And I found that that seems to be the trigger point and what causes a lot of the server bounce backs, but even if it does i'll at least get you through some basics here so i'm.
Michael T Ganschow Green: pulling up your project three so for your project and project for.
Michael T Ganschow Green: i'm going to want those to be in separate folders within your student folder so rather than overriding your project two files and your project one funnels.
Michael T Ganschow Green: I would like you to leave your project to where it is and put your project three up as a separate folder then i'm going to ask you to link your project to to your project three.
Michael T Ganschow Green: Because your project to is intended kind of as a starting point and if they click on your name and they can go in and they can see other projects you're working on things like that so.
Michael T Ganschow Green: I want to make sure that your project to is still available for everybody to see when they go to your name, and that also they can find your project three so today is going to be all about well this first half hour 45 minutes or whatever is going to be all about folder organization.
Michael T Ganschow Green: So let's crack open my project to here, which is just all my class files that i've been playing with.
Michael T Ganschow Green: And look at that they even have working graphic zip files how adorable let's throw that in the trash let's also throw the one in the trash out of brunswick three two I don't want to confuse you guys too much so to do that alright so everybody's in the trash.
Michael T Ganschow Green: trash bye bye bye bye alright so.
Michael T Ganschow Green: project to end project three so you got your project to root folder here, although I suspect, most of your project tues probably have fewer html This is one thing that I.
Michael T Ganschow Green: noticed with a lot of you guys and I want to just reinforce it and make sure you guys remember it is to make sure that on both your project to and your project three the homepage on each of them should be index now.
Michael T Ganschow Green: This is part of the reason why I want you to keep them in separate folders because if you have to homepages named index, and they try and share root folder.
Michael T Ganschow Green: One of them is going to overwrite the other one you merge the two things together, so I want to make sure that you have two different indexes yeah so.
Michael T Ganschow Green: here's what i'm going to have you guys do to put your files up and to prep everything to be ready to go okay.
Michael T Ganschow Green: I don't want to be you're continually tinkering on your project tues which is awesome that's the whole point I wanted to give you guys kind of a little sandbox that you can play with and throw your files up and down but.
Michael T Ganschow Green: For this year i'm going to mandate to to tinker with your project to snap So here we go.
Michael T Ganschow Green: So let's let's join these two so we got project to hear right.
Michael T Ganschow Green: So what i'm gonna do is i'm going to make a copy of my project three i'm not going to.
Michael T Ganschow Green: i'm not going to.
Michael T Ganschow Green: drag and drop it the original i'm going to make a copy of the root folder because there's a couple of things we need to do to it that might break your site root or cause consternation.
Michael T Ganschow Green: If you just drag and drop your file in dreamweaver so make sure your project three is done.
Michael T Ganschow Green: Before you do this shocker I know, make sure the project's done for you put on, I know, but still make sure it's done for you do what i'm about to DEMO so we're going to copy project three here copy and then i'm going to paste project three into my project to root folder okay.
Michael T Ganschow Green: Now.
Michael T Ganschow Green: Some of you may notice that this project three is actually not going to work as is and that's correct there's a couple of things we need to do to make it work before we are good to go okay.
Michael T Ganschow Green: So first things first this name will never work on the web it's got capital letters and spaces in it, so we need to.
Michael T Ganschow Green: tamp it down a little bit so that it becomes web compliant So the first thing i'm going to do is make my project three.
Michael T Ganschow Green: web compliant now you guys don't necessarily some of you may have already have your folders names in a web compliant way and can skip this step just make sure that you.
Michael T Ganschow Green: That you if you do not that you take your copy of project three and make sure that yet is all set and ready to go.
Michael T Ganschow Green: Again, simple working graphics folder here to for project to move, I think I got a little frisky with my delete So if you have your.
Michael T Ganschow Green: Your project three folder all set, then we got one more step and one of the reasons why I wanted you guys, to make a copy rather than put the whole thing.
Michael T Ganschow Green: Is for your working graphics folder on your project or you notice I double clicked on the project three folder so suddenly bang we're in project three.
Michael T Ganschow Green: Is isn't once you guys to compress IE make a zip file or a set file doesn't matter which I can open both of them.
Michael T Ganschow Green: So i'm going to compress and make a zip file of my working graphics folder i'm going to call that working graphics folder working graphics underscore p3 are working graphics dash p3 pardon me much like I did working graphics P to here with my project to.
Michael T Ganschow Green: Make sure to do it just separate them out basically.
Michael T Ganschow Green: Alright, so with that being done, I can now delete my work and graphics folder because I don't need to work and graphics folders to put online so to move that thing to the trash find her empty trash.
Michael T Ganschow Green: yeah are you sure you want to you, better believe i'm sure I want to so now i've got this duplicate project three.
Michael T Ganschow Green: So there's a couple of things that I need to do yet before it's ready to go first things first is, in my project three here, I need to double check that the homepage is named.
Michael T Ganschow Green: index Okay, the double check that it's named index I also double check that my project to homepage is named index.
Michael T Ganschow Green: A lot of you are having trouble when you put two files up into like Michael one wanted show.
Michael T Ganschow Green: Why don't mind file show why why why why why why why don't think show well, the reason why they weren't showing is because.
Michael T Ganschow Green: You had your homepage named after you or named project to or named whatever you have to have the page you want to show up first in the browser named index also a lot of you in trouble, because you put project to up in a folder.
Michael T Ganschow Green: And I told you, no, no project to sits loose leaf now i'm going to change all that up project to should continue to sit loose leaf, because when you click on your student folder you want to be able to go there.
Michael T Ganschow Green: But the other your other projects are going to sit and folders so your instinct, to put it in folders was right, I just didn't lose that on project to in fact it's counterproductive on project to the rest of them, yes we're going to put them up as folders one, at a time so.
Michael T Ganschow Green: That being said, so you've double check that everything is indexes you'd have to indexes one in your in your project to folder and one in your project to refolded i'm.
Michael T Ganschow Green: All right now what i'm going to do is just our quick modification of my project to index, so that it will talk to my project three i'm actually going to point it at one of my other pages in my project three just so it's obvious when the change happens.
Michael T Ganschow Green: When we go in so.
Michael T Ganschow Green: To do that i'm going to open up my index dot html for my project to route Hello dreamweaver look at this ugly thing.
Michael T Ganschow Green: This is actually not too ugly and it's got some links and buttons and such in it excellent excellent so i'm going to take one of my DEMO links, like the big Michael word here and i'm going to turn it into a link to my project three okay.
Michael T Ganschow Green: So.
Michael T Ganschow Green: If you're doing this on the project to root folder the link will be pretty easy if you're just throwing this in like I am here and setting it up still not too bad okay.
Michael T Ganschow Green: So here's how you point a link into your project three so let's just say, instead of all work and no play makes Michael adult boy let's say all work and no play makes project three adult boy.
Michael T Ganschow Green: There we go project three is now done boy excellent alright, so the link to project during is pretty easy, so what I gotta do is I just gotta grab the folder name so for example here project three empty GG there it is.
Michael T Ganschow Green: dreaming release, please, thank you.
Michael T Ganschow Green: And I copy and just a folder name because we're linking locally, I don't need anything else okay.
Michael T Ganschow Green: And then I go slash and I put in the file on want this to link to for you guys, you probably want to send it to your homepage on project three index dot html.
Michael T Ganschow Green: For me i'm going to set it up to go to ugly dot html just so you guys can see the DEMO change Okay, so your folder name and your index file.
Michael T Ganschow Green: Save and i'm gonna crack this open in a browser.
Michael T Ganschow Green: Hello index let's see if your link works all is a good idea to crack these guys open in a browser chaka chaka here we go back to access okay.
Michael T Ganschow Green: All right, so there's project three is a dull boy, and if I click on it boom it goes to my ugly notice it's in my project three page already tree okay cool cool beans we're ready to go okay so.
Michael T Ganschow Green: What I did the whole process Okay, is, I made a copy of my project three root folder and paste it into my project to root folder.
Michael T Ganschow Green: I then took my project three root folder and made the name of the folder web compliant no spaces, no special characters no capital letters and.
Michael T Ganschow Green: Then I went inside my project three folder and I zipped by working graphics folder naming it working graphics project three or p3.
Michael T Ganschow Green: Whatever to indicate it deleted the original Working graphic folder so I wouldn't have to put up to work and graphics folders.
Michael T Ganschow Green: Also there's make sure by zipping this that it will break any links that you might have that are pointing at your working graphics folder so you can test drive those when you throw this thing up online.
Michael T Ganschow Green: And now we're ready to put all of this madness online okay we're ready to put it online so before I put this online do we have any questions.
Angela Gutierrez: hey Michael for a project to you said to keep it loose and what do you mean by that.
Michael T Ganschow Green: are not in a folder so so basically it's sitting in your student named folder but it's not in a folder within that, because what will happen is basically if you've got it in a folder within that when you go to the.
Michael T Ganschow Green: The main website and click on the on your name it's zoomed out for things so we're going to see it, a tiny resolution.
Michael T Ganschow Green: So when you click on your name it'll tell you that this is forbidden, when you go here, because what that means is that.
Michael T Ganschow Green: dreamweaver has gone to the link notice it just goes to your name and it can't find anything else it can't find an index file.
Michael T Ganschow Green: So when it when it when it does that it let it lists the folder is forbidden, whereas if you put it in a folder the actual link is not just your name, it is your name slash your folder.
Michael T Ganschow Green: And then I see how it goes for see it goes like that, when I go in there because there's no your folder and no index so.
Michael T Ganschow Green: The reason why I want you just to put your project to outside of a folder in your.
Michael T Ganschow Green: Student folder is to make sure this link works basically kind of a test to make sure this link works and also.
Michael T Ganschow Green: When you get servers have your own and you go to put your files up you don't put all your files up in a folder in the main html filters.
Michael T Ganschow Green: Because then your website will break and you're like, why is it broken Michael you lead me astray Michael none of this works, you were a liar head no not a liar had you just put the whole thing up in a folder.
Michael T Ganschow Green: Now all of that all of that hard work of getting that idea in your head is completely blown out of the water now because I want project three or in some folder so sorry to be the bearer of confusing news, but when you have multiple file sets like this, this is, I do.
Angela Gutierrez: Okay, so i'm just because I wanted to resubmit my project so i'll just be submitting it in the file zilla like individual pieces.
Michael T Ganschow Green: actually here i'll show you where you submit it okay so.
Michael T Ganschow Green: We hang on one second will continue to the DEMO and i'll show you where to submitted assuming ftp decides to work today I realized that I had left my final zilla open.
Michael T Ganschow Green: And so we may have an ftp rejection, in which case I get to talk you through it, so I would have cracked file zilla open.
Michael T Ganschow Green: And you know what you know what I am just going to use the student access because, why not so we're going to go home and we're going to go ftp files alone we're just going to start grabbing things so boom we go to file zilla we're going to go GR C 175 dot net firms.com and then username.
Michael T Ganschow Green: gic 175 students.
Michael T Ganschow Green: Come back out here, Bob and then we're gonna grab that password hey hey no no that's Why make sure you got that thing I think I got everybody we're gonna find out in a second.
Michael T Ganschow Green: Bob let's even let me in critical error could not connect to server oh Goody, let me just double check that I got the password right.
Michael T Ganschow Green: And then it's and then, otherwise I get to talk you through it hang on one, second, let me clear you guys up to the top of my browser and we're going to go, yes, yes, I am aware, I know you're looping at me one minute so we're going to go spring.
Michael T Ganschow Green: GR C 175 exclamation point and did it like I missed the passwords i'm not good at likes me Okay, so when you so you're talking about putting up your project too right so.
Michael T Ganschow Green: When you're putting up your project to.
Michael T Ganschow Green: chat out of the way here real quick so when i'm going to put up your project to he come in here and.
Michael T Ganschow Green: You Double Click on your name and then basically instead of dragging and dropping an entire folder I want you to.
Michael T Ganschow Green: Basically, to grab everything that ain't your uncompressed work and graphics folder and the project three and toss that up in your name, so you basically just grabbed all your files and you go boom so it's not like a one, at a time deal, you can do them as a group, if you want.
Michael T Ganschow Green: But but base so here i'll put i'll put this guy up minus my work and graphics P to folder so it doesn't take friggin forever.
Michael T Ganschow Green: hey don't unclip Michael.
Michael T Ganschow Green: hi yes, thank you, thank you for putting up a DEMO in another desktop I appreciate that I really do.
Michael T Ganschow Green: But we're going to grab all of this and that and i'm just going to put this these up because well there's there's not a lot of size of these, so we can.
Michael T Ganschow Green: Know everything's already ready to overwrite yes always apply this action, apply to the current Q, thank you.
Michael T Ganschow Green: And boom overall yeah that's right all is applied to the current queue now well now it'll actually not yell at me okay so then it basically runs your files up for your project, too, so if you haven't put up your project to this is what you do is just kind of dump it in your folder.
Michael T Ganschow Green: loosely if you don't put up another folder okay.
Angela Gutierrez: Thanks, we thank you.
Michael T Ganschow Green: Not a problem, not a problem.
Michael T Ganschow Green: Now we'll come up with putting up your project three so.
Michael T Ganschow Green: The for project three, the only project two files, you will need to put up before you put your project three up are those that you have modified with links to your project three now for most of you, you built one pagers can one pagers so that means that you're you're.
Michael T Ganschow Green: you're likely only putting up a single html file, if you have more than one html file and they have links to these projects, then you need to put those up but.
Michael T Ganschow Green: The good news is you only have to put up those files you've changed you don't need to go and put the whole site up every time you make a change.
Michael T Ganschow Green: So you just put up what you've changed so, for example, if you made CSS edits you could go into your CSS folder and just put up that random CSS into your CSS folder here.
Michael T Ganschow Green: um, but what we did was we just made a change to our index, so the only file i'm going to put up right here thing is my index, yes, I would like you to overwrite and there, it goes boom overriding that okay.
Michael T Ganschow Green: Then there's one other folder I need you to put up and that is your project three.
Michael T Ganschow Green: So you take this whole project three folder right here, and you just dump it in the as a folder not as individual files, but put up your project three folder is drop it in your project to so that you'll have this.
Michael T Ganschow Green: This project three folder going in and this is take a bit because this one's going to put up its.
Michael T Ganschow Green: Its file here, but basically what this will do, then, is, you will have your project too loosely and your project three in a separate folder now we'll give it a minute to put everything up here so that it works properly when i'm DEMO it.
Michael T Ganschow Green: So does anybody else have any questions well this thing is going up here do you put your project three up in a separate folder that thing you wanted to do with your project to.
Michael T Ganschow Green: Put your project three at that way to make sure the separate folder is like web naming Convention and you're solid.
Michael T Ganschow Green: chug chug chug chug chug chug chug let's see it's continuing to load air goes but we're almost done because my root folder is relatively small 20 megs.
Michael T Ganschow Green: That delete delete delete delete the city and there goes.
Michael T Ganschow Green: All right now, then, because my stuff is loosely here.
Michael T Ganschow Green: I can go and I can oh come on sugar on ftp hang yes yay there we go everything is up okay now if I want to go find it.
Michael T Ganschow Green: Where.
Michael T Ganschow Green: Air you are not you, you Thank you i'm going to my student folder Hello student folder.
Michael T Ganschow Green: And I can go click on me there I am my project three is adult boy you guys I click on that bang now we're in the project three and notice see this link up top here.
Michael T Ganschow Green: notice this project three folder here, so if you do it properly, it will go to project three index.
Michael T Ganschow Green: And then you will now have what's the should give me a version of my other index there it is tough to just Michael.
Michael T Ganschow Green: This link right here is the link you post on the forum, because that's the link to your project three homepage so once you've uploaded your site and checked it to make sure it works.
Michael T Ganschow Green: You can click on it and it pops up in a browser and it has all of its files up and it's got it working graphics up yada yada yada you are ready to go, then you can copy paste this guy into a forum post and roll yeah.
Michael T Ganschow Green: By the way, the things you guys are doing with your project threes are really cool but, judging by the questions i'm getting and the files i'm being sent to have looked at you guys are.
Michael T Ganschow Green: You guys Roland very cool I like it so project to sits loose in your student folder project three in a folder of its own.
Michael T Ganschow Green: questions.
Though I don't know that.
Michael T Ganschow Green: So I think everybody gets the project three process right, I will DEMO this again.
Michael T Ganschow Green: On Thursday, for those who the open lab on Thursday, for those who missed it this time around.
Michael T Ganschow Green: This class should finish cooking sometime tomorrow so i'm probably probably i'll put it in probably later tomorrow night.
Michael T Ganschow Green: i'm going to be at work quite late helping out people with various zoom meetings, so it should be it's probably going to be eight or nine at night when I finally get around to putting it up, but this recording will go up with project three installation instructions so.
Michael T Ganschow Green: hope everybody has a good project three.
Michael T Ganschow Green: Now.
Michael T Ganschow Green: This next.
Michael T Ganschow Green: This next one's pretty interesting okay.
Michael T Ganschow Green: So let's go and set dreamweaver up and get it all hooked up where we left off because yeah that's that's that's an odd one there we go alright so let's go get dreamweaver set up with.
Michael T Ganschow Green: Where we were so let's go to.
Michael T Ganschow Green: Did I delete it.
Michael T Ganschow Green: cheers see 175 that's 275 where to go it was like each artist haha I knew I had a root folder floating around here somewhere found it alright so where we left off boo boo here we go that's where we left off was with our lovely little slideshow here now.
Michael T Ganschow Green: For those of you who left a little early when you last left home get this open.
Michael T Ganschow Green: When you last left us, I was having a little trouble with the slideshow getting it to size properly.
Michael T Ganschow Green: So it turned out that the and then we I like that color.
Michael T Ganschow Green: Beautiful just just gorgeous yet the chat window down from the top, there we go shrink it a little bit there we go.
Michael T Ganschow Green: yeah look at that background color Okay, so when I asked you guys were here, I was struggling a little bit with the slideshow container.
Michael T Ganschow Green: And let me see here, did I added into the main there did okay so.
Michael T Ganschow Green: there's not much really to this thing as a body style light box list style a couple of others Okay, so what I found out was if you start looking for percentage whips it doesn't really listen to them.
Michael T Ganschow Green: As I put in my notes in here, so let me, let me take this out so regardless of what percentage with you put in on this guy.
Michael T Ganschow Green: Go he will just MAC size, regardless of what you want your your your your you don't really don't really count to this one.
Michael T Ganschow Green: Is it just kind of gets bigger so one of the things that needs so it doesn't completely go.
Michael T Ganschow Green: ape is make sure that as a Max width on it, because doing that way it has a final point to go to now this thing will shrink.
Michael T Ganschow Green: As the browser size gets small enough, and then it will stop at a certain point, so if you if you're worried about sizing it to be smaller than the browser window.
Michael T Ganschow Green: you're probably going to have to do a Max width at some point on it, I can be fairly large to a few thousand pixels or whatever, but um but you, but in order to get it to see a lot of other things that's to see that.
Michael T Ganschow Green: So turn out that's what fixed at the Max width now works yeah yay or something.
Michael T Ganschow Green: So I do have a one of you issued me a pretty dang odd request out of my ways in chrome Thank you.
Michael T Ganschow Green: So.
Michael T Ganschow Green: So yeah.
Michael T Ganschow Green: Okay, all right hang on so.
Michael T Ganschow Green: So okay so somebody asked if they could put a background image in in the.
Michael T Ganschow Green: In for the lightbox overlay this pink thing right here.
Michael T Ganschow Green: And I they asked it literally like three o'clock this afternoon, I have not had a chance to test this, so I am going to drop in a background image back here and we're going to see what happens with this thing.
Michael T Ganschow Green: Just to see if it works, I want to test this before we go on and we put in animate on scroll behaviors okay.
Michael T Ganschow Green: Alright So here we go.
Michael T Ganschow Green: i'm going to turn on the capacities is running back on and i'm gonna take out the background color.
Michael T Ganschow Green: And then i've got to blow my nose.
Michael T Ganschow Green: Apologies didn't want to blow your ears out.
Michael T Ganschow Green: Okay, so all right let's.
Michael T Ganschow Green: let's let's let's put on.
Michael T Ganschow Green: let's put in a background in on this light box and see.
Michael T Ganschow Green: What this gets us light box overlay let's go down here and let's add it.
Michael T Ganschow Green: I want to see if this, I want to see if this works or not i'm not yet tested this you guys, so I mean no no claims here so let's see so we just we just.
Michael T Ganschow Green: We already used evil duck duck will stick.
Michael T Ganschow Green: don't have much else do we so let's stick.
Michael T Ganschow Green: Well, put evil twin he's got a nice dark background we could put bad Homer on there too well just put a nice evil decades evil twin background image let's do this works, I am honestly curious if this works we're going to go save.
Michael T Ganschow Green: No fresh.
Michael T Ganschow Green: yep like that we have jocks went in the background fan fantastic so whatever genius out there, decided it was a good idea, possibly to put a background.
Michael T Ganschow Green: On this thing, yes, yes, you can do it so for those who those who would like to do you have an idea for your light boxes, if you want to use a light box and you want to set the thing up well there you go we're gonna go Center Center.
Michael T Ganschow Green: background attachment fixed so it's a giant deck and let's try this again damn.
Michael T Ganschow Green: it's too small, no I forgot to put cover got to put cover you guys cover cover cover so we got to do background size cover yes ducks everywhere, here we go legos always wanted this here we go yep there it is it's a giant semi trains.
Michael T Ganschow Green: So yes, congratulations, whoever idea that was I, yes, you can you can absolutely do this i'm gonna comment this out, though, because this is terrifying.
Michael T Ganschow Green: And i'm gonna i'm gonna replace it with a suitably terrible color anyway so let's see if you're crazy enough to the link here, if you are crazy enough.
Michael T Ganschow Green: Oh, Michael they're not going to recognize that they will now, you can.
Michael T Ganschow Green: Actually it's probably should be more as can foot in a background image.
Michael T Ganschow Green: On comment below for hilarity.
Michael T Ganschow Green: And i'm gonna throw the filter in pasadena hi.
boo boo boo.
Michael T Ganschow Green: that's awesome so bravo you crazy genius whoever asked that question if you're designing demands the uni you to me a an image in your.
Michael T Ganschow Green: In your pop up well there you go there's your answer it works it works you lunatic all right let's put a background image and background.
Michael T Ganschow Green: color I think i'm going to remix my color and do a bride flaming orange it's gonna be so orange you won't even know what hit you but it's gonna be a little more transparent bang bang bang.
Fresh.
Michael T Ganschow Green: Do cool hey it's not an orange look at that action, no better looking than it was before.
Michael T Ganschow Green: i'm sure I have one other thing that i've gotten consistently asked enough of that I was a little surprised at so.
Michael T Ganschow Green: One of the things you can do with CSS no no that's not the right.
Michael T Ganschow Green: that's a chrome in another desk.
Michael T Ganschow Green: I want you Okay, so I don't know if I guess I didn't show you guys this because of all the questions i've gotten about it, but it might help some of you, with your project threes this might be that last little click thing you need to work on your project reese, and that is the fact that.
Michael T Ganschow Green: That you can do multi columns.
Michael T Ganschow Green: With CSS.
Michael T Ganschow Green: So you can actually add multiple columns like so to a to a div tag or to any tag really find one of our demos Oh, I know I think I showed this to you, but.
Michael T Ganschow Green: But I got enough questions on it, I was not sure to do we do it on ugly he had multiple columns I think he might have double check this real quick.
Michael T Ganschow Green: Doo Doo Doo there is all right double checked and I make him oh it didn't make him have multiple columns well I think he's time for him to sprout multiple columns like he's a newspaper or something okay.
Michael T Ganschow Green: So you can actually add columns to your CSS without using multiple div tags in your body copy, so you can use one tag that as your body copy in it, for example.
Michael T Ganschow Green: Our article tag here Okay, but you can add columns to it where's my article.
Michael T Ganschow Green: figure out there, it is aren't you can add columns to it and it's just a simple as a column count properties, we can come in here we go.
Michael T Ganschow Green: kind of count I love the split into two, why not, and as soon as I open this thing up in my browser would suddenly look at that two columns like a newspaper.
Michael T Ganschow Green: And we can we can have all kinds of fun messing around with it, we can increase the column gap between the columns on we like, so I can go I can go home.
Michael T Ganschow Green: And he used anymore.
Michael T Ganschow Green: column gap, we can use any.
Michael T Ganschow Green: News any measurement for your column gaps so we'll do 30 pixels and I might do more, so what this does is it increases.
Michael T Ganschow Green: The it it's called column gap in CSS in a page layout it's called gutter basically the distance between your columns bang there you go yeah.
Michael T Ganschow Green: So I think you're done I got I don't know seven different asks about this over the last week so figure to go over it now.
Michael T Ganschow Green: You can also add a column rule that's this little line and where are we here, it says little line that goes between the columns so i'm gonna why, because I can so i'm going to go column rule.
Michael T Ganschow Green: And we can go oh there's all kinds of things we can go Oh, can you would then a shorthand on here they added a shorthand they added a shorthand they change rules it didn't used to be a shorthand you guys used to have to do our common rule.
Michael T Ganschow Green: color and width and type.
Michael T Ganschow Green: sort of like used to have to do we have borders, and then they made borders, a shorthand and now they've made this a short in oh excellent OK cool so this works basically like borders, so I can go column rule is to put a line in the middle solid.
Michael T Ganschow Green: One pixel.
Michael T Ganschow Green: One pixel salmon.
Michael T Ganschow Green: And now for some terrifying reason in between my columns.
Michael T Ganschow Green: hey what up is a salmon line Oh, I need more I need more gap on a more gap you guys let's go 50 pixels on that gap.
Michael T Ganschow Green: Oh yeah there you go there you go now they're looking like newspaper columns my home or should be like a dotted portrait like he's out of the Wall Street Journal or something.
Michael T Ganschow Green: So, for those of you that did not previously know about columns.
Michael T Ganschow Green: I hope this has been enlightening I got like I said I got a ton of questions about these apparently you guys are all building websites, right now, for some reason, who knew.
Michael T Ganschow Green: And so I wanted to make sure you guys knew them while you're still kind of polishing along on your project threes so that is multi column text out that proved in lightning anyway any questions on it, or on the project three or on putting a damn image behind your behind your light boxes.
Michael T Ganschow Green: Alright slick okay jokes so so.
Michael T Ganschow Green: it's got some more fun I like media queries media queries I like jquery because they give you so many different avenues to explore.
Michael T Ganschow Green: In fact.
Michael T Ganschow Green: There was an entire g.
Michael T Ganschow Green: No, we didn't want the download I want the regular jquery Thank you there was an entire ui library that's a whole separate download we played with this a lot in.
Michael T Ganschow Green: GR C 275, but if you want to play with it, it gets you all kinds of things up to and including where are we where where's the word we go I hear you go sorts of widgets.
Michael T Ganschow Green: Make CSS based buttons where's the tabs I go boop tabs you can do tab based.
Michael T Ganschow Green: Essentially content organization, you can use sliders sliders are all not that kind of slider.
collapsible.
Michael T Ganschow Green: I moved them to do these things, all these things are just get a here we go accordions moved it yeah So here we go, so this is again another content organizer.
Michael T Ganschow Green: and
Michael T Ganschow Green: They have the page source right here, and the page sources just a series of H threes and div tags and then there's a.
Michael T Ganschow Green: there's their script linked it put it in the head that's bad, it should be down at the bottom and a little initialize are very similar to the initial Iser we used on our slideshow now.
Michael T Ganschow Green: Just basically anything with an idea of accordion was the idea of accordion notice the hashtag ID right here anyone an idea of accordion throw the accordion behavior on which means lip it into then.
Michael T Ganschow Green: Alright, so all kinds of fun with jquery we play with the ui a little bit a little bit you know more than a little bit in 275.
Michael T Ganschow Green: But here we go i'm going to throw it in here in case any of you guys wants to mess with it.
Michael T Ganschow Green: Because it's actually not horrendous if you read through the directions and you played with a couple of other jquery as you plop that things library in you link it and then you go.
Michael T Ganschow Green: To add some other things like I said we'll play with that in 275 because today, what I want to do what I want to do is, I want to add some animate on scroll action animate on squirrel.
Michael T Ganschow Green: We go to library dares the library I want I want us to make some of this some of this happen, some of this do you see all of this, you almost have to make a noise work properly.
Michael T Ganschow Green: alrighty.
Michael T Ganschow Green: animate on scum role, and then a little initialize are on it so let's do that so we're going to go into github so I go get everything get get it.
Michael T Ganschow Green: All right, let's go get some things so me code now as we remember from last class when you're in get hubs and there's million of these get hubs, this is a.
Michael T Ganschow Green: programmer social media here, so they can show various little applications that each other and get feedback on it and then yell at each other, like any other social media.
Michael T Ganschow Green: And a lot of projects like this that use.
Michael T Ganschow Green: That use jquery and other external scripting frequently you'll be going into get hops to get so to get it, I click on this Green a download button and download zip.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Let me minimize this out of my way zoom chrome you're hiding things again thank you minimize you minimize you.
Michael T Ganschow Green: were going to go and close you because you terrify me leaving you all open too long and we're going to close your project to I don't want you, I want the original the real one GR C 175 class files and I can put online there, they are.
Michael T Ganschow Green: And i've also gone ahead in the downloads downloads and i've downloaded typically boo I have downloaded the animate on scroll.
Michael T Ganschow Green: of which he has quite a lot so we've got this nice little DEMO here who's got all kinds of things whoo all sorts of things by the not doing anything is broken okay so we're gonna get rid of you that's, not even the right place alright so let's go get some stuff here so.
Michael T Ganschow Green: transcripts high.
Michael T Ganschow Green: psychosis i'm gonna get here.
source.
Michael T Ganschow Green: Would you got I.
Michael T Ganschow Green: need any.
Michael T Ganschow Green: Okay, so let's see here cycles.
Michael T Ganschow Green: he's going to new things and all right so.
Michael T Ganschow Green: I.
Michael T Ganschow Green: went to grab, let me just see just double checking his library installation see read me to do I towards the stable version So there we go he's going to AOL dot CSS style sheet, so you add the styles and the head okay could have fooled me it sees that in here.
Michael T Ganschow Green: Hopefully, where did you get it boy let's go where did he say it is because this is an odd place alright unpacking Ls.
Michael T Ganschow Green: And js.
Michael T Ganschow Green: cool so.
Michael T Ganschow Green: let's get it going so he's changed a few things here, since I was last in here somewhere.
Michael T Ganschow Green: Where.
Michael T Ganschow Green: it's got some server side stuff.
Michael T Ganschow Green: To put it as SAS and not se es es you tricky tricky but.
Is this it.
Michael T Ganschow Green: I think, so all right.
Michael T Ganschow Green: yeah but it's got body styles and stuff in it, what are you doing hanging out in that moment of confusion here that a minor lecture explosion chewed let me go grab it elsewhere.
Michael T Ganschow Green: Okay, let me try something so this may not be just the same download link and let's see here.
Michael T Ganschow Green: Ah, look at that oh you trixie hobbit you put a different one oh you tricks the hobbit you put a different download on his github now then his main one, look at this as master yes.
Michael T Ganschow Green: Yes, yep, this is a whole different deal you little mm.
Michael T Ganschow Green: hmm okay so remember all that that I was telling you about going into his github and getting everything yeah, no, no, no, it looks like he put a different download link on the website then his on his github links let's go.
Michael T Ganschow Green: let's go copy link copy link address there it is and i'm going to dump this in the chat here, so now that I have suitably embarrassed myself once born in front of you guys here comes the, this is the actual link where it lives as master.
Michael T Ganschow Green: Okay, good, this is the good one, it says, all the bits and pieces, I was like where's all the stuff when I was pulling it.
Michael T Ganschow Green: Out of his his github so I see you, you trixie hobbit alright so let's add some things here so i'm going to the dentist ah there it is ALS je s at AOL dot SEC.
Michael T Ganschow Green: dot CSS sweet Okay, so this installed that's why I was so confused because isn't stuff very straightforward First things first we're going to our CSS folder and we dump in our AOL dot CSS boom there, it is now what's in here well.
Michael T Ganschow Green: This is all the animations look at all this, this is a magnified style sheet, by the way, magnification if I haven't talked about it before is removing all the space.
Michael T Ganschow Green: Out of a document, this is not a development document, this is a final one that he did that he did all these all kinds of removal on and so it's all crunch, together, have fun reading that one if you feel like it.
Michael T Ganschow Green: So let's.
Michael T Ganschow Green: Open anymore, because people will find you terrifying to look at so do the AOL dot CSS in my CSS folder will link that later and then i'm going to throw the AOL dot J s inline scripts folder will grab that guy later oops you dreamweaver me at the other browser so.
Michael T Ganschow Green: Once you get these installed you link the styles you link the style sheet up at the top and the style sheet act is actually what has the animations on it okay.
Michael T Ganschow Green: And then you link the West below and the ALS has the triggers alright so.
Michael T Ganschow Green: So, again don't use github apparently is get out as a different file link So when I go to here and I click download it doesn't give you the right one, is I just found out in front of all of you people so.
Michael T Ganschow Green: What what you're going to have to do is click on this button right here and that'll get you a copy excellent great awesome alright, so now we can we can start hooking this thing up to our lovely script DEMO page here.
Michael T Ganschow Green: don't think I won't don't think I won't you guys i'm totally gonna hook things up here okay.
Michael T Ganschow Green: let's do it so we're going to go here we're not using ugly we're going to use our slideshow yay i'm going to go back to the source code.
Michael T Ganschow Green: And we gotta hook a few things up here so we're gonna hook up another CSS you guys should be a little familiar with this by now, after last week's lecture.
Michael T Ganschow Green: So we're going to do that again, though, and because i'm lazy I am simply copy paste one of my clinics and change a few things.
Michael T Ganschow Green: So again, these are CSS links link H ref CSS slash whatever the name is and then after that we have attributes of a realm style sheet and type text slash CSS to important browsers what exactly is going on here what incarnation.
Michael T Ganschow Green: So the name of this CSS is a s that CSS so I put in a link to a s dot CSS, and I say this controls the animation.
Michael T Ganschow Green: of our in in May on scroll boxes we're gonna make a couple of boxes boxes put him down at the bottom and throw any made on scroll behaviors on him yeah.
Michael T Ganschow Green: All right now let's get the scripts in place here hi need to add another script Hello we're going to add another script link a script link.
Michael T Ganschow Green: This is called ALS js there it is this control this script controls.
Michael T Ganschow Green: Our.
Michael T Ganschow Green: enemy on scrolls and then I gotta run in initialize or put it after this guy so let's grab the initialize from his thing here, where it is a steal his initialized her that goes high your copy paste the initialized her right after this and i'm going to throw a comment on it.
Michael T Ganschow Green: tab.
Michael T Ganschow Green: This script.
Michael T Ganschow Green: This script visualizes.
Michael T Ganschow Green: intimate on scroll.
Michael T Ganschow Green: hey view.
Michael T Ganschow Green: So nothing we haven't done previously and last class go and grab things and add them.
Michael T Ganschow Green: So we don't have an ALS js script linkedin we now have an AOL dot CSS style linkedin up at the top, and we now have an initialize you're down here at the bottom now.
Michael T Ganschow Green: Well, I do anything else i'm going to test drive this thing in a browser to see if I have broken things.
Michael T Ganschow Green: Fresh and everything is working just tiddlywinks at leave see if the stay up there goes slideshow works.
Michael T Ganschow Green: The pop ups work cool so now i'm going to put a couple of boxes below the slideshow then i'm going to add some of these eight o s attributes to and much like the.
Michael T Ganschow Green: Much like low caches lightbox this thing is added to things with attributes okay data dash ALS is the primary attribute.
Michael T Ganschow Green: But if you look at this documentation which is actually it is you know, there are a few other things as well we're mostly just going to use the data that.
Michael T Ganschow Green: The that data dash a 's, but there are others, you can use as well offsets delays durations easing years blah blah blah blah blah blah will.
Michael T Ganschow Green: i'm not really going to go over those that's all CSS animation stuff and we cover CSS animation in GR C 275 for those who wish to learn it on their own, however, I am perfectly willing to send you all of the resources, you could possibly want.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: So multi column layouts we got those we got that all right let's throw in some boxes.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: below our slide show div with his lovely on ordered list, full of pictures all those blank all do you see how bad I am did you see how bad I am.
Michael T Ganschow Green: let's see empty bleachers.
Michael T Ganschow Green: Just like my soul yo.
Michael T Ganschow Green: What are you, you are.
Michael T Ganschow Green: A framing.
Michael T Ganschow Green: porch swing.
Michael T Ganschow Green: represents my own framing sanity.
Michael T Ganschow Green: And lastly, I.
Michael T Ganschow Green: A rusty.
Michael T Ganschow Green: caterpillar.
Michael T Ganschow Green: tractor.
Michael T Ganschow Green: Is my self image alright cool so now let's add in a couple of boxes below the.
Michael T Ganschow Green: slideshow container here we're going to call we're going to go just regular dibs, why not, why not you guys, why not what's there to lose.
Michael T Ganschow Green: This div class equals quotation marks what a while on a call these guys I think we'll call these guys test.
Michael T Ganschow Green: Oh, I know, oh oh I haven't it's time to learn more thing guys I don't think I showed you this so i'm going to teach you some more things okay i'm going to teach you some more things I can't remember I showed you this because people asked.
Michael T Ganschow Green: we're going to know I didn't show you guys this one, a positive we're going to add multiple.
Michael T Ganschow Green: Class styles to these guys so we're going to have a base class of tests of yet.
Michael T Ganschow Green: So we're going to put a we're going to put.
Michael T Ganschow Green: You know what test subjects to clinical we're going to call these guys human so.
Michael T Ganschow Green: Now you know what we want to human sacrifices will keep this clinical test subject.
Michael T Ganschow Green: And we'll do three of these Dudes.
Michael T Ganschow Green: copy.
Michael T Ganschow Green: paste three of them.
Michael T Ganschow Green: Then.
Michael T Ganschow Green: New uniform size on them doesn't matter.
Michael T Ganschow Green: Do a uniform since maybe we'll we'll see all right.
Michael T Ganschow Green: yeah I think I think i'm gonna I think i've changed my mind look at that you guys i'm capable of changing my mind i'm going to do individualized styles for each of these Dudes.
Michael T Ganschow Green: I was going to do, like make a box and then change the background color you make these guys different sizes, so it doesn't confuse you guys, so you can see all the different sizes that they run on alright so let's let's get our test subjects setup here so.
Michael T Ganschow Green: jquery page that CSS yeah we get these styles setup there's test subject one record technology will leave him blank will come back to you in a minute test subject one.
Michael T Ganschow Green: don't get antsy is test subject to bracket tautology the ori test subject to we haven't forgotten you either and test subject, by the way this adding in.
Michael T Ganschow Green: selectors without necessarily styling them out, this is something I do a lot with my CSS is to establish like a selector order and things like that.
Michael T Ganschow Green: Even though i'm not necessarily putting stuff in and yet if i've already established selectors in the code i'm frequently come in and just put a blank in here for these guys so.
Michael T Ganschow Green: These guys gonna be relatively straightforward so we're going to float these guys float wow and fellow at flout laughed.
Michael T Ganschow Green: we're going to go boop and we're going to go with the flow them yeah I want to float left with.
Michael T Ganschow Green: 400 pixels 400 pixels height.
Michael T Ganschow Green: 200 pixels.
Michael T Ganschow Green: background color.
Michael T Ganschow Green: purple there we go screaming purple.
Michael T Ganschow Green: save it.
Michael T Ganschow Green: There it is nice and purple and margin.
Michael T Ganschow Green: 25 px cool there's test subject one test subject to is going to get some of these changed oops no open up Thank you.
Michael T Ganschow Green: test subject to we get a few of these changed actually first of all flow right.
We go and.
Michael T Ganschow Green: 300 pixels.
Michael T Ganschow Green: By 275.
Michael T Ganschow Green: background color.
Michael T Ganschow Green: Working yeah gay pink and then.
Michael T Ganschow Green: margin team pixels little tighter.
Michael T Ganschow Green: Know actually make it bigger half 35 pixels.
Michael T Ganschow Green: tiger.
Michael T Ganschow Green: test subject three.
Michael T Ganschow Green: left with.
Michael T Ganschow Green: 500 pixels height.
Michael T Ganschow Green: 100 pixels.
Michael T Ganschow Green: margin 15.
Michael T Ganschow Green: background color.
Michael T Ganschow Green: orange red.
Michael T Ganschow Green: fresh look at those Dudes looking i'm just sitting there looking at all the different floats they're all just floating there floating they're being weirdos look at those weirdos man look at them they're just being weird.
Michael T Ganschow Green: Alright, so let's rummage around animate on scroll and go get us some different behaviors for these Dudes and.
Michael T Ganschow Green: Doo Doo Doo Doo Doo Doo Doo Doo alright so once go and scroll back up to the top so let's go collect some of these pop ups i'm gonna have one fading from the side all right, so to grab one of these guys, you can just grab it right off the DEMO here like this, like my.
Michael T Ganschow Green: like this, they have right here, I, like the way you kind of sink slides in from the right, so I am going to apply that.
Michael T Ganschow Green: To test subject number one Hello test subject number one.
Michael T Ganschow Green: boop then.
Michael T Ganschow Green: Oh, I might have we might have to add additional spacing we'll find out today I scroll down to them will find out here alright so.
Michael T Ganschow Green: let's see here do I have to add additional spacing.
Michael T Ganschow Green: So i'm just going to scroll to it so i'm going to add a dummy paragraph so that I have something to scroll through to make it pop up.
Michael T Ganschow Green: Let me double check my enemy down scroll just to make sure that i'm installed it correctly and Andy did Hello so we're going to go save.
Michael T Ganschow Green: And i'm going to put a dummy paragraph and you guys know my love of dummy paragraphs so we're gonna go breaking up some low give me some paragraphs bacon.
Michael T Ganschow Green: I need some filler on it's a big fat low to filler right there, so we have to scroll down to it, and trigger these animations right well we save.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: That far enough to scroller will I need to bring in another paragraph let's find out.
Fresh.
Michael T Ganschow Green: As far enough for.
Michael T Ganschow Green: popping right there look at that.
Michael T Ganschow Green: doesn't work if you don't make the sound.
Michael T Ganschow Green: It goes.
Michael T Ganschow Green: Alright cool alright so let's go grab some more let's go grab some more these stadiums are nice job buddy buddy buddy who flips oh look at him flip would want to go flip up or flip to the side like these POPs to i'm going to do a zoom let's do.
Michael T Ganschow Green: A lot like oh i'm gonna go this one zoom in up from my middle one.
Michael T Ganschow Green: gimme middle one because of float left is actually this guy right here we're gonna go zoom in up I love floats and one more one more let's see we have flips I might have one do a flip.
Michael T Ganschow Green: might have one do another zoom.
Michael T Ganschow Green: Oh, I like that.
Michael T Ganschow Green: let's do zoom out and gimme gimme gimme gimme gimme gimme, if you like, i'm shopping here.
Michael T Ganschow Green: You.
Michael T Ganschow Green: cool okay jokes so now know, save and open this up in a browser window Where are you there you are fresh.
Michael T Ganschow Green: i'm gonna i'll pop in Bam and then unpopular, as I scroll out very nice I might even add more paragraphs you guys have inspired me to add more paragraph, so we scroll further I believe you it's all on you, you could you could you could you could you could copy all right.
Michael T Ganschow Green: To add a couple more so that the scroll goes further.
Michael T Ganschow Green: Paragraph and Patrick and I.
Michael T Ganschow Green: hope they would go give me some more paragraph action there it is and there it is and saving good now we'll scroll further look at what we've done look at what we've done I.
Michael T Ganschow Green: was gone a little funny but that's okay when is wizard not a little funny guys alright so fresh it is you.
Michael T Ganschow Green: yeah they go look at them going yeah that's what i'm talking about.
Michael T Ganschow Green: centerline paragraphs driving me insane though so i'm going to come up here and i'm going to make them the Left aligned why because I can't.
Michael T Ganschow Green: Even left the line we're gonna go text align.
justify.
Michael T Ganschow Green: There we go.
Michael T Ganschow Green: Now they're all Nice and squared off.
Michael T Ganschow Green: Add in just for my p.
Michael T Ganschow Green: margin.
Michael T Ganschow Green: Five X 20 X.
Michael T Ganschow Green: There we go Oh, I need to go further than bad for them, bad for 20 pixels there we go.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: That fresh.
Michael T Ganschow Green: So questions on adding in funky behaviors.
Michael T Ganschow Green: are adding in some intimate on scrolls for your website.
Michael T Ganschow Green: Alright cool well let's have some pair relaxing and jelly parallax thing is always a good time.
Michael T Ganschow Green: So, first of all i'm going to teach you the the barnyard way of doing parallax in here we're using just CSS and then we are going to go query.
Michael T Ganschow Green: X and we're going to go and.
Michael T Ganschow Green: Do do do do do let's see and we're going to go in and play around with.
Michael T Ganschow Green: With parallax js.
Doo Doo Doo Doo Doo Doo Doo Doo Doo.
Michael T Ganschow Green: So let's do a little parallax and first of all backyard pair relaxing.
Michael T Ganschow Green: So i'm going to put a script script What about a div tag after my my experiment in human experimentation here.
Michael T Ganschow Green: So first things first.
Michael T Ganschow Green: i'm going to give.
Michael T Ganschow Green: And then we're going to go class.
Michael T Ganschow Green: equals.
Michael T Ganschow Green: need parallax.
Michael T Ganschow Green: yeah.
Michael T Ganschow Green: i'm a parallax.
Michael T Ganschow Green: notice everybody cuz it's floated so what we're gonna do is we're gonna come down here and i'm going to clear off all the floats home.
Michael T Ganschow Green: hey hey I put it in there, it is homemade parallax like a tautology First things first is, I have to clear my floats so i'm going to throw a clear on here of both.
Michael T Ganschow Green: And then we'll give this thing a width 100%.
Michael T Ganschow Green: And height.
Michael T Ganschow Green: 200 pixels.
Michael T Ganschow Green: I might have to move this guy around a little we'll see here i've actually I think I might.
Michael T Ganschow Green: double check it with a background color i'm going to throw in a background image.
Michael T Ganschow Green: yeah i'm gonna move this guy around hang on.
Michael T Ganschow Green: I think it won't scroll properly, where it is, I need got their color let's go to know violet let's go screaming red wine screaming read always always puts everybody.
Michael T Ganschow Green: yeah that's not going to demonstrate parallax and rolling okay let's stick it underneath my slideshow.
Michael T Ganschow Green: No, no, oh made parallax I want you to show parallax scrolling so i'm gonna stick you right after my slideshow container let's see this works and we go save and.
Michael T Ganschow Green: There would be there would be i'm going to make a little taller to which was a little bit taller which it was a ball ECHO so let's go height let's go 400 pixels tall alright so homemade parallax.
Michael T Ganschow Green: homemade parallax.
Michael T Ganschow Green: So i'm to do with CSS is actually relatively easy.
Michael T Ganschow Green: So I had to do with your homemade parallax is you got to throw a background image in it.
Michael T Ganschow Green: Like say evil Homer.
Was the chat open.
Michael T Ganschow Green: And do the usual to make him into a background image like you would in your body tag so no repeat.
Michael T Ganschow Green: background position Center Center.
Michael T Ganschow Green: And background size cover and background attachment fixed background attachment fixed is actually what does most of the heavy lifting here okay so with that in place background color.
Michael T Ganschow Green: With that in place basically setting a background image in the way I showed you to do it on the body tag but actually on a div.
Michael T Ganschow Green: Next, you a parallax effect.
Nice.
let's do.
Michael T Ganschow Green: yeah cuz he's smaller yep so next you.
Michael T Ganschow Green: A parallax effect, to see how it's almost like masked out as I scroll.
Michael T Ganschow Green: it's kind of just just just mast that is that pair relaxing at work.
Michael T Ganschow Green: So questions on doing pair relaxing through this method.
Michael T Ganschow Green: we're going to do.
Michael T Ganschow Green: Is we're going to look at.
Michael T Ganschow Green: This guy right here.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: This thing works.
Michael T Ganschow Green: A little differently, then.
Michael T Ganschow Green: Then the other one can ensure these parallax fixed element for each parallax image mirror.
Michael T Ganschow Green: Okay, so this one works, a little different a little bit different.
Michael T Ganschow Green: than most others so.
Michael T Ganschow Green: You basically get this guy in get them initialized get them all set up.
Michael T Ganschow Green: And then you add this data dash parallax scroll and then a data dash image dash source equals whatever image you want in the background time.
Michael T Ganschow Green: And then let's see so you can have due to the nature of this implementation he's parallax objects and any layers below them are transparent, all right, I can do that.
Michael T Ganschow Green: there's no other content in this element, you need to make sure there's some fixed dimensions, otherwise you won't see anything.
Michael T Ganschow Green: Alright cool so to having these attributes to attribute the data attributes.
Michael T Ganschow Green: case of data dash.
Michael T Ganschow Green: All kinds of things oh my data dash speed OK cool so let's do some parallax in here so download parallax jst 1.5 point zero don't mind if I do.
Michael T Ganschow Green: Then we're going to minimize and we can actually see download.
Michael T Ganschow Green: oops when a step too far, there it is parallax js dash 1.5 point zero to open that guy up.
Michael T Ganschow Green: And now we're going to go in and mess around look at that look at all the Nice stuff he's included look at all the Nice stuff he's included he's got his parallax dash dash dot J s.
Michael T Ganschow Green: notice it requires this one requires know CSS the others Mon required to CSS this one does not it has its own deal now I got a double check with the instructions benefits it's i've installed this thing.
Michael T Ganschow Green: parallax that js will do fixed position element mirror element, so you have to make sure Okay, so we me make sure of layers below them also if there's no content in the element you'll need to ensure that some fixed dimensions, otherwise you won't see anything alright so.
Michael T Ganschow Green: there's parallax js that's driving this whole thing notice this one's not modified yay alright so i'm going to take this parallax GS and i'm going to plop it in my scripts folder.
Michael T Ganschow Green: And then I just need to link it up and then I believe I can actually start putting things in that will that will slow their scroll so let's see here let's add a parallax in here i'm going to stick it a little let's go.
Michael T Ganschow Green: No, you know what we're going to stick it right below homemade parallax we have back to back parallax things we're going to go div.
Michael T Ganschow Green: class.
Michael T Ganschow Green: equals.
Michael T Ganschow Green: This is going to be fancy parallax.
Michael T Ganschow Green: Okay now we're going to style fancy parallax to have height and make sure his background is transparent so there's homemade parallax and then below here is fancy parallax.
Michael T Ganschow Green: And we're gonna go height.
Michael T Ganschow Green: 300 pixels.
Michael T Ganschow Green: And background.
Can.
Michael T Ganschow Green: You recognize a dude dreamweaver Oh, maybe you're not necessary hang on a second maybe maybe you're not necessarily we're going to find out in a second here okay like that was just misspelling transparent alright so.
Michael T Ganschow Green: Then let's insert some images here, so all right so parallax disguise initialized with a data dash parallax scroll data dash parallax scroll.
Michael T Ganschow Green: So put that attribute on, and then a data dash image data source and then you go find your image so i'm gonna go hey don't give me that.
Michael T Ganschow Green: want to use my image.
Michael T Ganschow Green: jackie's evil twin.
Michael T Ganschow Green: What i'm so lazy lazy I am you guys i'm going to copy the name.
Michael T Ganschow Green: and paste it.
Michael T Ganschow Green: Now then, we have one more thing to do, I realized, it was just about to DEMO this and it wouldn't work, and I would start crying and you guys should be like Michael Michael you said dumb, why did you do that well because because here's why wouldn't work.
Michael T Ganschow Green: I need I need a script.
Michael T Ganschow Green: That helps that helps.
Michael T Ganschow Green: It helps when you're inserting these.
Michael T Ganschow Green: numpties.
Michael T Ganschow Green: let's see here, we got it in here like doing.
Michael T Ganschow Green: Oh no ALS lightbox parallax Aaron is that you don't see it save scripts slash.
Why, you see it.
Michael T Ganschow Green: Right folder.
Michael T Ganschow Green: Fine i'm going to copy your name, then.
Michael T Ganschow Green: we'll do this, the old fashioned way.
Michael T Ganschow Green: parallax js.
Michael T Ganschow Green: i'm going to go save if I click on that yep there it is we're good dream, he was just being weird for me, I did open too long, I know the feeling.
Michael T Ganschow Green: Alright, so let's see if this works i've got all of my attributes all set up got it pointed at images slash jackie's evil twin.
Michael T Ganschow Green: i've got data parrot dash parallax equals scroll and I have the paranoiac sitting right here doesn't look like I need to initialize it.
Michael T Ganschow Green: According to his instruction so let's see what happens then let's go back here let's do a quick say yes, thank you save all thank you chrome for growth, thank you for.
Michael T Ganschow Green: June for dropping your chrome down in the way fresh so there's Homer and there's Madonna oh interesting he's not centered you so something's fighting him there, but you can see scrolling very slowly, but I don't know why he's sitting over on the corner and arresting.
Michael T Ganschow Green: alright.
Michael T Ganschow Green: try something.
Michael T Ganschow Green: New try some.
Michael T Ganschow Green: whoo mommy and Daddy you're fighting see we got here text align.
Michael T Ganschow Green: left.
Fresh.
Michael T Ganschow Green: nope he is sitting over to the side that's interesting so parallax things working for sure he is pinned himself over to the side done this is unusual well we're going to have some fun fixing him real quick so fancy parallax just making sure that nothing's wrong with it.
Michael T Ganschow Green: Oh, a clear.
Michael T Ganschow Green: Low so the floats aren't messing with it and we're going to put a background color in it real quick, I wonder.
Michael T Ganschow Green: Yes, I know it's going to go over the top, I understand, I understand, I just want to make sure, everything is working okay fresh.
Michael T Ganschow Green: Yes, okay good so that's on a present with excellent plant that background, transparent save fresh.
Michael T Ganschow Green: Alright, so we had a minor lecture explosion, he is not centered that's interesting, I want to see, let me just see real quick of my ALS here, where we not a less on my parallax when that might be.
A good.
Michael T Ganschow Green: friend of natural wind speed at which the parallax effects runs the index by default everything else on the page absolutely set parallax oh i'm wondering if just ducky is not big enough i'm wondering if it's that, so let me see bigger.
jackie's pretty bleeping thing, I think.
Michael T Ganschow Green: Let me double check here real quick i'll be ducky is because these tinier well.
Michael T Ganschow Green: Oh, I wonder what i'm gonna do i'm trying to stitch he's nice wide alright so let's go.
Michael T Ganschow Green: Instead of duck is evil twin we're going to go stitch.
Michael T Ganschow Green: St.
Michael T Ganschow Green: spelled out a ping.
Michael T Ganschow Green: stitched up.
Michael T Ganschow Green: I want to duck he's just not big.
Michael T Ganschow Green: stitches nice one.
Michael T Ganschow Green: let's see this year.
Michael T Ganschow Green: rush.
Michael T Ganschow Green: yeah okay was just with this you so duck he's not wide enough Okay, so you need your images if you're going to be using the slow scroll parallax this parallax js you need effect here, let me, let me copy paste this in here.
Michael T Ganschow Green: Along with enemy known scroll and a copy paste that in the chat too, so it looks like if you're going to use the parallax background image, make sure that your background images are plenty wide.
Michael T Ganschow Green: Or else it will just clip off and show a little bit of it that seems to be working otherwise look at the scroll goes animated scrolls boom there's all kinds of fun, you can have here, yes alright so questions on either of these guys.
Michael T Ganschow Green: questions on multiple column text.
Michael T Ganschow Green: And I have your.
Michael T Ganschow Green: have your those of you who were not here at the beginning of class I threw in a little fun thing in the lecture based on some questions I was receiving.
Michael T Ganschow Green: about how to convert your text without using multiple div tags in two columns using the power of CSS That was a that's a.
Michael T Ganschow Green: property and value combo called.
Michael T Ganschow Green: column count the column gap as the letting and accounting rule putting the line in between it alright.
Michael T Ganschow Green: So questions on anything questions on the project three setup.
Michael T Ganschow Green: bang Dudes and do debts, I had this lecture all set with some questions in them to finish up about eight o'clock and you guys because you're only they're too scared to are tired to move where you've got me running in the background where you actually work on your project threes.
Michael T Ganschow Green: has exhausted the class early so i'm going to give you the remaining hour as open lab time we're going to add action open lab time and time to ask me questions.
Michael T Ganschow Green: If you have any on your specific projects or any specific questions you want.
Michael T Ganschow Green: Otherwise, if you want to go early you are hereby released from class.
Michael T Ganschow Green: Look at that.
Michael T Ganschow Green: So, have a great evening out there you guys, if you are not.
Michael T Ganschow Green: If you are not if you don't want to stay around ain't a allison thanks again for open my out she was she was really pleased, so thank you, that was that was good stuff well then i'm going to pause the record.
Rowena Pinero: Created quick question and.