HTML Move Canvas object with onclick

HTML Move Canvas object with onclick - javascript

Is it possible to attach onclick event to move the object img left, down and right.
The button are placeholder , the sequence are left,down and right.
I'm facing two issue:-
1. My width is 500px, even when I drew it at 250px. It doesn't center .
2. I've tried multiple ways to add the onclick function to -/+ the y-axis and x-axis .
I've even tried to adapt to this code :
http://www.authorcode.com/how-to-move-an-object-on-the-html5-canvas/
But no luck either.
Is there something i missing? I've checked on google mostly are keyevent handler.
JSBIN:
http://jsbin.com/wuseguvuka/2/edit?html,css,output
CSS:
#charset "utf-8";
/* Global Styles */
#main {
width:100%;
background-color:red;
}
body {
margin-left: auto;
margin-right: auto;
width: 92%;
max-width: 960px;
padding-left: 2.275%;
padding-right: 2.275%;
}
/* Header */
header {
text-align: center;
display: block;
}
header .profileLogo .logoPlaceholder {
background-color: white;
color:black;
width: 300px;
text-align: center;
}
header .logoPlaceholder span {
width: 180px;
height: 22px;
font-family: 'Montserrat', sans-serif;
color: black;
font-size: 30px;
font-weight: 700;
line-height: 53px;
}
header .logoPlaceholder2 span {
width: 180px;
height: 22px;
font-family: 'Montserrat', sans-serif;
color: black;
font-size: 30px;
font-weight: 700;
line-height: 53px;
}
header .profilePhoto {
background-color: rgba(237,237,237,1.00);
width: 259px;
border-radius: 50%;
height: 259px;
clear: both;
}
header .profileHeader h1 {
font-family: 'Montserrat', sans-serif;
color: rgba(146,146,146,1.00);
font-size: 30px;
font-weight: 700;
line-height: 24px;
}
header .profileHeader h3 {
font-family: sans-serif;
color: rgba(146,146,146,1.00);
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
hr {
background-color: rgba(208,207,207,1.00);
height: 1px;
}
header .profileHeader p {
font-family: sans-serif;
color: rgba(146,146,146,1.00);
font-size: 14px;
font-weight: 400;
line-height: 1.8;
overflow-y: auto;
}
header .socialNetworkNavBar {
text-align: center;
display: block;
margin-top: 60px;
clear: both;
}
header .socialNetworkNavBar .socialNetworkNav {
border-radius: 50%;
cursor: pointer;
}
header .socialNetworkNavBar .socialNetworkNav img:hover {
opacity: 0.5;
}
/* Media query for Mobile devices*/
#media only screen and (min-width : 285px) and (max-width : 480px) {
/* Header */
#main {
width:100%;
}
header {
width: 100%;
float: left;
}
.wrapper {
display: inline-block;
width: 100%;
height: 100%;
}
header .profileLogo .logoPlaceholder {
display: inline-block;
text-align: left;
}
header .profilePhoto {
display: inline-block;
}
header .profileHeader {
text-align: center;
margin-top: 10%;
}
header .profileHeader p {
text-align: justify;
}
header .socialNetworkNavBar {
text-align: center;
display: block;
margin-top: 60px;
clear: both;
margin-bottom: 15%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 60px;
height: 60px;
display: inline-block;
margin-right: 23px;
}
}
/* Media Query for Tablets */
#media only screen and (min-width : 481px) and (max-width : 1024px) {
/* Header */
header {
width: 100%;
float: none;
}
header .profileLogo .logoPlaceholder {
display: inline-block;
font-family: 'Montserrat', sans-serif;
}
header .profilePhoto {
float: left;
clear: both;
margin-right: 3%;
margin-top: 5%;
}
header .profileHeader {
text-align: left;
margin-top: 7%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 74px;
height: 74px;
display: inline-block;
margin-right: 23px;
}
}
/* Desktops and laptops */
#media only screen and (min-width:1025px) {
/* Header */
header .profileLogo .logoPlaceholder {
float: left;
margin-bottom: 50px;
}
header .profilePhoto {
float: left;
clear: both;
margin-right: 3%;
}
header .profileHeader {
text-align: left;
padding-top: 10%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 74px;
height: 74px;
display: inline-block;
margin-right: 23px;
}
.wrapper {
display: table;
padding: 0;
width: 100%;
height: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.canvas-container {
position: relative;
max-width: 1024px;
min-width: 120px;
margin: 0 auto;
}
}
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About Page template By Adobe Dreamweaver CC</title>
<link href="AboutPageAssets/styles/aboutPageStyle.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/montserrat:n4:default;source-sans-pro:n2:default.js" type="text/javascript"></script>
<script>
function load() {
var context = document.getElementById('main').getContext("2d");
var img = new Image();
img.src = "http://via.placeholder.com/75x150";
img.onload = function () {
context.drawImage(img, 250, 0);
}
}
</script>
</head>
<body onload="load();">
<!-- Header content -->
<header>
<div class="profileLogo">
<!-- Profile logo. Add a img tag in place of <span>. -->
<p class="logoPlaceholder"><!-- <img src="logoImage.png" alt="sample logo"> --><span>Name :</span></p>
<p class="logoPlaceholder"><!-- <img src="logoImage.png" alt="sample logo"> --><span>Attempts :</span></p>
<p class="logoPlaceholder"><!-- <img src="logoImage.png" alt="sample logo"> --><span>Score :</span></p>
</div>
<section>
<div class="wrapper">
<div class="container">
<div class="canvas-container">
<canvas id="main" width="500px" height="250px"></canvas>
</div>
</div>
</div>
</section>
<!-- Links to Social network accounts -->
<aside class="socialNetworkNavBar">
<div style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input type="image" src="http://via.placeholder.com/75x75" >
</div>
<div id="left" style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input type="image" src="http://via.placeholder.com/75x75" > </div>
<div id="down" style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input id="right" type="image" src="http://via.placeholder.com/75x75" >
</div>
</aside>
</header>
<!-- content -->
</body>
</html>

