I am trying to create a pop-up message that disables the rest of the screen until you confirm it, only by using CSS and JavaScript (and without the alert function).
Although http://msdn.microsoft.com/en-us/library/ie/ms536739%28v=vs.85%29.aspx declares that setAttribute is supported in IE8 and higher, it does not seem to work correctly - well, actually it doesn't seem to work at all.
Here is my code:
<html>
<style type="text/css">
.overlay
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.2);
}
.overlaytext
{
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -50px;
width: 300px;
height: 100px;
padding-top: 5px;
background-color: #777777;
color: #000000;
font-size: 20px;
text-align: center;
}
.overlaybutton
{
position: absolute;
left: 50%;
margin-left: -30px;
top: 50%;
margin-top: 20px;
width: 60px;
height: 25px;
border: solid;
border-color: #000000;
border-width: 1px;
background-color: #999999;
color: #000000;
font-size: 20px;
}
</style>
<script type="text/javascript">
function showoverlay(message)
{
var overlay = document.createElement('div');
overlay.setAttribute('id','overlay');
overlay.setAttribute('class','overlay');
document.body.appendChild(overlay);
var overlaytext = document.createElement('div');
overlaytext.setAttribute('id','overlaytext');
overlaytext.setAttribute('class','overlaytext');
overlaytext.innerHTML = message;
document.body.appendChild(overlaytext);
var overlaybutton = document.createElement('input');
overlaybutton.setAttribute('type','button');
overlaybutton.setAttribute('id','overlaybutton');
overlaybutton.setAttribute('class','overlaybutton');
overlaybutton.setAttribute('value','OK');
overlaybutton.setAttribute('onclick','deleteoverlay()');
document.body.appendChild(overlaybutton);
}
function deleteoverlay()
{
var elem = document.getElementById('overlay');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaytext');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaybutton');
elem.parentNode.removeChild(elem);
}
</script>
<body>
<input type="button" value="Show message" onclick="showoverlay('Message text')"/>
</body>
</html>
It works just fine in Firefox and Chrome, but IE (testing with IE9) seems to ignore the setAttribute method, because it only puts in the text and the button, but without the formatting (i.e. class was not applied) and also clicking the newly created button does not remove the objects (i.e. either id was not applied, or there is some additional incompatibility with portions of the code that remove the objects).
I tried to replace setAttribute like this:
<script type="text/javascript">
function showoverlay(message)
{
var overlay = document.createElement('div');
overlay.id = 'overlay';
overlay.class = 'overlay';
document.body.appendChild(overlay);
var overlaytext = document.createElement('div');
overlaytext.id = 'overlaytext';
overlaytext.class = 'overlaytext';
overlaytext.innerHTML = message;
document.body.appendChild(overlaytext);
var overlaybutton = document.createElement('input');
overlaybutton.type = 'button';
overlaybutton.id = 'overlaybutton';
overlaybutton.class = 'overlaybutton';
overlaybutton.value = 'OK';
overlaybutton.onclick = 'deleteoverlay()';
document.body.appendChild(overlaybutton);
}
function deleteoverlay()
{
var elem = document.getElementById('overlay');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaytext');
elem.parentNode.removeChild(elem);
elem = document.getElementById('overlaybutton');
elem.parentNode.removeChild(elem);
}
</script>
But this time it does not even add the text and the button.
So, how to make this script IE compatible, both showing all the elements and then removing them?
Thanks
Use this as your doctype
<!DOCTYPE html>
and then put this in the head of the document
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
and then enjoy using setAttribute and a number of other features which this will allow to properly work on IE8+ environments.
The correct way to set a class in your second example is:
overlaybutton.className = 'overlaybutton';
That will get classes working in IE. As far as deleting elements goes, I'd recommend reformatting your event handling attachment like so:
overlaybutton.onclick = deleteoverlay;
I have run into this issue as well. If you are able to include jQuery on the site, you can use $('#overlay').attr('class', 'overlay');. jQuery is extremely useful for making cross-browser compatible code.
Related
I am working on a video player that launches a video into an iframe within a div overlay. I want to avoid repetetive code such as onclick=() in every link, and want to avoid external libraries such as jQuery, because jQuery produces an unpleasant flickering screen when my video window is launched.
My problem is that with my work so far, only the first link opens the video overlay. I (somewhat) understand that the [0] indicates the first element in an array. Can an array contain an infinite numerical range, or is there a better way to accomplish my goal here? There will potentially be thousands of videos in these galleries, so listing them one at a time in my script is not practical.
I am still struggling to learn, so a working example would be greatly appreciated. Thanks
My work so far
https://jsfiddle.net/4oomb9rt/
example code
<!doctype html>
<html>
<head>
<title>Video Overlay</title>
<style>
body {
margin: 0;
font-family: arial;
}
#vidPlayer {
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #000;
overflow: hidden;
transition: 0.5s;
display: none;
color: white;
}
.closebtn {
position: absolute;
top: 7px;
right: 7px;
font-size: 50px;
}
.openbtn {
font-size: 30px;
}
.openbtn, .closebtn {
max-height: 48px;
max-width: 48px;
min-height: 48px;
min-width: 48px;
border-radius: 7px;
line-height: 12px;
}
.vidContent {
width: 100%;
text-align: center;
font-size: 32px;
}
</style>
</head>
<body>
<div id="vidPlayer">
<button class="closebtn">×</button>
<div class="vidContent">vidplayer content</div>
</div>
<button class="openbtn">☰</button>
<button class="openbtn">☰</button>
<button class="openbtn">☰</button>
<script>
function openNav() {
document.getElementById("vidPlayer").style.display = "block";
}
function closeNav() {
document.getElementById("vidPlayer").style.display = "none";
}
var opener = document.getElementsByClassName('openbtn')[0];
opener.addEventListener("click", function(e) {
openNav();
}, false);
var closer = document.getElementsByClassName('closebtn')[0];
closer.addEventListener("click", function(e) {
closeNav();
}, false);
</script>
</body>
</html>
You can iterate over element using ClassName and assign event listener.
for(var i=0;i<document.getElementsByClassName("openbtn").length;i++){
document.getElementsByClassName("openbtn")[i].addEventListener("click", function(e) {
openNav();
}, false);
}
Demo : https://jsfiddle.net/tj23hy3h/
You are on the right track. You want to make a few minor changes to your javascript.
var openers = document.getElementsByClassName('openbtn');
for(var i=0; i<openers.length; i++) {
openers[i].addEventListener("click", function(e) {
openNav();
}, false);
}
var closers = document.getElementsByClassName('closebtn');
for(var i=0; i<closers.length; i++) {
closers[i].addEventListener("click", function(e) {
closeNav();
}, false);
}
by iterating through all of your openers or closers you can add the listener to each one.
What you're problem is that you'll have to add you event listener to all of the elements of that type so something like this would work:
var opener = document.querySelectorAll('.openbtn');
Array.from(opener).foreach(function(opener_single){
opener_single.addEventListener("click", openNav, false);
});
and then the same theory for the closer elements.
what I'm doing here is I'm getting all elements with the class name of openbutton then looping through them in the loop i am then applying the click event listener in which runs the openNav function.
event.stopPropagation() Does not work as it should be in the Firefox browser, but in Google Chrome or Internet Explorer or opera it is works well, the problem in Firefox browser when Clicking on btn_1 should show message btn_1 not show div1 .Is there another function or a solution to this problem? Gratefully
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Hello!</title>
<style type="text/css">
<!-- body {
text-align: center;
}
#main {
position: absolute;
height: 400px;
width: 600px;
border: 1px solid black;
left: 400px;
}
#btn1 {
position: absolute;
height: 30px;
width: 200px;
border: 1px solid black;
left: 500px;
top: 420px;
}
#btn2 {
position: absolute;
height: 30px;
width: 200px;
border: 1px solid black;
left: 800px;
top: 420px;
}
#div1 {
height: 100px;
width: 100%;
background-color: #FF3399;
}
#div2 {
height: 100px;
width: 100%;
background-color: #99FF00;
position:relative;
}
#div3 {
height: 100px;
width: 100%;
background-color: #00CC99;
}
-->
</style>
<script>
function addElement2() {
var element = document.getElementById("main");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
var newContent = 0;
for (var i = 0; i <= 2; i++) {
newContent = newContent + 1;
var divname = "div" + newContent;
var divname2 = "div" + newContent;
var Content_text = "newContent" + newContent;
divname = document.createElement("div");
document.getElementById("main").appendChild(divname);
Content_text = document.createTextNode(divname2);
divname.id = divname2.toString().trim();
divname.appendChild(Content_text);
var btn = document.createElement("BUTTON")
document.getElementById(divname2.toString().trim()).appendChild(btn);
var btn_id= "btn_" + newContent;
btn.id =btn_id;
var Content_text2 = document.createTextNode("btn_" + newContent);
btn.appendChild(Content_text2);
btn.onclick = function(){delete_cooke1(this) ;} ;
divname.onclick = function(){go_to(this) ;} ;
}
}
function delete_cooke1(mmm){
event.stopPropagation();
var str = mmm.id.toString() ;
alert(str);
return;
}
function go_to(mmm){
var str = mmm.id.toString() ;
alert(str);
return;
}
</script>
</head>
<body>
<div id="main"></div>
<button id="btn1" onclick="addElement2()">1-Create 3 divs</button>
</body>
</html>
You will need to explicitly pass the event object into your callback function. For example:
document.querySelector("body").onclick = function(e){
console.log(e); // the current event
};
You are taking advantage of the fact that Chrome exposes the current event as a global on the window (i.e. window.event or just event). Firefox does not do this -- and other browsers are affected as well.
Calling event.preventDefault() worked in my case.
I have a react app and I was calling event.stopPropagation() inside the onclick handler of a material-ui checkbox like so:
<StyledCheckBox
icon={<CircleUnchecked />}
checkedIcon={<CircleChecked />}
checked={shipmentEditIds.includes(id)}
onClick={event => {
event.stopPropagation();
setShipmentEditIds({ id });
}}
/>
For some reason, only in firefox browser, this wasn't stopping the event from propagating.
Once I added event.preventDefault() to the onClick handler it fixed the problem.
I know this doesn't provide an answer as to why stopPropagation() isn't working in Firebox browser but just sharing what worked for me.
Pass event from onclick:
btn.onclick = function(){delete_cooke1(this, event) ;} ;
And use event argument with stopPropagation()
function delete_cooke1(mmm, e){
e.stopPropagation();
e.preventDefault(); // Add this line also
var str = mmm.id.toString() ;
alert(str);
return;
}
I'm creating some custom Alert Dialog boxes and while the box styles properly the Ok button that I insert is unresponsive. Below is the code to reference.
function CustomAlert(){
this.render = function(dialog){
...
...
document.getElementById('dialogboxfoot').innerHTML = "<button onclick = 'Alert.ok()'>OK</button>";
}
this.ok = function(){
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
var Alert = new CustomAlert();
$('#button1').click(function(){
Alert.render("Heyooo!!!");
})
The Alert.render function fires correctly. When I try to trigger the Alert.ok function (inserted with the innerHTML function) I get " Uncaught ReferenceError: Alert is not defined" referencing line 1 of my index.html file, which is the DOCTYPE declaration.
Why is "Alert" not defined when called in this context?
Your question is rather vague. Keep in mind that the JavaScript alert() method cannot be styled, so you would need to create your own modal. I use one like this (very responsive):
function styledAlert(message){
document.getElementById('alertText').innerHTML = message;
document.getElementById('alertWrapper').style.display = 'block';
}
#alertWrapper {
position: absolute;
display: none;
top:0;
left:0;
right:0;
bottom:0;
}
#alertBox {
position: fixed;
top: 25%;
bottom: 25%;
right: 25%;
left: 25%;
background: rgba(0,0,0,0.7);
border-radius: 25px;
}
#alertAccept {
position: absolute;
bottom: 15px;
right: 15px;
}
#alertText {
margin: 15px;
color: white;
}
<div id="alertWrapper"><div id="alertBox"><p id="alertText"></p><button id="alertAccept" onclick="document.getElementById('alertWrapper').style.display = 'none'">OK</button></div></div>
Type in an alert message: <input type="text" onblur="styledAlert(this.value)"/> And then blur the textbox to see the alert . . .
If this is not what you are looking for, please make your question a little more specific on the end result that you are seeking.
Edit- here's the code
<html>
<head>
<script type="text/javascript">
var prodURL = "https://blah";
function postwith (to, params) {
var myForm = document.createElement("form");
myForm.method = "post";
myForm.target = "_self";
myForm.action = to;
for (var p in params) {
var myInput = document.createElement("input");
myInput.setAttribute("name", p);
myInput.setAttribute("value", params[p]);
myInput.setAttribute("type", "hidden");
myForm.appendChild(myInput);
}
document.body.appendChild(myForm);
myForm.submit();
}
</script>
<style type="text/css">
#overlayPageLoad {
background: none repeat scroll 0 0 white;
height: 100% !important;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 100% !important;
}
#overlayPageLoad .middle {
color: #888888;
font-size: 16px;
left: 0;
position: absolute;
top: 50%;
width: 100%;
}
</style>
</head>
<body onload= "postwith(prodURL, {SF_SESSION:'{!$Api.Session_ID}',SF_ENDPOINT:'{!$Api.Partner_Server_URL_120}'})"; >
<div id="overlayPageLoad">
<span class="middle">
<img src="https://prettypicture">
Connecting...
</span>
</div>
</body>
</html>
Modern browsers only allow opening new windows in direct response to specific user-generated actions, like click events. You can't open them at other times (such as window load or unload), because it used to be that browsers allowed that, and it promptly got abused. So now we have popup-blockers.
Update: Re your comment:
...business currently has the link open in the existing window, and now they want it in another..
That you can do. You do it in the page linking to the page you want in a new window, not the page being opened, like this:
text of link
See the target attribute of a elements.
I need to replace our Ajax Modal Popup controls with a JavaScript equivalent. We use this as a simple context sensitive help type popup. I did a quick browse but didn't see quite what I was looking for. I just need some text and a simple Close button/link, but I would like the page darkened below the popup, as it does with the Ajax modal control.
Can anyone suggest a nice JavaScript popup/help type solution that you've used?
I can provide you the code. Do your modifications as necessary, OK?
Page JavaScript:
function myPop() {
this.square = null;
this.overdiv = null;
this.popOut = function(msgtxt) {
//filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;
this.overdiv = document.createElement("div");
this.overdiv.className = "overdiv";
this.square = document.createElement("div");
this.square.className = "square";
this.square.Code = this;
var msg = document.createElement("div");
msg.className = "msg";
msg.innerHTML = msgtxt;
this.square.appendChild(msg);
var closebtn = document.createElement("button");
closebtn.onclick = function() {
this.parentNode.Code.popIn();
}
closebtn.innerHTML = "Close";
this.square.appendChild(closebtn);
document.body.appendChild(this.overdiv);
document.body.appendChild(this.square);
}
this.popIn = function() {
if (this.square != null) {
document.body.removeChild(this.square);
this.square = null;
}
if (this.overdiv != null) {
document.body.removeChild(this.overdiv);
this.overdiv = null;
}
}
}
Now the HTML page, using the JavaScript file:
<html>
<head>
<script type="text/javascript" src="NAME OF THE PAGE!.js"></script>
<style>
div.overdiv { filter: alpha(opacity=75);
-moz-opacity: .75;
opacity: .75;
background-color: #c0c0c0;
position: absolute;
top: 0px;
left: 0px;
width: 100%; height: 100%; }
div.square { position: absolute;
top: 200px;
left: 200px;
background-color: Menu;
border: #f9f9f9;
height: 200px;
width: 300px; }
div.square div.msg { color: #3e6bc2;
font-size: 15px;
padding: 15px; }
</style>
</head>
<body>
<div style="background-color: red; width: 200px; height: 300px;
padding: 20px; margin: 20px;"></div>
<script type="text/javascript">
var pop = new myPop();
pop.popOut("Jose leal");
</script>
</body>
</html>
Hope that this can help.
I've used the simplemodal jQuery plugin and I've been quite happy with it. You can check it out here.
Maybe you are looking for something like this? [ui.jquery.com]
It's the simplest one, and can come bundled with a lot of other eye candy. Of course you could also look around the rest of the jQuery plug-ins page, specially the Windows and Overlays section.
I developed a javascript library called Msg. It allows to easily create a modal window / popup. It creates an overlay behind it that darkens the background. It has no close button but it can be closed by clicking the background overlay.