Last active
June 24, 2025 20:11
-
-
Save disraelBCM/85004cd1cdf8a9e0705fff2165df3287 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html><!-- This site was created in Webflow. https://webflow.com --><!-- Last Published: Tue Jun 24 2025 02:41:22 GMT+0000 (Coordinated Universal Time) --> | |
| <html data-wf-page="681408babb62a5a9708698b7" data-wf-site="681408babb62a5a9708698ae"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Project Journey</title> | |
| <meta content="width=device-width, initial-scale=1" name="viewport"> | |
| <link href="/css/md-journey/normalize.css?cb=CACHEBUSTERVALUE" rel="stylesheet" type="text/css"> | |
| <link href="/css/md-journey/webflow.css?cb=CACHEBUSTERVALUE" rel="stylesheet" type="text/css"> | |
| <link href="/css/md-journey/project-journey.webflow.css?cb=CACHEBUSTERVALUE" rel="stylesheet" type="text/css"> | |
| <link href="https://fonts.googleapis.com" rel="preconnect"> | |
| <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script> | |
| <script type="text/javascript">WebFont.load({ google: { families: ["Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","Merriweather:300,300italic,400,400italic,700,700italic,900,900italic","Roboto:300,regular,500,600,700","Roboto Serif:300,regular,500,600,700","Poppins:regular","Poppins:300,regular"] }});</script> | |
| <script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script> | |
| <link rel="icon" type="image/svg+xml" href="https://www.conexiant.com/media/psjp1c0p/conexiant-favicon.svg"> | |
| <link rel="icon" type="image/png" href="https://www.conexiant.com/media/xiugt51v/conexiant-favicon.png"> | |
| <style> | |
| @media screen and (min-width: 2000px) { | |
| .section-container { | |
| min-height: auto!important; | |
| height: auto!important; | |
| } | |
| } | |
| .w-slider-dot { | |
| height: 8px; | |
| width: 8px; | |
| background: #8FA2B5; | |
| } | |
| .w-slider-dot.w-active { | |
| width: 48px; | |
| height: 8px; | |
| background: #fff; | |
| } | |
| .w-slider-nav.w-round>div { | |
| border-radius: 4px; | |
| } | |
| .full-width-ad { | |
| position: fixed; | |
| width: 100%; | |
| left: 0; | |
| z-index: 9999; | |
| transition: transform 0.4s ease; | |
| } | |
| /* Default position at the top */ | |
| .full-width-ad.top { | |
| bottom: auto; | |
| transform: translateY(0); | |
| } | |
| /* Shift to bottom */ | |
| .full-width-ad.bottom { | |
| top: auto; | |
| bottom: 0px; | |
| transform: translateY(0); | |
| } | |
| .carousel-thumbnail-container::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(0deg, hsl(0deg 0% 0% / 60%), transparent); | |
| z-index: 1; | |
| } | |
| .section-carousel { | |
| will-change: scroll-position; | |
| } | |
| .caret-left, | |
| .caret-right { | |
| cursor: pointer; | |
| transition: opacity 0.3s ease; | |
| } | |
| .modal-nav-btn { | |
| opacity: 1; | |
| transition: opacity 0.2s ease; | |
| cursor: pointer; | |
| } | |
| .modal-nav-btn:hover { | |
| opacity: 0.6; | |
| } | |
| .modal-nav-btn.disabled-btn { | |
| opacity: 0.6; | |
| pointer-events: none; /* Optional: prevents clicks */ | |
| } | |
| .diagram-hs-link .hs-img { | |
| opacity: 0; | |
| transition: opacity 0.8s ease; | |
| } | |
| .hs-marker svg { | |
| fill: white; | |
| transition: fill 0.8s ease; | |
| pointer-events: auto; | |
| cursor: pointer; | |
| } | |
| .diagram-hs-link:hover .hs-img, | |
| .diagram-hs-link.active-hs .hs-img { | |
| opacity: 1; | |
| } | |
| .marker-circle { | |
| transition: fill 0.3s ease; | |
| pointer-events: none; /* ensures hover behavior isn't blocked */ | |
| } | |
| .diagram-hs-link:hover .marker-circle, | |
| .diagram-hs-link.active .marker-circle { | |
| fill: url(#pulse-gradient); | |
| } | |
| #hotspot-lines line { | |
| stroke: #FB7C01; | |
| stroke-width: 1; | |
| } | |
| @media (hover: none) and (pointer: coarse) { | |
| .modal-content-container-inner { | |
| /* Styles for touch devices */ | |
| display: grid; | |
| } | |
| } | |
| .jwplayer{ | |
| aspect-ratio: 24 / 10; | |
| } | |
| .qp-subtab-c { | |
| overflow: visible; | |
| } | |
| .qp_container { | |
| margin-bottom: 0px; | |
| height: auto; | |
| overflow: visible; | |
| } | |
| .quiz-container.quiz-embed { | |
| overflow: visible!important; | |
| } | |
| [data-title="quiz"].modal-container .w-embed.w-script { | |
| height: 75vh; | |
| overflow-y: scroll; | |
| } | |
| .navbar__right-mob-btn::after { | |
| display: inline-block; | |
| color: var(--secondary-gray-50); | |
| font-size: .75rem; | |
| margin-left: .15em; | |
| vertical-align: middle; | |
| font-family: 'Material Icons'; | |
| content: "\e5cf"; | |
| border: none; | |
| line-height: 0; | |
| position: relative; | |
| top: auto; | |
| opacity: 1; | |
| text-decoration: none; | |
| transition: all 0.25s ease-in-out; | |
| } | |
| </style> | |
| <script src="https://cdn.ymaws.com/apsho.site-ym.com/resource/resmgr/scripts/jwplayer.js"></script> | |
| <script> | |
| //AEP Player | |
| function httpGet(theUrl) | |
| { | |
| var xmlHttp = new XMLHttpRequest(); | |
| xmlHttp.open( "GET", theUrl, false ); // false for synchronous request | |
| xmlHttp.send( null ); | |
| return xmlHttp.responseText; | |
| } | |
| function loadVideo(identifier, site) | |
| { | |
| var url ="https://tableaureportfunctions.azurewebsites.net/api/PlaylistManifestRequest?code=VZL_HKwwCF1ZZa4C0x_8SqogrLpZV6OdeqsGZUcnqhReAzFuQTX4Xg==&id=" + identifier + "&site=" + site; | |
| var responseText = httpGet(url); | |
| return '[' + responseText + ']'; | |
| } | |
| jwplayer.key="XmmvJbXvESjwXEeanG2bgwqrcpYoe09XeKzIN6eVr4BNCpuo"; | |
| </script> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"> | |
| <meta content="Webflow" name="generator"> | |
| <link href="../../css/md-journey/normalize.css?cb=CACHEBUSTERVALUE" rel="stylesheet" type="text/css"> | |
| <link href="../../css/md-journey/webflow.css?cb=CACHEBUSTERVALUE" rel="stylesheet" type="text/css"> | |
| <link href="../../css/md-journey/project-journey.webflow.css?cb=CACHEBUSTERVALUE" rel="stylesheet" type="text/css"> | |
| <link href="https://fonts.googleapis.com" rel="preconnect"> | |
| <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script> | |
| <script type="text/javascript">WebFont.load({ google: { families: ["Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","Merriweather:300,300italic,400,400italic,700,700italic,900,900italic","Roboto:300,regular,500,600,700","Roboto Serif:300,regular,500,600,700","Poppins:regular","Poppins:300,regular"] }});</script> | |
| <script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script> | |
| <link rel="icon" type="image/svg+xml" href="https://www.conexiant.com/media/psjp1c0p/conexiant-favicon.svg"> | |
| <link rel="icon" type="image/png" href="https://www.conexiant.com/media/xiugt51v/conexiant-favicon.png"> | |
| <style> | |
| @media screen and (min-width: 2000px) { | |
| .section-container { | |
| min-height: auto!important; | |
| height: auto!important; | |
| } | |
| } | |
| .w-slider-dot { | |
| height: 8px; | |
| width: 8px; | |
| background: #8FA2B5; | |
| } | |
| .w-slider-dot.w-active { | |
| width: 48px; | |
| height: 8px; | |
| background: #fff; | |
| } | |
| .w-slider-nav.w-round>div { | |
| border-radius: 4px; | |
| } | |
| .full-width-ad { | |
| position: fixed; | |
| width: 100%; | |
| left: 0; | |
| z-index: 9999; | |
| transition: transform 0.4s ease; | |
| } | |
| /* Default position at the top */ | |
| .full-width-ad.top { | |
| bottom: auto; | |
| transform: translateY(0); | |
| } | |
| /* Shift to bottom */ | |
| .full-width-ad.bottom { | |
| top: auto; | |
| bottom: 0px; | |
| transform: translateY(0); | |
| } | |
| .carousel-thumbnail-container::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(0deg, hsl(0deg 0% 0% / 60%), transparent); | |
| z-index: 1; | |
| } | |
| .section-carousel { | |
| will-change: scroll-position; | |
| } | |
| .caret-left, | |
| .caret-right { | |
| cursor: pointer; | |
| transition: opacity 0.3s ease; | |
| } | |
| .modal-nav-btn { | |
| opacity: 1; | |
| transition: opacity 0.2s ease; | |
| cursor: pointer; | |
| } | |
| .modal-nav-btn:hover { | |
| opacity: 0.6; | |
| } | |
| .modal-nav-btn.disabled-btn { | |
| opacity: 0.6; | |
| pointer-events: none; /* Optional: prevents clicks */ | |
| } | |
| .diagram-hs-link .hs-img { | |
| opacity: 0; | |
| transition: opacity 0.8s ease; | |
| } | |
| .hs-marker svg { | |
| fill: white; | |
| transition: fill 0.8s ease; | |
| pointer-events: auto; | |
| cursor: pointer; | |
| } | |
| .diagram-hs-link:hover .hs-img, | |
| .diagram-hs-link.active-hs .hs-img { | |
| opacity: 1; | |
| } | |
| .marker-circle { | |
| transition: fill 0.3s ease; | |
| pointer-events: none; /* ensures hover behavior isn't blocked */ | |
| } | |
| .diagram-hs-link:hover .marker-circle, | |
| .diagram-hs-link.active .marker-circle { | |
| fill: url(#pulse-gradient); | |
| } | |
| #hotspot-lines line { | |
| stroke: #FB7C01; | |
| stroke-width: 1; | |
| } | |
| @media (hover: none) and (pointer: coarse) { | |
| .modal-content-container-inner { | |
| /* Styles for touch devices */ | |
| display: grid; | |
| } | |
| } | |
| .jwplayer{ | |
| aspect-ratio: 24 / 10; | |
| } | |
| .qp-subtab-c { | |
| overflow: visible; | |
| } | |
| .qp_container { | |
| margin-bottom: 0px; | |
| height: auto; | |
| overflow: visible; | |
| } | |
| .quiz-container.quiz-embed { | |
| overflow: visible!important; | |
| } | |
| [data-title="quiz"].modal-container .w-embed.w-script { | |
| height: 75vh; | |
| overflow-y: scroll; | |
| } | |
| .navbar__right-mob-btn::after { | |
| display: inline-block; | |
| color: var(--secondary-gray-50); | |
| font-size: .75rem; | |
| margin-left: .15em; | |
| vertical-align: middle; | |
| font-family: 'Material Icons'; | |
| content: "\e5cf"; | |
| border: none; | |
| line-height: 0; | |
| position: relative; | |
| top: auto; | |
| opacity: 1; | |
| text-decoration: none; | |
| transition: all 0.25s ease-in-out; | |
| } | |
| </style> | |
| <script src="https://cdn.ymaws.com/apsho.site-ym.com/resource/resmgr/scripts/jwplayer.js"></script> | |
| <script> | |
| //AEP Player | |
| function httpGet(theUrl) | |
| { | |
| var xmlHttp = new XMLHttpRequest(); | |
| xmlHttp.open( "GET", theUrl, false ); // false for synchronous request | |
| xmlHttp.send( null ); | |
| return xmlHttp.responseText; | |
| } | |
| function loadVideo(identifier, site) | |
| { | |
| var url ="https://tableaureportfunctions.azurewebsites.net/api/PlaylistManifestRequest?code=VZL_HKwwCF1ZZa4C0x_8SqogrLpZV6OdeqsGZUcnqhReAzFuQTX4Xg==&id=" + identifier + "&site=" + site; | |
| var responseText = httpGet(url); | |
| return '[' + responseText + ']'; | |
| } | |
| jwplayer.key="XmmvJbXvESjwXEeanG2bgwqrcpYoe09XeKzIN6eVr4BNCpuo"; | |
| </script> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"> | |
| </head> | |
| <body class="body"> | |
| <div class="peak-nav"> | |
| <div class="navbar"> | |
| <a href="https://conexiant.com/oncology/" class="navbar__left w-inline-block"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/conexiant-oncology-logo.svg" loading="lazy" alt=""></a> | |
| <div class="narbar__right-mob"> | |
| <a data-w-id="126d7148-3b06-1940-a736-ebbf8c29675f" href="#" class="navbar__right-mob-btn w-button">Network</a> | |
| </div> | |
| <div class="navbar__right"> | |
| <a href="https://conexiant.com" target="_blank" class="peak-nav__link">Conexiant</a> | |
| <a href="https://conexiantsolutions.com/dxp" target="_blank" class="peak-nav__link">Conexiant DXP</a> | |
| <a href="https://conexianteducation.com/" target="_blank" class="peak-nav__link">Conexiant Education</a> | |
| <a href="https://conexiantsolutions.com/" target="_blank" class="peak-nav__link">Conexiant Solutions</a> | |
| <a href="https://www.aegisdentalnetwork.com/tv" target="_blank" class="peak-nav__link">Conexiant TV</a> | |
| </div> | |
| <div style="display:none" class="navbar__right-mob"> | |
| <a href="https://conexiant.com" target="_blank" class="peak-nav__link">Conexiant</a> | |
| <a href="https://conexiantsolutions.com/dxp" target="_blank" class="peak-nav__link">Conexiant DXP</a> | |
| <a href="https://conexianteducation.com/" target="_blank" class="peak-nav__link">Conexiant Education</a> | |
| <a href="https://conexiantsolutions.com/" target="_blank" class="peak-nav__link">Conexiant Solutions</a> | |
| <a href="https://www.aegisdentalnetwork.com/tv" target="_blank" class="peak-nav__link">Conexiant TV</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-layout-blockcontainer nav_container w-container"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/CIA-Logo_RGB_rev.png" loading="lazy" alt="Clinical Insights Alliance" class="logo"> | |
| <ul role="list" class="list navigation w-list-unstyled"> | |
| <li class="nav-list-item"> | |
| <a href="#" id="backToTop" class="nav_link">MD Journey</a> | |
| </li> | |
| <li class="nav-list-item"> | |
| <a href="#pathogenesis" class="nav_link">Pathogenesis</a> | |
| </li> | |
| <li class="nav-list-item"> | |
| <a href="#diagnosis" class="nav_link">Diagnosis</a> | |
| </li> | |
| <li class="nav-list-item"> | |
| <a href="#treatment" class="nav_link">Treatment</a> | |
| </li> | |
| <li class="nav-list-item"> | |
| <a href="#cost-coping" class="nav_link">Cost & Coping</a> | |
| </li> | |
| <li class="nav-list-item"> | |
| <a href="#case-studies" class="nav_link">Case Studies</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <section id="intro" aria-label="top-container" class="section-container intro"> | |
| <div class="container"> | |
| <div class="w-layout-vflex flex-block-content-container"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/CIA-Logo_RGB_rev.png" loading="lazy" alt="Clinical Insights Alliance" class="logo mobile"> | |
| <div class="div-block-5"> | |
| <h4 class="heading-7">MD Journey Introduction</h4> | |
| <h1 class="heading">Myelofibrosis</h1> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div id="pathogenesis" class="w-layout-blockcontainer section-container pathogenesis w-container"> | |
| <div class="section-body"> | |
| <div class="section-heading"> | |
| <h2 class="heading">Pathogenesis</h2> | |
| <h4 class="heading-7">Sub Headline</h4> | |
| </div> | |
| <p class="paragraph-2">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p> | |
| <div class="section-carousel-container"> | |
| <div class="section-carousel"> | |
| <div data-label="video" class="carousel-item"> | |
| <a data-slide="0" aria-label="pathogenesis" href="#" class="link-block heading-5 w-inline-block"> | |
| <div class="item-caption"> | |
| <h5>Causes, symptoms, diagnosis, treatment, pathology</h5> | |
| </div> | |
| <div class="thumbnail-play-btn"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/play-btn.svg" loading="lazy" alt="" class="play-btn"></div> | |
| <div class="carousel-thumbnail-container"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/2482d5a641610d34eddd0d6ab5f62739b507af9c.png" loading="lazy" width="300" height="Auto" alt="" class="carousel-thumbnail"></div> | |
| </a> | |
| </div> | |
| <div class="carousel-item"> | |
| <a data-slide="1" aria-label="pathogenesis" href="#" class="link-block heading-5 w-inline-block"> | |
| <div class="item-caption"> | |
| <h5>Interactive Infographic</h5> | |
| </div> | |
| <div class="thumbnail-play-btn"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/play-btn.svg" loading="lazy" alt="" class="play-btn"></div> | |
| <div class="carousel-thumbnail-container"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/infographic-thumbnail.jpg" loading="lazy" width="300" height="Auto" alt="" class="carousel-thumbnail"></div> | |
| </a> | |
| </div> | |
| <div class="carousel-item"> | |
| <a data-slide="2" aria-label="pathogenesis" href="#" class="link-block heading-5 w-inline-block"> | |
| <div class="item-caption"> | |
| <h5>Quiz</h5> | |
| </div> | |
| <div class="thumbnail-play-btn"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/play-btn.svg" loading="lazy" width="48" height="48" alt="" class="play-btn"></div> | |
| <div class="carousel-thumbnail-container"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/752019bc9f144bc9d3d456abf488e6524b5c9e1c-1.png" loading="lazy" width="300" height="Auto" alt="" class="carousel-thumbnail"></div> | |
| </a> | |
| </div> | |
| <div class="carousel-item"> | |
| <a data-slide="2" aria-label="pathogenesis" href="#" class="link-block heading-5 w-inline-block"> | |
| <div class="item-caption"> | |
| <h5>KOL Commentary</h5> | |
| </div> | |
| <div class="thumbnail-play-btn"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/play-btn.svg" loading="lazy" alt="" class="play-btn"></div> | |
| <div class="carousel-thumbnail-container"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/2482d5a641610d34eddd0d6ab5f62739b507af9c.png" loading="lazy" width="300" height="Auto" alt="" class="carousel-thumbnail"></div> | |
| </a> | |
| </div> | |
| <div class="carousel-item"> | |
| <a data-slide="2" aria-label="pathogenesis" href="#" class="link-block heading-5 w-inline-block"> | |
| <div class="item-caption"> | |
| <h5>KOL Commentary</h5> | |
| </div> | |
| <div class="thumbnail-play-btn"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/play-btn.svg" loading="lazy" alt="" class="play-btn"></div> | |
| <div class="carousel-thumbnail-container"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/2482d5a641610d34eddd0d6ab5f62739b507af9c.png" loading="lazy" width="300" height="Auto" alt="" class="carousel-thumbnail"></div> | |
| </a> | |
| </div> | |
| <div class="carousel-item"> | |
| <a data-slide="2" aria-label="pathogenesis" href="#" class="link-block heading-5 w-inline-block"> | |
| <div class="item-caption"> | |
| <h5>KOL Commentary</h5> | |
| </div> | |
| <div class="thumbnail-play-btn"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/play-btn.svg" loading="lazy" alt="" class="play-btn"></div> | |
| <div class="carousel-thumbnail-container"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/2482d5a641610d34eddd0d6ab5f62739b507af9c.png" loading="lazy" width="300" height="Auto" alt="" class="carousel-thumbnail"></div> | |
| </a> | |
| </div> | |
| </div> | |
| <div id="w-node-_2d99bb3e-da61-998a-37e7-973fcc14bf5a-708698b7" class="section-carousel-nav-container"> | |
| <p class="section-carousel-indicator"></p> | |
| <div class="section-carousel-control"> | |
| <a href="#" class="w-inline-block"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/arrow-left.svg" loading="lazy" width="32" alt="" class="caret-left"></a> | |
| <a href="#" class="w-inline-block"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/arrow-right.svg" loading="lazy" width="32" alt="" class="caret-right"></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <section id="diagnosis" class="section-container diagnosis"> | |
| <div class="container"> | |
| <div class="w-layout-vflex flex-block-content-container"> | |
| <div class="heading-section"> | |
| <h1 class="heading">Diagnosis</h1> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="mid-page-ad"> | |
| <div class="adcontainer"> | |
| <div class="adplaceholder"> | |
| <div class="advertisement-txt"> | |
| <div class="text-block">ADVERTISEMENT</div> | |
| </div> | |
| <div class="w-embed w-script"> | |
| <div id="topbanner" style="width: fit-content; margin: 0 auto;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="treatment" class="section-container treatment"> | |
| <div class="container"> | |
| <div class="w-layout-vflex flex-block-content-container"> | |
| <div class="heading-section"> | |
| <h1 class="heading">Treatment</h1> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="cost-coping" class="section-container cost-coping"> | |
| <div class="container"> | |
| <div class="w-layout-vflex flex-block-content-container"> | |
| <div class="heading-section"> | |
| <h1 class="heading">Cost & Coping</h1> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="treatment" class="section-container patient-reflections"> | |
| <div class="container"> | |
| <div class="w-layout-vflex flex-block-content-container"> | |
| <div class="heading-section"> | |
| <h1 class="heading">Treatment</h1> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="case-studies" class="section-container case-studies"> | |
| <div class="container"> | |
| <div class="w-layout-vflex flex-block-content-container"> | |
| <div class="heading-section"> | |
| <h1 class="heading">Case Studies</h1> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="nav-container-mobile"> | |
| <div data-w-id="5f56cc2e-18cb-32a3-d0aa-013b5f9f5e60" class="timeline_xs_menuicon"><img width="15.5" height="13" alt="" src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/menu-item.svg" loading="lazy" class="timeline-menu-icon"></div> | |
| <div style="display:none" class="nav_container_xs"> | |
| <ul role="list" class="list navigation w-list-unstyled"> | |
| <li class="nav-list-item"> | |
| <a href="#intro" data-w-id="6783707a-5462-0ac9-f6ac-8ca38871f514" class="nav_link">MD Journey</a> | |
| </li> | |
| <li class="nav-list-item"> | |
| <a href="#pathogenesis" class="nav_link">Pathogenesis</a> | |
| </li> | |
| <li class="nav-list-item"> | |
| <a href="#diagnosis" class="nav_link">Diagnosis</a> | |
| </li> | |
| <li class="nav-list-item"> | |
| <a href="#cost-coping" class="nav_link">Treatment</a> | |
| </li> | |
| <li class="nav-list-item"> | |
| <a href="#treatment" class="nav_link">Cost & Coping</a> | |
| </li> | |
| <li class="nav-list-item"> | |
| <a href="#treatment" class="nav_link">Patient Reflections</a> | |
| </li> | |
| <li class="nav-list-item"> | |
| <a href="#case-studies" class="nav_link">Case Studies</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div aria-label="pathogenesis" class="section-modal"> | |
| <div class="modal-nav1"> | |
| <div class="modal-nav-inner-container"> | |
| <div class="modal-nav-btns"> | |
| <a aria-label="left" href="#" class="modal-nav-btn w-inline-block"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/caret-left.svg" loading="lazy" width="16" height="16" alt="" class="image-7"></a> | |
| <a aria-label="right" href="#" class="modal-nav-btn w-inline-block"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/caret-right.svg" loading="lazy" width="16" height="16" alt="" class="image-6"></a> | |
| </div> | |
| <div class="modal-content-title"></div> | |
| <div class="modal-close"> | |
| <a href="#" class="modal-close-btn w-inline-block"> | |
| <div class="close-text">+</div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div aria-label="pathogenesis" class="modal-content"> | |
| <div data-title="Video" aria-label="0" class="modal-content-container"> | |
| <div id="w-node-_14e66a25-1c94-2527-274c-5a9b5a5192b5-708698b7" class="modal-content-container-inner"> | |
| <div class="code-embed-3 w-embed w-script"> | |
| <div id="playerDIV" class="embed-container"> </div> | |
| <script> | |
| jwplayer('playerDIV').setup({ | |
| autostart: false, | |
| width: '100%', | |
| aspectratio: '16:9', | |
| androidhls: true, | |
| renderCaptionsNatively: false, | |
| playlist: JSON.parse(loadVideo('0001','conexiant')) | |
| }); | |
| </script> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="patho2" aria-label="1" data-title="Dive into the details (Interactive Infographic)" class="modal-content-container interactive"> | |
| <div class="interactive-diagram-wrapper"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/infographic-radial-bg.png" loading="lazy" sizes="(max-width: 1920px) 100vw, 1920px" srcset="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/infographic-radial-bg-p-500.png 500w, https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/infographic-radial-bg-p-800.png 800w, https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/infographic-radial-bg-p-1080.png 1080w, https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/infographic-radial-bg-p-1600.png 1600w, https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/infographic-radial-bg.png 1920w" alt="" class="infographic-radial-bg"> | |
| <div class="interactive-diagram"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/body.png" loading="lazy" sizes="(max-width: 769px) 100vw, 769px" srcset="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/body-p-500.png 500w, https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/body.png 769w" alt="" class="body-img"> | |
| <div class="hotspot-lines w-embed"><svg id="connection-lines" style="position:fixed; top:0; left:0; width:100vw; height:100vh; pointer-events:none; z-index:1000;"></svg></div> | |
| <div class="diagram-hs-pruritus-upper"> | |
| <a data-target="#pruritus" href="#" class="diagram-hs-link hs-pin w-inline-block"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/pruritus-lower.png" loading="lazy" alt="" class="pruritus-upper hs-img"> | |
| <div data-target="#pruritus" class="hs-marker pruritus-upper-marker w-embed"><svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="fill: #ffffff;" class="hs-marker" width="20"> | |
| <circle cx="50" cy="50" r="50" class="marker-circle"></circle> | |
| </svg></div> | |
| </a> | |
| </div> | |
| <div class="diagram-hs-pruritus-lower"> | |
| <a data-target="#pruritus" href="#" class="diagram-hs-link hs-pin w-inline-block"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/pruritus-lower_1.png" loading="lazy" alt="" class="pruritus-lower hs-img"> | |
| <div data-target="#pruritus" class="hs-marker pruritus-lower-marker w-embed"><svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="fill: #ffffff;" class="hs-marker" width="20"> | |
| <circle cx="50" cy="50" r="50" class="marker-circle"></circle> | |
| </svg></div> | |
| </a> | |
| </div> | |
| <div class="diagram-hs-thrombisis"> | |
| <a data-target="#thrombisis" href="#" class="diagram-hs-link hs-pin w-inline-block"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/thrombisis.png" loading="lazy" alt="" class="thrombisis hs-img"> | |
| <div data-target="#thrombisis" class="hs-marker thrombisis-marker w-embed"><svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="fill: #ffffff;" class="hs-marker" width="20"> | |
| <circle cx="50" cy="50" r="50" class="marker-circle"></circle> | |
| </svg></div> | |
| </a> | |
| </div> | |
| <div class="diagram-hs-vasomotor-upper"> | |
| <a data-target="#vasomotor" href="#" class="diagram-hs-link hs-pin w-inline-block"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/vasomotor-upper.png" loading="lazy" alt="" class="vasomotor-upper hs-img"> | |
| <div data-target="#vasomotor" class="hs-marker vasomotor-upper-marker w-embed"><svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="fill: #ffffff;" class="hs-marker" width="20"> | |
| <circle cx="50" cy="50" r="50" class="marker-circle"></circle> | |
| </svg></div> | |
| </a> | |
| </div> | |
| <div class="diagram-hs-vasomotor-lower"> | |
| <a data-target="#vasomotor" href="#" class="diagram-hs-link hs-pin w-inline-block"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/vasomotor-lower.png" loading="lazy" alt="" class="vasomotor-lower hs-img"> | |
| <div data-target="#vasomotor" class="hs-marker vasomotor-lower-marker w-embed"><svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="fill: #ffffff;" class="hs-marker" width="20"> | |
| <circle cx="50" cy="50" r="50" class="marker-circle"></circle> | |
| </svg></div> | |
| </a> | |
| </div> | |
| <div class="diagram-hs-spleen"> | |
| <a data-target="#spleen" href="#" class="diagram-hs-link hs-pin w-inline-block"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/spleen.png" loading="lazy" alt="" class="spleen hs-img"> | |
| <div data-target="#spleen" class="hs-marker spleen-marker w-embed"><svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="fill: #ffffff;" class="hs-marker" width="20"> | |
| <circle cx="50" cy="50" r="50" class="marker-circle"></circle> | |
| </svg></div> | |
| </a> | |
| </div> | |
| <div class="diagram-hs-brain"> | |
| <a data-target="#brain" href="#" class="diagram-hs-link hs-pin w-inline-block"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/brain.png" loading="lazy" alt="" class="brain hs-img"> | |
| <div data-target="#brain" class="hs-marker brain-marker w-embed"><svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="fill: #ffffff;" class="hs-marker" width="20"> | |
| <circle cx="50" cy="50" r="50" class="marker-circle"></circle> | |
| </svg></div> | |
| </a> | |
| </div> | |
| <div data-target="#stomach" class="diagram-hs-stomach"> | |
| <a data-target="#stomach" href="#" class="diagram-hs-link hs-pin w-inline-block"><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/stomach.png" loading="lazy" alt="" class="stomach hs-img"> | |
| <div data-target="#stomach" class="hs-marker stomach-marker w-embed"><svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="fill: #ffffff;" class="hs-marker" width="20"> | |
| <circle cx="50" cy="50" r="50" class="marker-circle"></circle> | |
| </svg></div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div data-title="Quiz" aria-label="2" class="modal-content-container"> | |
| <div class="quiz-embed w-embed w-script"> | |
| <style> | |
| .qp_container{margin: 0 auto!important; padding-bottom: 48px!important;} | |
| .quiz-container{display: flex; align-items: center; justify-content: center;} | |
| </style> | |
| <a data-quiz="QTPUP1YK7" data-type="4" href="https://poll-maker.com/QTPUP1YK7">Loading...</a> | |
| <script>(function(i,s,o,g,r,a,m){var ql=document.querySelectorAll('A[data-quiz],DIV[data-quiz]'); if(ql){if(ql.length){for(var k=0;k<ql.length;k++){ql[k].id='quiz-embed-'+k;ql[k].href="javascript:var i=document.getElementById('quiz-embed-"+k+"');try{qz.startQuiz(i)}catch(e){i.start=1;i.style.cursor='wait';i.style.opacity='0.5'};void(0);"}}};i['QP']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.poll-maker.com/3012/CDN/quiz-embed-v1.js','qp');</script> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="pruritus" aria-label="pathogenesis" class="infographic-modal"> | |
| <div data-anchor="top-left" class="infographic-modal-inner top-left"> | |
| <div class="infographic-modal-close"> | |
| <a href="#" class="link-block-3 w-inline-block"> | |
| <div class="close-text">+</div> | |
| </a> | |
| </div> | |
| <div class="infographic-modal-content"> | |
| <div class="infographic-modal-content-container"> | |
| <h4 class="heading fill"><strong>Pruritus</strong></h4><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/pruritus-callout.png" loading="lazy" alt="" class="infographic-modal-image"> | |
| <div class="rich-text-block w-richtext"> | |
| <p class="paragraph-5">Pruritus, reported in 52.2% of patients is associated with primary myelofibrosis is often severe and requires treatment. The pathogenesis of pruritus is not linked to proinflammatory cytokines and does not correlate with either disease state nor prognosis.</p> | |
| <h6>Craver BM, et al. <em>Cancers (Basel).</em> 2018 Apr3;10(4):104; Vaa BE, et al. <em>Ann Hematol</em> 95, 1185-89 (2016); VaaBE, et al. <em>Am J Hematol</em>. 2012 Feb;87(2):136-8.</h6> | |
| <p></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="infographic-modal-nav"> | |
| <div class="infographic-modal-nav-inner-container"> | |
| <div class="infographic-modal-nav-indicator"></div> | |
| <div class="infographic-modal-nav-btns"> | |
| <a data-direction="prev" href="#" class="infographic-modal-nav-btn w-inline-block"> | |
| <div class="code-embed w-embed"><span style="color: white;">←</span></div> | |
| </a> | |
| <a data-direction="next" href="#" class="infographic-modal-nav-btn w-inline-block"> | |
| <div class="code-embed w-embed"><span style="color: white;">→</span></div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="thrombisis" aria-label="pathogenesis" class="infographic-modal"> | |
| <div class="infographic-modal-inner top-right"> | |
| <div class="infographic-modal-close"> | |
| <a href="#" class="link-block-3 w-inline-block"> | |
| <div class="close-text">+</div> | |
| </a> | |
| </div> | |
| <div class="infographic-modal-content"> | |
| <div class="infographic-modal-content-container"> | |
| <h4 class="heading fill"><strong>Bleeding, Bruising and Thrombotic Events</strong></h4><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/thrombosis-callout.png" loading="lazy" alt="" class="infographic-modal-image"> | |
| <div class="rich-text-block w-richtext"> | |
| <p class="paragraph-5">Pruritus, reported in 52.2% of patients is associated with primary myelofibrosis is often severe and requires treatment. The pathogenesis of pruritus is not linked to proinflammatory cytokines and does not correlate with either disease state nor prognosis.</p> | |
| <h6>Craver BM, et al. <em>Cancers (Basel).</em> 2018 Apr3;10(4):104; Vaa BE, et al. <em>Ann Hematol</em> 95, 1185-89 (2016); VaaBE, et al. <em>Am J Hematol</em>. 2012 Feb;87(2):136-8.</h6> | |
| <p></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="infographic-modal-nav"> | |
| <div class="infographic-modal-nav-inner-container"> | |
| <div class="infographic-modal-nav-indicator"></div> | |
| <div class="infographic-modal-nav-btns"> | |
| <a data-direction="prev" href="#" class="infographic-modal-nav-btn w-inline-block"> | |
| <div class="code-embed w-embed"><span style="color: white;">←</span></div> | |
| </a> | |
| <a data-direction="next" href="#" class="infographic-modal-nav-btn w-inline-block"> | |
| <div class="code-embed w-embed"><span style="color: white;">→</span></div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="vasomotor" aria-label="pathogenesis" class="infographic-modal"> | |
| <div class="infographic-modal-inner bottom-left"> | |
| <div class="infographic-modal-close"> | |
| <a href="#" class="link-block-3 w-inline-block"> | |
| <div class="close-text">+</div> | |
| </a> | |
| </div> | |
| <div class="infographic-modal-content"> | |
| <div class="infographic-modal-content-container"> | |
| <h4 class="heading fill">Bone marrow fibrosis</h4><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/vasomotor-callout.png" loading="lazy" alt="" class="infographic-modal-image"> | |
| <div class="rich-text-block w-richtext"> | |
| <p>One of the earliest pathological changes in primarymyelofibrosis is the development of bone marrow fibrosis. This process islargely driven by dysplasia and hyperplasia of megakaryocytes, which secretepro-inflammatory cytokines that activate bone marrow stromal cells, leading tobone marrow fibrosis. Although the precise cellular contributors and molecularmechanisms underlying fibrosis progression in primary myelofibrosis are notcompletely elucidated, multiple signaling pathways have been implicated. Amongthe key mediators are platelet-derived growth factor (PDGF), which promotesfibroblast proliferation and extracellular matrix deposition within the bonemarrow, angiogenic cytokines such as vascular endothelial growth factor (VEGF)and fibroblast growth factor (FGF), transforming growth factor-beta (TGF-β),which plays a broader fibrogenic role, contributing to fibrosis not only in thebone marrow but also in other organs, highlighting its systemic impact indisease progression, and other fibrogenic cytokines.</p> | |
| <p><strong>Bone pain</strong> Bone pain significantly affects the qualityof life in patients with myelofibrosis and should be thoroughly evaluated todifferentiate it from arthralgias. It is reported in approximately 43.9% ofpatients, irrespective of myelofibrosis subtype.</p> | |
| <h6 class="heading-10">Ghosh K, et al. <em>J Transl Med</em>. 2023Oct 9;21(1):703; Malara A, et al. <em>Mediterr J Hematol Infect Dis</em>. 2018Nov 1;10(1):e2018068; Craver BM, et al. <em>Cancers (Basel).</em> 2018 Apr3;10(4):104; NCCN Guidelines. V.1.2025[TT1] </h6> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="infographic-modal-nav"> | |
| <div class="infographic-modal-nav-inner-container"> | |
| <div class="infographic-modal-nav-indicator"></div> | |
| <div class="infographic-modal-nav-btns"> | |
| <a data-direction="prev" href="#" class="infographic-modal-nav-btn w-inline-block"> | |
| <div class="code-embed w-embed"><span style="color: white;">←</span></div> | |
| </a> | |
| <a data-direction="next" href="#" class="infographic-modal-nav-btn w-inline-block"> | |
| <div class="code-embed w-embed"><span style="color: white;">→</span></div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="spleen" aria-label="pathogenesis" class="infographic-modal"> | |
| <div class="infographic-modal-inner bottom-right"> | |
| <div class="infographic-modal-close"> | |
| <a href="#" class="link-block-3 w-inline-block"> | |
| <div class="close-text">+</div> | |
| </a> | |
| </div> | |
| <div class="infographic-modal-content"> | |
| <div class="infographic-modal-content-container"> | |
| <h4 class="heading fill">Splenomegaly </h4><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/spleen-callout.png" loading="lazy" alt="" class="infographic-modal-image"> | |
| <div class="rich-text-block w-richtext"> | |
| <p>As myelofibrosis progresses, malignant stem cells exit thefibrotic bone marrow and migrate to other hematopoietic organs, primarily thespleen and liver, leading to their characteristic enlargement and associatedmorbidity. Splenomegaly is also a result of significant increases in plasmacytokine concentrations.</p> | |
| <h6>Malara A, et al. <em>MediterrJ Hematol Infect Dis</em>. 2018 Nov 1;10(1):e2018068. </h6> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="infographic-modal-nav"> | |
| <div class="infographic-modal-nav-inner-container"> | |
| <div class="infographic-modal-nav-indicator"></div> | |
| <div class="infographic-modal-nav-btns"> | |
| <a data-direction="prev" href="#" class="infographic-modal-nav-btn w-inline-block"> | |
| <div class="code-embed w-embed"><span style="color: white;">←</span></div> | |
| </a> | |
| <a data-direction="next" href="#" class="infographic-modal-nav-btn w-inline-block"> | |
| <div class="code-embed w-embed"><span style="color: white;">→</span></div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="brain" aria-label="pathogenesis" class="infographic-modal"> | |
| <div data-anchor="top-left" class="infographic-modal-inner top-left"> | |
| <div class="infographic-modal-close"> | |
| <a href="#" class="link-block-3 w-inline-block"> | |
| <div class="close-text">+</div> | |
| </a> | |
| </div> | |
| <div class="infographic-modal-content"> | |
| <div class="infographic-modal-content-container"> | |
| <h4 class="heading fill">Fatigue </h4><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/brain-callout.png" loading="lazy" alt="" class="infographic-modal-image"> | |
| <div class="rich-text-block w-richtext"> | |
| <p>The most common patient complaint, with an incidence of80.7%, fatigue is often chronic and profoundly debilitating. Fatigue is alsoseen in patients who do not have anemia. </p> | |
| <h6>Craver BM, et al. <em>Cancers (Basel). </em>2018 Apr3;10(4):104; NCCN Guidelines. V.1.2025</h6> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="infographic-modal-nav"> | |
| <div class="infographic-modal-nav-inner-container"> | |
| <div class="infographic-modal-nav-indicator"></div> | |
| <div class="infographic-modal-nav-btns"> | |
| <a data-direction="prev" href="#" class="infographic-modal-nav-btn w-inline-block"> | |
| <div class="code-embed w-embed"><span style="color: white;">←</span></div> | |
| </a> | |
| <a data-direction="next" href="#" class="infographic-modal-nav-btn w-inline-block"> | |
| <div class="code-embed w-embed"><span style="color: white;">→</span></div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="stomach" aria-label="pathogenesis" class="infographic-modal"> | |
| <div class="infographic-modal-inner top-right"> | |
| <div class="infographic-modal-close"> | |
| <a href="#" class="link-block-3 w-inline-block"> | |
| <div class="close-text">+</div> | |
| </a> | |
| </div> | |
| <div class="infographic-modal-content"> | |
| <div class="infographic-modal-content-container"> | |
| <h4 class="heading fill">Constitutional symptoms</h4><img src="https://res.cloudinary.com/broadcastmed/image/upload/v1750733429/conexiant-oncology/md-journey/stomach-callout.png" loading="lazy" alt="" class="infographic-modal-image"> | |
| <div class="rich-text-block w-richtext"> | |
| <p>Fevers, night sweats, and weight loss are foundationalsymptoms of myelofibrosis and are frequently observed, with night sweats beingreported in 49.2% of patients and fever (>37.5°C) is observed inapproximately 13.7% of patients. Weight loss of >10% in 6 months is alsocommon. Overall, constitutional symptoms are presumed to be driven by the aberrantcytokine production leading to ineffective erythropoiesis, hepatosplenicextramedullary hematopoiesis. The loss of appetite has recently been shown tobe negatively correlated with decreases in IL-1 receptor antagonistlevels. </p> | |
| <p><strong>Infection</strong> Patients with myelofibrosis have anincreased susceptibility to infections with a hazard ratio for any infection of2.0, and a 10-year probability of death from an infection of 10.4% as comparedto 2.3% in matched controls. Infection may occur even in the absence ofleukopenia or neutropenia, therefore, the risk of infectious complicationsshould be carefully assessed, particularly in individuals who have undergonesplenectomy.</p> | |
| <h6>Geyer HL, et al. <em>MediatorsInflamm</em>. 2015;2015:284706; Malara A, et al. <em>Mediterr J Hematol InfectDis</em>. 2018 Nov 1;10(1):e2018068; NCCN Guidelines. V.1.2025</h6> | |
| <h6>Landtblom AR, et al. <em>Leukemia. </em>2021;35:476-84;Mughal TI, et al. <em>Int J Gen Med</em>. 2014 Jan 29;7:89-101; NCCN Guidelines.V.1.2025</h6> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="infographic-modal-nav"> | |
| <div class="infographic-modal-nav-inner-container"> | |
| <div class="infographic-modal-nav-indicator"></div> | |
| <div class="infographic-modal-nav-btns"> | |
| <a data-direction="prev" href="#" class="infographic-modal-nav-btn w-inline-block"> | |
| <div class="code-embed w-embed"><span style="color: white;">←</span></div> | |
| </a> | |
| <a data-direction="next" href="#" class="infographic-modal-nav-btn w-inline-block"> | |
| <div class="code-embed w-embed"><span style="color: white;">→</span></div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <section class="full-width-ad"> | |
| <div class="adcontainer"> | |
| <div class="adplaceholder"> | |
| <div class="advertisement-txt"> | |
| <div class="text-block">ADVERTISEMENT</div> | |
| </div> | |
| <div class="w-embed w-script"> | |
| <div id="stickyBanner" style="width: fit-content; margin: 0 auto;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=681408babb62a5a9708698ae" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> | |
| <script src="../../scripts/webflow.js?cb=CACHEBUSTERVALUE" type="text/javascript"></script> | |
| <script src="https://cdn.prod.website-files.com/gsap/3.13.0/gsap.min.js" type="text/javascript"></script> | |
| <script src="https://cdn.prod.website-files.com/gsap/3.13.0/Draggable.min.js" type="text/javascript"></script> | |
| <script src="https://cdn.prod.website-files.com/gsap/3.13.0/ScrollTrigger.min.js" type="text/javascript"></script> | |
| <script src="https://cdn.prod.website-files.com/gsap/3.13.0/ScrollSmoother.min.js" type="text/javascript"></script> | |
| <script type="text/javascript">gsap.registerPlugin(Draggable,ScrollTrigger,ScrollSmoother);</script> | |
| <script> | |
| //IN-PAGE CONTENT CAROUSEL | |
| //Add Play Icon for Video Items | |
| document.addEventListener("DOMContentLoaded", function () { | |
| const carouselItems = document.querySelectorAll(".carousel-item"); | |
| carouselItems.forEach(function (item) { | |
| const playBtn = item.querySelector(".thumbnail-play-btn"); | |
| if (item.getAttribute("data-label") === "video") { | |
| if (playBtn) playBtn.style.display = "grid"; // Show if it's a video | |
| } else { | |
| if (playBtn) playBtn.style.display = "none"; // Hide otherwise | |
| } | |
| }); | |
| }); | |
| //Draggability | |
| document.addEventListener("DOMContentLoaded", function () { | |
| document.querySelectorAll(".section-carousel").forEach(carousel => { | |
| const scrollAmount = 308; | |
| const proxy = document.createElement("div"); | |
| let startScroll = 0; | |
| let dragStartX = 0; | |
| Draggable.create(proxy, { | |
| type: "x", | |
| trigger: carousel, | |
| onPress: function () { | |
| startScroll = carousel.scrollLeft; | |
| dragStartX = this.x; | |
| }, | |
| onRelease: function () { | |
| const dragEndX = this.x; | |
| const dragDelta = dragEndX - dragStartX; | |
| let direction = 0; | |
| if (Math.abs(dragDelta) > 30) { | |
| // Only trigger swipe if dragged more than 30px | |
| direction = dragDelta < 0 ? 1 : -1; | |
| } | |
| const targetScroll = startScroll + direction * scrollAmount; | |
| // Clamp scroll target within valid range | |
| const maxScrollLeft = carousel.scrollWidth - carousel.clientWidth; | |
| const clampedScroll = Math.max(0, Math.min(targetScroll, maxScrollLeft)); | |
| gsap.to(carousel, { | |
| scrollLeft: clampedScroll, | |
| duration: 0.3, | |
| ease: "power2.out" | |
| }); | |
| // Reset the proxy | |
| gsap.set(this.target, { x: 0 }); | |
| }, | |
| inertia: false, // disable momentum – not needed now | |
| cursor: "grab", | |
| activeCursor: "grabbing" | |
| }); | |
| }); | |
| }); | |
| //Nav Buttons | |
| document.addEventListener("DOMContentLoaded", function () { | |
| const carousels = document.querySelectorAll(".section-carousel-container"); | |
| carousels.forEach(container => { | |
| const carousel = container.querySelector(".section-carousel"); | |
| const leftCaret = container.querySelector(".caret-left"); | |
| const rightCaret = container.querySelector(".caret-right"); | |
| const scrollAmount = 308; // 308px item + 8px gap | |
| leftCaret?.addEventListener("click", e => { | |
| e.preventDefault(); | |
| carousel.scrollBy({ left: -scrollAmount, behavior: "smooth" }); | |
| }); | |
| rightCaret?.addEventListener("click", e => { | |
| e.preventDefault(); | |
| carousel.scrollBy({ left: scrollAmount, behavior: "smooth" }); | |
| }); | |
| const updateCarets = () => { | |
| const scrollLeft = carousel.scrollLeft; | |
| const maxScrollLeft = carousel.scrollWidth - carousel.clientWidth; | |
| leftCaret.style.opacity = scrollLeft > 0 ? "1" : "0.2"; | |
| rightCaret.style.opacity = scrollLeft < maxScrollLeft ? "1" : "0.2"; | |
| }; | |
| updateCarets(); | |
| carousel.addEventListener("scroll", updateCarets); | |
| const resizeObserver = new ResizeObserver(updateCarets); | |
| resizeObserver.observe(carousel); | |
| }); | |
| }); | |
| //Text Indicator | |
| document.addEventListener("DOMContentLoaded", function () { | |
| function setupCarouselIndicators() { | |
| document.querySelectorAll(".section-carousel-container").forEach(container => { | |
| const carousel = container.querySelector(".section-carousel"); | |
| const slides = carousel.querySelectorAll(".carousel-item"); | |
| const indicator = container.querySelector(".section-carousel-indicator"); | |
| if (!carousel || !slides.length || !indicator) return; | |
| let itemWidth, totalSlides; | |
| function getVisibleRange() { | |
| const carouselRect = carousel.getBoundingClientRect(); | |
| let firstVisible = null; | |
| let lastVisible = null; | |
| slides.forEach((slide, i) => { | |
| const rect = slide.getBoundingClientRect(); | |
| if (rect.right > carouselRect.left && rect.left < carouselRect.right) { | |
| if (firstVisible === null) firstVisible = i + 1; | |
| lastVisible = i + 1; | |
| } | |
| }); | |
| return { firstVisible, lastVisible }; | |
| } | |
| function updateLayoutValues() { | |
| const slide = slides[0]; | |
| const gap = parseInt(getComputedStyle(carousel).gap || 0); | |
| itemWidth = slide.offsetWidth + gap; | |
| totalSlides = slides.length; | |
| } | |
| function updateIndicator() { | |
| const { firstVisible, lastVisible } = getVisibleRange(); | |
| indicator.textContent = `${firstVisible}–${lastVisible} of ${totalSlides}`; | |
| } | |
| // Initial layout values | |
| updateLayoutValues(); | |
| updateIndicator(); | |
| // Update on scroll | |
| carousel.addEventListener("scroll", updateIndicator); | |
| // Update on resize | |
| window.addEventListener("resize", () => { | |
| updateLayoutValues(); | |
| updateIndicator(); | |
| }); | |
| }); | |
| } | |
| setupCarouselIndicators(); | |
| }); | |
| // MODAL CAROUSEL | |
| document.addEventListener("DOMContentLoaded", function () { | |
| // Modal trigger opens matching modal and scrolls to a specific slide | |
| document.querySelectorAll("a").forEach(trigger => { | |
| trigger.addEventListener("click", e => { | |
| e.preventDefault(); | |
| const modalLabel = trigger.getAttribute("aria-label"); | |
| const targetSlideIndex = parseInt(trigger.getAttribute("data-slide")) || 0; | |
| const modal = document.querySelector(`.section-modal[aria-label="${modalLabel}"]`); | |
| if (!modal) return; | |
| modal.style.display = "block"; | |
| const content = modal.querySelector(".modal-content"); | |
| const slideWidth = window.innerWidth; | |
| content.scrollTo({ | |
| left: targetSlideIndex * slideWidth, | |
| behavior: "instant" // Use "smooth" if desired | |
| }); | |
| updateIndicator(modal, targetSlideIndex); | |
| }); | |
| }); | |
| // Modal close buttons | |
| document.querySelectorAll(".modal-close-btn").forEach(btn => { | |
| btn.addEventListener("click", () => { | |
| const modal = btn.closest(".section-modal"); | |
| if (modal) modal.style.display = "none"; | |
| }); | |
| }); | |
| // Left/right nav buttons inside each modal | |
| document.querySelectorAll(".section-modal").forEach(modal => { | |
| const content = modal.querySelector(".modal-content"); | |
| const slides = Array.from(content.querySelectorAll(".modal-content-container")); | |
| // Create/update indicator when scrolling | |
| content.addEventListener("scroll", () => { | |
| const currentIndex = Math.round(content.scrollLeft / window.innerWidth); | |
| updateIndicator(modal, currentIndex); | |
| }); | |
| modal.querySelectorAll(".modal-nav-btn").forEach(btn => { | |
| btn.addEventListener("click", () => { | |
| const direction = btn.getAttribute("aria-label"); | |
| const slideWidth = window.innerWidth; | |
| const currentScroll = content.scrollLeft; | |
| const currentIndex = Math.round(currentScroll / slideWidth); | |
| let newIndex; | |
| if (direction === "right") { | |
| newIndex = Math.min(currentIndex + 1, slides.length - 1); | |
| } else { | |
| newIndex = Math.max(currentIndex - 1, 0); | |
| } | |
| content.scrollTo({ | |
| left: newIndex * slideWidth, | |
| behavior: "smooth" | |
| }); | |
| updateIndicator(modal, newIndex); | |
| }); | |
| }); | |
| // Initialize indicator on load | |
| updateIndicator(modal, 0); | |
| }); | |
| function updateIndicator(modal, index) { | |
| const content = modal.querySelector(".modal-content"); | |
| const slides = Array.from(content.querySelectorAll(".modal-content-container")); | |
| const indicator = modal.querySelector(".modal-nav-indicator"); | |
| const titleEl = modal.querySelector(".modal-content-title"); | |
| // Update slide count indicator | |
| if (indicator) { | |
| indicator.textContent = `${index + 1} / ${slides.length}`; | |
| } | |
| // Update the title from data-title | |
| if (titleEl && slides[index]) { | |
| const title = slides[index].getAttribute("data-title") || ""; | |
| titleEl.textContent = title; | |
| } | |
| // Update nav button visibility | |
| const leftBtn = modal.querySelector('.modal-nav-btn[aria-label="left"]'); | |
| const rightBtn = modal.querySelector('.modal-nav-btn[aria-label="right"]'); | |
| if (leftBtn) { | |
| leftBtn.classList.toggle("disabled-btn", index === 0); | |
| } | |
| if (rightBtn) { | |
| rightBtn.classList.toggle("disabled-btn", index === slides.length - 1); | |
| } | |
| } | |
| }); | |
| window.addEventListener("load", function () { | |
| // Find all players by .jwplayer class | |
| function getAllPlayerInstances() { | |
| const players = []; | |
| document.querySelectorAll('.jwplayer').forEach(el => { | |
| const id = el.id; | |
| if (id) { | |
| try { | |
| const player = jwplayer(id); | |
| if (player && typeof player.getState === 'function') { | |
| players.push(player); | |
| } | |
| } catch (err) { | |
| console.warn("Invalid player for id:", id); | |
| } | |
| } else { | |
| console.warn("jwplayer element missing ID:", el); | |
| } | |
| }); | |
| console.log("Found", players.length, "JW Player instances"); | |
| return players; | |
| } | |
| function pauseAllPlayers() { | |
| getAllPlayerInstances().forEach(player => { | |
| const state = player.getState?.(); | |
| console.log("Player state:", state); | |
| if (state === 'playing') { | |
| player.pause(true); | |
| } | |
| }); | |
| } | |
| function stopAllPlayers() { | |
| getAllPlayerInstances().forEach(player => { | |
| const state = player.getState?.(); | |
| console.log("Player state:", state); | |
| if (state === 'playing' || state === 'paused') { | |
| player.stop(); | |
| } | |
| }); | |
| } | |
| // Use event delegation to handle dynamic buttons | |
| document.body.addEventListener('click', function (e) { | |
| if (e.target.closest('.modal-nav-btn')) { | |
| console.log(".modal-nav-btn clicked"); | |
| pauseAllPlayers(); | |
| } | |
| if (e.target.closest('.modal-close-btn')) { | |
| console.log(".modal-close-btn clicked"); | |
| stopAllPlayers(); | |
| } | |
| }); | |
| }); | |
| //INTERACTIVE DIAGRAM | |
| document.addEventListener("DOMContentLoaded", () => { | |
| let pulseInterval; | |
| let isHovering = false; | |
| let currentOpenModal = null; | |
| const hotspotLinks = Array.from(document.querySelectorAll('.diagram-hs-link')); | |
| const modals = Array.from(document.querySelectorAll('.infographic-modal')); | |
| const connectionSvg = document.getElementById('connection-lines'); | |
| function initializeSVGMarkers() { | |
| hotspotLinks.forEach(link => { | |
| const svg = link.querySelector('.hs-marker svg'); | |
| if (!svg || svg.querySelector('defs')) return; | |
| const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs'); | |
| defs.innerHTML = ` | |
| <radialGradient id="pulse-gradient" cx="50%" cy="50%" r="50%"> | |
| <stop offset="0%" stop-color="#F5CE65" /> | |
| <stop offset="100%" stop-color="#FF8815" /> | |
| </radialGradient> | |
| `; | |
| svg.appendChild(defs); | |
| const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); | |
| circle.setAttribute('cx', '50'); | |
| circle.setAttribute('cy', '50'); | |
| circle.setAttribute('r', '50'); | |
| circle.classList.add('marker-circle'); | |
| svg.appendChild(circle); | |
| }); | |
| } | |
| // Update to fill ALL matching markers by data-target | |
| function setMarkerFill(targetId, isActive) { | |
| if (!targetId) { | |
| clearAllMarkerFills(); | |
| return; | |
| } | |
| const matchingLinks = hotspotLinks.filter(link => link.getAttribute('data-target') === targetId); | |
| matchingLinks.forEach(link => { | |
| const circles = link.querySelectorAll('.hs-marker svg .marker-circle'); | |
| const fillCircle = circles[1]; // the second circle is the fill for gradient | |
| if (fillCircle) { | |
| fillCircle.setAttribute('fill', isActive ? 'url(#pulse-gradient)' : '#fff'); | |
| } | |
| }); | |
| } | |
| function clearAllMarkerFills() { | |
| hotspotLinks.forEach(link => { | |
| const circles = link.querySelectorAll('.hs-marker svg .marker-circle'); | |
| const fillCircle = circles[1]; | |
| if (fillCircle) fillCircle.setAttribute('fill', '#fff'); | |
| }); | |
| } | |
| function updateIndicator(modal) { | |
| const group = modal.getAttribute('aria-label'); | |
| const groupModals = modals.filter(m => m.getAttribute('aria-label') === group); | |
| const index = groupModals.indexOf(modal) + 1; | |
| const indicator = modal.querySelector('.infographic-modal-nav-indicator'); | |
| if (indicator) { | |
| indicator.textContent = `${index}/${groupModals.length}`; | |
| } | |
| } | |
| function clearLines() { | |
| if (connectionSvg) connectionSvg.innerHTML = ''; | |
| } | |
| function drawLines(modal) { | |
| clearLines(); | |
| if (!modal || !connectionSvg) return; | |
| const modalInner = modal.querySelector('.infographic-modal-inner'); | |
| if (!modalInner) return; | |
| const { left, top, width, height } = modalInner.getBoundingClientRect(); | |
| const modalCenterX = left + width / 2; | |
| const modalCenterY = top + height / 2; | |
| const targetSelector = `#${modal.id}`; | |
| hotspotLinks | |
| .filter(link => link.getAttribute('data-target') === targetSelector) | |
| .forEach(link => { | |
| const svg = link.querySelector('.hs-marker svg'); | |
| if (!svg) return; | |
| const rect = svg.getBoundingClientRect(); | |
| const centerX = rect.left + rect.width / 2; | |
| const centerY = rect.top + rect.height / 2; | |
| const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); | |
| line.setAttribute('x1', modalCenterX); | |
| line.setAttribute('y1', modalCenterY); | |
| line.setAttribute('x2', centerX); | |
| line.setAttribute('y2', centerY); | |
| line.setAttribute('stroke', '#FB7C01'); | |
| line.setAttribute('stroke-width', '2'); | |
| connectionSvg.appendChild(line); | |
| }); | |
| } | |
| function openModal(modal) { | |
| const group = modal.getAttribute('aria-label'); | |
| modals.forEach(m => { | |
| if (m.getAttribute('aria-label') === group) { | |
| m.style.display = 'none'; | |
| m.classList.remove('is-open'); | |
| } | |
| }); | |
| modal.style.display = 'block'; | |
| modal.classList.add('is-open'); | |
| currentOpenModal = modal; | |
| updateIndicator(modal); | |
| drawLines(modal); | |
| const targetSelector = `#${modal.id}`; | |
| hotspotLinks.forEach(link => { | |
| const isMatch = link.getAttribute('data-target') === targetSelector; | |
| link.classList.toggle('active-hs', isMatch); | |
| const img = link.querySelector('.hs-img'); | |
| if (img) img.style.opacity = isMatch ? '1' : '0'; | |
| }); | |
| clearAllMarkerFills(); // <--- CLEAR BEFORE SETTING | |
| setMarkerFill(targetSelector, true); | |
| } | |
| function closeModal(modal) { | |
| modal.style.display = 'none'; | |
| modal.classList.remove('is-open'); | |
| currentOpenModal = null; | |
| hotspotLinks.forEach(link => { | |
| link.classList.remove('active-hs'); | |
| const img = link.querySelector('.hs-img'); | |
| if (img) img.style.opacity = '0'; | |
| }); | |
| clearAllMarkerFills(); | |
| clearLines(); | |
| startHotspotPulse(); | |
| } | |
| function startHotspotPulse() { | |
| clearInterval(pulseInterval); | |
| let index = 0; | |
| const targetGroups = [...new Set(hotspotLinks.map(link => link.getAttribute('data-target')))]; | |
| pulseInterval = setInterval(() => { | |
| if (isHovering || document.querySelector('.infographic-modal.is-open')) return; | |
| const currentTarget = targetGroups[index]; | |
| hotspotLinks.forEach(link => { | |
| const img = link.querySelector('.hs-img'); | |
| const isMatch = link.getAttribute('data-target') === currentTarget; | |
| if (img && !link.classList.contains('active-hs')) { | |
| img.style.opacity = isMatch ? '1' : '0'; | |
| } | |
| }); | |
| clearAllMarkerFills(); // <--- CLEAR ALL BEFORE SETTING | |
| setMarkerFill(currentTarget, true); | |
| index = (index + 1) % targetGroups.length; | |
| }, 1500); | |
| } | |
| function attachHoverEvents(link) { | |
| const hoverTargets = [link.querySelector('.hs-img'), link.querySelector('.hs-marker')]; | |
| hoverTargets.forEach(el => { | |
| if (!el) return; | |
| el.addEventListener('mouseenter', () => { | |
| isHovering = true; | |
| const targetId = link.getAttribute('data-target'); | |
| hotspotLinks.forEach(l => { | |
| const isMatch = l.getAttribute('data-target') === targetId; | |
| const img = l.querySelector('.hs-img'); | |
| if (img && !l.classList.contains('active-hs')) { | |
| img.style.opacity = isMatch ? '1' : '0'; | |
| } | |
| }); | |
| clearAllMarkerFills(); // <--- CLEAR ALL BEFORE SETTING | |
| setMarkerFill(targetId, true); | |
| }); | |
| el.addEventListener('mouseleave', () => { | |
| isHovering = false; | |
| const open = document.querySelector('.infographic-modal.is-open'); | |
| if (!open) { | |
| hotspotLinks.forEach(l => { | |
| if (!l.classList.contains('active-hs')) { | |
| const img = l.querySelector('.hs-img'); | |
| if (img) img.style.opacity = '0'; | |
| } | |
| }); | |
| clearAllMarkerFills(); | |
| startHotspotPulse(); | |
| } | |
| }); | |
| }); | |
| } | |
| function handleNavigationClick(btn) { | |
| const modal = btn.closest('.infographic-modal'); | |
| const group = modal.getAttribute('aria-label'); | |
| const modalsInGroup = modals.filter(m => m.getAttribute('aria-label') === group); | |
| let index = modalsInGroup.indexOf(modal); | |
| index = btn.getAttribute('data-direction') === 'next' ? index + 1 : index - 1; | |
| if (index >= modalsInGroup.length) index = 0; | |
| if (index < 0) index = modalsInGroup.length - 1; | |
| openModal(modalsInGroup[index]); | |
| } | |
| function handleRedraw() { | |
| if (currentOpenModal?.classList.contains('is-open')) { | |
| drawLines(currentOpenModal); | |
| } | |
| } | |
| // Setup | |
| initializeSVGMarkers(); | |
| startHotspotPulse(); | |
| // Event listeners | |
| window.addEventListener('resize', handleRedraw); | |
| window.addEventListener('scroll', handleRedraw); | |
| hotspotLinks.forEach(link => { | |
| attachHoverEvents(link); | |
| link.addEventListener('click', e => { | |
| e.preventDefault(); | |
| const modal = document.querySelector(link.getAttribute('data-target')); | |
| if (modal) openModal(modal); | |
| }); | |
| }); | |
| modals.forEach(modal => { | |
| modal.addEventListener('click', e => { | |
| if (!modal.querySelector('.infographic-modal-inner').contains(e.target)) { | |
| closeModal(modal); | |
| } | |
| }); | |
| }); | |
| document.querySelectorAll('.infographic-modal-close a').forEach(btn => { | |
| btn.addEventListener('click', e => { | |
| e.preventDefault(); | |
| closeModal(btn.closest('.infographic-modal')); | |
| }); | |
| }); | |
| document.querySelectorAll('.infographic-modal-nav-btn').forEach(btn => { | |
| btn.addEventListener('click', e => { | |
| e.preventDefault(); | |
| handleNavigationClick(btn); | |
| }); | |
| }); | |
| document.addEventListener('click', e => { | |
| const openModal = document.querySelector('.infographic-modal.is-open'); | |
| if (!openModal) return; | |
| const isClickInside = e.target.closest('.infographic-modal-inner, .infographic-modal-nav-btn, .infographic-modal-close, [data-target]'); | |
| if (!isClickInside) { | |
| closeModal(openModal); | |
| } | |
| }); | |
| }); | |
| // STICKY AD | |
| document.addEventListener("DOMContentLoaded", function () { | |
| const ad = document.querySelector(".full-width-ad"); | |
| const fab = document.querySelector(".nav-container-mobile"); | |
| function updateAdPosition() { | |
| if (window.scrollY > 60) { | |
| ad.classList.remove("top"); | |
| ad.classList.add("bottom"); | |
| fab.style.bottom = `${ad.offsetHeight}px`; | |
| } else { | |
| ad.classList.remove("bottom"); | |
| ad.classList.add("top"); | |
| fab.style.bottom = `0px`; | |
| } | |
| } | |
| window.addEventListener("scroll", updateAdPosition); | |
| window.addEventListener("resize", () => { | |
| if (ad.classList.contains("bottom")) { | |
| fab.style.bottom = `${ad.offsetHeight}px`; | |
| } | |
| }); | |
| // Initial setup | |
| ad.classList.add("top"); | |
| }); | |
| document.getElementById("backToTop").addEventListener("click", function (e) { | |
| e.preventDefault(); | |
| window.scrollTo({ top: 0, behavior: "smooth" }); | |
| }); | |
| document.addEventListener("DOMContentLoaded", function () { | |
| const ad = document.querySelector(".full-width-ad"); | |
| const topContainers = document.querySelectorAll('[aria-label="top-container"]'); | |
| function updateTopPadding() { | |
| if (!ad) return; | |
| const adHeight = ad.offsetHeight; | |
| topContainers.forEach(container => { | |
| container.style.paddingTop = `${adHeight}px`; | |
| }); | |
| } | |
| // Run on load | |
| updateTopPadding(); | |
| // Update on resize | |
| window.addEventListener("resize", updateTopPadding); | |
| }); | |
| //Mobile Menu | |
| window.addEventListener("DOMContentLoaded", function () { | |
| document.addEventListener("click", function(event) { | |
| const navContainerMobile = document.querySelector(".nav-container-mobile"); | |
| const navContainerXS = document.querySelector(".nav_container_xs"); // ✅ fixed casing | |
| if (!navContainerMobile || !navContainerXS) { | |
| console.warn("Missing required element(s):"); | |
| if (!navContainerMobile) console.warn(".nav-container-mobile not found"); | |
| if (!navContainerXS) console.warn(".nav_container_xs not found"); | |
| return; | |
| } | |
| const clickedInsideNav = navContainerMobile.contains(event.target); | |
| console.log("Click detected. Inside .nav-container-mobile?", clickedInsideNav); | |
| if (!clickedInsideNav) { | |
| navContainerXS.style.display = "none"; | |
| console.log(".nav_container_xs set to display: none"); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> | |
| <script> | |
| // Build clean page path with slashes preserved | |
| const rawPath = window.location.pathname.replace(/^\/+|\/+$/g, '') || 'home'; | |
| const pageName = '/' + rawPath; | |
| // Basic bot detection | |
| const isbot = /bot|crawl|spider|slurp|facebookexternalhit/i.test(navigator.userAgent) ? '1' : '0'; | |
| window.googletag = window.googletag || { cmd: [] }; | |
| let adSlot1, adSlot2; | |
| googletag.cmd.push(function () { | |
| // Define size mapping for responsive ads | |
| const mapping = googletag.sizeMapping() | |
| .addSize([768, 0], [[728, 90]]) | |
| .addSize([0, 0], [[320, 50]]) | |
| .build(); | |
| // Define Top Sticky Banner slot | |
| adSlot1 = googletag.defineSlot('/56049762/Journey_728x90', [[728, 90], [320, 50]], 'stickyBanner') | |
| .defineSizeMapping(mapping) | |
| .addService(googletag.pubads()) | |
| .setTargeting("pos", "stickyBanner"); | |
| // Define Inline Banner slot | |
| adSlot2 = googletag.defineSlot('/56049762/Journey_728x90', [[728, 90], [320, 50]], 'topbanner') | |
| .defineSizeMapping(mapping) | |
| .addService(googletag.pubads()) | |
| .setTargeting("pos", "topbanner"); | |
| // Page-level targeting | |
| googletag.pubads().setTargeting("url", pageName); | |
| googletag.pubads().setTargeting("isbot", isbot); | |
| // Enable GPT services | |
| googletag.pubads().enableSingleRequest(); | |
| googletag.enableServices(); | |
| // Display ads (only once per slot!) | |
| googletag.display('stickyBanner'); | |
| googletag.display('topbanner'); | |
| }); | |
| // Optional: Refresh ads on resize (debounced) | |
| let resizeTimeout; | |
| window.addEventListener('resize', function () { | |
| clearTimeout(resizeTimeout); | |
| resizeTimeout = setTimeout(function () { | |
| googletag.cmd.push(function () { | |
| googletag.pubads().refresh([adSlot1, adSlot2]); | |
| }); | |
| }, 300); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment