side team member bio preview
May 26, 2014 | 80 Feedbacks

Side Team Member Bio

Use this team member biography resource to insert extended descriptions of your team members, with no need of dedicated pages or modal windows. Let the user meet your team and trust your company!
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

Sometimes a picture and a role are not enough to completely describe a team member; you need a more detailed description to make your team “real”! But this requires space… and you can gain it using CSS3 transformations. Just give a look at the smart solution found by Aquatilis: the description enters from the side, just like mobile application behaviour, with no need of page reload.

Creating the structure

We created a #cd-team section containing our team members preview:

For each team member, we created a div.cd-member-bio containing the extended description; we inserted them at the bottom of our content, before the body closing tag.

Adding style

The extended team member description is placed off the canvas by giving it a position:fixed;, a right: 0; and a translateX equals to its width.

When the user clicks on one of the members’ picture, the .slide-in class is added to the div.cd-member-bio using jQuery. This class modifies the translateX value to 0 (the smooth enter is achieved adding a transition to the translation property). The -webkit-overflow-scrolling: touch; is used to smooth scrolling on touch devices (webkit browsers). It’s recommended when you use the overflow property.

We gave an overflow-x: hidden; to the body to prevent IE browser from showing a horizontal scrolling bar. We also gave it an overflow: hidden; when the side member bio is visible, so that the out-of-focus content cannot scroll.

Events handling

We assigned a data-type value to each team member preview. When user clicks on one of the team members’ picture, the .cd-member-bio, which has class equal to that data-type, is shown.

Changelog

June 8, 2014
  • Fixed bug with transition on Firefox - by CodyHouse
