I have created two div's, one at the top and one at the bottom.
I have created one button. I gave a property as fixed position at left side bottom page.
If i scroll the page the button is fixed at that position only.
basically the button is in fix position for the whole page.
My Requirement:
When I scroll the page the button should be fixed for some certain height only.
When I am scrolling the page the button should be fixed at left button only till the first div bottom line touches the button bottom line.
and wen I scroll the page that button should move along with the bottom line of first div.
Basically the button should be in fixed position till the first div bottom line only.
when the first div bottom line collapse with the button bottom line, the button should be relative/absolute and moves along with it.
Hope you understood my requirement.
Below is my code for which I am looking for requirement
#top {
border: 1px solid black;
height: 900px;
width: 80%;
position: absolute;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
bottom: 0px;
font-size: 16px;
margin-left: 0px;
cursor: pointer;
padding: 10px 24px;
position: fixed;
}
#bottom {
border: 1px solid black;
height: 900px;
width: 80%;
top: 910px;
position: relative;
}
#middle {
bottom: 50px;
position: fixed;
}
<html>
<body>
<div id="top">
<div id="middle">
<button class="button">Fixed Element</button>
</div>
</div>
<br>
<br>
<div id="bottom">
</div>
</body>
</html>
I think this is not possible with only css. You need javascript or jquery.
You need jquery to run my example. You should measure the scrolled amount with the top or other element and change the bottom/top of the button accordingly like this:
Jquery
$(window).scroll(function () {
if (($(this).scrollTop()+$(window).height())>$('#top').height()){
$("#btn_fixed").css({ bottom: ($(this).scrollTop()+$(window).height()- $('#top').height())+"px" });
}else{
$("#btn_fixed").css({ bottom: '0px' });
}
});
I have changed css and html of your code.
CSS
#top {
border: 1px solid black;
height: 900px;
width: 80%;
position: absolute;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
bottom: 0px;
font-size: 16px;
margin-left: 0px;
cursor: pointer;
padding: 10px 24px;
position: fixed;
}
#bottom {
border: 1px solid black;
height: 900px;
width: 80%;
top: 910px;
position: relative;
}
HTML
<div id="top">
<div id="middle">
<button class="button" id="btn_fixed">Fixed Element</button>
</div>
</div>
<br>
<br>
<div id="bottom">
</div>
Working fiddle : https://jsfiddle.net/khairulhasanmd/h9y0bf1g/
Use position: sticky; on your #middle div
Related
I am trying to make my modal to be responsive.
I am currently using "right: 405px" in css to make my modal to stick in the right section.
However, the position of the modal keep changes as the screen size of the browser changes, which means this is not responsive.
In the attached screenshot, you can see the "Google Translator Modal" when the "info icon" is clicked.
Could anyone help me write a responsive CSS code?
Thank you.
.google-translator-modal {
position: absolute;
background: #fff;
z-index: 10000;
right: 405px;
top: 40px;
width: 230px;
height: 50px;
border-radius: 3px;
}
<div class="google-translator-modal" style="display: none">
<span class="upward-white-triangle"></span>
<div class="google-translator-modal-content">
powered by
<a class="google-logo-link" href="https://translate.google.com" target="_blank">
<img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" width="60px" height="20px" style="padding-top: 3px; padding-left: 3px" alt="Google Translate">
Translate
</a>
</div>
</div>
This a crude example but it ultimately comes down to positioning an absolute positioned element inside of a relative positioned element and showing it on hover.
I have placed the "modal," what I would call a tooltip, inside of the element that appears to be triggering it's appearance. By placing the tooltip inside and relative to the element that triggers it, we don't have to worry about how far from the edge of the viewport we are. The tooltip will always be position relative to the icon in my example.
.translate {
float: right;
margin: 0 1.5rem;
}
.translate-icon {
position: relative;
cursor: pointer;
font-size: 1.5rem;
}
.translate-icon:hover .translate-tooltip {
display: block;
}
.translate-tooltip {
display: none;
position: absolute;
bottom: -1.75rem;
right: -0.35rem;
width: 13rem;
text-align: center;
font-size: 1rem;
border: 1px solid gray;
}
.translate-tooltip::before,
.translate-tooltip::after {
content: '';
position: absolute;
bottom: 100%;
right: 0.25rem;
width: 0;
height: 0;
border: solid transparent;
}
.translate-tooltip::before {
border-bottom-color: gray;
border-width: 9px;
}
.translate-tooltip::after {
border-bottom-color: white;
border-width: 8px;
right: calc( 0.25rem + 1px );
}
<div class="translate">
Select Language
<span class="translate-icon">ω
<div class="translate-tooltip">
Powered by Google Translate
</div>
</span>
</div>
I am trying to achieve toggle option using jQuery. I have two styles (sub-menu-icon and sub-menu-mobile). On clicking on "sub-menu-icon" class div, i want to toggle "sub-menu-mobile" class div to toggle from left to right and right to left.
$(document).ready(function() {
$('.sub-menu-icon').toggle(function() {
$(".sub-menu-mobile").css("width", "200px");
});
});
.sub-menu-icon {
width: 30px;
height: 30px;
border: 1px solid #2B383E;
background-color: #4390ce;
display: block;
float: right;
}
.sub-menu-mobile {
min-width: 0px;
height: 100%;
background-color: #cccccc;
position: absolute;
top: 0px;
right: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-menu-icon">
Icon
</div>
<div class="sub-menu-mobile">
Rights side Menu
</div>
You want to use a click handler on the menu, then toggle a class that toggles the width. You also need to re-arrange the HTML elements and add position: relative; to the menu so the menu will show up above the sidebar.
$('.sub-menu-icon').on('click',function() {
$(".sub-menu-mobile").toggleClass('width');
});
.sub-menu-icon {
width: 30px;
height: 30px;
border: 1px solid #2B383E;
background-color: #4390ce;
display: block;
float: right;
position: relative;
}
.sub-menu-mobile {
min-width: 0px;
height: 100%;
background-color: #cccccc;
position: absolute;
top: 0px;
right: 0px;
}
.width {
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-menu-mobile">
Rights side Menu
</div>
<div class="sub-menu-icon">
icon
</div>
there seems to be a thread with a case very similar to yours. Check this out!
Toggle Between two Divs
I am trying to move content left and right using on click event and need to stop by margins on the left or right. list-items generating dynamically. Here is the code I tried so far but no worth. By my code it is moving the container left and right. But I need to move list-items left and right.
How can I do this.?
function moveList(px) {
$('.list').animate({
'marginLeft': px
});
}
.list {
white-space: nowrap;
overflow: auto;
height: 85px;
padding: 10px 0;
margin: 25px 0;
position: relative;
}
.list-item {
display: inline-block;
min-width: 20%;
max-width: 150px;
padding: 10px 0;
border-radius: 3px;
background: #eee;
border: 1px solid #ddd;
margin: 0 5px;
cursor: pointer;
text-align: center;
}
#right-arrow {
width: 40px;
height: 40px;
display: block;
position: absolute;
right: 0;
top: 35px;
z-index: 999;
border-radius: 50%;
background: url(img/right-arrow.png) no-repeat #000;
}
#left-arrow {
width: 40px;
height: 40px;
display: block;
position: absolute;
left: 0;
top: 35px;
z-index: 999;
border-radius: 50%;
background: url(img/left-arrow.png) no-repeat #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="right-arrow" onclick="moveList('-=50px')"></div>
<div id="left-arrow" onclick="moveList('+=50px')"></div>
<div class="list">
<div class="list-item">1</div>
<div class="list-item">2</div>
<div class="list-item">3</div>
<div class="list-item">4</div>
<div class="list-item">5</div>
<div class="list-item">6</div>
<div class="list-item">7</div>
<div class="list-item">8</div>
<div class="list-item">9</div>
<div class="list-item">10</div>
</div>
Try script like this:
function moveList(px) {
$(".list-item:first-child").animate({
'marginLeft': px
});
}
It will be easier for you if you create a element that wraps the .list-items with:
position: absolute;
top: 0;
left:0;
Then, instead of modify the margin, you should modify the left value.
If you want to use semmantic content for your web it's better to use another HTML structure, not only div. For example:
<nav> <!-- As this is containing page navigation elements-->
<ol> <!-- As this is an ordered list of elements-->
<li> <!-- Each list element-->
First element
</li>
<li>
Second element
</li>
</ol>
</nav>
Simply translate them.
Define this (given that clicker is the selector for your click event).
var xValue = -5;
$("#clicker").on('click', function(e) {
e.preventDefault();
$(".list-item").css("transform","translateX("+xValue+")");
xValue -= 5;
});
Translate will not mess with your markup, and only move the objects it's working on to the left (in this case).
By keeping xValue you can keep moving them to the left by repeatedly clicking clicker.
Hello I am trying to keep the links centered of the tan margin. How do I get it centered to the tan margin? I've tried a few things but margins won't move.
Here is the website if you want to visually see the issue:
http://codepen.io/willc86/pen/hpFLe
I am not sure why links don't want to move when I use margin-left or margin-top
css is
#header{
background-color: tan;
width: 90%;
Height: 80px;
margin: auto;
margin-bottom: 30px;
text-align: center;
}
#header a {
margin: 40px;
border: 3px solid green;
}
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin-left: 30px;
}
#mcolumn {
width: 300px; border: 1px solid red; margin: auto;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right; margin-right: 30px;
}
.clear {
clear: both;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#bx{
border: 3px solid green;
margin: auto;
width: 200px;
}
#box2{
border: 3px solid green;
margin: 40px;
text-align: center;
}
#margin{
margin: 30px;
}
and my html is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<div id="header">
Facebook
Google
Yahoo
</div>
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="margin">
<div id="mcolumn"><p>mcolomn</p></div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="box2">
<div id="margin">
<div id="bx">
<p> hello what is up
</div>
</div>
</div>
</body>
</html>
Add this to #header
#header {
....
line-height: 80px;
vertical-align: middle;
}
Also check the demo.
Note that this might give trouble if you want to lines of menu.
General tip : always add line-height equal to div's height to align your link in vertical middle position
line-height:80px; in #header a would do the job for you! :)
If you want to align the links vertically:
#header a {
...
line-height: 80px;
}
#header a {
border: 3px solid #008000;
display: inline-block;
margin: 0 40px;
position: relative;
top: 50%;
}
Note: the top: 50% somehow uses height and margin of parent.
You can also do it like this: create a div inside (I've called it links) which you can format away from your other div. The margins don't show because the text is inline, and you can't give inline text a top and bottom margin. Changing it to display: inline-block and position: relative allows you to change the place of the div (if you don't want to set line height). Top: 36% will centre it because this counts the margin (so you want half of 80/110 px, or 4/11 = ~36% (you can make this 50% by adding the margin to the object beneath).
HTML:
<div id="links"> Facebook
Google
Yahoo
</div>
CSS:
#header a {
border: 3px solid green;
margin-left: 40px;
margin-right: 40px;
}
#links {
display: inline-block;
position: relative;
top: 36%;
}
http://codepen.io/anon/pen/vbJkg
i'm under this situation... i've made an overlay div working as a popup window.
Contains a little header that has some text and a "X" button to "close" it (which is a child div). Then it has the body content as another child div.
I've set the draggable and re-sizable jquery functionality to the parent overlay popup window.
Works fine... sort of speak, because when i scroll down due to large content, the little handler resize icon moves up or down depending on how I scroll instead of being fixed at the bottom like where it was in the first place.
And another thing, the little child divs inside its parent aren't resized with the parent's size. How can i achieve that?
This is my HTML code:
<div id="sendmessage-panel-overlay">
<div id="overlay-header">
<h1 id="title" style="font-size: 12px; float: left; padding-top: 7px;"></h1>
<div id="maximize_icon">
<img src="<c:url value='/images/x-icon.gif'/>" title="Close window" onclick="closePopUp()">
</div>
</div>
<div id="body-content"></div>
</div>
And this is the CSS:
#sendmessage-panel-overlay
{
background-color: white;
border-color: gray;
border-style: solid;
border-width: 1px;
float: left;
height: 500px;
left: 21%;
padding: 0px 17px 17px;
position: fixed;
text-align: center;
top: 10%;
visibility: hidden;
width: 700px;
overflow: auto;
}
#overlay-header
{
width: 700px;
position: fixed;
height: 30px;
background-color: #fff;
}
#maximize_icon {
width: 16px;
height: 16px;
float: right;
}
#body-content {
padding-top: 50px;
padding-left: 10px;
display: inline-block;
}
Either move the element outside of the scroll-able element or use position: absolute (probably combined with a position: relative somewhere).