Transparent Navbar not becoming transparent after onscroll function - javascript

So, I am preparing for a Web Designing Competition and I was testing out a transparent navbar that will become White if pageYOffset is greater than 100, but now, when i scroll back in the 100px range, the navbar remains white.
Here's my code
window.onscroll = function() {
var navbar = document.getElementsByClassName('navbar')[0];
if (window.pageYOffset > 100) {
navbar.style.background = "#fff";
} else {
navbar.style.background = "transparent";
}
}
.navbar {
height: 50px;
width: 100%;
font-family: Arial;
position: fixed;
background: transparent;
color: #fff;
top: 0;
left: 0;
}
.navbar h3 {
float: left;
margin-left: 30px;
margin-top: 20px;
}
.navbar a {
float: right;
padding: 18px;
margin-right: 30px;
text-decoration: none;
color: #333;
}
/** FOR TESTING IN SNIPPET */
body {
height: 1000px;
background: red;
}
<div class="navbar">
<h3>OmniFoods</h3>
Home
About
Contact
</div>

Related

Scroll to top functionality not working on Firefox

I am using this
$(function() {
$('<button onclick="topFunction()" id="topBtn" title="Go to top"></button>').insertAfter('div#mw-content-text');
});
// When users scroll down 100px, show the Top button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
document.getElementById("topBtn").style.display = "block";
} else {
document.getElementById("topBtn").style.display = "none";
}
}
// When users click on Top button, scroll up
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
Which works fine on all browsers apart from Firefox. In this case, it is displayed in the middle of the screen and does not stick at the bottom right when scrolling.
The css I use is this:
#topBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 16px;
border: none;
outline: none;
background-color: rgba(0, 0, 0, 0.3);
color: white;
cursor: pointer;
padding: 20px;
border-radius: 4px;
}
#topBtn:hover {
background-color: #555;
}
#topBtn:before {
position: fixed;
bottom: 2px;
right: 36px;
color: #fff;
font-size: 42px;
font-family: 'Georgia';
content: "^";
font-weight: 600;
}
Reference page: https://lsj.gr/wiki/%CE%BB%CE%BF%CF%8D%CF%89
You need to add position: fixed; to the button. Then you can position it with left, right, bottom and top.
$(function() {
$('<button onclick="topFunction()" id="topBtn" title="Go to top">Click</button>').insertAfter('div#mw-content-text');
});
#mw-content-text {
height: 100px;
width: 100px;
background: green;
}
#topBtn {
position: fixed;
right: 30px;
bottom: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mw-content-text"></div>

jquery marquee make scroller from top to bottom instead of right to left

I want to make my marquee scroll from top to bottom, instead of on right to left.
I fount a snippet online that uses jquery .animate but I can figure out how to make it scroll instead on move right to left
jQuery(document).ready(function($) {
var marquee = function() {
var window_width = window.innerWidth;
var speed = 12 * window_width;
$('#marquee li:first').animate( {left: '-980px'}, speed, 'linear', function() {
$(this).detach().appendTo('#marquee ul').css('', "100%");
marquee();
});
};
if ($("#marquee li").length > 1) {
marquee();
}
});
html,
body {
margin: 0;
padding: 0;
width: 100%;
}
#marquee {
background: #090;
font-family: Arial, Verdana, sans-serif;
color: #FFF;
font-size: 12px;
text-align: center;
font-weight: bold;
line-height: 20px;
width: 1035px;
}
#marquee ul {
width: 100%;
height: 20px;
position: relative;
overflow: hidden;
}
#marquee li {
width: 980px;
line-height: 20px;
height: 20px;
position: absolute;
top: 0;
left: 100%;
text-align: center;
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="marquee">
<ul>
<li>test 1</li>
<li>test 2</li>
</ul>
</div>
You need to adjust for it to work on Y not X, so switch out width for height, and you'll need to position fixed or absolute, so it spans the entire window height.
$(document).ready(function($) {
var marquee = function() {
var window_height = window.innerHeight;
var speed = 12 * window_height;
$('#marquee li:first').animate( {top: '100%'}, speed, 'linear', function() {
$(this).detach().appendTo('#marquee ul').css('', "100%");
marquee();
});
};
marquee();
});
html,
body {
margin: 0;
padding: 0;
width: 100%;
}
#marquee {
background: #090;
font-family: Arial, Verdana, sans-serif;
color: #FFF;
font-size: 12px;
text-align: center;
font-weight: bold;
line-height: 20px;
width: 100px;
position:fixed;
top:0;
bottom:0;
left:0;
}
#marquee ul {
width: 100%;
padding:0;
margin:0;
height:100%;
}
#marquee li {
width: 100px;
line-height: 20px;
height: 20px;
position: absolute;
top: 0px;
left: 0;
text-align: center;
list-style: none;
font-size:14px;
}
Working example - https://jsfiddle.net/7sunt6fz/1/

