Absolute positioned custom dropdown is causing scroll. How to fix this? - javascript

I have a "main-div" with specific height and a dropdown on bottom part inside it. The dropdown is causing extra scroll. Is there any way to stop causing scroll and make it overlap through the parent div?
(height and properties of the main div cannot be changed in my real situation)
.main-div{
height: 300px;
width: 600px;
overflow-y: scroll;
border: 2px solid #404040;
}
.dropdown {
position: relative;
display: inline-block;
margin-bottom: 10px;
margin-top: 20px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #109fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.other-content{
height: 280px;
background-color: rgb(80, 210, 166);
}
.button-1{
background-color: #180f37;
padding: 10px;
border: #0f1c40;
color: #fff;
}
<div class="main-div">
<div class="other-content">
<h4>Scroll down to see the button</h4>
</div>
<div class="dropdown">
<span class="button-1">Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</div>

Related

Making dropdown appear on top of map

I'm trying to create a map with drop down in it I want the drop down to appear on the map like map shows in background and dropdown on top of it. Right now it is looking
like this
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 100;
overflow: auto;
height: 100px;
}
.dropdown:hover .dropdown-content {
display: block;
}
#map {
margin: 0 0 0 0;
height: 100vh;
width: 100%;
position: absolute;
display: block;
}
<div class="col-lg-12 col-12 col-md-12 col-sm-12" style="padding-left: 0px; padding-right:0px;">
<div class="dropdown">
<span>Select Country</span>
<div class="dropdown-content">
</div>
</div>
<div id="map"></div>
</div>
and here is the code:
I think you need z-index. Try something like this,
.dropdown {
position: absolute;
display: inline-block;
left: 0;
top: 0;
z-index: 3;
}
#map {
margin: 0 0 0 0;
height: 100vh;
width: 100%;
z-index: 1;
position:absolute;
display: block;
}
It would be best to wrap both the components in a container, giving the container the position: relative attribute, then position the dropdown using position: absolute with the top and left values you require.
Here is an example of how you would achieve it:
.container {
position: relative;
}
.dropdown {
position: absolute;
background: white; /* TODO: Remove this temporary styling */
display: inline-block;
top: 5px;
left: 5px;
z-index: 1000;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 100;
overflow: auto;
height: 100px;
}
.dropdown:hover .dropdown-content {
display: block;
}
#map {
background: black; /* TODO: Remove this temporary styling */
background-image: url('https://i.imgur.com/hiuuHaf.png'); /* TODO: Remove this temporary styling */
background-repeat: no-repeat; /* TODO: Remove this temporary styling */
margin: 0 0 0 0;
height: 100vh;
width: 100%;
display: block;
}
<div
class="col-lg-12 col-12 col-md-12 col-sm-12"
style="padding-left: 0px; padding-right: 0px">
<div class="container">
<div class="dropdown">
<span>Select Country</span>
<div class="dropdown-content"></div>
</div>
<div id="map"></div>
</div>
</div>
Simply remove the CSS where I have commented /* TODO: Remove this temporary styling */ which is purely for demonstration purposes
You have to add position: relative; in the parent and then position: absolute; on the dropdown.
Something like this
#container {
position: relative;
}
.dropdown {
position: absolute;
display: inline-block;
top: 1rem;
left: 1rem;
background-color: #f9f9f9;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 100;
overflow: auto;
height: 100px;
}
.dropdown:hover .dropdown-content {
display: block;
}
#map {
margin: 0 0 0 0;
height: 100vh;
width: 100%;
background-color: red;
padding: 10rem;
/*position:absolute;
display: block;*/
}
<div id="container" class="col-lg-12 col-12 col-md-12 col-sm-12" style="padding-left: 0px; padding-right:0px;">
<div class="dropdown">
<span>Select Country</span>
<div class="dropdown-content">
</div>
</div>
<div id="map">This is the map</div>
</div>
</div>
replaced dropdown-content:absoulteand pushing 100% from top top:100%.
keeping the height:0 and adding the height:100px and padding on hover.
because in case you want animation you woulnt be able to do it display:none
also added a transition:all 0.25s ease-in-out;
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
left:0;
top:100%;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 100;
overflow: hidden;
height: 0px;
transition:all 0.25s ease-in-out;
}
.dropdown:hover .dropdown-content {
padding: 12px 16px;
height:100px;
}
#map {
margin: 0 0 0 0;
height: 100vh;
width: 100%;
position: absolute;
display: block;
}
<div class="col-lg-12 col-12 col-md-12 col-sm-12" style="padding-left: 0px; padding-right:0px;">
<div class="dropdown">
<span>Select Country</span>
<div class="dropdown-content">
</div>
</div>
<div id="map"></div>
</div>
Case 1: Replace the .dropdown:hover .dropdown-content's display property to inline
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 100;
overflow: auto;
height: 100px;
}
.dropdown:hover .dropdown-content {
display: inline;
}
#map {
margin: 0 0 0 0;
height: 80vh;
width: 250px;
width: 100%;
position: absolute;
display: block;
border: 1px red solid;
}
<div class="col-lg-12 col-12 col-md-12 col-sm-12" style="padding-left: 0px; padding-right:0px;">
<div class="dropdown">
<span>Select Country</span>
<div class="dropdown-content">
</div>
</div>
<div id="map"></div>
</div>
</div>
Case 2: Put the select-menu inside the map div.
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 100;
overflow: auto;
height: 100px;
}
.dropdown:hover .dropdown-content {
display: inline;
}
#map {
margin: 0 0 0 0;
height: 80vh;
width: 250px;
width: 100%;
position: absolute;
display: block;
border: 1px red solid;
}
<div class="col-lg-12 col-12 col-md-12 col-sm-12" style="padding-left: 0px; padding-right:0px;">
<div id="map">
<div class="dropdown">
<span>Select Country</span>
<div class="dropdown-content">
</div>
</div>
</div>
</div>
Case 3: You can also put position: relative to the parent and position: absolute to the child. Then you can play around with the top, bottom, left, right properties.Read on MDN.
But again, to achieve this you must put the select-menu (the children) inside the map (parent). Hope this helps.

