JQuery issue hover on desktop, click on mobile & tablet
I am using the following JQuery in a project of mine to make top level menu links click once to open a submenu then, click the same top level link again to go to its URL. The code works fine in mobile and tablet, but now it as affected the desktop menu hover on top level links. I would like to have this code only work for mobile and tablet devices under 768px. Any help is appreciated. Thanks.
$(document).ready(function () {
$(‘#nav li').children('ul').hide();
$(‘#navl li a').click(function (event) {
var ts=$(this);
var len=$(ts).parent('li').has('ul').length;
if(len>0)
{
if($(ts).hasClass('clicked'))
{
}
else
{
$(ts).parent('li').find('ul').first().slideDown();
$(ts).addClass('clicked');
return false;
}
}
})
});
jquery mobile hover click desktop
asked Nov 21 '18 at 1:57
jfinjfin
33
add a comment |
I am using the following JQuery in a project of mine to make top level menu links click once to open a submenu then, click the same top level link again to go to its URL. The code works fine in mobile and tablet, but now it as affected the desktop menu hover on top level links. I would like to have this code only work for mobile and tablet devices under 768px. Any help is appreciated. Thanks.
$(document).ready(function () {
$(‘#nav li').children('ul').hide();
$(‘#navl li a').click(function (event) {
var ts=$(this);
var len=$(ts).parent('li').has('ul').length;
if(len>0)
{
if($(ts).hasClass('clicked'))
{
}
else
{
$(ts).parent('li').find('ul').first().slideDown();
$(ts).addClass('clicked');
return false;
}
}
})
});
jquery mobile hover click desktop
asked Nov 21 '18 at 1:57
jfinjfin
33
add a comment |
I am using the following JQuery in a project of mine to make top level menu links click once to open a submenu then, click the same top level link again to go to its URL. The code works fine in mobile and tablet, but now it as affected the desktop menu hover on top level links. I would like to have this code only work for mobile and tablet devices under 768px. Any help is appreciated. Thanks.
$(document).ready(function () {
$(‘#nav li').children('ul').hide();
$(‘#navl li a').click(function (event) {
var ts=$(this);
var len=$(ts).parent('li').has('ul').length;
if(len>0)
{
if($(ts).hasClass('clicked'))
{
}
else
{
$(ts).parent('li').find('ul').first().slideDown();
$(ts).addClass('clicked');
return false;
}
}
})
});
jquery mobile hover click desktop
asked Nov 21 '18 at 1:57
jfinjfin
33
I am using the following JQuery in a project of mine to make top level menu links click once to open a submenu then, click the same top level link again to go to its URL. The code works fine in mobile and tablet, but now it as affected the desktop menu hover on top level links. I would like to have this code only work for mobile and tablet devices under 768px. Any help is appreciated. Thanks.
$(document).ready(function () {
$(‘#nav li').children('ul').hide();
$(‘#navl li a').click(function (event) {
var ts=$(this);
var len=$(ts).parent('li').has('ul').length;
if(len>0)
{
if($(ts).hasClass('clicked'))
{
}
else
{
$(ts).parent('li').find('ul').first().slideDown();
$(ts).addClass('clicked');
return false;
}
}
})
});
jquery mobile hover click desktop
jquery mobile hover click desktop
asked Nov 21 '18 at 1:57
jfinjfin
33
asked Nov 21 '18 at 1:57
jfinjfin
33
asked Nov 21 '18 at 1:57
jfinjfin
33
asked Nov 21 '18 at 1:57
jfinjfin
33
asked Nov 21 '18 at 1:57
jfinjfin
33
33
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I think you could use jQuery to check the resolution of the webpage when displayed:
$(window).resize(function () {
if ($(window).width() < 768) {
//Do something or in this case, put the code that needs to run under this situation
}
});
This will check the resolution of the webpage/browser everytime it changes.
Also I noticed that in your code, you have this: $(‘#nav li'). and If my sight is good, there's only one ', you would have to change it like this: $('#nav li'). And in the line below that, you have the same thing.
Hope it helps you or guides you to another solution!
answered Nov 21 '18 at 2:12
Alan MaldonadoAlan Maldonado
158
So, I just place my existing code within the if statement curly braces and it should work? Thanks for the help.
– jfin
Nov 21 '18 at 2:30
Yep, it should work.
– Alan Maldonado
Nov 21 '18 at 2:32
I just used the code and on desktop view my submenu still does not appear on hover.
– jfin
Nov 21 '18 at 2:57
Weird, by the way, I noticed that in your code, you have some mistakes, I'll update my answer above to show you.
– Alan Maldonado
Nov 21 '18 at 3:01
Thanks for the help.
– jfin
Dec 22 '18 at 16:52
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
});
}
});
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%2f53404289%2fjquery-issue-hover-on-desktop-click-on-mobile-tablet%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
I think you could use jQuery to check the resolution of the webpage when displayed:
$(window).resize(function () {
if ($(window).width() < 768) {
//Do something or in this case, put the code that needs to run under this situation
}
});
This will check the resolution of the webpage/browser everytime it changes.
Also I noticed that in your code, you have this: $(‘#nav li'). and If my sight is good, there's only one ', you would have to change it like this: $('#nav li'). And in the line below that, you have the same thing.
Hope it helps you or guides you to another solution!
answered Nov 21 '18 at 2:12
Alan MaldonadoAlan Maldonado
158
So, I just place my existing code within the if statement curly braces and it should work? Thanks for the help.
– jfin
Nov 21 '18 at 2:30
Yep, it should work.
– Alan Maldonado
Nov 21 '18 at 2:32
I just used the code and on desktop view my submenu still does not appear on hover.
– jfin
Nov 21 '18 at 2:57
Weird, by the way, I noticed that in your code, you have some mistakes, I'll update my answer above to show you.
– Alan Maldonado
Nov 21 '18 at 3:01
Thanks for the help.
– jfin
Dec 22 '18 at 16:52
add a comment |
I think you could use jQuery to check the resolution of the webpage when displayed:
$(window).resize(function () {
if ($(window).width() < 768) {
//Do something or in this case, put the code that needs to run under this situation
}
});
This will check the resolution of the webpage/browser everytime it changes.
Also I noticed that in your code, you have this: $(‘#nav li'). and If my sight is good, there's only one ', you would have to change it like this: $('#nav li'). And in the line below that, you have the same thing.
Hope it helps you or guides you to another solution!
answered Nov 21 '18 at 2:12
Alan MaldonadoAlan Maldonado
158
So, I just place my existing code within the if statement curly braces and it should work? Thanks for the help.
– jfin
Nov 21 '18 at 2:30
Yep, it should work.
– Alan Maldonado
Nov 21 '18 at 2:32
I just used the code and on desktop view my submenu still does not appear on hover.
– jfin
Nov 21 '18 at 2:57
Weird, by the way, I noticed that in your code, you have some mistakes, I'll update my answer above to show you.
– Alan Maldonado
Nov 21 '18 at 3:01
Thanks for the help.
– jfin
Dec 22 '18 at 16:52
add a comment |
I think you could use jQuery to check the resolution of the webpage when displayed:
$(window).resize(function () {
if ($(window).width() < 768) {
//Do something or in this case, put the code that needs to run under this situation
}
});
This will check the resolution of the webpage/browser everytime it changes.
Also I noticed that in your code, you have this: $(‘#nav li'). and If my sight is good, there's only one ', you would have to change it like this: $('#nav li'). And in the line below that, you have the same thing.
Hope it helps you or guides you to another solution!
answered Nov 21 '18 at 2:12
Alan MaldonadoAlan Maldonado
158
I think you could use jQuery to check the resolution of the webpage when displayed:
$(window).resize(function () {
if ($(window).width() < 768) {
//Do something or in this case, put the code that needs to run under this situation
}
});
This will check the resolution of the webpage/browser everytime it changes.
Also I noticed that in your code, you have this: $(‘#nav li'). and If my sight is good, there's only one ', you would have to change it like this: $('#nav li'). And in the line below that, you have the same thing.
Hope it helps you or guides you to another solution!
answered Nov 21 '18 at 2:12
Alan MaldonadoAlan Maldonado
158
edited Nov 21 '18 at 3:03
answered Nov 21 '18 at 2:12
Alan MaldonadoAlan Maldonado
158
answered Nov 21 '18 at 2:12
Alan MaldonadoAlan Maldonado
158
answered Nov 21 '18 at 2:12
Alan MaldonadoAlan Maldonado
158
158
So, I just place my existing code within the if statement curly braces and it should work? Thanks for the help.
– jfin
Nov 21 '18 at 2:30
Yep, it should work.
– Alan Maldonado
Nov 21 '18 at 2:32
I just used the code and on desktop view my submenu still does not appear on hover.
– jfin
Nov 21 '18 at 2:57
Weird, by the way, I noticed that in your code, you have some mistakes, I'll update my answer above to show you.
– Alan Maldonado
Nov 21 '18 at 3:01
Thanks for the help.
– jfin
Dec 22 '18 at 16:52
add a comment |
So, I just place my existing code within the if statement curly braces and it should work? Thanks for the help.
– jfin
Nov 21 '18 at 2:30
Yep, it should work.
– Alan Maldonado
Nov 21 '18 at 2:32
I just used the code and on desktop view my submenu still does not appear on hover.
– jfin
Nov 21 '18 at 2:57
Weird, by the way, I noticed that in your code, you have some mistakes, I'll update my answer above to show you.
– Alan Maldonado
Nov 21 '18 at 3:01
Thanks for the help.
– jfin
Dec 22 '18 at 16:52
So, I just place my existing code within the if statement curly braces and it should work? Thanks for the help.
– jfin
Nov 21 '18 at 2:30
So, I just place my existing code within the if statement curly braces and it should work? Thanks for the help.
– jfin
Nov 21 '18 at 2:30
Yep, it should work.
– Alan Maldonado
Nov 21 '18 at 2:32
Yep, it should work.
– Alan Maldonado
Nov 21 '18 at 2:32
I just used the code and on desktop view my submenu still does not appear on hover.
– jfin
Nov 21 '18 at 2:57
I just used the code and on desktop view my submenu still does not appear on hover.
– jfin
Nov 21 '18 at 2:57
Weird, by the way, I noticed that in your code, you have some mistakes, I'll update my answer above to show you.
– Alan Maldonado
Nov 21 '18 at 3:01
Weird, by the way, I noticed that in your code, you have some mistakes, I'll update my answer above to show you.
– Alan Maldonado
Nov 21 '18 at 3:01
Thanks for the help.
– jfin
Dec 22 '18 at 16:52
Thanks for the help.
– jfin
Dec 22 '18 at 16:52
add a comment |
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.
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%2f53404289%2fjquery-issue-hover-on-desktop-click-on-mobile-tablet%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