Yes!
It is absolutely possible. Here is how you could achieve that ...
function load() {
var context = document.getElementById('main').getContext("2d");
var left = document.getElementById('left');
var down = document.getElementById('down');
var right = document.getElementById('right');
var imgLoaded = false;
var posX = 250;
var posY = 0;
var snap = 10;
var img = new Image();
img.onload = function() {
imgLoaded = true;
context.drawImage(img, posX, posY);
};
img.src = "http://via.placeholder.com/75x150";
// left button click
left.onclick = function() {
if (!imgLoaded) return;
posX = posX - snap;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.drawImage(img, posX, posY);
};
// down button click
down.onclick = function() {
if (!imgLoaded) return;
posY = posY + snap;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.drawImage(img, posX, posY);
};
// right button click
right.onclick = function() {
if (!imgLoaded) return;
posX = posX + snap;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.drawImage(img, posX, posY);
};
}
#charset "utf-8";
/* Global Styles */
#main {
width: 100%;
background-color: red;
}
body {
margin-left: auto;
margin-right: auto;
width: 92%;
max-width: 960px;
padding-left: 2.275%;
padding-right: 2.275%;
}
/* Header */
header {
text-align: center;
display: block;
}
header .profileLogo .logoPlaceholder {
background-color: white;
color: black;
width: 300px;
text-align: center;
}
header .logoPlaceholder span {
width: 180px;
height: 22px;
font-family: 'Montserrat', sans-serif;
color: black;
font-size: 30px;
font-weight: 700;
line-height: 53px;
}
header .logoPlaceholder2 span {
width: 180px;
height: 22px;
font-family: 'Montserrat', sans-serif;
color: black;
font-size: 30px;
font-weight: 700;
line-height: 53px;
}
header .profilePhoto {
background-color: rgba(237, 237, 237, 1.00);
width: 259px;
border-radius: 50%;
height: 259px;
clear: both;
}
header .profileHeader h1 {
font-family: 'Montserrat', sans-serif;
color: rgba(146, 146, 146, 1.00);
font-size: 30px;
font-weight: 700;
line-height: 24px;
}
header .profileHeader h3 {
font-family: sans-serif;
color: rgba(146, 146, 146, 1.00);
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
hr {
background-color: rgba(208, 207, 207, 1.00);
height: 1px;
}
header .profileHeader p {
font-family: sans-serif;
color: rgba(146, 146, 146, 1.00);
font-size: 14px;
font-weight: 400;
line-height: 1.8;
overflow-y: auto;
}
header .socialNetworkNavBar {
text-align: center;
display: block;
margin-top: 60px;
clear: both;
}
header .socialNetworkNavBar .socialNetworkNav {
border-radius: 50%;
cursor: pointer;
}
header .socialNetworkNavBar .socialNetworkNav img:hover {
opacity: 0.5;
}
/* Media query for Mobile devices*/
#media only screen and (min-width: 285px) and (max-width: 480px) {
/* Header */
#main {
width: 100%;
}
header {
width: 100%;
float: left;
}
.wrapper {
display: inline-block;
width: 100%;
height: 100%;
}
header .profileLogo .logoPlaceholder {
display: inline-block;
text-align: left;
}
header .profilePhoto {
display: inline-block;
}
header .profileHeader {
text-align: center;
margin-top: 10%;
}
header .profileHeader p {
text-align: justify;
}
header .socialNetworkNavBar {
text-align: center;
display: block;
margin-top: 60px;
clear: both;
margin-bottom: 15%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 60px;
height: 60px;
display: inline-block;
margin-right: 23px;
}
}
/* Media Query for Tablets */
#media only screen and (min-width: 481px) and (max-width: 1024px) {
/* Header */
header {
width: 100%;
float: none;
}
header .profileLogo .logoPlaceholder {
display: inline-block;
font-family: 'Montserrat', sans-serif;
}
header .profilePhoto {
float: left;
clear: both;
margin-right: 3%;
margin-top: 5%;
}
header .profileHeader {
text-align: left;
margin-top: 7%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 74px;
height: 74px;
display: inline-block;
margin-right: 23px;
}
}
/* Desktops and laptops */
#media only screen and (min-width: 1025px) {
/* Header */
header .profileLogo .logoPlaceholder {
float: left;
margin-bottom: 50px;
}
header .profilePhoto {
float: left;
clear: both;
margin-right: 3%;
}
header .profileHeader {
text-align: left;
padding-top: 10%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 74px;
height: 74px;
display: inline-block;
margin-right: 23px;
}
.wrapper {
display: table;
padding: 0;
width: 100%;
height: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.canvas-container {
position: relative;
max-width: 1024px;
min-width: 120px;
margin: 0 auto;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About Page template By Adobe Dreamweaver CC</title>
<link href="AboutPageAssets/styles/aboutPageStyle.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>
var __adobewebfontsappname__ = "dreamweaver"
</script>
<script src="http://use.edgefonts.net/montserrat:n4:default;source-sans-pro:n2:default.js" type="text/javascript"></script>
</head>
<body onload="load();">
<!-- Header content -->
<header>
<div class="profileLogo">
<!-- Profile logo. Add a img tag in place of <span>. -->
<p class="logoPlaceholder">
<!-- <img src="logoImage.png" alt="sample logo"> --><span>Name :</span></p>
<p class="logoPlaceholder">
<!-- <img src="logoImage.png" alt="sample logo"> --><span>Attempts :</span></p>
<p class="logoPlaceholder">
<!-- <img src="logoImage.png" alt="sample logo"> --><span>Score :</span></p>
</div>
<section>
<div class="wrapper">
<div class="container">
<div class="canvas-container">
<canvas id="main" width="500px" height="250px"></canvas>
</div>
</div>
</div>
</section>
<!-- Links to Social network accounts -->
<aside class="socialNetworkNavBar">
<div id="left" style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input type="image" src="http://via.placeholder.com/75x75">
</div>
<div id="down" style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input type="image" src="http://via.placeholder.com/75x75"> </div>
<div id="right" style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input type="image" src="http://via.placeholder.com/75x75">
</div>
</aside>
</header>
<!-- content -->
</body>
</html>
apology for not giving explanation

Related

My page doesn't scale well as soon as I load it in a mobile device

Basically, it's a random quote page but it is not displaying properly on mobile device screens. The background image doesn't cover the whole mobile screen it does cover the whole computer screen.
Also, the space that isn't covered gets filled with white. All the elements in mobile don't scale to the phone's resolution and I can't understand why.
I am a beginner and this is one of my first 'solo' projects sorry if the code is too messy.
I know this is probably been asked before but I can't seem to find a way to get around it no matter how much I searched...
Here's the code:
body {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
margin: 0;
padding: 0;
background-image: url(''); /* look app.js */
background-size: cover; /* so the image fits perfectly onto the background */
background-position: initial;
background-repeat: no-repeat;
}
#media only screen and (max-width: 768px){
body{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
margin: 0 auto;
padding: 0;
background-image: url(''); /* look app.js */
background-size: 1100px 1300px; /* so the image fits perfectly onto the background */
background-position: initial;
width: 420px;
height: 360x;
}
}
#wrapper{
position: relative;
width: 700px;
margin: 0 auto;
min-width: 700px;
max-width: 700px;
min-height: 300px;
max-height: 300px;
/* Can't figure out how to stop container element from resizing if you zoom/unzoom the site */
}
.container {
position: relative;
width: 700px;
height: 300px;
background-color: rgb(0, 48, 73, .80) ;
margin: 0 auto;
margin-top: 150px;
border-radius: 50px;
border-style: solid;
border-color: rgb(64, 159, 223, .1);
border-width: 0.2em;
text-align: center;
padding-top:1px;
color: #cbc0d3;
}
.title{
width: 700px;
}
.title h1 {
color: #3a86ff;
padding-top: 20px;
padding-bottom: 0px;
}
.title p {
margin-top: -10px;
margin-bottom: 40px;
font-style: italic;
}
.author{
margin-left: 210px;
margin-top: 30px;
width: 700px;
font-style: italic;
}
.author span{
color: #3a86ff;
}
.random-quote{
margin-top: 55px;
}
.background-img{
margin: 0 auto;
}
and the html:
<!DOCTYPE html>
<html lan="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Random Quote Generator </title>
<link rel="stylesheet" href="styles.css">
</head>
<body id="what">
<main>
<div id="wrapper">
<div class="container">
<div class="title">
<h1>Inspiring Captions</h1>
<p>Write it down ☯︎</p>
</div>
<div class="random-quote">
<h2></h2>
</div>
<div class="author">
<span></span>
</div>
</div>
</div>
</main>
<script src="app.js"></script>
</body>
</html>
also js:
const containerElement = document.querySelector(".container")
const titleElement = document.querySelector(".title")
const quoteElement = document.querySelector(".random-quote")
const authorElement = document.querySelector(".author")
const bodyElement= document.querySelector("body")
const randomQuote = {}
const randomImage = {}
getRandomQuote()
getRandomImage()
//Random image api
function getRandomImage(){
let apiImg = `https://random.imagecdn.app/v1/image?width=1920&height=1080&format=json`
console.log(apiImg)
fetch(apiImg)
.then(function(response){
let data = response.json()
return data
}).then(function(data){
randomImage.content = data.url
console.log(randomImage)
}).then(function(){
displayRandomQuote()
})
}
//Random quote api
function getRandomQuote(){
let api = 'https://api.quotable.io/random'
console.log(api)
fetch(api)
.then(function(response){
let data = response.json()
return data
}).then(function(data){
randomQuote.quote = data.content
randomQuote.author = data.author
}).then(function(){
displayRandomQuote()
})
}
function displayRandomQuote(){
quoteElement.innerHTML = `${randomQuote.quote}`
authorElement.innerHTML = `By: <span>${randomQuote.author}</span>`
document.body.style.backgroundImage = "url('" + randomImage.content + "')"
//Changes the link of background-image property in styles.css so that it contains a random image url every time
}

