Javascript sliding a div left and right - but with a little 'ear' - javascript

I would like to be able to slide a div left and right... i have read the other posts and have it working using a button click.
BUT
I would like to have a little floating 'ear' (small rounded icon that acts like a button) that will stick to the upper right corner of the div. This 'ear' would act as the button for sliding left and right in the form.
My question is.... How do I make this little ear stick to the upper right corner of the div, but have it hang over and outside of the div.
Another way of saying it is, i would like to have a floating div that will stick to the upper right corner of a div, regardless of where the other div is located.
I was thinking of having another div that contained the graphic, and force the location of the 'ear' to be the upper right corner of the div that the 'ear' is supposed to attach to.
thank you

Something like this might work:
#container {
position:relative;
overflow:visible;
}
#ear {
position:absolute;
left: 100%; /* hang over right edge */
top: 0;
}
Assuming this HTML:
<div id="container">
<div id="ear">Click me!</div>
Look at me, I'm a moving box!
</div>

I'm using an implementation like this:
<div class="tooltip">
<div class="tooltip-inner">I'm a tooltip</div>
<div class="tooltip-ear"></div>
<!--tooltip-ear last so you can float it over tooltip-inner without z-index-->
</div>
Styling:
.tooltip { position: absolute; left: 0; top: 0; width: 200px; }
.tooltip-inner { padding-right: 10px; } /* make space for the ear */
.tooltip-ear { position: absolute; right: 0; top: 0; width: 10px; height: 10px; }
You can add a border to .tooltip-inner. and have a graphic that does the border for the ear. You can shift the ear over 1px to the left so it covers the .tooltip-inner border to make the border look fluent.
You can even go one step further and add .tooltip-orientation-top-left or .tooltip-orientation-bottom-right to change the position of the ear by just changing one class.
Your style will look like:
.tooltip.tooltip-orientation-top-left .tooltip-inner { padding-right: 10px; }
.tooltip.tooltip-orientation-top-right .tooltip-inner { padding-left: 10px; }
.tooltip.tooltip-orientation-top-left .tooltip-ear { position: absolute; right: 0; top: 0; width: 10px; height: 10px; }
.tooltip.tooltip-orientation-top-right .tooltip-ear { position: absolute; left: 0; bottom: 0; width: 10px; height: 10px; }

Related

Move relative object position when scrollbar appears using CSS

On my page, I'm displaying a log file in a div element with overflow-y:auto. In the top right corner of the div, I'm overlaying a close button div with position:relative.
When the scrollbar appears, the button is overlaying the scrollbar which is hard to see and looks ugly. You can see an example here: https://jsfiddle.net/4azw0rLf/
Moving it with javascript when scrollHeight exceeds clientHeight feels like a hack. Is there an option in CSS to move the close button to the left for the width of the scrollbar as soon as it appears?
You can wrap your terminal and move your close button inside. I created a minimal example starting from your code.
EDIT
With the first answer the close button scrolled along with the text, I corrected using the position: sticky; and top:0px;
It is not compatible with all browsers, but with most, you can check compatibility here.
const terminal = document.getElementById("terminal");
addText = () => {
terminal.innerHTML += "overflowing line<br>";
}
#container-terminal {
position: relative;
overflow-y: auto;
border: 2px solid;
height: 100px;
width: 200px;
}
#terminal {
position: absolute;
height: 100%;
width: 100%;
}
#closeBtn {
background-color: red;
position: -webkit-sticky;
position: sticky;
top:0px;
width: 20px;
display: inline-block;
float: right;
}
<div onclick="addText()" style="cursor:pointer;">Click to add text</div><br>
<div id="container-terminal">
<div id="terminal">CSS only<br>CSS only<br>CSS only<br>CSS only<br>CSS only<br></div>
<div id="closeBtn">X</div>
</div>

Position absolute turned into position fixed on scroll

In the snippet below, you will see that I have two sections. One green and one blue. Then in the green section, there is a circle icon. Essentially what I am looking for is for the circle icon to be placed where it is currently on page load, but then as the user scrolls, for the icon to change to a fixed position until the blue section is at the top of the screen. Then when the user scrolls back up for the circle icon to do a reverse action and stay fixed until it gets back into its original position.
How can I do this?
#slantWrap {
height: 80vh;
width: 100%;
position: relative;
background: green;
}
#redIcon {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 2;
margin: 0;
}
#redIcon img {
height: 90px;
width: auto;
}
#sec {
width: 100%;
height: 400px;
background: blue;
}
<div id="slantWrap">
<div id="redIcon">
<img src="http://www.iconhot.com/icon/png/devine/256/circle.png" alt="icon">
</div>
</div>
<section id="sec"></section>
$(window).scroll(function (e) {
if($(this).scrollTop() >= $('#sec').offset().top - 90){
$('#redIcon').addClass('fixed');
} else {
$('#redIcon').removeClass('fixed');
}
});
So this function fires every time a user scrolls. What the if statement is looking for is, if the second div (Blue background) is 90px from the top of the window, (note that this - 90 is the same height as the image) the add class of fixed if the the #sec div is NOT 90px from the top of the screen then remove the class of fixed. Lastly you will need to add this to your CSS to have a position fixed with the class is added.
#redIcon.fixed{
position:fixed;
top:0px;
}
Working CodePen: https://codepen.io/ben456789/pen/OZPEpG
Hope this helps!

