Javascript removeClass/toggleClass works on desktop but not responsive page - javascript

I bought this theme a while back and have been chopping it up and modifying it to add/remove functionality. There is this slidein menu that appears on the page once a link is clicked from the navbar menu. The issue is that there is an X button to close the menu that is supposed to toggle/remove a class from the #btn-offcanvas-menu element when it is clicked (#btn-close-canvasmenu is clickable element); it works on the desktop but not the responsive mobile site. The only way it is toggled/removed on mobile is if the original link is clicked again. I have looked at the below questions here, and several others, including trying to use the closest/find options but nothing seems to work. What am I missing?
Desired behavior: the isLeft class should toggle/be removed when the #btn-close-canvasmenu link is clicked. It is on desktop but not mobile.
Javascript not working on mobile but works on desktop.
JavaScript - removeClass not working?
ToggleClass and RemoveClass not working
JQuery - ToggleClass/AddClass/RemoveClass
How to toggle class of closest element jquery toggle class on closest span
This is relevant portion of the index page...
<li id="recent-mobile"><!-- this is hidden by CSS on desktop -->
<a id="btn-offcanvas-menu" href="#">Recent Results</a>
</li>
<li id="recent-results"><!-- this is hidden by CSS on mobile -->
<div class="header-buttons pull-right hidden-xs hidden-sm">
<div class="navright-button">
<i class="fa fa-bars"> Recent Results</i>
</div>
</div>
</li>
<!-- Menu OffCanvas right begin -->
<div class="navright-button">
<div class="compact-menu-canvas" id="offcanvas-menu">
<h3>menu</h3><a id="btn-close-canvasmenu"><i class="fa fa-close"></i></a>
<nav>
<ul class="clearfix">
<li>Home</li>
<li>Features</li>
<li>Pages</li>
<li>Portfolios</li>
<li>Shop</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<!-- Menu OffCanvas right close -->
This is the relevant portion of the javascript compact.js file...
$("#btn-close-canvasmenu").on("click", function() {
$("#offcanvas-menu").stop().animate({
right: "-260px"
}, 300), $("a#btn-offcanvas-menu").removeClass("isLeft")
});
$(document).on("click", "#btn-offcanvas-menu, #btn-offcanvas-menu-mobile", {} , function(a){
var id = $(this).attr('id');
if (id === "btn-offcanvas-menu-mobile") {
$("#btn-close-canvasmenu").toggleClass("mobile");
}
return a.preventDefault(), $(this).hasClass("isLeft") ? $("#offcanvas-menu").stop().animate({
right: "-260px"
}, 300) : $("#offcanvas-menu").stop().animate({
right: "0px"
}, 300), $(this).toggleClass("isLeft"), false
});
EDIT (fixed 2/16/20): I edited the js file file to reflect this updated function: $("#btn-close-canvasmenu").on("click", function()
Essentially, what fixed it was changing the selector from #btn-offcanvas-menu to a#btn-offcanvas-menu. Not sure why that worked as opposed to using closest/find method but once I did, it toggled/removed the class on both desktop and mobile correctly. If anyone has anything thoughts on why the a made the difference with the selector, I'd appreciate the feedback as I am not an expert on js/jQuery. Otherwise, this can be considered closed.

Changing the selector in the compact.js file from #btn-offcanvas-menu to a#btn-offcanvas-menu fixed the issue and while this worked, it was the wrong way to correct the issue as connexo pointed out due to the duplicate ids.
The correct way to resolve this was to change the mobile navbar itself so I could use an id specifically for the mobile that only appeared there.
<nav id="mobile-menu" class="site-mobile-menu hidden-lg hidden-md">
<ul>
<li id="recent-mobile">
Recent Results
</li>
</ul>
</nav>
Next I changed the js function that populated the html for the mobile menu to use prepend instead of append so it populated everything above the Recent Results link...
$("#desktop-menu > ul").children().clone().prependTo($("#mobile-menu > ul")), $("#show-mobile-menu").on("click", function() {
$(this).toggleClass("clicked"), $("#mobile-menu > ul").stop(true, true).slideToggle()
});
Then I tweaked the js function to toggle the class to mobile for the #btn-close-canvasmenu if the selector was #btn-offcanvas-menu-mobile to be used later...
$(document).on("click","#btn-offcanvas-menu,#btn-offcanvas-menu-mobile", {} , function(a){
var id = $(this).attr('id');
if (id === "btn-offcanvas-menu-mobile") {
$("#btn-close-canvasmenu").toggleClass("mobile");
}
return a.preventDefault(), $(this).hasClass("isLeft") ? $("#offcanvas-menu").stop().animate({
right: "-260px"
}, 300) : $("#offcanvas-menu").stop().animate({
right: "0px"
}, 300), $(this).toggleClass("isLeft"), false
});
Finally, I tweaked the js function that closed the menu to check the class to determine which id to toggle the isLeft class for...
$(document).on("click","#btn-close-canvasmenu", {} , function(a){
var id = $(this).attr('id');
if ($(this).hasClass("mobile")) {
var container = $("#btn-offcanvas-menu-mobile");
$("#btn-close-canvasmenu").toggleClass("mobile");
} else {
var container = $("#btn-offcanvas-menu");
}
$("#offcanvas-menu").stop().animate({
right: "-260px"
}, 300), container.removeClass("isLeft")
});

Related

How to change css on click in javascript?

I am having an issue with the links in my dropdown nav menu. I believe that the issue is due to an owl carousel that is in the body, because when I inspect the nav items (right-click inspect element) the console highlights the owl-carousel, also when I change the .owl-carousel display to none in the console, then the links in the nav menu will work (color change on hover, mouse changes to pointer). Therefore, I want to change the .owl-carousel display to none when the toggle menu is active (when the burger menu is clicked).
var burgerMenu = function() {
$("body").on("click", ".js-fh5co-nav-toggle", function() {
$("#fh5co-nav > ul > li").css({ marginLeft: -50, opacity: 0 });
$(this).toggleClass("active");
var mainNav = $("#fh5co-main-nav");
mainNav.slideToggle(400).toggleClass("active");
if (mainNav.hasClass("active")) {
menuAnimate(1, 0, 400, 200);
} else {
menuAnimate(0, -50, 1, 0);
}
});
};
<!-- Mobile Toggle Menu Button -->
<i></i>
<!-- End Mobile Toggle Menu Button -->
<!-- Main Nav -->
<div id="fh5co-main-nav">
<nav id="fh5co-nav" role="navigation">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Products</li>
<li>Location</li>
<li>Cafe</li>
<li>Contact</li>
</ul>
</nav>
</div>
<!-- End Main Nav -->
I don't really have any idea how to go about this. I have tried adding:
$('.owl-carousel').css({display: none});
to the burgerMenu function, but this changed nothing.
Any ideas would be greatly appreciated.
***EDIT:
thanks! .css({"display": "none"}) - this worked, but something i didn't think of - the other pages don't have an owl-carousel and I am still having this problem. I think the best thing would be to just have the body shift down when the nav menu is clicked - is this possible? any ideas? thanks, again.
Alternatively since you don't have dynamic css, you can use another class and the class:
in your css file:
.hidden {
display: none;
}
and in you js:
$('.owl-carousel').addClass("hidden");
$('.owl-carousel').css("display", "none");
try this instead of
$('.owl-carousel').css({display: none})
You can do something like the below code.
$('#hello').click(function() {
$('#hello').css({
'background-color': 'blue',
'color': 'white',
'font-size' : '35px'
});
});
#hello{
cursor : pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="hello">hello world!</div>
Using core JS:
document.getElementById("my_custom_id").style.color="red";
In the above line of code you can set any CSS, I set the color to red for my_custom_id.

Closing dropdown menu on parent's click [duplicate]

I want to have my menu closed when the user clicks outside the menu, not only outside the navbar element. Because I have more collapses in my menu, this solution did not work for me: How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3?
The menu disapeares when I click outside the menu, but when I click on the link with a dropdown, the whole menu collapses.
<div class="collapse navbar-collapse nav-mobile" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="list-group panel">
Webshop
<ul class="collapse" id="submenu-1">
Industriƫle verpakkingen
Promotionele verpakkingen
Gelamineerde verpakkingen
Enveloppen &verzend verpakkingen
Medische verpakkingen
Co-packing
</ul>
</li>
</ul>
You can use this to collapse if not clicking a link: fiddle
$(document).click(function(e) {
if (!$(e.target).is('a')) {
$('.collapse').collapse('hide');
}
});
another alternative, you can add code below :
<script>
$(document).ready(function(){
$(".list-group ").hover(
function() {
$('.collapse', this).stop( true, true ).slideDown("fast");
$(this).toggleClass('open');
},
function() {
$('.collapse', this).stop( true, true ).slideUp("fast");
$(this).toggleClass('open');
}
);
});
</script>
another example : dtc-eng
Here is my take on this:
$(document).on('click', function(event){
var $clickedOn = $(event.target),
$collapsableItems = $('.collapse'),
isToggleButton = ($clickedOn.closest('.navbar-toggle').length == 1),
isLink = ($clickedOn.closest('a').length == 1),
isOutsideNavbar = ($clickedOn.parents('.navbar').length == 0);
if( (!isToggleButton && isLink) || isOutsideNavbar ) {
$collapsableItems.each(function(){
$(this).collapse('hide');
});
}
});
This solution handles:
single page website/applications (and will work on multi-pages too).
clicks on:
.navbar-toggle elements (could be <buttons> or <a>, and it handles clicks on potential inner elements like <span> or <strong> or whatever).
on simple <a> elements (again, it handles clicks on inner elements).
just outside some particular parent (ie. .navbar).
multiple collapsable (.collapse) elements that might be open (indistinct to where they are placed in the DOM).
Not enough for you? No problem. You can customize most of the selectors passed to jQuery (document, .collapse, .navbar, etc) to suit your needs or even add more conditions.

How do I simulate a multi page site using jQuery?

The site I am working on is a single page site but I want to simulate a multipage site using css/jQuery to hide/reveal the different sections of the site when the correct link is clicked in the nav.
Here is the code I am currently working with on JSFiddle.
HTML
<header id="top">
<nav>
<ul>
<li>
About
</li>
<li>
Skills
</li>
<li>
Projects
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<main role="main" id="main">
<section id="about">
</section>
<section id="skills">
</section>
<section id="projects">
</section>
<section id="contact">
</section>
</main>
CSS
.active {
background: $lightest-blue;
color: $blue;
}
.hide-section {
display: none;
}
section {
height: 1em;
background: blue;
}
JavaScript
// Create Variables pointing to all Nav links and the About section link.
var siteNav = $("#top li").children();
var aboutLink = siteNav[0];
// Create Variables poingting to all Sections and the About section.
var siteSections = $("#main").children();
var aboutSection = siteSections[0];
// Hide all major sections by adding CSS class.
siteSections.addClass("hide-section");
// Upon document being ready, make user "arrive" at the About section by removing the hide class on it.
// Add active class to About section link.
$(function() {
$(aboutLink).addClass("active");
$(aboutSection).removeClass("hide-section");
});
// 1. Capture click on Nav anchor.
$("#top a").click(function() {
// 1.1 Remove active class from all links.
siteNav.removeClass("active");
// 1.2 Add active class to clicked link.
$(this).addClass("active");
// 1.3 Identify proper section.
var hrefLink = $(this).attr("href");
// 1.4 Hide all other sections.
siteSections.addClass("hide-section");
// 1.5 Reveal proper section.
});
Right hold up, you're trying to reinvent the wheel here! :)
Have a look at the Jquery tabs library:
http://jqueryui.com/tabs/
Just copy the code into your site,
remove the style sheet link and away you go! :D
Use this javascript to toggle between screens. I added some css so you can see the different sections come and go.
$("#top a").click(function() {
// 1.1 Remove active class from all links.
siteNav.removeClass("active");
// 1.2 Add active class to clicked link.
$(this).addClass("active");
// 1.3 Identify proper section.
var hrefLink = $(this).attr("href");
// 1.4 Hide all other sections.
$('#'+siteSections[0].id).hide();
$('#'+siteSections[1].id).hide();
$('#'+siteSections[2].id).hide();
$('#'+siteSections[3].id).hide();
// 1.5 Reveal proper section.
$(hrefLink).show();
});
and some css
section{
background:red;
}
#about{
background-color:blue;
}
#skills{
background-color:yellow;
}

