We Keep Coding

is it possible for a function to connect to another function and gather information from an array JS

is it possible to make a function that is connected to another function that has an array this is a JS game Red Light Green Light the array is holding the text "Green Light, Red Light" I want to know if its possible to make another function that is taking information from my characters movement and when the green light or red light text appears for exapmple when green light appears nothing happens because its safe to move but when red light it appears you fail and a game over screen appears
var colors = ['Green light', 'Red light'];
(function () {
var words = ["Red light"]
i = 0;
setInterval(function(){ $('#words').fadeOut(function(){
$(this).html(colors[(i = (i + 1) % colors.length)]).fadeIn();
}); }, 4000)
})();
$(document).ready(function(){
var Block = function()
{
this.goalDistance = 1370;
this.distanceTraveled = 0;
go = false;
}
var block = new Block();
$('#green-button').click(function(){
console.log('GO!');
block.go = true;
animateBlock();
// this allows the block bob to move forward
});
$('#red-button').click(function(){
console.log('STOP!');
block.go = false;
// this allows the block bob to stop moving
});
function animateBlock()
{
if(block.go === true && block.distanceTraveled < block.goalDistance)
{
$('#block').animate({left:'+=10'},50);
block.distanceTraveled += 10;
setTimeout(function(){
animateBlock();
},50);
}
}
});
canvas{
border: 1px solid black;
width: 65%;
margin-top: 35px;
margin-inline-start: 5px;
border-inline-start-color: #ffffff;
}
body {
background-color: grey;
}
.container {
width: 20%;
max-width: 20px;
margin: auto;
}
.animated-heading {
display: flex;
align-items: center;
justify-content: center;
height: 1vh;
}
h1{
color: black;
}
#finish-line
{
position:absolute;
height:650px;
width:10px;
left:1670px;
top:135px;
background-color:black;
}
.buttons
{
margin-top: 1px;
float: left;
}
.light
{
width:150px;
height:50px;
margin-left:30px;
color:white;
font-size:2em;
}
#green-button
{
background-color:green;
border-radius: 12px;
display: inline-block; margin-right: 20px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
width: 200px;
margin-left: 820px;
margin-right: 5px;
cursor: pointer
}
#red-button
{
background-color:red;
border-radius: 12px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
width: 200px;
margin: 0 auto;
margin-right: 1px;
cursor: pointer
}
.block
{
position:relative;
width:40px;
height:39px;
background-image: url('./image/bob.jpg');
border: 1px solid black;
bottom:400px;
left:310px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center><h1><span id="words"> Red light</span></h1></center>
<center><canvas id="myCanvas"></canvas></center>
<div class="container"></div>
<div class="animated-heading"></div>
<div class="block" id="block"></div>
<div id = 'finish-line'></div>
<div class="buttons">
<button class = "light" id="green-button" type="button">GO!</button>
<button class = "light" id="red-button" type="button">STOP!</button>
</div>

How do I get my etch-a-sketch program to "listen" to this dropdown menu instead of the buttons?

I'm new to Stack Overflow. I hope that I'm doing this correctly. ❤
I'm working on an old Etch-a-Sketch JavaScript project from months ago and decided to rework the 'mobile' form of the project because I hadn't bothered to do so at the time. At first, I tried just moving the buttons to the top horizontally, but I didn't like any of the variations I tried. So I decided I'd be better off with a dropdown menu instead that would appear when the screen is 500px or smaller, replacing the buttons.
The dropdown menu is supposed to do exactly what the buttons do - when a certain mode is selected, that's the mode that the program is supposed to switch to. For example, when the "Party mode" button is clicked, the program switches to "party mode". I want the dropdown menu to behave similarly - when the "party mode" option is selected, the program should switch to "party mode".
My logic was that I needed a function that grabbed the value of the dropdown menu, and then an "if" condition would run that pretty much says "If the value is x, x mode should run; else if the value is y, y mode should run", and so on. I added the function to the existing window.onload function so it would run upon the window loading. This didn't work.
Note that the dropdown menu will, in the future, only appear when the screen size is 500px or less. In addition, I still have the buttons on the screen for all sizes, just for testing/debugging purposes. When I'm done and have this figured out, the buttons will have "display = 'none'" and be hidden for the "mobile size".
Anyway, so yeah, the program is still just listening to the buttons, and not the dropdown menu. That leads me to believe that I need to somehow turn "off" the button mode? If that's the case, how do I do that? If that's not the case, what am I supposed to do here? Any help or insight would be greatly appreciated. Thanks!
const defaultMode = 'default';
const defaultSize = 30;
const defaultColor = '#0b478b';
let currentMode = defaultMode;
let currentSize = defaultSize;
let currentColor = defaultColor;
// Sets the program's current mode
function setCurrentMode(newMode) {
activeButton(newMode);
currentMode = newMode;
}
// Sets the grid's size
function setCurrentSize(newSize) {
currentSize = newSize;
}
// Sets the color of the square (if in default mode)
function setCurrentColor(newColor) {
currentColor = newColor;
}
// Links the various HTML elements to this script
const sizeValue = document.querySelector('#sizevalue');
const sizeSlider = document.querySelector('#sizeslider');
const colorPicker = document.querySelector('#colorpicker');
const defaultBtn = document.querySelector('#default');
const partyBtn = document.querySelector('#party');
const grayBtn = document.querySelector('#grayscale');
const eraserBtn = document.querySelector('#eraser');
const clearBtn = document.querySelector('#clear');
const grid = document.querySelector('#maincontainer');
// DOM manipulations for buttons, color picker, and size slider
colorPicker.onchange = (e) => setCurrentColor(e.target.value);
defaultBtn.onclick = () => setCurrentMode('default');
partyBtn.onclick = () => setCurrentMode('party');
grayBtn.onclick = () => setCurrentMode('gray');
eraserBtn.onclick = () => setCurrentMode('eraser');
clearBtn.onclick = () => reloadGrid();
sizeSlider.onmousemove = (e) => updateSizeValue(e.target.value);
sizeSlider.onchange = (e) => changeSize(e.target.value);
// When the size is changed, we set the grid size, update the size value (text), and reload the grid.
function changeSize(num) {
setCurrentSize(num);
updateSizeValue(num);
reloadGrid();
}
// When we update the size value, the text changes to reflect the value. (It's a square, so the value is always the same for length and width).
function updateSizeValue(num) {
sizeValue.innerHTML = `${num} x ${num}`;
}
// When we reload the grid (which happens when "Clear grid" is pressed), we ensure that we clear the grid and that the size is still the current size.
function reloadGrid() {
clearGrid()
makeGrid(currentSize)
}
// When we clear the grid, it clears the grid.
function clearGrid() {
grid.innerHTML = ''
}
// Creates the base grid and includes the code that says "when the mouse goes over the squares, draw."
function makeGrid(size) {
grid.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
grid.style.gridTemplateRows = `repeat(${size}, 1fr)`;
for (i = 0; i < size * size; i++) {
let square = document.createElement('div');
square.addEventListener('mouseover', changeColor);
grid.appendChild(square);
}
}
// These are the conditions to set the color of the "pen" (squares)
function changeColor(e) {
if (currentMode === 'party') {
const randomR = Math.floor(Math.random() * 256);
const randomG = Math.floor(Math.random() * 256);
const randomB = Math.floor(Math.random() * 256);
e.target.style.backgroundColor = `rgb(${randomR}, ${randomG}, ${randomB})`;
} else if (currentMode === 'default') {
e.target.style.backgroundColor = currentColor;
} else if (currentMode === 'gray') {
e.target.style.backgroundColor = calculateGray(e);
} else if (currentMode === 'eraser') {
e.target.style.backgroundColor = 'white';
}
}
// Shading mode code
function calculateGray(e) {
let clr = returnRGB(e.target.style.backgroundColor);
if (!clr || clr[1] !== clr[2] || clr[1] !== clr[3]) {
return `rgb(255, 255, 255)`;
}
return clr[1] <= 0 ? `rgb(255, 255, 255)` : `rgb(${clr[1]-25}, ${clr[1]-25}, ${clr[1]-25})`;
}
function returnRGB(num) {
return num.match(/rgb\(([0-9]*), ([0-9]*), ([0-9]*)\)/);
}
// Changes the button styling to indicate which mode is the active mode
function activeButton(newMode) {
if (currentMode === 'party') {
partyBtn.classList.remove('active');
} else if (currentMode === 'default') {
defaultBtn.classList.remove('active');
} else if (currentMode === 'gray') {
grayBtn.classList.remove('active');
} else if (currentMode === 'eraser') {
eraserBtn.classList.remove('active');
}
if (newMode === 'party') {
partyBtn.classList.add('active');
} else if (newMode === 'default') {
defaultBtn.classList.add('active');
} else if (newMode === 'gray') {
grayBtn.classList.add('active');
} else if (newMode === 'eraser') {
eraserBtn.classList.add('active');
}
}
// Ensures that, when we load the page, we make the grid and activate the correct mode (default).
window.onload = () => {
makeGrid(defaultSize);
activeButton(defaultMode);
dropdownModeThing(document.getElementById('dropdown-mode').value);
}
// Code for the dropdown menu
function dropdownModeThing(val) {
if (val === 'default') {
setCurrentMode('default');
} else if (val === 'party') {
setCurrentMode('party');
} else if (val === 'shading') {
setCurrentMode('gray');
} else if (val === 'eraser') {
setCurrentMode('eraser');
} else if (val === 'clear') {
reloadGrid();
}
}
body,
html {
min-height: 100vh;
height: 100%;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin: 0;
padding: 0;
background-color: white;
overflow-x: hidden;
}
header {
text-align: center;
margin: 0;
border-bottom: 1px solid black;
background-color: #0b478b;
color: white;
padding: 10px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
p {
margin: 0;
}
h1 {
text-align: center;
margin: 0;
font-size: 2.5rem;
padding: 0;
}
#maincontainer {
background-color: white;
margin: 20px auto 10px auto;
display: grid;
border: 1px solid black;
width: 45vw;
height: 45vw;
min-height: 300px;
min-width: 300px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
.testing {
padding-top: 100%;
color: hsla(0, 0%, 68%, 0.596);
}
#btncontainer {
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
a {
color: #2aa5a1;
text-decoration: none;
}
a:hover {
color: white;
}
button {
background-color: #2aa5a1;
color: white;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
border: 1px solid black;
margin: 10px 15px;
padding: 8px 10px;
font-size: .9em;
transition: 0.3s;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
button:active {
background-color: #3F86D8;
color: white;
border: 1px solid black;
}
.active {
background-color: #3F86D8;
transition: 0.3s;
color: white;
border: 1px solid black;
}
button:hover {
background-color: #0b478b;
color: white;
border: 1px solid black;
opacity: 1;
}
#rightside {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
min-height: 500px;
padding: 0;
margin: 0;
}
#sizevalue {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin-bottom: 0;
}
input[type=range] {
background-color: white;
height: 28px;
-webkit-appearance: none;
margin: 0;
margin-bottom: 35px;
width: 250px;
padding: 0;
}
input[type=range]:focus {}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 11px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000;
background: #3F86D8;
border-radius: 13px;
border: 0px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 2px #000031;
border: 1px solid #00001E;
height: 20px;
width: 20px;
border-radius: 15px;
background: #FFFFFF;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #3F86D8;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 11px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000;
background: #3F86D8;
border-radius: 13px;
border: 0px solid #010101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 2px #000031;
border: 1px solid #00001E;
height: 20px;
width: 20px;
border-radius: 15px;
background: #F3EEED;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 11px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #3F86D8;
border: 0px solid #010101;
border-radius: 26px;
box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-fill-upper {
background: #3F86D8;
border: 0px solid #010101;
border-radius: 26px;
box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-thumb {
margin-top: 1px;
box-shadow: 1px 1px 2px #000031;
border: 1px solid #00001E;
height: 20px;
width: 20px;
border-radius: 15px;
background: #F3EEED;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3F86D8;
}
input[type=range]:focus::-ms-fill-upper {
background: #3F86D8;
}
main {
display: flex;
justify-content: center;
margin: 0;
margin-bottom: 20px;
padding: 0;
}
#colorpicker {
-webkit-appearance: none;
border-radius: 100vw;
width: 50px;
height: 50px;
padding: 0;
margin: 0 auto 10px auto;
overflow: hidden;
border: 1px solid black;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
input[type='color']:hover {
transform: scale(1.05);
}
input[type='color']::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type='color']::-webkit-color-swatch {
border: none;
border-radius: 50px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
/* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%;
/* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
footer {
color: white;
text-align: center;
background-color: #0b478b;
position: fixed;
bottom: 0;
width: 100%;
margin: 0;
padding-top: 10px;
padding-bottom: 15px;
}
#media (max-width: 500px) {
main {
flex-direction: column;
}
#btncontainer {
margin: 0 auto;
padding: 20px 10px 5px 10px;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
#btncontainer button {
margin: 0 3px;
height: 35px;
}
#colorpicker {
-webkit-appearance: none;
border-radius: 100px;
width: 35px;
height: 35px;
padding: 0;
margin: 0 auto 10px auto;
overflow: hidden;
border: 1px solid black;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
}
<!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">
<!-- CSS spreadsheet -->
<link href="styles.css" rel="stylesheet">
<title>Etch-a-Sketch</title>
</head>
<body>
<!-- Note that this is set up in various divs so
that we can use Flex to create our wanted layout. -->
<div id="entirepage">
<header>
<h1>Etch-a-Sketch</h1>
<p title="Testing">Select a color or a different mode, then select your size, and get drawing!</p>
</header>
<main>
<div id="btncontainer">
<select id="dropdown-mode">
<option value="default">Default mode</option>
<option value="party">Party mode</option>
<option value="shading">Shading</option>
<option value="eraser">Eraser mode</option>
<option value="clear">Clear grid</option>
</select>
<input type="color" id="colorpicker" value="#0b478b">
<button id="default">Default mode</button>
<button id="party">Party mode</button>
<button id="grayscale">Shading</button>
<button id="eraser">Eraser mode</button>
<button id="clear">Clear grid</button>
</div>
<div id="rightside">
<div id="maincontainer">
</div>
<label for="sizeslider" id="sizevalue">30 x 30</label>
<input type="range" min="1" max="100" value="30" id="sizeslider">
</div>
</main>
<footer>
<p>Created by Sara Dunlop (RiscloverYT)</p>
</footer>
</div>
<!-- JavaScript script -->
<script src="script.js"></script>
</body>
</html>

Luckily, there's an easy way to do that. Add this piece of code into your javascript file and see the magic.
const dropdown = document.getElementById('dropdown-mode');
dropdown.addEventListener('change', (e) => {
setCurrentMode(e.target.value);
});
Read more about change event here.

I'm struggling to get this jquery slide down and up to work

The div I'm animating in jquery is supposed to slide out to expand the width. I've gotten the width animation to work but after adding the slideDown and up code nothing works, the way it should work is:
Enquiries should be clicked and it expands and after it expands the. For slides down and when its clicked again, first the fork slides up and then the ENQUIRIES- shown goes back to its original width.
I'm not sure where my codes gone wrong as I'm new to jquery and java script. THANK YOU FOR ANY HELP!
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
$(this).animate({
width: "950px",
borderRadius: "0px"
}, 1000);
setTimeout(function() {
$('#enquiry-form').slideDown('slow');
}, 1000);
function() {
if ($('#enquiry-form').is("visible") {
$('#enquiry-form').slideUp("slow");
else($('#enquiry-form').is("hidden") {
$('#enquiry-form ').slideDown("slow");
});
});
};
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
</div>
</div>

I changed i few things in your js code, i used a class to define the condition when to slideup or down
See the result:
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
var current = $(this)
if ($('#enquiry-shown').hasClass("active")) {
$('#enquiry-form').slideUp('slow', function() {
current.animate({
width: "210px",
borderRadius: "50px"
}, 1000);
});
$('#enquiry-shown').removeClass("active");
} else {
current.animate({
width: "100%",
borderRadius: "0px"
}, 1000, function() {
$('#enquiry-form').slideDown('slow');
});
$('#enquiry-shown').addClass("active");
}
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 0px 20px 0 0;
display: inline-block;
transition: all 1s;
transform: rotate(-90deg);
}
#enquiry-form {
width: 100%;
height: 100px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
#enquiry-shown.active img {
transform: rotate(0deg);
padding-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
This is the enquiry form
</div>
</div>

I don't know if u want to achieve this effect, but try this and give me feedback:
$('#enquiry-shown').click(function() {
if($('#enquiry-form').is(':visible')){
$('#enquiry-form').slideUp('slow', function(){
$('#enquiry-shown').animate({
width: "210px",
borderRadius: "50px"
}, 1000);
});
}
else if($('#enquiry-form').is(':hidden')){
$('#enquiry-shown').animate({
width: "950px",
borderRadius: "0px"
}, 1000, function(){
$('#enquiry-form').slideDown('slow');
});
}
});

You have a lot of syntax errors such as incorrectly matched brackets, missing parenthesis, missing function name, and using else when you should use else if.
When you fix all of them it looks like your click function already has some of your intended functionality.
Next I'd suggest removing the setTimeout in favor of jQuery's animate end handler, which you use by attaching a function to most animations.
Lastly you should refactor your code a little. I don't think is('visible') does what you think it does, but luckily there's a slideToggle method that does do what you want pretty easily.
Your click handler then needs to consider cases when the menu is already open and when it's not open and then act accordingly. For that you might consider using toggleClass and then checking which class it is with hasClass before deciding what animation to perform.
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
if(!$(this).hasClass('closed')){ // if the form is not closed
$(this).animate({ // animate the form to open state
width: "950px",
borderRadius: "0px",
}, 1000, ()=>{
$("#enquiry-form").slideToggle()
});
}else{ // if the form is closed animate in reverse order
$("#enquiry-form").slideToggle(
()=>{
$(this).animate({
width : "210px",
borderRadius : "50px"
}, 1000);
}
)
}
$(this).toggleClass('closed'); // toggle the class
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
<div> Hello I am a form </div>
</div>
</div>

Plus / Minus pictures for accordion list

The code below is for an accordion list I have created using HTML, CSS and JavaScript. Is there any way add a plus and minus picture in the left corner of the heading? So when I clicked on heading "A" or "B" the picture goes from the plus sign to the minus sign. Here are the two images I would like to use:
https://www.independencecenter.org/wp-content/uploads/2014/04/wellness.png
https://web.archive.org/web/20150227045704/http://licensing.paperbagrecords.com/wp-content/themes/licensing/assets/images/minus.png
(function () {
var accordions, i;
// Make sure the browser supports what we are about to do.
if (!document.querySelectorAll || !document.body.classList) return;
// Using a function helps isolate each accordion from the others
function makeAccordion(accordion) {
var targets, currentTarget, i;
targets = accordion.querySelectorAll('.accordion > * >h1 ');
for(i = 0; i < targets.length; i++) {
targets[i].addEventListener('click', function (e) {
/*Added the code below*/
if (e.target.parentNode.classList.contains("expanded")) {
e.target.parentNode.classList.remove("expanded")
} else {
/*Else do the following, same as before */
if (currentTarget)
currentTarget.classList.remove('expanded');
currentTarget = this.parentNode;
currentTarget.classList.add('expanded');
}
}, false);
}
accordion.classList.add('js');
}
// Find all the accordions to enable
accordions = document.querySelectorAll('.accordion');
console.log(accordions);
// Array functions don't apply well to NodeLists
for(i = 0; i < accordions.length; i++) {
makeAccordion(accordions[i]);
}
})();
<style>
/*All paragraphs*/
.p {
margin: 5px;
color: #007a5e;
}
.bold {
color: #007a5e;
font-weight:bold;
}
.boldwhite {
font-weight:bold;
}
/*Accordion Movement*/
.accordion.js > * {
overflow: hidden;
}
.accordion.js > *:not(.expanded) > *:not(h1) {
max-height: 0;
margin-top: 0;
margin-bottom: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.accordion.js > .expanded > *:not(h1) {
opacity: 1;
visibility: visible;
}
.accordion.js > * > h1 {
cursor: pointer;
visibility: visible;
}
.accordion.js > * > *:not(h1) {
transition: max-height 0.5s, visibility 0.5s, margin 0.5s, opacity 0.5s;
}
/*Section Properties*/
.sections {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #dddddd;
padding: 5px;
background-color: #FCFCFC;
border-radius: 1px;
}
.sections:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/*Green Section Properties*/
.sections2 {
font-family: Verdana;
font-weight: lighter;
color: #5E5E5E;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #ccd6e0;
padding: 5px;
background-color:rgba(224, 235, 245,0.3);
border-radius: 1px;
}
.sections2:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.accordion > section > div {
margin-bottom: 15px;
}
</style>
<section class="accordion js">
<section class="sections">
<h1><span style="font-size: 18px;">A</span></h1>
<div>
<p class="p" style="text-align: center;"><span style="color: #007a5e;">aerheahqeh.</span></p>
</div>
</section>
<br style="line-height: 15px;"/>
<section class="sections2">
<h1><span style="font-size: 18px;">B</span></h1>
<div>
<p class="p" style="text-align: center;">Twtjwrjwrj </p>
</div>
</section>
</section>

Use pseudo-elements on the child of your expanded class and a background image. Something like:
.accordion.js h1{
position:relative;
}
.accordion.js h1::before{
content: "";
display:block;
height:20px;
width:20px;
position:absolute;
left:0;
top:0;
background: url(YourPlusImageUrlHere);
}
.accordion.js .expanded h1::before{
background: url(YourMinusImageUrlHere);
}
Adjust for your styles.

How do I resize an Avatar image into a smaller one in a fixed header navbar using jquery and css

I need help about resize avatar image into a smaller one in a fixed header navbar. I created this DEMO from codepen.io
When you scroll down on the page then the navbar to be a fixed. But i want to add a avatar in a navbar when scroll down like twitter. Anyone can help me here ?
JQuery
$(document).ready(function() {
$('.globalHeader').scrollToFixed();
$('.footer').scrollToFixed( {
bottom: 0,
limit: $('.footer').offset().top
});
var summaries = $('.summary');
summaries.each(function(i) {
var summary = $(summaries[i]);
var next = summaries[i + 1];
summary.scrollToFixed({
marginTop: $('.globalHeader').outerHeight(true) + 10,
limit: function() {
var limit = 10;
if (next) {
limit = $(next).offset().top - $(this).outerHeight(true) - 10;
} else {
limit = $('.footer').offset().top - $(this).outerHeight(true) - 10;
}
return limit;
},
zIndex: 0
});
});
$('#sponsor').scrollToFixed({
marginTop: $('.globalHeader').outerHeight(true) + 10,
limit: function() {
var limit = $('.footer').offset().top - $('#sponsor').outerHeight(true) - 10;
return limit;
},
minWidth: 1000,
zIndex: 999,
fixed: function() { },
dontCheckForPositionFixedSupport: true
});
$('#sponsor').bind('unfixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor preUnfixed');
});
$('#sponsor').bind('unfixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor unfixed');
$(this).css('color', '');
$('.globalHeader').trigger('unfixed.ScrollToFixed');
});
$('#sponsor').bind('fixed.ScrollToFixed', function() {
if (window.console) console.log('sponsor fixed');
$(this).css('color', 'red');
$('.globalHeader').trigger('fixed.ScrollToFixed');
});
});
CSS
.globalHeader {
z-index: 90;
background-color: #323949;
position: fixed;
width: 100%;
border-bottom: 1px solid #3f4858;
color: #fff;
font-size: 40px;
font-family: arial, sans-serif;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}
.globalHeader_in {
z-index: 99999;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
min-width: 960px;
width: 100%!important;
max-width: 1580px;
height: 52px;
left: 0;
top: 0;
padding: 0 20px 0 15px;
margin: auto;
}
.profile-kapak-alani {
width:100%;
height:385px;
background-position: center top;
background-size: 100% auto;
background-size:cover;
border-bottom:1px solid #3f4858;
background: #323949 url(icons/genis.png) repeat 0 0;
}
.profil-kapak-profil-resim {
width:900px;
height:385px;
margin:0px auto;
}
.profil-kapak {
width:900px;
height:385px;
overflow:hidden;
}
.profil-kapak img {
width:900px;
}
.profil-ana-etki-alani{
width: 900px;
margin: auto;
padding: 52px 30px 0;
overflow:hidden;
border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
-moz-border-radius:3px;
}
.kullanici-profil-fotografi-alani {
float:left;
width:200px;
height:200px;
margin-top:-110px;
margin-left:30px;
position:absolute;
padding:8px;
z-index:5;
background-color: rgba(50, 57, 73, 1);
border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-moz-border-radius:5px;
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2), 0 0 8px rgba(0, 0, 0, 0.5) inset;
}
.kullanici-profil-fotografi-alani span {
display: inline-block;
overflow: hidden;
vertical-align: middle;
-webkit-border-radius:5px;
-o-border-radius:5px;
-moz-border-radius:5px;
}
.profil-fotografini-degistir {
position:absolute;
width:55px;
height:35px;
margin-top:-38px;
margin-left:4px;
}
.link-abonelik-takipci-fotograf-takip {
width:100%;
height:60px;
position:relative;
border-bottom:1px solid #3f4858;
background-color: #323949;
border-top:1px solid #3f4858;
box-shadow: 0 -7px 5px -6px #000000;
-webkit-box-shadow: 0 -7px 5px -6px #000000;
-moz-box-shadow:0 -7px 5px -6px #000000;;
-o-box-shadow:0 -7px 5px -6px #000000;;
}
.la-t-f-t {
width:900px;
height:60px;
margin:0px auto;
}
.ll-p-t{
float:right;
width:630px;
height:60px;
}
.pay-t{
float:left;
width:88px;
height:60px;
padding-left:15px;
padding-right:15px;
}
.pay-t-t {
font-weight:normal;
color:#9aa2ae;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:11px;
margin-top:10px;
float:left;
width:88px;
text-align:center;
}
.p-t-t-a{
font-weight:bold;
color:#9aa2ae;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:18px;
text-align:center;
margin-top:8px;
float:left;
width:88px;
}
#navbar {
position: absolute;
width:100%;
height:60px;
}
.main-content{
width:100%;
height:auto;
overflow:hidden;
background-color:red;
}
.content{
margin:0px auto;
width:900px;
height:900px;
}
.footer {
background-color: #eee;
padding: 0px;
clear: both;
}
.footer.scroll-to-fixed-fixed {
color: red;
}

