New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Revealing save options

From: HTML5 Projects: Customized Photo Cards

Video: Revealing save options

We're in the final lap, where we allow the user to save the image. But first, we want to tell them exactly how to store that combined graphic. For that, we'll use a little JavaScript hoodoo to hide the fact that there isn't really a fourth page in this application. When the user clicks Save, the step number changes, and a different, detailed message appears. So, let's go into modify.php, and I'm going to scroll down to where the message is.

Revealing save options

We're in the final lap, where we allow the user to save the image. But first, we want to tell them exactly how to store that combined graphic. For that, we'll use a little JavaScript hoodoo to hide the fact that there isn't really a fourth page in this application. When the user clicks Save, the step number changes, and a different, detailed message appears. So, let's go into modify.php, and I'm going to scroll down to where the message is.

Here you see it on line 50. I'm going to wrap that h1 tag in a div. I'll give that div an ID of steps. And let me take that closing div there and put it after the h1. Excellent! So now we can target that h1 in JavaScript. And for that, I'll go up to my JavaScript function here, and we'll add in another function.

Here, we're going to listen for a click event for saveImage, and saveImage, if I scroll down just a bit, is the ID for the save button in navigation. We'll enter in a dollar sign, and then open and closing parentheses, and within that, we'll put our selector which is the id="#saveImage". Follow that with a dot and click, and then in parentheses, function, with its own set of parentheses, and an e inside that.

Now, let's add the curly brace, and I'll hit Return, so we can enter our code within that area. And the first thing we'll do is enter in a preventDefault line. So, e.preventDefault(). Now, I'm going to create a variable called theInfo. We'll set this to an HTML string that includes the h1 tag and Step 4. And in Step 4, we'll tell them to right-click on the image, and choose, and here I'm going to enter in a span tag, so I can bring in a highlight class.

We'll use single quotes for this. Close off the span tag, and enter in the menu item, and put in the entry from the right-click menu, Save Image, and now let's close the span tag, and close the h1 tag. That's the end of our string. So I'll put a semicolon at the end. And on the next line, we'll use a jQuery function HTML in order to take that string and put it into our selector steps. So, we start off with the selector itself which is #steps and then .html(), and the variable we want to put inside steps, which is of course, theInfo.

But, before I go on, I notice that there is a missing semicolon here, so let's put that in. I'll save this page, and now let's head over to the browser, where I'll click Refresh, and that gives me an opportunity to move the floating head around and resize. Oh! Look at that, just a little bit more hair than normal. Excellent! And now it certainly is an image that I would want to save for posterity. So let me click Save. And there's my new Step 4, right-click on image, and choose Save Image.

Pretty seamless I think! So, in the next lesson, you'll incorporate the final bit of code that actually makes saving a canvas graphic possible.

Show transcript

This video is part of

Image for HTML5 Projects: Customized Photo Cards
HTML5 Projects: Customized Photo Cards

12 video lessons · 4847 viewers

Joseph Lowery
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.