JavasScript — Uncaught Error: Syntax error, unrecognised expression: [href=#contact] (WordPress)
0
I am trying to implement an interaction where a class is added to a specific menu item when a is in view. Unfortunately, I am getting the following error:
Uncaught Error: Syntax error, unrecognised expression: [href=#contact]
Thank you in advance.
Pseudo-code
- Scroll the page
- When the section is in view add a class to the respective nav item
JavaScript
// Cache selectors
var lastId,
topMenu = $('#top-menu'),
topMenuHeight = topMenu.outerHeight() + 1,
// All list items
menuItems = topMenu.find('a'),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function() {
var item = $($(this).attr('href'))
if (item.length) {
return item
}
})
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e) {
var href = $(this).attr('href'),
offsetTop = href === '#' ? 0 : $(href).offset().top - topMenuHeight + 1
$('html, body').stop().animate(
{
scrollTop: offsetTop,
},
850,
)
e.preventDefault()
})
// Bind to scroll
$(window).scroll(function() {
// Get container scroll position
var fromTop = $(this).scrollTop() + topMenuHeight
// Get id of current scroll item
var cur = scrollItems.map(function() {
if ($(this).offset().top < fromTop) return this
})
// Get the id of the current element
cur = cur[cur.length - 1]
var id = cur && cur.length ? cur[0].id : ''
console.log('Cur', cur, 'ID', id)
if (lastId !== id) {
lastId = id
// Set/remove active class
menuItems.parent().removeClass('active').end().filter('[href=#' + id + ']').parent().addClass('active')
}
})
javascript jquery scroll menu interaction
asked Nov 22 '18 at 21:55
Diego Oriani
192212
add a comment |
0
I am trying to implement an interaction where a class is added to a specific menu item when a is in view. Unfortunately, I am getting the following error:
Uncaught Error: Syntax error, unrecognised expression: [href=#contact]
Thank you in advance.
Pseudo-code
- Scroll the page
- When the section is in view add a class to the respective nav item
JavaScript
// Cache selectors
var lastId,
topMenu = $('#top-menu'),
topMenuHeight = topMenu.outerHeight() + 1,
// All list items
menuItems = topMenu.find('a'),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function() {
var item = $($(this).attr('href'))
if (item.length) {
return item
}
})
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e) {
var href = $(this).attr('href'),
offsetTop = href === '#' ? 0 : $(href).offset().top - topMenuHeight + 1
$('html, body').stop().animate(
{
scrollTop: offsetTop,
},
850,
)
e.preventDefault()
})
// Bind to scroll
$(window).scroll(function() {
// Get container scroll position
var fromTop = $(this).scrollTop() + topMenuHeight
// Get id of current scroll item
var cur = scrollItems.map(function() {
if ($(this).offset().top < fromTop) return this
})
// Get the id of the current element
cur = cur[cur.length - 1]
var id = cur && cur.length ? cur[0].id : ''
console.log('Cur', cur, 'ID', id)
if (lastId !== id) {
lastId = id
// Set/remove active class
menuItems.parent().removeClass('active').end().filter('[href=#' + id + ']').parent().addClass('active')
}
})
javascript jquery scroll menu interaction
asked Nov 22 '18 at 21:55
Diego Oriani
192212
add a comment |
0
0
0
I am trying to implement an interaction where a class is added to a specific menu item when a is in view. Unfortunately, I am getting the following error:
Uncaught Error: Syntax error, unrecognised expression: [href=#contact]
Thank you in advance.
Pseudo-code
- Scroll the page
- When the section is in view add a class to the respective nav item
JavaScript
// Cache selectors
var lastId,
topMenu = $('#top-menu'),
topMenuHeight = topMenu.outerHeight() + 1,
// All list items
menuItems = topMenu.find('a'),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function() {
var item = $($(this).attr('href'))
if (item.length) {
return item
}
})
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e) {
var href = $(this).attr('href'),
offsetTop = href === '#' ? 0 : $(href).offset().top - topMenuHeight + 1
$('html, body').stop().animate(
{
scrollTop: offsetTop,
},
850,
)
e.preventDefault()
})
// Bind to scroll
$(window).scroll(function() {
// Get container scroll position
var fromTop = $(this).scrollTop() + topMenuHeight
// Get id of current scroll item
var cur = scrollItems.map(function() {
if ($(this).offset().top < fromTop) return this
})
// Get the id of the current element
cur = cur[cur.length - 1]
var id = cur && cur.length ? cur[0].id : ''
console.log('Cur', cur, 'ID', id)
if (lastId !== id) {
lastId = id
// Set/remove active class
menuItems.parent().removeClass('active').end().filter('[href=#' + id + ']').parent().addClass('active')
}
})
javascript jquery scroll menu interaction
asked Nov 22 '18 at 21:55
Diego Oriani
192212
I am trying to implement an interaction where a class is added to a specific menu item when a is in view. Unfortunately, I am getting the following error:
Uncaught Error: Syntax error, unrecognised expression: [href=#contact]
Thank you in advance.
Pseudo-code
- Scroll the page
- When the section is in view add a class to the respective nav item
JavaScript
// Cache selectors
var lastId,
topMenu = $('#top-menu'),
topMenuHeight = topMenu.outerHeight() + 1,
// All list items
menuItems = topMenu.find('a'),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function() {
var item = $($(this).attr('href'))
if (item.length) {
return item
}
})
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e) {
var href = $(this).attr('href'),
offsetTop = href === '#' ? 0 : $(href).offset().top - topMenuHeight + 1
$('html, body').stop().animate(
{
scrollTop: offsetTop,
},
850,
)
e.preventDefault()
})
// Bind to scroll
$(window).scroll(function() {
// Get container scroll position
var fromTop = $(this).scrollTop() + topMenuHeight
// Get id of current scroll item
var cur = scrollItems.map(function() {
if ($(this).offset().top < fromTop) return this
})
// Get the id of the current element
cur = cur[cur.length - 1]
var id = cur && cur.length ? cur[0].id : ''
console.log('Cur', cur, 'ID', id)
if (lastId !== id) {
lastId = id
// Set/remove active class
menuItems.parent().removeClass('active').end().filter('[href=#' + id + ']').parent().addClass('active')
}
})
javascript jquery scroll menu interaction
javascript jquery scroll menu interaction
asked Nov 22 '18 at 21:55
Diego Oriani
192212
asked Nov 22 '18 at 21:55
Diego Oriani
192212
asked Nov 22 '18 at 21:55
Diego Oriani
192212
asked Nov 22 '18 at 21:55
Diego Oriani
192212
asked Nov 22 '18 at 21:55
Diego Oriani
192212
192212
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
2
jQuery is pretty picky when it comes to quotes in attribute selectors. You must us a quoted string for the value (either single or double).
Change:
filter('[href=#' + id + ']')
To:
filter('[href="#' + id + '"]')
If you wanted to be slightly less precise but have the benefit of dropping the # you could use ~= instead of just = too.
answered Nov 22 '18 at 22:10
Randy Casburn
4,2741318
Randy Casbum thank you for your help. Your solution has solved the problem.
– Diego Oriani
Nov 23 '18 at 12:06
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53438387%2fjavasscript-uncaught-error-syntax-error-unrecognised-expression-href-cont%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
jQuery is pretty picky when it comes to quotes in attribute selectors. You must us a quoted string for the value (either single or double).
Change:
filter('[href=#' + id + ']')
To:
filter('[href="#' + id + '"]')
If you wanted to be slightly less precise but have the benefit of dropping the # you could use ~= instead of just = too.
answered Nov 22 '18 at 22:10
Randy Casburn
4,2741318
Randy Casbum thank you for your help. Your solution has solved the problem.
– Diego Oriani
Nov 23 '18 at 12:06
add a comment |
2
jQuery is pretty picky when it comes to quotes in attribute selectors. You must us a quoted string for the value (either single or double).
Change:
filter('[href=#' + id + ']')
To:
filter('[href="#' + id + '"]')
If you wanted to be slightly less precise but have the benefit of dropping the # you could use ~= instead of just = too.
answered Nov 22 '18 at 22:10
Randy Casburn
4,2741318
Randy Casbum thank you for your help. Your solution has solved the problem.
– Diego Oriani
Nov 23 '18 at 12:06
add a comment |
2
2
2
jQuery is pretty picky when it comes to quotes in attribute selectors. You must us a quoted string for the value (either single or double).
Change:
filter('[href=#' + id + ']')
To:
filter('[href="#' + id + '"]')
If you wanted to be slightly less precise but have the benefit of dropping the # you could use ~= instead of just = too.
answered Nov 22 '18 at 22:10
Randy Casburn
4,2741318
jQuery is pretty picky when it comes to quotes in attribute selectors. You must us a quoted string for the value (either single or double).
Change:
filter('[href=#' + id + ']')
To:
filter('[href="#' + id + '"]')
If you wanted to be slightly less precise but have the benefit of dropping the # you could use ~= instead of just = too.
answered Nov 22 '18 at 22:10
Randy Casburn
4,2741318
answered Nov 22 '18 at 22:10
Randy Casburn
4,2741318
answered Nov 22 '18 at 22:10
Randy Casburn
4,2741318
answered Nov 22 '18 at 22:10
Randy Casburn
4,2741318
4,2741318
Randy Casbum thank you for your help. Your solution has solved the problem.
– Diego Oriani
Nov 23 '18 at 12:06
add a comment |
Randy Casbum thank you for your help. Your solution has solved the problem.
– Diego Oriani
Nov 23 '18 at 12:06
Randy Casbum thank you for your help. Your solution has solved the problem.
– Diego Oriani
Nov 23 '18 at 12:06
Randy Casbum thank you for your help. Your solution has solved the problem.
– Diego Oriani
Nov 23 '18 at 12:06
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53438387%2fjavasscript-uncaught-error-syntax-error-unrecognised-expression-href-cont%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
