CODEWITHSUNDEEP
javascriptjqueryhtmlscrollbar
Praveen
Praveen

Reputation: 1802

get rid of scroll bar

I am trying to make a simple tool-tip. Problem is when i click on bottom buttons, tool-tip brings page scroll bar. In that case i want tool-tip should Aligned to the bottom of the page with out scroll bar.

HTML:

<div class="main">
  <table>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
    <tr>
      <td><button type="button">Click Me!</button></td>
    </tr>
  </table>

<div class="pop">Text</div>
</div>

 JS:
$(".main").on("click", "button", function(){
  var top = $(this).offset().top;
  $(".pop").show(".pop");
  $(".pop").css("top", top)

})

$(".pop").click(function(){
  $(this).css("display", "none")
})

Sample: http://codepen.io/anon/pen/jEdRoY

Upvotes: 0

Views: 256

Answers (2)

Gulfaraz Rahman
Gulfaraz Rahman

Reputation: 407

You'll have to calculate the height using JavaScript.

The reason it is not possible in CSS is because of the clash between fixed height, top offset and bottom offset.

But you can use the following code to calculate the overflow and make a switch based on scenario.

if(($("html").height() - (top + 400)) > 0) {
    //set top offset
} else {
    //set bottom offset
}

Based on the condition you can either choose to set top or bottom to avoid the clash.

Here is the demo

If you want to calculate the height along with the margins then use outerHeight

Upvotes: 1

Vikrant
Vikrant

Reputation: 5036

In this case, you can try below CSS class to your popup window:

.pop{
    height:200px; 
    width:200px;
    border:red solid 1px; 
    position:fixed; 
    display:none;
 }

And it hides DIV's part which is outer the screen.
If you don't wanna lose it, then as you said not able to achieve with only CSS. JavaScript is required! what I had in my project as,

Example of floating tool tip

Upvotes: 0

Related Questions