I'm making a trivia game for a coding bootcamp and I have a main background image then a jumbotron that displays a timer,question,and 4 clickable answers. I want in that jumbotron to be a designated image that is saved to the trivia bank question (it's an object). I can get the image to show but it is over stretched and it takes away the timer/quesitons/buttons. How can I just put it directly in the background of the jumbotrons size and have it stretch to fit in it properly?
Here is my code:
function displayNextQuestion() {
initialTimer = 21;
console.log(questionBank[triviaQuestions[counter]].question);
console.log(questionBank[triviaQuestions[counter]].correctAnswer);
var questionToDisplay = $('<h2>').addClass('question').text(questionBank[triviaQuestions[counter]].question);
var answerButtons = $('<div>').addClass('answers');
var numberOfAnswers = questionBank[triviaQuestions[counter]].answers.length;
for (var i = 0; i < numberOfAnswers; i++) {
var newButton = $('<button>').addClass('answer btn btn-lrg btn-default btn-block').text(questionBank[triviaQuestions[counter]].answers[i])
.data('index', i).on("click", checkAnswer);
answerButtons.append(newButton);
}
$(".jumbotron").empty().append('<img src =' + questionBank[triviaQuestions[counter]].imageUrl + '>');
$('#question').empty().append(questionToDisplay, answerButtons);
// console.log(questionBank[triviaQuestions[counter]].imageUrl);
run();
}
If you can use it as a background-image instead, use background-position in combination with background-size: cover;. How you use background-position depends on the stuff in the image and what parts you want to be sure to display.
body {
background: url('http://eskipaper.com/images/large-2.jpg') no-repeat;
background-size: cover;
background-position: center center;
height: 100vh;
margin: 0;
}
If you're using an image, you can use the object-fit property, but it isn't well supported - http://caniuse.com/#feat=object-fit
body {
margin: 0;
}
img {
object-fit: cover;
height: 100vh;
width: 100%;
display: block;
}
<img src="http://eskipaper.com/images/large-2.jpg">
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TriviaGame</title>
<!-- We link our html to the Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<h1>STAR WARS TRIVIA</h1>
<div class="container">
<div class="jumbotron">
<div class="row">
<p id="timer"></p>
</div>
<div id="question">
</div>
<button class="btn btn-default btn-block" id="start-btn">START</button>
<button class="btn btn-default btn-block" id="reset-btn">RESET</button>
</div>
</div>
<script src="assets/javascript/game.js"></script>
</body>
</html>
#font-face {
font-family: distant-galaxy;
src: url("Distant-Galaxy/DISTGRG_.ttf");
}
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: distant-galaxy;
}
h1 {
color: blue;
text-align: center;
font-size: 100px;
text-shadow: 1px 1px 0 black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 0px 1px 0 black, 1px 0px 0 black, 0px -1px 0 black, -1px 0px 0 black, 4px 4px 3px #000;
opacity: 0.5;
}
.col-md-12 {
text-align: center;
margin: 2%;
}
.col-md-11 {
text-align: left;
margin: 2%;
}
.jumbotron {
padding-top: 5%;
padding-bottom: 15%;
margin-right: 15%;
margin-left: 15%;
opacity: 0.6;
}
.container {
color: grey;
opacity: 0.5;
}
#timer {
font-size: 30px;
text-align: center;
color: black;
}
#question {
color: red;
text-align: center;
font-size: 30px;
}
#start-btn {
text-align: center;
font-size: 50px;
}
#reset-btn {
text-align: center;
font-size: 50px;
}
.btn-block {
text-align: left;
color: blue;
}
Related
I want to make an weather app and I want to let the user to add in the application some weather cards with the city they are interested with. If they no longer want a specific weather card, they can delete it. For now, you can add some empty cards by using the + button.
Below is what I did and how the app looks like.
In the first phase I want the displayed cards to show the city weather information at the current time and with a hover I want the card to expand and display more information about that city such as a 5 day forecast.
I don't know how to stretch a specific card on hover and I'm asking your help with this problem. Thank you!
const displayContent = document.querySelector('.content');
const widget = document.querySelector('.widget');
const addWidget = document.querySelector(".addButton");
console.log(displayContent)
addWidget.addEventListener('click', newWidget);
var cont=0;
function newWidget(){
cont=cont+1;
let newWidget = document.createElement('div');
newWidget.setAttribute('class', 'widget');
newWidget.setAttribute('id', "widget" + cont);
let closeBtn = document.createElement('span');
closeBtn.setAttribute('class', 'remove');
closeBtn.setAttribute('id', 'remove' +cont);
closeBtn.textContent = '✕';
displayContent.appendChild(newWidget);
newWidget.appendChild(closeBtn);
//remove the cards
var close = document.querySelectorAll("span");
for(let i=0 ; i<close.length; i++){
close[i].addEventListener('click', () =>{
close[i].parentElement.remove();
})
}
}
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
:root {
--fontcolor: #313131;
--bgcolor: #FAFAFA;
}
html {
font-family: "Roboto", sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bgcolor);
margin: 0;
color: var(--fontcolor);
transition: background-color 500ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.container {
max-width: 85vw;
margin: 0 auto;
}
header {
display: flex;
margin-bottom: 30px;
font-size: 1.5em;
align-items: center;
justify-content: space-between;
}
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid black;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
}
.addButton {
width: 40px;
height: 36px;
border: 1px solid black;
background: black;
text-align: center;
color: #fff;
border-radius: 0 6px 5px 0;
cursor: pointer;
font-size: 20px;
}
.content {
margin-bottom: 1em;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-auto-rows: minmax(250px, 1fr);
grid-gap: 25px;
}
.widget {
color: white;
display: flex;
flex-direction: column;
padding: 25px;
position: relative;
white-space: normal;
word-wrap: break-word;
transition: background-color 50ms;
background: linear-gradient(130deg, rgba(25,118,210,1) 0%, rgba(63,81,181,1) 100%);
box-shadow: 5px 5px 18px -1px rgb(0 0 0 / 34%);
border-radius: 5px;
}
.remove{
position: absolute;
top: 5px;
right: 12px;
font-size: 22px;
opacity: 0.7;
cursor: pointer;
}
#keyframes append-animate {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0%);
opacity: 1;
}
}
/* animate new box */
.widget {
animation: append-animate .3s linear;
}
<!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">
<title>My Library</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/31c84a9fec.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header class="header">
<h1 id='title'>Weather App</h1>
<div class="control">
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="Add a city">
<button type="submit" class="addButton">+</button>
</div>
</div>
</div>
</header>
<div class="content">
<div class="widget" id="widget0">
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Have you tried using CSS transitions?
div {
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
transition: all 1s;
}
div.h:hover {
width: 150px;
background-color: purple;
}
div.v:hover {
height: 150px;
background-color: purple;
}
<div class="h"></div>
<div class="v"></div>
I'm trying to make the background (only the search bar) to be a backdrop blur background without blurring the whole background image behind it.
I've tried webkit filter: blur & filter: blur, but they both blur the whole body and not just make the transparent background of the search bar blurred.
Note: I'm not using a background image in the code below because I'll embed this code in an iframe, which the background before it will be an image.
EDIT: I have removed the domain name in the ORIGINAL code so it doesn't conflict in search results for that domain name. Thanks everyone for helping me fix this issue! You're amazing!
<html>
<head>
<base target="_blank" />
<base target="_blank" />
<script type="text/javascript">
function submitSearch() {
var siteSearchUrl = "https://*DOMAIN_NAME*/_/search?query="; // Replace with your site's search URL
var query = document.getElementById("search-query-input").value;
var url = siteSearchUrl + query;
if (typeof IE_fix != "undefined") {
// IE8 and lower fix to pass the http referer
var referLink = document.createElement("a");
referLink.href = url;
document.body.appendChild(referLink);
referLink.click();
} else {
window.open(url, "_blank");
} // All other browsers
}
function searchKeyPress(e) {
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13) {
document.getElementById("search-icon").click();
return false;
}
return true;
}
</script>
<link
rel="stylesheet"
type="text/css"
href="https://ssl.gstatic.com/docs/script/css/add-ons.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700"
rel="stylesheet"
/>
<style>
body {
margin: 0;
padding: 14px 6px 0 6px;
background-color: transparent;
font-family: "Roboto", sans-serif;
overflow: hidden;
}
#search-icon {
margin: 4px 4px 4px 10px;
padding: 8px;
height: 24px;
vertical-align: middle;
cursor: pointer;
}
#search-icon:hover {
background: rgba(155, 153, 176, 0.2);
border-radius: 100px;
}
#search-query {
background: inherit;
}
body:before {
background: inherit;
}
#search-query:before {
box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.5);
filter: blur(10px);
}
#search-query {
width: max-content;
margin: 0 auto;
overflow: hidden;
border: 0;
border-radius: 14px;
color: #212121;
font-size: 16px;
line-height: 24px;
transition: 0.4s;
}
#search-query:hover {
color: #212121;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
font-size: 16px;
line-height: 24px;
}
#search-query-input {
width: 60vw;
height: 24px;
font-size: 16px;
font-stretch: normal;
letter-spacing: normal;
line-height: 24px;
border: 0;
color: #000;
background-color: transparent;
cursor: text;
margin-left: -5px;
text-align: start;
vertical-align: middle;
}
#media (max-width: 500px) {
#search-query-input {
width: 80vw;
}
}
#media (min-width: 900px) {
#search-query-input {
width: 60vw;
}
}
</style>
</head>
<body>
<!-- <input type="text" id="query" />
<button id="search" onclick="submitSearch()">Search</button> -->
<div id="search-query">
<img
id="search-icon"
alt="Search"
onclick="submitSearch();"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAADAklEQVR4AezZA6xcQRSA4b92g9q2/VRuw9puVLcxake13Zh1G9W2bds2T42ZzNPeO7Pb5H5/zD17PUMgEAgEAoFAIGxFGMRMlrGTi7zjFZfZwTJmMohCRLkajOMYkkRHGUdNolI8B5EUdpB4okpJViOpbDXFiArpGMcHJIzeMY50RFgB9iIe2ksBIiiGR4jHHhFDhHTlI+JDH+lKBMQmceY/YhZNqExBMn+rAJUIMZMnCOY+EItjxRP9OetoTQZMMtCadYixJ5TAoQyYH1cbiCE5CWxADB0jA85MNp7JHUipnsbTbwqO1OWL4RSIIzUSDKfgF+riQBrOIFrPKENqleEZonWGNFjX0vDPNSUcTQ1HsiXWbUO0hhOu4YjWViwri2gdwYvDiFZ5rJqIaMXgRRyiNRGr7iBKa/BqDaJ0G4vKIVqN8Kqxy5OoL6L0mDR4lUZ/o2UA1sxHlBbhh8WI0jys2Y4odcUPXRCl7VhzDVFqgB8aIErXsUZ/fylr5dnyGGv0R38O/JADUfqMNfpLcHb8kF1/Mf/fT6HnWHMdUWqIHxoiSjexZiui1A0/dEWUtmHNPERpsZUH2WJ3rxKPSIdX6XiMKPXGmvKIVgivQohWJSx6YP11+g5WTUK04vAiBtGaBeDyJDqMF0cQrVpYthnRGkq4hiJau7GuhW/LKiHDskpzrEvDKV8WtkobFrZ24UQ9H5YW44xLi7VwZIpxcbcbKdXNuDUyG2cychQxtJ4YkhPPOsTQJXLiUMmwNjhasQUx9obyOBafzBZTiMoUIguZKUhlQszSRtYHaI5z+pnsT6NxKI5HiMee8xlRGoJDhdiNeOg6ZWmNRHKEdIzlXZj7w/PIDYBEdgQoxmokla2nNL9J5EeAeI4iKWwPXfiXRMcIUJPxHEOS6CTDKYVuTGRH0BViEDNZyk4u8gpBeMMuJtKegujcj2DN1/bnmAgAEIBhIJIZGZHOWAEslPsoyCMgIHxPmAgICAjXIQRQSsh+JSH7vYQ1StvZryW8vy9JkiQdHsFQT60Y7OcAAAAASUVORK5CYII="
/>
<input
type="text"
id="search-query-input"
placeholder="Search"
enterkeyhint="go"
onkeypress="return searchKeyPress(event);"
style="box-shadow: none"
;=""
/>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.sections {
background-image: url(https://images.pexels.com/photos/3293148/pexels-photo-3293148.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-size:100vw;
background-size:cover;
background-repeat:no-repeat;
height: 100vh;
padding-top: 15vh;
}
.search-bar {
border: 1px solid transparent;
width: 300px;
align-items: center;
display: flex;
margin: 0 auto;
padding-left: 2vh;
border-radius: 10px;
transition: 0.5s;
}
.search-bar:hover {
border: 1px solid rgb(142, 141, 141);
backdrop-filter: blur(5px);
}
.search-text {
padding: 4vh 8vh;
background: transparent;
border: none;
height: 100%;
width: 100%;
border-radius: 50px;
font-size: 18px;
color: #424242;
font-weight: 500;
}
.search-text:focus {
outline: none;
}
.fa-search {
color: #fff;
}
<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" />
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/2dba9f6187.js" crossorigin="anonymous"></script>
<title>Blur Background Project</title>
</head>
<body>
<header>
<div class="center">
<div class="sections">
<div class="search-bar">
<i class="fas fa-search"></i>
<input type="text" placeholder="Search" class="search-text" />
</div>
</div>
</div>
</header>
</body>
function submitSearch(){
var siteSearchUrl = 'https://support.yssf.ml/_/search?query='; // Replace with your site's search URL
var query = document.getElementById("search-query-input").value;
var url = siteSearchUrl + query
if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
{
var referLink = document.createElement("a");
referLink.href = url;
document.body.appendChild(referLink);
referLink.click();
}
else { window.open(url,'_blank'); } // All other browsers
}
function searchKeyPress(e){
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13)
{
document.getElementById('search-icon').click();
return false;
}
return true;
}
body {
margin:0;
padding:14px 6px 0 6px;
background-color:transparent;
font-family: 'Roboto', sans-serif;
overflow:hidden;
background: url('https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
background-size:100vw;
background-size:cover;
background-repeat:no-repeat;
}
#search-query{
background: transparent;
width:max-content;
margin:0 auto;
overflow:hidden;
border:0;
border-radius:14px;
color: #212121;
font-size:16px;
line-height:24px;
transition:0.4s;
}
#search-query::before {
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
filter: blur(10px);
}
#search-query:hover {
color: #212121;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
0 3px 1px -2px rgba(0,0,0,0.12),
0 1px 5px 0 rgba(0,0,0,0.2);
font-size:16px;
line-height:24px;
backdrop-filter:blur(3px);
}
#search-query-input {
width:60vw;
height:24px;
font-size:16px;
font-stretch: normal;
letter-spacing: normal;
line-height:24px;
border:0;
color:#000;
background-color:transparent;
cursor:text;
margin-left:-5px;
text-align:start;
vertical-align:middle;
}
#search-query-input:hover{
color:white;
}
#search-icon {
margin: 4px 4px 4px 10px;
padding:8px;
height:24px;
vertical-align:middle;
cursor:pointer;
}
#search-icon:hover {
background: rgba(155,153,176, 0.2);
border-radius: 100px;
}
#search-query-input:hover::placeholder{
color:white;
}
#media (max-width:500px) {
#search-query-input {
width:80vw;
}
}
#media (min-width:900px) {
#search-query-input {
width:60vw;
}
}
<html>
<head>
<base target="_blank">
<base target="_blank">
<link rel="stylesheet" type="text/css" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
</head>
<body>
<!-- <input type="text" id="query" />
<button id="search" onclick="submitSearch()">Search</button> -->
<div id="search-query">
<img id="search-icon" alt="Search" onclick="submitSearch();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAADAklEQVR4AezZA6xcQRSA4b92g9q2/VRuw9puVLcxake13Zh1G9W2bds2T42ZzNPeO7Pb5H5/zD17PUMgEAgEAoFAIGxFGMRMlrGTi7zjFZfZwTJmMohCRLkajOMYkkRHGUdNolI8B5EUdpB4okpJViOpbDXFiArpGMcHJIzeMY50RFgB9iIe2ksBIiiGR4jHHhFDhHTlI+JDH+lKBMQmceY/YhZNqExBMn+rAJUIMZMnCOY+EItjxRP9OetoTQZMMtCadYixJ5TAoQyYH1cbiCE5CWxADB0jA85MNp7JHUipnsbTbwqO1OWL4RSIIzUSDKfgF+riQBrOIFrPKENqleEZonWGNFjX0vDPNSUcTQ1HsiXWbUO0hhOu4YjWViwri2gdwYvDiFZ5rJqIaMXgRRyiNRGr7iBKa/BqDaJ0G4vKIVqN8Kqxy5OoL6L0mDR4lUZ/o2UA1sxHlBbhh8WI0jys2Y4odcUPXRCl7VhzDVFqgB8aIErXsUZ/fylr5dnyGGv0R38O/JADUfqMNfpLcHb8kF1/Mf/fT6HnWHMdUWqIHxoiSjexZiui1A0/dEWUtmHNPERpsZUH2WJ3rxKPSIdX6XiMKPXGmvKIVgivQohWJSx6YP11+g5WTUK04vAiBtGaBeDyJDqMF0cQrVpYthnRGkq4hiJau7GuhW/LKiHDskpzrEvDKV8WtkobFrZ24UQ9H5YW44xLi7VwZIpxcbcbKdXNuDUyG2cychQxtJ4YkhPPOsTQJXLiUMmwNjhasQUx9obyOBafzBZTiMoUIguZKUhlQszSRtYHaI5z+pnsT6NxKI5HiMee8xlRGoJDhdiNeOg6ZWmNRHKEdIzlXZj7w/PIDYBEdgQoxmokla2nNL9J5EeAeI4iKWwPXfiXRMcIUJPxHEOS6CTDKYVuTGRH0BViEDNZyk4u8gpBeMMuJtKegujcj2DN1/bnmAgAEIBhIJIZGZHOWAEslPsoyCMgIHxPmAgICAjXIQRQSsh+JSH7vYQ1StvZryW8vy9JkiQdHsFQT60Y7OcAAAAASUVORK5CYII=">
<input type="text" id="search-query-input" placeholder="Search" enterkeyhint="go" onkeypress="return searchKeyPress(event);" style="box-shadow:none" ;="">
</div>
</body>
Use CSS filter on any page element. This may require you to duplicate the existing background into the #search-query Div (so that there is an image present to be blurred, it then appears like a blur of the original image behind it) but also try it with no background as a test. It's been a while since I used it but you may find that the blur applies to everything behind it regardless.
#search-query{
filter: blur(10px);
}
I am working on a project and i added an onlclick function in 3 elements in my code but none of them works because that element is not a button or an anchor tag i guess but i have to do something when that area is clicked here is the image:-
This is the image
I want to either click on the white part of the circle or the the colourfull part of the circle , right now i am trying to click on the colorfull part but i get nothing but when i put an anchor tag in one of the heading and then use onclick on it then it works but in the circle there is no text on which i can add anchor tag i also tried to use change the div to button type of class items and it became clickable but the java script still not works .
Here is the code :-
'HTML'
<!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">
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow&family=Barlow+Condensed&family=Barlow+Semi+Condensed&display=swap" rel="stylesheet">
<title>Rock Paper Scisccor</title>
</head>
<body>
<div class="scoreboard">
<div class="name">
<ul>
<li id="rock"><strong> ROCK </strong> </li>
<li id="Paper"><strong> PAPER </strong> </li>
<li id="Scissors"><strong> SCISSORS </strong> </li>
</ul>
</div>
<div class="score">
<div id="score_name"><strong>SCORE</strong></div>
<div id="score_value"><strong>12</strong></div>
</div>
</div>
<div class="main-game">
<div class="inside_main">
<zz class="items" id="rock_1" onclick="rock_2">
<div class="inside_color">
<img src="rock-paper-scissors-master\rock-paper-scissors-master\images\icon-rock.svg" alt="">
</div>
</div>
<div class="items" id="paper_1" onclick="paper_2">
<div class="inside_color">
<img src="rock-paper-scissors-master\rock-paper-scissors-master\images\icon-paper.svg" alt="">
</div>
</div>
<div class="items" id="scissors_1" onclick="scissors_2">
<div class="inside_color">
<img src="rock-paper-scissors-master\rock-paper-scissors-master\images\icon-scissors.svg" alt="">
</div>
</div>
</div>
</div>
<script>
function rock_2(){
console.log('k')
document.getElementById('rock').innerHTML='k'
}
function paper_2(){
console.log('k')
}
function scissors_2(){
console.log('k')
}
</script>
</body>
</html>
CSS
body{
margin: 2px 2px;
/* font-family: 'Barlow', sans-serif; */
/* font-family: 'Barlow Condensed', sans-serif; */
font-family: 'Barlow Semi Condensed', sans-serif;
background-image: radial-gradient( hsl(214, 47%, 23%) , hsl(237, 49%, 15%));
background-repeat: no-repeat;
overflow: hidden;
height: 100vh;
}
.scoreboard{
width: 40%;
height: 10rem;
display: flex;
gap: 30%;
border: 2px solid grey;
margin: auto;
border-radius: 10px;
border-width: 3px;
margin-top: 3%;
}
.name{
color: white;
font-size: 2.7rem;
/* border: 2px solid white; */
margin: 15px;
width: 50%;
line-height: 2.4rem;
align-self: center;
}
.name ul{
list-style-type: none;
padding: 0px 0px;
margin: 0px ;
/* border: 2px solid yellow; */
}
.score{
display: flex;
/* align-self: center; */
flex-direction: column;
border: 2px solid white;
background-color: white;
border-radius: 5px;
/* padding: 7%; */
width: 40%;
/* height: 40vh; */
margin: 3%;
}
#score_name{
display: flex;
align-self: center;
padding: 5px;
color: hsl(229, 64%, 46%);
letter-spacing: .2rem;
}
#score_value{
color: hsl(229, 25%, 31%);
font-size: 4rem;
display: flex;
align-self: center;
}
.main-game{
margin-top: 4%;
}
/* .inside_main ::after{
content: '';
background: url("rock-paper-scissors-master/rock-paper-scissors-master/images/bg-triangle.svg");
background-repeat: no-repeat;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
} */
.inside_main{
display: flex;
/* border: 2px solid whitesmoke; */
width: fit-content;
margin: auto;
height: 60vh;
}
.items{
height: 225px;
width: 225px;
border-radius: 50%;
display: grid;
/* background-color: white; */
}
.items:hover::before{
content: '';
display: flex;
position: absolute;
justify-self: center;
align-self: center;
height: 285px;
width: 285px;
opacity: 10%;
z-index: -1;
background-color: whitesmoke;
border-radius: 50%;
}
.inside_color img{
display: grid;
align-self: center;
justify-self: center;
}
.inside_color{
display: grid;
justify-self: center;
align-self: center;
height: 182px;
width: 182px;
background-color: whitesmoke;
border-radius: 50%;
}
#rock_1{
background: linear-gradient(to bottom, hsl(349, 71%, 52%) , hsl(349, 70%, 56%));
}
#paper_1{
background: linear-gradient(to bottom, hsl(230, 89%, 62%) , hsl(230, 89%, 65%));
position: relative;
top: 50%;
/* left: 25%; */
}
#scissors_1{
background: linear-gradient(to bottom, hsl(39, 89%, 49%) , hsl(40, 84%, 53%));
}
When calling a function in onclick, you must specify that it is a function.
Use () at the end.
Example:
<div class="items" id="paper_1" onclick="paper_2()">
you should add the brackets
<div class="items" id="rock_1" onclick="rock_2()">
<div class="items" id="paper_1" onclick="paper_2()">
<div class="items" id="scissors_1" onclick="scissors_2()">
Where you have inline onclick should be:
onclick="rock_2()"
with ()
add onclick ="rock_2()" instead of "rock_2"
You need to specify that a function is called by appending () at the end.
<div class="items" id="rock_1" onclick="rock_2()">
<div class="items" id="paper_1" onclick="paper_2()">
<div class="items" id="scissors_1" onclick="scissors_2()">
Also I guess you have missed a div in the line
<zz class="items" id="rock_1" onclick="rock_2">
Replace zz with div
I made an options.html which is basically my popup
and when you click #clickme1 it triggers an event at /popup/1.js which is
function hello() {
chrome.tabs.executeScript({
file: '/alert/1.js'
});
}
document.getElementById('clickme1').addEventListener('click', hello);
and my / alert / 1. js looks like this:
alert("Background set!");
var body = document.getElementsByTagName('body')[0];
body.style.backgroundImage = 'url(https://www.toptal.com/designers/subtlepatterns/patterns/curls.png)';
body {
background: #232526;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #414345, #232526);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #414345, #232526);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
width: 410px;
}
p {
color: white;
text-shadow: 2px 2px #000;
text-align: center;
}
.myDiv {
color: red;
font-weight: bold;
text-shadow: 2px 2px #000;
text-align: center;
}
h2 {
color: gray;
text-shadow: 2px 2px #000;
text-align: center;
}
a {
color: yellow;
text-align: center;
}
button {
color: white;
}
#clickme1 {
background-image: url(https://www.toptal.com/designers/subtlepatterns/patterns/curls.png);
background-repeat: no-repeat;
background-position: 50% 50%;
display: inline-block;
margin-right: 100%;
padding: 0;
height: 134px;
margin: 0;
vertical-align: top;
width: 134px;
}
#clickme2 {
background-image: url(https://66.media.tumblr.com/3cca60810de972cc08c4a5ac40b690df/tumblr_inline_nk1lmq0ZgB1s9yrmw.png);
background-repeat: no-repeat;
background-position: 50% 50%;
display: inline-block;
margin-right: 100%;
height: 134px;
padding: 0;
margin: 0;
vertical-align: top;
width: 134px;
}
#clickme3 {
background-image: url(https://78.media.tumblr.com/04ff549b92bb99db8ad725a83e288030/tumblr_inline_n258pty5wY1qhwjx8.gif);
background-repeat: no-repeat;
background-position: 50% 50%;
display: inline-block;
margin-right: 100%;
height: 134px;
padding: 0;
margin: 0;
vertical-align: top;
width: 134px;
}
#clickme4 {
background-image: url(http://brainlava.com/admin/assets/SP2013BGPattern.png);
background-repeat: no-repeat;
background-position: 50% 50%;
display: inline-block;
margin-right: 100%;
height: 134px;
padding: 0;
margin: 0;
vertical-align: top;
width: 134px;
}
#clickme5 {
background-image: url(https://background-tiles.com/overview/black/textures/large/5013.png);
background-repeat: no-repeat;
background-position: 50% 50%;
display: inline-block;
margin-right: 100%;
height: 134px;
padding: 0;
margin: 0;
vertical-align: top;
width: 134px;
}
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Dark Theme Options</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<body>
<p>This extension will simply change how CryptoKitties look</p>
<p>It won't do anything with your account</p>
<div style="display: flex; justify-content: center;">
<img src="/icons/moon128.png" style="width: 128px; height: 128px;" />
</div>
<h2>Privacy Policy</h2>
<p>This extension does not store/save/transmit any data in/out of your computer. It only changes how CryptoKitties is looking</p>
<p>https://kittyscripts.weebly.com</p>
<p>czukorhaver#gmail.com</p>
<div class="myDiv">
<p2>Open this page and then click the background down below that you want to set<br><br></p2>
</div>
<!--First background-->
<button id="clickme1"></button>
<script type="text/javascript" src="/popup/1.js"></script>
<!--Second background-->
<button id="clickme2"></button>
<script type="text/javascript" src="/popup/2.js"></script>
<!--Third background-->
<button id="clickme3"></button>
<script type="text/javascript" src="/popup/3.js"></script>
<!--Fourth background-->
<button id="clickme4"></button>
<script type="text/javascript" src="/popup/4.js"></script>
<!--Fifth background-->
<button id="clickme5"></button>
<script type="text/javascript" src="/popup/5.js"></script>
</body>
</html>
If you click on clickme2 it does the same, there's just a different image in alert.js.
It all works perfectly, but when you refresh the page this page applies the background image to, the background image disappears and its the default white one again. Is there any way to somehow save the chosen image to localstorage and automatically apply that when the user is refreshing the page?
Thanks for the help in advance!
Make one js file for our popup window, that just saves the background choice.
In your popup.js do something like this:
//Get the desired background, let's just say you have prefixed options
document.getElementById('background1').addEventListener('click', function (event) {
chrome.storage.local.set({background:"background1.png"});
}
Then make a javascript file that runs on every page of the desired website, like this (https://www.google.com/*)
chrome.storage.local.get([background], function (result) {
document.body.style = "background: URL(chrome-extension://"+chrome.runtime.id+"/"+background+";";
});
Hope that helps.
I'm working in codepen and having an issue where any new element overwrites (or more accurately, "grafts to") my header. I double-checked for simple things like not closing the row div and such but that didn't work. Also, the new element will display a white background over my html background and when I've tried using rgba to change the opacity it hasn't helped with anything.
So,
1. How can I "unlink" subsequent elements from my header rows?
2. How can I prevent the background of subsequent elements from (visibly) overlaying the html background?
Here's the codepen
HTML
<link href="css/bootstrap.css" rel="stylesheet"type="text/css"/>
<html>
<head class="row">
<div class="col-md-4 top-bar top-bar-left">
IH
</div>
<div class="col-md-4 top-bar top-bar-mid text-center">
<p>Isaak Hyde Web Design</p>
</div>
<div class="col-md-4 top-bar top-bar-right">
Bio
Projects
Contact
</div>
</div>
</head>
<body>
<div class="row bio-info">
</div>
</body>
</html>
CSS
html {
background: url(http://www.pixelstalk.net/wp-
content/uploads/2016/04/Black- background-wallpapers-pattern-light-
texture.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.top-bar{
font-family: Georgia;
color: blue;
background: gold;
border-radius: 50px;
}
.top-bar-left {
font-size: 24px;
padding: 5px 0px 0px 30px;
}
.top-bar-mid {
font-size: 30px;
padding: 5px 0px 1px 0px;
}
.top-bar-right {
font-size: 24px;
padding: 5px 0px 0px 190px;
word-spacing: 0.5em;
}
.bio-info {
margin-top: 50px;
}'
The .bio-info stuff was just to illustrate what I meant. Thank you for any help.
You are mixing up header with head, you got a header outside the body tag, a superfluous closing </div> in there and and some other basic stuff wrong
Here is a corrected version:
https://codepen.io/anon/pen/XpKOVm
You got your basics wrong for html as well as bootstrap.
First <html> encloses both <head> and <body> in that order. You put <header> in body not `.
In bootstrap you always enclose a .row in a .container. because .row has negative margin and if you do not enclose it in a .container then it makes content flow out of user screen and horizontal bar appears.
Here's a working fiddle.
html,body{
background: url(http://www.pixelstalk.net/wp-content/uploads/2016/04/Black-background-wallpapers-pattern-light-texture.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.top-bar{
font-family: Georgia;
color: blue;
background: gold;
border-radius: 50px;
}
.top-bar-left {
font-size: 24px;
padding: 5px 0px 0px 30px;
}
.top-bar-mid {
font-size: 30px;
padding: 5px 0px 1px 0px;
}
.top-bar-right {
font-size: 24px;
padding: 5px 0px 0px 190px;
word-spacing: 0.5em;
}
.bio-info {
margin-top: 50px;
color:white;
}
.container,.row{
background:transparent;
}
.container{
width:100%;
margin:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 top-bar top-bar-left">
IH
</div>
<div class="col-md-4 top-bar top-bar-mid text-center">
<p>Isaak Hyde Web Design</p>
</div>
<div class="col-md-4 top-bar top-bar-right">
Bio
Projects
Contact
</div>
</div>
</div>
<div class="container bio-info">
<h1>See this works</h1>
</div>
</body>
</html>
Many tweaks, enclosed everything in body, switched head to header since the first one is for meta-tags, stylesheets, title, etc. added a container-fluid to your header row. Added a fixed height to your header components and line-height to vertically center text as well.
In col-md viewports would be:
Snippet below: (external JSFiddle for resizing here)
html {
background: url(http://www.pixelstalk.net/wp-content/uploads/2016/04/Black-background-wallpapers-pattern-light-texture.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
header {
position: fixed;
width: 100%;
}
.top-bar {
font-family: Georgia;
color: blue;
background: gold;
border-radius: 50px;
text-align: center;
}
.top-bar-left {
font-size: 22px;
text-align: center;
height: 41px;
line-height: 41px;
/* padding: 5px 0px 0px 30px; */
}
.top-bar-mid {
font-size: 22px;
height: 41px;
line-height: 41px;
/* padding: 5px 0px 1px 0px; */
}
.top-bar-right {
font-size: 22px;
line-height: 41px;
height: 41px;
/* padding: 5px 0px 0px 10px; */
word-spacing: 0.5em;
}
.bio-info {
/* margin-top: 50px; */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<header class="container-fluid">
<div class="row">
<div class="col-md-4 top-bar top-bar-left">
IH
</div>
<div class="col-md-4 top-bar top-bar-mid text-center">
<p>Isaak Hyde Web Design</p>
</div>
<div class="col-md-4 top-bar top-bar-right">
Bio
Projects
Contact
</div>
</div>
</header>
<div class="row bio-info"></div>
</body>