6bfdbe4ecaaf5cbc14f3811873696bfe9bdbee05 gperez2 Fri Oct 3 17:08:00 2025 -0700 Updating the poster gallery and incorporating teams feedback, refs #36182 diff --git src/hg/htdocs/goldenPath/help/posters.html src/hg/htdocs/goldenPath/help/posters.html index 151a59e3ef0..88f6081ebc7 100755 --- src/hg/htdocs/goldenPath/help/posters.html +++ src/hg/htdocs/goldenPath/help/posters.html @@ -1,504 +1,515 @@ <!DOCTYPE html> -<!--#set var="TITLE" value="Genome Browser Training" --> +<!--#set var="TITLE" value="Genome Browser Poster Gallery" --> <!--#set var="ROOT" value="../.." --> <!-- Relative paths to support mirror sites with non-standard GB docs install --> <!--#include virtual="$ROOT/inc/gbPageStart.html" --> <style> -/* --- Collapsible button styling --- */ + /* === Poster box styling === */ + .poster-box { + text-align: center; /* center text and image inside poster cell */ + } + + /* clickable image itself should only be the visible PNG */ + .poster-box a img { + display: inline-block; /* ensures the clickable area = only the image */ + } + + /* wrapper link around poster content */ + .poster-link { + text-decoration: none; + display: inline-block; /* shrink to contents */ + text-align: center; + color: inherit; /* inherit surrounding text color */ + } + + /* conference label */ + .poster-conf { + display: block; + font-size: 18px; + font-weight: bold; + } + + /* poster title under conference name */ + .poster-title { + display: block; + font-size: 14px; + color: #333; + } + + /* poster preview image (thumbnail) */ + .poster-img { + display: block; + margin: 0 auto; + max-width: 400px; + height: auto; + } + + /* larger preview version for certain posters */ + .poster-img.large { + max-width: 600px; /* new larger preview width */ + width: 100%; + height: auto; + } + + /* === Collapsible year button styling === */ .collapsible { background-color: #4C759C; color: white; cursor: pointer; - padding: 6px 20px; + padding: 8px 20px; width: 100%; text-align: left; - font-size: 17px; + font-size: 20px; font-weight: bold; + border: none; } + .collapsible:hover { background-color: #327DE4; } + .collapsible:after { content: '\002B'; float: right; margin-left: 5px; } + .collapsible.active:after { content: '\2212'; } -.collapsible:hover { - background-color: #327DE4; + .collapseMe { + padding: 0 18px; + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease, padding 0.3s ease; + } + .collapseMe.open { + padding: 12px 18px 24px; } -/* Add "+" sign to collapsible buttons */ -.collapsible:after { - content: '\002B'; /* Unicode plus sign */ - color: white; - font-weight: bold; - float: right; - margin-left: 5px; + /* Center year navigation */ + .year-nav { + display: flex; + justify-content: center; + gap: 40px; + margin-bottom: 20px; + } + + .year-nav ul { + list-style: none; /* remove bullets */ + padding: 0; + margin: 0; } -/* Change "+" to "–" when active */ -.active:after { - content: "\2212"; /* Unicode minus sign */ + .year-nav a { + text-decoration: none; font-weight: bold; + font-size: 20px; + color: #004080; /* UCSC dark blue */ + transition: color 0.2s ease; } -/* Collapsible content (hidden by default) */ -.collapseMe { - padding: 0 18px; - max-height: 0; - overflow: hidden; + .year-nav a:hover { + color: #327DE4; /* lighter blue on hover */ + text-decoration: underline; } -/* Centered links under poster thumbnails */ -.poster-link { - display: block; - text-align: center; - margin-top: 8px; + .year-nav li { + margin: 6px 0; + } + + .year-nav .col-sm-3 { + padding-left: 120px; + padding-right: 120px; + } + + /* small responsive */ + @media (max-width: 768px) { + .col-md-6, .col-md-4, .col-md-12 { width: 100%; display: block; } + .poster-img { width: 320px; } } /* Reserved for additional genome-specific styles */ .otherGenomes { -} </style> <h1>UCSC Genome Browser Poster Gallery</h1> -<!-- =================== YEAR 2025 =================== --> -<button id="2025" class="collapsible active" style="font-size: 20px;">2025</button> -<div class="collapseMe" style="max-height: 2000px;"> <!-- set high enough to fit content --> +<!-- ===== Year Navigation Menu (4 columns, 2025-2015) ===== --> +<div class="container year-nav"> <div class="row"> - - <!-- Left column --> - <div class="col-md-6"> + <div class="col-sm-3"> <ul> - <!-- Link to ESHG 2025 Poster --> - <a class="poster-link" href="/goldenPath/posters/trackDecorators_ESHG2025.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - ESHG 2025 - </a> - <!-- PDF Embed for inline preview --> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src="/goldenPath/posters/trackDecorators_ESHG2025.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> + <li><a href="#2025">2025</a></li> + <li><a href="#2024">2024</a></li> + <li><a href="#2023">2023</a></li> + </ul> </div> + + <div class="col-sm-3"> + <ul> + <li><a href="#2022">2022</a></li> + <li><a href="#2021">2021</a></li> + <li><a href="#2020">2020</a></li> </ul> </div> - <!-- Right column --> - <div class="col-md-6"> + <div class="col-sm-3"> <ul> - <!-- Link to Biology of Genomes 2025 Poster --> - <a class="poster-link" href="/goldenPath/posters/BiologyofGenomes2025.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - Biology of Genomes 2025 - </a> - <!-- PDF Embed for inline preview --> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src="/goldenPath/posters/BiologyofGenomes2025.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> + <li><a href="#2019">2019</a></li> + <li><a href="#2018">2018</a></li> + <li><a href="#2017">2017</a></li> + </ul> </div> + + <div class="col-sm-3"> + <ul> + <li><a href="#2016">2016</a></li> + <li><a href="#2015">2015</a></li> </ul> </div> </div> </div> -<!-- =================== YEAR 2024 =================== --> -<button id="2024" class="collapsible" style="font-size: 20px;">2024</button> +<!-- ===== Poster Sections ===== --> +<!-- ======= YEAR 2025 ======= --> +<button id="2025" class="collapsible active">2025</button> <div class="collapseMe" > <div class="row"> + <div class="col-md-6"> + <div class="poster-box"> + <!-- Poster link (PDF) + preview (PNG) --> + <a class="poster-link" href="/goldenPath/posters/trackDecorators_ESHG2025.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">ESHG 2025</span> + <span class="poster-title">UCSC Genome Browser Track Decorators</span> + <img class="poster-img" src="/goldenPath/posters/trackDecorators_ESHG2025_thumb.png" alt="ESHG 2025 poster preview"> + </a> + </div> + </div> - <!-- Column 1 --> + <div class="col-md-6"> + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/BiologyofGenomes2025.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">Biology of Genomes 2025</span> + <span class="poster-title">UCSC Genome Browser: HubSpace Track Storage</span> + <img class="poster-img" src="/goldenPath/posters/BiologyofGenomes2025_thumb.png" alt="Biology of Genomes 2025 preview"> + </a> + </div> + </div> + </div> +</div> + +<!-- ======= YEAR 2024 ======= --> +<button id="2024" class="collapsible active">2024</button> +<div class="collapseMe" > + <div class="row"> <div class="col-md-4"> - <ul> - <!-- Link to Biology of Genomes 2024 Poster --> - <a class="poster-link" href="/goldenPath/posters/BiologyofGenomes2024.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - Biology of Genomes 2024 + <div class="poster-box"> + <!-- Poster link (PDF) + preview (PNG) --> + <a class="poster-link" href="/goldenPath/posters/BiologyofGenomes2024.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">Biology of Genomes 2024</span> + <span class="poster-title">Viewing Human Pangenome Research Consortium (HPRC) data on the UCSC Genome Browser</span> + <img class="poster-img" src="/goldenPath/posters/BiologyofGenomes2024_thumb.png" alt="Biology of Genomes 2024 preview"> </a> - <!-- PDF Embed for inline preview --> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src="/goldenPath/posters/BiologyofGenomes2024.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> - </div> - <!-- Link to VEPTC 2024 Poster --> - <a class="poster-link" href="/goldenPath/posters/veptc2024.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - VEPTC 2024 + </div> + + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/veptc2024.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">VEPTC 2024</span> + <span class="poster-title">UCSC Genome Browser: Latest developments for variant interpretation</span> + <img class="poster-img" src="/goldenPath/posters/veptc2024_thumb.png" alt="VEPTC 2024 preview"> </a> - <!-- PDF Embed for inline preview --> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src=/goldenPath/posters/veptc2024.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> </div> - </ul> </div> - <!-- Column 2 --> <div class="col-md-4"> - <ul> - <!-- Link to Biology of ICTE 2024 Poster --> - <a class="poster-link" href="/goldenPath/posters/ICTE2024.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - ICTE 2024 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/ICTE2024.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">ICTE 2024</span> + <span class="poster-title">Visualizing transposable elements with the UCSC Genome Browser</span> + <img class="poster-img" src="/goldenPath/posters/ICTE2024_thumb.png" alt="ICTE 2024 preview"> </a> - <!-- PDF Embed for inline preview --> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src=/goldenPath/posters/ICTE2024.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> </div> - </ul> </div> - <!-- Column 3 --> <div class="col-md-4"> - <ul> - <!-- Link to ISV 2024 Poster --> - <a class="poster-link" href="/goldenPath/posters/ISV2024.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - ISV 2024 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/ISV2024.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">ISV 2024</span> + <span class="poster-title">UCSC Genome Browser: Latest resources for variant interpretation</span> + <img class="poster-img" src="/goldenPath/posters/ISV2024_thumb.png" alt="ISV 2024 preview"> </a> - <!-- PDF Embed for inline preview --> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src="/goldenPath/posters/ISV2024.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> </div> - </ul> </div> </div> </div> -<!-- =================== YEAR 2023 =================== --> -<button id="2023" class="collapsible" style="font-size: 20px;">2023</button> +<!-- ======= YEAR 2023 ======= --> +<button id="2023" class="collapsible active">2023</button> <div class="collapseMe" > <div class="row"> - <!-- Column 1 --> <div class="col-md-4"> - <ul> - <a class="poster-link" href="/goldenPath/posters/genomeBrowserBoG2023.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - Biology of Genomes 2023 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/genomeBrowserBoG2023.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">Biology of Genomes 2023</span> + <span class="poster-title">Visualizing genomic rearrangements with the UCSC Genome Browser snakes display</span> + <img class="poster-img" src="/goldenPath/posters/genomeBrowserBoG2023_thumb.png" alt="BoG 2023 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src="/goldenPath/posters/genomeBrowserBoG2023.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> </div> - </ul> </div> - <!-- Column 2 --> <div class="col-md-4"> - <ul> - <a class="poster-link" href="/goldenPath/posters/genomeBrowserASHG2023.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - ASHG 2023 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/genomeBrowserASHG2023.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">ASHG 2023</span> + <span class="poster-title">quickLift: Lifting UCSC Genome Browser annotations on demand</span> + <img class="poster-img" src="/goldenPath/posters/genomeBrowserASHG2023_thumb.png" alt="ASHG 2023 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src=/goldenPath/posters/genomeBrowserASHG2023.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> </div> - </ul> </div> - <!-- Column 3 --> <div class="col-md-4"> - <ul> - <a class="poster-link" href="/goldenPath/posters/CSHL_GenomeInformatics_2023.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - CSHL 2023 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/CSHL_GenomeInformatics_2023.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">CSHL 2023</span> + <span class="poster-title">GenArk: Towards A Million Genome Browsers</span> + <img class="poster-img" src="/goldenPath/posters/CSHL_GenomeInformatics_2023_thumb.png" alt="CSHL 2023 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src="/goldenPath/posters/CSHL_GenomeInformatics_2023.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> </div> - </ul> </div> </div> </div> -<!-- =================== YEAR 2021 =================== --> -<button id="2021" class="collapsible" style="font-size: 20px;">2021</button> +<!-- ======= YEAR 2021 ======= --> +<button id="2021" class="collapsible active">2021</button> <div class="collapseMe" > <div class="row"> <div class="col-md-12"> - <ul> - <a class="poster-link" href="/goldenPath/posters/CSHL_2021.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - CSHL 2021 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/CSHL_2021.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">CSHL 2021</span> + <span class="poster-title">UCSC Genome Browser in the Cloud (GBiC)</span> + <img class="poster-img" src="/goldenPath/posters/CSHL_2021_thumb.png" alt="CSHL 2021 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin: 5px auto;"> - <embed src="/goldenPath/posters/CSHL_2021.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> </div> - </ul> </div> </div> </div> -<!-- =================== YEAR 2020 =================== --> -<button id="2020" class="collapsible" style="font-size: 20px;">2020</button> +<!-- ======= YEAR 2020 ======= --> +<button id="2020" class="collapsible active">2020</button> <div class="collapseMe" > <div class="row"> <div class="col-md-12"> - <ul> - <a class="poster-link" href="/goldenPath/posters/PAG_Poster_API_2020.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - PAG 2020 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/PAG_Poster_API_2020.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">PAG 2020</span> + <span class="poster-title">UCSC Genome Browser REST API Returning Assembly Hub JSON Data</span> + <img class="poster-img" src="/goldenPath/posters/PAG_Poster_API_2020_thumb.png" alt="PAG 2020 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin: 5px auto;"> - <embed src="/goldenPath/posters/PAG_Poster_API_2020.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> </div> - </ul> </div> </div> </div> -<!-- =================== YEAR 2019 =================== --> -<button id="2019" class="collapsible" style="font-size: 20px;">2019</button> +<!-- ======= YEAR 2019 ======= --> +<button id="2019" class="collapsible active">2019</button> <div class="collapseMe" > <div class="row"> - <!-- Left column --> <div class="col-md-6"> - <ul> - <a class="poster-link" href="/goldenPath/posters/UCSC_PAG_2019_AssemblyHub.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - PAG 2019 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/UCSC_PAG_2019_AssemblyHub.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">PAG 2019</span> + <span class="poster-title">Annotating Variants and Displaying Multiple Alignments on Your Assemblies Using the UCSC Genome Browser</span> + <img class="poster-img" src="/goldenPath/posters/UCSC_PAG_2019_AssemblyHub_thumb.png" alt="PAG 2019 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src="/goldenPath/posters/UCSC_PAG_2019_AssemblyHub.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> </div> - </ul> </div> - <!-- Right column --> <div class="col-md-6"> - <ul> - <a class="poster-link" href="/goldenPath/posters/ASHG_2019_Interact.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - ASHG 2019 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/ASHG_2019_Interact.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">ASHG 2019</span> + <span class="poster-title">UCSC Genome Browser: New Interact Format and GeneHancer Data</span> + <img class="poster-img" src="/goldenPath/posters/ASHG_2019_Interact_thumb.png" alt="ASHG 2019 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src="/goldenPath/posters/ASHG_2019_Interact.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> </div> - </ul> </div> </div> </div> -<!-- =================== YEAR 2018 =================== --> -<button id="2018" class="collapsible" style="font-size: 20px;">2018</button> +<!-- ======= YEAR 2018 ======= --> +<button id="2018" class="collapsible active">2018</button> <div class="collapseMe" > <div class="row"> - <!-- Left column --> <div class="col-md-6"> - <ul> - <a class="poster-link" href="/goldenPath/posters/UCSC_BoG_2018_GtexPoster.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - Biology of Genomes 2018 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/UCSC_BoG_2018_GtexPoster.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">Biology of Genomes 2018</span> + <span class="poster-title">GTEx resources and new 'barChart' and 'interacton' track displays inspired by GTEx</span> + <img class="poster-img" src="/goldenPath/posters/UCSC_BoG_2018_GtexPoster_thumb.png" alt="BoG 2018 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src="/goldenPath/posters/UCSC_BoG_2018_GtexPoster.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> </div> - </ul> </div> - <!-- Right column --> <div class="col-md-6"> - <ul> - <a class="poster-link" href="/goldenPath/posters/UcscPostDoc_2018.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - UCSC PostDoc 2018 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/UcscPostDoc_2018.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">UCSC PostDoc 2018</span> + <span class="poster-title">Visualizing RNA-seq data in the UCSC Genome Browser</span> + <img class="poster-img" src="/goldenPath/posters/UcscPostDoc_2018_thumb.png" alt="PostDoc 2018 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src="/goldenPath/posters/UcscPostDoc_2018.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> </div> - </ul> </div> </div> </div> -<!-- =================== YEAR 2017 =================== --> -<button id="2017" class="collapsible" style="font-size: 20px;">2017</button> +<!-- ======= YEAR 2017 ======= --> +<button id="2017" class="collapsible active">2017</button> <div class="collapseMe" > <div class="row"> <div class="col-md-12"> - <ul> - <a class="poster-link" href="/goldenPath/posters/GenomeInformatics2017.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - Genome Informatics 2017 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/GenomeInformatics2017.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">Genome Informatics 2017</span> + <span class="poster-title">HGVS variant nomenclature in the UCSC Genome Browser</span> + <img class="poster-img" src="/goldenPath/posters/GenomeInformatics2017_thumb.png" alt="Genome Informatics 2017 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin: 5px auto;"> - <embed src="/goldenPath/posters/GenomeInformatics2017.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> </div> - </ul> </div> </div> </div> -<!-- =================== YEAR 2016 =================== --> -<button id="2016" class="collapsible" style="font-size: 20px;">2016</button> +<!-- ======= YEAR 2016 ======= --> +<button id="2016" class="collapsible active">2016</button> <div class="collapseMe" > <div class="row"> - <!-- Column 1 --> <div class="col-md-4"> - <ul> - <a class="poster-link" href="/goldenPath/posters/ACMGposter2016.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - ACMG 2016 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/ACMGposter2016.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">ACMG 2016</span> + <span class="poster-title">Visualize and Analyze Your Genomic Data on the UCSC Genome Browser</span> + <img class="poster-img" src="/goldenPath/posters/ACMGposter2016_thumb.png" alt="ACMG 2016 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src="/goldenPath/posters/ACMGposter2016.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> </div> - <a class="poster-link" href="/goldenPath/posters/GTEX_2016_Poster.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - GTEx Community Meeting 2016 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/GTEX_2016_Poster.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">GTEx 2016</span> + <span class="poster-title">GTEx Data in the UCSC Genome Browser 2016 Update</span> + <img class="poster-img" src="/goldenPath/posters/GTEX_2016_Poster_thumb.png" alt="GTEx 2016 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src=/goldenPath/posters/GTEX_2016_Poster.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> </div> - </ul> </div> - <!-- Column 2 --> <div class="col-md-4"> - <ul> - <a class="poster-link" href="/goldenPath/posters/PosterIchg2016.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - ICHG 2016 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/PosterIchg2016.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">ICHG 2016</span> + <span class="poster-title">Visualize and Analyze Your Genomic Data on the UCSC Genome Browser</span> + <img class="poster-img" src="/goldenPath/posters/PosterIchg2016_thumb.png" alt="ICHG 2016 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src=/goldenPath/posters/PosterIchg2016.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> + </div> - <a class="poster-link" href="/goldenPath/posters/CrisporCshl2016.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - CSHL 2016 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/CrisporCshl2016.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">CSHL 2016</span> + <span class="poster-title">Evaluation of off-target and on-target scoring algorithms: Integration into crispor.org and the UCSC Genome Browser</span> + <img class="poster-img" src="/goldenPath/posters/CrisporCshl2016_thumb.png" alt="CSHL 2016 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src=/goldenPath/posters/CrisporCshl2016.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> - </div> - </ul> </div> - <!-- Column 3 --> <div class="col-md-4"> - <ul> - <a class="poster-link" href="/goldenPath/posters/Multi-region-BoG2016.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - Biology of Genomes 2016 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/Multi-region-BoG2016.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">Biology of Genomes 2016</span> + <span class="poster-title">New UCSC Genome Browser Views: Exon-Only, Gene-Only, Alternate Haplotypes, and Custom Regions</span> + <img class="poster-img" src="/goldenPath/posters/Multi-region-BoG2016_thumb.png" alt="BoG 2016 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src="/goldenPath/posters/Multi-region-BoG2016.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> </div> - </ul> </div> </div> </div> -<!-- =================== YEAR 2015 =================== --> -<button id="2015" class="collapsible" style="font-size: 20px;">2015</button> +<!-- ======= YEAR 2015 ======= --> +<button id="2015" class="collapsible active">2015</button> <div class="collapseMe" > <div class="row"> - <!-- Column 1 --> <div class="col-md-4"> - <ul> - <a class="poster-link" href="/goldenPath/posters/Acmg2015poster.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - ACMG 2015 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/Acmg2015poster.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">ACMG 2015</span> + <span class="poster-title">UCSC Genome Browser and Variant Annotation Integrator</span> + <img class="poster-img" src="/goldenPath/posters/Acmg2015poster_thumb.png" alt="ACMG 2015 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src="/goldenPath/posters/Acmg2015poster.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> </div> - <a class="poster-link" href="/goldenPath/posters/BioengSymp2015Poster.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - UC-wide Bioengineering Symposium 2015 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/BioengSymp2015Poster.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">UC-wide Bioeng 2015</span> + <span class="poster-title">Use The UCSC Genome Browser To Visualize And Analyze Your Genomic Data</span> + <img class="poster-img" src="/goldenPath/posters/BioengSymp2015Poster_thumb.png" alt="Bioeng 2015 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src=/goldenPath/posters/BioengSymp2015Poster.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> </div> - </ul> </div> - <!-- Column 2 --> <div class="col-md-4"> - <ul> - <a class="poster-link" href="/goldenPath/posters/G10K2015.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - Genome 10K 2015 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/G10K2015.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">Genome 10K 2015</span> + <span class="poster-title">Assembly Hubs and Genome Browser in a Box Makes Viewing Private Annotations and Custom Sequences Easy</span> + <img class="poster-img" src="/goldenPath/posters/G10K2015_thumb.png" alt="G10K 2015 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src=/goldenPath/posters/G10K2015.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> + </div> - <a class="poster-link" href="/goldenPath/posters/GTEX2015Poster.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - GTEx Community Meeting 2015 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/GTEX2015Poster.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">GTEx 2015</span> + <span class="poster-title">GTEx Data in the UCSC Genome Browser</span> + <img class="poster-img" src="/goldenPath/posters/GTEX2015Poster_thumb.png" alt="GTEx 2015 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src=/goldenPath/posters/GTEX2015Poster.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> - </div> - </ul> </div> - <!-- Column 3 --> <div class="col-md-4"> - <ul> - <a class="poster-link" href="/goldenPath/posters/BoG2015DataIntegrator.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - Biology of Genomes 2015 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/BoG2015DataIntegrator.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">BoG 2015</span> + <span class="poster-title">The Data Integrator: a new way to combine data sources underlying the UCSC Genome Browser</span> + <img class="poster-img" src="/goldenPath/posters/BoG2015DataIntegrator_thumb.png" alt="BoG 2015 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src="/goldenPath/posters/BoG2015DataIntegrator.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" /> + </div> - <a class="poster-link" href="/goldenPath/posters/UCSC_Proteomics_HUPO2015_Poster.pdf" target="_blank" - style="font-size:24px; font-weight:bold; display:block; text-align:center; margin-top:8px;"> - HUPO 2015 + <div class="poster-box"> + <a class="poster-link" href="/goldenPath/posters/UCSC_Proteomics_HUPO2015_Poster.pdf" target="_blank" rel="noopener"> + <span class="poster-conf">HUPO 2015</span> + <span class="poster-title">Visualizing proteomics data in genomic context using the UCSC Genome Browser</span> + <img class="poster-img" src="/goldenPath/posters/UCSC_Proteomics_HUPO2015_Poster_thumb.png" alt="HUPO 2015 preview"> </a> - <div style="max-width:400px; border:1px solid #ccc; margin-bottom:5px; margin-left:auto; margin-right:auto;"> - <embed src=/goldenPath/posters/UCSC_Proteomics_HUPO2015_Poster.pdf#toolbar=0&navpanes=0&scrollbar=0" - type="application/pdf" width="100%" height="300px" />``` </div> - </ul> </div> </div> </div> - - <script> -/* =================== Collapsible Section Logic =================== */ +/* === Collapsible year sections logic === */ document.addEventListener("DOMContentLoaded", function() { const buttons = document.querySelectorAll(".collapsible"); buttons.forEach(btn => { + let content = btn.nextElementSibling; + + // Open all collapsibles by default + btn.classList.add("active"); + content.classList.add("open"); + content.style.maxHeight = "none"; // allow natural height + + // Toggle open/close when clicking button btn.addEventListener("click", function() { - // Toggle "active" class on the clicked button this.classList.toggle("active"); - // Find the next sibling element (collapsible content) - let content = this.nextElementSibling; - - // Expand or collapse the section - if (content.style.maxHeight) { - content.style.maxHeight = null; // Collapse + if (content.classList.contains("open")) { + content.classList.remove("open"); + content.style.maxHeight = null; } else { - content.style.maxHeight = content.scrollHeight + "px"; // Expand + content.classList.add("open"); + content.style.maxHeight = "none"; // expand fully } }); }); }); </script> - <!--#include virtual="$ROOT/inc/gbPageEnd.html" -->