style a navigation link when a particular div is shown

I have JQuery working to show a particular div when a certain link is clicked.
I have managed to apply the effect I'm after with the main navigation bar through id'ing the body tag and using css to style when the id is found.
However, i'd like to apply the same effect to the sub navigation when a certain div is present.
How the main navigation is styled:
HTML:
<nav>
<ul>
<li id="nav-home">Home</li>
<li id="nav-showreel">Showreel</li>
<li id="nav-portfolio">Portfolio</li>
<li>Contact</li>
</ul>
</nav>
CSS:
body#home li#nav-home,
body#portfolio li#nav-portfolio
{
background: url("Images/Nav_Underline.png") no-repeat;
background-position: center bottom;
color: white;
}
(Other links havent been added to styling as those pages are still in development)
How the sub navigation is structured:
<nav id="portfolioNav">
<ul>
<li id="portfolio-compositing"><a id="compositingWork" href="#">Compositing</a></li>
<li id="portfolio-animation"><a id="animationWork" href="#">Animation</a></li>
<li id="portfolio-motionGfx"><a id="GFXWork" href="#">Motion Graphics</a></li>
<li id="portfolio-3D"><a id="3DWork" href="#">3D</a></li>
</ul>
</nav>
As you can see, its similar format to the main navigation, however i've tried the same approach and it doesn't work :(
The Javascript that switches the divs on the navigation click:
<script type="text/javascript">
$(document).ready(function() {
$('#3DWork').click(function(){
$('#portfolioWork').load('portfolioContent.html #Portfolio3D');
});
$('#GFXWork').click(function(){
$('#portfolioWork').load('portfolioContent.html #motionGraphics');
});
$('#compositingWork').click(function(){
$('#portfolioWork').load('portfolioContent.html #PortfolioCompositing');
});
$('#animationWork').click(function(){
$('#portfolioWork').load('portfolioContent.html #PortfolioAnimation');
});
});
</script>
JSFiddle for full HTML & CSS : JSFiddle File
The effect I'm After:
You can modify your script like this:
$('#compositingWork').click(function(){
$(this).addClass('active');
$('#portfolioWork').load('portfolioContent.html #PortfolioCompositing');
});
and add this to css:
.active
{
background: url("Images/Nav_Underline.png") repeat-x;
background-position: center bottom;
}
upd. but the easier way is to combine similar strings:
$(document).ready(function() {
// bind link id and id for load()
var loadDiv = {
'3DWork': 'Portfolio3D',
'GFXWork': 'motionGraphics',
'compositingWork': 'PortfolioCompositing',
'animationWork': 'PortfolioAnimation'
};
var links = $('#3DWork, #GFXWork, #compositingWork, #animationWork');
links.click(function(e) {
e.preventDefault();
// remove effect from all links
links.parent('li').removeClass('active');
// and add to clicked one
$(this).parent('li').addClass('active');
// load you contant using array of ids
$('#portfolioWork').load('portfolioContent.html #'+loadDiv[this.id]);
});
});
also I don't think you need an image for this effect. Why not using border-botom style with width and color you need?
check this example http://jsfiddle.net/vladkras/sJNMR/
(I also added "prevent default" action for your need)

JQuery Scrolling/Paging Tabs

I am trying to create a simple tab bar for a site that has the ability to scroll for tabs that do not fit on the page. This is quite simple and does not need to have any ajax or dynamically loaded content...it simply displays all the tabs, and when you click one, it takes you to another page.
I have scoured the internet and can not seem to find anything other than:
http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html
however this is very heavy and complicated...I am looking for a lightweight example in jquery. If anyone can help I would be grateful!
I ended up writing it myself with a div who's overflow is set to hidden. Then used the jquery below to move the tabs in the div.
$(document).ready(function()
{
$('.scrollButtons .left').click(function()
{
var content = $(".tabs .scrollable .content")
var pos = content.position().left + 250;
if (pos >= 0)
{
pos = 0;
}
content.animate({ left: pos }, 1000);
});
$('.scrollButtons .right').click(function()
{
var content = $(".tabs .scrollable .content")
var width = content.children('ul').width();
var pos = content.position().left - 250;
//var width = content.width();
if (pos <= (width * -1) + 670)
{
pos = (width * -1) + 600;
}
content.animate({ left: pos }, 1000);
});
});
My Html looked like this:
<div class="tabs">
<div class="scrollable">
<div class="content">
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
</ul>
</div>
</div>
<div class="scrollButtons">
<ul>
<li>
<div class="left">
</div>
</li>
<li>
<div class="right">
</div>
</li>
</ul>
</div>
</div>
I have just created a plugin myself:
Project home: http://jquery.aamirafridi.com/jst
Could you simply wrap the tabs in a DIV with overflow-x: auto set in the CSS?
I always use JQuery UI tabs as a starting point for tabs. You can customize the JQuery UI download in the download section of the website. This method should be lighter than any other implementation, if you are already using JQuery on your website.
Out of the box, the JQuery UI tabs will not give you the scrolling you desire. This I believe could be achieved by altering the CSS, but more than likely will be easier if you alter the navigation of your site (i.e. create more levels, use shorter titles).
Hope this helps

Categories

Resources