Open List Items as new overlay
I'm trying to create a list where clicking on each of its items would open up into a new overlay, with its own overlay text.
Here's the JSFiddle for what I have tried so far, but it won't work. Ideally, clicking on A would open up a translucent overlay spanning the screen with Overlay Text - A as it's text.
I used W3CSchools' example for Overlay as my inspiration.
I have been coding in HTML, CSS, Javascript for a total of 3 days now, and trying to figure out stuff as much as possible. So if you find some glaring mistakes or bad coding styles, please point it out to me and I will try to make sure I follow your instructions.
Thanks!
javascript html css
asked Nov 21 '18 at 0:53
Souradeep SinhaSouradeep Sinha
44118
add a comment |
I'm trying to create a list where clicking on each of its items would open up into a new overlay, with its own overlay text.
Here's the JSFiddle for what I have tried so far, but it won't work. Ideally, clicking on A would open up a translucent overlay spanning the screen with Overlay Text - A as it's text.
I used W3CSchools' example for Overlay as my inspiration.
I have been coding in HTML, CSS, Javascript for a total of 3 days now, and trying to figure out stuff as much as possible. So if you find some glaring mistakes or bad coding styles, please point it out to me and I will try to make sure I follow your instructions.
Thanks!
javascript html css
asked Nov 21 '18 at 0:53
Souradeep SinhaSouradeep Sinha
44118
you should consider codereview.stackexchange.com for code review and advices, not SO
– Temani Afif
Nov 21 '18 at 0:56
Thanks! Did not know that information. I'll do what you said. :)
– Souradeep Sinha
Nov 21 '18 at 0:59
I'm actually not looking for a review. I'm trying to make something work, and seeking some help.
– Souradeep Sinha
Nov 21 '18 at 1:01
add a comment |
I'm trying to create a list where clicking on each of its items would open up into a new overlay, with its own overlay text.
Here's the JSFiddle for what I have tried so far, but it won't work. Ideally, clicking on A would open up a translucent overlay spanning the screen with Overlay Text - A as it's text.
I used W3CSchools' example for Overlay as my inspiration.
I have been coding in HTML, CSS, Javascript for a total of 3 days now, and trying to figure out stuff as much as possible. So if you find some glaring mistakes or bad coding styles, please point it out to me and I will try to make sure I follow your instructions.
Thanks!
javascript html css
asked Nov 21 '18 at 0:53
Souradeep SinhaSouradeep Sinha
44118
I'm trying to create a list where clicking on each of its items would open up into a new overlay, with its own overlay text.
Here's the JSFiddle for what I have tried so far, but it won't work. Ideally, clicking on A would open up a translucent overlay spanning the screen with Overlay Text - A as it's text.
I used W3CSchools' example for Overlay as my inspiration.
I have been coding in HTML, CSS, Javascript for a total of 3 days now, and trying to figure out stuff as much as possible. So if you find some glaring mistakes or bad coding styles, please point it out to me and I will try to make sure I follow your instructions.
Thanks!
javascript html css
javascript html css
asked Nov 21 '18 at 0:53
Souradeep SinhaSouradeep Sinha
44118
asked Nov 21 '18 at 0:53
Souradeep SinhaSouradeep Sinha
44118
edited Nov 21 '18 at 1:03
Souradeep Sinha
asked Nov 21 '18 at 0:53
Souradeep SinhaSouradeep Sinha
44118
asked Nov 21 '18 at 0:53
Souradeep SinhaSouradeep Sinha
44118
asked Nov 21 '18 at 0:53
Souradeep SinhaSouradeep Sinha
44118
44118
you should consider codereview.stackexchange.com for code review and advices, not SO
– Temani Afif
Nov 21 '18 at 0:56
Thanks! Did not know that information. I'll do what you said. :)
– Souradeep Sinha
Nov 21 '18 at 0:59
I'm actually not looking for a review. I'm trying to make something work, and seeking some help.
– Souradeep Sinha
Nov 21 '18 at 1:01
add a comment |
you should consider codereview.stackexchange.com for code review and advices, not SO
– Temani Afif
Nov 21 '18 at 0:56
Thanks! Did not know that information. I'll do what you said. :)
– Souradeep Sinha
Nov 21 '18 at 0:59
I'm actually not looking for a review. I'm trying to make something work, and seeking some help.
– Souradeep Sinha
Nov 21 '18 at 1:01
you should consider codereview.stackexchange.com for code review and advices, not SO
– Temani Afif
Nov 21 '18 at 0:56
you should consider codereview.stackexchange.com for code review and advices, not SO
– Temani Afif
Nov 21 '18 at 0:56
Thanks! Did not know that information. I'll do what you said. :)
– Souradeep Sinha
Nov 21 '18 at 0:59
Thanks! Did not know that information. I'll do what you said. :)
– Souradeep Sinha
Nov 21 '18 at 0:59
I'm actually not looking for a review. I'm trying to make something work, and seeking some help.
– Souradeep Sinha
Nov 21 '18 at 1:01
I'm actually not looking for a review. I'm trying to make something work, and seeking some help.
– Souradeep Sinha
Nov 21 '18 at 1:01
add a comment |
1 Answer
1
active
oldest
votes
Here's a working fiddle:
https://jsfiddle.net/kelvinsusername/xr0ed6ft/
I changed a bit of js (to use getElementById rather than getElementByClass <- I think you were going for getElementsByClass which would return a collection?):
document.getElementById("overlay").style.display = "block";
And restructured the html to have a single overlay so the onclicks aren't nested - having an onclick nested inside another element which has an onclick means both would run (unless you stopped the event propagating)
answered Nov 21 '18 at 1:39
KelvinKelvin
31127
Thank you! This works like a charm. Accepted your answer. Wondering how I can make it work, if instead of duplicatespanelements if I could call the followingdivelements by ID:<div id="overlay" class="overlay" onclick="off()"> <div class=a"> A </div> .. </div>I tried JS:function on(clickedValue) { document.getElementById(clickedValue).style.display = "block"; }Sadly, I feel like I'm almost there, but falling just short.
– Souradeep Sinha
Nov 21 '18 at 5:27
I don't totally follow what you're trying to do, but I think you what to change the <div class="a"> to <div id="a"> because your on function is using getElementById (not get by class)
– Kelvin
Nov 21 '18 at 18:54
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%2f53403816%2fopen-list-items-as-new-overlay%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
Here's a working fiddle:
https://jsfiddle.net/kelvinsusername/xr0ed6ft/
I changed a bit of js (to use getElementById rather than getElementByClass <- I think you were going for getElementsByClass which would return a collection?):
document.getElementById("overlay").style.display = "block";
And restructured the html to have a single overlay so the onclicks aren't nested - having an onclick nested inside another element which has an onclick means both would run (unless you stopped the event propagating)
answered Nov 21 '18 at 1:39
KelvinKelvin
31127
Thank you! This works like a charm. Accepted your answer. Wondering how I can make it work, if instead of duplicatespanelements if I could call the followingdivelements by ID:<div id="overlay" class="overlay" onclick="off()"> <div class=a"> A </div> .. </div>I tried JS:function on(clickedValue) { document.getElementById(clickedValue).style.display = "block"; }Sadly, I feel like I'm almost there, but falling just short.
– Souradeep Sinha
Nov 21 '18 at 5:27
I don't totally follow what you're trying to do, but I think you what to change the <div class="a"> to <div id="a"> because your on function is using getElementById (not get by class)
– Kelvin
Nov 21 '18 at 18:54
add a comment |
Here's a working fiddle:
https://jsfiddle.net/kelvinsusername/xr0ed6ft/
I changed a bit of js (to use getElementById rather than getElementByClass <- I think you were going for getElementsByClass which would return a collection?):
document.getElementById("overlay").style.display = "block";
And restructured the html to have a single overlay so the onclicks aren't nested - having an onclick nested inside another element which has an onclick means both would run (unless you stopped the event propagating)
answered Nov 21 '18 at 1:39
KelvinKelvin
31127
Thank you! This works like a charm. Accepted your answer. Wondering how I can make it work, if instead of duplicatespanelements if I could call the followingdivelements by ID:<div id="overlay" class="overlay" onclick="off()"> <div class=a"> A </div> .. </div>I tried JS:function on(clickedValue) { document.getElementById(clickedValue).style.display = "block"; }Sadly, I feel like I'm almost there, but falling just short.
– Souradeep Sinha
Nov 21 '18 at 5:27
I don't totally follow what you're trying to do, but I think you what to change the <div class="a"> to <div id="a"> because your on function is using getElementById (not get by class)
– Kelvin
Nov 21 '18 at 18:54
add a comment |
Here's a working fiddle:
https://jsfiddle.net/kelvinsusername/xr0ed6ft/
I changed a bit of js (to use getElementById rather than getElementByClass <- I think you were going for getElementsByClass which would return a collection?):
document.getElementById("overlay").style.display = "block";
And restructured the html to have a single overlay so the onclicks aren't nested - having an onclick nested inside another element which has an onclick means both would run (unless you stopped the event propagating)
answered Nov 21 '18 at 1:39
KelvinKelvin
31127
Here's a working fiddle:
https://jsfiddle.net/kelvinsusername/xr0ed6ft/
I changed a bit of js (to use getElementById rather than getElementByClass <- I think you were going for getElementsByClass which would return a collection?):
document.getElementById("overlay").style.display = "block";
And restructured the html to have a single overlay so the onclicks aren't nested - having an onclick nested inside another element which has an onclick means both would run (unless you stopped the event propagating)
answered Nov 21 '18 at 1:39
KelvinKelvin
31127
answered Nov 21 '18 at 1:39
KelvinKelvin
31127
answered Nov 21 '18 at 1:39
KelvinKelvin
31127
answered Nov 21 '18 at 1:39
KelvinKelvin
31127
31127
Thank you! This works like a charm. Accepted your answer. Wondering how I can make it work, if instead of duplicatespanelements if I could call the followingdivelements by ID:<div id="overlay" class="overlay" onclick="off()"> <div class=a"> A </div> .. </div>I tried JS:function on(clickedValue) { document.getElementById(clickedValue).style.display = "block"; }Sadly, I feel like I'm almost there, but falling just short.
– Souradeep Sinha
Nov 21 '18 at 5:27
I don't totally follow what you're trying to do, but I think you what to change the <div class="a"> to <div id="a"> because your on function is using getElementById (not get by class)
– Kelvin
Nov 21 '18 at 18:54
add a comment |
Thank you! This works like a charm. Accepted your answer. Wondering how I can make it work, if instead of duplicatespanelements if I could call the followingdivelements by ID:<div id="overlay" class="overlay" onclick="off()"> <div class=a"> A </div> .. </div>I tried JS:function on(clickedValue) { document.getElementById(clickedValue).style.display = "block"; }Sadly, I feel like I'm almost there, but falling just short.
– Souradeep Sinha
Nov 21 '18 at 5:27
I don't totally follow what you're trying to do, but I think you what to change the <div class="a"> to <div id="a"> because your on function is using getElementById (not get by class)
– Kelvin
Nov 21 '18 at 18:54
Thank you! This works like a charm. Accepted your answer. Wondering how I can make it work, if instead of duplicate
span elements if I could call the following div elements by ID: <div id="overlay" class="overlay" onclick="off()"> <div class=a"> A </div> .. </div> I tried JS: function on(clickedValue) { document.getElementById(clickedValue).style.display = "block"; } Sadly, I feel like I'm almost there, but falling just short.– Souradeep Sinha
Nov 21 '18 at 5:27
Thank you! This works like a charm. Accepted your answer. Wondering how I can make it work, if instead of duplicate
span elements if I could call the following div elements by ID: <div id="overlay" class="overlay" onclick="off()"> <div class=a"> A </div> .. </div> I tried JS: function on(clickedValue) { document.getElementById(clickedValue).style.display = "block"; } Sadly, I feel like I'm almost there, but falling just short.– Souradeep Sinha
Nov 21 '18 at 5:27
I don't totally follow what you're trying to do, but I think you what to change the <div class="a"> to <div id="a"> because your on function is using getElementById (not get by class)
– Kelvin
Nov 21 '18 at 18:54
I don't totally follow what you're trying to do, but I think you what to change the <div class="a"> to <div id="a"> because your on function is using getElementById (not get by class)
– Kelvin
Nov 21 '18 at 18:54
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%2f53403816%2fopen-list-items-as-new-overlay%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
you should consider codereview.stackexchange.com for code review and advices, not SO
– Temani Afif
Nov 21 '18 at 0:56
Thanks! Did not know that information. I'll do what you said. :)
– Souradeep Sinha
Nov 21 '18 at 0:59
I'm actually not looking for a review. I'm trying to make something work, and seeking some help.
– Souradeep Sinha
Nov 21 '18 at 1:01