Develop Reference

How to make click only on modal exterior and not on dialog/content?

So I'm making an extension for Google Chrome with my friend, and for most of the features (i.e. calendar, settings, etc.) we open a modal so we don't have to redirect to another page. We are trying to get the modal to close when you click outside of the content. Here's a little markup screenshot to give you an idea of what I'm talking about.
I want to be able to close the modal by clicking outside the white area. Currently it closes even when I click inside the white area. I have tried pretty much everything, including stopPropagation(), pointer-events:none;, and jquery disabling. None of them work for reasons unknown to me. Something weird about Chrome Extensions, I guess.
Here's some of my code so far:
function calendar() {
document.getElementById("calendmodal").style.display = "block";
}
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("calendicon").addEventListener("click", calendar);
document.getElementById("calendmodal").addEventListener("click", closeModal);
document.getElementById("calendmodal").addEventListener("click", function(event) {
event.stopPropagation();
});
});
And HTML:
<div class="icons" id="icons_calendar">
<img src='https://preview.ibb.co/jE76Bm/calendar.png' alt="calendar" border="0" id="calendicon"/>
</div>
<div id=calendmodal class="generalmodal">
<div class="modal-content" id="calendcontent">
<iframe src="https://calendar.google.com/calendar/embed?src=googleapps.wrdsb.ca_ptpdj55efmhg1nb89ruc15fi3k%40group.calendar.google.com&ctz=America%2FToronto" style="border: 0" width="800" height="600" frameborder="0" scrolling="no" visibility="hidden" id="calendiframe"></iframe>
<p id=infostuff>For a more extensive calendar and<br>more school tools, visit The SJAM Website.</p>
</div>
</div>
Not really sure what I'm doing wrong, I don't know how to do this in an extension.

I don't know exactly how you show your modal dialog, but my approach for this issue is like this (you may be able to adapt it ot your particular case):
I have a transparent <div> as container that takes up the whole screen, and inside it, using CSS, I position the modal dialog. Something like:
<div id="container" style="position:fixed;top:0;bottom:0;left:0;right:0;display:none">
<div id="myModal" style="position:absolute;width:300px;height:200px;left:100px;top:100px">
<!-- Here goes my content -->
</div>
</div>
With this approach, to display the dialog I do something like:
function openModal(){
document.getElementById("container").style.display = "block";
}
And to close it when clicked on the transparent background but not on the dialog I have:
document.getElementById("container").onclick = function(event) {
if (event.target === this) {
this.style.display = "none";
}
};

In your earlier attempts, where did you execute event.stopPropagation()? It's not included in your code example.
What you need to do is prevent a click event on #calendmodal from bubbling up the DOM and triggering a click event on the body (or another container element) whose event handler closes your modal dialog.
You can do so like this:
document.getElementById("calendmodal").addEventListener("click", function(event) {
event.stopPropagation();
});

How to hide an IFrame on mobile devices

I'm building a website which uses IFrames to play YouTube videos, instead of uploading the raw video as the host doesn't allow large file uploads and it seemed easier to use IFrames. However, how the website works is that when you press a button it opens a div over the top of the rest of the page, like a 'popup' I guess. So this requires that you can hide the IFrame when you close the div.
However, this doesn't work on mobile Chrome of Safari (for iOS10 latest versions). When I try to hide it, the rest of the div hides like normal but the video leaves an impression, as in you can't play it or click anything on the video but it prevents you clicking anything under the video also.
Has anyone encountered any issues like this? Can anyone suggest where my code is wrong?
The website is at http://citm.uk.tn/
Here's the code:
JavaScript:
function fillText(a){
$('#body').load('html/' + a + '.html');
b.style.height = '60vw';
b.style.visibility = 'visible';
ex.style.filter = 'blur(20px)';
ex.style.WebkitFilter = 'blur(20px)';
window.scrollTo(0,0);
}
function wipePop(){
b.style.height = '0';
b.style.visibility = 'hidden';
ex.style.filter = 'none';
ex.style.WebkitFilter = 'none';
frame.style.height = '0';
frame.style.opacity = '0';
}
HTML:
<a class='back' onclick='wipePop()'>Back To Home</a>
<iframe class='video' src="https://www.youtube.com/embed/YXwYJyrKK5A?wmode=opaque" frameborder="0" allowfullscreen id="frame">
</iframe>
More HTML:
<div class='ex' id='ex'>
<div class='banner'><img src='images/full.png' class='full' id='im'></div>
<div class='buttons'><button class='cir' id='1'><img class='buttonimg' src='images/1.png'></button><button class='cir' id='2'><img class='buttonimg' src='images/2.png'></button><button class='cir' id='3'><img class='buttonimg' src='images/3.png'></button><button class='cir' id='4'><img class='buttonimg' src='images/4.png'></button></div>
<div class='videobanner'><button class='vidbanner_l' onclick="fillText('video1')"><img src='images/video.png'></button><button class='vidbanner' onclick="fillText('video2')"><img src='images/video2.png'></button></div>
<br><br><br>
</div>
<div class='body' id='body'>
</div>
I am using jQuery but anything using pure javascript would be prefered. Thanks in advance.

Hide/Show multiple times on a page

