I have a Popup image with a close button that its not working
could someone check the issue please.
jQuery(document).ready(function($) {
var $modal_popup = '9a3a3fc18bd438fca6433562e193b511';
var $only_once = '1';
var $s3waas_modal_cookie = getCookie('s3waas_modal_cookie');
if ($modal_popup != $s3waas_modal_cookie) {
deleteCookie('s3waas_modal_cookie');
$s3waas_modal_cookie = null;
}
if (!$only_once) {
$('.modalbox-container').removeClass('hide');
$('html,body').css('overflow', 'hidden');
$('.modalbox-banner').focus();
} else {
if ($s3waas_modal_cookie == null) {
$('.modalbox-container').removeClass('hide');
$('html,body').css('overflow', 'hidden');
$('.modalbox-banner').focus();
}
}
$("#s3wassModalpopupClose").click(function() {
if ($only_once) {
let nonce = $(this).attr('data-nonce');
$.post(ajaxurl, {
nonce: nonce,
action: 's3waas_modal_cookie'
}, function() {
return true
});
}
$(".modalbox-container").hide();
$('.skip-to-content').focus();
$('html,body').css('overflow', '');
});
$(document).keyup(function(e) {
if (e.key === "Escape") { // escape key maps to keycode `27`
if ($(".modalbox-container").length > 0) {
$("#s3wassModalpopupClose").trigger('click');
}
}
});
})
.modalbox-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
background-color: rgba(0, 0, 0, 0.75);
overflow-y: auto;
display: inline-grid;
align-items: center;
z-index: 999999;
}
.modalbox-container .modal-box {
display: inline-block;
max-width: 1000px;
position: relative;
margin: 0 auto;
}
.modalbox-container .modal-box img {
max-width: 100%;
border: 2px solid #fff;
border-radius: 5px 0 5px 5px;
box-shadow: 0 0 30px 0 #000;
}
.modalbox-container .close-popup {
position: absolute;
top: 0;
right: -40px;
width: 40px;
height: 40px;
line-height: 40px;
background: #fff;
text-decoration: none;
font-size: 40px;
color: #000;
border-radius: 0 5px 5px 0;
}
.contrast .modalbox-container .close-popup {
background: #ff0;
}
#media (max-width: 800px) {
.modalbox-container .modal-box {
margin: 45px;
}
.modalbox-container .modal-box img {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>New Page 1</title>
</head>
<body class="home page-template-default page page-id-26984 mva7-thc-activetheme-district-theme lang-en wpb-js-composer js-comp-ver-5.4.7 vc_responsive">
<div class="modalbox-container hide">
<div class="modal-box">
<a href="#" class="modalbox-banner" title="Tamil poster">
<img src="https://cdn.s3waas.gov.in/s38fe0093bb30d6f8c31474bd0764e6ac0/uploads/2021/05/2021051855.jpg" title="Tamil poster" alt="popoup">
</a>
×
</div>
</div>
</body>
</html>
Related
This image slide show is positioned in the middle on my page how do I make it so that it's in the middle but slightly higher? The things I've tried don't currently work which includes my css code. the top: xx%; thing doesn't work either. As you can see the images are actually behind the question container and I want it so that it is above the question container (not in front).
html:
<div class="container2">
<img name="slide">
css
.slide {
width: auto;
max-width: 1%;
height: auto;
max-height: 30%;
position: absolute;
z-index: 1;
top: 50%;
}
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const image1 = document.getElementById('image1')
const answerButtonsElement = document.getElementById('answer-buttons')
const endbutton = document.getElementById('end-btn')
const trybutton = document.getElementById('try-btn')
const startmsgs = document.getElementById('startmsg')
var i = 0;
var images = [];
images[0] = "http://lorempixel.com/400/200/animals";
images[1] = "http://lorempixel.com/400/200/sports";
images[2] = "http://lorempixel.com/400/200/food";
images[3] = "http://lorempixel.com/400/200/people";
function changeImg(){
document.slide.src = images[i];
// Check If Index Is Under Max
if(i < images.length - 1){
// Add 1 to Index
i++;
} else {
// Reset Back To O
i = 0;
}
window.onload=changeImg;
}
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
currentQuestionIndex++
setNextQuestion()
changeImg()
})
endbutton.addEventListener('click', () => {
window.top.close()
})
trybutton.addEventListener('click', setNextQuestion)
function startGame() {
startButton.classList.add('hide')
startmsgs.classList.add('hide')
shuffledQuestions = questions.slice()
questionContainerElement.classList.remove('hide')
currentQuestionIndex = 0
setNextQuestion()
}
function setNextQuestion() {
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
questionElement.innerText = question.question
question.answers.forEach(answer => {
const button = document.createElement('button')
button.innerText = answer.text
button.classList.add('btn')
if (answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', selectAnswer)
answerButtonsElement.appendChild(button)
})
}
function resetState() {
clearStatusClass(document.body)
nextButton.classList.add('hide')
while (answerButtonsElement.firstChild) {
answerButtonsElement.removeChild(answerButtonsElement.firstChild)
}
trybutton.classList.add('hide')
}
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
setStatusClass(selectedButton, correct);
if(correct){
if (shuffledQuestions.length > currentQuestionIndex + 1) {
nextButton.classList.remove('hide')
} else {
endbutton.classList.remove('hide')
}
} else{
trybutton.classList.remove('hide')
}
}
function setStatusClass(element, correct) {
clearStatusClass(element)
if (correct) {
element.classList.add('correct')
}
else {
element.classList.add('wrong')
}
}
function clearStatusClass(element) {
element.classList.remove('correct')
element.classList.remove('wrong')
}
const questions = [
{
question: 'Are you excited to learn about the immune system?',
answers: [
{ text: 'Yes', correct: true },
{ text: 'YES!!!', correct: true },
{ text: 'No', correct: false },
{ text: 'YES!!!!!!!', correct: true }
]
},
{
question: 'Our immune system protects from the thousands of different viruses we encounter daily! Without it, a simple paper cut could mean death. So to demonstrate how the immune system functions to protect us from bacterias, viruses and foreign bodies, we start our journey with a paper cut!',
answers: [
{ text: 'I am exicted!', correct: true },
]
}
]
*, *::before, *::after {
box-sizing: border-box;
font-family: cursive,
'Times New Roman', Times, serif
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
/* background-color: #b61924; */
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
z-index: 1;
}
:root {
--hue-neutral: 200;
--hue-wrong: 0;
--hue-correct: 145;
}
body {
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: hsl(var(--hue), 100%, 20%);
}
body.correct {
--hue: var(--hue-correct);
}
body.wrong {
--hue: 0;
}
.container {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
z-index: 2;
position: absolute;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin: 20px 0;
}
.btn {
--hue: var(--hue-neutral);
border: 1px solid hsl(var(--hue), 100%, 30%);
background-color: hsl(var(--hue), 100%, 50%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
}
.btn:hover {
border-color: black;
}
.btn.correct {
--hue: var(--hue-correct);
color: black;
}
.btn.wrong {
--hue: var(--hue-wrong);
}
.next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
align-items: flex-end;
--hue: 245;
}
.start-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.end-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.try-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.container1 {
display: flex;
justify-content: center;
align-items: center;
font-family: Arial;
font-size: xx-large;
padding: 10px 10px;
}
.slide {
width: auto;
max-width: 1%;
height: auto;
max-height: 30%;
position: absolute;
z-index: 1;
top: 50%;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
.wrapper {
position: absolute;
top: 0px;
right: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<script defer src="script.js"></script>
<title>Quiz App</title>
</head>
<body>
</div>
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="container1">
<div id="startmsgcontainer" class="hide"></div>
<div id="startmsg">Adventure Into The Human Immune System</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start!</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
<button id="end-btn" class="end-btn btn hide">End (this will close the current tab)</button>
<button id="try-btn" class="try-btn btn hide">Try again!</button>
</div>
</div>
<div class="container2">
<img name="slide">
</div>
<div class="wrapper">
<img src="img/uni.png" alt="image">
</div>
</div>
<div id="particles-js"></div>
<script src="particles.js"></script>
<script src="app.js"></script>
<script src="slide.js"></script>
</body>
</html>
If I've understood what you want correctly, you'd need to add this to .slide:
transform: translateY(-50%)
top: 50% will put the top of the slider in the middle of the screen so this will push it back up based on the height of the slider.
Edit:
Based on your new code you could do the same thing on .container. Or you could use
margin-top: -100px
or
margin-bottom: 100px
or
position: relative;
top: -100px;
You can try:
Css-
Margin-top: -x;
And add !important
I need to position white container with the "hello" to be above the main question container... right now the "hello" container is to the side of the main question container if you run the code snippet below. How do I do this? I don't know how to add more details so don't bother reading this... I'm just trying to fill in more words so I can publish this question.
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const image1 = document.getElementById('image1')
const answerButtonsElement = document.getElementById('answer-buttons')
const startwords = document.getElementById('startmsg')
const endbutton = document.getElementById('end-btn')
const trybutton = document.getElementById('try-btn')
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
currentQuestionIndex++
setNextQuestion()
})
endbutton.addEventListener('click', () => {
window.top.close()
})
trybutton.addEventListener('click', setNextQuestion)
function showwords (startwords) {
questionElement.innerText = startwords.startwords
}
function startGame() {
startButton.classList.add('hide')
startwords.classList.add('hide')
shuffledQuestions = questions.slice()
questionContainerElement.classList.remove('hide')
currentQuestionIndex = 0
setNextQuestion()
}
function setNextQuestion() {
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
questionElement.innerText = question.question
question.answers.forEach(answer => {
const button = document.createElement('button')
button.innerText = answer.text
button.classList.add('btn')
if (answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', selectAnswer)
answerButtonsElement.appendChild(button)
})
}
function resetState() {
clearStatusClass(document.body)
nextButton.classList.add('hide')
while (answerButtonsElement.firstChild) {
answerButtonsElement.removeChild(answerButtonsElement.firstChild)
}
trybutton.classList.add('hide')
}
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
if(correct){
if (shuffledQuestions.length > currentQuestionIndex + 1) {
nextButton.classList.remove('hide')
} else {
endbutton.classList.remove('hide')
}
} else{
trybutton.classList.remove('hide')
}
}
function setStatusClass(element, correct) {
clearStatusClass(element)
if (correct) {
element.classList.add('correct')
} else {
element.classList.add('wrong')
}
}
function clearStatusClass(element) {
element.classList.remove('correct')
element.classList.remove('wrong')
}
function blank() {
if (question == '') {
image1.classList.remove('hide')
}
}
const questions = [
{
question: 'What is 4+2?',
answers: [
{ text: '1', correct: false },
{ text: '2', correct: false },
{ text: '3', correct: false },
{ text: '6', correct: true }
]
},
{
question: 'What is 4 * 2?',
answers: [
{ text: '6', correct: false },
{ text: '8', correct: true }
]
},
]
*, *::before, *::after {
box-sizing: border-box;
font-family: cursive,
'Times New Roman', Times, serif
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
/* background-color: #b61924; */
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
z-index: 1;
}
:root {
--hue-neutral: 200;
--hue-wrong: 0;
--hue-correct: 145;
}
body {
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: hsl(var(--hue), 100%, 20%);
}
body.correct {
--hue: var(--hue-correct);
}
body.wrong {
--hue: 0;
}
.container {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
z-index: 2;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin: 20px 0;
}
.btn {
--hue: var(--hue-neutral);
border: 1px solid hsl(var(--hue), 100%, 30%);
background-color: hsl(var(--hue), 100%, 50%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
}
.btn:hover {
border-color: black;
}
.btn.correct {
--hue: var(--hue-correct);
color: black;
}
.btn.wrong {
--hue: var(--hue-wrong);
}
.next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
align-items: flex-end;
--hue: 245;
}
.start-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.end-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.try-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.container1 {
display: flex;
justify-content: center;
align-items: center;
font-family: Arial;
font-size: xx-large;
padding: 10px 10px;
}
.container2 {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
.wrapper {
position: absolute;
top: 0px;
right: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<script defer src="script.js"></script>
<title>Quiz App</title>
</head>
<body>
</div>
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="container1">
<div id="startmsgcontainer" class="hide"></div>
<div id="startmsg">Adventure Into The Human Immune System</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start!</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
<button id="end-btn" class="end-btn btn hide">End (this will close the current tab)</button>
<button id="try-btn" class="try-btn btn hide">Try again!</button>
</div>
</div>
<div class="wrapper">
<img src="img/uni.png" alt="image">
</div>
<div class="container2">
<div id="imgcontainer">hello</div>
<div id="image1" class="hide">
<img src="img/wantedvirus.png" alt="image1">
</div>
</div>
</div>
<div id="particles-js"></div>
<script src="particles.js"></script>
<script src="app.js"></script>
</body>
</html>
just reposition in the html container2
var startButton = document.getElementById('start-btn');
const questions = [
{
question: 'What is 4+2?',
answers: [
{ text: '1', correct: false },
{ text: '2', correct: false },
{ text: '3', correct: false },
{ text: '6', correct: true }
]
},
{
question: 'What is 4 * 2?',
answers: [
{ text: '6', correct: false },
{ text: '8', correct: true }
]
},
]
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const image1 = document.getElementById('image1')
const answerButtonsElement = document.getElementById('answer-buttons')
const startwords = document.getElementById('startmsg')
const endbutton = document.getElementById('end-btn')
const trybutton = document.getElementById('try-btn')
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
currentQuestionIndex++
setNextQuestion()
})
endbutton.addEventListener('click', () => {
window.top.close()
})
trybutton.addEventListener('click', setNextQuestion)
function showwords (startwords) {
questionElement.innerText = startwords.startwords
}
function startGame() {
console.log('hello');
startButton.classList.add('hide')
startwords.classList.add('hide')
shuffledQuestions = questions.slice()
questionContainerElement.classList.remove('hide')
currentQuestionIndex = 0
setNextQuestion()
}
function setNextQuestion() {
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
questionElement.innerText = question.question
question.answers.forEach(answer => {
const button = document.createElement('button')
button.innerText = answer.text
button.classList.add('btn')
if (answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', selectAnswer)
answerButtonsElement.appendChild(button)
})
}
function resetState() {
clearStatusClass(document.body)
nextButton.classList.add('hide')
while (answerButtonsElement.firstChild) {
answerButtonsElement.removeChild(answerButtonsElement.firstChild)
}
trybutton.classList.add('hide')
}
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
if(correct){
if (shuffledQuestions.length > currentQuestionIndex + 1) {
nextButton.classList.remove('hide')
} else {
endbutton.classList.remove('hide')
}
} else{
trybutton.classList.remove('hide')
}
}
function setStatusClass(element, correct) {
clearStatusClass(element)
if (correct) {
element.classList.add('correct')
} else {
element.classList.add('wrong')
}
}
function clearStatusClass(element) {
element.classList.remove('correct')
element.classList.remove('wrong')
}
function blank() {
if (question == '') {
image1.classList.remove('hide')
}
}
*, *::before, *::after {
box-sizing: border-box;
font-family: cursive,
'Times New Roman', Times, serif
}
#particles-js {
position: relative;
width: 100%;
height: 100%;
/* background-color: #b61924; */
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
z-index: 1;
}
:root {
--hue-neutral: 200;
--hue-wrong: 0;
--hue-correct: 145;
}
body {
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: hsl(var(--hue), 100%, 20%);
}
body.correct {
--hue: var(--hue-correct);
}
body.wrong {
--hue: 0;
}
.container {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
z-index: 2;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin: 20px 0;
}
.btn {
--hue: var(--hue-neutral);
border: 1px solid hsl(var(--hue), 100%, 30%);
background-color: hsl(var(--hue), 100%, 50%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
}
.btn:hover {
border-color: black;
}
.btn.correct {
--hue: var(--hue-correct);
color: black;
}
.btn.wrong {
--hue: var(--hue-wrong);
}
.next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
align-items: flex-end;
--hue: 245;
}
.start-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.end-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.try-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.container1 {
display: flex;
justify-content: center;
align-items: center;
font-family: Arial;
font-size: xx-large;
padding: 10px 10px;
}
.container2 {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
.wrapper {
position: absolute;
top: 0px;
right: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--<link rel="stylesheet" href="styles.css">
<script defer src="script.js"></script> -->
<title>Quiz App</title>
</head>
<body>
<div>
<div class="container2">
<div id="imgcontainer">hello</div>
<div id="image1" class="hide">
<!--<img src="img/wantedvirus.png" alt="image1">-->
</div>
</div>
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="container1">
<div id="startmsgcontainer" class="hide"></div>
<div id="startmsg">Adventure Into The Human Immune System</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start!</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
<button id="end-btn" class="end-btn btn hide">End (this will close the current tab)</button>
<button id="try-btn" class="try-btn btn hide">Try again!</button>
</div>
</div>
<div class="wrapper">
<!--<img src="img/uni.png" alt="image">-->
</div>
</div>
<div id="particles-js"></div>
<!-- <script src="particles.js"></script>
<script src="app.js"></script>-->
</body>
</html>
EDIT:
For your updated Question do this:
Add font-size: 0.8em; to
*, *::before, *::after {
box-sizing: border-box;
font-family: cursive,
'Times New Roman', Times, serif
font-size: 0.8em;
}
and top:20%; position:absolute; to .container2
.container2 {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
top:20%;
position:absolute;
}
Example:
https://codepen.io/pr0cz/pen/zYrevRm
Codepen
You can add position: relative; to container(that makes children with position absolute to not get out of the container) and to container2 add this this lines to css:
position: absolute;
margin: auto;
z-index: 3;
position: absolute; let it go over other div.
margin: auto; makes it positioned to the center of the parent div.
z-index: 3; to make it appear over the other divs.
I need a custom combo box. So, I implemented with ul. The problem is I can't get combo box list opens on top by clicking the button. While showing ul, it moves button to bottom of the webpage.
Code:
ul{
width: 100px;
background-color: rgb(224, 224, 224);
border-radius: 4px;
border: 1px solid black;
padding: 0;
margin: 0;
}
ul li{
list-style: none;
cursor: pointer;
padding: 4px 10px;
}
li:hover{
background-color: white;
}
div{
width: 100%;
height: 40px;
background-color: bisque;
}
section{
height: 400px;
background-color: #525252;
}
button{
width: 100px;
height: 100%;
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<p>Some content</p>
</section>
<div>
<ul>
<li>Parrot</li>
<li>Dog</li>
<li>Cat</li>
<li>Squirrel</li>
<li>Otter</li>
<li>Cow</li>
<li>Goat</li>
<li>Finch</li>
</ul>
<button onclick="showPop()">Pet</button>
</div>
<script>
let ul = document.getElementsByTagName('ul')[0]
onload = function(){
ul.style.display = 'none'
}
function showPop(){
if(ul.style.display == 'none'){
ul.style.display = 'block'
}else{
ul.style.display = 'none'
}
}
</script>
</body>
</html>
Here, I want to keep the ul inside the body.div. I just want to make it pop up like combo box with custom position. Please refer attached images.
Current Design:
I want it be like:
How can I make it with CSS? Thank you all in advance...
Try this:
ul{
width: 100px;
background-color: rgb(224, 224, 224);
border-radius: 4px;
border: 1px solid black;
padding: 0;
margin: 0;
position: absolute;
bottom: 40px;
z-index: 9;
}
ul li{
list-style: none;
cursor: pointer;
padding: 4px 10px;
}
li:hover{
background-color: white;
}
div{
width: 100%;
height: 40px;
background-color: bisque;
position: relative;
}
section{
height: 400px;
background-color: #525252;
}
button{
width: 100px;
height: 100%;
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<p>Some content</p>
</section>
<div>
<ul>
<li>Parrot</li>
<li>Dog</li>
<li>Cat</li>
<li>Squirrel</li>
<li>Otter</li>
<li>Cow</li>
<li>Goat</li>
<li>Finch</li>
</ul>
<button onclick="showPop()">Pet</button>
</div>
<script>
let ul = document.getElementsByTagName('ul')[0]
onload = function(){
ul.style.display = 'none'
}
function showPop(){
if(ul.style.display == 'none'){
ul.style.display = 'block'
}else{
ul.style.display = 'none'
}
}
</script>
</body>
</html>
Try to use position absolute for your list and set position relative for ul parent.
ul {
width: 100px;
background-color: rgb(224, 224, 224);
border-radius: 4px;
border: 1px solid black;
padding: 0;
margin: 0;
bottom: 40px;
left: 0;
position: absolute;
}
ul li {
list-style: none;
cursor: pointer;
padding: 4px 10px;
}
li:hover {
background-color: white;
}
div {
width: 100%;
height: 40px;
position: relative;
background-color: bisque;
}
section {
height: 400px;
background-color: #525252;
}
button {
width: 100px;
height: 100%;
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<p>Some content</p>
</section>
<div>
<ul>
<li>Parrot</li>
<li>Dog</li>
<li>Cat</li>
<li>Squirrel</li>
<li>Otter</li>
<li>Cow</li>
<li>Goat</li>
<li>Finch</li>
</ul>
<button onclick="showPop()">Pet</button>
</div>
<script>
let ul = document.getElementsByTagName('ul')[0]
onload = function() {
ul.style.display = 'none'
}
function showPop() {
if (ul.style.display == 'none') {
ul.style.display = 'block'
} else {
ul.style.display = 'none'
}
}
</script>
</body>
</html>
I have modified your CSS little bit. Please check the snippet.
let ul = document.getElementsByTagName('ul')[0]
onload = function(){
ul.style.display = 'none'
}
function showPop(){
if(ul.style.display == 'none'){
ul.style.display = 'block'
}else{
ul.style.display = 'none'
}
}
ul{
width: 100px;
background-color: rgb(224, 224, 224);
border-radius: 4px;
border: 1px solid black;
padding: 0;
margin: 0;
position: absolute;
bottom: 40px;
}
ul li{
list-style: none;
cursor: pointer;
padding: 4px 10px;
}
li:hover{
background-color: white;
}
div{
width: 100%;
height: 40px;
background-color: bisque;
}
section{
height: 400px;
background-color: #525252;
}
button{
width: 100px;
height: 100%;
margin: 0;
position: relative;
display: inline-block;
}
.dropup{
position: relative;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<p>Some content</p>
</section>
<div class='dropup'>
<ul>
<li>Parrot</li>
<li>Dog</li>
<li>Cat</li>
<li>Squirrel</li>
<li>Otter</li>
<li>Cow</li>
<li>Goat</li>
<li>Finch</li>
</ul>
<button onclick="showPop()">Pet</button>
</div>
The html elements on this simple to do list app i'm making won't properly align themselves when ran on mobile. Essentially when on mobile, the h1 tag should be in the center of the screen as well as the input box and add button under it and the tasks being added to the page, instead on mobile everything is off alignment. Any fixes?
let task;
let text;
let addTask;
let list;
let taskNo = 0;
let remove;
let input = document.getElementById('message');
let btn = document.getElementById('btn');
input.addEventListener("keypress", function() {
if (event.keyCode == 13) {
if (input.value === "") {
alert("Please enter a task!");
} else {
createTask();
}
}
});
btn.onclick = function() {
if (input.value === "") {
alert("Please enter a task!");
} else {
createTask();
}
};
function createTask() {
task = input.value;
addTask = document.createElement('li');
text = document.createTextNode(task);
addTask.appendChild(text);
addTask.classList.add("task");
taskNo++;
addTask.id = taskNo;
document.getElementById("taskList").appendChild(addTask);
input.value = "";
let list = document.getElementsByClassName("task");
[...list].forEach(b => {
b.addEventListener("click", () => {
remove = document.getElementById(b.id);
remove.parentNode.removeChild(remove);
});
});
}
html, body{
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: #29313d;
color: white;
}
#container {
width: 100%;
}
h1{
text-align: center;
font-size: 44px;
}
#input{
margin: auto;
text-align: center;
}
#message, #btn{
display: inline-block;
height: 100%;
margin-top: 10px;
padding: 0;
float: left;
-webkit-box-sizing: border-box;
}
#message{
background-color: #333;
color: white;
border: 4px solid coral;
padding-left: 10px;
width: 75%;
height: 50px;
border-radius: 10px;
}
#btn{
font-size: 20px;
background-color: coral;
border: 4px solid coral;
color: black;
margin-left: 5%;
width: 20%;
height: 50px;
border-radius: 10px;
}
#btn:focus{
outline: none;
}
#message:focus{
outline: none;
}
#input{
height: 50px;
width: 400px;
}
#taskList{
list-style-type: none;
padding: 0;
margin-top: 50px;
}
.task {
margin: auto;
width: 85%;
margin-top: 5px;
padding: 10px;
border: 4px solid coral;
background-color: #333;
color: white;
border-radius: 10px;
}
#media(max-width: 600px) {
#container {
width: 80%;
}
h1{
margin: auto;
}
#message{
width: 100%;
}
#btn{
display: none;
}
.task{
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=10">
<link href="resources/style.css" rel="stylesheet" type="text/css">
<link href="resources/logo.png" rel="shortcut icon" type="image/png">
<title>Jennis App</title>
</head>
<body>
<div id="container">
<h1>To Do List</h1>
<div id="input">
<div class="input-group">
<input type="text" id="message" placeholder="Please enter a new task">
</div>
<div class="input-group">
<input type="button" id="btn" value="Add">
</div>
</div>
<ul id="taskList">
</ul>
</div>
<script src="resources/code.js" type="text/javascript"></script>
</body>
</html>
you need to make some css changes in media.
Center the container for small device using margin
Remove display: none for #btn in media query
Use flex to align add button for small device
clearfix the .input-group using before and after
let task;
let text;
let addTask;
let list;
let taskNo = 0;
let remove;
let input = document.getElementById('message');
let btn = document.getElementById('btn');
input.addEventListener("keypress", function() {
if (event.keyCode == 13) {
if (input.value === "") {
alert("Please enter a task!");
} else {
createTask();
}
}
});
btn.onclick = function() {
if (input.value === "") {
alert("Please enter a task!");
} else {
createTask();
}
};
function createTask() {
task = input.value;
addTask = document.createElement('li');
text = document.createTextNode(task);
addTask.appendChild(text);
addTask.classList.add("task");
taskNo++;
addTask.id = taskNo;
document.getElementById("taskList").appendChild(addTask);
input.value = "";
let list = document.getElementsByClassName("task");
[...list].forEach(b => {
b.addEventListener("click", () => {
remove = document.getElementById(b.id);
remove.parentNode.removeChild(remove);
});
});
}
html, body{
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: #29313d;
color: white;
}
#container {
width: 100%;
}
h1{
text-align: center;
font-size: 44px;
}
#input{
margin: auto;
text-align: center;
}
#message, #btn{
display: inline-block;
height: 100%;
margin-top: 10px;
padding: 0;
float: left;
-webkit-box-sizing: border-box;
}
#message{
background-color: #333;
color: white;
border: 4px solid coral;
padding-left: 10px;
width: 75%;
height: 50px;
border-radius: 10px;
}
#btn{
font-size: 20px;
background-color: coral;
border: 4px solid coral;
color: black;
margin-left: 5%;
width: 20%;
height: 50px;
border-radius: 10px;
}
#btn:focus{
outline: none;
}
#message:focus{
outline: none;
}
#input{
height: 50px;
width: 400px;
}
#taskList{
list-style-type: none;
padding: 0;
margin-top: 50px;
}
.task {
margin: auto;
width: 85%;
margin-top: 5px;
padding: 10px;
border: 4px solid coral;
background-color: #333;
color: white;
border-radius: 10px;
}
#media(max-width: 600px) {
#container {
width: 80%;
margin: 0 auto; /* to align center */
}
h1{
margin: auto;
}
#message{
width: 100%;
}
#btn{
/* display: none; */
}
.task{
width: 100%;
margin-left: 0;
margin-right: 0;
}
/*** Additional css ***/
.input-group.flex {
display: flex;
justify-content: center;
}
.input-group:before, .input-group:after {
content: "";
display: table;
clear: both;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=10">
<link href="resources/style.css" rel="stylesheet" type="text/css">
<link href="resources/logo.png" rel="shortcut icon" type="image/png">
<title>Jennis App</title>
</head>
<body>
<div id="container">
<h1>To Do List</h1>
<div id="input">
<div class="input-group">
<input type="text" id="message" placeholder="Please enter a new task">
</div>
<!-- Added one additional class -->
<div class="input-group flex">
<input type="button" id="btn" value="Add">
</div>
</div>
<ul id="taskList">
</ul>
</div>
<script src="resources/code.js" type="text/javascript"></script>
</body>
</html>
working fiddle here
The banner image in the header is 130 pixels tall, but it says the header in total is 135 pixels. I can't find where this is happening. Where is this extra space coming from?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Taft Power Equipment</title>
<link rel="stylesheet" type="text/css" href="js\jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
<script type="text/javascript" language="Javascript" src="js\jquery.min.js"></script>
<script src="js/jquery.horizontalNav.js"></script>
<script src="js\jquery-migrate-1.2.1.js"></script>
<script>
// When document is ready...
$(document).ready(function() {
$('.full-width').horizontalNav({}); // Call horizontalNav on the navigations wrapping element
$("#main-content").load("home.html");
});
</script>
<script>
$(document).ready(function() {
$("#home").click(function() {
$("#main-content").load("home.html");
});
$("#work").click(function() {
$("#main-content").load("work.html");
});
$("#blog").click(function() {
$("#main-content").load("blog.html");
});
$("#about").click(function() {
$("#main-content").load("about.html");
});
$("#contact").click(function() {
$("#main-content").load("contact.html");
});
$("#parts").click(function() {
$("#main-content").load("parts.html");
});
$("#people").click(function() {
$("#main-content").load("people.html");
});
});
</script>
<script>
$(function() {
$("button").button()
.click(function(event) {
event.preventDefault();
});
});
</script>
<script>
function showParts(str) {
if (str == "") {
document.getElementById("results").innerHTML = "";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("results").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "partsearch_2.php?q=" + str, true);
xmlhttp.send();
}
</script>
<script>
function showPeople(str) {
if (str == "") {
document.getElementById("results").innerHTML = "";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("results").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "peoplesearch.php?q=" + str, true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="page-wrap">
<div id="inside">
<div id="header">
<img src="images/taft_banner_960_blackandwhite.png" />
</div>
<div id="menu">
<nav class="horizontal-nav full-width horizontalNav-notprocessed">
<ul>
<li>Home
</li>
<li>Work
</li>
<li>Blog
</li>
<li>About
</li>
<li>Contact
</li>
<li>Parts Look Up
</li>
<li>People
</li>
</ul>
</nav>
</div>
<div id="main-content"></div>
<div id="footer">
<p>© Copy Right Taft Power Equipment Corp</p>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
html, body {
margin:0;
padding-top:0;
height:100%;
}
p, li {
}
a {
}
b {
}
table {
border-collapse: collapse;
/* 'cellspacing' equivalent */
}
table th {
font: 1.5em Tahoma;
border: 3px solid #0e7079;
border-radius: 6px;
padding: 0em 1em 0em 1em;
}
table td {
font: 1.3em sans-serif;
border-radius: 1px;
border: 0px solid #0e7079;
padding: 0 1em 0 1em;
}
h1 {
font: 2.0em Tahoma, sans-serif;
color: white;
height: 0px;
}
h2 {
font: 1.8em Tahoma, sans-serif;
color: green;
margin-bottom: 10px;
}
ul {
margin-left: 0px;
}
img {
border: none;
}
/* ========================================================================================== */
#page-wrap {
!margin: 10px auto;
display: inline;
}
#inside {
width: 960px;
margin: 0 auto;
background: blue;
min-height:100%;
position:relative;
}
#searchbar {
width: 30%;
background: #747474;
border: 1px solid red;
display: inline-block;
}
#results {
background: #4c4c4c;
min-height: 100px;
width:50%;
display: inline-block;
border-radius: 6px;
border: 1px solid #0e7079;
}
#results b {
font: 2.0em Tahoma, sans-serif;
color: white;
height: 0px;
}
#main-content {
margin-bottom: 10px;
padding:10px;
padding-bottom:30px;
/* Height of the footer */
}
#header {
}
#menu {
}
#left-sidebar {
width: 150px;
float: left;
padding-left: 15px;
padding-top: 20px;
}
#footer {
background: #000000;
text-align: center;
padding-top: 0px;
color: white;
position:absolute;
bottom:0;
width:960px;
height:30px;
/* Height of the footer */
}
/* ========================================================================================== */
.horizontal-nav {
background: #efefef;
border-radius: 6px;
}
.horizontal-nav ul {
background: #ff4505;
float: left;
text-align: center;
border-radius: 6px;
border: 0px solid #0e7079;
margin-left: 0px;
}
.horizontal-nav ul li {
float: left;
border-left: 1px solid #0e7079;
}
.horizontal-nav ul li:first-child {
border-left: 0 none;
}
.horizontal-nav ul li a {
display: block;
padding: 10px 20px;
color: #fff;
border-top: 1px solid rgba(255, 255, 255, 0.25);
border-left: 1px solid rgba(255, 255, 255, 0.25);
text-decoration: none;
}
.horizontal-nav ul li:first-child a {
border-left: 0 none;
}
.horizontal-nav ul li a:hover {
background: #12808a;
}
.horizontal-nav ul li:first-child a {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.horizontal-nav ul li:last-child a {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
http://jsfiddle.net/5b48H/
Thank you!
Either add display:block or vertical-align:top to the img element.
jsFiddle example - display:block
#header img {
display:block;
}
jsFiddle example - vertical-align:top
#header img {
vertical-align:top;
}
Note - The default vertical-align property is baseline. Changing it to top, middle or bottom fixes the issue.
If you can set the image's display style to block that should solve the problem. Setting vertical-align to bottom or middle should also work. I think the problem comes about because Firefox tries to position inline images so their bottom edge is aligned with the baseline of the text, and so there is space below the image for the text descenders. source
header img
{
display: block;
margin: 0;
padding: 0;
}
I believe setting line-height: 1; on the image will also fix this problem, especially if it's in a block by itself.
source