PCMI | MAPPING

<!DOCTYPE html> <html lang="en-US"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-122609284-4"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-122609284-4'); </script> <title>PCMI | MAPPING </title> <base href="https://pcmi.ucsf.edu/site-assets/"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"> <link type="text/css" href="css/bootstrap.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="style-ccmi.css"> <link type="text/css" rel="stylesheet" href="css/hover.css"> <link type="text/css" rel="stylesheet" href="css/font-awesome.css"> <link type="text/css" rel="stylesheet" href="css/hamburgers.css" /> <link rel="stylesheet" href="css/color.css"> <link type="text/css" rel="stylesheet" href="css/colors.css" /> <link rel="stylesheet" type="text/css" href="css/menu-css.css"> <link rel="stylesheet" href="css/nav-toggle.css"> <link rel="stylesheet" href="css/height.css"> <link rel="stylesheet" href="css/slide_style.css"> <link rel="stylesheet" href="css/jquery.selectBoxIt.css"> <link rel="stylesheet" type="text/css" href="css/YouTubePopUp.css"> <link rel="stylesheet" href="css/jquery.remodal.css"> <style type="text/css"> .box2{ position: absolute; top:0; right: 15px; float:left; max-height: 620px; overflow: hidden; } .slider2-image-class img{ max-width: 100%; height: 100%; object-fit: cover;} .map-content-inn iframe{ width: 100%; } </style> <script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> <script type="text/javascript" src="scripts/bootstrap.min.js"></script> <script type="text/javascript" src="scripts/simplePlayer.js"></script> <script src="scripts/jquery.dynamicmaxheight.js"></script> <script type="text/javascript" src="scripts/jquery.selectBoxIt.js"></script> <script src="scripts/jquery.slimscroll.min.js"></script> <script src="scripts/YouTubePopUp.jquery.js"></script> <script type="text/javascript"> window.onload = function() { $("select").selectBoxIt(); } </script> <script> $(document).ready(function(){ $('.js-dynamic-height').dynamicMaxHeight(); }); </script> </head> <body> <div class="top-bar"> <div class="container"> <div class="row"> <div class="col-xs-8 col-sm-6 col-md-4 top-bar-left padding-right"> <a href="http://www.ucsf.edu/" target="_blank">University of California San Francisco</a> </div> <div class="col-xs-4 col-sm-6 col-md-5 col-md-offset-3"> <ul> <li><a href="http://www.ucsf.edu/about" target="_blank">About UCSF</a></li> </ul> </div> </div> </div> <div class="clearfix"></div> </div> <div class="container nav-top"> <div class="nav-midd"> <div class="hamburger hamburger--spin navbar-toggle-main menu_fixed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" title='Menu'> <div class="hamburger-box"> <div class="hamburger-inner"></div> </div> <span id="menuTxt" >Menu</span> </div> </div> <div class="clearfix"></div> </div> <span class="nav-hide main" > <div class="desktop-nav navigation-list"> <ul id="main-navbar" class="nav navbar-nav"><li ><a href="https://pcmi.ucsf.edu" >home</a></li><li class="dropdown"><a href="https://pcmi.ucsf.edu/about" class="dropdown-toggle">About</a><ul class="dropdown-menu "><li ><a href="https://pcmi.ucsf.edu/investigators" >Investigators</a></li></ul></li><li class="line"></li><li class="dropdown"><a href="https://pcmi.ucsf.edu/research" class="dropdown-toggle">Research</a><ul class="dropdown-menu "><li ><a href="https://pcmi.ucsf.edu/mapping" >Cell Mapping</a></li><li ><a href="https://pcmi.ucsf.edu/technology" >Technology</a></li><li ><a href="https://pcmi.ucsf.edu/publications-" >Publications</a></li></ul></li><li ><a href="https://pcmi.ucsf.edu/events" >Events</a></li></ul> </div> <div> <div class="social-icon-top"> <ul> <li><a target="_blank" href="www.twitter.com"><i class="fa fa-twitter twitter" aria-hidden="true"></i></a></li> <li><a target="_blank" href="www.facebook.com"><i class="fa fa-facebook facebook" aria-hidden="true"></i></a></li> <li class="last"><a target="_blank" href="www.instagram.com"><i class="fa fa-instagram insta" aria-hidden="true"></i></a></li> </ul> </div> </div> </span> <header><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <div class="container"> <div class="row">  <nav id="header" class="navbar navbar-fixed-top navigation-container"> <div id="header-container" class="container navbar-container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">  <div class="pull-right social-icon-nav"> <ul> <li><a target="_blank" href="www.twitter.com"><i class="fa fa-twitter twitter" aria-hidden="true"></i></a></li> <li><a target="_blank" href="www.facebook.com"><i class="fa fa-facebook facebook" aria-hidden="true"></i></a></li> <li class="last"><a target="_blank" href="www.instagram.com"><i class="fa fa-instagram insta" aria-hidden="true"></i></a></li> </ul> </div> <ul id="main-navbar" class="nav navbar-nav"><li ><a href="https://pcmi.ucsf.edu" >home</a></li><li class="dropdown"><a href="https://pcmi.ucsf.edu/about" class="dropdown-toggle">About</a><ul class="dropdown-menu "><li ><a href="https://pcmi.ucsf.edu/investigators" >Investigators</a></li></ul></li><li class="line"></li><li class="dropdown"><a href="https://pcmi.ucsf.edu/research" class="dropdown-toggle">Research</a><ul class="dropdown-menu "><li ><a href="https://pcmi.ucsf.edu/mapping" >Cell Mapping</a></li><li ><a href="https://pcmi.ucsf.edu/technology" >Technology</a></li><li ><a href="https://pcmi.ucsf.edu/publications-" >Publications</a></li></ul></li><li ><a href="https://pcmi.ucsf.edu/events" >Events</a></li></ul> </div> </div> </nav> <div class="clearfix"></div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <a href="https://pcmi.ucsf.edu"> <img src="https://pcmi.ucsf.edu/site-assets/images/head-icon1.png" alt="" class="center-block img-responsive logo logo-center-new" /> </a> </div> </div> </div> </header> <script type="text/javascript"> $(document).ready(function(){ $('.navbar-toggle-main, .main').click(function(){ $('.navbar-toggle-main').toggleClass('is-active'); }); /** * This object controls the nav bar. Implement the add and remove * action over the elements of the nav bar that we want to change. * * @type {{flagAdd: boolean, elements: string[], add: Function, remove: Function}} */ var myNavBar = { flagAdd: true, elements: [], init: function (elements) { this.elements = elements; }, add : function() { if(this.flagAdd) { for(var i=0; i < this.elements.length; i++) { document.getElementById(this.elements[i]).className += " fixed-theme"; } this.flagAdd = false; } }, remove: function() { for(var i=0; i < this.elements.length; i++) { document.getElementById(this.elements[i]).className = document.getElementById(this.elements[i]) .className.replace( /(?:^|\s)fixed-theme(?!\S)/g , '' ); } this.flagAdd = true; } }; /** * Init the object. Pass the object the array of elements * that we want to change when the scroll goes down */ myNavBar.init(["header"]); /** * Function that manage the direction * of the scroll */ function offSetManager(){ var yOffset = 500; var currYOffSet = window.pageYOffset; if(yOffset < currYOffSet) { myNavBar.add(); }else if(currYOffSet <= yOffset){ myNavBar.remove(); } } /** * bind to the document scroll detection */ window.onscroll = function(e) { offSetManager(); }; /** * We have to do a first detectation of offset because the page * could be load with scroll down set. */ offSetManager(); }); </script> <section class="topcontain"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12">  <div class="heading"> <h1>CELL MAPPING</h1> </div>  </div> </div>  <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 header_position" >   <div class="column lavender-light hover" id="atjkcrtaadhdplxyygjx"> <div class="item col-xs-12 col-sm-12 col-md-8 no-padding box "> <div class="con-img box-inner home-slider-image large-block-strict"> <div class="overlay"></div> <img src="https://pcmi.ucsf.edu/site-assets/images/1493612271_pcmi_cell_map.jpg" alt="" class="header-image" /> </div> </div> <div class="item col-xs-12 col-sm-12 col-md-4 no-padding middle-two mission_statement_maxheight" data-maxheight="130"> <div class="con-txt slider-1-content home-header-txt"> <h2>CELL MAPPING</h2> <div class="dynamic-height-wrap"> <p class="mission_statement_readmore_text">Initially, PCMI seeks to map the physical, co-expression and genetic interaction networks associated with the ever-growing list of psychiatric disorder-associated genes. This will be conducted in neurons and other relevant cell types derived from human induced pluripotent stem cells (iPSCs) using affinity purification-mass spectrometry, CRISPR-based genetics techniques, RNA-Seq, and ChIP-Seq....</p> </div> <span class='read'><a class="hvr-icon-float-away slide-toggle action" onclick="$(this).toggleClass('hvr-icon-float-away')" style="line-height:1px !important">Read More</a></span> <div class="list light hover" style="display:none;"> <div class="listin hvr-fade"> <p> <img src="images/ccmi.png" alt="" class="header-small-icon"> <span class="header_icon_text">Cancer Cell<br> Map Initiatives</span> </p> <div class="clearfix"></div> </div> <div class="listin hvr-fade"> <p> <img src="images/hpmi.png" alt="" class="header-small-icon"> <span class="header_icon_text">Host Pathogen<br> Map Initiatives</span> </p> <div class="clearfix"></div> </div> <div class="listin hvr-fade hvrfade-last"> <p> <img src="images/pcmi.png" alt="" class="header-small-icon"> <span class="header_icon_text">Psychiatric Cell<br> Map Initiatives</span> </p> <div class="clearfix"></div> </div> <div class="clearfix"></div> </div> </div> </div> <div class="item col-xs-12 col-sm-12 col-md-8 no-padding box2 dark hover last-header"> <div class="con-text box-inner"> <p class="text_to_iterate"> Initially, PCMI seeks to map the physical, co-expression and genetic interaction networks associated with the ever-growing list of psychiatric disorder-associated genes. This will be conducted in neurons and other relevant cell types derived from human induced pluripotent stem cells (iPSCs) using affinity purification-mass spectrometry, CRISPR-based genetics techniques, RNA-Seq, and ChIP-Seq. </p> </div> </div> <div class="clearfix"></div> </div>   <script> $(document).ready(function(){ var id11 = "atjkcrtaadhdplxyygjx"; /* Animation time taken for text to appear */ var animation_time11 =750; /* Delay time for two texts to appear */ var delay_time11 =300; /* Mission statement animation time */ var mission_statement_animation_time11 =1500; /* Slide Animation Time */ var slide_animation_time11 =300; var maxheight11 = 70; var old_text11=$('#'+id11+' .mission_statement_readmore_text').html(); $('#text_to_iterate').hide(); slider_set11(id11,animation_time11,delay_time11,mission_statement_animation_time11,slide_animation_time11,old_text11,maxheight11); $(window).on('resize',function(){ slider_set11(id11,animation_time11,delay_time11,mission_statement_animation_time11,slide_animation_time11,old_text11,maxheight11); }) }); function slider_set11(id,animation_time,delay_time,mission_statement_animation_time,slide_animation_time,old_text,maxheight) { var flag=0; var image = '#'+id+' .header-image'; var action_button = '#'+id+' .action'; var readmore_text = '#'+id+' .mission_statement_readmore_text'; var long_text = '#'+id+' .text_to_iterate'; if($(window).width()>=290 && $(window).width()<=970) { $(readmore_text) .html($(long_text).html()) .parent().addClass('dynamic-height-wrap') .parent() .parent() .data('maxheight',maxheight); $(action_button).unbind() .addClass('js-dynamic-show-hide') .attr('title','Read More') .data('replaceText','X close'); $('#'+id+' .mission_statement_maxheight').dynamicMaxHeight(); } else { $(action_button).unbind(); $(readmore_text).html(old_text); $('.text_to_iterate').slimScroll({ height : "530px" /*,position : "left" *, alwaysVisible: true */}); $(action_button).html("Read More").click(function(){ if(flag==0) { flag=1; $(this).removeClass('hvr-icon-float-away').addClass('hvr-icon-float-away-left').html('Return'); $(long_text).hide(); $(image).fadeOut(animation_time); setTimeout(function(){ $(long_text).fadeIn(animation_time); },2*delay_time) } else { flag=0; $(long_text).fadeOut(100); $(this).removeClass('hvr-icon-float-away-left').addClass('hvr-icon-float-away').html('Read More'); $(image).fadeIn(animation_time); } $('#'+id+" .box").animate({ width: "toggle" },slide_animation_time); $('#'+id+" .box2").animate({ width: "toggle" },slide_animation_time); }); } } </script>  </div> </div>  </div> </section> <footer> <div class="container"> <div class="row footer-logo"> <ul><div class="col-xs-12 col-sm-4 col-md-4"> <a href="" target="_blank"> <img src="https://pcmi.ucsf.edu/site-assets/images/1556305453_NIH-NIMH-logo-new.png" class="img-responsive"> </a> </div><div class="col-xs-12 col-sm-4 col-md-4"> <a href="" target="_blank"> <img src="https://pcmi.ucsf.edu/site-assets/images/1556305474_UCSF Logo.png" class="img-responsive"> </a> </div><div class="col-xs-12 col-sm-4 col-md-4"> <a href="" target="_blank"> <img src="https://pcmi.ucsf.edu/site-assets/images/1556305508_UCSD logo.png" class="img-responsive"> </a> </div><div class="col-xs-12 col-sm-4 col-md-4"> <a href="" target="_blank"> <img src="https://pcmi.ucsf.edu/site-assets/images/1556305523_Berkeley logo.png" class="img-responsive"> </a> </div><div class="col-xs-12 col-sm-4 col-md-4"> <a href="" target="_blank"> <img src="" class="img-responsive"> </a> </div><div class="col-xs-12 col-sm-4 col-md-4"> <a href="" target="_blank"> <img src="" class="img-responsive"> </a> </div></ul> </div> <div class="row foooter-address-bar"> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-5"> <i class="fa fa-map-marker footer-map-icon" aria-hidden="true"></i> <p> <a href="https://www.google.com/maps/dir/37.7676244,-122.390957/1700 4th St, San Francisco, CA 94158-2330, USA/@37.7673359,-122.3943843,17z/data=!4m9!4m8!1m0!1m5!1m1!1s0x808f7fcf3c56e515:0x6e3ad35a9f5f83a9!2m2!1d-122.392024!2d37.7672978!3e2" target="_blank"> PCMI </a> </p> </div> <div class="col-xs-12 col-sm-12 col-md-3 col-lg-2 padding-right"> <p> <i class="fa fa-envelope footer-envelope-icon" aria-hidden="true"></i> <a href="mailto:hello@pcmi.ucsf.edu"> hello@pcmi.ucsf.edu </a> </p> </div> <div class="col-xs-12 col-sm-12 col-md-3 col-lg-2 col-lg-offset-1"> <p> <i class="fa fa-phone footer-tel-icon" aria-hidden="true"></i> 415-476-6109 </p> </div> <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2 footer-social-icon"> <ul> <ul> <li><a target="_blank" href="www.twitter.com"><i class="fa fa-twitter twitter" aria-hidden="true"></i></a></li> <li><a target="_blank" href="www.facebook.com"><i class="fa fa-facebook facebook" aria-hidden="true"></i></a></li> <li class="last"><a target="_blank" href="www.instagram.com"><i class="fa fa-instagram insta" aria-hidden="true"></i></a></li> </ul> </ul> </div> </div> <div class="row footer-links" id="footer-toggle" style="display: none;"> <div class="col-md-12"> <h2>RESOURCES</h2> </div> <div class="col-xs-12 col-md-12"> <ul id="main-navbar"><li><a href="https://pcmi.ucsf.edu">home</a></li><li><a href="https://pcmi.ucsf.edu/about">About</a></li><li><a href="https://pcmi.ucsf.edu/investigators">Investigators</a></li><li><a href="https://pcmi.ucsf.edu/research">research</a></li><li><a href="https://pcmi.ucsf.edu/publications">Publications</a></li><li><a href="https://pcmi.ucsf.edu/mapping">Mapping</a></li><li><a href="https://pcmi.ucsf.edu/technology">Technology</a></li><li><a href="https://pcmi.ucsf.edu/events">Events</a></li><li><a href="https://pcmi.ucsf.edu/contact-us">Contact Us</a></li></ul> </div> </div> </div> </footer> <div class="footer-close-panel" id="footer-close-panel"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-5 col-md-4 padding-right copyright-txt"> <p>漏2019 The Regents of the University of California</p> </div> <div class="col-xs-12 col-sm-2 col-sm-offset-1 col-md-1 col-md-offset-2 more-button no-padding"> <div class="mobile-more-btn"> <p> <a id="menu-open-close"><span id="spantext">More</span> <img src="images/scroll-down.png" class="img-responsive footer-more"></a> </p> </div> </div> <div class="col-xs-12 col-sm-3 col-md-3 col-md-offset-2 text-right pull-right"> <p>Site design by <span><a href="http://www.goodvsevil.co" target="_blank">Good vs Evil</a></span></p> </div> </div> </div> </div> <script type='text/javascript' src='scripts/footer.js'></script> </body> </html>

CINXE.COM

PCMI | MAPPING