I reworked your code a bit and made it more responsive.
<body>
<main class="container">
<div class="quote">
<div class="title">
<h1>Inspiring Captions</h1>
<p>Write it down ☯︎</p>
</div>
<p class="random-quote">Happiness comes when your work and words are of benefit to yourself and
others.</p>
<div class="author">By: <span>Buddha</span></div>
</div>
</main>
<script src="app.js"></script>
</body>
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
margin: 0;
padding: 0;
background-size: cover;
background-repeat: no-repeat;
padding: 20px;
}
#media screen and (min-width: 720px) {
body {
padding: 40px;
}
}
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.quote {
width: 100%;
max-width: 700px;
background-color: rgb(0, 48, 73, .80);
color: #cbc0d3;
border-radius: 50px;
border: 0.2em solid rgb(64, 159, 223, .1);
text-align: center;
padding: 20px 30px;
}
#media screen and (min-width: 720px) {
.quote {
padding: 55px 140px;
}
}
.title h1 {
margin: 0;
color: #3a86ff;
}
.title p {
margin-bottom: 40px;
font-style: italic;
}
.author {
font-style: italic;
text-align: right;
}
.author span {
color: #3a86ff;
}
.random-quote {
margin-top: 55px;
}

How can I center the logo and center the menu?

Let's take a look at my first and simple website. I have made the website from the tutorial, but I want to change a few things:
First: the logo "Bukowski" I want to have at center on the white space and (when I shorten the screen and making it bigger all the time at center) ,
Second: I want to have the menu at center, not to the left.
Third: When I make the screen smaller than 996px the black block appears and goes up. I want my menu to collapse below 996px normally but without the black block goes up.
And the forth and last: Take a look please at html code and please tell me what should I add to the
head tags I mead meta-ta
#font-face {
src: url(mistral.ttf);
font-family: mistral;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.logo2 {
font-family: mistral;
font-size: 100px;
margin-left: auto;
margin-right: auto;
}
header {
position: fixed;
width: 100%;
height: 80px;
padding: 0px 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #111;
z-index: 1000;
}
header .logo {
font-family: 'mistral';
color: #fff;
font-size: 40px;
text-decoration: none;
letter-spacing: 2px;
}
header ul {
position: relative;
display: flex;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
padding: 5px 10px;
color: #fff;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
header ul li a:hover,
header ul li a.active {
background-color: #205aff;
}
.toggle {
display: none;
}
section {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 100vh;
padding: 120px 50px 100px;
text-align: justify;
}
.nag {
text-align: center;
}
section img {
max-width: 400px;
margin-left: 30px;
}
section h2 {
text-align: left;
text-transform: uppercase;
}
section p {
font-size: 18px;
}
section a {
display: inline-block;
padding: 8px 10px;
text-decoration: none;
font-size: 18px;
background: #111;
color: #fff;
margin-top: 20px;
}
section:nth-child(odd) {
position: relative;
justify-content: center;
align-items: center;
background: #111;
color: #fff;
}
#media (max-width: 992px) {
section h2 {
font-size: 1.5em;
text-transform: uppercase;
}
section {
padding: 100px 50px 50px;
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
}
section img {
margin: 50px 0 0;
max-width: 100%;
}
header ul {
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: calc(100vh - 80px);
padding: 50px 100px;
text-align: center;
overflow: auto;
transition: 0.9s;
background: #111;
flex-direction: column;
opacity: 0;
transform: translateY(-100%);
}
header.active ul {
opacity: 1;
top: 80px;
transform: translateY(0);
}
header ul li a {
margin: 5px 0;
font-size: 24px;
}
.toggle {
display: block;
position: relative;
width: 30px;
height: 30px;
cursor: pointer;
}
.toggle:before {
content: '';
position: absolute;
top: 4px;
width: 100%;
height: 2px;
background: #fff;
z-index: 1;
box-shadow: 0 10px 0 #fff;
transition: 0.5s;
}
.toggle:after {
content: '';
position: absolute;
bottom: 4px;
width: 100%;
height: 2px;
background: #fff;
z-index: 1;
transition: 0.5s;
}
header.active .toggle:before {
top: 14px;
transform: rotate(45deg);
box-shadow: 0 0 0 #fff;
}
header.active .toggle:after {
top: 14px;
transform: rotate(-45deg);
}
}
.nag2 {
font-family: 'mistral';
font-size: 150px;
margin-left: px;
text-align: center;
margin-left: 30px;
}
.nag h2 {
letter-spacing: 30px;
text-decoration: underline;
font-size: 20px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bukowski</title>
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Service</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
</ul>
<div class="toggle" onclick="toggle()"></div>
</header>
<section id="home">
<div>
<div class="nag">
<div class="nag2">Bukowski</div>
<h2>LEATHER WEAR</h2>
</div>
</div>
<img src="fota2.jpg">
</section>
<section id="about">
<div>
<h2>About Us</h2>
<p>Jesteśmy polską firmą odzieżową, zajmującą się dystrybucją, produkcją, oraz projektowaniem odzieży skórzanej i kożuchów . Nasza marka istnieje na rynku od 1992 roku. Firma Bukowski to polska marka dedykowana ludziom ceniącym sobie niebanalny styl,
komfort i wygodę. Oferowane przez nas kolekcje to nawiązanie do nowoczesności zgodne z aktualnymi trendami. Doświadczenie sięgające niemal 30 lat to doskonała gwarancja wysokiej jakości produktów oraz zaufania klienów. Serdecznie zapraszamy do
nabywania produktów w naszych punktach sprzedaży.</p>
</div>
</section>
<section id="services">
<div>
<h2>Our Service</h2>
<p>Wychodząc także naprzeciw oczekiwaniom naszych klientów, poza standardowym asortymentem oferujemy szycie na miarę. W naszych punktach sprzedaży posiadamy wykwalifikowany personel, który może pobrać wymiary od indywidualych klienów. Dzięki temu u
nas każdy klient może znaleźć coś dla siebie. Również oferujemy pomoc w zakresie skracania, zwężania, renowacji bądź wymiany poszczególnych elementów w produktach u nas zakupionych. Dzięki temu możemy przedłużyć użyteczność i żywotność naszych
produktów dzięki czemu możecie Państwo cieszych się naszyi produktami przez długie lata.
</p>
</div>
</section>
<section id="portfolio">
<div>
<h2>Our Recent Work</h2>
<p>Od niemal 30 lat obecności na rynku, nieustannie dokładaliśmy wszelkich starań, aby nasze produkty cechowała najwyższa jakość. Ostatnio jeszcze bardziej poszerzyliśmy nasz asortyment o nowe produkty. Posiadamy ponad sto różnych wzorów w różnych
kolorach i nieustannie pracujemy nad poszerzeniem naszej oferty. W ostatnich latach nasz asortyment zwiąkszył się kilkukrotnie. </p>
</div>
</section>
<section id="team">
<div>
<h2>Our Expert</h2>
<p>Posiadamy wysoce wykwalifikowaną kadrę pracowniczą, która jest jednym z podstawowych gwarantów uzyskania efektywnych wyników naszej firmy. W pierwszej kolejności zapewniamy naszym pracownikom odpowiedni poziom przygotowania w zakresie krojenia,
szycia, a także sprzedaży finalnych produktów w naszych punktach sprzedaży. Nasza kadra jest do Państwa dyspozycji oraz dołoży wszelkich starań, aby nasi klienci mogli cieszyć się z nabytych u nas produktów przez długie lata. Wieloletnie doświadczenie,
które nabyliśmy przez dziesiątki lat istnienia na rynku, pomaga nam wyjść naprzeciw potrzebom najbardziej wymagających klientów.
</p>
</div>
</section>
<section id="contact">
<div>
<h2>Contact Us</h2>
<p>
Siedziba firmy: <br><br> Rogoźnik os. Za Torem 20a<br> 34-471 Ludźmierz<br><br> tel 48 18 265 56 53<br> tel./fax: 48 18 265 53 05<br> kom. 48 603 607 832<br> kom. 48 604 971 789<br> kom. 48 695 069 380<br><br> e-mail: bukowski#interia.eu
</p>
</div>
</section>
<script type="text/javascript">
function toggle() {
var header = document.getElementById("header");
header.classList.toggle('active');
}
</script>
</body>
</html>

How to allow only 1 scroll to work with Javascript?

I have a html page with a filter_options and content. Inside the filter_options there are some options listed. I have given scroll access and on scroll-Y it would change the scroll-X of those options. But with that the content scroll is also working. How can I allow the filter_options scroll to only work when it is being scrolled?
index.html
document.getElementById("options").addEventListener('mousewheel', function(e) {
if (e.wheelDelta > 0) {
this.scrollLeft -= 100;
} else {
this.scrollLeft += 100;
}
});
body {
margin: 0;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: white;
}
::-webkit-scrollbar-thumb {
background: orange;
border-radius: 30px;
}
#filter_options {
width: 80%;
height: 100%;
position: fixed;
top: 0;
z-index: 2;
background-color: rgba(66, 60, 60, 0.13);
float: left;
overflow: scroll;
}
#filter_options div {
background-color: rgb(51, 51, 51);
text-align: center;
overflow: auto;
white-space: nowrap;
margin-top: 5%;
}
#filter_options div div {
color: white;
background-color: orange;
padding: 12px;
font-size: 20px;
font-family: "Comic Sans MS", cursive, sans-serif;
display: inline-block;
user-select: none;
}
#content {
height: 5000px;
width: 90%;
margin-left: 5%;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="filter_options">
<div id="options">
<div>Option 1</div><div>Option 2</div><div>Option 3</div><div>Option 4</div><div>Option 5</div><div>Option 6</div><div>Option 7</div><div>Option 8</div><div>Option 9</div><div>Option 10</div>
</div>
</div>
<div id="content"></div>
</body>
</html>

