We Keep Coding

Expanding menu not responding

I'm trying to fix a mobile menu in a WordPress child theme (from Twentyseventeen) that is no longer expanding when 'menu' is clicked. Basically I've had to tear the header apart to move things around and now the aria expanded menu isn't recognised. Instead I'm trying to use javascript to change the display property of the ul from none to block, but this isn't working either - mostly because I don't know the first thing about js and I've just tried making something from bits and pieces of code.
The demo of the site is live at http://www.histeve.co.uk/testing/triangledrivertraining/
The javascript I'm trying to use is as follows:
<script>
var element = document.getElementById("topMenu");
document.getElementById("navBtn").addEventListener("click", toggleNav);
function toggleNav() {
if( element.style.display == 'none' ) {
function show() {('#topMenu').css ('display:block');}
} else {
function hide() {('#topMenu').css ('display:none'); }}
}
</script>
This is no longer kicking out errors, but it's not doing anything at all.
If anyone has any ideas, your help is greatly appreciated!
Thanks
Steve

Try this:
<script>
var $topMenu = jQuery("#topMenu");
jQuery("#navBtn").click(toggleNav);
function toggleNav() {
if($topMenu.is(":visible")) {
$topMenu.hide();
} else {
$topMenu.show();
}
}
</script>
UPDATE:
To always show the menu on desktop you should go with this solution:
Add following styles to your page:
<style>
#media (max-width: 768px) {
.menu-navigation-container {
display: none;
}
.menu-navigation-container.show-on-mobile {
display: block;
}
}
</style>
Add use this JS:
<script>
var $topMenu = jQuery(".menu-navigation-container");
jQuery("#navBtn").click(function(){
$topMenu.toggleClass("show-on-mobile");
});
</script>

You should fix your both selector which should start with $ (since it is wordpress you might have to user jquery instead of $) as well as your css function as follows.
<script>
var element = document.getElementById("topMenu");
document.getElementById("navBtn").addEventListener("click", toggleNav);
function toggleNav() {
if( element.style.display == 'none' ) {
function show() {$('#topMenu').css ('display','block');}
} else {
function hide() {$('#topMenu').css ('display','none'); }}
}
</script>
Alternative
Instead of using css you can toggle class which is much easier
function toggleNav() {
$('#topMenu').toggleClass('active');
}
then in css
#topMenu{display: none;}
#topMenu.active{display: block;}

How to animate navigation bar with jquery

I am creating a navigation bar see my fiddle: https://jsfiddle.net/dfbwp71u/
when I uses css() its working properly but when I use animate() its not giving me the result.
my html:
<nav class="navigation navbar-fixed-top">
</nav>
jquery:
$(window).scroll(function(){
// these conditional statements are working fine
if($(window).scrollTop() > 5)
{
$('.navigation').css({
'background-color':'#000'
});
}
else
{
$('.navigation').css({
'background-color':'#eee'
});
}
});
When I replace the .css() to animate() it stops giving me the result.
// ???
$('.navigation').animate({
'background-color':'#000'
});

Well you don't need animate for this unless you are not satisfied with css transition
DEMO
What I would do is just add a class called fixed and assign background-color:#000 like one below:
.fixed{
background-color:#000
}
and then I'll toggle this class based on the condition as below:
$(window).scroll(function(){
if($(window).scrollTop() > 5)
{
$('.navigation').addClass('fixed');
}
else
{
$('.navigation').removeClass('fixed');
}
});
The main thing we need to add here is transition property to .navigation and it will take care of rest:
.navigation
{
min-height:100px;
max-width:100%;
background-color:#eee;
transition: background 500ms;//change time accordingly
}

According to http://api.jquery.com/animate/
All animated properties should be animated to a single numeric value,
except as noted below; most properties that are non-numeric cannot be
animated using basic jQuery functionality (For example, width, height,
or left can be animated but background-color cannot be, unless the
jQuery.Color plugin is used)
so either use jquery-ui or jQuery.Color plugin

Add Jquery UI if you not add and change css property name 'background-color' to 'backgroundColor',
$(window).scroll(function(){
if($(window).scrollTop() > 5)
{
$('.navigation').animate({backgroundColor:'#eee'});
}
else
{
$('.navigation').animate({backgroundColor:'#000'});
}
});

what is the alternate way to do a function based on window width jquery?

