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.
Related
I'm trying to code my own Shopify theme and in that, I want to create different side panels (all coming in from the right) when someone clicks the panel link. I managed to get this to work with one panel and a script I found here on Stackoverflow (sorry I'm a complete newbie), but now I can't open different panels. Each link opens them all (obvious) but couldn't manage to trigger by the ID (my guess how to solve it) rather than the classes.
I would also like the overlay to close the panels. I only manage this by adding the toggle button into each panel.
My sidepanel script
<script>
$(document).ready(function() {
function toggleSidebar() {
$(".sidepanel-toggle").toggleClass("active");
$(".overlay").toggleClass("active");
$(".sidepanel").toggleClass("active");
$("body").toggleClass("activeoverlay");
}
$(".sidepanel-toggle").on("click tap", function() {
toggleSidebar();
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
toggleSidebar();
}
});
});
</script>
And the HTML for handling the panels
meta data
<aside id="extra_prod_meta" class="sidepanel">
meta data
</aside>
Brand
<aside id="extra_prod_brand" class="sidepanel">
meta data
</aside>
$body = $('body');
$('a.sidepanel-toggle').on('click', function(e) {
e.preventDefault();
let _this = $(this),
tg = _this.data('panel');
addActivePanel(tg,_this);
});
$('.close, .overlay').on('click', function(){
removeActivePanel();
});
function removeActivePanel(){
$body.removeClass('activeoverlay');
$('a.sidepanel-toggle, aside').removeClass('active');
}
function addActivePanel(panel,btn) {
$body.addClass('activeoverlay');
$('#'+panel).addClass('active');
btn.addClass('active');
}
aside {
box-sizing: border-box;
width: 200px;
height: 100%;
position: fixed;
top: 0;
right: -200px;
padding: 1rem;
background: #000;
color: #fff;
z-index: 2;
transition: right .3s ease;
}
aside.active {
right: 0;
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.2);
z-index: -1;
display: none;
}
.activeoverlay .overlay {
display: block;
z-index: 1;
}
.close {
text-align: right;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
meta data
<div class="overlay"></div>
<aside id="extra_prod_meta" class="sidepanel">
<div class="close">X</div>
meta data extra_prod_meta
</aside>
Brand
<aside id="extra_prod_brand" class="sidepanel">
<div class="close">X</div>
meta data extra_prod_brand
</aside>
You could use data-attributes and target the correct panel.
$('a.sidepanel-toggle').on('click', function(e) {
e.preventDefault();
let _this = $(this),
tg = _this.data('panel');
$('#'+tg).addClass('active');
})
.active {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
meta data
<aside id="extra_prod_meta" class="sidepanel">
meta data
</aside>
Brand
<aside id="extra_prod_brand" class="sidepanel">
meta data
</aside>
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.
Please refer to the following SCRIPT
<html>
<style>
#div_content {
height: 200px;
width: 200px;
background-color: yellow;
position: relative;
}
#btn_addContent{
position: absolute;
left: 0;
bottom: 0;
}
#btn_removeContent{
position: absolute;
right: 0;
bottom: 0;
}
</style>
<body>
<div id="div_content">
<p> Existing Content </p>
<button id="btn_addContent">Add Content </button>
<button id="btn_removeContent">Remove Content </button>
</div>
</body>
<script>
var divElement = document.getElementById("div_content");
function addContent(){
divElement.innerHTML = divElement.innerHTML + "<P> New Content </p>";
}
function removeContent(){
divElement.parentNode.removeChild(divElement);
}
var btnAddContent= document.getElementById("btn_addContent");
btnAddContent.onclick = addContent;
var btnRemoveContent = document.getElementById("btn_removeContent");
btnRemoveContent.onclick = removeContent;
</script>
</html>
While running this script, any of the function is running that too only once means Javascript is loading only once kindly do the needful.
i.e., if I want to addcontent I am able to add it single time
and at the same time means on the same page if at all I want to remove the div_content section I am not able to do so,
but, on fresh reload I'm able to remove the div_content section
that is for every reload I can only do add or remove not both and not even multiple adding.
innerHTML += will destroy all the child elements reference(Remove and add again in DOM tree).
Use .appendChild
From MDN, innerHTML removes all of element's children, parses the content string and assigns the resulting nodes as children of the element.
var divElement = document.getElementById("div_content");
function addContent() {
var elem = document.createElement('p');
elem.textContent = 'New Content';
divElement.appendChild(elem);
}
function removeContent() {
divElement.parentNode.removeChild(divElement);
}
var btnAddContent = document.getElementById("btn_addContent");
btnAddContent.onclick = addContent;
var btnRemoveContent = document.getElementById("btn_removeContent");
btnRemoveContent.onclick = removeContent;
#div_content {
height: 200px;
width: 200px;
background-color: yellow;
position: relative;
}
#btn_addContent {
position: absolute;
left: 0;
bottom: 0;
}
#btn_removeContent {
position: absolute;
right: 0;
bottom: 0;
}
<div id="div_content">
<p>Existing Content</p>
<button id="btn_addContent">Add Content</button>
<button id="btn_removeContent">Remove Content</button>
</div>
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.
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.