I have a bubble chart that looks like this currently in Chart.js:
I simply want to add labels to the chart, like this:
How can this be done?
Current code: http://jsfiddle.net/Lvc0u55v/7323/
To achieve expected result, use below option
HTML:
<section class="content" ng-app="myApp" ng-controller="ChartCtrl">
<canvas chart-data="data" chart-labels="labels" chart-options="options" chart-series="series" class="chart-bubble" id="base"></canvas>
</section>
<span id="q1">Quadrant1</span>
<span id="q2">Quadrant2</span>
<span id="q3">Quadrant3</span>
<span id="q4">Quadrant4</span>
CSS:
#q1{
position:absolute;
margin-top:-30%;
margin-left:80%;
}
#q2 {
position: absolute;
margin-top: -30%;
margin-left: 20%;
}
#q3 {
position: absolute;
margin-bottom: -30%;
margin-left: 20%;
}
#q4 {
position: absolute;
margin-bottom: -30%;
margin-left: 80%;
}
Codepen- http://codepen.io/nagasai/pen/LkmZkL
Related
screen shot of navigation menu:
I created two grids as shown below, the first to layout the page and second to layout the menu items. I want the header to remain in place at the top. The links no longer work.
.wrapper {
height: 100vh;
display: grid;
grid-template-rows: auto 1fr;
background-color: #F2E1D4;
}
main {
overflow: auto;
}
.nav-container {
display: grid;
grid-template-columns: 1fr 120px 80px 180px 150px 140px 160px 40px 40px 5px 1fr;
grid-gap: 10px;
.nav-text {
text-transform: uppercase;
font-size: 1rem;
letter-spacing: .08rem;
color: #4f271b;
font-weight: 700;
margin-top: 10vh;
}
.nav-image {
width: 150px;
height: auto;
}
-------------------
<div class="wrapper">
<nav class="nav-container">
<div id="margin"></div>
<div class="nav-text">OUR STORY</div>
<div class="nav-text" >FARM</div>
<div class="nav-text">FARMERS MARKET</div>
<div class ="nav-image"> <img src = "resources/images/MSW_Logo/MSW_LOGO_B_RGB.png" width=150px height=auto alt="Morningstar logo" > </div>
<div class="nav-text">WOOL/TEXTILE</div>
<div class="nav-text">CONNECT</div>
<div class="nav-text"> <img src = "resources/images/MSW_SOCIAL_Logos/Intsa_BROWN.png" width=20px, height=auto> </div>
<div class="nav-text"> <img src = "resources/images/MSW_SOCIAL_Logos/Pinterest_p_BROWN.png" width=25px, height=auto> </div>
<div class="nav-text"> <img src = "resources/images/MSW_SOCIAL_Logos/newsletter_icon_BROWN.png" width=25px, height=auto> </div>
</nav>
<main>
I think your links do not work because you put their text outside of the <a></a> tags. You have to put it between the tags like this:
FARM
Here is your code with the links working as expected:
.wrapper {
height: 100vh;
display: grid;
grid-template-rows: auto 1fr;
background-color: #F2E1D4;
}
main {
overflow: auto;
}
.nav-container {
display: grid;
grid-template-columns: 1fr 120px 80px 180px 150px 140px 160px 40px 40px 5px 1fr;
grid-gap: 10px;
}
.nav-text {
text-transform: uppercase;
font-size: 1rem;
letter-spacing: .08rem;
color: #4f271b;
font-weight: 700;
margin-top: 10vh;
}
.nav-image {
width: 150px;
height: auto;
}
<div class="wrapper">
<nav class="nav-container">
<div id="margin"></div>
<div class="nav-text">OUR STORY</div>
<div class="nav-text">FARM</div>
<div class="nav-text">FARMERS MARKET</div>
<div class ="nav-image"><img src = "resources/images/MSW_Logo/MSW_LOGO_B_RGB.png" width=150px height=auto alt="Morningstar logo" > </div>
<div class="nav-text">WOOL/TEXTILE</div>
<div class="nav-text">CONNECT</div>
<div class="nav-text"><img src = "resources/images/MSW_SOCIAL_Logos/Intsa_BROWN.png" width=20px, height=auto> </div>
<div class="nav-text"><img src = "resources/images/MSW_SOCIAL_Logos/Pinterest_p_BROWN.png" width=25px, height=auto> </div>
<div class="nav-text"><img src = "resources/images/MSW_SOCIAL_Logos/newsletter_icon_BROWN.png" width=25px, height=auto> </div>
</nav>
</div>
Beginner here.
I'm trying to figure out how to put 5 elements on my nav bar.
First element is heading and the other for are li's.
Hopefully someone can help!
I want to get the following result:
each element fills up 20% of the width
But what I get is this.
Not equally distributed space
Below the snippet.
body {
width: 960px;
margin: auto;
background-color: slateblue;
}
#navigation {
background-color: white;
width: 960px;
}
#navigation h2 {
display: inline;
width: 20%;
background-color: #555;
margin: 0;
font-size: 18px;
color: #ffa0a0;
margin: 0;
}
#navigation ul {
list-style-type: none;
display: inline;
font-size: 0px;
margin: 0;
}
#navigation ul a {
display: inline-block;
width: 20%;
background-color: #555;
font-size: 18px;
color: #ffa0a0;
text-align: center;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Pagename</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="navigation">
<h2>Pagename</h2>
<ul>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Services</li>
</a>
<a href="#">
<li>Portfolio</li>
</a>
<a href="#">
<li>Contacts</li>
</a>
</ul>
</div>
</body>
</html>
You can achieve this easily by using flexbox feature.
I slightly edited your code to
replace ul by a div element (since you don't use li items)
replaced body width by 100% to make it working with the snippet display (this one is just for a good-looking display in the answer, you can replace it by your pixel value. Also div width style is by default set to 100% (it's a block displayed item), you don't need to set it for the div#navigation element.
Update. I added the Pagename heading to the equally distributed items to fit the design you want (according to the screenshot).
body {
width: 100%;
margin: auto;
background-color: slateblue;
}
#navigation {
background-color: white;
}
#navigation #nav-items {
list-style-type: none;
justify-content:space-between;
display: flex;
font-size: 0px;
margin: 0;
}
#navigation h2 {
background-color: #555;
margin: 0;
font-size: 18px;
color: #ffa0a0;
margin: 0;
}
#navigation #nav-items a {
background-color: #555;
font-size: 18px;
color: #ffa0a0;
text-align: center;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Pagename</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="navigation">
<div id="nav-items">
<h2>Pagename</h2>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Services</li>
</a>
<a href="#">
<li>Portfolio</li>
</a>
<a href="#">
<li>Contacts</li>
</a>
</div>
</div>
</body>
</html>
I have a list of draggable items, for a responsive design :
https://codepen.io/daedrias/pen/KyPZYG
header,
footer {
background-color: #5fba7d;
padding: 1rem;
}
.container {
display: flex;
min-height: 800px;
}
.menu {
width: 15em;
background-color: #FFF8DC;
}
.content {
background-color: #fff;
border-left: 1px solid #958C4D;
flex: 1;
padding: 5px 10px;
}
.sortable-list {
width: 18.75em;
}
.row {
display: flex;
margin-bottom: 15px;
box-sizing: border-box;
}
.row>* {
display: inline-block;
border-radius: 4px;
box-sizing: border-box;
}
.left {
height: 2em;
display: flex;
cursor: move;
}
.handle {
width: 1.5em;
height: 2em;
line-height: 2em;
text-align: center;
margin-right: 0.125em;
border-radius: 4px;
}
.icon {
width: 2em;
height: 2em;
border-radius: 4px;
background-color: #c97777;
margin: 0 0.125em;
}
.stretch {
flex: 1;
border: 1px solid black;
padding: 6px 12px;
margin: 0 0.1em;
}
.trash {
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
margin-left: 0.125em;
}
.bouton-ajout {
flex: 1;
border: 1px solid black;
border-radius: 4px;
padding: 6px 12px;
margin: 0 2.2em 0 1.75em;
}
/* mobile layout */
#media (max-width: 768px) {
.sortable-list {
width: 100%;
}
.menu {
display: none;
}
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>Header</header>
<div class="container">
<div class="menu">
</div>
<div class="content">
<p>asdasd</p>
<div class="sortable-list">
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
banana
</div>
<div class="trash">X</div>
</div>
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
pineapple
</div>
<div class="trash">X</div>
</div>
<div class="row">
<div class="left">
<div class="handle">=</div>
<div class="icon"></div>
</div>
<div class="stretch">
orange
</div>
<div class="trash">X</div>
</div>
<div class="bouton-ajout">
+ Add a row V
</div>
</div>
</div>
<div>
</body>
<html>
Everything is pretty much as I want it to be (as in : the positioning, not the colors of this example), but I'm not happy about the 'add' button.
I would like to know if there is a better way to handle the width of the 'Add' button,so it is the same size as the icon + label combined. For now I use margins.
Is the flex display a good solution in this case? Should I use something else like display : table?
SO I am working on a memory game and I got the cards to flip nicely, but I whenever I click to flip one, it flips them all. I would rather use a methos that is not giving each and every card an ID if possible...please help.
HTML
<section class="cardsContainer">
<div class="card" onclick="flip()">
<div class="front"><img src="../images/backsideBlue.png"></div>
<div class="back"><img src="../images/cookie.JPG"></div>
</div>
</section>
<section class="cardsContainer">
<div class="card" onclick="flip()">
<div class="front"><img src="../images/backsideBlue.png"></div>
<div class="back"><img src="../images/cookie.JPG"></div>
</div>
</section>
<section class="cardsContainer">
<div class="card" onclick="flip()">
<div class="front"><img src="../images/backsideBlue.png"></div>
<div class="back"><img src="../images/cookie.JPG"></div>
</div>
</section>
<section class="cardsContainer">
<div class="card" onclick="flip()">
<div class="front"><img src="../images/backsideBlue.png"></div>
<div class="back"><img src="../images/cookie.JPG"></div>
</div>
</section>
<section class="cardsContainer">
<div class="card" onclick="flip()">
<div class="front"><img src="../images/backsideBlue.png"></div>
<div class="back"><img src="../images/cookie.JPG"></div>
</div>
</section>
</div>
CSS
.cardsContainer {
width: 230px;
height: 320px;
position: relative;
border: 1px dashed red;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
margin: 20px 10px 10px 10px;
display: inline-block; } .card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%; } .card div {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden; } .card .front { } .card .back {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg ); } .card.flipped {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg ); }
JS
function flip() {
$('.card').toggleClass('flipped');
}
The function you show is not JavaScript, but JQuery. In JQuery, $('.card') means "all the elements with class 'card'". What you need to do is attach a single onclick() function to each of the card objects that only flips itself.
Try changing the HTML to onclick="flip(this)", and the change the flip function to only change the element passed to it:
function flip(e) { e.toggleClass('flipped'); }
I am making a website with some screenshots of an iPhone app I made and was wondering if there was some kind of slideshow thing for HTML. I want it to have the iPhone frame and the slideshow with the screenshots in the middle of it. I would prefer it to be written in something other than flash.
Thanks in advance!
I'm a fan of the Nivo Slider, personally. Requires jQuery.
This needs HTML, CSS and Javascript. This is not my own answer but is derived from https://www.w3schools.com/howto/howto_js_slideshow.asp.
For a slideshow that will change picture on button click
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
For an automatic slideshow
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>