Develop Reference

javascript pause() restarts audio instead of pausing it?

I am coding a (mp3) sample/jingle/sound player button.
The top row has 2 control buttons and a volume slider, pressing the section below will play the sound.
The first control button toggles loop mode on off (this is functioning as expected)
The second control button is supposed to toggle "play/pause" mode.
If play/pause mode is "on" and you press the button a second time (while it is playing) it should pause, the when you press a 3rd time should resume playing but instead currently, it restarts from the begining on second press. Where did I go wrong?
function playsound() {
var audiox = document.getElementById('playerx');
audiox.src = "http://glentertainment.keybit.co.uk/audiop2/22%20Air%20Horn%20Single.mp3";
var playmode = document.getElementById('playpauseorrapidpressonoff').innerText;
if (playmode != "off") {
if (audiox.paused) {
audiox.play()
} else {
audiox.pause()
}
} else {
audiox.play();
}
}
function setvolume() {
document.getElementById('playerx').volume = document.getElementById('ssvolume').value;
}
function playmodebuttonpressed() {
onoffcheck = document.getElementById('playpauseorrapidpressonoff').innerText;
if (onoffcheck != "off") {
document.getElementById('playpauseorrapidpress').style.backgroundColor = "grey";
document.getElementById('playpauseorrapidpressonoff').innerText = "off";
} else {
document.getElementById('playpauseorrapidpress').style.backgroundColor = "black";
document.getElementById('playpauseorrapidpressonoff').innerText = "on";
}
}
function repeatbuttonpressed() {
onoffcheck = document.getElementById('repeatbuttonpressed').innerText;
if (onoffcheck != "off") {
document.getElementById('loop').style.backgroundColor = "grey";
document.getElementById('repeatbuttonpressed').innerText = "off";
document.getElementById('playerx').loop = false;
} else {
document.getElementById('loop').style.backgroundColor = "black";
document.getElementById('repeatbuttonpressed').innerText = "on";
document.getElementById('playerx').loop = true;
}
}
.ssvolume {
transform: scale(0.8);
width: 60px;
position: absolute;
top: 0;
right: 0;
display: inline-block;
margin: 0;
padding: 0;
}
.singlesoundcontainer {
width: 100px;
height: 100px;
box-shadow: inset 0px 1px 0px 0px #a4e271;
background: linear-gradient(to bottom, #89c403 5%, #77a809 100%);
background-color: #89c403;
border: 1px solid #74b807;
border-radius: 5px;
display: block;
position: relative;
}
.singlesamplercontrols {
width: 100px;
height: 20px;
background-color: transparent;
border-radius: 5px 5px 0 0;
border: 0.1px solid black;
}
.ssrepeatbutton {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: -4px;
padding: 0px;
background-color: grey;
display: inline-block;
width: 20px;
cursor: pointer;
}
.ssrepeatbutton:hover {
background-color: black;
}
.singlesamplertrigger {
width: 90px;
height: 69px;
cursor: pointer;
padding: 5px;
color: black;
border-radius: 0 0 5px 5px;
display: inline-block;
overflow: hidden;
background-color: transparent;
font-family: Arial;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 1px 0px #528009;
font-size: 11.5px;
line-height: 10px;
border-bottom: 0.1px solid black;
border-left: 0.1px solid black;
border-right: 0.1px solid black;
-webkit-user-select: none;
/* Safari */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE10+/Edge */
user-select: none;
/* Standard */
}
<div class="singlesoundcontainer">
<div class="singlesamplercontrols">
<img class="ssrepeatbutton" id="loop" onClick="repeatbuttonpressed();" src="https://www.bossdj.net/sampledeck/images/repeat-icon.png">
<span id="repeatbuttonpressed" style="display:none;">off</span>
<img class="ssrepeatbutton" id="playpauseorrapidpress" onClick="playmodebuttonpressed();" src="https://www.bossdj.net/sampledeck/images/playpausemode-icon.png">
<span id="playpauseorrapidpressonoff" style="display:none;">off</span>
<input class="ssvolume" type="range" id="ssvolume" min="0" max="1" value="1" step="0.01" onInput="setvolume();">
</div>
<div class="singlesamplertrigger" onClick="playsound();" id="singlesampler">Air Horn (Single)</div>
</div><br />
<!--Below audio element will be hidden in final code-->
<audio id="playerx" style="display: block; width: 280px" src="#" controls></audio>

You should initialise the src of the audio tag only once, and then just toggle the play/pause.
window.addEventListener('DOMContentLoaded', () => {
var audiox = document.getElementById('playerx');
audiox.src = "http://glentertainment.keybit.co.uk/audiop2/22%20Air%20Horn%20Single.mp3";
})
function playsound() {
var audiox = document.getElementById('playerx');
var playmode = document.getElementById('playpauseorrapidpressonoff').innerText;
if (playmode != "off") {
if (audiox.paused) {
audiox.play()
} else {
audiox.pause()
}
} else {
audiox.play();
}
}

How to change the border color of a div when clicking a radio button inside the same div?

So I'm currently working on a personal project. And came across with a problem.
I want my border color of this div to green when the user clicks the radio button inside that div. Like this:
Here
But my current version looks like this:
Here
Here is my CSS and HTML
.backProjectCard2 {
padding-right: 10px;
}
.backProjectCard {
border: 2px solid #ececec;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
/*For Input and .checkmark*/
.backProjectCard input {
position: relative;
height: 20px;
width: 20px;
left: 20px;
}
.input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.backProject input:checked~.checkmark {
background-color: #fff;
}
.checkmark {
position: absolute;
top: 27px;
left: 20px;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 50%;
border: solid #e0e0e0 1.7px;
z-index: -1;
}
.backProject input:checked~.checkmark:after {
display: block;
}
.backProject .checkmark:after {
top: 2px;
left: 3px;
width: 10px;
height: 10px;
border-radius: 50%;
background: hsl(176, 50%, 47%);
}
.checkmark:after {
z-index: 1;
content: "";
position: absolute;
display: none;
}
<div class="backProjectCard backProjectCard2">
<input onclick="radioCheck();" type="radio" class="input">
<span class="checkmark"></span>
<h4 id="card-h">Bamboo Stand</h4>
<h3>Pledge $25 or more</h3>
<p id="left">left</p>
<h2 id="card2-num">101</h2>
<p>You get an ergonomic stand made of natural baamboo. You've helped us launch our promotional campaign, and you'll be added to a special Backer member list.</p>
<hr>
<div class="pledgeSection">
<p>Enter your pledge</p>
<button class="btn-1 card2Btn">Continue</button>
<button class="btn-2">
<p>$</p>
<input value="25" class="input-price input-price2" type="number">
</button>
</div>
JS (Only for clicking the radio button twice):
function radioCheck() {
timesClicked++
if (timesClicked > 1) {
$("input").prop("checked", false)
timesClicked = 0;
}
}

function colorchange() {
var x = document.getElementById('checker');
var y = document.getElementById('radiobox');
if (x.checked === true) {
y.style.borderColor = "green";
} else {
y.style.borderColor = "silver";
}
}
#radiobox {
width: 300px;
height: 200px;
border: 5px solid;
border-color: silver;
}
<div id="radiobox">
<input type="radio" onclick="colorchange();" id="checker"></input>
</div>
To keep it simple, I'll just use a short example and you can just apply it to your own example.

This is how you can do that
function radioCheck(){
// Get the checkbox
var checkBox = document.getElementById("myInputCheck");
// Get the div with border
var divBorder = document.getElementsByClassName("backProjectCard")[0]
// If the checkbox is checked, display the border
if (checkBox.checked == true){
divBorder.classList.remove("backProjectCard"); //remove "backProjectCard"
divBorder.classList.add("newBorder"); //add the new border with new color
} else {
divBorder.classList.remove("newBorder");
divBorder.classList.add("backProjectCard");
}
}
.backProjectCard2 {
padding-right: 10px;
}
.backProjectCard {
border: 2px solid #ececec;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
/*For Input and .checkmark*/
.backProjectCard input {
position: relative;
height: 20px;
width: 20px;
left: 20px;
}
.input {
position: absolute;
opacity: 1;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 27px;
left: 20px;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 50%;
border: solid #e0e0e0 1.7px;
z-index: -1;
}
.newBorder{
border: 2px solid #177972 !important;
border-radius: 10px;
margin: 0 0 20px;
padding-top: 24px;
position: relative;
right: 5px;
width: 580px;
}
<div class="backProjectCard backProjectCard2">
<input onclick="radioCheck();" type="radio" id="myInputCheck">
<h4 >Bamboo Stand</h4>
<h3>Pledge $25 or more</h3>
<p >left</p>
<h2 >101</h2>
<p>You get an ergonomic stand made of natural baamboo. You've helped us launch our promotional campaign, and you'll be added to a special Backer member list.</p>

How to fit elements at slider container

I work with statick creation elements, and for this i need to have slider.
I just create slider, but elements are not fit in to slider container.
Example:
var htmlElements;
var userName = "Jonny Programmer"
var id = "6656"
function createUserCard() {
htmlElements = `<div class="user-card">
<img src="https://source.unsplash.com/user/erondu" class="userImage" />
<div class="info">
<div class="name">${userName}</div>
<div class="handle">
<div class="idPersone">${id}</div>
</div>
</div>
</div>`
$('.cardsCreation').append(htmlElements);
}
$('#plus-button').on('click', function () {
createUserCard();
});
(function () {
var sliderImages = document.querySelectorAll('.image'),
arrowLeft = document.querySelector('#left-arrow'),
arrowRight = document.querySelector('#right-arrow'),
currentImg = 0;
function initSlider() {
resetSlider();
sliderImages[0].style.display = 'block';
}
function resetSlider() {
for (var i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = 'none';
}
}
function toLeft() {
resetSlider();
sliderImages[currentImg - 1].style.display = 'block';
currentImg--;
}
function toRight() {
resetSlider();
sliderImages[currentImg + 1].style.display = 'block';
currentImg++;
}
arrowLeft.addEventListener('click', function () {
if (currentImg === 0) {
currentImg = sliderImages.length;
}
toLeft();
});
arrowRight.addEventListener('click', function () {
if (currentImg === sliderImages.length - 1) {
currentImg = -1;
}
toRight();
});
initSlider();
})();
.user-card, userImage {
box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.25);
}
.user-card {
margin: 12px;
padding: 10px 10px 10px 10px;
border-radius: 12px;
width: 160px;
text-align: center;
float: left;
background-color: #fff;
}
.userImage {
border-radius: 50%;
height: 140px;
width: 140px;
border: 5px solid #eee;
}
.name {
font-size: 20px;
margin: 5px;
font-weight: bold;
}
.progress {
color: #25af53;
font-size: 48px;
}
#plus-button {
width: 55px;
height: 55px;
border-radius: 50%;
background: #428bca;
position: absolute;
top: 33%;
margin-left: 20px;
cursor: pointer;
box-shadow: 0px 2px 5px #666;
border: none;
outline: none;
}
.plus {
color: white;
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 0;
margin: 0;
line-height: 55px;
font-size: 38px;
font-family: 'Roboto';
font-weight: 300;
}
#plus-button:hover {
box-shadow: 0 6px 14px 0 #666;
transform: scale(1.05);
}
.wrapper {
position: relative;
}
.arrow {
cursor: pointer;
position: absolute;
width: 0;
height: 0;
border-style: solid;
top: 50%;
margin-top: 160px;
}
#left-arrow {
border-width: 50px 40px 50px 0;
border-color: transparent #000 transparent transparent;
left: 0;
margin-left: 25px;
}
#right-arrow {
border-width: 50px 0 50px 40px;
border-color: transparent transparent transparent #000;
right: 0;
margin-right: 25px;
}
.image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.vertical-align-wrapper {
display: table;
overflow: hidden;
text-align: center;
}
.vertical-align-wrapper span {
display: table-cell;
vertical-align: middle;
font-size: 5rem;
color: #ffffff;
}
#media only screen and (max-width : 992px) {
.vertical-align-wrapper span {
font-size: 2.5rem;
}
#left-arrow {
border-width: 30px 20px 30px 0;
margin-left: 15px;
}
#right-arrow {
border-width: 30px 0 30px 20px;
margin-right: 15px;
}
.arrow {
margin-top: -30px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div id="left-arrow" class="arrow"></div>
<div id="slider">
<div class="image image-one">
<div class="vertical-align-wrapper">
<div class="cardsCreation"></div>
<button id="plus-button">
<p class="plus">+</p>
</button>
</div>
</div>
<div class="image image-two">
<div class="vertical-align-wrapper">
<span>Slide 2</span>
</div>
</div>
<div class="image image-three">
<div class="vertical-align-wrapper">
<span>Slide 3</span>
</div>
</div>
</div>
<div id="right-arrow" class="arrow"></div>
</div>
So as u can see affter tapping "+" i add new ellement in to html.
And from two sides i have arrows which are changing slider.
After tapping arrows go down, and this is not good.
And after i will reach limit of adding element in one slider it's add new element to new slider page.
What i want ex:

If you are using toggle of display CSS property that happened because it remove whole element from the DOM so, I suggest you to use visibility or opacity properties to done your task.

JavaScript - Game. Algorithm to match two variables generate by random generator

I have problem with my algorithm in simple game.
Game Rules:
Match color NAME (choose one on the bottom) with COLOR of TEXT (on the top).
If none of the two bottom names match than click NEXT.
So the problem is that first correct match gives in console "GOOD" but second , third and any after, even if there is correct match in console I have firstly always "WRONG" and just after that I have "GOOD".
This is a picture with the problem described
It seems like the script remember past random numbers and match current result with them, because after few matches the score pointer raise very quickly (ex. 20 points in one time).
I will be happy to hear from you how can I fix this.
Thank you for any help !
Here you have link to codepen:
http://codepen.io/anon/pen/bWGGga
"use strict"
/*Start Container*/
/* var startContainer = document.getElementById("start_container");
var letsPlay = document.getElementById("start_game"); */
/* letsPlay.addEventListener("click", openTheGame); */
function openTheGame(){
setInterval(startGame, 3000);
};
openTheGame();
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var showColor = document.getElementById("show_color");
//SCORE
var score = document.getElementById("score");
var gameContainer = document.getElementById("game_container");
var gameOverContainer = document.getElementById("game_over_container");
/*Array of Colors*/
var arrCol = ["GREEN", "RED", "YELLOW", "BLUE", "ORANGE", "PURPLE"]
//Array from buttons texts to draw Show Color
var arrShowColor = [];
function startGame(){
/*BUTTONS TEXT & COLOR*/
btn1.addEventListener("click", matchColor1);
btn2.addEventListener("click", matchColor2);
btn3.addEventListener("click", matchColor3);
//draw numbers for buttons texts & colors
var randomBtn1Num = Math.floor(Math.random() * 3);
var randomBtn2Num = Math.floor(Math.random() * 3)+3;
var randomBtn3Num = Math.floor(Math.random() * 6);
//Buttons text (next button always "next")
btn1.innerHTML = arrCol[randomBtn1Num];
btn2.innerHTML = arrCol[randomBtn2Num];
//Buttons Color from random_color class
btn1.className = "random_color" + randomBtn2Num;
btn2.className = "random_color" + randomBtn3Num;
btn3.className = "random_color" + randomBtn1Num;
/*SHOW TEXT & COLOR*/
//Array from buttons texts to draw Show Color
arrShowColor[0] = randomBtn1Num;
arrShowColor[1] = randomBtn2Num;
arrShowColor[2] = randomBtn3Num;
console.log(arrShowColor);
//Show color
var randomShowColorNum = Math.floor(Math.random()*3);
var randomShowColor = arrShowColor[randomShowColorNum];
showColor.className = "random_color" + randomShowColor;
console.log(randomShowColor);
//Show text
var randomShowText = Math.floor(Math.random() * 6);
showColor.innerHTML = arrCol[randomShowText];
/*CLICK BUTTON - IF MATCH COLORS*/
function matchColor1(){
if( randomBtn1Num == randomShowColor) {
console.log("GOOD");
score.innerHTML ++;
} else {
console.log("WRONG");
/*gameContainer.style.display = "none";
gameOverContainer.style.display = "inline-block";*/
}
};
function matchColor2(){
if( randomBtn2Num == randomShowColor) {
console.log("GOOD");
score.innerHTML ++;
} else {
console.log("WRONG");
/*gameContainer.style.display = "none";
gameOverContainer.style.display = "inline-block";*/
}
};
function matchColor3(){
if(randomBtn1Num != randomShowColor && randomBtn2Num != randomShowColor){
console.log("GOOD");
score.innerHTML ++;
} else {
console.log("WRONG");
/*gameContainer.style.display = "none";
gameOverContainer.style.display = "inline-block";*/
}
};
/*Finish startGame*/
};
/*Main Styles*/
body {
background-image: url()
}
h4 {
color: #2626e6;
}
/*Main Container Styles*/
#main_container {
width:100%;
text-align:center;
}
/*Start Container Styles*/
#start_container {
position: relative;
display: inline-block;
width: 400px;
height: 400px;
top: 20px;
background-color: rgb(0, 0, 0);
border-radius: 50%;
box-shadow: 0px 0px 10px 10px black;
}
#start_container button {
}
/*Game Container Styles*/
#game_container {
position: relative;
display: inline-block;
width: 400px;
height: 400px;
top: 20px;
background-color: rgb(0, 0, 0);
border-radius: 50%;
box-shadow: 0px 0px 10px 10px black;
}
.second_level{
transform: rotateY(180deg);
}
.third_level{
transform: rotateX(180deg);
}
/*Score Container*/
#score_container {
display: inline-block;
position: relative;
height: 150px;
width: 150px;
background-color: rgb(0, 0, 0);
top: -40px;
margin-left: -5px;
margin-right: 30px;
border-radius: 50%;
box-shadow: 0px 0px 10px 10px black;
}
#score_container #score {
display: inline-block;
height: 30px;
width: 80px;
color: #ffffff;
margin-left: 0;
margin-right: 0;
}
/*Level Container*/
#time_container {
display: inline-block;
position: relative;
height: 150px;
width: 150px;
background-color: rgb(0, 0, 0);
top: -40px;
margin-left: 30px;
border-radius: 50%;
box-shadow: 0px 0px 10px 10px black;
}
#time_container #time {
display: inline-block;
height: 30px;
width: 80px;
color: #ffffff;
margin-left: 0;
margin-right: 0;
}
/*Random Show Color Style*/
#show_color{
margin-top: 50px;
font-size: 40px;
font-family: sans-serif;
font-weight: 800;
}
/*Random Colors Classes*/
.random_color0{
color: green;
}
.random_color1{
color: red;
}
.random_color2{
color: yellow;
}
.random_color3{
color: blue;
}
.random_color4{
color: orange;
}
.random_color5{
color: purple;
}
/*Buttons Container Styles*/
#game_container #buttons_container {
position: relative;
display: inline-block;
margin:0 auto;
margin-top: 120px;
border-top: 1px solid white;
padding-top: 30px;
}
/*Buttons Style*/
#buttons_container button {
height: 40px;
width: 150px;
font-size: 30px;
font-weight: 800;
border: none;
border-radius: 3px;
background-color: rgb(0, 0, 0);
margin: 3px;
}
#buttons_container button:focus{
outline: 0;
}
#buttons_container button:hover{
cursor: pointer;
}
/*Game Over Container*/
#game_over_container {
display: none;
position: relative;
width: 400px;
height: 400px;
top: 20px;
background-color: rgb(0, 0, 0);
border-radius: 50%;
box-shadow: 0px 0px 10px 10px black;
}
<div id="main_container">
<!-- <div id="start_container">
<button id="start_game">PLAY GAME</button>
</div> -->
<div id="score_container">
<h4>SCORE:</h4>
<div id="score">0</div>
</div>
<div id="game_container">
<div id="show_color_container">
<div id="show_color"></div>
</div>
<div id="buttons_container">
<button class="btn_select" id="btn1">ONE</button>
<button class="btn_select" id="btn2">TWO</button>
<button class="btn_select" id="btn3">NEXT</button>
</div>
</div>
<div id="game_over_container">
<h2 id="game_over">GAME OVER</h2>
</div>
</div>

