knystrom18 Posted May 13, 2010 Share Posted May 13, 2010 I want to eventually get the effect here: http://www.moffettpersonaltraining.com/staff.htmWhen you click on the trainer's names, the content below, and the link style changes, but the page does not reload.I have a feeling this could be achieved with CSS, but would take forever and not work right across major browsers.So, how can I do that with JS? I'm guessing onclick events with a combination of display properties in the css?Is there a specific name for this effect so I can research and implement it myself?Thanks- K Link to comment Share on other sites More sharing options...
thescientist Posted May 13, 2010 Share Posted May 13, 2010 It's probably just AJAX. When you click on someone's name, the content and the person picture changes, most likely by changing the img src and the innerHTML. It's up to you where the information comes from though. Also, the class for the active navigation item changes too. So, in answer to your question, both. And then a way to get the info. Although I suppose technically it could all be stored within the Javascript function itself that changes the relevant content, so that when a specific ID is passed (say the trainers name) the function could use a switch case to fill in the appropriate picture and content. And I guess technically, technically, I could just look at their source code, but I already wrote out the possibilities so I'm pretty sure I already covered the way they're doing it by default, Link to comment Share on other sites More sharing options...
knystrom18 Posted May 13, 2010 Author Share Posted May 13, 2010 Thanks for that. Yea, I peeked at their source code and it's all script and tables. They even linked the style sheet to the page by an @import in JS... :)AJAX and JS are both above me at the moment, so I'll develop another method. Thanks for your reply though. Link to comment Share on other sites More sharing options...
ShadowMage Posted May 13, 2010 Share Posted May 13, 2010 AJAX and JS are both above me at the moment...Just so you know AJAX is just a JavaScript technique. AJAX is not it's own language. Link to comment Share on other sites More sharing options...
thescientist Posted May 13, 2010 Share Posted May 13, 2010 like I said you don't even really have to use AJAX. All your text could be stored within the function. And the function itself wouldn't be that difficult. Literally they are changing the source of an image, and using innerHTML a few times in the right places. Plus the menu context changes, but that's pretty easy too. Link to comment Share on other sites More sharing options...
knystrom18 Posted May 29, 2010 Author Share Posted May 29, 2010 Word. Thanks guys. Link to comment Share on other sites More sharing options...
ballack999 Posted June 1, 2010 Share Posted June 1, 2010 I think CSS is better and faster.BTW you can use AJAX. Link to comment Share on other sites More sharing options...
thescientist Posted June 1, 2010 Share Posted June 1, 2010 CSS alone can't do it. Javascript alone could. If you have the content stored in a DB, then you could use AJAX. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.