I have used the vuescroll library in my Nuxt project and CSS Scrollbar doesn't work when I deactivate Toggle toolbar for different devices.
There is a bug that makes overflow: scroll hidden and I am sure that I haven't used this CSS style. When I change sizeStrategy to number it works but the height exceeds enormously.
Can anyone help me to deactivate this overflow?
ops: {
vuescroll: {
mode: 'native',
sizeStrategy: 'percent',
locking: true
},
bar: {
showDelay: 500,
keepShow: true,
background: '#FFFFFF',
opacity: 1,
hoverStyle: false,
size: '1%',
disable: false
},
scrollPanel: {
initialScrollY: false,
initialScrollX: false,
scrollingX: true,
scrollingY: false,
speed: 300,
easing: undefined,
verticalNativeBarPos: 'right'
},
rail: {
background: '#A3ACBC',
opacity: 0.3,
size: '1%',
specifyBorderRadius: '1%',
gutterOfEnds: '0',
gutterOfSide: '0',
keepShow: false
}
}
Hi! I solved the problem by uninstalling the library and using css scrollbar instead.Here is the solution for making scroll:
.carousel {
width: 90%;
margin-left: auto;
margin-right: auto;
display: block !important;
padding-bottom: $spacing-09;
white-space: nowrap;
scroll-behavior: smooth;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
.featured-item {
display: inline-block;
width: calc((#{$column-width-mobile} + #{$column-gap-mobile}) * 11);
white-space: normal;
vertical-align: top;
margin-right: calc(#{$column-gap-mobile} * 2);
}
}
#wrapper {
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-thumb {
background: white;
border-radius: 30px;
}
::-webkit-scrollbar-track {
background: rgba(163, 172, 188, 0.2);
}
}
Related
I'm trying to build a simple transition in Svelte where I have cards that animate in on page load. I've followed this answer to get it to fire correctly onMount, so that has been ok. However, the transition itself seems to "jump" to the end too quickly, and skips the last few frames.
GIF of problem running on localhost.
Oddly enough, when I copy and paste the same code into the REPL, the visual bug seems to be fixed. I've even downloaded the REPL and run locally, and the bug still appears.
Here is the code.
<script>
import { fly } from 'svelte/transition';
import { onMount } from 'svelte';
const contents = [
{
id: 1,
},
{
id: 2,
},
{
id: 3,
},
];
let ready = false;
onMount(() => (ready = true));
</script>
<main>
<div class="topBar" />
<div class="container">
{#if ready}
{#each contents as content, i}
<div
class="transCard"
transition:fly={{ y: 80, duration: 1000, delay: i * 200 }}
/>
{/each}
{/if}
</div>
</main>
<style>
main {
background: white;
width: 100vw;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
}
.container {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
overflow: hidden;
margin-top: 80px;
}
.topBar {
width: 100vw;
height: 80px;
background: black;
position: fixed;
top: 0;
left: 0;
z-index: 9;
}
.transCard {
width: 100%;
height: 200px;
background: gray;
}
</style>
Found the answer myself! Not sure why it fixed it, but for me changing transition to just in seems to have cured the visual bug.
I have a website I'm working on to teach myself how to use CSS, HTML, and JS all together, but I'm running into issues!
Here is a link to what I have: https://codepen.io/ckneeland/pen/dypMLVe
Here is the code that I have:
particlesJS("particles-js", {
particles: {
number: { value: 80, density: { enable: true, value_area: 800 } },
color: { value: "#ffffff" },
shape: {
type: "circle",
stroke: { width: 0, color: "#000000" },
polygon: { nb_sides: 5 },
image: { src: "img/github.svg", width: 100, height: 100 }
},
opacity: {
value: 0.2,
random: false,
anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
},
size: {
value: 3,
random: true,
anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
},
line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 6,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: { enable: false, rotateX: 600, rotateY: 1200 }
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: { enable: true, mode: ["repulse", "bubble"] },
onclick: { enable: true, mode: "push" },
resize: true
},
modes: {
grab: { distance: 400, line_linked: { opacity: 1 } },
bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 },
repulse: { distance: 200, duration: 0.4 },
push: { particles_nb: 4 },
remove: { particles_nb: 2 }
}
},
retina_detect: true
});
var count_particles, stats, update;
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "absolute";
stats.domElement.style.left = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);
count_particles = document.querySelector(".js-count-particles");
update = function () {
stats.begin();
stats.end();
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
}
requestAnimationFrame(update);
};
requestAnimationFrame(update);
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
background-image: linear-gradient( 179.7deg, rgba(0,0,0,1) 2%, rgba(26,166,198,1) 90.1% );
}
canvas {
display: block;
}
td {
padding-left: 15px;
padding-right: 15px;
}
.resize {
width: 100px;
height: 100px;
}
.resize2 {
width: 100px;
height: 100px;
}
.center-table {
width: auto;
height: auto;
position: fixed;
top: 30%; /*May have to change to include more apps in the future*/
right: 30%; /*May have to change to include more apps in the future*/
}
/* ---- particles.js container ---- */
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient( 179.7deg, #7d4eb9 2%, rgba(26,166,198,1) 90.1% );
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Connor's Particles</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div>
<div id="particles-js" ></div>
<table class="center-table">
<tr>
<td><img class="resize" src="Images/Facebook.png" alt="Facebook"></td>
<td><img class="resize" src="Images/Instagram.png" alt="Instagram"></td>
<td><img class="resize" src="Images/Snapchat.png" alt="Snapchat"></td>
<td><img class="resize" src="Images/Twitter.png" alt="Twitter"></td>
<td><img class="resize" src="Images/YouTube.png" alt="YouTube"></td>
</tr>
<tr>
<br>
<br>
<td><img class="resize" src="Images/TikTok.png" alt="TikTok"></td>
<td><img class="resize2" src="Images/Google2.png" alt="Google"></td>
<td><img class="resize" src="Images/Venmo2.png" alt="Venmo"></td>
<td><img class="resize" src="Images/Reddit2.png" alt="Reddit"></td>
<td><img class="resize" src="Images/LinkedIn.png" alt="LinkedIn"></td>
</tr>
</table>
<div style="height: 3000px; background-color: whitesmoke;">
</div>
</div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
<!--#7d4eb9-->
Unfortunately the pictures wont load in on CodePen, but that's not really an issue. How can I can stop the table from moving when I scroll? I put it inside a div, so I'm really confused as to how it's even moving in the first place. Along with that, how can I dynamically center the table? The solution I have at the moment just centers it on my own screen, but not others. Any thoughts?
The JS is used for the particle animation using ParticlesJS. You probably don't need to look at that but StackOverflow wanted me to include it.
I did not understand what you mean table is 'moving'. With position: fixed. The table remains stationary at that position during page scroll. You want the table to be moving along with the scroll??
Following are the two solutions based on your requirements.
To keep it centered with table remaining stationary at a position with position fixed:
CSS
.center-table {
width: auto;
height: auto;
position: fixed;
left: 50%; //new addition
transform: translate(-50%, 0); //new addition
}
To make Table scroll along with the page and remain at the center
CSS
.center-table {
margin: 0 auto; //new addition
width: auto;
height: auto;
position: relative; //changed fixed to relative
}
geeks! It's probably simply question.. but how can I remove this 'white line' or 'gap' between two divs in the same color?
It's only problem when I have the same background color in the divs. It's not visible when I pick other color. You can see this gap while scrolling.
I was trying to manage with background-color and border but it doesn't works for me or I am doing something wrong..
html.fp-enabled,
.fp-enabled body {
margin: 0;
padding: 0;
overflow:hidden;
vertical-align: middle;
background-color: #f2f2f2;
/*Avoid flicker on slides transitions for mobile phones #336 */
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#sec1, #sec2{
background-color: #ac2022;
}
.section{
text-align: center;
align-items: center;
justify-content: center;
vertical-align: middle;
position: relative;
color: #fff;
}
body{
background-color: transparent;}
.fp-section {
position: relative;
-webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
-moz-box-sizing: border-box; /* <=28 */
box-sizing: border-box;
}
.fp-slide {
float: left;
}
.fp-slide, .fp-slidesContainer {
height: 100%;
display: block;
}
.fp-slides {
z-index:1;
height: 100%;
overflow: hidden;
vertical-align: middle;
position: relative;
-webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
transition: all 0.3s ease-out;
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout:fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.fp-slidesContainer {
float: left;
position: relative;
}
.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
height: auto !important;
}
.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
height: auto !important;
}
/*Only display content to screen readers*/
.fp-sr-only{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
<script src="https://cdn.jsdelivr.net/npm/fullpage.js#3.0.8/dist/fullpage.min.js"></script>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="website description...">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="fullpage">
<div id="p1" class="page-section section">
<div class="slide" id="sec1" data-anchor="slide1">
<img src="" data-src="" />
<h3>Section 1</h3>
<p class="view-more">See more</p>
</div>
</div>
<div id="p2" class="page-section section">
<div class="slide" id="sec2" data-anchor="slide1">
<img src="" data-src="" />
<h3>Section 2</h3>
<p class="view-more">See more</p>
</div>
</div>
<div id="p2" class="page-section section">Some section</div>
<div id="p3" class="page-section section">Some section</div>
</div>
<script type="text/javascript">
var myFullpage = new fullpage('#fullpage', {
//Navigation
menu: '#menu',
lockAnchors: false,
anchors:['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'fifthPage'],
navigation: true,
navigationPosition: 'right',
navigationTooltips: ['01', '02', '03', '04', '05', '06',],
showActiveTooltip: true,
slidesNavigation: true,
slidesNavPosition: 'bottom',
//Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
continuousHorizontal: false,
scrollHorizontally: false,
interlockedSlides: false,
dragAndMove: false,
offsetSections: false,
resetSliders: true,
fadingEffect: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,
scrollOverflowReset: false,
scrollOverflowOptions: null,
touchSensitivity: 15,
bigSectionsDestination: null,
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
//Design
controlArrows: false,
verticalCentered: true,
sectionsColor : ['#ccc', '#fff'],
paddingTop: 0,
paddingBottom: 0,
fixedElements: '#header, .footer',
responsiveWidth: 0,
responsiveHeight: 0,
responsiveSlides: false,
parallax: false,
parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
cards: false,
cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},
//Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',
lazyLoading: true,
//events
onLeave: function(origin, destination, direction){},
afterLoad: function(origin, destination, direction){},
afterRender: function(){},
afterResize: function(width, height){},
afterReBuild: function(){},
afterResponsive: function(isResponsive){},
afterSlideLoad: function(section, origin, destination, direction){},
onSlideLeave: function(section, origin, destination, direction){}
});
</script>
</body>
</html>
I am trying to create a directive with the following functionalty:
when the line breaks (no more place in the div) a tooltip will be created (with the full text) and the text will get cut and replaced by 3 dots.
everything i found so far is for multi line, the best i got is this:
css:
.trim-info {
max-width: 50px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 15px;
position: relative;
}
template:
'<div class="trim-info" uib-tooltip="{{lineCtrl.text}}">{{lineCtrl.text}}</div>'
But, as you can see the width is hardcoded.
My question is how can I make it dynamcily to the parent width.
In css you can do
.parent-div {
display: flex;
}
.text-div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
In your directive you can check
angular.module('myApp').directive('tooltip', function() {
function isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
return {
restrict: 'E',
link: function(scope, el, attr) {
var addTooltip = isEllipsisActive(el);
}
};
}
And then depending on this value enable tooltip.
Here is a realy simple way to do it with some jQuery.
The styling is up to you :)
$('.tooltip-bottom').each(function() {
var after = $(this).clone();
after.removeClass('tooltip-bottom')
.removeClass('small')
.addClass('tooltip')
.css({"position": "absolute",
"top": ($(this).position().top + $(this).height() ) + "px",
"left": $(this).position().left + "px"});
$('.MyContainer').append(after);
});
.small {
width: 50px;
height: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tooltip {
display: none;
transition: all 0.5s;
}
.small:hover ~ .tooltip {
display: block;
overflow-x: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="MyContainer">
<div class="small tooltip-bottom">this is a very small div</div>
</div>
Is it possible to add a mini cesium container on top of Main cesium container as follows .
Both containers should render different information. How this can be achieved in cesium?
Yes, this is possible, but beware that it is a full separate instance of Cesium. This means it takes its own texture memory, GL context, etc. Click "Run code snippet" at the bottom of this for an example.
var mainViewer = new Cesium.Viewer('mainCesiumContainer', {
navigationHelpButton: false, animation: false, timeline: false
});
var insetViewer = new Cesium.Viewer('insetCesiumContainer', {
navigationHelpButton: false, animation: false, timeline: false,
geocoder: false, baseLayerPicker: false, sceneModePicker: false
});
// Make the inset window display in 2D, to show it's different.
insetViewer.scene.morphTo2D(0);
html, body, #mainCesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
font-family: sans-serif;
}
#insetCesiumContainer {
position: absolute;
bottom: 1%;
right: 2%;
width: 40%;
height: 60%;
border: 1px solid #fff;
box-shadow: 0 0 4px #fff;
}
<link href="http://cesiumjs.org/releases/1.16/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.16/Build/Cesium/Cesium.js">
</script>
<div id="mainCesiumContainer"></div>
<div id="insetCesiumContainer"></div>