I'm trying to add a popup with javascript which is triggered by a query string of the URL. I want the popup to stay hidden unless the query string is attached to the URL. I'll be using the popup mostly for redirects and any messaging that I want to display relating to the redirect.
I've tried using a combination of different functions I've used previously and can't get it to work, so I was just wondeirng if someone could take a look through and tell me where I'm going wrong.
The redirect with query string will be something like this:
https://www.example.com/?fromoldsite
SCRIPT
<script>
var fromOldURL = window.location.href;
if (fromOldURL.indexOf('fromoldsite') !== -1) {
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('redirectPopUp').style.display = "none";
else document.getElementById('redirectPopUp').removeAttribute('style');
window.onload = function () {
setTimeout(function () {
PopUp('show');
}, 3000);
}
}
}
</script>
CSS
<style>
#redirectPopUp {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
z-index: 1001; }
#popUpContent{
padding: 100px;
width: 50%;
height: 50%;
background-color: #FFF;
background-size: cover
position: relative;
margin: 200px auto; }
</style>
HTML
<div id="redirectPopUp">
<div id="popUpContent">
<h2>Popup Content Here</h2>
<h6>Popup Message Here</h6>
<input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" />
</div>
</div>
I want the popup to show up only if the url contains "fromoldsite" and to pop up after 3 seconds. At the moment, the popup is showing up automatically regardless of the URL.
Any help would be appreciated.
At the moment your popup is displaying simply because you didn't call PopUp("hide"); yet.
Furthermore the function definition of PopUp is inside the if block that evaluates the query string. Move it above, outside of the if block.
Lastly the setTimout function should just be triggered if the query string is present.
Your corrected code should look like this:
<script>
function PopUp(hideOrshow) {
if (hideOrshow == 'hide')
document.getElementById('redirectPopUp').style.display = "none";
else
document.getElementById('redirectPopUp').removeAttribute('style');
}
var fromOldURL = window.location.href;
if (fromOldURL.indexOf('fromoldsite') !== -1) {
setTimeout(function() {
PopUp('show');
}, 3000);
}
PopUp("hide");
</script>
Related
I was wondering how you can link to a element that is loaded from an external javascript (it's like a chat widget hosted on an external website). I googled a lot of threads on stack overflow with similair issues but none of the code worked as expected.
The code that appears in the header of my website;
var shadow = 'box-shadow: none;'
var customStyle = '.ExampleLauncherContent__bubble {' + shadow + '}';
var myExample = new ExamplePopup({
index: 'https://example.com/example.html',
launcherOptions: {
style: customStyle,
}
});
Then the element is styled like this on the custom CSS section of my website
.ExampleLauncher:before {
content: "Example";
position: absolute;
padding: 15px;
padding-left: 75px;
opacity: 1;
color: #333;
border-radius: 30px;
background: #FFF;
z-index: -1;
}
Now I would like to make the entire CSS styled element clickable with a link, but I am not sure how to integrate the code, example i found in other threads that did not work as expected (or maybe I implemented wrong)
<script>
a onclick="jsfunction()" href="#"
</script>
<script>
div.ExampleLauncher("click", function() {
alert("You clicked this div");
});
</script>
<script>
$(".ExampleLauncher").keyup(function(event){
if(event.keyCode == 13){
$(".ExampleLauncher").click();
}
});
</script>
<script>
$(".ExampleLauncher").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
</script>
<script>
$('.ExampleLauncher').onclick="myExample.open()
});
</script>
Regarding recent comments, this is script used to trigger the chatbot popup with a textlink
myLandbotpop.on('landbot-load', function(){
var buttonOpen = document.getElementsByClassName("openbot")[0];
buttonOpen.addEventListener("click", myLandbotpop.open)
I need to show the loading image until data fetched from the database and bind to the datagrid.I have a button in the parent page (A.aspx), when we clicked on that button it will display the data in the Overlay (B.aspx). We have used greybox to display page in the overlay. I have placed the loading image in the B.aspx
The fetching and display the data in the datagrid are handled in the Page_Load. Since it all the logics are handled in the page_load, the elements will not be available in the DOM.
I am not able to show/hide the loading image.
Note: I have tried to placed the same loading image in the parent page (A.aspx). But the loading image is displaying behind the overlay.
Please find the piece of code:
protected void Page_Load(object sender, EventArgs e)
{
try
{
throbberSplashOverlay.Visible = true;
}
}
#ctl00_CPSContentHolder_throbberSplashOverlay
{
background-color:White;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 500;
}
#throbberSplash
{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background: url(../App_Themes/Blue/images/indicator.gif) no-repeat center center;
}
<div id="throbberSplashOverlay" runat="server" visible="false"><div id="throbberSplash"></div></div>
as per my understanding you are displaying data in b.aspx.so use javascript function in b.aspx.onbeforeunload is for IE.
EDIT:while page is loading for the first time you can not call javascript function until the page loads completely.so show a wait image inside a div.and hide your entire page until the page loads completely.second time you can use onunload or onbeforeunload events.
<html>
<head>
<script>
</script>
</head>
<body onunload="doHourglass();" onbeforeunload="doHourglass();" onload="show();">
<div id="divWait" style="display:inline" >
<h1>wait...</h1>
</div>
<div id="main" style="display:none">
<input type="button" onClick="call your method" />
//your rest of the html
<div/>
<script>
function doHourglass()
{
console.log("inside dohour glass");
var divwait=document.getElementById('divWait');
var divmainpage=document.getElementById('main');
divmainpage.style.zIndex="0";
divwait.style.zIndex="1";
divwait.style.display='inline';
divmainpage.style.display='none';
}
function show()
{
console.log("inside show");
var divwait=document.getElementById('divWait');
var divmainpage=document.getElementById('main');
divmainpage.style.zIndex="1";
divwait.style.zIndex="0";
divwait.style.display='none';
divmainpage.style.display='inline';
}
</script>
</body>
</html>
I am trying to create a Lightbox-like effect with CSS and Javascript. I'm getting an element by it's id (OverlayContainer) and it will change it's classname to accomodate the dark background for now. I have set up the code in a way that it checks classname value of the element (OverlayContainer) to see whether the classname is set to inactive(normal background) or active (darker). However when i press the submit button to change the state it appears to change classes for a second (screen gets darker for a split second) but then reverts back to original state (OverlayInactive). If anyone has any kind of explanation for this happening please respond.
Here is my CSS code:
.OverlayBoxInactive {
background-color: rgba(0, 0, 0, 0);
position: absolute;
width: 0%;
height: 0%;
top: 0px;
left: 0px;
}
.OverlayBoxActive {
background-color: rgba(0, 0, 0, 0.85);
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
and here is my Javascript code:
function ActivateOverlay() {
var overlayBox = document.getElementById("OverlayContainer");
var elementClassName = overlayBox.className;
if (elementClassName == "OverlayBoxInactive") {
overlayBox.setAttribute("class", "OverlayBoxActive");
//alert('Overlay Activated');
} else if (elementClassName == "OverlayBoxActive") {
overlayBox.setAttribute("class", "OverlayBoxInactive");
//alert('Overlay Inactivated');
}
}
Thanks in advance,
-Realitiez
EDIT POST: http://jsfiddle.net/bk5e9t0e/
The default action of an input type="submit" is to post the form's data back to the server, which causes your page to reload. This is why your class is removed.
If you wish to prevent the page reload, you need to prevent the default action. The easiest way to do this is to return false from the onclick handler:
onclick="ActivateOverlay(); return false;"
Your code was not working because:
You were using input type=submit [so you were getting a refresh page kind of feel], which should be type=button or return false; in click handler
You were calling function ActivateOverlay which was defined later than the call itself.
Find your solution here in jsFiddle
<script>
function ActivateOverlay() {
//alert('Overlay Activated');
var overlayBox = document.getElementById("OverlayContainer");
var elementClassName = overlayBox.className;
if (elementClassName == "OverlayBoxInactive") {
overlayBox.setAttribute("class", "OverlayBoxActive");
//alert('Overlay Activated');
} else if (elementClassName == "OverlayBoxActive") {
overlayBox.setAttribute("class", "OverlayBoxInactive");
//alert('Overlay Inactivated');
}
}
</script>
<div id="OverlayContainer" class="OverlayBoxInactive"></div>
<div class="main"></div>
<fieldset>
<form>
<input type="button" onclick="ActivateOverlay();return false" value="Hit Me"></input>
</form>
</fieldset>
<script type="text/javascript" src="index.js"></script>
http://jsfiddle.net/4queag8m/
You need to add an preventDefault() in your function. it's reloading the page.
First add the element to your call:
onclick="ActivateOverlay(this)"
and then add the parameter with the prevent to your function - like this"
function ActivateOverlay(evt) {
evt.preventDefault()
...
}
This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 9 years ago.
I am trying to make a div hidden by default and show by clicking a button. To close the div, I can either click on the button or anywhere else on the screen. Below is my attempt but the closing part is not working. I appreciated if anyone can point me to the right implementation or maybe a better way to do this.
$('#theDiv').hide();
$("#showDivBtn").click(function(){
$("#theDiv").show();
});
if ( !$('#theDiv:hidden') ) {
$(document).click(function() {
$('#theDiv').hide();
});
$('#theDiv').click(function(e) {
e.stopPropagation();
return false;
});
}
});
placing the entire event handler inside a condition only checks the condition on first pageload, and the event handler is probably never attached, try it like this instead :
$('#theDiv').hide();
$(document).on('click', function(e) {
if ( $(e.target).closest('#showDivBtn').length ) {
$("#theDiv").show();
}else if ( ! $(e.target).closest('#theDiv').length ) {
$('#theDiv').hide();
}
});
FIDDLE
Try this,
$('#theDiv').hide();
$("#showDivBtn").click(function(){
$("#theDiv").toggle();
});
$(document).on("click" , function(event){
if( $(event.target).attr("id") != "theDiv" && $(event.target).attr("id") != "showDivBtn" && $(event.target).parents("#theDiv").attr("id") != "theDiv")
{
$('#theDiv').hide();
}
});
try using
if( !$('.theDiv' ).is( ':visible' ) )
instead of
if ( !$('.theDiv:hidden') )
try this
<script type="text/javascript">
$('.opendiv').hide();
$(document).click(function (event) {
var $target = $(event.target);
if ($target.attr('id') == 'addAccordion') {
if ($('.opendiv').is(':hidden')) {
$('.opendiv').show();
}
else {
$('.opendiv').hide();
}
}
else if ($target.closest('.opendiv').length > 0) {
}
else {
$('.opendiv').hide();
}
})
</script>
<div>
<input id="addAccordion" type="button" value="ADD COMMENT" />
</div>
<div id="rs" class="opendiv">
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">
www.asp.net</a>.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
</div>
I don't think you can target document with a .click handler like that.
Rather than making it so you can literally click anywhere to close the DIV, just make it seem that way. Put a clear DIV behind the one that you want to be able to close and make it cover the whole screen. Then you can attach your click handler to that.
HTML:
<button>Click me to show the DIV</button>
<div class="container">
<div class="thediv">
<p>I'm the DIV</p>
</div>
</div>
JavaScript:
$(document).ready(function () {
var $button = $("button");
var $container = $("div.container");
$button.click(function () {
$container.show();
});
$container.click(function () {
$container.hide();
});
});
CSS:
div.container {
display: none;
position: fixed;
top: -5%;
left: -5%;
width: 110%;
height: 110%;
}
div.thediv {
position: absolute;
top: 30%;
left: 10%;
background-color: gray;
color: white;
padding-top: 1em;
border-radius: 5px;
width: 50%;
}
p {
background-color: black;
text-align: center;
padding: 2em;
}
For demonstration purposes, I made the background DIV visible in this Fiddle
Just an amateur/hobbyist here - what this is supposed to do is be a tool for a board game I play with friends. The plastic sliders the game uses are too loose to be reliable so I wanted to reproduce that functionality as a webpage to use on a smartphone while playing.
It gets a character's name from a form (on another page) and supplies it to
the one below. Based on the name, it chooses the right set of attributes from the switch statement (I removed all but two cases for the sake of simplicity), runs through a for loop to display the attributes in a list and highlight the "current" value as green. Two buttons are supposed to increase or decrease the array counter ("speed"), and rerun the function that draws the array with the new highlighted value. innerHTML is meant to redraw the div ("speeddiv") with the new results.
Now the javascript console in chrome is telling me that speedcounter() and character are undefined. I suspect this has something to do with the scope of the function and variables I'm using being lost through innerhtml. All I want to do is find a way to easily redraw/replace the stat counter so it appears that the highlighted number is moving up and down as you press the + or - buttons, within the div.
I'm only working on the "speed" attribute below, so I can get that working first.
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
html, body { height: 100%; width: 100%; margin: 0; }
#dossier {height: 10%; text-align: center; background: #808080}
#container {height: 90%; width: 100%; background: #000000; overflow: hidden; float: left}
#stats {height: 100%; width: 100%; float: left; position: relative}
#speeddiv, #mightdiv, #sanitydiv, #knowledgediv {width: 25%; height: 100%; text-align: center; float: left; position: relative; overflow: hidden}
#speeddiv {background: #0000FF}
#mightdiv {background: #FF0000}
#sanitydiv {background: #FFFF00}
#knowledgediv {background: #00FF00}
</style>
<?php $character = $_GET["character"]; ?>
<script type="text/javascript">
var character = "<?php echo $character ?>";
var sp;
var speed;
function speedcounter() {
var spx;
document.write(' <h2>Speed</h2></br>');
document.write('<input type="button" onclick="addspeed();" value="+"><br />');
for (spx=8; spx>=0; spx--) {
if (spx == speed) {
document.write('<font color=#00FF00>');
}
document.write(sp[spx]);
document.write('<font color=#000000><br />');
}
document.write ('<input type="button" onclick="remspeed();" value="-">');
}
function addspeed() {
if (speed < 8) {
speed++;
document.getElementById("speeddiv").innerHTML = "<script type="text/javascript">speedcounter();<\/script>";
}
}
function remspeed() {
if (speed > 0) {
speed--;
document.getElementById("speeddiv").innerHTML = "<script type="text/javascript">speedcounter();<\/script>";
}
}
switch (character) {
case "brandon":
sp=["0","3","4","4","4","5","6","7","8"];
mt=["0","2","3","3","4","5","6","6","7"];
sn=["0","3","3","3","4","5","6","7","8"];
kn=["0","1","3","3","5","5","6","6","7"];
speed=3;
might=4;
sanity=4;
knowledge=3;
break;
case "flash":
sp=["0","4","4","4","5","6","7","7","8"];
mt=["0","2","3","3","4","5","6","6","7"];
sn=["0","1","2","3","4","5","5","5","7"];
kn=["0","2","3","3","4","5","5","5","7"];
speed=5;
might=3;
sanity=3;
knowledge=3;
break;
}
</script>
<div id="dossier">
<script type="text/javascript">
document.write(character);
</script>
</div>
<div id="container">
<div id="stats">
<div id="speeddiv">
<script type="text/javascript">
speedcounter();
</script>
</div>
<div id="mightdiv">
<h2>Might</h2></br></br>
</div>
<div id="sanitydiv">
<h2>Sanity</h2></br></br>
</div>
<div id="knowledgediv">
<h2>Knowledge</h2></br></br>
</div>
</div>
</div>
</script>
</body>
</html>
I've created a jsfiddle from the code you've posted http://jsfiddle.net/amelvin/bwwce/ - working on it interactively in there may help.
I think your problem is what is happening with the document.write; the section on document.write explains that what document.write does is not very predictable.
Use a javascript library like jquery to insert elements into the webpage rather than document.write - the html() method in jquery (amongst others) allows you dynamically and predictably manipulate any aspect of the page based on events like button pushes, adding or removing buttons or divs.