Jump to content
We've recently updated our Privacy Statement, available here. ×

The side bar collapses when dragging on the slider


Ruby Chang
Go to solution Solved by Jose Leviaguirre,

Recommended Posts

I created a collapsible sidebar when the mouse hover over and off. I then have a slider inside there, but the sidebar collapses when I drag on the slider cursor. Any idea what I should do to keep the sidebar open while dragging on the date range slider?

I post the JavaScript and HTML codes as attachment too.

Link to comment
Share on other sites

Hello Ruby,

I was unable to recreate the issue. I just added a calculated column and a visualization in addition to the filter. The only thing that occurs to me is that sometimes when changing a filter or control can refresh or reload the page causing the side panel to collapse. What version of Spotfire are you using? I tried on 12.5 and everything works fine. Here is the code I used

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div id="styelDiv"></div><div id="fontAwesome"></div> <ul class="side-menu" style="overflow:hidden; bottom:28px;"> <li class="spotli">   <div id="accordion" class="spotli ws-menu-button" style="background:white">  <H4 style="background:white; color: #625D52"><a href="#"> <span class="fa fa-calendar-days fa-2xl" style="background:transparent; color: #625D52"></span> <span style="color: #625D52">Production Date</span> <span style="color: #625D52; float:right;">▼    </span> </a></h4>  <div align=center style="background:white; color: #625D52"> <span style="color:#625D52; background:white" class="slider-sidepanel"><SpotfireControl id="f5b55d17e7014ed5a6726f9e3d26522a" />    </span> </div><hr> <div align=center style="background:white; color: #625D52"> <span style="color:#625D52; background:white" class="slider-sidepanel">calc value:<SpotfireControl id="851ca18de462443a93b04dc0ef7d9f8d" />    </span> </div>     </li></ul>

The JavaScript remains the samedrag_filter_on_js.thumb.gif.7b9c4feea0d0e547825d2d92e38dce52.gif 

Link to comment
Share on other sites

  • Solution

I see...

Seems that the Spotfire filter control inside your panel is triggering the hover or mouse out event.

Try adding a trigger other than the one in the panel where the Spotfire controls sit to avoid conflict. Take a look at this example to understand the concept of a trigger border, which is basically a layer under the .side-menu but a big bigger in which you tell it to collapse the menu instead of the .side-menu panel

closetrigger.gif.a3f54daa11fc647256cd4ab5b27ad29e.gif 

Here a modified example based on your code in which I added a #closeTrigger layer under the .side-menu:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div id="styelDiv"></div><div id="fontAwesome"></div>  <div id="closeTrigger"></div> <ul class="side-menu" style="overflow:hidden; bottom:28px;"> <li class="spotli"> <div id="accordion" class="spotli ws-menu-button" style="background: beige"> <h4 style="background: white; color: #625D52"> <a href="#"> <span class="fa fa-calendar-days fa-2xl" style="background: green; color: #625D52"></span> <span style="color: #625D52">Production Date</span> <span style="color: #625D52; float: right;">▼    </span> </a> </h4>  <div align="center" style="background: white; color: #625D52"> <span style="color: #625D52; background: white" class="slider-sidepanel"><SpotfireControl id="a05a922bbe6849989454e80b7d843cc0" />    </span> </div> </div> </li></ul> $(".side-menu, #closeTrigger").css({ "font-family": "Arial", "position": "fixed", "top": "40px", "left": "8px", "bottom": "50px", "margin": "0", "padding": "0",  "width": "50px", "list-style-type": "none", "background": "beige", "overflow": "hidden", "z-index":"999", "transition": "width .5s",}); $("#closeTrigger").css({"background": "black"})    $(".spota").mouseover(function() { $(this).css("background","#ebebeb")}); $(".spota").mouseout(function() { $(this).css("background","gray")}); $("#closeTrigger").mouseout(function(){ $(".side-menu").css("width","50px") $(this).css("width","50px")}); $(".side-menu").mouseover(function() { $(this).css("width","350px") $("#closeTrigger").css({"width": "360px"}) });  $(".dropdown-sidepanel").css({ "height": "100%", "line-height": 1});  $(".dropdown-sidepanel").mouseout(function(){ $(".spota").css("background","transparent") if ($('div.DropdownListContainer').length == 0){ $(".side-menu").css("width","50px") }});  $(".spota").css({ "display": "block", "font-size": ".9rem", "text-decoration": "none", "color": "#625D52", "height": "60px", "line-height": "60px"});  $(".spota .dropdown-sidepanel").css({ "display": "flex", "align-items": "center"});  $(".spotli").css({ "width": "350px"});  $(".ws-menu-button-adhoc, .ws-menu-button h4 a").css({ "display": "block", "font-size": ".9rem", "font-family": "Arial", "text-decoration": "none", //"color": "#FFF", "height": "60px", "line-height": "60px"});  $(".ws-menu-button-adhoc, .ws-menu-button h4 a").mouseover(function() { $(this).css("background","#ebebeb") });$(".ws-menu-button-adhoc, .ws-menu-button h4 a").mouseout(function() { $(this).css("background","transparent") }); $(".sel").css({ "display": "'none", "background": "white"}) $(".fa").css({ "font-size": "1.2rem", "margin": "0px 20px 0 20px"}); // Fix for drop downs disappearing behind side panel$(".dropdown-sidepanel").click(function(){ $(".DropdownListContainer").css("zIndex", 9999);});  $(".dropdown-sidepanel").mouseout(function(){ event.stopPropagation();});  $(".slider-sidepanel").on("mousedown", function(event) { // Prevent the sidebar from closing when you start dragging the slider event.stopPropagation();  // Hide the HTML popup when dragging starts $(".sf-canvas-drag-cursor").css("opacity", 0);}); $(".slider-sidepanel").on("mouseup", function(event) { // Prevent the sidebar from closing when you release the slider event.stopPropagation();  // Show the HTML popup again when dragging is complete $(".sf-canvas-drag-cursor").css("opacity", 1);}); // Now, you can handle the sidebar width changes as before$(".slider-sidepanel").mouseout(function() { $(".spota").css("background", "transparent"); if ($('div.RangeSlider').width() === 0) { $(".side-menu").css("width", "50px"); }});
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...