Inside openTheGame() you're using setInterval which calls startGame() every 3 seconds, which in turn creates (adds) new event handlers every 3 seconds, which call your console.logs etc. Replace setInterval with setTimeout:
function openTheGame(){
setTimeout(startGame, 3000);
};
openTheGame();
EDIT: did not thoroughly check your code, but if you need that function called every 3 seconds, then you need to move the setup of click handlers outside that function.

Different navigation menu when user scrolls down

I am having trouble finding a way to create a different navigation menu when the user scrolls down. I am looking for something like this. http://www.kamellazaarfoundation.org
I want #small-menu to replace #big-menu when the user scrolls down.
JSFiddle
<div id="container">
<div id="big-menu">
<div id="big-logo">Big Logo</div>
<div id="big-navigation">Navigation</div>
<div id="big-search-bar">Search</div>
</div>
<!--<div id="small-menu"> ---Small Menu I want to replace the big menu with when user scrolls down---
<div id="small-logo">Small Logo</div>
<div id="small-navigation">Navigation</div>
<div id="small-search-bar">Search</div>
</div>-->
<div id="content"></div>
</div>
#container {
width: 600px;
border: 1px solid green;
padding: 10px;
}
#big-menu {
height: 100px;
border: 1px solid red;
}
#big-logo {
width: 100px;
height: 80px;
border: 1px solid blue;
margin-top: 10px;
float: left;
}
#big-navigation {
width: 300px;
height: 20px;
border: 1px solid orange;
float: left;
margin: 70px 0 0 10px;
}
#big-search-bar {
width: 150px;
height: 20px;
border: 1px solid pink;
float: right;
margin: 70px 10px 0 0;
}
#small-menu {
height: 60px;
border: 1px solid teal;
}
#small-logo {
height: 60px;
width: 60px;
float: left;
border: 1px solid red;
}
#small-navigation {
width: 300px;
height: 20px;
border: 1px solid black;
margin: 30px 0 0 10px;
float: left;
}
#small-search-bar {
width: 150px;
height: 20px;
border: 1px solid aqua;
float: right;
margin: 30px 10px 0 0;
}
#content {
height: 1200px;
margin-top: 10px;
border: 1px solid purple;
}
$(function() {
// Stick the #nav to the top of the window
var nav = $('#big-menu');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: 0,
left: nav.offset().left,
width: nav.width()
});
isFixed = true;
}
else if (!shouldBeFixed && isFixed)
{
nav.css({
position: 'static'
});
isFixed = false;
}
});
});

This would be your jQuery code:
var $document = $(document),
$element = $('.fixed-menu'),
className = 'hasScrolled';
$document.scroll(function() {
if ($document.scrollTop() >= 100) {
$element.addClass(className);
} else {
$element.removeClass(className);
}
});
Here i set up a jsFiddle as example

Instead of doing large DOM replacements, consider using classNames and CSS instead, f.ex:
<div id="container">
<div id="menu">
<div id="logo">Big Logo</div>
<div id="navigation">Navigation</div>
<div id="earch-bar">Search</div>
</div>
<div id="content"></div>
</div>
And the JS, something like:
$(window).scroll(function() {
var isSmall = /* true/false; detect scrolling distance */;
$('#menu').toggleClass('small', isSmall);
})
This will toggle the class small to the #menu container when a certain scrolling distance has been detected. The CSS could look something like:
#logo{height:100px} /* default (big) */
#menu.small #logo{height:60px} /* small */
These are just examples, you’ll need to figure out the implementation for your design yourself :)
Using CSS also gives you the benefit of doing fancy schmancy animations later on.