jquery .toggleClass on click using multiple IDs
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I'm trying to toggle the scrollbar of the <html>
tag using jquery.
I want the scrollbar to disappear when i click on button #foo, and i want it to reappear when i click on #bar1.
$('#foo').click(function()
$('html').toggleClass("hidescroll");
);
$('#bar1').click(function()
$('html').toggleClass("hidescroll");
);
.hidescroll
overflow-y: hidden !important;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">foo</div>
<div id="bar1">bar1</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
it disappears when i click on #foo, but it doesnt reappear on #bar1, however it reappears when #foo is clicked again.
javascript jquery html css
add a comment |
I'm trying to toggle the scrollbar of the <html>
tag using jquery.
I want the scrollbar to disappear when i click on button #foo, and i want it to reappear when i click on #bar1.
$('#foo').click(function()
$('html').toggleClass("hidescroll");
);
$('#bar1').click(function()
$('html').toggleClass("hidescroll");
);
.hidescroll
overflow-y: hidden !important;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">foo</div>
<div id="bar1">bar1</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
it disappears when i click on #foo, but it doesnt reappear on #bar1, however it reappears when #foo is clicked again.
javascript jquery html css
What is CSS for.hidescroll
– Mohammad
Nov 15 '18 at 10:32
1
can you make a js fiddle. according to your code it will work no issues
– Negi Rox
Nov 15 '18 at 10:33
It does work -> jsfiddle.net/fyedavht. Do you definitely have same ids offoo
andbar1
in your html?
– Morpheus
Nov 15 '18 at 10:37
its working bro
– Negi Rox
Nov 15 '18 at 10:42
your example clearly works here
– Nav Raj Bhattarai
Nov 15 '18 at 10:44
add a comment |
I'm trying to toggle the scrollbar of the <html>
tag using jquery.
I want the scrollbar to disappear when i click on button #foo, and i want it to reappear when i click on #bar1.
$('#foo').click(function()
$('html').toggleClass("hidescroll");
);
$('#bar1').click(function()
$('html').toggleClass("hidescroll");
);
.hidescroll
overflow-y: hidden !important;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">foo</div>
<div id="bar1">bar1</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
it disappears when i click on #foo, but it doesnt reappear on #bar1, however it reappears when #foo is clicked again.
javascript jquery html css
I'm trying to toggle the scrollbar of the <html>
tag using jquery.
I want the scrollbar to disappear when i click on button #foo, and i want it to reappear when i click on #bar1.
$('#foo').click(function()
$('html').toggleClass("hidescroll");
);
$('#bar1').click(function()
$('html').toggleClass("hidescroll");
);
.hidescroll
overflow-y: hidden !important;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">foo</div>
<div id="bar1">bar1</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
it disappears when i click on #foo, but it doesnt reappear on #bar1, however it reappears when #foo is clicked again.
$('#foo').click(function()
$('html').toggleClass("hidescroll");
);
$('#bar1').click(function()
$('html').toggleClass("hidescroll");
);
.hidescroll
overflow-y: hidden !important;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">foo</div>
<div id="bar1">bar1</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
$('#foo').click(function()
$('html').toggleClass("hidescroll");
);
$('#bar1').click(function()
$('html').toggleClass("hidescroll");
);
.hidescroll
overflow-y: hidden !important;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">foo</div>
<div id="bar1">bar1</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
javascript jquery html css
javascript jquery html css
edited Nov 15 '18 at 10:38
Mohammad
16k123766
16k123766
asked Nov 15 '18 at 10:30
omnibusomnibus
64
64
What is CSS for.hidescroll
– Mohammad
Nov 15 '18 at 10:32
1
can you make a js fiddle. according to your code it will work no issues
– Negi Rox
Nov 15 '18 at 10:33
It does work -> jsfiddle.net/fyedavht. Do you definitely have same ids offoo
andbar1
in your html?
– Morpheus
Nov 15 '18 at 10:37
its working bro
– Negi Rox
Nov 15 '18 at 10:42
your example clearly works here
– Nav Raj Bhattarai
Nov 15 '18 at 10:44
add a comment |
What is CSS for.hidescroll
– Mohammad
Nov 15 '18 at 10:32
1
can you make a js fiddle. according to your code it will work no issues
– Negi Rox
Nov 15 '18 at 10:33
It does work -> jsfiddle.net/fyedavht. Do you definitely have same ids offoo
andbar1
in your html?
– Morpheus
Nov 15 '18 at 10:37
its working bro
– Negi Rox
Nov 15 '18 at 10:42
your example clearly works here
– Nav Raj Bhattarai
Nov 15 '18 at 10:44
What is CSS for
.hidescroll
– Mohammad
Nov 15 '18 at 10:32
What is CSS for
.hidescroll
– Mohammad
Nov 15 '18 at 10:32
1
1
can you make a js fiddle. according to your code it will work no issues
– Negi Rox
Nov 15 '18 at 10:33
can you make a js fiddle. according to your code it will work no issues
– Negi Rox
Nov 15 '18 at 10:33
It does work -> jsfiddle.net/fyedavht. Do you definitely have same ids of
foo
and bar1
in your html?– Morpheus
Nov 15 '18 at 10:37
It does work -> jsfiddle.net/fyedavht. Do you definitely have same ids of
foo
and bar1
in your html?– Morpheus
Nov 15 '18 at 10:37
its working bro
– Negi Rox
Nov 15 '18 at 10:42
its working bro
– Negi Rox
Nov 15 '18 at 10:42
your example clearly works here
– Nav Raj Bhattarai
Nov 15 '18 at 10:44
your example clearly works here
– Nav Raj Bhattarai
Nov 15 '18 at 10:44
add a comment |
3 Answers
3
active
oldest
votes
You can do it like this...use add and removeClass instead of toggleClass...
$('#foo').click(function()
$('html').addClass("hidescroll");
);
$('#bar1').click(function()
$('html').removeClass("hidescroll");
);
.hidescroll
overflow:hidden;
#main
width:100%;
height:2000px;
float:left;
#foo
float:left;
width:100px;
height:50px;
background-color:red;
margin-right:15px;
#bar1
float:left;
width:100px;
height:50px;
background-color:blue;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="foo"></div>
<div id="bar1"></div>
</div>
it worked usingoverflow: hidden
instead ofoverflow-y: hidden
. thank you.
– omnibus
Nov 15 '18 at 10:42
add a comment |
$("#foo, #bar1")
is the selector you're looking for.
Snippet :
$('#foo, #bar1').click(function()
$('html').toggleClass("hidescroll");
);
.hidescroll
overflow:hidden;
#main
width:100%;
height:2000px;
float:left;
#foo
float:left;
width:100px;
height:50px;
background-color:red;
margin-right:15px;
#bar1
float:left;
width:100px;
height:50px;
background-color:blue;
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="main">
<div id="foo"></div>
<div id="bar1"></div>
</div>
add a comment |
Just an alternative
bar =v=> $('html').css('overflow',v)
$('#foo').click(()=> bar('hidden'))
$('#bar1').click(()=> bar('scroll'))
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%2f53317383%2fjquery-toggleclass-on-click-using-multiple-ids%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can do it like this...use add and removeClass instead of toggleClass...
$('#foo').click(function()
$('html').addClass("hidescroll");
);
$('#bar1').click(function()
$('html').removeClass("hidescroll");
);
.hidescroll
overflow:hidden;
#main
width:100%;
height:2000px;
float:left;
#foo
float:left;
width:100px;
height:50px;
background-color:red;
margin-right:15px;
#bar1
float:left;
width:100px;
height:50px;
background-color:blue;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="foo"></div>
<div id="bar1"></div>
</div>
it worked usingoverflow: hidden
instead ofoverflow-y: hidden
. thank you.
– omnibus
Nov 15 '18 at 10:42
add a comment |
You can do it like this...use add and removeClass instead of toggleClass...
$('#foo').click(function()
$('html').addClass("hidescroll");
);
$('#bar1').click(function()
$('html').removeClass("hidescroll");
);
.hidescroll
overflow:hidden;
#main
width:100%;
height:2000px;
float:left;
#foo
float:left;
width:100px;
height:50px;
background-color:red;
margin-right:15px;
#bar1
float:left;
width:100px;
height:50px;
background-color:blue;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="foo"></div>
<div id="bar1"></div>
</div>
it worked usingoverflow: hidden
instead ofoverflow-y: hidden
. thank you.
– omnibus
Nov 15 '18 at 10:42
add a comment |
You can do it like this...use add and removeClass instead of toggleClass...
$('#foo').click(function()
$('html').addClass("hidescroll");
);
$('#bar1').click(function()
$('html').removeClass("hidescroll");
);
.hidescroll
overflow:hidden;
#main
width:100%;
height:2000px;
float:left;
#foo
float:left;
width:100px;
height:50px;
background-color:red;
margin-right:15px;
#bar1
float:left;
width:100px;
height:50px;
background-color:blue;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="foo"></div>
<div id="bar1"></div>
</div>
You can do it like this...use add and removeClass instead of toggleClass...
$('#foo').click(function()
$('html').addClass("hidescroll");
);
$('#bar1').click(function()
$('html').removeClass("hidescroll");
);
.hidescroll
overflow:hidden;
#main
width:100%;
height:2000px;
float:left;
#foo
float:left;
width:100px;
height:50px;
background-color:red;
margin-right:15px;
#bar1
float:left;
width:100px;
height:50px;
background-color:blue;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="foo"></div>
<div id="bar1"></div>
</div>
$('#foo').click(function()
$('html').addClass("hidescroll");
);
$('#bar1').click(function()
$('html').removeClass("hidescroll");
);
.hidescroll
overflow:hidden;
#main
width:100%;
height:2000px;
float:left;
#foo
float:left;
width:100px;
height:50px;
background-color:red;
margin-right:15px;
#bar1
float:left;
width:100px;
height:50px;
background-color:blue;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="foo"></div>
<div id="bar1"></div>
</div>
$('#foo').click(function()
$('html').addClass("hidescroll");
);
$('#bar1').click(function()
$('html').removeClass("hidescroll");
);
.hidescroll
overflow:hidden;
#main
width:100%;
height:2000px;
float:left;
#foo
float:left;
width:100px;
height:50px;
background-color:red;
margin-right:15px;
#bar1
float:left;
width:100px;
height:50px;
background-color:blue;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="foo"></div>
<div id="bar1"></div>
</div>
answered Nov 15 '18 at 10:38
ElusiveCoderElusiveCoder
1,4121421
1,4121421
it worked usingoverflow: hidden
instead ofoverflow-y: hidden
. thank you.
– omnibus
Nov 15 '18 at 10:42
add a comment |
it worked usingoverflow: hidden
instead ofoverflow-y: hidden
. thank you.
– omnibus
Nov 15 '18 at 10:42
it worked using
overflow: hidden
instead of overflow-y: hidden
. thank you.– omnibus
Nov 15 '18 at 10:42
it worked using
overflow: hidden
instead of overflow-y: hidden
. thank you.– omnibus
Nov 15 '18 at 10:42
add a comment |
$("#foo, #bar1")
is the selector you're looking for.
Snippet :
$('#foo, #bar1').click(function()
$('html').toggleClass("hidescroll");
);
.hidescroll
overflow:hidden;
#main
width:100%;
height:2000px;
float:left;
#foo
float:left;
width:100px;
height:50px;
background-color:red;
margin-right:15px;
#bar1
float:left;
width:100px;
height:50px;
background-color:blue;
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="main">
<div id="foo"></div>
<div id="bar1"></div>
</div>
add a comment |
$("#foo, #bar1")
is the selector you're looking for.
Snippet :
$('#foo, #bar1').click(function()
$('html').toggleClass("hidescroll");
);
.hidescroll
overflow:hidden;
#main
width:100%;
height:2000px;
float:left;
#foo
float:left;
width:100px;
height:50px;
background-color:red;
margin-right:15px;
#bar1
float:left;
width:100px;
height:50px;
background-color:blue;
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="main">
<div id="foo"></div>
<div id="bar1"></div>
</div>
add a comment |
$("#foo, #bar1")
is the selector you're looking for.
Snippet :
$('#foo, #bar1').click(function()
$('html').toggleClass("hidescroll");
);
.hidescroll
overflow:hidden;
#main
width:100%;
height:2000px;
float:left;
#foo
float:left;
width:100px;
height:50px;
background-color:red;
margin-right:15px;
#bar1
float:left;
width:100px;
height:50px;
background-color:blue;
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="main">
<div id="foo"></div>
<div id="bar1"></div>
</div>
$("#foo, #bar1")
is the selector you're looking for.
Snippet :
$('#foo, #bar1').click(function()
$('html').toggleClass("hidescroll");
);
.hidescroll
overflow:hidden;
#main
width:100%;
height:2000px;
float:left;
#foo
float:left;
width:100px;
height:50px;
background-color:red;
margin-right:15px;
#bar1
float:left;
width:100px;
height:50px;
background-color:blue;
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="main">
<div id="foo"></div>
<div id="bar1"></div>
</div>
$('#foo, #bar1').click(function()
$('html').toggleClass("hidescroll");
);
.hidescroll
overflow:hidden;
#main
width:100%;
height:2000px;
float:left;
#foo
float:left;
width:100px;
height:50px;
background-color:red;
margin-right:15px;
#bar1
float:left;
width:100px;
height:50px;
background-color:blue;
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="main">
<div id="foo"></div>
<div id="bar1"></div>
</div>
$('#foo, #bar1').click(function()
$('html').toggleClass("hidescroll");
);
.hidescroll
overflow:hidden;
#main
width:100%;
height:2000px;
float:left;
#foo
float:left;
width:100px;
height:50px;
background-color:red;
margin-right:15px;
#bar1
float:left;
width:100px;
height:50px;
background-color:blue;
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="main">
<div id="foo"></div>
<div id="bar1"></div>
</div>
edited Nov 15 '18 at 10:49
answered Nov 15 '18 at 10:34
Jean-Marc ZimmerJean-Marc Zimmer
38415
38415
add a comment |
add a comment |
Just an alternative
bar =v=> $('html').css('overflow',v)
$('#foo').click(()=> bar('hidden'))
$('#bar1').click(()=> bar('scroll'))
add a comment |
Just an alternative
bar =v=> $('html').css('overflow',v)
$('#foo').click(()=> bar('hidden'))
$('#bar1').click(()=> bar('scroll'))
add a comment |
Just an alternative
bar =v=> $('html').css('overflow',v)
$('#foo').click(()=> bar('hidden'))
$('#bar1').click(()=> bar('scroll'))
Just an alternative
bar =v=> $('html').css('overflow',v)
$('#foo').click(()=> bar('hidden'))
$('#bar1').click(()=> bar('scroll'))
answered Nov 15 '18 at 15:19
ThieliciousThielicious
2,1331221
2,1331221
add a comment |
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%2f53317383%2fjquery-toggleclass-on-click-using-multiple-ids%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
What is CSS for
.hidescroll
– Mohammad
Nov 15 '18 at 10:32
1
can you make a js fiddle. according to your code it will work no issues
– Negi Rox
Nov 15 '18 at 10:33
It does work -> jsfiddle.net/fyedavht. Do you definitely have same ids of
foo
andbar1
in your html?– Morpheus
Nov 15 '18 at 10:37
its working bro
– Negi Rox
Nov 15 '18 at 10:42
your example clearly works here
– Nav Raj Bhattarai
Nov 15 '18 at 10:44