You are here:

Javascript/iPhone Script with Append

Advertisement


Question
Hello Kevin,
Please see this url codepen.io/burn123/details/yphHl. The main problem is listed at the url, but I will clarify. Once you unlock the iPhone, you get a message screen. There are 2 message categories. When I click on the first, I would like the green box to replace the content that is there. And same with the second category. This requires AJAX, but I am not sure how to implement it. So the solution will only have an iPhone, with no boxes outside of it. Please keep in mind that there will be content in these boxes. There will also be more boxes, so I need a solution that will work for many boxes.

Answer
Hi Cody,

Thanks for your question.

Your question was a little difficult to understand. I tried to focus on what you were ultimately trying to do: on iphone message click, get the message text, and place it in the green box. What you ultimately do with the green box is up to you, but I'm trying to provide an anwer that you can run with and implement further as you wish.

Here is a JSFiddle link to your page's markup with the added JavaScript:

http://jsfiddle.net/n53qk/

NOTE: Make sure you re-size the right-side JSFiddle window so that the iphone, green box and red box all line up side-by-side

Best Wishes,

Kevin Chisholm

http://kevinchisholm.com/

http://blog.kevinchisholm.com/

Javascript

All Answers


Ask Experts

Volunteer


Kevin Chisholm

Expertise

I can answer questions about: JavaScript, Object-Oriented JavaScipt, JSON, AJAX, jQuery, HTML, CSS

Experience

I am a Front-End Web Developer living in New York City. I have provided services to titles such as Time.com, TimeForKids.com, SportIllustrated.com, coastalliving.com, People.com, TDAmeritrade.com, and Instyle.com. Being particularly passionate about Object-Oriented JavaScript as well as Web Standards, I spend a fair amount of time writing about / teaching Front-End Web Development techniques. In my free time I enjoy reading about advanced JavaScript, as well as Web Development trends and best practices. My Blog is: http://blog.kevinchisholm.com/ JavaScript-specific blog posts can be found here: http://blog.kevinchisholm.com/category/javascript/

Organizations
NYC Front-end Developers CSS3 / HTML5 The future of front end Front-End Engineers Javascript Syracuse University Alumni Network

Education/Credentials
Syracuse University - VPA - 1983 - 1987

Past/Present Clients
cookingchanneltv.com foodnetwork.com food.com hgtv.com diynetwork.com gactv.com frontdoor.com hgtvremodels.com travelchannel.com Time.com TimeForKids.com SportIllustrated.com coastalliving.com People.com TDAmeritrade.com ramirezco.com njsga.org soccercoliseum.com superdomesports.com afeenj.org

©2016 About.com. All rights reserved.