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
Related
I need help keeping my CSS tooltip on screen for my website. It unfortunately is too big for the website near the edge of the screen and also is WAY too big for any mobile device and doesn't position correctly (probably because I plan to add very large descriptions in each tooltip). I would like to just use CSS but would be willing to use JS as I'm starting to think that may be the only way to do it correctly, but I'm having a lot of trouble figuring out how to make it work.
I basically had copied over the code from another website with many tweaks if it helps you understand my code better: https://www.w3schools.com/css/css_tooltip.asp
The only results I could find online were about centering the tooltip on the screen which strangely didn't work and code using SCSS which I'm not experienced with and would prefer not to use.
Here is my partial HTML and CSS code:
body {
overflow-x: hidden;
overflow-y: scroll;
}
.ref {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.ref .versekjv {
visibility: hidden;
width: 250px;
background-color: black;
color: #fff;
text-align: left;
padding: 5px;
border-radius: 6px;
z-index: 98;
position: absolute;
top: 100%;
left: 50%;
margin-left: -125px;
flex-direction: column;
}
.ref .versekjv::after {
content: " ";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.ref:hover .versekjv {
visibility: visible;
}
.redletters {
color:red;
}
#media screen and (max-width:1000px){
.ref .versekjv {
font-size: 1rem;
max-width: 20rem;
position: fixed;
bottom: auto; top: 13%;
left: 78%;
text-align: left;
transform: translate(-50%);
transform: translateX(-50%);
white-space: normal;
z-index: 98;
}
.ref .versekjv::after {
border-color: transparent;
}
}
<li class="box"><a>
<div class="innerbox">Reference</div>
<div class="innerbox"><u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>#</i> Verse Text</p></span></u></div>
<div class="innerbox"><u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>#</i> Verse Text</p></span></u>; <u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>Verse Num.</i> Verse Text</p></span></u></div>
</a></li>
Thank you so much for your help!
First, you need to get the DOM object of your tooltip,
let tooltip = document.querySelector(".ref .versekjv")
Then, you can use the js method "getBoundingClientRect", which gives you an object that has top, right, left and bottom fields which give you the distances of your element from top, right, left and bottom of the viewport. If your element is fully visible inside the element, all four fields would be positive numbers, otherwise it means it's partly invisible, for example a left field of "-10" means about 10px of length of your elements is beyond the left edge of the viewport.
What you can do is that you always check the top, left, ... distances of your element, and if they are negative numbers, manually change them and thus position your element correctly, which could be achieved like this:
tooltip.style.left = 20
I have a wordpress based website using WooCommerce and a plugin called Extra Product Options. With this plugin, other than having extra options, I get a floating box in the lower left corner displaying selected options.
Link to product page
Is it possible through CSS to move the floating box from the lower left corner to be fixed beneath the product images?
The current position workes perfectly except when someone with a smaller screen is using it, as which point the floating box covers some of the other product images and the information displayed at the buttom.
If this is overly complicated is there any other recommended solution to this problem? All advice is very appriciated! Thanks in advance!
in the css find .tm-floating-box and set the position from fixed to relative
This is what you have
.tm-floating-box {
width: auto;
height: auto;
padding: 1em;
position: fixed;
right: 0;
top: 0;
bottom: 0;
left: 0;
background: url("../images/p5.png") repeat scroll 0 0 transparent;
z-index: 9999;
max-height: 100%;
overflow: hidden
}
This is what you want to change it to
.tm-floating-box {
width: auto;
height: auto;
padding: 1em;
position: relative;
right: 0;
top: 0;
bottom: 0;
left: 0;
background: url("../images/p5.png") repeat scroll 0 0 transparent;
z-index: 9999;
max-height: 100%;
overflow: hidden
}
It may not put it under the image but it will stop it from flowing around and stick it to the left.
I have a div ( a position:fixed) in the middle of the page. What I want is that when a user scrolls down the page the div moves down just like any div with a fixed position would do but when a user scrolls up, the div should not go above the upper div. That is, it stays where I created it.
Any idea how I would do that?
My current solution is below. The problem with this solution is that since I am hard coding the top position, the div bhevaes differently in different screens and that's a big issue.
CSS
.div-fixed-position {
background-color: #fff;
padding: 20px;
position: fixed;
right: 0;
top: 625px; /* the problem! */
z-index: 1000;
width: 100%;
}
Many thanks
I use this JS to auto detect my top CSS attribute:-
JS
var navHeight = $('header.myheader').height();
var totalHeight = parseInt(headerHeight) + parseInt(navHeight) + 50;
$(".div-fixed-position").css({ top: totalHeight });
and I removed the top from my CSS.
CSS
.div-fixed-position {
background-color: #fff;
padding: 20px;
position: fixed;
right: 0;
z-index: 1000;
width: 100%;
}
I've been playing around with a fixed navigation bar, but I've noticed that when it "fixes" itself, the content below all jumps up on the page.
This is the JSFiddle I've been working on, if you look closely you'll notice that when the nav bar becomes fixed to the top of the screen, the content jumps up ~1 line. I've tried playing around with the Javascript:
var win = $(window),
fxel = $('nav'),
eloffset = fxel.offset().top;
win.scroll(function() {
if (eloffset < win.scrollTop()) {
fxel.addClass("fixed");
} else {
fxel.removeClass("fixed");
}
});
but I'm fairly certain the problem is in the CSS:
*{
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: white;
height: 35px;
border-bottom: solid 1px #E8E8E8;
}
nav.fixed {
position:fixed;
top: 0;
right:0px;
left:0px;
z-index:999;
height: 30px;
border-bottom: solid 1px #E8E8E8;
padding-bottom: 5px;
}
h1{
font-family: 'Lobster', cursive;
font-size: 50px;
text-align: center;
}
Any solutions on how to fix the jumping would be really helpful.
For refrence, I'm trying to get something sort of like this where the very top of the page isn't part of the navbar.
When an element is set to position: fixed, it no longer takes up space on the page, meaning it won't push other elements down on the page. So as soon as your javascript adds the fixed class, the element no longer takes up space, and so the other content jumps up to take the place where it was.
To offset this, you may need to add another rule to add something like a top margin to the next element. The top margin will need to be the height of the (now) fixed element, plus any padding and margin in the fixed element:
https://jsfiddle.net/h6g33wne/8/
nav.fixed + * {
margin-top: 35px;
}
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; }