Dynamic Company Team Page

Submitted by: 
Language: 
Visitors have accessed this post 632 times.

In this tutorial we will show you how to create a Dynamic Company Team Page using jQuery to pull out information for each member of the company team page. Visitors will be able to click between members/employees and read more information about each member. You can also expand this technique to include further information about the job and details of each person’s.

The first step you gonna do is to create an external stylesheet and download a local file of jQuery. The script works by listing the members as image thumbnails while including hidden content inside each list item. The hidden content is pulled out via jQuery and then displayed into the bigger page section at the top of every thumbnails of every members.

  1. <div id="wrap" align="center">
  2. <h1>Company Team Members</h1><hr/>
  3. <p>Click any of the company team member's photos to show more details.</p>
  4. <div id="teamcontent" class="clearfix">
  5. <img src="img/profile-default.png" class="bigimg" width="260" height="260">
  6. <div id="teamdetails">
  7. <h2 id="bigname">Name</h2>
  8. <h3 id="bigjob">Title</h3>
  9. <p id="bigdesc">A brief description.</p>
  10. <p><a href="javascript:void(0)">View Profile &rarr;</a></p>
  11. </div>
  12. </div>
  13. </div>

result

This Javascript code is for the pulling of information from the jQuery and to make it more dynamic.

  1. <script type="text/javascript">
  2. $(function(){
  3. $('.profilepic').on('click', function(e){
  4. var $biginfo = $('#teamcontent');
  5. var $bigname = $('#bigname');
  6. var $bigjob = $('#bigjob');
  7. var $bigdesc = $('#bigdesc');
  8. var newname = $(this).attr('alt');
  9. var newrole = $(this).siblings('.job').eq(0).html();
  10. var newdesc = $(this).siblings('.desc').eq(0).html();
  11. $bigname.html(newname);
  12. $bigjob.html(newrole);
  13. $bigdesc.html(newdesc);
  14.  
  15. if($biginfo.css('display') == 'none') {
  16. $biginfo.slideDown(350);
  17. }
  18. });
  19. });
  20. </script>

Hope that you learn in my tutorial. Don't forget to LIKE & SHARE this website. Enjoy Coding!


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.