I have a parent HTML page. It embeds an iframe containing a child HTML page.
The child HTML stores a block of HTML, including a "close" button, into a JS variable, and pass this variable to parent JS function upon a click of a "Show" button in the child HTML. This "Show" button has an addEventListener() on click. The goal of this button is to display the block of HTML code on top of the parent HTML.
I managed to make this block of HTML display on top of the parent HTML when I click "Show", the close button in this block will "display: none" upon clicking the cross button.
However, any further click of the "Show" button in the child HTML will not work; the button is broken and has no action.
Child HTML:
var plan0 = '<div class="popup">'+
'<span id="closeMe">×</span>'+
'other content here'+
'</div>';
document.getElementById("open0").addEventListener("click", function(event) {
event.preventDefault();
parent.showPopup(plan0);
}
Parent HTML:
<div>
<iframe id="channelFrame" scrolling="no" style="width: 100%; border: 1px; overflow: hidden" src="child.html"></iframe>
</div>
<div id="popup"></div>
<script>
function showPopup(info) {
var popup = document.getElementById("popup");
popup.innerHTML = info;
var closeMe = document.getElementById("closeMe");
if (closeMe) {
closeMe.onclick = function() {
popup.style.display = "none";
popup.innerHTML = "";
}
}
}
</script>
There is no error in console, and the "event" is still clearly marked in the "Show" button.
Where is the error?
On the first click on close, you are hiding the popup with
popup.style.display = "none";
but never un-hide it. Any subsequent actions will happen in a hidden tag, so you don't see anything.
Try something like:
function showPopup(info) {
var popup = document.getElementById("popup");
popup.innerHTML = info;
popup.style.display = "block"; // <------ show it again
var closeMe = document.getElementById("closeMe");
if (closeMe) {
closeMe.onclick = function() {
popup.style.display = "none";
popup.innerHTML = "";
}
}
}
Related
I want to show and hide a picture by using one button. when it's clicked, the picture is displayed and a variable is set to 1. so that when you press the button the next time, the picture will be hidden again.
After the button is pressed, I console.log the value of set variable + if the picture is displayed or not. Console says that the Picture is "inline". But the picture is not on my screen.
I think all you need is the js function. If you need more information. just comment. thank's!
<script>
function showHideM(){
let open;
open = 0
if (open == 0){
open = 1;
document.getElementById("melmanId").style.display = "inline";
console.log(open)
console.log(document.getElementById("melmanId").style.display)
return;
}
if (open == 1){
open = 0;
document.getElementById("melmanId").style.display = "none";
}
}
</script>
You don't really need flags to maintain the state of the image's visibility. You can use classList's toggle method to toggle a class on/off or, in this case, visible/hidden, which makes things a little easier.
// Cache the elements, and add an event listener
// to the button
const img = document.querySelector('img');
const button = document.querySelector('button');
button.addEventListener('click', handleClick);
// Toggle the "hidden" class
function handleClick() {
img.classList.toggle('hidden');
}
.hidden { visibility: hidden; }
img { display: block; margin-bottom: 1em; }
button:hover { cursor: pointer; background-color: #fffff0; }
<img class="hidden" src="https://dummyimage.com/100x100/000/fff">
<button>Click</button>
Additional documentation
addEventListener
querySelector
Note: this will replace all the styles applied to 'melmanId'
<script>
let show = true;
function showHideM() {
show = !show;
if(show){
document.getElementById("melmanId").style.display = "inline";
}else{
document.getElementById("melmanId").style.display = "none";
}
}
</script>
I have the following script on a page that has a button to Show/Hide some content. I'd like to have a link from another page that would go to this page and open/show the content of one of the items. Is this possible to do?
Here's the onpage script and markup i'm using to to the Show/Hide;
Note: The '{trailitem:count}' is just an ExpressionEngine tag to add a unique number to each div. ExpressionEngine loops through and creates the divs with an incremental number, but the concept is the same so just imagine a series of divs with a unique ID.
<script>
function ToggleTrail{trailitem:count}() {
var toggler = document.getElementById("trail_toggler{trailitem:count}");
var first = document.getElementById("trail_first{trailitem:count}");
var reveal = document.getElementById("trail_reveal{trailitem:count}");
if(reveal.style.display != "block" && toggler.style.display != null) {
toggler.style.display = "block";
toggler.innerHTML = '» Hide';
first.style.display = "block";
reveal.style.display = "block";
}else{
toggler.style.display = "block";
toggler.innerHTML = '» Reveal More';
first.style.display = "block";
reveal.style.display = "none";
}
return false;
}
</script>
<div class="trailbox">
<a id="trail_toggler{trailitem:count}" class="button blackbutton viewallbutton" href="#" onclick="return ToggleTrail{trailitem:count}();">» Reveal More</a>
<div id="trail_first{trailitem:count}">
First content
</div>
<div id="trail_reveal{trailitem:count}">
Content to be revealed
</div>
</div>
First disclosure: I have a lot of scripts running on this particular page.
I have a div of text that I have on page load, now there is a specific link which is toggled to this text, based on clicking on the link. WHEN the page is loaded, I want just the link to be a certain color.
Here is what I have for the text so far... which is displaying on pageload:
<script>
window.onload=function showDiv() {
document.getElementById('d1').style.display = "block";
}
</script>
Now I need to have my link a specific color on page load, but that color must be able to change back to its CSS default when another link is clicked:
Innovative Design Methodology
Like I said, there are other scripts I have running on this page, hence you see in the link.
Just for fun, here's my other code (toggling text & highlighting code):
<script type="text/javascript">
var currentItem;
function unhide(divID) {
if (currentItem) {
currentItem.className = 'hidden';
currentItem = null;
}
var item = document.getElementById(divID);
if (item) {
item.className = 'unhidden';
currentItem = item;
}
}
</script>
<script type="text/javascript">
var currentLink = null;
function changeLinkColor(link){
if(currentLink!=null){
currentLink.style.color = link.style.color;
}
link.style.color = '#f5b331';
currentLink = link;
}
</script>
You could add a css class on the anchor tag initially (which has your custom styling) and remove it on click on any of the links.
Your HTML
<a id="link1" class='CustomColor'></a>
And your CSS
.CustomColor
{
color:red;
}
And On click of any link,
document.getElementById("link1").className =
document.getElementById("link1").className.replace('CustomColor','');
I have a code which opens lightbox when user click a link. What it does it opens lightbox, then when user clicks on overlay it closes or hides overlay and lightbox. But when user click on link again to open lightbox again then it does not open. Here is my code
var el = document.getElementById('element');
var body = document.getElementsByTagName('body');
el.innerHTML = '<p><a id="clickme" href="#">Click me</a></p>';
document.getElementById('clickme').onclick = function (e) {
e.preventDefault();
if (overlay) {
overlay.style.display = 'block';
} else {
document.body.innerHTML = '<div id="overlay" style="display:block;position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>'+document.body.innerHTML;
}
document.body.innerHTML = '<iframe id="frame" style="position:absolute;display:block;z-index:101;width:50%;height:50%;margin:10% 20%;border:10px solid #ccc;border-radius:10px;" src="http://www.example.com/"></iframe>'+document.body.innerHTML;
document.getElementById('overlay').onclick = function() {
document.getElementById('overlay').style.display = 'none';
document.getElementById('frame').style.display = 'none';
}
}
How can I open this lightbox again when user clicks link second time?
You set style to display:none on close but clicking the link doesn't change the display property. Effect: the box stays invisible.
Simple solution: add display:block or whatever you need there to the opening function.
In addition: your opening function will create a new element each time it is executed. You could add a test to prevent that:
var overlay = document.getElementById('overlay');
if(overlay){
overlay.style.display = 'block';
} else {
//create box
}
The problem is that as soon as you edit the DOM by adding or replacing document.body.innerHTML, the event on your element (your a href) will no longer exist. you would need to append the event again after you performed document.body.innerHTML.
I have a code highlight block for which I would like to have an option where you click on a button and it opens up a new HTML page where it displays the "raw" content of the highlight. I have the code ready in raw form and the link prepared with target="_blank", but I can't seem to get it to open up a new page.
This is what my HTML looks like:
Click to view HTML
And this is my javascript
//when clicked
link.href = 'javascript:document.write("...");';
//the click event should continue as normal
This should open up a new page with "..." as the content, but it doesn't work (it just opens up the existing page).
Is there anyway to do this without using popups?
function writeToWindow(content) {
var newWin = window.open('','newWin','width=300,height=200');
newWin.document.open();
newWin.document.writeln("<html><head><title>Console</title></head><body>" + content + "</body></html>");
newWin.document.close();
}
call it
onclick="writeToWindow('text to display');"
Do you have to use a new window? I think is easier to use a layer.
<div id="toggleText" style="border:solid black 1px; display:none;height:100px;width:100px">
<span id="displayText"></span>
</div>
<script language="javascript">
func tion toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>