Splitter does not work with or <object></a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2017-03-25T10:02:48.770" class="fromnow">Mar 25 '17 at 10:02</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2017-03-26T10:07:03.087" datetime="2017-03-26T10:07:03.087">Mar 26 '17 at 10:07</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 471 times"> <span class="fc-light mr2">Viewed</span> 471 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="43015019" data-ownerid="702977" data-score="0"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="43015019"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I have a splitter by flexbox that works quite well (<a class="external-link" href="https://plnkr.co/edit/8XLT4QRtuCkI7Mb9nOMW?p=preview" rel="nofollow noreferrer">plunker</a>): users could drag the splitter easily, even though it is very thin. And the movement of the splitter is quite smooth without jumping. Additionally, the code is light.</p> <p>However, it has trouble with <code><iframe></code> or <code><object></code> (a <a class="external-link" href="https://plnkr.co/edit/l4Kwn5SCStEkBqRcZnHI?p=preview" rel="nofollow noreferrer">new plunker with a iframe</a>). When we drag the part of the splitter near the iframe <strong>quickly to the right</strong>, we will see the mouse is not <code><-></code> anymore, but becomes a normal mouse icon over the iframe.</p> <p>I added <code>console.log(e.pageX)</code> in <code>script.js</code>. It shows that for the above case, this number does not update well. So does anyone have an alternative for that?</p> <p>Otherwise, does anyone have a global solution for my splitter?</p> <p>Splitters are everywhere, but it is hard to find a complete solution of a splitter that is thin and smooth to drag... Does anyone have any suggestion?</p> <p>PS: Chrome version: Version 57.0.2987.110 (64-bit); macOS Sierra 10.12.3</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag js-gps-track" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/iframe" class="post-tag js-gps-track" title="show questions tagged 'iframe'" rel="tag">iframe</a> <a href="../../questions/tagged/mouseevent" class="post-tag js-gps-track" title="show questions tagged 'mouseevent'" rel="tag">mouseevent</a> <a href="../../questions/tagged/splitter" class="post-tag js-gps-track" title="show questions tagged 'splitter'" rel="tag">splitter</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2017-03-26T10:03:45.227" class="relativetime">Mar 26 '17 at 10:03</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">SoftTimur</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Mar 25 '17 at 10:02">asked Mar 25 '17 at 10:02</time> <a href="../../users/702977/softtimur" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/702977.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="SoftTimur" /> </a> <div class="s-user-card--info"> <a href="../../users/702977/softtimur" class="s-user-card--link">SoftTimur</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">5,630</li> <li class="s-award-bling s-award-blinggold" title="38 gold badges">38</li> <li class="s-award-bling s-award-blingsilver" title="140 silver badges">140</li> <li class="s-award-bling s-award-blingbronze" title="292 bronze badges">292</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-43015019" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="43015019" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-73119144" class="comment js-comment " data-comment-id="73119144" data-comment-owner-id="3597276" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment73119144_43015019"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">A flex item, by default, cannot be smaller than the size of its content (`min-width: auto`). In your first plunkr, there's no content. So the splitter can size down to 0 width. But in your second plunkr, the splitter must stop shrinking at the width of the iframe. Solution: Add `min-width: 0` to `.col`.</span> – <a href="../../users/3597276/michael-benjamin" title="346,931 reputation" class="comment-user ">Michael Benjamin</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/43015019/splitter-does-not-work-with-iframe-or-object#comment73119144_43015019"><span title="2017-03-25T10:33:35.790 License: CC BY-SA 3.0" class="relativetime-clean">Mar 25 '17 at 10:33</span></a></span> </div> </div> </li> <li id="comment-73119190" class="comment js-comment " data-comment-id="73119190" data-comment-owner-id="702977" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment73119190_43015019"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">thank you, but that solves another problem... while dragging the splitter and moving the mouse on the iframe, you will see the problem of this thread...</span> – <a href="../../users/702977/softtimur" title="5,630 reputation" class="comment-user owner">SoftTimur</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/43015019/splitter-does-not-work-with-iframe-or-object#comment73119190_43015019"><span title="2017-03-25T10:36:34.980 License: CC BY-SA 3.0" class="relativetime-clean">Mar 25 '17 at 10:36</span></a></span> </div> </div> </li> <li id="comment-73119250" class="comment js-comment " data-comment-id="73119250" data-comment-owner-id="3597276" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment73119250_43015019"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">You mean that the splitter moves with just the mouse movement?</span> – <a href="../../users/3597276/michael-benjamin" title="346,931 reputation" class="comment-user ">Michael Benjamin</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/43015019/splitter-does-not-work-with-iframe-or-object#comment73119250_43015019"><span title="2017-03-25T10:40:35.857 License: CC BY-SA 3.0" class="relativetime-clean">Mar 25 '17 at 10:40</span></a></span> </div> </div> </li> <li id="comment-73119489" class="comment js-comment " data-comment-id="73119489" data-comment-owner-id="1016716" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment73119489_43015019"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Neither plunkr works at all in Firefox; you might want to look into that as well.</span> – <a href="../../users/1016716/mr-lister" title="45,515 reputation" class="comment-user ">Mr Lister</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/43015019/splitter-does-not-work-with-iframe-or-object#comment73119489_43015019"><span title="2017-03-25T10:54:15.537 License: CC BY-SA 3.0" class="relativetime-clean">Mar 25 '17 at 10:54</span></a></span> </div> </div> </li> <li id="comment-73132428" class="comment js-comment " data-comment-id="73132428" data-comment-owner-id="702977" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment73132428_43015019"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Michael_B I added more details about how to reproduce the problem...</span> – <a href="../../users/702977/softtimur" title="5,630 reputation" class="comment-user owner">SoftTimur</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/43015019/splitter-does-not-work-with-iframe-or-object#comment73132428_43015019"><span title="2017-03-25T22:12:19.827 License: CC BY-SA 3.0" class="relativetime-clean">Mar 25 '17 at 22:12</span></a></span> </div> </div> </li> <li id="comment-73132694" class="comment js-comment " data-comment-id="73132694" data-comment-owner-id="3597276" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment73132694_43015019"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Testing in Chrome. Not getting that problem at all. No mouse changes. No splitter changes. Everything works the same at all times. (That's why I offered the solution in my first comment. It was the only "problem" I could see.)</span> – <a href="../../users/3597276/michael-benjamin" title="346,931 reputation" class="comment-user ">Michael Benjamin</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/43015019/splitter-does-not-work-with-iframe-or-object#comment73132694_43015019"><span title="2017-03-25T22:30:08.377 License: CC BY-SA 3.0" class="relativetime-clean">Mar 25 '17 at 22:30</span></a></span> </div> </div> </li> <li id="comment-73132777" class="comment js-comment " data-comment-id="73132777" data-comment-owner-id="702977" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment73132777_43015019"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@MrLister indeed, the splitter does not work at all in Firefox or Safari. But let's keep this question for this problem, though I am eager for a complete splitter solution for all the browsers...</span> – <a href="../../users/702977/softtimur" title="5,630 reputation" class="comment-user owner">SoftTimur</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/43015019/splitter-does-not-work-with-iframe-or-object#comment73132777_43015019"><span title="2017-03-25T22:36:19.110 License: CC BY-SA 3.0" class="relativetime-clean">Mar 25 '17 at 22:36</span></a></span> </div> </div> </li> <li id="comment-73133192" class="comment js-comment " data-comment-id="73133192" data-comment-owner-id="702977" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment73133192_43015019"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Michael_B I use `Chrome version: Version 57.0.2987.110 (64-bit); macOS Sierra 10.12.3`, and you?</span> – <a href="../../users/702977/softtimur" title="5,630 reputation" class="comment-user owner">SoftTimur</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/43015019/splitter-does-not-work-with-iframe-or-object#comment73133192_43015019"><span title="2017-03-25T23:04:23.287 License: CC BY-SA 3.0" class="relativetime-clean">Mar 25 '17 at 23:04</span></a></span> </div> </div> </li> <li id="comment-73133218" class="comment js-comment " data-comment-id="73133218" data-comment-owner-id="3597276" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment73133218_43015019"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Chrome Version 56.0.2924.87 PC</span> – <a href="../../users/3597276/michael-benjamin" title="346,931 reputation" class="comment-user ">Michael Benjamin</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/43015019/splitter-does-not-work-with-iframe-or-object#comment73133218_43015019"><span title="2017-03-25T23:07:08.277 License: CC BY-SA 3.0" class="relativetime-clean">Mar 25 '17 at 23:07</span></a></span> </div> </div> </li> <li id="comment-73133340" class="comment js-comment " data-comment-id="73133340" data-comment-owner-id="702977" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment73133340_43015019"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Michael_B I still see obvious problem on my side... we will see if other people can see the problem...</span> – <a href="../../users/702977/softtimur" title="5,630 reputation" class="comment-user owner">SoftTimur</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/43015019/splitter-does-not-work-with-iframe-or-object#comment73133340_43015019"><span title="2017-03-25T23:15:49.920 License: CC BY-SA 3.0" class="relativetime-clean">Mar 25 '17 at 23:15</span></a></span> </div> </div> </li> <li id="comment-73133405" class="comment js-comment " data-comment-id="73133405" data-comment-owner-id="3597276" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment73133405_43015019"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Add javascript tag to your question.</span> – <a href="../../users/3597276/michael-benjamin" title="346,931 reputation" class="comment-user ">Michael Benjamin</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/43015019/splitter-does-not-work-with-iframe-or-object#comment73133405_43015019"><span title="2017-03-25T23:19:43.593 License: CC BY-SA 3.0" class="relativetime-clean">Mar 25 '17 at 23:19</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">1 Answers<span style="display:none;" itemprop="answerCount">1</span></h2> </div> </div> </div> <a name="43027405"></a> <div id="answer-43027405" class="answer accepted-answer" data-answerid="43027405" data-ownerid="702977" data-score="2" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="43027405"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="2">2</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I have found this thread and <a href="../../a/11865037#11865037">this answer</a>, which is a light solution. I have assigned an id <code>myiframe</code> to the frame, and added in <code>mousedown</code>:</p> <pre><code>$('#myiframe').css('pointer-events', 'none'); </code></pre> <p>then in <code>mouseup</code>:</p> <pre><code>$('#myiframe').css('pointer-events', 'all'); </code></pre> <p>And here is <a class="external-link" href="https://plnkr.co/edit/FP6z8ZVPthlTBIHyXaYj?p=preview" rel="nofollow noreferrer">a working plunker</a>.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited May 23 '17 at 12:25">edited May 23 '17 at 12:25</time> <a href="../../users/-1/community" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/-1.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Community" /> </a> <div class="s-user-card--info"> <a href="../../users/-1/community" class="s-user-card--link">Community</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badges">1</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Mar 26 '17 at 10:07">answered Mar 26 '17 at 10:07</time> <a href="../../users/702977/softtimur" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/702977.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="SoftTimur" /> </a> <div class="s-user-card--info"> <a href="../../users/702977/softtimur" class="s-user-card--link">SoftTimur</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">5,630</li> <li class="s-award-bling s-award-blinggold" title="38 gold badges">38</li> <li class="s-award-bling s-award-blingsilver" title="140 silver badges">140</li> <li class="s-award-bling s-award-bling__bronze" title="292 bronze badges">292</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>