Try to use
#content {overflow: hidden}

I just thought of a solution. By using e.preventDefault() before the if statement.

When I click on next button page number ascending by unknown order.

I'm creating simple survey and as I said, when I select language,
and clicking on "next", page number ascending by unknown order.
I cant find where error is. Logic of ascending is pretty random.
Can some one help me?
$(document).ready(function(){
// Declare main variables
var step = 0, runed = false;
var db = [{
question: "Question 1"
},{
question: "Question 2"
},{
question: "Question 3"
},{
question: "Question 4"
},{
question: "Question 5"
},{
question: "Question 6"
},{
question: "Question 7"
}];
var tot = db.length;
var lang;
function reStep() {
$('.pg .tot').html(tot);
$('.pg .cur').html(step);
if(step == 0) {
$('footer').hide();
} else {
$('footer').show();
}
run();
};
function next() {
step++;
reStep();
};
function run() {
if(step == 0) {
// First step handler
runed = true;
$('[step=' + step + '] a').click(function(){
lang = $(this).attr('data');
$(this).parent().fadeOut(300);
next();
});
} else if(step > db.length) {
// Question handler
} else {
// Result handler
console.log(step);
$('.qstripe p').fadeOut();
$('.qstripe h1').html(db[step - 1].question)
$('#next').click(function() {
next();
});
};
};
if(!runed) {
reStep();
}
});
html, body {
font-family: 'Nunito', sans-serif;
font-weight: 100;
}
html {
background: url('../img/bg.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
* {
margin: 0;
padding: 0;
}
.pull {
float: left;
}
.pulr {
float: right;
}
.clr {
clear: both;
}
.green {
background: #8cc73f;
}
.blue {
background: #29aae1;
}
header {
background: url("../img/logo.png") center center no-repeat;
background-size: 100% auto;
width: 400px;
height: 133px;
margin: 25px auto 0;
}
.survey {
margin: 25px auto 0;
}
.qstripe {
margin-bottom: 35px;
line-height: 70px;
}
.qstripe h1 {
color: #FFFFFF;
font-size: 2em;
text-align: center;
background: #29aae1;
}
.qstripe p {
padding-top: 20px;
color: #2c2c2c;
font-size: 1.7em;
line-height: 1.7em;
text-align: center;
}
.qstripe p span {
display: block;
}
.ans {
margin: 0 auto;
width: 768px;
text-align: center;
}
.ans .an {
display: inline-block;
vertical-align: top;
margin: 10px;
padding: 10px 20px;
width: 225px;
line-height: 30px;
font-size: 1.1em;
text-align: center;
border-radius: 8px;
background: #29aae1;
color: white;
cursor: pointer;
}
footer {
padding-bottom: 20px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
footer .btns {
margin: auto;
max-width: 768px;
}
footer a {
display: inline-block;
font-size: 1.1em;
width: 225px;
height: 30px;
border-radius: 8px;
padding: 10px;
margin: auto;
text-align: center;
color: white;
font-family: 'Nunito', sans-serif;
font-weight: 100;
font-size: 20px;
cursor: pointer;
}
footer a .back {
margin-left: 30px;
}
footer .prog-b {
margin: 40px auto 30px;
max-width: 768px;
position: relative;
height: 10px;
}
footer .prog-b i {
display: block;
position: absolute;
width: 30px;
height: 30px;
left: 30%;
margin-top: -10px;
border-radius: 50px;
}
footer .pg {
text-align: center;
color: #29aae1;
font-size: 2em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Key For Care</title>
<link href='https://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body>
<header></header>
<div class="survey">
<div class="qstripe">
<h1>We want to improve!</h1>
<p>
SELECT LANGUAGE FIRST
</p>
</div>
<div class="ans">
<div step="0">
<a class="an" data="sv">SVENSKA</a>
<a class="an" data="en">ENGLISH</a>
<a class="an" data="so">SOOMAALI</a>
<a class="an" data="ar">العربية</a>
</div>
</div>
<footer>
<div class="btns">
<a class="pull blue" id="prev">Back</a>
<a class="pulr green" id="next">Next</a>
</div>
<div class="clr"></div>
<div class="prog-b green">
<i class="blue"></i>
</div>
<div class="pg">
<span class="cur"></span>/<span class="tot"></span>
</div>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="static/js/app.js"></script>
</body>
</html>

That is because you are binding click event in your "run" function again and again til it reach to total count of db size.
So try to bind click only once so it will perform event only once at time.
You can try to remove click event first where you binding click event in "run" function with ".unbind()" event.

Fixed!
$(document).ready(function(){
// Declare main variables
var step = 0, runed = false;
var db = [{
question: "Question 1"
},{
question: "Question 2"
},{
question: "Question 3"
},{
question: "Question 4"
},{
question: "Question 5"
},{
question: "Question 6"
},{
question: "Question 7"
}];
var tot = db.length;
var lang;
function reStep() {
$('.pg .tot').html(tot);
$('.pg .cur').html(step);
if(step == 0) {
$('footer').hide();
} else {
$('footer').show();
}
run();
};
function next() {
step++;
reStep();
};
function run() {
if(step == 0) {
// First step handler
runed = true;
$('[step=' + step + '] a').click(function(){
lang = $(this).attr('data');
$(this).parent().fadeOut(300);
next();
});
} else if(step > db.length) {
// Question handler
} else {
// Result handler
console.log(step);
$('.qstripe p').fadeOut();
$('.qstripe h1').html(db[step - 1].question)
};
};
if(!runed) {
reStep();
}
$('#next').click(function() {
next();
});
});
html, body {
font-family: 'Nunito', sans-serif;
font-weight: 100;
}
html {
background: url('../img/bg.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
* {
margin: 0;
padding: 0;
}
.pull {
float: left;
}
.pulr {
float: right;
}
.clr {
clear: both;
}
.green {
background: #8cc73f;
}
.blue {
background: #29aae1;
}
header {
background: url("../img/logo.png") center center no-repeat;
background-size: 100% auto;
width: 400px;
height: 133px;
margin: 25px auto 0;
}
.survey {
margin: 25px auto 0;
}
.qstripe {
margin-bottom: 35px;
line-height: 70px;
}
.qstripe h1 {
color: #FFFFFF;
font-size: 2em;
text-align: center;
background: #29aae1;
}
.qstripe p {
padding-top: 20px;
color: #2c2c2c;
font-size: 1.7em;
line-height: 1.7em;
text-align: center;
}
.qstripe p span {
display: block;
}
.ans {
margin: 0 auto;
width: 768px;
text-align: center;
}
.ans .an {
display: inline-block;
vertical-align: top;
margin: 10px;
padding: 10px 20px;
width: 225px;
line-height: 30px;
font-size: 1.1em;
text-align: center;
border-radius: 8px;
background: #29aae1;
color: white;
cursor: pointer;
}
footer {
padding-bottom: 20px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
footer .btns {
margin: auto;
max-width: 768px;
}
footer a {
display: inline-block;
font-size: 1.1em;
width: 225px;
height: 30px;
border-radius: 8px;
padding: 10px;
margin: auto;
text-align: center;
color: white;
font-family: 'Nunito', sans-serif;
font-weight: 100;
font-size: 20px;
cursor: pointer;
}
footer a .back {
margin-left: 30px;
}
footer .prog-b {
margin: 40px auto 30px;
max-width: 768px;
position: relative;
height: 10px;
}
footer .prog-b i {
display: block;
position: absolute;
width: 30px;
height: 30px;
left: 30%;
margin-top: -10px;
border-radius: 50px;
}
footer .pg {
text-align: center;
color: #29aae1;
font-size: 2em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Key For Care</title>
<link href='https://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body>
<header></header>
<div class="survey">
<div class="qstripe">
<h1>We want to improve!</h1>
<p>
SELECT LANGUAGE FIRST
</p>
</div>
<div class="ans">
<div step="0">
<a class="an" data="sv">SVENSKA</a>
<a class="an" data="en">ENGLISH</a>
<a class="an" data="so">SOOMAALI</a>
<a class="an" data="ar">العربية</a>
</div>
</div>
<footer>
<div class="btns">
<a class="pull blue" id="prev">Back</a>
<a class="pulr green" id="next">Next</a>
</div>
<div class="clr"></div>
<div class="prog-b green">
<i class="blue"></i>
</div>
<div class="pg">
<span class="cur"></span>/<span class="tot"></span>
</div>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="static/js/app.js"></script>
</body>
</html>

Spacing between images

I have 3 images side-by-side, I would like to know how to get some spacing between them. I have tried everything, margins, padding and I don't know what to do.
.content1 {
background-image: url("http://www.thefreeloves.com/prototype/test/wp-content/uploads/2014/02/album-title.jpg");
color: white;
text-align: center;
width: 100%;
height: 20%;
display: block;
float: left;
}
.text1 {
font-family: "Goudy Old Style", Optima, sans-serif;
font-size: 40px;
margin-bottom: 0;
margin-top: 45px;
}
.text2 {
font-size: 30px;
color: #6CB9D9;
}
.album1 {
float: left;
width: 31%;
text-align: center;
}
.album2 {
display: inline-block;
width: 31%;
text-align: center;
}
.album3 {
float: right;
width: 31%;
text-align: center;
}
.album {
width: 100%;
overflow: hidden;
background-color: #191919;
}
<div class="content1">
<h3 class="text1">Our Latest Album<span class="slash"> / </span><span class="text2">Fresh from the house of Music Club Band</span></h3>
</div>
<div class="album">
<div class="album1">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9133-650x385.jpg" alt="album1">
</div>
<div class="album2">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9099-650x385.jpg" alt="album2">
</div>
<div class="album3">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA0373-650x385.jpg" alt="album3" class="album4">
</div>
</div>

You set your wrapping div's to 31% but you didn't change the size of your images so they were flowing outside the wrappers. If you set Overflow: hidden; on your album1, album2 and album3 div's you'll see that your margins are working on the divs but you'll only see part of your images. if you set the imgs themselves to a width of 100% as below you'll see it works.
.content1 {
background-image: url("http://www.thefreeloves.com/prototype/test/wp-content/uploads/2014/02/album-title.jpg");
color: white;
text-align: center;
width: 100%;
height: 20%;
display: block;
float: left;
}
.text1 {
font-family: "Goudy Old Style", Optima, sans-serif;
font-size: 40px;
margin-bottom: 0;
margin-top: 45px;
}
.text2 {
font-size: 30px;
color: #6CB9D9;
}
.album1 {
float: left;
width: 31%;
text-align: center;
margin: 1%;
}
.album2 {
display: inline-block;
width: 31%;
text-align: center;
margin: 1%;
}
.album3 {
float: right;
width: 31%;
text-align: center;
margin: 1%;
}
.album {
width: 100%;
overflow: hidden;
background-color: #191919;
}
.album img { width: 100%; }
<div class="content1">
<h3 class="text1">Our Latest Album<span class="slash"> / </span><span class="text2">Fresh from the house of Music Club Band</span></h3>
</div>
<div class="album">
<div class="album1">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9133-650x385.jpg" alt="album1">
</div>
<div class="album2">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA9099-650x385.jpg" alt="album2">
</div>
<div class="album3">
<img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA0373-650x385.jpg" alt="album3" class="album4">
</div>
</div>

In each div tag, just place the following style = "margin-right: 20px;". So for example, for the first image, change it ot this
div style = "margin-right: 20px;" class="album1">

You don't need to use float, you can simply set the display of the albums to inline-block, and set the text-align of their parent to center. Note that the three images there are too wide to be in one line, so you'll have to adjust that yourself.
.album1 img, .album2 img, .album3 img {
//set img width and height here
}
.album1 {
display: inline-block;
//add padding/margin here
}
.album2 {
display: inline-block;
//add padding/margin here
}
.album3 {
display: inline-block;
//add padding/margin here
}
.album {
width: 100%;
overflow: hidden;
background-color: #191919;
text-align:center;
}

Develop Reference

JavaScript is the programming language of the Web.

HTML Move Canvas object with onclick - javascript

Related

My page doesn't scale well as soon as I load it in a mobile device

How can I center the logo and center the menu?

How to allow only 1 scroll to work with Javascript?

When I click on next button page number ascending by unknown order.

Spacing between images

Categories

Resources