I am trying to show the button and hide the stuff when the width <450, if >450, do the switch way, hide the button and show the stuff. There is no problem to hide and show with the css code, but the problem is once I click the button in <450, the stuff show up, if I go back to >450 screen, the button will not hide again. I had tried to put window.resize in the jquery, it give me weird performance. Click run the code to see it. Appreciate.
if ($(window).width() < 450) {
var show_stuff=$('#all_vote_menu');
var button_menu=$('#button');
$(button_menu).on('click', function(){
$(show_stuff).show(400,'swing');
$(button_menu).hide();
});
$(document).mouseup(function (e){
if (!show_stuff.is(e.target) // if the target of the click isn't the container...
&& show_stuff.has(e.target).length === 0) // ... nor a descendant of the container
{
$(show_stuff).hide(400,'swing');
$(button_menu).fadeIn();
}
});
}
#button{
display:none ;/*hide when >450px*/
}
.all_vote_menu{
width:200px;
height:200px;
background:yellow;
}
#media screen and (max-width: 450px) {
#button{
display:block ;/*show when <450px*/
color:green;
}
.all_vote_menu{
display:none;/*hide when <450px*/
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button" name="all_vote_show" value="Menu"/>
<div class="all_vote_menu" id='all_vote_menu'>hello</div>

you don´t need the if condition to verify the window width because the button is only accessible when the window is smaller then 450px.
remove this and it works.
Try this DEMO
jquery code:
var show_stuff=$('#all_vote_menu');
var button_menu=$('#button');
$(button_menu).on('click', function(){
$(show_stuff).show(400,'swing');
$(button_menu).hide();
});
$(document).mouseup(function (e){
if (!show_stuff.is(e.target) // if the target of the click isn't the container...
&& show_stuff.has(e.target).length === 0) // ... nor a descendant of the container
{
$(show_stuff).hide(400,'swing');
$(button_menu).fadeIn();
}
});

Get rid of the width check if ($(window).width() < 450) {
Add check in the if that is doing the showing
$(document).mouseup(function (e){
if ($(window).width() >= 450 && !show_stuff.is(e.target) ...

How can I hide a button when scrolled to the top of a page?

I'm trying to adapt this JSFiddle to make the menu button on my website hide when I'm at the top of the page and show when I start scrolling down.
I modified the JS to match the CSS on my site. Then I placed it in tags in the head of my page
var $scb = $('<div class="toggle-menu-wrap"></div>');
$('.top-header').append($scb);
var $ccol = $('.content');
$ccol.scroll(function(){
$scb.stop(true,true).fadeTo(500, $ccol.scrollTop() > 10 ? 1 : 0);
});
However, it still doesn't work. Am I making a mistake in how I'm modifying the JS to fit my CSS?

You can include the toggle-menu-wrap element in your HTML from the start. There is no need to insert it using JS.
Write the one line of CSS you need, which is to hide the element from the beginning
.toggle-menu-wrap {
display: none;
}
Your version of jQuery uses 'jQuery' instead of '$' to reference itself. I would also re-write your JS like:
jQuery(document).ready(function() {
fadeMenuWrap();
jQuery(window).scroll(fadeMenuWrap);
});
function fadeMenuWrap() {
var scrollPos = window.pageYOffset || document.documentElement.scrollTop;
if (scrollPos > 300) {
jQuery('.toggle-menu-wrap').fadeIn(300);
} else {
jQuery('.toggle-menu-wrap').fadeOut(300);
}
}

Like #murli2308 said in the comments above, you need to attach a scroll event listener to the window:
$(document).ready(function () {
var $scb = $('<div class="scroll-border"></div>');
$('.above').append($scb);
var $ccol = $('.content');
$(window).scroll(function(){
$scb.stop(true,true).fadeTo(500, $ccol.scrollTop() > 10 ? 1 : 0);
});
})
Wrapping your code in $(document).ready() would also be a good idea.
The reason $ccol.scroll(function() { ... works in that fiddle is because of the CSS:
.content{
height: 200px;
width: 200px;
overflow: auto;
}
Notice overflow: auto;. This causes that specific div to be scrollable. However, on your website, you scroll the entire page, not $ccol. This means the event handler will never fire a scroll event (since $ccol will never scroll).

You might have forgotten to link Jquery.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
Link this inside your head tag incase.....

This should do the job:
$(window).scroll(function(e){
if ($(this).scrollTop() > 0) {
$(".your_element").css("display", "block");
} else {
$(".your_element").css("display", "none");
}
});

Javascript can't finish code

When user scroll and
navmenu
come to
margin-top 20px
, then the menu will stop and be fixed. How i can to that? navmenu is Div id of my menu. I try all ways and I can not figure out.
Here is code that i need ...
$("navmenu").scrollTop(function () {
var height = $("navmenu").scrollTop();
alert(height);
if (height > 20) {
/* need help here */
}
});

Sample Fiddle
This works on scrolling on the page itself, you may want to adjust if you're referring to scrolling specific element.
CSS
#navmenu {
width:100%;
height:20px;
background:grey;
position:relative;
}
jQuery
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 20) {
$('#navmenu').css('position', 'fixed');
} else {
$('#navmenu').css('position', 'relative');
}
});

navmenu is Div id of my menu
The selector navmenu will match <navmenu> elements (which do not exist in HTML).
You want #navmenu.