For the large background image, you can simply use $(window).scroll() to slow down the scrolling. You also need to set your content to position: relative so it sits above the overflowing background image (since it will scroll at a much slower rate). But your nav bar has a dynamically added z-index:auto which will then cause it to sit behind your content (probably from the plugin) so you'll have to use !important on your #navbar's z-index:
JS
$(window).scroll(function(){
var scrolled = $(this).scrollTop();
$(".profil-kapak").css({"top":(scrolled*0.7)+"px"});
});
CSS
#navbar {
position: absolute;
width:100%;
height:60px;
z-index: 4 !important; //add, need to override the plugin
}
.main-content{
width:100%;
height:auto;
overflow:hidden;
background-color:red;
position: relative; //add
}
For the mini profile look, you can set up the container in your nav bar set to display: none and do a simple fade in/out with the bigger one when the nav bar get's fixed:
HTML
<div class="mini-profile-wrapper">
<div class="mini-profile-img">
<img src="http://www.designbolts.com/wp-content/uploads/2013/11/Frozen-Movie-poster-payoff-Wallpaper-HD1.jpg">
</div>
<p class="profile-name">John Doe</p>
</div>
CSS
.mini-profile-wrapper{
display: none;
float: left;
}
.mini-profile-img{
display: inline-block;
width: 80px;
padding: 5px 5px 0 0;
overflow: hidden;
vertical-align: middle;
}
.mini-profile-img img{
max-width: 100%;
display: inline-block;
}
.mini-profile-wrapper .profile-name{
display: inline-block;
vertical-align: middle;
font-weight:normal;
color:#FFF;
font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:20px;
}
You can Use pre-existing JS function
$('#navbar').bind('unfixed.ScrollToFixed', function() {
...
$(".kullanici-profil-fotografi-alani").fadeIn();
$(".mini-profile-wrapper").fadeOut();
});
$('#navbar').bind('fixed.ScrollToFixed', function() {
...
$(".kullanici-profil-fotografi-alani").fadeOut();
$(".mini-profile-wrapper").fadeIn();
});
CODEPEN

Twitter is doing some interesting things in this case. The container #1 for the small avatar is in the navigation bar all the time in the same place. That avoids messing around with the placement of the avatar and any other outside elements.
The content of this container #1 is container #2 and has a given height and in its not-fixed state a padding-top of the same value. And because of the overflow: hidden, the inner content (avatar, texts) gets cut of.
As soon as the navigation bar gets fixed, the padding-top of container #2 is set from the height to 0, and thanks to a CSS transition, we have a nice animation. In addition, the big avatar get animated away.
Conclusion: Make the smaller version and place in a spot where you want. Keep this position all the time and just change its visibility. Can be the way described above, can also just be a simple visibility: hidden. Be creative. And then, when you fix your navigation, simply show the small avatar, and hide it, when its going to be unfixed.