Mobile compatabile website, not going.. Mobile width....? - javascript
I'm trying to get mobile comparability to work on my website and all my container <div>'s have a max-width: 1000px; and a width:100%; so my website should be able to reach 1000px, then have that <div> go 100%, but that's not happening. Well on a computer it is, but on mobile the website is showing up as 1000px wide so I'm terribly confused.
Here's a link, hopefully you guys have an idea.
I'll post all my code here, just because I think I have to..
HTML
<html>
<head>
<link href="css/reset.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="section1">
<div id="section1content">
<div id="logoimg">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="300" height="300" viewBox="0 0 1898.000000 1898.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Darryl Huffman's logo
</metadata>
<g id="ttt" transform="translate(0.000000,1898.000000) scale(0.100000,-0.100000)"
stroke="none">
<path d="M9120 18974 c-529 -29 -891 -69 -1315 -145 -2509 -455 -4719 -1889
-6156 -3994 -886 -1299 -1437 -2805 -1598 -4375 -39 -372 -45 -519 -45 -970 0
-451 6 -598 45 -970 135 -1319 547 -2601 1204 -3745 718 -1252 1699 -2313
2890 -3126 967 -660 2065 -1141 3203 -1403 494 -114 929 -180 1462 -223 303
-24 1057 -24 1360 0 533 43 968 109 1462 223 2169 500 4108 1762 5445 3545
1040 1387 1675 3010 1852 4729 39 372 45 519 45 970 0 451 -6 598 -45 970
-161 1570 -712 3076 -1598 4375 -813 1190 -1875 2173 -3125 2890 -1228 704
-2583 1118 -4026 1231 -182 14 -907 26 -1060 18z m1180 -307 c365 -39 851
-113 1105 -168 349 -76 832 -204 925 -246 25 -11 90 -35 145 -53 198 -65 572
-210 800 -311 209 -92 901 -455 975 -511 14 -11 129 -85 255 -166 297 -191
329 -213 601 -424 280 -216 293 -227 496 -408 203 -181 417 -389 607 -591 154
-164 458 -515 501 -577 14 -21 89 -121 167 -223 133 -174 396 -561 458 -674
16 -27 47 -79 70 -115 122 -190 409 -745 527 -1019 70 -164 208 -525 253 -661
21 -63 50 -146 66 -185 35 -86 139 -451 180 -629 16 -72 43 -191 60 -263 36
-160 90 -473 123 -718 66 -476 76 -646 76 -1235 0 -589 -10 -759 -76 -1235
-33 -245 -87 -558 -123 -718 -17 -72 -44 -191 -60 -263 -41 -178 -145 -543
-180 -629 -16 -38 -45 -122 -66 -185 -45 -136 -183 -497 -253 -661 -118 -274
-405 -829 -527 -1019 -23 -36 -54 -87 -70 -115 -62 -113 -325 -500 -458 -674
-78 -102 -153 -202 -167 -223 -43 -62 -347 -413 -501 -577 -190 -202 -404
-410 -607 -591 -203 -181 -216 -192 -496 -408 -272 -211 -304 -233 -601 -424
-126 -81 -241 -155 -255 -166 -74 -56 -766 -419 -975 -511 -228 -101 -602
-246 -800 -311 -55 -18 -120 -42 -145 -53 -93 -42 -576 -170 -925 -246 -262
-57 -754 -131 -1115 -168 -258 -27 -1342 -27 -1600 0 -361 37 -853 111 -1115
168 -349 76 -832 204 -925 246 -25 11 -90 35 -145 53 -198 65 -572 210 -800
311 -209 92 -901 455 -975 511 -14 11 -128 85 -255 166 -297 191 -329 213
-601 424 -280 216 -293 227 -496 408 -203 181 -417 389 -607 591 -154 164
-458 515 -501 577 -14 21 -89 121 -167 223 -133 174 -396 561 -458 674 -16 28
-47 79 -70 115 -122 190 -409 745 -527 1019 -70 164 -208 525 -253 661 -21 63
-50 147 -66 185 -35 86 -139 451 -180 629 -16 72 -43 191 -60 263 -73 326
-151 863 -184 1266 -21 262 -21 1112 0 1374 33 403 111 940 184 1266 17 72 44
191 60 263 41 178 145 543 180 629 16 39 45 122 66 185 45 136 183 497 253
661 118 274 405 829 527 1019 23 36 54 88 70 115 62 113 325 500 458 674 78
102 153 202 167 223 43 62 347 413 501 577 190 202 404 410 607 591 203 181
216 192 496 408 272 211 304 233 601 424 127 81 241 155 255 166 74 56 766
419 975 511 228 101 602 246 800 311 55 18 120 42 145 53 93 42 576 170 925
246 275 59 794 137 1110 165 94 9 188 17 210 20 22 2 312 2 645 1 481 -2 637
-5 760 -18z"/>
<path d="M9045 18469 c-2011 -103 -3912 -866 -5437 -2181 -890 -768 -1628
-1718 -2161 -2785 -620 -1239 -947 -2624 -947 -4013 0 -2161 782 -4256 2199
-5890 776 -895 1712 -1620 2778 -2153 1480 -741 3152 -1058 4803 -911 1886
167 3655 917 5092 2156 890 768 1628 1718 2161 2785 1008 2013 1220 4348 592
6513 -484 1667 -1447 3171 -2753 4298 -987 852 -2136 1475 -3382 1837 -945
274 -1973 394 -2945 344z m-2134 -4989 c767 -59 1441 -277 2034 -658 232 -149
400 -285 611 -496 401 -401 680 -842 878 -1389 80 -221 161 -540 191 -749 l6
-48 1530 0 1529 0 0 1675 0 1675 935 0 935 0 0 -4005 0 -4005 -935 0 -935 0 0
1695 0 1695 -1527 -2 -1526 -3 -23 -140 c-110 -660 -389 -1285 -808 -1809
-114 -143 -398 -425 -549 -545 -590 -467 -1313 -760 -2117 -855 -273 -33 -452
-36 -2092 -36 l-1648 0 0 4005 0 4005 1688 0 c1068 0 1737 -4 1823 -10z m3729
-1367 c0 -757 -2 -1374 -4 -1372 -2 2 -18 54 -35 114 -71 241 -214 573 -350
810 -86 148 -221 346 -327 480 -121 151 -402 431 -557 554 -147 116 -379 273
-515 346 l-92 50 0 198 0 197 940 0 940 0 0 -1377z m0 -5253 l0 -1380 -940 0
-940 0 0 199 c0 190 1 200 20 206 33 11 299 174 404 248 330 234 638 543 882
883 138 194 299 486 398 724 53 126 166 454 166 483 0 9 2 17 5 17 3 0 5 -621
5 -1380z"/>
<path d="M5280 9485 l0 -2576 753 4 c800 4 822 5 1062 57 405 88 800 313 1056
603 326 369 514 821 596 1434 22 167 21 770 -3 963 -87 731 -385 1314 -849
1666 -266 202 -551 323 -920 391 l-140 26 -777 4 -778 4 0 -2576z"/>
</g>
</svg>
</div>
</div>
</div>
<div id="topspace"></div>
<div id="polygons">
<div id="poly1" class="poly"></div>
<div id="poly2" class="poly"></div>
<div id="poly3" class="poly"></div>
<div id="poly4" class="poly"></div>
<div id="poly5" class="poly"></div>
<div id="poly6" class="poly"></div>
<div id="poly7" class="poly"></div>
<div id="poly8" class="poly"></div>
<div id="poly9" class="poly"></div>
<div id="poly10" class="poly"></div>
<div id="poly11" class="poly"></div>
<div id="poly12" class="poly"></div>
<div id="poly13" class="poly"></div>
<div id="poly14" class="poly"></div>
<div id="poly15" class="poly"></div>
<div id="poly16" class="poly"></div>
<div id="poly17" class="poly"></div>
<div id="poly18" class="poly"></div>
<div id="poly19" class="poly"></div>
<div id="poly20" class="poly"></div>
<div id="poly21" class="poly"></div>
<div id="poly22" class="poly"></div>
<div id="poly23" class="poly"></div>
<div id="poly24" class="poly"></div>
<div id="poly25" class="poly"></div>
<div id="poly26" class="poly"></div>
<div id="poly27" class="poly"></div>
<div id="poly28" class="poly"></div>
<div id="poly29" class="poly"></div>
<div id="poly30" class="poly"></div>
</div>
<div class="section" id="section2">
<div class="wrapper">
<h1>ABOUT ME</h1>
<h2>Just a little bit</h2>
<br>
<p>I'm Darryl Huffman!
I am a self taught web designer and developer who's 16.<br>
<br>
What am I doing?   Well, if you don't see me glued to my laptop, I'm probably slaying an ender dragon.   Or quite possibly, I have gone and discovered a way to travel through time and I am probably being chased by a T-Rex.
<br>
<br>
However, when I'm not playing around with my time machine, I spend my time designing and developing with the hope to simplify and brighten our everyday lives.</p>
<div class="wrapper2">
<p>
I like to make websites more than just websites. <br>
I like to make websites, <span id="quoteart">Art</span>.
</p>
</div>
</div>
</div>
<div class="section">
<div class="wrapper">
<h1>WORKS</h1>
<h2>As in things I've worked on</h2>
<br>
<div style="text-align: center;">
<img src="images/portfolio/gravitychimp.png" width="200" class="workimg" id="gravchimp">
<img src="images/portfolio/hmf.png" width="200" class="workimg" id="hmf">
<img src="images/portfolio/sotare.png" width="200" class="workimg" id="sotare">
<img src="images/portfolio/trisearching.png" width="200" class="workimg" id="trisearch">
</div>
<h3 id="work_label"></h3><img id="close_work" src="images/svg/x.svg" style="float:right; width:50px; cursor:pointer;">
<br>
<p id="work_text">
</p>
</div>
</div>
<div class="section" >
<div class="wrapper">
<div class="wrapper" style="border-bottom:none; padding-bottom:0px;">
<h1>CONTACT</h1>
<h2>As in things I've worked on</h2>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js" type="text/javascript"></script>
<script src="js/plax.js" type="text/javascript"></script>
</body>
</html>
CSS
::-moz-selection { /* Code for Firefox */
color: #fff;
background: #000;
}
#font-face {
font-family: 'allura';
src: url('fonts/Allura.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
body {
cursor: url(images/cursor/Normal%20Select.cur), auto;
transition: background .5s;
background-color: #fff;
}
p{
cursor: url(images/cursor/Text%20Select.cur), auto;
}
h1{
cursor: url(images/cursor/Text%20Select.cur), auto;
}
h2{
cursor: url(images/cursor/Text%20Select.cur), auto;
}
h3{
cursor: url(images/cursor/Text%20Select.cur), auto;
}
::-webkit-scrollbar{width: 5px;}
::-webkit-scrollbar-thumb {background-color:#000000;}
::-webkit-scrollbar-track {background-color:#FFFFFF;}
/* END CSS Code for Scrollbar END */
::selection {
color: #fff;
background: #000;
}
.poly {
background-image: url(images/svg/poly.svg);
background-size: contain;
background-repeat: no-repeat;
height:200px;
width:100px;
position: absolute;
}
#section1content {
position: absolute;
top:30%;
width:100%;
text-align: center;
transition: all 1s;
}
#section1 {
width:100%;
height:100%;
position: fixed;
z-index: 1;
transition: all 1s;
}
.section {
width:100%;
position: relative;
z-index: 2;
background-color: #fff;
font-family: 'Raleway', sans-serif;
}
#polygons {
height:100%;
width: 100%;
position: fixed;;
z-index: 0;
top:0px;
-webkit-animation: polyfade .5s; /* Chrome, Safari, Opera */
animation: polyfade .5s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes polyfade {
0% {opacity: 0;}
100% {opacity: 1;}
}
/* Standard syntax */
#keyframes polyfade {
0% {opacity: 0;}
100% {opacity: 1;}
}
body {
overflow-x: hidden;
}
#logoimg {
-webkit-animation: logoimg 1s; /* Chrome, Safari, Opera */
animation: logoimg 1s;
width:298px;
height:295px;
margin-left:auto;
margin-right: auto;
border-radius: 50%;
transition: all 1s;
background-color: #fff;
cursor: url(images/cursor/Link%20Select.cur), auto;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes logoimg {
0% {opacity: 0}
50% {opacity: 0}
100% {opacity: 1}
}
/* Standard syntax */
#keyframes logoimg {
0% {top: 0px;}
100% {top: 100px;}
}
#ttt {
transition: all 1s;
}
#section2 {
}
.wrapper {
width:100%;
max-width: 1000px;
padding-top: 50px;
padding-bottom: 50px;
margin-left: auto;
margin-right: auto;
border-bottom: #E0E0E0 solid 1px;
}
h1 {
font-size: 35px;
font-weight: 700;
}
h3 {
font-size: 30px;
font-weight: 700;
}
h2 {
margin-left: 5px;
color:#acacac;
}
p {
margin-left: 8px;
color: #727272;
font-family: 'Lato', sans-serif;
}
a {
transition: all .5s;
color: #727272;
border-bottom: #d8d8d8 2px solid;
text-decoration: none;
cursor: url(images/cursor/Link%20Select.cur), auto;
}
a:hover{
color: #009cff;
}
#topspace {
height:100%;
width: 100%;
}
#logoimg:hover{
background-color: #000;
}
svg:hover #ttt { fill: #fff; }
#quoteart {
font-family: allura;
font-size: 50px;
}
.quote_from {
float:right;
}
.wrapper2 {
width:100%;
max-width: 1000px;
padding-top: 50px;
font-family: lato;
font-weight: 300;
margin-left: auto;
margin-right: auto;
font-size: 20px;
text-align: center;
}
#-webkit-keyframes kaboom {
from {margin-left: 0px;}
to {margin-left: 50px;}
}
/* Standard syntax */
#keyframes kaboom {
from {background-color: #fa2424;}
to {background-color: #fa2424;}
}
.workimg {
cursor: url(images/cursor/Link%20Select.cur), auto;
width:200px;
height:auto;
-webkit-filter: grayscale(1);
filter: grayscale(1);
transition: all .5s;
}
.workimg:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
#close_work {
display:none;
}
.formfield {
margin-bottom: 30px;
}
.formfield .col {
float: left;
width: 48.5%;
}
.formfield .col.second {
float: right;
}
.formfield .input-holder {
margin: 0px 0px;
}
input.text, #form-contact textarea {
height: 58px;
color: #7f8c8d;
font-family: Raleway;
font-size: 24px;
border: 1px solid #a5aeaf;
padding: 2px 20px 0px;
margin-left: -21px;
outline: none;
width: 100%;
}
#section4 {
max-width:1392px;
}
#form-contact .formfield {
margin-bottom: 30px;
}
textarea {
color: #7f8c8d;
font-family: 'Raleway';
padding: 20px;
height: 150px;
font-size: 14px;
line-height: 18px;
resize: none;
border: 1px solid #a5aeaf;
margin-left: -21px;
outline: none;
width: 100%;
margin-top:30px;
}
#send-message {
width: 225px;
height: 50px;
background-color: #fff;
color: #a5aeaf;
font-family: 'Raleway';
font-size: 18px;
cursor: url(images/cursor/Link%20Select.cur), auto !important;
float: left;
border: 1px solid #a5aeaf;
-webkit-transition: all 200ms linear;
-o-transition: all 200ms linear;
-moz-transition: all 200ms linear;
transition: all 200ms linear;
}
#send-message:hover {
color: #8f999a;
border: 1px solid #8f999a;
}
#result {
font-size: 14px;
float: right;
color: #99a3a4;
margin-top: 18px;
text-transform: uppercase;
}
JavaScript
$(function() {
// Get the form.
var form = $('#ajax-contact');
// Get the messages div.
var formMessages = $('#result');
// Set up an event listener for the contact form.
$(form).submit(function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#message').val('');
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
});
});
$(document).ready(function () {
makebg(1);
});
$("#sotare").click(function(){
$("#close_work").css({"display": "block"});
$("#work_label").text( "Sotare" );
$("#work_text").html( "I manipulated stylesheets to make the Sotare store match the wordpress theme my client had on his website.<br><br>What I did - Code." );
});
$("#hmf").click(function(){
$("#close_work").css({"display": "block"});
$("#work_label").text( "Hide my File" );
$("#work_text").html( "A batch file I created for windows, I wanted to share so I made it a site.<br><br>What I did - Design and Code." );
});
$("#gravchimp").click(function(){
$("#close_work").css({"display": "block"});
$("#work_label").text( "Gravity Chimp" );
$("#work_text").html( "An Android app I made, which is a part of the flappy idea. I made it a website and it is soon to be released on iOS.<br><br>What I did - Design and Code." );
});
$("#trisearch").click(function(){
$("#close_work").css({"display": "block"});
$("#work_label").text( "TriSearching" );
$("#work_text").html( "How about you, try searching with TriSearching! It's a design of a search engine, and the results are swiped over, using Bing.<br><br>What I did - Design and Code." );
});
$("#close_work").click(function(){
$("#close_work").css({"display": "none"});
$("#work_label").text( "" );
$("#work_text").html( "" );
});
var bgcolor = "white";
$("#ttt").click(function(){
if(bgcolor == "white"){
$("body").css({"background-color": "#009cff"});
bgcolor = "blue";
} else{ if(bgcolor == "blue"){
$("body").css({"background-color": "#fff"});
bgcolor = "white";
}
}
});
var currentpoly = 1;
$(window).scroll(function() {
$("#polygons").css({
'opacity' : 1-(($(this).scrollTop())/600)
});
});
function makebg(currentpoly){
if(currentpoly < 31){
var width = randomIntFromInterval(50,300);
var height = width * 2;
var rotation = randomIntFromInterval(1,360);
var top = randomIntFromInterval(1,70);
var left = randomIntFromInterval(10,90);
var opacity = randomIntFromInterval(1,20);
var range = randomIntFromInterval(10,60);
$("#poly" + currentpoly).css({
"width": width,
"height": height,
"-webkit-transform": "rotate(" + rotation + "deg)",
"transform": "rotate(" + rotation + "deg)",
"-ms-transform": "rotate(" + rotation + "deg)",
"top": top + "%",
"left": left + "%",
"opacity": "." + opacity
});
$(document).ready(function () {
var toggleStatus = 'small'
setSmall()
$.plax.enable()
$("#range-small").click(function(){
if(toggleStatus != 'small'){
toggleRange()
}
})
$("#range-big").click(function(){
if(toggleStatus != 'big'){
toggleRange()
}
})
function toggleRange() {
if(toggleStatus == 'small'){
setBig()
} else if (toggleStatus == 'big') {
setSmall()
} else {
console.log(toggleStatus)
}
$("#range-big").toggleClass('active')
$("#range-small").toggleClass('active')
return false
}
function setSmall(){
$("#poly" + currentpoly).plaxify({"xRange":range,"yRange":range});
toggleStatus = 'small'
}
})
currentpoly = currentpoly + 1;
makebg(currentpoly);
}
}
function randomIntFromInterval(min,max)
{
return Math.floor(Math.random()*(max-min+1)+min);
}
Please do note, I haven't made my code super clean yet because I'm in the middle of making it, so my JS and other code will be better in the future, lol. Thanks in advance!
If its working on your computer but not mobile make sure your setting the view port inside the head tags:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Im not 100% sure what you want to happen, but assuming you want the website to have a max width of 1000px and for it to shrink as you make it smaller you need to set the main content (in this case the first div section 1) to max-wdith 1000px.
It may also be that one of your nested div's has one wrong width percentage/ value set thats stopping it from shrinking.
Let me know if any of this helps.
Related
changing color of img except black pixels with javascript
So here is my problem:
I have black and white images (img tags), and i want to change the color of it except for the black pixels. I used a code that allowed me to do this, but when coloring the image, some of the black pixels are colored too, not only the white as you can see in these images (some of the black lines are colored):
This is my code (to test it please change the image url to a local image so the color changing works)
let hex
var mug=document.getElementById("eyes");
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var originalPixels = null;
var currentPixels = null;
let currentcolor
function color(elem) {
hex='rgb(0,0,0)'
if (elem.classList[0].toString()=='color') {
currentcolor=document.getElementById(elem.id).style.backgroundColor
hex=currentcolor.toString()
}
}
function color1(elem) {
document.getElementById(elem.id).style.fill=currentcolor
getPixels(mug)
hex=hex.substring(4, hex.length-1)
.replace(/ /g, '')
.split(',')
changeColor(hex[0],hex[1],hex[2])
}
function getPixels(img)
{
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
originalPixels = ctx.getImageData(0, 0, img.width, img.height);
currentPixels = ctx.getImageData(0, 0, img.width, img.height);
img.onload = null;
}
function hexToRGB(hex)
{
console.log(hex)
var long = parseInt(hex.replace(/^#/, ""), 16);
return {
R: (long >>> 16) & 0xff,
G: (long >>> 8) & 0xff,
B: long & 0xff
};
}
function changeColor(a,b,c)
{
if(!originalPixels) return; // Check if image has loaded
var newColor = {R: eval(a), G: eval(b), B: eval(c)};
for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
{
if(currentPixels.data[I + 3] > 0) // If it's not a transparent pixel
{
console.log(currentPixels.data[I + 3])
if ((currentPixels.data[I]!=0 && currentPixels.data[I+1]!=0 && currentPixels.data[I+2]!=0)) {
currentPixels.data[I] = newColor.R;
currentPixels.data[I + 1] = newColor.G;
currentPixels.data[I + 2] = newColor.B;
}
}
}
console.log(newColor)
ctx.putImageData(currentPixels, 0, 0);
mug.src = canvas.toDataURL("image/png");
}
#boite {
width: 70%;
height: 85%;
border: 5px solid black;
background-color: #e3e2d3;
position: absolute;
left: 0;
right: 0;
top: 5%;
justify-content: center;
display: flex;
align-items: center;
margin-left: 285px;
}
#corps{
width: 300px;
}
#next2{
position: absolute;
width: 25%;
height: 95%;
text-align: center;
justify-content: center;
align-items: center;
border-radius: 20px;
border: 3px solid white;
margin-left: 15px;
margin-top: 15px;
text-align: center;
background-color: #B393DE;
}
#colours {
color: #fff;
justify-content: center;
font: 100 24px/100px sans-serif;
height: 150px;
width: 100%;
text-align: center;
display: flex;
flex-wrap: wrap;
}
#colours div {
height: 50%;
width: 30%;
border: 2px solid rgb(255, 255, 255);
border-radius: 50%;
cursor:pointer;
}
.color{
background-color: #888888;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<title>Document</title>
</head>
<body>
<div id="next2" >
<div id="colours">
<div id="red" class="color" style="background-color: #FE2712;" onclick="color(this)"></div>
<div id="red-orange" class="color" style="background-color:#FD5206;" onclick="color(this)"></div>
<div id="orange" class="color" style="background-color: #FB9902;" onclick="color(this)"></div>
<div id="yellow-orange" class="color" style="background-color: #F9BC02;" onclick="color(this)"></div>
<div id="yellow" class="color" style="background-color: #FFFE34;" onclick="color(this)"></div>
<div id="yellow-green" class="color" style="background-color: #D1EA2C;" onclick="color(this)"></div>
<div id="green" class="color" style="background-color: #66B033;" onclick="color(this)"></div>
<div id="blue-green" class="color" style="background-color: #038FCB;" onclick="color(this)"></div>
<div id="blue" class="color" style="background-color: #0247FE;" onclick="color(this)"></div>
<div id="blue-violet" class="color" style="background-color: #3E01A4;" onclick="color(this)"></div>
<div id="violet" class="color" style="background-color: #8601B0;" onclick="color(this)"></div>
<div id="red-violet" class="color" style="background-color: #A9174B;" onclick="color(this)"></div>
<div id="black" class="color" style="background-color: #000000;" onclick="color(this)"></div>
<div id="white" class="color" style="background-color: #ffffff;" onclick="color(this)"></div>
</div>
</div>
<div id="boite">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1876.000000 2501.000000"
preserveAspectRatio="xMidYMid meet" id="corps" width="80%" height="80%">
<g transform="translate(0.000000,2501.000000) scale(0.100000,-0.100000)"
fill="white" stroke="none" id="issasvg" onclick="color1(this)" >
<path d="M8615 24873 c-386 -22 -661 -48 -938 -88 -960 -140 -1780 -418 -2486
-844 -317 -192 -473 -310 -721 -546 -164 -157 -264 -231 -362 -267 -44 -16
-62 -28 -69 -46 -13 -34 6 -80 36 -88 12 -3 99 17 198 45 97 28 179 51 183 51
5 0 -50 -39 -121 -86 -602 -401 -1138 -934 -1593 -1586 -602 -861 -1038 -1873
-1357 -3148 -106 -420 -113 -462 -145 -834 -70 -801 -109 -1055 -242 -1591
-139 -561 -163 -730 -163 -1145 0 -197 4 -325 13 -385 23 -153 62 -325 99
-435 39 -119 144 -344 175 -377 22 -24 62 -30 88 -13 8 5 49 112 91 237 l76
228 8 -50 c59 -407 298 -971 616 -1453 87 -132 132 -179 182 -193 95 -25 146
38 175 217 9 57 20 104 24 104 4 0 8 -5 8 -10 0 -6 25 -67 56 -137 146 -331
327 -595 579 -848 226 -227 390 -356 697 -547 l178 -110 -46 -57 c-935 -1156
-1523 -2549 -1683 -3986 -37 -329 -45 -485 -45 -865 0 -388 13 -603 55 -945
106 -867 372 -1742 769 -2534 67 -134 80 -151 119 -151 53 0 61 23 61 166 0
71 3 152 6 181 l7 52 76 -112 c339 -495 585 -798 841 -1035 538 -498 1161
-855 1925 -1105 779 -254 1708 -374 2624 -338 331 13 498 26 896 71 149 16
275 30 280 30 16 -1 -64 -41 -140 -71 -81 -31 -104 -59 -83 -103 6 -15 23 -30
37 -34 42 -12 555 -7 696 7 575 55 1056 184 1816 487 773 307 1301 585 1764
929 441 326 806 720 1058 1139 60 100 77 122 82 106 3 -11 8 -105 9 -208 2
-104 6 -195 11 -201 12 -20 53 -31 79 -21 41 15 261 480 408 865 693 1807 684
3785 -27 5580 -301 759 -688 1413 -1243 2096 l-23 28 101 76 c213 161 427 344
750 641 369 338 548 553 690 825 l57 111 17 -109 c9 -59 22 -125 28 -145 25
-85 119 -123 188 -76 95 64 374 521 518 848 116 261 219 591 238 761 4 33 10
57 14 52 4 -4 40 -106 80 -226 61 -186 76 -220 96 -229 53 -25 73 -5 155 157
316 626 333 1410 49 2340 -29 94 -70 229 -92 300 -37 122 -514 1993 -592 2320
-57 240 -100 447 -170 813 -108 559 -164 803 -256 1107 -223 739 -541 1319
-968 1766 -59 62 -102 110 -97 107 20 -11 461 -148 478 -148 25 0 57 36 57 66
0 15 -12 37 -32 56 -53 49 -204 159 -328 238 -150 95 -268 183 -465 344 -631
517 -1140 856 -1725 1150 -1004 506 -2012 758 -3295 826 -167 9 -976 11 -1110
3z"/>
</g>
</svg>
<img id="eyes" width="80px" height="40px" src="https://png.pngitem.com/pimgs/s/35-355887_eyes-eye-black-and-white-clip-art-cartoon.png" id="eye1-boite0" class="eye1-boite0 remove" style="position: absolute; width:150px; height:auto" onclick="color1(this)">
</div>
</body>
</html>
Thanks for your help!
Transition Glitch in firefox while tracking mouse position
It's kind of long but recently I was working on a smile face whose eyes track mouse position and I succeeded doing it because I use chrome browser!
but when I tested this in firefox, there was an issue -
so the mouse enters the smile yellow ball from a position let say a and the eyes have x-y position with respect to 'a' now when next time the mouse enters or exits the yellow smile ball the eyes glitches with the last position of interaction!
see in video
https://drive.google.com/file/d/1wx5Lz2Z6h6ZZpeH7AYboGTOP-rSHLS_9/view?usp=sharing
const eyeBalls = document.querySelectorAll("[data-eye-ball]")
const cursor = document.querySelector("#cursor")
function test(eyeball) {
const eyeballRect = eyeball.getBoundingClientRect()
window.addEventListener("mousemove", (e) => {
cursor.style.left = e.pageX + "px"
cursor.style.top = e.pageY + "px"
let mouseP = e.y - (eyeballRect.y + eyeballRect.height / 2)
let mouseB = e.x - (eyeballRect.x + eyeballRect.width / 2)
let mouseH = Math.hypot(mouseP, mouseB)
let eyeBallH = 3
let eyeBallSize = 1
if (e.target.closest(".eye")) {
eyeBallH = 0
eyeBallSize = 1.25
}
let eyeBallP = (mouseP / mouseH) * eyeBallH
let eyeBallB = (mouseB / mouseH) * eyeBallH
eyeball.style.transform = `translate(${eyeBallB}vmin, ${eyeBallP}vmin) scale(${eyeBallSize})`
})
}
test(eyeBalls[0])
test(eyeBalls[1])
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--dark-color: hsl(240, 5%, 10%);
--eye-ball-bg: hsl(240, 5%, 25%);
--accent: hsl(40, 90%, 50%);
--mid-color: hsl(240, 5%, 65%);
--mouth-bg: hsl(40, 80%, 40%);
--light-color: hsl(0, 0%, 97%);
--red: hsl(10, 80%, 40%);
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
body {
width: 100%;
height: 100vh;
background-color: var(--dark-color);
color: var(--light-color);
cursor: none;
}
.smile-box {
width: 100vmin;
height: 100vmin;
flex-grow: 0;
flex-shrink: 0;
}
.smile-circle {
width: 75vmin;
height: 75vmin;
background-color: var(--accent);
border-radius: 50%;
position: relative;
}
/* eyes */
.eye {
width: 16vmin;
height: 16vmin;
border-radius: 50%;
background-color: var(--light-color);
position: absolute;
top: 32%;
}
.left-eye {
left: 30%;
transform: translate(-50%, -50%);
}
.right-eye {
right: 30%;
transform: translate(50%, -50%);
}
.eye-ball {
width: 8vmin;
height: 8vmin;
background-color: var(--eye-ball-bg);
border-radius: 50%;
transition: transform 100ms ease;
}
/* mouth */
.mouth-wraper {
height: 20vmin;
width: 40vmin;
border-radius: 0vmin 0vmin 20vmin 20vmin;
background-color: var(--mouth-bg);
transition: border-radius 250ms ease, height 250ms ease, width 250ms ease;
position: absolute;
left: 50%;
bottom: 30%;
transform: translate(-50%, 50%);
}
.smile-circle:hover .mouth-wraper {
width: 35vmin;
height: 10vmin;
border-radius: 5rem;
}
/* cursor */
#cursor {
width: 3rem;
height: 3rem;
border-radius: 50%;
pointer-events: none;
position: fixed;
transform: translate(-50%, -50%);
left: 5%;
top: 5%;
display: flex;
align-items: center;
justify-content: center;
}
#cursor svg {
transition: fill 100ms ease;
}
.smile-circle:hover #cursor svg {
fill: hsl(240, 100%, 65%);
}
<body class="flex-center">
<div class="smile-box flex-center">
<div class="smile-circle">
<div class="eye left-eye flex-center">
<div class="eye-ball" data-eye-ball></div>
</div>
<div class="eye right-eye flex-center">
<div class="eye-ball" data-eye-ball></div>
</div>
<div class="mouth-wraper"></div>
<div id="cursor">
<svg
xmlns="http://www.w3.org/2000/svg"
height="48"
width="48"
fill="#ffffff"
>
<path
d="M17 25.5Q17.65 25.5 18.075 25.05Q18.5 24.6 18.5 24Q18.5 23.4 18.075 22.95Q17.65 22.5 17 22.5Q16.4 22.5 15.95 22.95Q15.5 23.4 15.5 24Q15.5 24.6 15.95 25.05Q16.4 25.5 17 25.5ZM27.5 19.5Q28.15 19.5 28.575 19.05Q29 18.6 29 18Q29 17.4 28.575 16.95Q28.15 16.5 27.5 16.5Q26.9 16.5 26.45 16.95Q26 17.4 26 18Q26 18.6 26.45 19.05Q26.9 19.5 27.5 19.5ZM20.5 19.5Q21.1 19.5 21.55 19.05Q22 18.6 22 18Q22 17.4 21.55 16.95Q21.1 16.5 20.5 16.5Q19.9 16.5 19.45 16.95Q19 17.4 19 18Q19 18.6 19.45 19.05Q19.9 19.5 20.5 19.5ZM20.5 31.5Q21.1 31.5 21.55 31.05Q22 30.6 22 30Q22 29.4 21.55 28.95Q21.1 28.5 20.5 28.5Q19.9 28.5 19.45 28.95Q19 29.4 19 30Q19 30.6 19.45 31.05Q19.9 31.5 20.5 31.5ZM22.5 44Q22.1 44 21.8 43.7Q21.5 43.4 21.5 43Q21.5 42.6 21.8 42.3Q22.1 42 22.5 42H23V37.45Q20.75 37.2 18.75 36.375Q16.75 35.55 15.15 34.2L11.95 37.4L12.35 37.8Q12.6 38.05 12.675 38.425Q12.75 38.8 12.35 39.2Q12.05 39.5 11.65 39.5Q11.25 39.5 10.95 39.2L8.8 37.1Q8.5 36.8 8.5 36.4Q8.5 36 8.8 35.65Q9.1 35.35 9.475 35.35Q9.85 35.35 10.25 35.7L10.55 36L13.75 32.8Q12.45 31.15 11.625 29.2Q10.8 27.25 10.55 25H6V25.5Q6 25.9 5.7 26.2Q5.4 26.5 5 26.5Q4.6 26.5 4.3 26.2Q4 25.9 4 25.5V22.5Q4 22.1 4.3 21.8Q4.6 21.5 5 21.5Q5.4 21.5 5.7 21.8Q6 22.1 6 22.5V23H10.55Q10.8 20.75 11.625 18.8Q12.45 16.85 13.75 15.2L10.55 12L10.2 12.35Q9.9 12.65 9.5 12.65Q9.1 12.65 8.8 12.35Q8.5 12.05 8.5 11.625Q8.5 11.2 8.8 10.9L10.9 8.8Q11.2 8.5 11.625 8.5Q12.05 8.5 12.35 8.8Q12.65 9.05 12.65 9.475Q12.65 9.9 12.35 10.15L11.95 10.55L15.15 13.75Q16.8 12.45 18.75 11.625Q20.7 10.8 22.95 10.55V6H22.5Q22.1 6 21.8 5.7Q21.5 5.4 21.5 5Q21.5 4.6 21.8 4.3Q22.1 4 22.5 4H25.5Q25.9 4 26.2 4.3Q26.5 4.6 26.5 5Q26.5 5.4 26.2 5.7Q25.9 6 25.5 6H25V10.55Q27.25 10.8 29.2 11.625Q31.15 12.45 32.8 13.75L36 10.55L35.7 10.25Q35.35 9.95 35.325 9.55Q35.3 9.15 35.65 8.8Q35.95 8.5 36.35 8.5Q36.75 8.5 37.05 8.8L39.25 11Q39.55 11.3 39.525 11.675Q39.5 12.05 39.2 12.35Q38.9 12.65 38.5 12.6Q38.1 12.55 37.75 12.25L37.45 11.95L34.25 15.15Q35.55 16.8 36.375 18.775Q37.2 20.75 37.45 23H42V22.5Q42 22.1 42.3 21.8Q42.6 21.5 43 21.5Q43.4 21.5 43.7 21.8Q44 22.1 44 22.5V25.5Q44 25.9 43.7 26.2Q43.4 26.5 43 26.5Q42.6 26.5 42.3 26.2Q42 25.9 42 25.5V25H37.45Q37.2 27.25 36.375 29.225Q35.55 31.2 34.25 32.85L37.45 36.05L37.8 35.7Q38.1 35.4 38.5 35.375Q38.9 35.35 39.2 35.65Q39.5 35.95 39.5 36.375Q39.5 36.8 39.2 37.1L37.1 39.2Q36.8 39.5 36.375 39.5Q35.95 39.5 35.65 39.2Q35.3 38.85 35.35 38.475Q35.4 38.1 35.6 37.85L36 37.45L32.8 34.25Q31.15 35.55 29.2 36.4Q27.25 37.25 25 37.5V42H25.5Q25.9 42 26.2 42.3Q26.5 42.6 26.5 43Q26.5 43.4 26.2 43.7Q25.9 44 25.5 44ZM24 34.5Q28.4 34.5 31.45 31.425Q34.5 28.35 34.5 24Q34.5 19.6 31.45 16.55Q28.4 13.5 24 13.5Q19.65 13.5 16.575 16.55Q13.5 19.6 13.5 24Q13.5 28.35 16.575 31.425Q19.65 34.5 24 34.5ZM24 25.5Q24.6 25.5 25.05 25.05Q25.5 24.6 25.5 24Q25.5 23.4 25.05 22.95Q24.6 22.5 24 22.5Q23.4 22.5 22.95 22.95Q22.5 23.4 22.5 24Q22.5 24.6 22.95 25.05Q23.4 25.5 24 25.5ZM31 25.5Q31.65 25.5 32.075 25.05Q32.5 24.6 32.5 24Q32.5 23.4 32.075 22.95Q31.65 22.5 31 22.5Q30.4 22.5 29.95 22.95Q29.5 23.4 29.5 24Q29.5 24.6 29.95 25.05Q30.4 25.5 31 25.5ZM27.5 31.5Q28.15 31.5 28.575 31.05Q29 30.6 29 30Q29 29.4 28.575 28.95Q28.15 28.5 27.5 28.5Q26.9 28.5 26.45 28.95Q26 29.4 26 30Q26 30.6 26.45 31.05Q26.9 31.5 27.5 31.5ZM24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Q24 24 24 24Z"
/>
</svg>
</div>
</div>
</div>
</body>
PLEASE HELB
Center navigation bar (Bootstrap) items horizontally
I have a navigation bar with 2 icons evenly distributed.
I am wanting to scale them horizontally so they are centered horizontally in relation to the navigation bar.
I think the viewbox of the svg's are cause it to not look visually centred.
I've tried playing with the size without much luck.
I did try justifying content which didn't work.
Then I tried adding padding to the icons to allow for them to move.
Code:
.bar {
display: flex;
justify-content: center;
}
/* Style the navigation menu */
.navbar {
width: 90%;
background: #3CE18F;
/* Forces the icons to not go outside the scrollbar. If we left it to invisble it would display
them outside. */
overflow: auto;
/* Curves the corners of the Nav Bar. */
border-radius: 10px 10px 30px 30px;
position: fixed;
bottom: 3%;
display: block;
margin:auto;
}
/* Navigation links */
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 48.6%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
text-align: center; /* If you want the text to be centered */
}
/* Add a background color on mouse-over */
.navbar a:hover {
background-color: #000;
}
/* Style the current/active link */
.navbar a.active {
background-color: #4CAF50;
}
.microphoneIcon {
/* position: absolute;
left: 65.36%;
right: 26.29%;
top: 54.22%;
bottom: 0.46%;*/
fill: #FFFFFF;
stroke: #FFFFFF;
-webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
/* Similar syntax to box-shadow */
/*background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);*/
}
.cameraIcon {
fill: #FFFFFF;
stroke: #FFFFFF;
-webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#009578">
<title>PWA</title>
<link rel="stylesheet" href="src/navigationBar.css">
<!-- Javascript Docs -->
<script type="text/javascript" src="src/index.js"></script>
<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" href="images/logo192.png">
</head>
<body>
<!-- Class for the Bottom Navigation Bar -->
<div class="bar">
<nav class="navbar fixed-bottom navbar-light bg-light nav-fill">
<a href="#">
<svg class='microphoneIcon' id='microphoneIcon' width="42" height="46" viewBox="0 0 42 46" stroke="grey">
<path d='M21 23.7571C25.0314 23.7571 28.2857 21.1043 28.2857 17.8179V5.93928C28.2857 2.65288 25.0314 0 21 0C16.9686 0 13.7143 2.65288 13.7143 5.93928V17.8179C13.7143 21.1043 16.9686 23.7571 21 23.7571ZM18.5714 5.93929C18.5714 4.85043 19.6643 3.95953 21 3.95953C22.3357 3.95953 23.4286 4.85043 23.4286 5.93929V17.8179C23.4286 18.9067 22.3357 19.7976 21 19.7976C19.6643 19.7976 18.5714 18.9067 18.5714 17.8179V5.93929ZM21 27.7167C27.7029 27.7167 33.1429 23.282 33.1429 17.8179H38C38 24.8064 31.6614 30.5477 23.4286 31.5178V37.6155H18.5714V31.5178C10.3386 30.5477 4 24.8064 4 17.8179H8.85714C8.85714 23.282 14.2971 27.7167 21 27.7167Z'/>
</svg>
</a>
<a href="#">
<svg class ='cameraIcon' id='cameraIcon' xmlns="http://www.w3.org/2000/svg" width="50" height="46" viewBox="0 0 50 46">
<path d="M 45 36 a 3 3 90 0 1 -3 3 H 6 a 3 3 90 0 1 -3 -3 V 18 a 3 3 90 0 1 3 -3 h 3.516 a 9 9 90 0 0 6.36 -2.637 l 2.49 -2.484 A 3 3 90 0 1 20.481 9 h 7.032 a 3 3 90 0 1 2.121 0.879 l 2.484 2.484 A 9 9 90 0 0 38.484 15 H 42 a 3 3 90 0 1 3 3 v 18 z M 6 12 a 6 6 90 0 0 -6 6 v 18 a 6 6 90 0 0 6 6 h 36 a 6 6 90 0 0 6 -6 V 18 a 6 6 90 0 0 -6 -6 h -3.516 a 6 6 90 0 1 -4.242 -1.758 l -2.484 -2.484 A 6 6 90 0 0 27.516 6 H 20.484 a 6 6 90 0 0 -4.242 1.758 l -2.484 2.484 A 6 6 90 0 1 9.516 12 H 6 z M 24 33 a 7.5 7.5 90 1 1 0 -15 a 7.5 7.5 90 0 1 0 15 z m 0 3 a 10.5 10.5 90 1 0 0 -21 a 10.5 10.5 90 0 0 0 21 z M 9 19.5 a 1.5 1.5 90 1 1 -3 0 a 1.5 1.5 90 0 1 3 0 z"/>
</svg>
</a>
</nav>
</div>
</body>
</html>
Here is a simple way to scale them horizontally. The display of the navbar must be inline-flex. I have added it.
As you have requested to scale them vertically. I have changed the CSS of a tag width.
Please take a look at the CSS. #Nitrogen
.bar {
display: flex;
justify-content: center;
}
/* Style the navigation menu */
.navbar {
width: 90%;
background: #3CE18F;
/* Forces the icons to not go outside the scrollbar. If we left it to invisble it would display
them outside. */
overflow: auto;
/* Curves the corners of the Nav Bar. */
border-radius: 10px 10px 30px 30px;
position: fixed;
bottom: 3%;
display: block;
margin:auto;
}
/* Navigation links */
.navbar a {
width: 100% !important;
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 48.6%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
text-align: center; /* If you want the text to be centered */
}
/* Add a background color on mouse-over */
.navbar a:hover {
background-color: #000;
}
/* Style the current/active link */
.navbar a.active {
background-color: #4CAF50;
}
.microphoneIcon {
/* position: absolute;
left: 65.36%;
right: 26.29%;
top: 54.22%;
bottom: 0.46%;*/
fill: #FFFFFF;
stroke: #FFFFFF;
-webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
/* Similar syntax to box-shadow */
/*background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);*/
}
.cameraIcon {
fill: #FFFFFF;
stroke: #FFFFFF;
-webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#009578">
<title>PWA</title>
<link rel="stylesheet" href="src/navigationBar.css">
<!-- Javascript Docs -->
<script type="text/javascript" src="src/index.js"></script>
<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" href="images/logo192.png">
</head>
<body>
<!-- Class for the Bottom Navigation Bar -->
<div class="bar">
<nav class="navbar fixed-bottom navbar-light bg-light nav-fill">
<a href="#">
<svg class='microphoneIcon' id='microphoneIcon' width="42" height="46" viewBox="0 0 42 46" stroke="grey">
<path d='M21 23.7571C25.0314 23.7571 28.2857 21.1043 28.2857 17.8179V5.93928C28.2857 2.65288 25.0314 0 21 0C16.9686 0 13.7143 2.65288 13.7143 5.93928V17.8179C13.7143 21.1043 16.9686 23.7571 21 23.7571ZM18.5714 5.93929C18.5714 4.85043 19.6643 3.95953 21 3.95953C22.3357 3.95953 23.4286 4.85043 23.4286 5.93929V17.8179C23.4286 18.9067 22.3357 19.7976 21 19.7976C19.6643 19.7976 18.5714 18.9067 18.5714 17.8179V5.93929ZM21 27.7167C27.7029 27.7167 33.1429 23.282 33.1429 17.8179H38C38 24.8064 31.6614 30.5477 23.4286 31.5178V37.6155H18.5714V31.5178C10.3386 30.5477 4 24.8064 4 17.8179H8.85714C8.85714 23.282 14.2971 27.7167 21 27.7167Z'/>
</svg>
</a>
<a href="#">
<svg class ='cameraIcon' id='cameraIcon' xmlns="http://www.w3.org/2000/svg" width="50" height="46" viewBox="0 0 50 46">
<path d="M 45 36 a 3 3 90 0 1 -3 3 H 6 a 3 3 90 0 1 -3 -3 V 18 a 3 3 90 0 1 3 -3 h 3.516 a 9 9 90 0 0 6.36 -2.637 l 2.49 -2.484 A 3 3 90 0 1 20.481 9 h 7.032 a 3 3 90 0 1 2.121 0.879 l 2.484 2.484 A 9 9 90 0 0 38.484 15 H 42 a 3 3 90 0 1 3 3 v 18 z M 6 12 a 6 6 90 0 0 -6 6 v 18 a 6 6 90 0 0 6 6 h 36 a 6 6 90 0 0 6 -6 V 18 a 6 6 90 0 0 -6 -6 h -3.516 a 6 6 90 0 1 -4.242 -1.758 l -2.484 -2.484 A 6 6 90 0 0 27.516 6 H 20.484 a 6 6 90 0 0 -4.242 1.758 l -2.484 2.484 A 6 6 90 0 1 9.516 12 H 6 z M 24 33 a 7.5 7.5 90 1 1 0 -15 a 7.5 7.5 90 0 1 0 15 z m 0 3 a 10.5 10.5 90 1 0 0 -21 a 10.5 10.5 90 0 0 0 21 z M 9 19.5 a 1.5 1.5 90 1 1 -3 0 a 1.5 1.5 90 0 1 3 0 z"/>
</svg>
</a>
</nav>
</div>
</body>
</html>
put display:flex in to navbar div
.navbar {
display:flex;
}
button in separate lines
.navbar {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Not cloning as expected
I have a JavaScript code that clones the last li node, if a user clicks on the button Add Choice or if an input clicked is the last input. The cross button on the right removes the li node it is located in. It won't remove if there's only one input element left.
Everything works fine except:
If you start removing the lis from bottom to top until there's only one input element and click on the input element, it will clone and add a new li. Now if you click on the second(cloned) input element, it doesn't clone. I get the following error in the console.
TypeError: el.parentNode.nextSibling.nextSibling.classList is undefined
Also, how would I go about attaching a focus event listener to the input element and trigger the cloning process without conflicting with the click event. I tried doing this the cloning is being done twice. If the user navigates through the inputs using the Tab key, and if the last input is focused. I'd like to trigger the cloning process.
var wheelBuilder = {
getNodes: function(c) {
return document.querySelectorAll(c);
},
getLast: function(e) {
return [].slice.call(e).pop();
},
insertAfter: function(n, r) {
r.parentNode.insertBefore(n, r.nextSibling);
},
clone: function() {
var inputs = wheelBuilder.getNodes('.choiceInput'),
lastInput = wheelBuilder.getLast(inputs),
cl = lastInput.parentNode.cloneNode(true);
wheelBuilder.insertAfter(cl, lastInput.parentNode);
var cross = wheelBuilder.getNodes('.cross'),
choiceInput = wheelBuilder.getNodes('.choiceInput'),
lastCross = wheelBuilder.getLast(cross),
lastChoiceInput = wheelBuilder.getLast(choiceInput);
lastCross.addEventListener('click', wheelBuilder.removeChoice);
lastChoiceInput.addEventListener('click', wheelBuilder.addIfLastInput);
},
addIfLastInput: function(e) {
var el = e.target,
inputs = wheelBuilder.getNodes('.choiceInput');
isLast = (inputs.length > 1) ? el.parentNode.nextSibling.nextSibling.classList.contains('input') : false;
if (!isLast) {
wheelBuilder.clone();
el.focus();
}
},
removeChoice: function(e) {
var choice = e.target.parentNode.parentNode.parentNode.parentNode,
node = choice.parentNode;
if (wheelBuilder.getNodes('.choiceInput').length > 1) {
node.removeChild(choice);
}
}
}
wheelBuilder.getNodes('.cross').forEach(function(el, _) {
el.addEventListener('click', wheelBuilder.removeChoice);
});
wheelBuilder.getNodes('.choiceInput').forEach(function(el, _) {
el.addEventListener('click', wheelBuilder.addIfLastInput);
});
var addChoice = document.getElementById('addChoice');
addChoice.addEventListener('click', wheelBuilder.clone);
.wheelBuilder {
position: absolute;
width: 100%;
font-size: 1.3em;
font-family: Sans;
}
.wheelBuilder .wrapper {
max-width: 60%;
margin: 0 auto;
margin-bottom: 50px;
padding: 0 10px 10px 10px;
}
.title #gears svg {
transform: translate(5px, 5px);
fill: #565656;
}
.wheelBuilder .title {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5em;
font-weight: 500;
padding: 15px 20px;
margin: 0 0 20px 0px;
line-height: 40px;
outline: 0;
width: 100%;
background: #ffffff;
color: #565656;
box-shadow: 0px 0px 4px 4px #dfdfdf;
}
.wrapper ol {
position: relative;
padding: 0;
margin: 0.25em 0.125em;
width: 100%;
background: #ffffff;
padding: 20px;
box-shadow: 0px 0px 4px 4px #dfdfdf;
}
.choices {
position: relative;
list-style-type: none;
width: 100%;
}
.choices:first-child {
text-align: left;
color: #565656;
}
.choices:not(:last-child) {
margin-bottom: 10px;
}
.add {
text-align: left;
}
#plus svg {
z-index: 3;
transform: translate(20px, 7px);
fill: #565656;
cursor: pointer;
}
#addChoice, #applyChanges {
position: relative;
height: 40px;
padding: 0 .8em;
background: #ffffff;
border: 0;
font-size: 1.2em;
color: #565656;
cursor: pointer;
margin-top: 10px;
box-sizing: border-box;
border: 1px solid #ffffff;
box-shadow: 0px 0px 5px 3px #dfdfdf;
transition: 0.2s all ease-in;
}
#addChoice {
margin-left: -32px;
padding: 0 .8em 0 2.2em;
}
#applyChanges {
width: 100%;
}
#plus:hover + #addChoice, #addChoice:hover, #applyChanges:hover {
border: 1px solid #a8ab0a;
box-shadow: 0px 0px 5px 4px #d1d1d1;
}
.choiceInput {
width: 100%;
height: 40px;
background: #ffffff;
padding: 0 .4em;
color: #565656;
font-size: 1.2em;
border: 1px solid #cfcfcf;
transition: border .2s ease-in, box-shadow .2s ease-in;
}
.choiceInput:hover {
border: 1px solid #c6c85f;
box-shadow: inset 0 0 5px 1px #cfcfcf;
}
.choiceInput:focus {
border: 1px solid #a8ab0a;
box-shadow: inset 0 0 5px 1px #cfcfcf;
}
.cross {
position: absolute;
height: 40px;
right: 0;
top: 0;
}
.cross svg {
transform: translate(50%, 0);
}
.cross path {
cursor: pointer;
}
svg g .outline {
stroke:#c2c2c2;
fill:#ffffff;
}
svg g .x {
fill:none;
stroke:#c4c4c4;
stroke-width:2;
stroke-linecap:round;
}
.cross g:hover path {
stroke: #e75141;
}
#media only screen and (max-width: 480px) {
.toast p, .toast span, .spinBtn {
font-size: 18px;
line-height: 18px;
}
.wheelBuilder {
top: 120vmin;
}
.wheelBuilder .wrapper {
max-width: 90%;
}
.wrapper ol li {
padding: 0;
}
}
<div class="wheelBuilder">
<div class="wrapper">
<h2 class="title">
<span id="gears">
<svg xmlns="http://www.w3.org/2000/svg" width="30" viewBox="0 0 24 24">
<path d="M 16.064453 2 C 15.935453 2 15.8275 2.0966094 15.8125 2.2246094 L 15.695312 3.2363281 C 15.211311 3.4043017 14.773896 3.6598036 14.394531 3.9882812 L 13.457031 3.5839844 C 13.339031 3.5329844 13.202672 3.5774531 13.138672 3.6894531 L 12.201172 5.3105469 C 12.136172 5.4215469 12.166531 5.563625 12.269531 5.640625 L 13.078125 6.2402344 C 13.030702 6.4865104 13 6.7398913 13 7 C 13 7.2601087 13.030702 7.5134896 13.078125 7.7597656 L 12.269531 8.359375 C 12.166531 8.435375 12.137172 8.5774531 12.201172 8.6894531 L 13.138672 10.310547 C 13.202672 10.422547 13.339031 10.468969 13.457031 10.417969 L 14.394531 10.011719 C 14.773896 10.340196 15.211311 10.595698 15.695312 10.763672 L 15.8125 11.775391 C 15.8275 11.903391 15.935453 12 16.064453 12 L 17.935547 12 C 18.064547 12 18.1725 11.903391 18.1875 11.775391 L 18.304688 10.763672 C 18.789173 10.59553 19.227802 10.340666 19.607422 10.011719 L 20.542969 10.414062 C 20.660969 10.465063 20.797328 10.420594 20.861328 10.308594 L 21.798828 8.6875 C 21.863828 8.5765 21.833469 8.4344219 21.730469 8.3574219 L 20.923828 7.7578125 C 20.970992 7.5121818 21 7.2593796 21 7 C 21 6.7398913 20.969298 6.4865104 20.921875 6.2402344 L 21.730469 5.640625 C 21.833469 5.564625 21.862828 5.4225469 21.798828 5.3105469 L 20.861328 3.6894531 C 20.797328 3.5774531 20.660969 3.5310312 20.542969 3.5820312 L 19.605469 3.9882812 C 19.226104 3.6598036 18.788689 3.4043017 18.304688 3.2363281 L 18.1875 2.2246094 C 18.1725 2.0966094 18.064547 2 17.935547 2 L 16.064453 2 z M 17 5.25 C 17.966 5.25 18.75 6.034 18.75 7 C 18.75 7.967 17.966 8.75 17 8.75 C 16.034 8.75 15.25 7.967 15.25 7 C 15.25 6.034 16.034 5.25 17 5.25 z M 7.0644531 9 C 6.9354531 9 6.8275 9.0966094 6.8125 9.2246094 L 6.6386719 10.710938 C 5.8314079 10.940599 5.1026855 11.35237 4.5175781 11.921875 L 3.1582031 11.335938 C 3.0402031 11.284937 2.9038438 11.329406 2.8398438 11.441406 L 1.9023438 13.0625 C 1.8373437 13.1735 1.8677031 13.315578 1.9707031 13.392578 L 3.1679688 14.279297 C 3.0687954 14.672064 3 15.076469 3 15.5 C 3 15.923531 3.0687954 16.327936 3.1679688 16.720703 L 1.9707031 17.609375 C 1.8677031 17.685375 1.8383437 17.827453 1.9023438 17.939453 L 2.8398438 19.560547 C 2.9038438 19.672547 3.0402031 19.717016 3.1582031 19.666016 L 4.5175781 19.078125 C 5.1026855 19.64763 5.8314079 20.059401 6.6386719 20.289062 L 6.8125 21.775391 C 6.8275 21.903391 6.9354531 22 7.0644531 22 L 8.9355469 22 C 9.0645469 22 9.1725 21.903391 9.1875 21.775391 L 9.3613281 20.289062 C 10.168592 20.059401 10.897314 19.64763 11.482422 19.078125 L 12.841797 19.664062 C 12.959797 19.715062 13.096156 19.670594 13.160156 19.558594 L 14.097656 17.9375 C 14.162656 17.8265 14.132297 17.684422 14.029297 17.607422 L 12.832031 16.720703 C 12.931205 16.327936 13 15.923531 13 15.5 C 13 15.076469 12.931205 14.672064 12.832031 14.279297 L 14.029297 13.390625 C 14.132297 13.314625 14.161656 13.172547 14.097656 13.060547 L 13.160156 11.439453 C 13.096156 11.327453 12.959797 11.282984 12.841797 11.333984 L 11.482422 11.921875 C 10.897314 11.35237 10.168592 10.940599 9.3613281 10.710938 L 9.1875 9.2246094 C 9.1725 9.0966094 9.0645469 9 8.9355469 9 L 7.0644531 9 z M 8 13.5 C 9.105 13.5 10 14.395 10 15.5 C 10 16.605 9.105 17.5 8 17.5 C 6.895 17.5 6 16.605 6 15.5 C 6 14.395 6.895 13.5 8 13.5 z"></path>
</svg>
</span> Wheel Builder
</h2>
<ol>
<li class="choices">Choices (enter up to 50 choices):</li>
<li class="choices input">
<input class="choiceInput" type="text" autocomplete="off" value="" />
<span class="cross">
<svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 60 40" version="1.1">
<g>
<path class="outline" d="M10,20 l12,-20 h38 v40 h-38z" />
<path class="x" d="M40,20 m-7,-7 l14,14 m0,-14 l-14,14" />
</g>
</svg>
</span>
</li>
<li class="choices input">
<input class="choiceInput" type="text" autocomplete="off" value="" />
<span class="cross">
<svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 60 40" version="1.1">
<g>
<path class="outline" d="M10,20 l12,-20 h38 v40 h-38z" />
<path class="x" d="M40,20 m-7,-7 l14,14 m0,-14 l-14,14" />
</g>
</svg>
</span>
</li>
<li class="choices input">
<input class="choiceInput" type="text" autocomplete="off" value="" />
<span class="cross">
<svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 60 40" version="1.1">
<g>
<path class="outline" d="M10,20 l12,-20 h38 v40 h-38z" />
<path class="x" d="M40,20 m-7,-7 l14,14 m0,-14 l-14,14" />
</g>
</svg>
</span>
</li>
<li class="choices input">
<input class="choiceInput" type="text" autocomplete="off" value="" />
<span class="cross">
<svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 60 40" version="1.1">
<g>
<path class="outline" d="M10,20 l12,-20 h38 v40 h-38z" />
<path class="x" d="M40,20 m-7,-7 l14,14 m0,-14 l-14,14" />
</g>
</svg>
</span>
</li>
<li class="choices input">
<input class="choiceInput" type="text" autocomplete="off" value="" />
<span class="cross">
<svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 60 40" version="1.1">
<g>
<path class="outline" d="M10,20 l12,-20 h38 v40 h-38z" />
<path class="x" d="M40,20 m-7,-7 l14,14 m0,-14 l-14,14" />
</g>
</svg>
</span>
</li>
<li class="choices add">
<span id="plus">
<svg xmlns="http://www.w3.org/2000/svg" height="28" viewBox="0 0 32 32" version="1.1">
<path d="M 16 3 C 8.832031 3 3 8.832031 3 16 C 3 23.167969 8.832031 29 16 29 C 23.167969 29 29 23.167969 29 16 C 29 8.832031 23.167969 3 16 3 Z M 16 5 C 22.085938 5 27 9.914063 27 16 C 27 22.085938 22.085938 27 16 27 C 9.914063 27 5 22.085938 5 16 C 5 9.914063 9.914063 5 16 5 Z M 15 10 L 15 15 L 10 15 L 10 17 L 15 17 L 15 22 L 17 22 L 17 17 L 22 17 L 22 15 L 17 15 L 17 10 Z "></path>
</svg>
</span>
<input id="addChoice" type="button" name="addChoice" value="Add Choice..." />
</li>
<li class="choices">
<input id="applyChanges" type="button" name="applyChanges" value="Apply Wheel Changes" />
</li>
</ol>
</div>
</div>
I'd appreciate any help.
Now if you click on the second(cloned) input element, it doesn't clone. I get the following error in the console.
The issue is in your addIfLastInput method. el.parentNode.nextSibling.nextSibling.classList.contains('input') is a fragile code. Small changes in tree structure (as you can see) can crash your application. It seems you want to check if the parent element of the clicked element is the last li that has .choices.input class names. For that, you can simply code:
addIfLastInput: function(e) {
var el = e.target,
inputs = wheelBuilder.getNodes('.choices.input'),
isLast = el.parentNode === wheelBuilder.getLast(inputs);
if (isLast) {
/// ...
}
},
Also, how would I go about attaching a focus event listener to the input element and trigger the cloning process without conflicting with the click event.
I'd just listen to focus event instead of click.
wheelBuilder.getNodes('.choiceInput').forEach(function(el, _) {
el.addEventListener('focus', wheelBuilder.addIfLastInput);
});
And:
clone: function() {
// ...
lastChoiceInput.addEventListener('focus', wheelBuilder.addIfLastInput);
},
Here is a demo on jsfiddle.
Vertical alignment on mobile devices and randomised colour javascript
I'm trying to make some tweaks to this website and having a bit of trouble.
http://accoutrements.studio
The 'Accoutrements' logo should be horizontally and vertically centred in the page. This seems to work fine on a desktop device, but it mis-aligns on a mobile device. See the screenshot for a better example — https://i.imgur.com/GnRSEmn.png
There's also a script to randomise the colour every time you click on the logo. However I'd like to have it so the page loads in black and white and then only randomises on click. At the moment I've created two separate pages (/index and /colour), but is there anyway to edit the javascipt so I don't have two separate pages?
There also seems to be a black box when you hover over the logo at smaller screen sizes. I'm not too sure why this is — https://i.imgur.com/pGA7d8U.png
Sorry for all of the questions and thank you!
Index
<!DOCTYPE html>
<html>
<head>
<link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
<link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
<link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
<link href="/manifest.json" rel="manifest">
<meta content="#ffffff" name="theme-color">
<meta charset="UTF-8">
<meta content="Accoutrements is a design studio established in 2016 by Jacob D'Rozario and Joseph Ng." name="description">
<meta content="Accoutrements, Design, Manchester, Photography, Publishing, Screen Printing" name="keywords">
<meta content="index,follow" name="robot">
<meta content="© 2017 Accoutrements. All rights reserved." name="copyright">
<meta content="Accoutrements" name="author">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Accoutrements</title>
<link rel="stylesheet" type="text/css" href="accoutrements.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
</head>
<body>
<div class="corner_link about">
About
</div>
<div class="corner_link shop">
Shop
</div>
<div class="corner_link catalogue">
Catalogue
</div>
<div class="corner_link instagram">
Instagram
</div>
<div class="accoutrements">
<a href="/colour"><svg class="logo" id="accoutrements" viewbox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
<title>Accoutrements</title>
<path d="M32,160H24l-2,40H0L12,0H44L56,200H34ZM28,48l-4,88h8Z"></path>
<path d="M494,0h30l4,100L532,0h30V200H540V88l-8,112h-8L516,88V200H494Z"></path>
<path d="M650,0l8,112V0h20V200H652L644,74V200H622V0Z"></path>
<polygon points="318 0 318 24 332 24 332 200 356 200 356 24 370 24 370 0 318 0"></polygon>
<polygon points="686 0 686 24 700 24 700 200 724 200 724 24 738 24 738 0 686 0"></polygon>
<polygon points="466 24 486 24 486 0 442 0 442 200 486 200 486 176 466 176 466 112 482 112 482 88 466 88 466 24"></polygon>
<polygon points="594 24 614 24 614 0 570 0 570 200 614 200 614 176 594 176 594 112 610 112 610 88 594 88 594 24"></polygon>
<path d="M118,90V28c0-8.13-1.94-14.87-6-20S101.87,0,92,0H88C78.13,0,72.05,2.87,68,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H94v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
<path d="M182,90V28c0-8.13-1.94-14.87-6-20s-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H158v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
<path d="M240,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V28C246,19.87,244.06,13.13,240,8ZM222,174a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0Z"></path>
<path d="M286,0V174a4,4,0,0,1-8,0V0H254V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V0Z"></path>
<path d="M434,76V20c0-16-7.16-20-16-20H378V200h24V112h4a4,4,0,0,1,4,4v84h24V108c0-6-2-14-10-14C434,94,434,81.52,434,76Zm-24,8a4,4,0,0,1-4,4h-4V22h4a4,4,0,0,1,4,4Z"></path>
<path d="M794,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V74c0,6.19.24,9.49,2,14s5.77,9.94,10,14l10,10c1.94,1.95,10,8,10,14v48a4,4,0,0,1-8,0V118H744v54c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V126c0-6.9-.06-11.76-2-16s-5.07-7.4-10-12c0,0-6.43-6.07-12-12-4.25-4.53-8-8.61-8-12V26a4,4,0,0,1,8,0V82h24V28C800,19.87,798.06,13.13,794,8Z"></path></svg></a>
</div>
</body>
</html>
Colour
<!DOCTYPE html>
<html>
<head>
<link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180">
<link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
<link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
<link href="/manifest.json" rel="manifest">
<meta content="#ffffff" name="theme-color">
<meta charset="UTF-8">
<meta content="Accoutrements is a design studio established in 2016 by Jacob D'Rozario and Joseph Ng." name="description">
<meta content="Accoutrements, Design, Manchester, Photography, Publishing, Screen Printing" name="keywords">
<meta content="index,follow" name="robot">
<meta content="© 2017 Accoutrements. All rights reserved." name="copyright">
<meta content="Accoutrements" name="author">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Accoutrements</title>
<link rel="stylesheet" type="text/css" href="accoutrements.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
</head>
<body>
<div class="corner_link about">
About
</div>
<div class="corner_link shop">
Shop
</div>
<div class="corner_link catalogue">
Catalogue
</div>
<div class="corner_link instagram">
Instagram
</div>
<div class="accoutrements">
<svg class="logo" id="accoutrements" viewbox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
<title>Accoutrements</title>
<path d="M32,160H24l-2,40H0L12,0H44L56,200H34ZM28,48l-4,88h8Z"></path>
<path d="M494,0h30l4,100L532,0h30V200H540V88l-8,112h-8L516,88V200H494Z"></path>
<path d="M650,0l8,112V0h20V200H652L644,74V200H622V0Z"></path>
<polygon points="318 0 318 24 332 24 332 200 356 200 356 24 370 24 370 0 318 0"></polygon>
<polygon points="686 0 686 24 700 24 700 200 724 200 724 24 738 24 738 0 686 0"></polygon>
<polygon points="466 24 486 24 486 0 442 0 442 200 486 200 486 176 466 176 466 112 482 112 482 88 466 88 466 24"></polygon>
<polygon points="594 24 614 24 614 0 570 0 570 200 614 200 614 176 594 176 594 112 610 112 610 88 594 88 594 24"></polygon>
<path d="M118,90V28c0-8.13-1.94-14.87-6-20S101.87,0,92,0H88C78.13,0,72.05,2.87,68,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H94v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
<path d="M182,90V28c0-8.13-1.94-14.87-6-20s-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V110H158v64a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0V90Z"></path>
<path d="M240,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V28C246,19.87,244.06,13.13,240,8ZM222,174a4,4,0,0,1-8,0V26a4,4,0,0,1,8,0Z"></path>
<path d="M286,0V174a4,4,0,0,1-8,0V0H254V172c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V0Z"></path>
<path d="M434,76V20c0-16-7.16-20-16-20H378V200h24V112h4a4,4,0,0,1,4,4v84h24V108c0-6-2-14-10-14C434,94,434,81.52,434,76Zm-24,8a4,4,0,0,1-4,4h-4V22h4a4,4,0,0,1,4,4Z"></path>
<path d="M794,8c-4.05-5.13-10.13-8-20-8h-4c-9.87,0-15.95,2.87-20,8s-6,11.87-6,20V74c0,6.19.24,9.49,2,14s5.77,9.94,10,14l10,10c1.94,1.95,10,8,10,14v48a4,4,0,0,1-8,0V118H744v54c0,8.13,1.94,14.87,6,20s10.13,8,20,8h4c9.87,0,15.95-2.87,20-8s6-11.87,6-20V126c0-6.9-.06-11.76-2-16s-5.07-7.4-10-12c0,0-6.43-6.07-12-12-4.25-4.53-8-8.61-8-12V26a4,4,0,0,1,8,0V82h24V28C800,19.87,798.06,13.13,794,8Z"></path></svg>
<script>
var safeColors = ['00', '33', '66', '99', 'cc', 'ff'];
var rand = function() {
return Math.floor(Math.random() * 6);
};
var randomColor = function() {
var r = safeColors[rand()];
var g = safeColors[rand()];
var b = safeColors[rand()];
return "#" + r + g + b;
};
var color_1 = randomColor();
var color_2 = randomColor();
$(document).ready(function() {
color_change();
$('#accoutrements').click(function() {
color_change();
});
});
function color_change() {
color_1 = randomColor();
color_2 = randomColor();
$('.corner_link a').css('color', color_1);
$('.accoutrements').css('fill', color_1);
$('body').css('background', color_2);
$('.corner_link a').hover(function(){ $(this).css('color',color_2).css('background-color',color_1); }, function(){ $(this).css('color',color_1).css('background-color','transparent'); });
}
</script>
</div>
</body>
</html>
CSS
body {
font-family: 'Work Sans', sans-serif;
font-size: 18px;
letter-spacing: 0px;
line-height: 27px;
font-weight: 400;
color: #111;
background-color: #fff;
}
.about {
position: fixed;
right: 40px;
bottom: 40px;
}
.shop {
position: fixed;
right: 40px;
top: 40px;
}
.catalogue {
position: fixed;
left: 40px;
top: 40px;
}
.instagram {
position: fixed;
left: 40px;
bottom: 40px;
}
a img {
text-decoration: none;
border:none;
border-bottom-style: none;
}
a:link {
text-decoration: none;
color: #111;
}
a:visited {
text-decoration: none;
color: #111;
}
a:hover {
background-color: #111;
color: #fff;
text-decoration: none;
}
a:active {
text-decoration: none;
color: #111;
}
.accoutrements {
top: 50%;
margin-top: 50vh;
transform: translateY(-50%);
cursor: pointer;
}
svg.logo {
position: relative;
max-width: 80%;
left: 10%;
}
svg.logo:emptyc {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#media screen and (min-width: 1000px) {
svg.logo {
max-width: 800px;
position: inherit;
display: block;
margin: auto;
}
}
.text {
top: 50%;
margin-top: 50vh;
transform: translateY(-50%);
margin-left: 20px;
margin-right: 20px;
}
To fix the black box remove the following code in your css
a:hover {
background-color: #111;
color: #fff;
text-decoration: none;
}
Alignment issue looks fine to me on all devices. Tested.
To fix the coloring issue, no need to have separate pages. You can execute your script once the page loads. Suppose you want to color page after 5 seconds so your code will look like:
$(document).ready(function() {
setTimeout(function(){
// Your color logic
}, 5000);
});
So put this script in your index page only:
$(document).ready(function() {
setTimeout(function(){
var safeColors = ['00', '33', '66', '99', 'cc', 'ff'];
var rand = function() {
return Math.floor(Math.random() * 6);
};
var randomColor = function() {
var r = safeColors[rand()];
var g = safeColors[rand()];
var b = safeColors[rand()];
return "#" + r + g + b;
};
var color_1 = randomColor();
var color_2 = randomColor();
$(document).ready(function() {
color_change();
$('#accoutrements').click(function() {
color_change();
});
});
function color_change() {
color_1 = randomColor();
color_2 = randomColor();
$('.corner_link a').css('color', color_1);
$('.accoutrements').css('fill', color_1);
$('body').css('background', color_2);
$('.corner_link a').hover(function(){ $(this).css('color',color_2).css('background-color',color_1); }, function(){ $(this).css('color',color_1).css('background-color','transparent'); });
}
}, 5000);
});