Allow float element to overflow horizontally

I have the following structure:
<div id="hold">
<div id="hold-left">content</div>
<div id="hold-right">content</div>
</div>
hold-left floats to the left and hold-right floats to the right. The widths are 40% and 55% when the page is loaded. The thing is, hold-right is a sort of preview of something and the user needs to be able to resize it.
This is easily done using JavaScript (the user selects a zoom level radio button), however the issue I am now facing is that, if it is enlarged, it drops down beneath hold-left. What I'd like it to do is float over freely to the outside of the parent div.
How do I go about this? Can it be done through CSS at all, or do I need to dynamically resize the parent every time I resize hold-right?
Have you considered using a left margin on .hold-right?
.hold-left{
float:left;
width:40%;
}
.hold-right{
margin-left:45%;
}
Also, generally you should use classes, not IDs.
You can try with display: table, and table-cell.
The table will need to be 100% width and no width specified for table-cell. Then the content will "resize" the cells.
Otherwise, you will need to use javascript to update both cells.
Use position property in css. Checkout this
position: relative; in the parent.
position: absolute; in the each child.
#hold {
position: relative;
}
#hold-left {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: red;
}
#hold-right {
position: absolute;
right: 0;
width: 100px;
height: 200px;
background: yellow;
}
#zoomLevelSelector {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}

re-center div when content change

I have a div that is centered on the middle of the screen. I need to pass some text to the div and the text will be of various lengths. The problem is that when I pass text to the div, it changes size but wont stay centered. Here's a JSFiddle that demonstrates the problem.
I currently center the div like this:
position: absolute;
top: 50%;
left: 50%;
Add this line:
#divError{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
http://jsfiddle.net/h0d097vp/3/
Your div is not centered. The existing positioning centered the top left corner of the div.
Try this:
#divError{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
JSfiddle Demo
Can you set constant width?, if so here's your answer JSFiddler
Just added
width: 100px;
right: 0;
left: 0;
margin: auto;
Your div is not centered in the beginning either. left: 50% means that the diff starts at 50%, which means that the start of the div is at the center of the page.
When the div has a width of 200px, than still only the start will be at the center.
You can give the div a fixed width, and than add a negative margin of half the width so the div will really be in the center of the page.
Like
#divError{
width: 200px;
margin-left: -100px;
}
When using top and left they position whichever side they are named directly at the position given. So left: 50% will always have the leftmost side positioned directly at the 50% mark. This is not the center, but starts the left side of the div at the center. The same occurs with top: 50%. In order to use top and left you'd need to know the overall width and height and subtract half of their value from their respective top and left (e.g left: calc(50% - ([width of element] / 2)). Since you are using dynamic content you can't know either the height or the width (unless you make them static.)
So what can you do? There are a few ways, but my favorite at the moment is fairly new. It's called flexbox. It's support is decent. There's a nice snippet from css-tricks as well.
The relevant code to center an element both vertically and horizontally would go like this:
$(document).ready(function() {
$("button").click(function() {
$.get("http://lorem.mannfolio.com/", function(data) {
var lorem = data.split("\n\n");
$(".centered").html(lorem[0]);
});
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
border: 1px solid black;
}
button {
position: fixed;
top: 10px;
left: 10px;
}
<button>Change text</button>
<div class="container">
<div class="centered">I'm centered No matter what you put in me.</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

CSS and Javascript vertical alignment problem

let me preface this by saying I don't really know CSS at all. I'm trying to make a performance bar using CSS and Javascript and what I have so far creates a bar background and then a bar inside that one that fills it up to the specified percentage. My problem is that the "inner bar" comes down from the top instead of up from the bottom. I could just subtract the percentage from 100 and take the absolute value, but that seems like kind of a dirty hack. I would like to just see how I could make this be aligned at the bottom and "grow" up as the height grows rather than starting at the top and growing down.
CSS Code
.cssSmall .performanceBack
{
position: absolute;
z-index: 1;
height: 20px;
width: 18px;
top: 4px;
left: 81%;
background-color: Brown;
}
.cssSmall .performanceBar
{
font-size: 6px;
vertical-align: top;
background-color: Orange;
}
Javascript code
this.performanceBack = gDocument.createElement("performanceBack");
this.performanceBack.className = "performanceBack";
div.appendChild(this.performanceBack);
this.performanceBar = document.createElement('div');
this.performanceBar.className = 'performanceBar';
//Hard coded value for testing
this.performanceBar.style.height = '30%';
this.performanceBack.appendChild(this.performanceBar);
Thanks.
Since you've already set .performanceBack to position: absolute I would do the same for .performanceBar but set the bottom property to 0 which will make it anchored to the bottom-left corner of .performanceBack.
.cssSmall .performanceBar
{
font-size: 6px;
background-color: Orange;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
You can see it in action at http://jsfiddle.net/U5V2b

Categories