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>
Related
i have created slider using swiper js. i have achieved layout using css. but issue when i tried to give transition on image doesnt give proper effect of transition
i have created slider using swiper js .. but the isssue is when i add transition to slider then transition not working properly here the my code
swiper js
swiper css
<head>
<style>
.swiper-container {
width: 100% !important;
overflow: hidden;
}
.swiper-slide-active {
width: 87.5% !important;
}
.swiper-slide-next,
.swiper-slide-next+.swiper-slide {
width: 5% !important;
text-align: center;
transition: none;
}
.swiper-slide img {
max-width: 100%;
height: 400px;
object-fit: cover;
border-radius: 5px;
}
.swiper-button-next:after,
.swiper-button-prev:after {
content: none;
}
.swiper-button-prev {
left: -7px;
}
.swiper-button-next {
right: -7px;
}
.swiper-button-next,
.swiper-button-prev {
align-items: center;
width: 40px;
height: 40px;
cursor: pointer;
background: #ffffff;
box-shadow: 2px 4px 8px rgb(0 0 0 / 6%);
border-radius: 50%;
border: 1px solid #f0f0f0;
color: #000;
}
/* .swiper-slide {
transition: all 0.6s ease-in-out;
} */
.swiper-slide {
transition: all 0.6s ease-in-out;
}
#media(max-width: 640px) {
.swiper-slide-next,
.swiper-slide-next+.swiper-slide {
width: 10% !important;
text-align: center;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Swiper js with animation</h2>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div><img src="images/img2.webp" alt=""></div>
</div>
<div class="swiper-slide">
<div><img src="images/img3.webp" alt=""></div>
</div>
<div class="swiper-slide">
<div><img src="images/img4.webp" alt=""></div>
</div>
<div class="swiper-slide">
<div><img src="images/img5.webp" alt=""></div>
</div>
<div class="swiper-slide">
<div><img src="images/img6.webp" alt=""></div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js"
integrity="sha512-wdUM0BxMyMC/Yem1RWDiIiXA6ssXMoxypihVEwxDc+ftznGeRu4s9Fmxl8PthpxOh5CQ0eqjqw1Q8ScgNA1moQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 10,
loop: true,
slidesPerGroup: 1,
watchSlidesProgress: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
type: 'fraction',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// autoplay: {
// delay: 3000,
// disableOnInteraction: false,
// },
// Add cubic bezier animation
transition: {
duration: 6000,
easing: 'cubic-bezier(0.93, 0.24, 0.74, 0.6)',
runCallbacks: true
},
});
var prevButton = document.querySelector('.swiper-button-prev');
prevButton.innerHTML = '<i class="fa-solid fa-chevron-left"></i>';
var nextButton = document.querySelector('.swiper-button-next');
nextButton.innerHTML = '<i class="fa-solid fa-chevron-right"></i>';
</script>
</body>
i want slider something like this using swiper js ridibooks.com/webtoon/recommendation this is just for reference here's the my code codepen.io/sapnas/pen/xxJXmBm
The SwiperJS transition we have hopefully solved at this codepen example.
You still need to refine your code further to suit your specific goal.
codepen example.
Bootstrap: we attempted to duplicate it as well (set to 'col-md-6 col-lg-4') but the bootstrap version was not known in your post.
Some of the code used will not be needed in your further refinements (i.e. CSS .bk1).
In SwiperJS version #8 some minor script code has changed from .swiper-container to just .swiper and these differences may be causing part of your error.
<script>
var swiper = new Swiper('.swiper', {
slidesPerView: 3, ....
</script>
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);
}
}
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
}
I am able to create a pie chart using Chart.JS with this code:
HTML
<div>
<canvas id="top10ItemsChart" style="padding-left:20px" width="320" height="320"></canvas>
<div id="top10Legend" class="chart-legend"></div>
</div>
jQuery
var data = [{
value: 2755,
color: "#FFE135",
label: "Bananas"
}, {
value: 2256,
color: "#3B5323",
label: "Lettuce, Romaine"
}, {
value: 1637,
color: "#fc6c85",
label: "Melons, Watermelon"
}, {
value: 1608,
color: "#ffec89",
label: "Pineapple"
}, {
value: 1603,
color: "#021c3d",
label: "Berries"
}, {
value: 1433,
color: "#3B5323",
label: "Lettuce, Spring Mix"
}, {
value: 1207,
color: "#046b00",
label: "Broccoli"
}, {
value: 1076,
color: "#cef45a",
label: "Melons, Honeydew"
}, {
value: 1056,
color: "#421C52",
label: "Grapes"
}, {
value: 1048,
color: "#FEA620",
label: "Melons, Cantaloupe"
}];
var optionsPie = {
legend: {
display: true,
position: 'right',
labels: {
fontColor: 'rgb(255, 99, 132)'
}
}
}
var ctx = $("#top10ItemsChart").get(0).getContext("2d");
var top10PieChart = new Chart(ctx).Pie(data, optionsPie);
document.getElementById('top10Legend').innerHTML = top10PieChart.generateLegend();
The problem is that it positions the legend to the bottom of the pie, and even spilling and bleeding outside of the boundaries of the div to which I want the pie to restrict itself:
It also presents the legend as a simple unordered list. What I want to do is to control the color of the various elements in the legend ("Banana" should be the same color (#FFE135) as the piece of banana pie (so to speak), etc.)
How can I make the individual elements match the color of its respective data point?
UPDATE
The "Legend Label Configuration" topic in the official docs here indicate you can set the fontColor of the legends, but this is for the whole shebang; what I want to know is, how is it possible to control the color of each item?
UPDATE 2
In an attempt to at least get the legend displaying in the desired spot, I added this to the jQuery:
var optionsPie = {
legend: {
display: true,
position: 'right',
labels: {
fontColor: 'rgb(255, 99, 132)'
}
}
}
. . .
var myPieChart = new Chart(ctx).Pie(data, optionsPie);
document.getElementById("legendDiv").innerHTML = myPieChart.generateLegend();
...but it makes no difference - the legend is still hung from the bottom of the pie chart, and its font is still the default black.
UPDATE 3
I utilized some suggested code, but the legend is still gravity-fed instead of hanging off to the right:
So the legend impinges on the chart below it, rather than restricting itself to its own neighborhood.
Also, I don't want the bullet points to infest the legend - the colored squares (and the verbiage - but also the values) are all I need. How can I shove the legend from south of the pie to east of the pie?
UPDATE 4
I have refactored the code based on this and it's looking better (I added more data to the "label" value of the data array, too):
Still, though, as you can see the legend is infringing on the quadrant below it. There is a "ton" of empty/wasted space around the pie, though - I want to move the pie to the left, and the legend to the right of the pie. That would also allow more vertical space for the pie to grow in stature.
How can I do that? Here is the code I'm using now:
HTML
<div>
<canvas id="top10ItemsChart" class="pie" style="padding-left:20px"></canvas>
<div id="top10Legend"></div>
</div>
CSS
.pie-legend {
list-style: none;
margin: 0;
padding: 0;
}
.pie-legend span {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 100%;
margin-right: 16px;
margin-bottom: -2px;
}
.pie-legend li {
margin-bottom: 10px;
display: inline-block;
margin-right: 10px;
}
JQUERY
var data = [{
value: 2755,
color: "#FFE135",
label: "Bananas: 2,755 (18%)"
}, {
. . .
}, {
value: 1048,
color: "#FEA620",
label: "Melons, Cantaloupe: 1,048 (7%)"
}];
var optionsPie = {
responsive: true,
scaleBeginAtZero: true,
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
}
var ctx = $("#top10ItemsChart").get(0).getContext("2d");
var top10PieChart = new Chart(ctx).Pie(data, optionsPie);
$("#top10Legend").html(top10PieChart.generateLegend());
NOTE: Adding this to optionsPie:
legend: {
display: true,
position: 'right'
},
...does nothing - the legend remains weighted down to the floor like a frog filled to the chin with quail shot.
UPDATE 5
I've played around with Teo's example, trying to get it to work just right but, although it's better, the pie is very puny, and the legend should be wider, but I can't figure out how to stretch the legend horizontally and the pie in all directions. Here's how it looks now:
This is the code now (JQUERY is the same):
HTML
<div class="col-md-6">
<div class="topleft">
<h2 class="sectiontext">Top 10 Items</h2>
<br />
<div class="legendTable">
<div class="legendCell">
<canvas id="top10ItemsChart" class="pie" style="padding-left:20px"></canvas>
</div>
<div class="legendCell" id="top10Legend">
</div>
</div>
</div>
</div>
CSS
.topleft {
margin-top: -4px;
margin-left: 16px;
margin-bottom: 16px;
padding: 16px;
border: 1px solid black;
}
canvas {
width: 100% !important;
height: auto !important;
}
.legendTable {
border: 1px solid forestgreen;
display: table;
width: 100%;
table-layout: fixed;
}
.legendCell {
display: table-cell;
vertical-align: middle;
}
.pie-legend ul {
list-style: none;
margin: 0;
padding: 0;
width: 300px;
}
.pie-legend span {
display: inline-block;
width: 14px;
height: 12px;
border-radius: 100%;
margin-right: 4px;
margin-bottom: -2px;
}
.pie-legend li {
margin-bottom: 4px;
display: inline-block;
margin-right: 4px;
}
Something is squashing the pie and pushing the outer edges of the legend together.
UPDATE 6
Ochi, et al: Here's what I see after the Ochification of my code:
This is my code - I even ordered the jQuery in the way you have it, although I doubt that is really necessary:
HTML
<div class="row" id="top10Items">
<div class="col-md-6">
<div class="topleft">
<h2 class="sectiontext">Top 10 Items</h2>
<br />
#*<div class="legendTable">
<div class="legendCell">
<canvas id="top10ItemsChart" class="pie" style="padding-left:20px"></canvas>
</div>
<div class="legendCell" id="top10Legend">
</div>
</div>*#
<div class="chart">
<canvas id="top10ItemsChart" class="pie"></canvas>
<div id="pie_legend"></div>
</div>
</div>
</div>
. . .
</div>
CSS
.pie-legend {
list-style: none;
margin: 0;
padding: 0;
}
.pie-legend span {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 100%;
margin-right: 16px;
margin-bottom: -2px;
}
.pie-legend li {
margin-bottom: 10px;
display: block;
margin-right: 10px;
}
.chart,
#priceComplianceBarChart,
#pie_legend {
display: inline-flex;
padding: 0;
margin: 0;
}
JQUERY
var optionsPie = {
responsive: true,
scaleBeginAtZero: true,
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
}
var ctx = $("#top10ItemsChart").get(0).getContext("2d");
var data = [{
value: 2755,
color: "#FFE135",
label: "Bananas: 2,755 (18%)"
. . .
}, {
value: 1048,
color: "#FEA620",
label: "Melons, Cantaloupe: 1,048 (7%)"
}];
var top10PieChart = new Chart(ctx).Pie(data, optionsPie);
$("#pie_legend").html(top10PieChart.generateLegend());
...and yet the pie is stretchier than stretch pants on an elephant.
UPDATE 7
Maybe there's a configuration problem or something. I decided to "upgrade" to version 2.1.3 of Chart.JS (started out w. version 1.0.2):
#*<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>*#
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
...and copied almost exactly Teo Dragovic's CodePen here.
The only things I changed were the names of two CSS class ("table" became "legendTable" and "cell" became "legendCell") and the color of the table border from red to forestgreen, and I get this now:
Do I need to also a reference a Chart.JS CSS file or something?
I think this what you want: DEMO
First, you need to make canvas responsive by overriding fixed width and height and wrap it in additional div that can be used for positioning. I used display: table for centering elements but setting inner divs to inline-block also works if you wish for chart and legend to take different amount of space than 50:50.
HTML:
<div class="table">
<div class="cell">
<canvas id="top10ItemsChart" class="pie"></canvas>
</div>
<div class="cell" id="top10Legend"></div>
</div>
CSS:
canvas {
width: 100% !important;
height: auto !important;
}
.table {
border: 1px solid red;
display: table;
width: 100%;
table-layout: fixed;
}
.cell {
display: table-cell;
vertical-align: middle;
}
UPDATE: Did some adjustment based on additional information by OP NEW DEMO
HTML:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="topleft">
<h2 class="sectiontext">Top 10 Items</h2>
<br />
<div class="chart">
<div class="pie">
<canvas id="top10ItemsChart" class="pie"></canvas>
</div>
<div class="legend" id="top10Legend">
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.topleft {
margin-top: -4px;
margin-left: 16px;
margin-bottom: 16px;
padding: 16px;
border: 1px solid black;
}
canvas {
width: 100% !important;
height: auto !important;
margin-left: -25%;
}
.chart {
border: 1px solid forestgreen;
width: 100%;
overflow: hidden;
position: relative;
}
.pie {
position: relative;
padding: 10px 0;
// adjust as necessary
padding-left: 10px;
padding-right: 0;
}
.legend {
position: absolute;
right: 10px;
top: 10px;
height: 100%;
// adjust as necessary:
width: 48%;
}
#media (max-width: 480px) {
.legend {
position: relative;
width: 100%;
}
.pie {
margin: 0;
}
}
.pie-legend ul {
list-style: none;
margin: 0;
padding: 0;
width: 300px;
}
.pie-legend span {
display: inline-block;
width: 14px;
height: 12px;
border-radius: 100%;
margin-right: 4px;
margin-bottom: -2px;
}
.pie-legend li {
margin-bottom: 4px;
display: inline-block;
margin-right: 4px;
}
As #B.ClayShannon mentioned, version 2 is quite a bit different than verison 1. Here is an example of how to customize the legend template using version 2.
options: {
legendCallback: function (chart) {
var text = [];
text.push('<ul class="' + chart.id + '-legend" style="list-style:none">');
for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
text.push('<li><div style="width:10px;height:10px;display:inline-block;background:' + chart.data.datasets[0].backgroundColor[i] + '" /> ');
if (chart.data.labels[i]) {
text.push(chart.data.labels[i]);
}
text.push('</li>');
}
text.push('</ul>');
return text.join('');
},
legend: {display: false},
}
It's not shown directly in the accepted solution above, but to render your legend elsewhere you'll want to call:
$("#myChartLegend").html(myChart.generateLegend());
Finally, some HTML to pull it together (note clearfix is a Bootstrap class that :
<div class="chart">
<div style="float:left">
<canvas id="myChart" class="pie" style="max-width:300px;"></canvas>
</div>
<div class="legend" id="myChartLegend" style="float:left;"></div>
<div style="clear: both;"/>
</div>
This is what works (more or less) using version 2 of Chart.JS:
HTML
<h2 class="sectiontext">Top 10 Items</h2>
<br />
<div class="chart">
<canvas id="top10ItemsChart" class="pie"></canvas>
<div id="pie_legend"></div>
</div>
JQUERY
var data = {
labels: [
"Bananas: 2,755 (18%)",
"Lettuce, Romaine: 2,256 (14%)",
"Melons, Watermelon: 1,637 (10%)",
"Pineapple: 1,608 (10%)",
"Berries: 1,603 (10%)",
"Lettuce, Spring Mix: 1,433 (9%)",
"Broccoli: 1,207 (8%)",
"Melons, Honeydew: 1,076 (7%)",
"Grapes: 1,056 (7%)",
"Melons, Cantaloupe: 1,048 (7%)"
],
datasets: [
{
data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048],
backgroundColor: [
"#FFE135",
"#3B5323",
"#fc6c85",
"#ffec89",
"#021c3d",
"#3B5323",
"#046b00",
"#cef45a",
"#421C52",
"#FEA620"
],
}]
};
var optionsPie = {
responsive: true,
scaleBeginAtZero: true
}
var ctx = $("#top10ItemsChart").get(0).getContext("2d");
var top10PieChart = new Chart(ctx,
{
type: 'pie',
data: data,
options: optionsPie
});
$("#top10Legend").html(top10PieChart.generateLegend());
I say, "more or less" because the pie pieces are still pitifully puny:
I am offically stumped. There is obvioulsy an easy solution for this, but maybe I just can't see it.
Basically I have a content div with 2 main divs—leftSide and rightside—which I want to display inline. Each side contains other divs. No matter what I try the rightSide div always resorts to displaying under the leftSide div.
HTML
<div id="leftSide">
<h6>MERCHANDISE</h6><img src="images/merch.gif" height="220" width="330" border="0" alt="Organ Thieves - Merch Slideshow"/>
<div id="twitter">
<div class=hr></div>
<h6>FOLLOW US</h6>
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 330,
height: 250,
theme: {
shell: {
background: '#525252',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#b51d1d'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('OrganThieves').start();
</script>
</div><!--end of twitter-->
</div><!--endof leftside-->
<div id="rightSide">
<div id="gigs">
<script type="text/javascript">
var bcGigWidgetWidth=500;
var bcGigWidgetMaxHeight=500;
var bcGigWidgetBackgroundColor="333333";
var bcGigWidgetTextColor="ffffff";
var bcGigWidgetLinkColor="eaeaea";
var bcGigWidgetLineColor="7d7058";
</script>
<script type="text/javascript" src="http://organthieves.bandcentral.com/javascripts/giglistings.js"></script>
<script type="text/javascript" src="http://organthieves.bandcentral.com/gigs/export.js"></script>
</div><!--end gigs-->
</div><!--end of rightSide-->
</div><!--end content-->
CSS
#content{
position: relative;
width: 900px;
}
#leftSide{
width: 330px;
position: relative;
}
#twitter{
position: relative;
width:330px;
}
#rightSide{
position: relative;
width: 570px;
background-color: #339;
height:400px;
display: inline;
}
#gigs{
float: right;
width: 500px;
position: relative;
}
#leftSide and #rightSide need float:left; Also, please make sure their parent element is wide enough for both of them.
check it your code here, float left and right can be used to arrange div horizontally.
http://jsfiddle.net/SfHrb/