First of all, I know that this question has been answered on this site numerous times and that is the main problem here. I am spoiled for choice in the answers and have been searching for a few hours, not finding anything directly similar. There must be plenty of ways to do this, but what I have right now is closest to what I want.
I have this for my code at the moment, for some reason the fiddle won't work, while it works fine in my code, must have missed something.
http://jsfiddle.net/PVLMX/
Html:
<div id="wrap">
<p>This text is visible, but there is more.<br/><br/>See more >>
</p>
<div id="example" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below
will hide this content again.</p>
<p><a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">Hide this content >></a></p>
</div>
</div>
Javascript:
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
I need to be able to call the function for each new "Read More" on the page. At the moment, the first "See More" is always the target of the javascript, and I am not sure how to call this function for other links on the page.

In HTML, each id="" must be a unique identifier, you can't put two id="example" so you need id="example" and id="example2" and so on.
Working jsfiddle: http://jsfiddle.net/PVLMX/2/
<div id="wrap">
<p>This text is visible, but there is more.<a href="#" id="example2-show"
class="showLink" onclick="showHide('example2');return false;"><br/><br/>See more >></a>
</p>
<div id="example2" class="more">
<p>This text was hidden, now you see it</p>
<p><a href="#" id="example2-hide" class="hideLink"
onclick="showHide('example2');return false;">Hide this content >></a></p>
</div>
</div>
What I changed:
every id="example.. to id="example2... in the second div.
load the script in "No wrap - in head" mode (jsfiddle left option)

In your fiddle you need to select the no wrap in <head> option. Your code works fine.
http://jsfiddle.net/uND9H/
Aslo you can't have duplicate id's

if you want to generalise this, there is a much easier way in jquery ie by using class you can bind click events and generalise them using class names. Here is an example , Check it out
$('.showLink').bind('click',function(e){
var obj = $(this).attr('id');
var name = obj.replace("-show","-hidden");
$('#'+name).css('display', 'inline-block');
});
$('.hideLink').bind('click',function(e){
var obj = $(this).attr('id');
var name = obj.replace("-hide","-hidden");
$('#'+name).css('display', 'none');
});
http://jsfiddle.net/AmarnathRShenoy/AMf8y/
You can use class names multiple times and you must always remeber that id can never be duplicated

Actually you can do it with jquery and much easier than you think
Jquery as follows:
$more = $('.more');
$('.showLink').click(function(e){
e.preventDefault();
$more.show();
})
$('.hideLink').click(function(e){
e.preventDefault();
$more.hide();
})
Also add a css style to display:none on .more class.
you can make it look a little nicer with slideToggle()
Here is a fiddle: http://jsfiddle.net/up36g/

How to add image rollover to Javascript

I have an image that when clicked hidden content is shown and it switches to a different image, and when clicked again it reverts to its normal state. I'm using a bit of code I found on this site and it works great. I would like to add a rollover to the image as well. Im stumped on how to do this, as I am not very well versed in javascript. Any help is appreciated.
<head>
<script language="javascript" type="text/javascript">
var imageNo = 2;
function swapImage() {
image = document.getElementById('image')
switch (imageNo) {
case 1:
image.src = "images/img.png"
imageNo = 2
document.getElementById('content').style.display = 'none'
return(false);
case 2:
image.src = "images/img1.png"
imageNo = 1
document.getElementById('content').style.display = 'block'
return(false);
}
}
</script>
</head>
<body>
<h4><img id="image" name="image" src="images/img.png" border="0" onclick="swapImage();"/></h4>
<div id="content" style="display:none">This content toggles</span>
</body><code>

Please see the following fiddle http://jsfiddle.net/AGgha/3/.
It uses jQuery ( http://jquery.com/),which makes your js dev much easier and lets you animate your divs.
It uses the setInterval for infinte swaping as you're on the img. I've also added some improvements of your code for making it a bit better use it if you want.

Use onmouseover event if you want the same behavior on mouse over of the image element.
<img id="image" name="image" src="images/img.png" border="0"
onclick="swapImage();" onmouseover="swapImage();"/>

The CSS :hover selector is simple:
#image:hover {
background: url(your/image.png);
}

cant find my error in my html code, for a javascript quiz

I have placed my website in my dropbox so you can see my problem. What I am trying to do is, when you click the image next to tennis or squash it turns red (false.png) and when they click badminton it turns green (true.png), which then makes the next question appear. At the moment only the next question appears and I'm having trouble with the image changing.
http://dl.dropbox.com/u/13722201/website/quiz.html
Please could you poke around in the source code and figure it out because I'm baffled.
<a onclick="document.getElementById('badminton-answer').setAttribute('src', 'images/true.png'" href="javascript:toggle();">
<img id="badminton-answer" border="0" alt="" src="images/answer.png" width="290" height="60"/>
</a>
the javascript showing/ hiding div id="next"
<script language="javascript">
function toggle() {
var ele = document.getElementById("next");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>

Your onclick handlers contain this code:
document.answer.src='images/false.png'
document doesn't have an answer property. The best way to manipulate the DOM in JavaScript is to assign your HTML element a unique ID:
<img id="tennis-answer" alt="" src="images/answer.png" width="290" height="60"/>
If an element has a unique ID, then you can get a reference to it and modify the element:
document.getElementById('tennis-answer')
.setAttribute('src', 'images/false.png');
Here's how it all looks together for the Badminton answer:
<a onclick="document.getElementById('badminton-answer').setAttribute('src', 'images/true.png'" href="javascript:toggle();">
<img id="badminton-answer" border="0" alt="" src="images/answer.png" width="290" height="60"/>
</a>

All three images have the same id (answer). They should probably have unique IDs. Also, I'd put the image flipping code into a function and call the function on click instead of putting the code in the onclick of the button.