Click here to Skip to main content
15,868,141 members
Home / Discussions / JavaScript
   

JavaScript

 
AnswerRe: Async call inside loop finishes later than loop itself Pin
Richard Deeming3-Apr-22 21:33
mveRichard Deeming3-Apr-22 21:33 
AnswerRe: Async call inside loop finishes later than loop itself Pin
Jeremy Falcon26-Oct-22 12:14
professionalJeremy Falcon26-Oct-22 12:14 
QuestionTransforming Excel to Html (javascript) Pin
Member 1554681528-Mar-22 0:09
Member 1554681528-Mar-22 0:09 
GeneralMessage Closed Pin
23-Mar-22 19:02
Richardrussel23-Mar-22 19:02 
QuestionMessage Closed Pin
23-Mar-22 19:00
Richardrussel23-Mar-22 19:00 
QuestionFormulario js Pin
Member 155607559-Mar-22 7:18
Member 155607559-Mar-22 7:18 
AnswerRe: Formulario js Pin
RedDk9-Mar-22 7:33
RedDk9-Mar-22 7:33 
QuestionCreating a responsive menu Pin
Member 1554804125-Feb-22 4:58
Member 1554804125-Feb-22 4:58 
Update: I am not sure now if that is the reason why it doesn't work on these pages. I am getting the following error on these pages:

Uncaught TypeError: $ is not a function
on line 6

The menu works as expected if I recreate it outside of Joomla.

Hi, I am trying to create a responsive menu using jQuery following a tutorial. I am good with HTML and CSS but very rocky with Javascript.

I thought I had got everything working but then realised the mobile toggle menu only works on the pages where the menu item for that page has the css class of 'parent'. Since I have only one dropdown menu in my navigation I need it to also work on the other items.

For styling reasons I need the other menu items to have a different class set, which I can do. But I can't figure out how to edit the code to add the toggle menu to the other class as well as the parent class.

I hope this makes sense!

This is the JS code I have:
JavaScript
var ww = document.body.clientWidth;
$(document).ready(function() {
	$(".toggleMenu").click(function(e) {
		e.preventDefault();
		$(this).toggleClass("active");
		$("#nav").toggle();
	});
	$("#nav li a").each(function() {
		if ($(this).next().length > 0) {
			$(this).addClass("parent");
		};
	})
	adjustMenu();
});
function adjustMenu() {
	if (ww < 974) {
		$(".toggleMenu").css("display", "inline-block");
		if (!$(".toggleMenu").hasClass("active")) {
			$("#nav").hide();
		} else {
			$("#nav").show();
		}
		$("#nav li").unbind('mouseenter mouseleave');
		$("#nav li a.parent").unbind("click").bind("click", function(e) {
			e.preventDefault();
		 	$(this).parent("li").toggleClass('hover');
		});
	} else {
		$(".toggleMenu").css("display", "none");
		$("#nav").show();
            $("#nav li").removeClass("hover");
	$("#nav li a").unbind("click");
	$("#nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
		$(this).toggleClass('hover');
		});
	}
}

$(window).bind('resize orientationchange', function() {
	ww = document.body.clientWidth;
	adjustMenu();
});


modified 25-Feb-22 12:18pm.

AnswerMessage Closed Pin
25-Feb-22 5:40
Member 1554804125-Feb-22 5:40 
AnswerMessage Closed Pin
25-Feb-22 5:41
Member 1554804125-Feb-22 5:41 
AnswerRe: Creating a responsive menu Pin
Member 1554804125-Feb-22 5:44
Member 1554804125-Feb-22 5:44 
AnswerRe: Creating a responsive menu Pin
Richard Deeming27-Feb-22 21:12
mveRichard Deeming27-Feb-22 21:12 
QuestionAdding auto expand functionality to collapsible script Pin
Member 1554681524-Feb-22 3:38
Member 1554681524-Feb-22 3:38 
AnswerRe: Adding auto expand functionality to collapsible script Pin
Member 1554681524-Feb-22 9:52
Member 1554681524-Feb-22 9:52 
QuestionProper decoding using Vanilla Javascript Pin
jkirkerx17-Feb-22 12:04
professionaljkirkerx17-Feb-22 12:04 
AnswerRe: Proper decoding using Vanilla Javascript Pin
Richard Deeming17-Feb-22 21:33
mveRichard Deeming17-Feb-22 21:33 
GeneralRe: Proper decoding using Vanilla Javascript Pin
jkirkerx18-Feb-22 6:49
professionaljkirkerx18-Feb-22 6:49 
GeneralRe: Proper decoding using Vanilla Javascript Pin
Richard Deeming24-Feb-22 0:21
mveRichard Deeming24-Feb-22 0:21 
GeneralRe: Proper decoding using Vanilla Javascript Pin
jkirkerx24-Feb-22 5:37
professionaljkirkerx24-Feb-22 5:37 
QuestionAngular JS A href in View source Pin
Member 367124116-Feb-22 1:36
Member 367124116-Feb-22 1:36 
AnswerRe: Angular JS A href in View source Pin
Richard Deeming17-Feb-22 1:58
mveRichard Deeming17-Feb-22 1:58 
QuestionWhy is my last input box not centering (class: powerwall-battery-input)? Pin
WannaBeAWebDev11-Feb-22 14:20
WannaBeAWebDev11-Feb-22 14:20 
AnswerRe: Why is my last input box not centering (class: powerwall-battery-input)? Pin
rnbergren15-Feb-22 3:03
rnbergren15-Feb-22 3:03 
QuestionUsing modules in a regular PHP Web Application - function is undefined Pin
jkirkerx9-Feb-22 12:23
professionaljkirkerx9-Feb-22 12:23 
AnswerRe: Using modules in a regular PHP Web Application - function is undefined - Think I got it now Pin
jkirkerx9-Feb-22 13:25
professionaljkirkerx9-Feb-22 13:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.