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>
Related
I had a multi-page website in that there are four links on the navbar. Out of four links two links redirects to other new pages. There is a section of content related to those links that are there on my landing page. I would like to enable those also. Kindly help in this situation the code I have implemented till today
<link href='https://fonts.googleapis.com/css?family=Lato:100,400,700' rel='stylesheet' type='text/css'>
<nav class="navigation" id="mainNav">
<a class="navigation__link" href="#1">home</a>
<a class="navigation__link" href="#2">about</a>
<a class="navigation__link" href="test.html">test</a>
<a class="navigation__link" href="#test1.html">test1</a>
</nav>
<div class="page-section home" id="1">
<h1>Smooth scroll, fixed jump menu with active class</h1>
</div>
<div class="page-section about" id="2">
<h1>Section Two</h1>
</div>
<div class="page-section" id="3">
<h1>Section Three</h1>
</div>
<div class="page-section" id="4">
<h1>Section Four</h1>
</div>
<div class="page-section test" id="5">
<h1>Section Five</h1>
</div>
<div class="page-section test1" id="6">
<h1>Section Six and this section is test section</h1>
</div>
<div class="page-section" id="7">
<h1>Section Seven and this section is test1</h1>
</div>
* {
font-family: 'Lato', sans-serif;
font-weight: 300;
transition: all .1s ease;
}
html, body {
height: 100%;
}
h1 { font-size: 64px; }
.page-section {
height: 480px;
width: 50%;
margin-left: 35%;
margin-top: 5%;
padding: 3em;
background: linear-gradient(45deg, #43cea2 10%, #185a9d 90%);
color: white;
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.5);
}
.navigation {
position: fixed;
width: 30%;
margin-left: 2%;
background-color: #999;
color: #fff;
&__link {
display: block;
color: #ddd;
text-decoration: none;
padding: 1em;
font-weight: 400;
&:hover {
background-color: #aaa;
}
&.active {
color: white;
background-color: rgba(0,0,0,0.1);
}
}
}
$(document).ready(function() {
$('a[href*=#]').bind('click', function(e) {
e.preventDefault(); // prevent hard jump, the default behavior
var target = $(this).attr("href"); // Set the target as variable
// perform animated scrolling by getting top-position of target-element and set it as scroll target
$('html, body').stop().animate({
scrollTop: $(target).offset().top
}, 600, function() {
location.hash = target; //attach the hash (#jumptarget) to the pageurl
});
return false;
});
});
$(window).scroll(function() {
var scrollDistance = $(window).scrollTop();
// Show/hide menu on scroll
//if (scrollDistance >= 850) {
// $('nav').fadeIn("fast");
//} else {
// $('nav').fadeOut("fast");
//}
// Assign active class to nav links while scolling
$('.page-section').each(function(i) {
if ($(this).position().top <= scrollDistance) {
$('.navigation a.active').removeClass('active');
$('.navigation a').eq(i).addClass('active');
}
});
}).scroll()
For more custom assignments of when what should happen, there is a (very old, but still working) jQuery plugin. See:
Github: jquery.inview
Tutorial: Element 'in view' Event Plugin
Usage:
$('#mySection1').on('inview', function(event, isInView) {
if (isInView) {
$('#myNavOption1').addClass('active');
} else {
$('#myNavOption1').removeClass('active');
}
});
What you are looking for is a scrollspy:
Scrollspy · Bootstrap
or if that is not suitable for you just google "scrollspy" and find other frameworks that may fit you more.
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 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 have a side pane with a pan out for each item. Similiar to this one https://angular.io/docs/js/latest/api/.
When I click on an item, I would like it to make a smooth transition animation.
My markup:
<div ng-repeat="item in mainCategories"
class="main-list"
ng-class="{'not-selected': item !== currentMainCategory}"
>
<p>{{item.title}}</p>
</div>
<div class="sub-categories">
<div ng-repeat="subCategory in item.subCategories" class="sub-categories-content" ng-click="setSubCategory(subCategory)">
<p>{{subCategory.title}}</p>
</div>
</div>
</div>
When an item is not selected, it has class not selected added to it.
This is my css:
.main-list{
//I need to define a height here
transition: 200ms cubic-bezier(0.4, 0, 1, 1);
}
.not-selected{
height:50px;
}
So the height is 50px when no item is selected. When an item is selected, the height is depending on how many items is in the current subcategory.
The problem is, when I can't define the height, the animation is not working. Is there any height property I can give to the .main-list, so the animation is working?
Here's a simple example of how to use ng-style as suggested in my comments. Run the snippet below to see it in action and view the corresponding CSS.
<div ng-repeat="item in main">
<div class="maincat" ng-click="active($index)">
<p>{{item.title}}</p>
</div>
<div class="animate" ng-style="{height: item.active ? item.sub.length*30+'px' : '0px'}">
<div ng-repeat="subitem in item.sub" class="subcat">
<p>{{subitem.title}}</p>
</div>
</div>
</div>
var app = angular.module('demo.app', ['ngAnimate']);
app.controller('MainCtrl', ['$scope', function($scope){
$scope.main = [{title: 'main1', sub: [{title: 'sub1'}, {title: 'sub2'}, {title: 'sub3'}]},{title: 'main2', sub: [{title: 'sub1'}, {title: 'sub2'}]}];
$scope.active = function(idx) {
$scope.main[idx].active = !$scope.main[idx].active;
};
}]);
#import url("//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css");
.maincat {
height: 30px;
background-color: #ccc;
width: 50%;
padding: 3px 5px;
cursor: pointer;
border-bottom: 1px solid #555;
}
.subcat {
height: 30px;
background-color: #eee;
width: 50%;
padding: 3px 5px;
}
.animate {
-webkit-transition: height linear 0.5s;
transition: height linear 0.5s;
overflow: hidden;
}
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-animate.js"></script>
<div class="container" ng-app="demo.app" ng-controller="MainCtrl">
<h1 class="h3">Expandable Menu Demo</h1>
<div ng-repeat="item in main">
<div class="maincat" ng-click="active($index)">
<p>{{item.title}}</p>
</div>
<div class="animate" ng-style="{height: item.active ? item.sub.length*30+'px' : '0px'}">
<div ng-repeat="subitem in item.sub" class="subcat">
<p>{{subitem.title}}</p>
</div>
</div>
</div>
</div>
CSS transitions require a property that the effect is going to be applied to declared. In order to specify, that the transition refers to height property you should change your code to:
transition: height 200ms cubic-bezier(0.4, 0, 1, 1);
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/