May 26, 2014
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • Swarup K. Bagul

    Great work! I really liked the way you have presented it. Simple & clean. Keep up the good work :)

    • Claudia Romano

      Thanks! I’m glad you liked it :)

  • Amit Kolambikar

    I love your site..its so slick and awesome.I am currently learning CSS, though I know programming with Java and C++,I find CSS so difficult to become pro at..could you give me some references to master CSS ?

    • Sebastiano Guerriero

      To learn the basics I’d suggest a course. You can try http://teamtreehouse.com/. To master CSS the best way is experimenting. Cody can help: try to create our resources from scratch, then take a look at our code to see if you can learn some new tricks.

  • http://www.logictragedy.com/ Lufti

    Nice and easy to read the code…i’ll use this.
    Try my
    Imageless social media icon
    http://www.luftinurfahmi.net/image-less-social-icon-with-css-and-font-awesome/

  • Morten

    The move-in animation is not working in firefox.

    (I’m running the latest version of firefox on mac osx 10.9.3)

    • Sebastiano Guerriero

      Hey Morten, I just find out a weird Firefox behaviour: when you change the body overflow value during a transition, the transition no longer works. We’ll be fixing the resources soon, thanks for the heads up

  • sharpmachine

    What if I want it to open on left side instead?

    • Claudia Romano

      For the .cd-member-bio set left:0 (instead of right) and a translateX equals to minus its width. Also change the .slide-out class so that the main element translate of a positive value (rather than a negative one). It should work fine! :)

      • Sebastian Ruiz

        Hi Claudia….
        Thanks for sharing so many beautiful concepts.
        I’ve tried to make it appear from the left the way you explain but it doesn’t work…..any clue???

        • Sebastian Ruiz

          Sorry…..it does work …..
          My fault, I did change the .slide-out on the wrong media query… :(

  • http://www.tellssoehne.ch Matthias

    Nice way of presenting a team, works pretty well. In my case, I have a navbar which has fixed positioning. This navbar is disappearing after opening a team members bio instead of sliding out to the left. Is there a way to overcome this?

    • Claudia Romano

      Thanks Matthias. If you have a fixed navigation, you should try putting it outside the element. When clicking on the member bio, you should animate the left of the navigation (rather then performing a translation, which can conflict with the position : fixed). You can use the same code of the .slide-out class, replacing the translateX(-n) with a left: -n (and don’t forget to add a transition to the left property!). Hope this helps!

  • Antonio Pinto

    It’s so pretty and good! In my case i want add another 2 member in , if i create the member section the click don’t work and the left panel don’t appear, why? Thanks and good work! :D

    • http://codyhouse.co Claudia Romano

      Hi Antonio. Actually it should work. Make sure to assign the right data-type to the new list items and the correct class to the corresponding .cd-member-bio elements (e.g. member-4, member-5). Hope this helps!

      • Antonio Pinto

        Many many thanks Claudia. I solved immediatly, sublime text had a hangover :D

  • Mwiza

    I am abit of a newbee …please enlighten me on how to add this to my website. I am using Adobe Dreamweaver, where do I place the downloaded files and where do i insert the style? Thanks in advance :)

  • Branden Gums

    I’m having issues re-sizing these boxes. I can reduce the image size, but I can’t seem to get the box shadow to downsize with it to get more than 3 in a single row. What attribute in the CSS Stylesheet is controlling this?

    • http://codyhouse.co Claudia Romano

      Hi, you should change the width of the #cd-team li elements

  • Tom

    Hi Claudia, great work!
    I try to combine your code with my bootstrap site but I encountered a problem: everything works fine except for the off the canvas move of the main page while extended description appears. Any suggestions? Where look for solution? I attach a print screen

    • http://codyhouse.co Claudia Romano

      Hi, glad you like it!
      Make sure the description is inside the element.

  • Pingback: Blue Coaster33()

  • Pingback: tv online, online tv()

  • Pingback: watch movies online()

  • Pingback: stream movies()

  • Pingback: water ionizers()

  • Pingback: best bottled water()

  • Pingback: kangen water()

  • Pingback: kangen water()

  • giorgiokatr

    Great work!
    Can the sidebar that opens go full page or a much bigger width?

    • http://codyhouse.co Claudia Romano

      Hi, glad you like it!
      Yes, you need to change the width of .cd-member-bio element (and its translateX value) and the translateX value in the .slide-out class. Hope this helps!

  • Pingback: Main Advantages of OpenVPN Technology()

  • Pingback: online casinos()

  • Pingback: tvpackages.net()

  • Pingback: tvpackages.net()

  • Pingback: lan nu og her()

  • Pingback: parking()

  • Pingback: fue()

  • Pingback: laan penge nu()

  • Pingback: stop parking()

  • Pingback: water ionizer()

  • Pingback: water ionizer machine()

  • Pingback: pay per day loan plans()

  • Pingback: pay per day loans plan()

  • Pingback: watch this video()

  • Pingback: visite site()

  • Pingback: plumbing repair parts()

  • Pingback: plumbing camera equipment()

  • Jothi Kannan

    Nice codes!
    How to make this from top ? i tried with top:0 alone but it does not make any sense, advice me pls

    • http://codyhouse.co/ Sebastiano Guerriero

      try changing the transformation for the .cd-member-bio element from translateX to translateY

      • Jothi Kannan

        Hi @seguerriero:disqus
        Thanks for the reply, but it doesn’t work to me, i changed the style as you said, but it doesn’t make any changes, can you give the working code?

      • Abhishek Tomar

        how to use codes in existing website ..please help me i m fresher

  • Pingback: zakład szklarski piotrków trybunalski()

  • Pingback: house blue()

  • Pingback: s coles electrician()

  • Pingback: HD Coloring Pages()

  • Pingback: ionizer payment plan()

  • Pingback: best minecraft maps()

  • Pingback: bottled alkaline water()

  • Pingback: water ionizer loans()

  • Pingback: water ionizer payment plan()

  • Pingback: visit site()

  • Pingback: alkaline water()

  • Pingback: read more()

  • Pingback: alkaline water()

  • Pingback: water ionizer()

  • Pingback: read more()

  • Pingback: learn more()

  • Abhishek Tomar

    how to use codes in existing website ..please help me i m fresher.

  • http://mtjaar.com/ ali abdu

    Nice codes!

  • wrnc

    Hi – this is great and I have managed to implement this into my main page. However, I wanted to put some other links (i.e. a mailto email address link for each team member) outside the anchor (otherwise it would be a link inside a link) but inside the so a phone number and email address can display under each team member – however when I do this, the mailto: link activates the sliding panel. any ideas?? Thanks.

  • Sachal Abdullah

    please help me i want to add 20 members on the page but when i repeat the first three begin to repeat. how can i solve this ?

  • Ron

    Really great plugin, but do you think there is way to open a layer twice on top after scrolling down inside the layer? Right now if i try to reopen the layer I see the exact section when i left the layer. Cheers.

  • Ilse De

    You guys always saving my life <3 Much love for you!

  • Abdul Razak

    can you tell how to add escape button navigation to close bio slideout

  • kev dj

    all the project show the same project content how can I have different content for different project??

  • http://jnguyen.me/ itsjohn

    FYI, translate 100% is the width of the element. say you defined the the width at 270, translateX(100%) will move it 270px. no need to set width 270px and translateX(270px).

  • Morris Pinedo Michelsen

    Hi! Great job here! Is there a way to direct with a link to an open section? for example http://www.domain.com/#johnsmith this way you could direct to an open Bio. Thanks!

  • Aritrs Basu

    i am having problem to add more than 3 divs please help

  • http://www.multireflex.com Managyck

    Fantastic work and such a spring of inspiration! Thanxxxx
    I had many problems to make it work fine with Safari and Chrome in an iPad but I think that it’s fine now.
    But i don’t know why in a webviewer in FileMaker it doesn’t scroll easily…¿¿… maybe a SDK FileMaker_Safari issue?
    Anyway, bravo Claudia. (just if you want to have a look http://www.dienchan.ovh)