Do not hide modal while clicking Left/Right in overlay

I need this modal to not hide when you click in the overlay area (right or left button).
Example: when your click right button in overlay area, hide the modal.
The modal do not hide when your clicked in overlay, something clicked in "closed button".
Thank you!
jQuery(document).ready(function(){
jQuery('#popup-container a.close').click(function(){
jQuery('#popup-container').fadeOut();
jQuery('#active-popup').fadeOut();
});
var visits = jQuery.cookie('visits') || 0;
visits++;
jQuery.cookie('visits', visits, { expires: 1, path: '/' });
console.debug(jQuery.cookie('visits'));
if ( jQuery.cookie('visits') > 1 ) {
jQuery('#active-popup').hide();
jQuery('#popup-container').hide();
} else {
var pageHeight = jQuery(document).height();
jQuery('<div id="active-popup"></div>').insertBefore('body');
jQuery('#active-popup').css("height", pageHeight);
jQuery('#popup-container').show();
}
if (jQuery.cookie('noShowWelcome')) { jQuery('#popup-container').hide(); jQuery('#active-popup').hide(); }
});
jQuery(document).mouseup(function(e){
var container = jQuery('#popup-container');
if( !container.is(e.target)&& container.has(e.target).length === 0)
{
container.fadeOut();
jQuery('#active-popup').fadeOut();
}
});
/* Fullscreen overlay for modal background */
#active-popup {
background-color: rgba(52,73,94, 0.7);
position: absolute;
width: 100%;
heighT: 100% !important;
top: 0;
left: 0;
z-index: 999;
}
/* Modal container */
#popup-container {
width: 45%;
height: 65%;
margin: 0 auto;
margin-top: 5%;
position: fixed;
left: 28%;
z-index: 999;
top: 0;
display: none;
background: #E74C3C;
}
.modal-content {
position: relative;
text-align: center;
}
#popup-window { position: relative; }
.modal-content h1,
.modal-content p { color: #fff; }
.modal-content p { padding: 20% 5% 0 5%; }
/* Close button */
#popup-container a.close {
position: relative;
float: right;
top: -15px;
right: -7px;
z-index: 99;
font-weight: bold;
font-size: 16px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding: 2px 5px 2px 6px;
line-height: 1em;
text-align: center;
background: #E74C3C;
border: 4px solid #fff;
cursor: pointer;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<div id="popup-container">
<a class="close">x</a>
<div id="popup-window">
<div class="splash-bg">
<h1>Modal Popup Window</h1>
<p>...</p>
</div>
</div>
</div>
By the look of it your overlay should hide, if this piece of code is fixed to be:
jQuery(document).mouseup(function(e){
var container = jQuery('#popup-container');
var activePopup = jQuery('#active-popup');
if(container.is(e.target) && !activePopup.container.is(e.target) && activePopup.has(e.target).length === 0) {
container.fadeOut();
activePopup.fadeOut();
}
});
So if you don't want the container to close model, remove above code.

Draggable not working in jqueryUI

I have a simple progress bar for my <audio> element and I want to make it so the knob is draggable, so I decided to try the jquery UI .draggable method, but it does not work on my knob. All it does is prevent my knob from appearing when you hover over the player as if the code beneath is invalid as soon as that code is in there.
I've tried this for hours and cannot figure out what's wrong with my code. You can see the player below here: I've included a test audio file also so you can see it in action. (The knob is supposed to fade in when you hover over the player, but doesn't after the draggable method. Something is making it invalid, if you wish to see the knob, simply remove the code marked /** This does not work /** )
/**
VARIABLES
**/
/** Elements **/
var player = $("#player");
var playerE = $("#player")[0];
var playerE = $("#player").get(0);
var playbutton = $("#playButton");
var scrubber = $(".scrubber");
var progress = $(".progress");
var buffered = $(".buffered");
var knob = $(".knob");
/** Variables **/
var isPlaying = 0;
var buffered = 0;
var progress = 0;
/**
CONTROLS
**/
/** Scrubber and Time **/
playerE.ontimeupdate = function () {
audioTimeUpdater();
};
function audioTimeUpdater() {
var progress = playerE.currentTime / playerE.duration;
var buffered = playerE.buffered.end(0) / playerE.duration;
$(".progress").width((progress * 100) + "%");
$(".buffered").width((buffered * 100) + "%");
}
/** This does not work **/
$("#.knob").draggable({
axis: "x"
});
/** This also stops working after the above code, if I remove it, it works. **/
$(".player-small").mouseenter(function () {
$(".knob").stop().fadeIn(200);
});
setTimeout(function () {
$(".player-small").mouseleave(function () {
$(".knob").stop().fadeOut(200);
});
}, 3000);
/**
EVENT HANDLERS
**/
/**
FUNCTIONS
**/
function play(file, title) {
playbutton.removeClass("playFailed");
var filename = "/music/" + file;
player.attr("src", filename).trigger("play");
playerHasError();
if (playerIsToggled === 0) {
playerToggle();
}
}
function playerHasError() {
$("#player").on("error", function (e) {
source = $("#player").attr('src');
pushModal("We can't play that!", "Audio element error.", ("An error occured and " + source + " cannot be played. If this is an error that persists please contact the website administrator."), "Audio element returned error trying to play source.", 1);
playbutton.addClass("playFailed");
});
}
button {
border: none;
outline: none;
}
body,
nav,
ul,
li,
a {
padding: 0;
margin: 0;
list-style: none;
font-family: 'Roboto', sans-serif;
text-decoration: none;
}
body {
overflow-y: scroll;
}
::selection {
background: rgba(255, 64, 129, 0.85);
color: black;
/* WebKit/Blink Browsers */
}
::-moz-selection {
background: rgba(255, 64, 129, 0.85);
color: black;
}
.player-small {
height: 55px;
width: 100%;
background: #ff4081;
}
.player-height-anim {}
.player-small .left {
height: 55px;
float: left;
width: 60%;
}
.player-small .right {
height: 55px;
float: right;
width: 40%;
}
.transport {
overflow: auto;
}
.play-button-con {
height: 55px;
width: 55px;
float: left;
}
.play {
padding-top: 3px;
width: 55px;
height: 55px;
font-size: 18px;
padding-right: 4px;
text-align: center;
}
.playFailed {
color: rgba(255, 255, 255, 0.17)!important;
pointer-events: none;
}
.next-button-con {
height: 55px;
width: 55px;
float: left;
}
.next {
padding-top: 2px;
padding-right: 8px;
width: 55px;
height: 55px;
text-align: center;
letter-spacing: -3px;
font-size: 11px;
padding-bottom: 2px
}
.scrubber-con {
float: left;
height: 55px;
width: calc(100% - 111px);
}
.scrubber {
width: calc(100% - 40px);
margin: auto;
margin-top: 25px;
height: 5px;
background: rgba(0, 0, 0, .04);
cursor: pointer;
}
.scrubber .knob {
float: right;
height: 13px;
width: 13px;
position: relative;
bottom: 4px;
left: 5px;
background: white;
border-radius: 50px;
display: none;
}
.scrubber .knob:hover {
cursor: grab;
}
.scrubber .knob:active {
cursor: grabbing;
}
.scrubber .progress {
height: 100%;
float: left;
background: white;
width: 0%;
position: relative;
z-index: 1;
transition: ease 300ms;
}
.scrubber .buffered {
height: 5px;
position: relative;
width: 0%;
background: rgba(0, 0, 0, .09);
transition: ease 1000ms;
}
.player-small button {
color: white;
float: left;
background: rgba(0, 0, 0, .04);
cursor: pointer;
}
.player-small button:hover {
background: rgba(0, 0, 0, .12);
}
<script type="text/javascript " src="http://code.jquery.com/jquery-latest.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="player-small">
<div class="w-ctrl">
<div class="controls">
<div class="left">
<div class="transport">
<div class="play-button-con">
<button class="play" id="playButton">►</button>
</div>
<div class="next-button-con">
<button class="next">►► </button>
</div>
<div class="scrubber-con">
<div class="scrubber">
<div class="progress">
<div class="knob"></div>
</div>
<div class="buffered"></div>
</div>
</div>
</div>
</div>
<div class="right">
<audio id="player" src="http://c1d20c5c.ngrok.io/music/test.mp3" controls="controls" preload="none"></audio>
</div>
</div>
</div>
</div>
So as you see the knob doesn't even appear, and if you make it appear, it is still not draggable. I tested the lint and everything is OK and should be working, but it isn't. What am I doing wrong?
Your selector is wrong:
$("#.knob").draggable({...});
#.knob won't work, you can either select via an id using #idname or via a class using .classname.
In your html, knob is a class, so using
$(".knob").draggable({
axis: "x"
});
Should work, but be aware that this selects all html elements with the knob class.

Jquery scrollbar hides elements in menu

I dont want my li list to disappear while the new menu (menu.fixed) appears! I just want'em to follow the fixed menu down! how do i fix this? Here is the jquery:
var menuTop = $('.menu').offset().top;
var menuClone = $('.menu').clone().addClass('fixed');
$(window).bind('scroll', function() {
var scrollY = window.pageYOffset;
if(scrollY > menuTop) {
if(menuClone.parent().length === 0) {
menuClone.appendTo($('.menu').parent());
}
} else if(menuClone.parent().length > 0) {
menuClone.remove();
}
});
And this the relevant css:
.menu {
background-color: white;
width: 80%;
height: 50px;
font-size: 1.5em;
font-family: Roboto;
margin-bottom:0px;
margin-left:10%;
border-bottom: 2px solid #756B6B;
}
.menu.fixed {
position: fixed;
left: 0;
top: 0;
height: 50px;
width:76.8%;
margin-left: 11.55%;
border-bottom: 2px solid #756B6B ;
}
li {
float: right;
margin-left:40px;
list-style: none;
position:relative;
padding-bottom: 10px;
}
and the html
<div class="menu">
<ul>
<li id="sistaord">ovrigt</li>
<li id="jobberfarenhet">Jobberfarenhet</li>
<li>Utbildning</li>
</ul>
</div>
Probably you don't need to clone menu. You only need to switch class "fixed" for the menu element:
HTML the same,
CSS:
.menu {
background-color: white;
width: 80%;
height: 50px;
font-size: 1.5em;
font-family: Roboto;
margin-bottom:0px;
margin-left:10%;
padding-bottom: 10px;
border-bottom: 2px solid #756B6B;
}
.menu.fixed {
position: fixed;
left: 0;
top: 0;
}
li {
float: right;
margin-left:40px;
list-style: none;
}
JS:
var menu = $('.menu');
var menuTop = menu.offset().top;
$(window).bind('scroll', function() {
var scrollY = window.pageYOffset;
if (scrollY > menuTop) {
if (!menu.data('fixed')) {
menu.addClass('fixed').data('fixed', true);
}
} else if (menu.data('fixed')) {
menu.removeClass('fixed').data('fixed', false);
}
});
Here is a demo

Categories