Button image cannot be clicked

I added a dropdown button with a down arrow (image) with the help of https://www.w3schools.com/howto/howto_js_dropdown.asp. However, after adding the down arrow image, the image area of the button cannot be clicked? Not quite sure what went wrong here, the button is still functional.
HTML:
<html>
<head>
<script>
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function dropdownMenu() {
document.getElementById("myDropdown").classList.toggle("show");
}</script>
</head>
<body>
<!-- dropdown feature -->
<div class="dropdown">
<button onclick="dropdownMenu()" class="dropbtn">User
<!--image cant be clicked???-->
<img src="images.png" style="height:8px; width:10px; margin-bottom: 2px; margin-left: 5px;">
</button>
<!-- dropdown content -->
<div id="myDropdown" class="dropdown-content">
Profile
Settings
Logout
</div>
</div>
</body>
</html>
CSS:
.dropbtn {
background-color: white;
color: black;
padding: 10px;
font-size: 14px;
border: none;
cursor: pointer;
position: absolute;
top: -69.5px;
left: 1280px;
border-radius: 4px;
width: 90px;
}
.dropbtn:hover, .dropbtn:focus {
background-color: rgb(218, 218, 218);
}
.dropdown {
position: absolute;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: -20px;
left: 1210px;
background-color: #f1f1f1;
min-width: 164px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 6px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
Can someone please help identify what is the error here? Thanks a lot!
Just add the pointer-events: none css property to the i tag element:
.fa {
pointer-events: none;
}
to prevent any pointer events for the <i> tag
Live Demo: CodePen

Keep tooltip within parent container?

I cannot figure out a way to keep the tooltip inside the "main-content" container. Here's the code:
.main-content {
background: #151418;
width: 500px;
min-height: 200px;
}
[data-tooltip] {
display: inline;
position: relative;
cursor: pointer;
}
[data-tooltip]:hover:after {
background: rgba(0, 0, 0, .9);
border-left: 5px solid #000;
border-right: 5px solid #000;
border-radius: 5px;
position: absolute;
bottom: 16px;
left: 0;
content: attr(data-tooltip);
font-family: Consolas, "courier new";
font-size: 12px;
color: #657b99;
padding: 5px 10px;
z-index: 98;
white-space: nowrap;
}
p {
color: white;
margin-left: 50px;
}
<div class="main-content">
<br>
<br>
<p>Hover mouse <span data-tooltip="Here goes a long text that does not stay inside main-content container">HERE</span></p>
</div>
Is there any way to push it back inside?
Or add an max-width to the tooltip somehow? I tried to add max-width, but it didn't work because of [data-tooltip]'s display:inline;.
(I know that replacing "inline" with "block" would solve the problem with max-width, but I can't do that because I need to keep the text inline...)
Don't know how to make it word responsive, don't know if is even possible with only css - tooltips are for short mesages.
But it's a start
.main-content {
background: #151418;
width: 500px;
min-height: 200px;
}
[data-tooltip] {
display: inline;
position: relative;
cursor: pointer;
}
[data-tooltip]:hover:after {
background: rgba(0, 0, 0, .9);
border-left: 5px solid #000;
border-right: 5px solid #000;
border-radius: 5px;
position: absolute;
bottom: 16px;
left: 0;
content: attr(data-tooltip);
font-family: Consolas, "courier new";
font-size: 12px;
color: #657b99;
padding: 5px 10px;
z-index: 98;
/* width: 250px; */
min-width: 200px;
/* max-width: 400px; */
height: 50px;
overflow: auto;
}
p {
color: white;
margin-left: 50px;
}
<div class="main-content">
<br>
<br>
<p>Hover mouse <span data-tooltip="Here goes a long text that does not stay inside main-content container">HERE</span></p>
</div>

Overlap page container border with a floating div border

I'm trying to make a tab float vertically in a page with dynamic generated content and overlap the right border the page content container with the left border of the floating div.
Here is a representation of what I'm trying to achieve:
In the following fiddle there's a basic skeleton of my page and an example of what is happening.
jsFiddle here
If I add position: absolute to this class the floating tab is correctly positioned but the page will not grow correctly as the content is appended nor will the footer be correctly positioned. On the other hand, if I remove the position absolute then the tab is not correctly positioned.
#page-content
{
border: 1px solid lightblue;
display: inline-block;
width: 180px;
padding: 10px;
min-height: 100px;
/*position: absolute;*/
}
How can I place the floating tab correctly overlapping the container border?
Notes: I cannot change much of the page structure (wrapping div and footer) but if needs be, the floating div can be appended after the #inner div.
Try this FIDDLE
Just add this rules to your .floating-tab:
margin-left: -1px;
z-index: 999;
float: left;
and float: left to your selector #page-content
Something like this:
#inner
{
text-align: left;
margin-right: auto;
margin-left: auto;
display: inline-block;
width: 200px;
position: relative; /* positoning context */
}
.floating-tab
{
position: absolute;
border-left: 1px solid #fff;
border-top: 1px solid lightblue;
border-right: 1px solid lightblue;
border-bottom: 1px solid lightblue;
width: 32px;
text-align: center;
top: 10px;
left:100%; /* fully left */
margin-left: 1px; /* width of border */
z-index:2;
}
$(function($) {
var element = $(".floating-tab"), originalY = element.offset().top, topMargin = 10;
$(window).on("scroll", function(event) {
var scrollTop = $(this).scrollTop();
element.stop(false, false).animate({ top: scrollTop < originalY ? topMargin : scrollTop - originalY + topMargin }, 300);
});
$("#B1").on("click", function() {
$("#innercontent").append("<p>text 1</p><p>text 2</p><p>text 3</p><p>text 4</p><p>text 5</p><p>text 6</p><p>text 7</p><p>text 8</p><p>text 9</p><p>text 10</p>");
});
});
.floating-tab
{
position: absolute;
border-left: 1px solid #fff;
border-top: 1px solid lightblue;
border-right: 1px solid lightblue;
border-bottom: 1px solid lightblue;
width: 32px;
text-align: center;
top: 10px;
left:100%;
margin-left: 1px;
z-index:2;
}
.floating-tab span
{
width: 24px;
height: 24px;
margin: 2px;
}
#page-content
{
border: 1px solid lightblue;
display: inline-block;
width: 180px;
padding: 10px;
min-height: 100px;
}
#inner
{
text-align: left;
margin-right: auto;
margin-left: auto;
display: inline-block;
width: 200px;
position: relative;
}
#outer
{
width: 100%;
padding-top: 10px;
display: block;
text-align: center;
}
#footer
{
margin-top: 17px;
background-color: lightblue;
border-top: 1px solid gray;
height: 48px;
}
#pagewrapper
{
min-height: 100%;
margin-bottom: -66px;
}
html, body, form
{
height:100%;
}
html
{
overflow: initial !important;
}
*, *::after, *::before
{
padding: 0px;
margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pagewrapper">
<div id="outer">
<div id="inner">
<div id="page-content">
<input type="button" value="add content" id="B1" />
<div id="innercontent"></div>
</div>
<div class="floating-tab">
<span>A</span>
<span>B</span>
<span>C</span>
<div>
</div>
</div>
</div>
<div id="footer">FOOTER</div>

How to highlight anchor link when target div comes in view in jQuery?

I have a webpage like the following layout;
The HTML is;
<div class="header" style="text-align: center">Demo</div>
<div class="navi">
<div class="title">
Options
</div>
</div>
<div class="content">
<div class="da">
diva
divb
divc
divd
</div>
<div class="db">
<div style="width: 300px; height: 300px; background-color: #996633"><a id="diva" name="diva">DIV1</a></div>
<div style="width: 300px; height: 300px; background-color: #CC0066"><a id="divb" name="divb">DIV2</a></div>
<div style="width: 300px; height: 300px; background-color: #3300FF"><a id="divc" name="divc">DIV3</a></div>
<div style="width: 300px; height: 300px; background-color: #99CC00"><a id="divd" name="divd">DIV4</a></div>
</div>
</div>
<div class="footer"> </div>
and CSS is;
html, body, div, h2, img, ul, li, form, time {
margin: 0;
padding: 0;
border: 0;
}
html, body {
position: absolute;
height: 100%;
width: 100%;
min-width: 800px;
}
.header{
height: 40px;
color: #FFF;
background-color: #666666;
}
.title{
display: block;
float: left;
margin-top: 4px;
margin-left: 10px;
}
.content{
margin-bottom: 36px;
}
.footer{
height: 30px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
border-top: solid 1px #CCCCCC;
background: #FFFFFF;
}
.da,.db{
position: absolute;
z-index: 0;
top: 82px;
bottom: 30px;
}
.da{
width: 200px;
border-right: solid 1px #CCCCCC;
overflow: visible !important;
}
.da a{
font-family: Tahoma;
display: block;
padding: 10px;
text-decoration: none;
color: #555;
}
.da a:hover{
background-color: #DDD;
}
.da .current,.da .current:hover{
background-color: #FF6600;
}
.db{
left: 200px;
right: 0;
background-color: #CC99FF;
overflow: scroll;
overflow-x:hidden;
}
The links of sidebar are anchored to 4 cascaded divs. They are linked to divs and when I click on links, the corresponding div will scroll up. This worked fine. But I tried to achieve something different. The link of current visible div may be given orange background color, so that when user scrolls the page, the orange color will shift from one link to another, according to the current div on page. After some googling and research, I found this SO question useful jQuery changing css on navigation when div # scrolls into view. A demo of the solution is available in this fiddle which is exactly what I want.
But when I tried to implement this solution in my layout, it is not working, ie, links are not highlighting to corresponding div.
Here is my fiddle.
How can I implement the same in my layout?
Try this:
CSS:
.da,.db{
position: relative; // changed to relative. Because of absolute your document height is affected.
z-index: 0;
top: 82px;
bottom: 30px;
}
.db{
left: 142px;
top:42px;
right: 0;
background-color: #CC99FF;
overflow: scroll;
overflow-x:hidden;
}
jQuery:
$('.da a').removeClass('current').eq(i).addClass('current'); // replaced selected with current which you are using.
DEMO
I couldn't wrap my head around some of these answers, but I found this really simple idea.
It's basically saying that the mouse will be in view at some position on the screen, and if it is within a specific div, highlight the matching link.
HTML
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="nav">
<span id ="menu">☰</span>
<ul id="top-menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
</div>
<div id="wrapper">
<div id="one" class="container">
one
</div>
<div id="two" class="container">
two
</div>
<div id="three" class="container">
three
</div>
<div id="four" class="container">
four
</div>
<div id="five" class="container">
five
</div>
<div id="six" class="container">
six
</div>
</div>
CSS
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: Geneva, Tahoma, Verdana, sans-serif;
margin: 0px;
}
.nav{
width: 100%;
height: 50px;
background: rgba(200,200,200,0.2);
position: fixed;
top: 0px;
}
#menu{
float: right;
font-size: 40px;
font-weight: normal;
padding-right: 20px;
color: rgba(100,100,100,0.9);;
}
.nav ul{
width: 150px;
list-style-type: none;
background: rgba(200,200,200,0.2);
border-radius: 5px;
}
#top-menu{
clear: both;
display: block;
float: right;
padding-left: 0px;
margin-top: 10px;
margin-right: 20px;
}
.links{
color: black;
font-size: 20px;
font-weight: normal;
}
.nav ul li a{
text-decoration: none;
text-align: center;
display: block;
padding: 2px 0px 2px 10px;
}
.nav ul li a:hover{
color: #fff;
background-color: black;
border-left: thick solid red;
}
#wrapper{
margin-top: 50px;
}
.container{
width: 800px;
height: 600px;
margin: 0px auto;
background: rgba(200,200,200,0.2);
border-bottom: 1px solid rgba(200,200,200,1);
padding: 20px;
}
.active{
color: white;
background-color: rgba(100,100,100,1);
border-left: thick solid rgba(0,255,0,0.5);
}
jQuery
$(document).ready(function(){
$("div").mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('active');
$("[href=#"+id+"]").addClass('active');
});
});
Source

Categories