First of all, I'm sorry for my english, not my maternal language. Secondly, there is my github : https://github.com/CapitaineBarbarossa/test-carousel
So, my problem is that I want to make a dynamic carousel so I use v for= product in product. As you can see, no image appears but when you press F12 to inspect, all appear and all is good and stay good if you leave the dev tool. But if you refresh the page, the images disappears again. And I really don't know how to fix this issue.
With my gratitude, I wish you a good day!
I tried to make a dynamic carousel but the images don't appear like they should.
I checked your code. That is not a vue issue. That is a CSS issue. All carousel div's width & height is zero because you used position absolute property.
.carousel__body .carousel__slider__item .item__3d-frame {
position: relative;
width: 300px;
height: 200px;
transition: transform 1s ease-in-out;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.carousel__body .carousel__slider__item .item__3d-frame__box {
display: flex;
align-items: center;
vertical-align: middle;
text-align: center;
position: absolute;
box-sizing: border-box;
border-color: var(--box-border);
background: var(--box-bg);
border-width: 3px;
border-style: solid;
}
.contain {
width: 300px;
height: 200px;
position: relative;
}
Related
I have a webpage here.I have a carousel in which an image is animated as coming from right. When it comes from right I can see a strange thing that all the fixed content (walk me through and chat icon) suddenly change their position when the image comes from right.This is the normal position.This is when the image comes from right.The walk me through and the chat icon are fixed relative to the body element. I have a raw guess that the two images due to being part of the page with display not none, change the calculated height of the body element. But the problem is that it happens in responsive mode only in chrome and otherwise it works fine when viewed without responsive mode on chrome.
Edit1: The culprit is translateX(100%) in animation come-from-right, without it, everything seems to be fine.
Edit2:If we replace translate(100%) with translate(-100%) in animation come-from-right,it works fine.
Edit3:The problem is that the webpage width is increasing when it comes from right, you could see scroll bar's size increasing.
Edit4:Even if we set the width of the body to 100px,even then the carousel is taking much space.
Edit5: If we add .slider img {width:200px;} everything is back to normal
Hope this will help you
<div class="fixedbtn" style="
height: 100vh;
position: absolute;
display: flex;
align-items: center;
">
<div class="walk-me-through-container"><div class="walk-me-through-container-before">?</div><div class="walk-me-through-text-container">Walk me Through
</div></div>
</div>
Comment top 50%
.walk-me-through-container {
position: fixed;
border: 0.1rem solid var(--white);
background-color: var(--white);
height: 18rem;
width: 4.5rem;
left: 0;
/* top: 50%; */
transform: translateY(-50%);
cursor: pointer;
z-index: 10000000000000;
}
Using percentages is the real culprit here as the unstable right and top are changing due to the fact that carousel loaded image is adding to the dimensions. Do top and left in vw and vh instead of percentages.Also use only top and left as right and bottom are unstable in the case.To totally solve the problem do html {overflow-x:hidden}, this make all sides stable.Do
.chat {
display: flex;
align-items: center;
justify-content: center;
background-color: #369cd9;
position: fixed;
top:calc(100vh - 8rem);
left:calc(100vw - 8rem);
height:5rem;
width:5rem;
border-radius: 50%;
box-shadow: 0 0 3rem 1rem rgba(0,0,0,0.2);
z-index: 10000000000001;
cursor:pointer;
}
and
.walk-me-through-container {
position: fixed;
border:0.1rem solid var(--white);
background-color: var(--white);
height:18rem;
width:4.5rem;
left:0;
top:50vh;
transform: translateY(-50%);
cursor:pointer;
z-index: 10000000000000;
}
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
Let's say I have a function that changes the Align Self css property via JS.
HTML
<img id= "arrow" src="/images/leftarrow.svg">
CSS
.container {
background-color: $white;
box-shadow: 2px 0px 4px 1px black;
width: 400px;
height: 100vh;
display: flex;
flex-direction: column;
visibility: visible;
position: relative;
z-index: 2;
}
#arrow {
height: 25px;
width: 25px;
position: absolute;
align-self: flex-end;
top: 50vh;
cursor: pointer;
background-color: $white;
border-radius: 50%;
}
JS
function reverseIcon () {
arrow.style.alignSelf = "flex-start";
}
arrow.addEventListener("click", reverseIcon);
Javascript doesn't seem to change the align self property straight away. When I click, it does not change. I jumped into devTools to see what was wrong and it was applied when there was a change in the screen(?). I have no media queries. I tried this on 3 different browsers but AlignSelf doesn't seem to show up on the screen right away. It only actually changes as soon as I jump into devtools or like change the size of the screen. Anyone know why?
**Nevermind, Seems like only Chrome isn't responding to it. Still don't understand what part of this code isn't compatible with Chrome then
Are you sure the alignSelf property gets applied when you change your screen size?
Or is it just the default bahavior? In Dev-Tools, if you inspect, do you see the style-attribute at your image element? If yes, than it could be that your #arrow selector overrides it. If that's the case, I would try to toggle between a class where you can use the !important rule to override the property. Like so:
.flex-start{
align-self: flex-start !important;
}
I would like to get a circle to expand from itself, while keeping the original circle. What I want is something like when you hover over the circles (e.g. water) on this page (click lets get started to see the circles). I'm not sure how to do this. Note that my knowledge of jQuery is quite small, so if you find a way to do this with jQuery, can you try to keep it simple? Thanks in advance. The earlier the better, as this is for a school project.
I tried to make the div have a function for onmouseover, but then I don't know how to get the rest. I was thinking about while the div animates from a smaller width and height, to move the circle, but the circle will still expand from the middle, and not the old circle.
Start with a CSS-only setup, then see if you actually need Javascript at all. This will generally always be more responsive/faster-loading. However, if you're already loading a JS library and it has functions built for this (like jQuery), then sure make use of them. There are plenty of tutorials for animating elements, CSS or JS.
Play around with numbers and styling as you wish.
Codepen
#container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
width: 200px;
height: 200px;
background-color: red;
border-radius: 50%;
}
.circle:before {
content: "";
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
z-index: -1;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: 0.5s ease-in-out;
}
.circle:hover:before {
transform: scale(1.7) translate(-20%,-30%);
background-color: pink;
}
<div id="container">
<div class="circle red"> </div>
</div>
So I know there are plenty of feeds about these issues and I've been through most of them yet I can't make it work. I get really lost with .js.
So I'm using very simple pop up windows that provide more contents on a topic by cicking on the title of the topic. I'm using a simple css code:
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
left: 20%;
top:25%;
width: 70%;
height: auto;
padding: 10px;
border: 6px solid #ed7d86;
background-color: white;
text-align: center;
z-index: 1002;
overflow: auto;
}
And html:
<div class="flex-item">
<a href="javascript:void(0)" onclick="document.getElementById('TITLE').style.display='block';
document.getElementById('fade').style.display='block'">TITLE</a>
<div id="TITLE" class="white_content">Something else about TITLE.
<a href="javascript:void(0)" onclick="document.getElementById('TITLE').style.display='none';
document.getElementById('fade').style.display='none'">Close</a></div>
</div>
This code works great until I try it on elements that are lower on the page in which case the box obviously continue showing at the set top and left position, which means that I have to scroll back up to see it. If I get rid of top and left conditions, I just end up with the box showing up randomly at some corner of the page.
I also want people to be able to leave the box just by clicking on the black_overlay area. Can anyone recommend a fix that would work with my code?
Ah well, not much success with my question. Wanted to let you know that I changed the position of the .white_content to fixed and it solved my problem for positioning. I'm still working on closing the window by clicking outside the box without changing all my code.