We Keep Coding

Keep updating if/else statement

I have a little issue with my jQuery. I have made a responsive navigation bar and want to add a class called 'mobile' to it when it comes close to the logo.
Here is my code:
function responsiveNav(){
var navSpace = $(".nav").offset().left;
if(navSpace < 320){
$('.nav').addClass('mobile');
$('.sub-nav').addClass('mobile');
$('.navbar .container').addClass('container-fluid');
$('.navbar .container-fluid').removeClass('container');
$('.navbar-brand > img').css("margin-left", "15px");
$('.mobile-icon').show();
} else {
$('.nav').removeClass('mobile');
$('.sub-nav').removeClass('mobile');
$('.navbar .container-fluid').addClass('container');
$('.navbar .container').removeClass('container-fluid');
$('.navbar-brand > img').css("margin-left", "0px");
$('.mobile-icon').hide();
}
}
$(window).resize(responsiveNav);
$(document).ready(responsiveNav);
It does work but when I resize my screen to normal desktop format again my navigation bar still have the 'mobile' class. How can I update my if/else statement so the class will be removed when resizing again?
Thanks!

Update
Could you also post the output of the following line?
Menu::showMenu(false, true, 'nav navbar-nav navbar-right');
It would be better if you would simply reproduce your problem in a snippet/fiddle.
Original
I would have added this as a comment, but I do not have enough reputation, so:
I cannot reproduce your problem, but all your code seems ok (see snippet or this fiddle: https://jsfiddle.net/Luc93/kjeu61qu/). Maybe you could give more context?
function responsiveNav(){
var navSpace = $("#nav").offset().left;
if(navSpace < 320){
$('#nav').addClass('mobile');
$('#nav').removeClass('desktop');
} else {
$('#nav').removeClass('mobile');
$('#nav').addClass('desktop');
}
}
$(window).resize(responsiveNav);
$(document).ready(responsiveNav);
#nav {
height:100px;
width:300px;
float:right;
}
#nav.desktop {
background:red;
}
#nav.mobile {
background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav" class="desktop"></div>

Slide left and hide effect using jquery or CSS

I am working on a slide menu,
Please have a look at the demo site:
kotechweb.com/new_focus/
At left side there is a main menu , when toggle , the words right now is squeeze and hide, here is how I implement:
var is_closed = false;
$("#menu_btn").on("click", function () {
if (is_closed) {
$(".nav_bar ul").css("width", "75%");
} else {
$(".nav_bar ul").css("width", "0");
}
is_closed = !is_closed;
});
CSS:
transition: all 1s;
So the logic is using transition to implement the slide animation, however, this approach the text is squeeze when the width is smaller.
How to make the text slide left as well?

You can create a "mask" using
#menu_right{
overflow:hidden;
...
}
and move your menu in this way:
var is_closed = false;
$("#menu_btn").on("click", function () {
if (is_closed) {
$(".nav_bar ul").css("margin-left", "-100%");
} else {
$(".nav_bar ul").css("margin-left", "-0%");
}
is_closed = !is_closed;
});
I think this works like espected

First of all, instead of using CSS transitions use animate in JQuery as it allows for more functionality.
What I actually do for my slide menus is adding overflow-x: hidden to my body tag. I then position the menu outside of the page, so I give it the CSS value of right: 0 to position it just outside the left hand side of the page.
What this allows me to do is that when the user clicks the menu button you can animate the menu to slide out by simply changing the right value, so your final code would look something like this
$("#menu_btn").on("click", function () {
if (is_closed) {
$("#slideoutMenu").animate({right:"[insert width of nav menu]"}, 1000);
} else {
$("#slideoutMenu").animate({right:"0"}, 1000);
}
is_closed = !is_closed;
});

Use just jquery and jquery ui : Here
At the top reference the bellowed code.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
And at script only add this :
$(".nav_bar ul").toggle( "slide");
Or also can use with customized time delay ms unit.
$( ".nav_bar ul" ).toggle( "slide",2000 );

Maybe you should .hide() the text when the sidebar collapses. Hope this helps.

Toggle class of sticky menu on scroll with overflow hidden on page

I want to add a class .custom-menu-bg to sticky menu .custom-menu on scroll, while having overflow: hidden on body. Here's my code :
<script type="text/javascript" src="css/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var _rys = jQuery.noConflict();
_rys("document").ready(function() {
_rys(window).scroll(function() {
if (_rys(this).scrollTop() > 1) {
_rys('.custom-menu').addClass("custom-menu-bg");
} else {
_rys('.custom-menu').removeClass("custom-menu-bg");
}
});
});
</script>
But this code doesn't work with overflow: hidden on body tag
so I tried :
$('html').on('DOMMouseScroll', function(e) {
var delta = e.originalEvent.detail;
if (delta < 0) {
if ($('body').hasClass('section-element-1'))
$('.custom-menu').addClass("custom-menu-bg");
} else if (delta > 0) {
$('.custom-menu').removeClass("custom-menu-bg");
}
});
But this code only works for Mozilla and it's not a solution even, it's just a temp fix or work-around.
What I want is when I scroll down $('.custom-menu').addClass("custom-menu-bg"); i.e. custom-menu-bg class gets added to custom-menu.
And when I scroll up to the top $('.custom-menu').removeClass("custom-menu-bg"); i.e. custom-menu-bg class gets removed from custom-menu.
The top of body,document,window etcetera is always 0.
And top of my div with class custom-menu also has top: 0 always.
I'm looking for a permanent solution which works on all browsers.

I've reproduced the same effect you wanted HERE.
The only change that I've brought in comparison to your code is that I've made a makeshift body div and applied overflow: hidden on it.
Then, using jQuery, you'll be checking for the scroll event triggered by a wrapper inside the body div - which is in charge of holding the content) - and not by itself (or even document).
$('.wrapper').scroll(function () {
if ($(this).scrollTop() > 0) {
$('.custom-menu').addClass("custom-menu-bg");
} else {
$('.custom-menu').removeClass("custom-menu-bg");
}
});
This is because the makeshift body div has an overflow property set to hidden, and therefore won't generate that particular scroll event (maybe it would if you had the handler registered using browser-specific scroll events). Whereas the inner wrapper div will always have it's height property determined by it's content and is therefore scrollable.
NOTE: jQuery's scroll() is cross-browser, and hence a permanent solution.

You can bind on any id or on class also . its on you for now demo i
am using window .
This single event works for both if you have scroll or not. i.e overflow:hidden or overflow:scroll
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up
$('.custom-menu').removeClass("custom-menu-bg");
}
else {
// scroll down
$('.custom-menu').addClass("custom-menu-bg");
}
});
.custom-menu {
background-color: black;
height: 100px;
width: 100%
}
.custom-menu-bg{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-menu">
</div>
Or you can also use this jQuery mousewheel plugin https://github.com/brandonaaron/jquery-mousewheel.

//toggled is class when mobile menu is opened
let moveScroll = '';
window.onscroll = function (e) {
const navBar = document.getElementById('id-of-your-navigation-bar');
if (moveScroll > 0 && navBar.classList.contains('toggled')) {
navBar.classList.remove('toggled');
moveScroll = 0;
} else if (navBar.classList.contains('toggled')) {
moveScroll = 1;
}
};

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");
}
});