Open List Items as new overlay

-1

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!

edited Nov 21 '18 at 1:03

asked Nov 21 '18 at 0:53

Souradeep 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 |

-1

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.

Thanks!

edited Nov 21 '18 at 1:03

asked Nov 21 '18 at 0:53

Souradeep 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 |

-1

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.

Thanks!

edited Nov 21 '18 at 1:03

asked Nov 21 '18 at 0:53

Souradeep 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.

Thanks!

javascript html css

edited Nov 21 '18 at 1:03

asked Nov 21 '18 at 0:53

Souradeep Sinha

44118

edited Nov 21 '18 at 1:03

asked Nov 21 '18 at 0:53

Souradeep Sinha

44118

edited Nov 21 '18 at 1:03

asked Nov 21 '18 at 0:53

Souradeep Sinha

44118

asked Nov 21 '18 at 0:53

Souradeep Sinha

44118

asked Nov 21 '18 at 0:53

Souradeep 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 |

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

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 |

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

Kelvin

31127

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

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');
});

Post as a guest

Name

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

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";

answered Nov 21 '18 at 1:39

Kelvin

31127

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

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";

answered Nov 21 '18 at 1:39

Kelvin

31127

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

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";

answered Nov 21 '18 at 1:39

Kelvin

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";

answered Nov 21 '18 at 1:39

Kelvin

31127

answered Nov 21 '18 at 1:39

Kelvin

31127

answered Nov 21 '18 at 1:39

Kelvin

31127

answered Nov 21 '18 at 1:39

Kelvin

31127

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

add a comment |

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

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

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr