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()
...
}
Related
A alert() box is opened when I click on a button. An alert has only 'OK' as an input.
1. I want to redirect if the person doesn't click on 'OK' for a certain time (2seconds)
2. Is there a better popup where the user doesn't have to click on anything, where it just shows the message and just redirects. Something other than (prompt,alert,confirm)
I also want to redirect to the same page if he clicks on 'OK', which I have already done.
$(document).ready(function() {
$('.btn').click(function(e) {
e.preventDefault();
var popup = alert("Thank you");
if (!popup) {
window.location.href = "www.google.com";
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="submit" value="Submit" class="btn" style="background: #FF3900; color: #fff;">
</form>
Need to redirect if no action is taken after pop up is displayed. My page doesn't do anything, after the button is clicked and the pop up is shown. If i change tabs, it automatically for some reason redirects to the asked site.
The alert is blocking the further code execution as already mentioned. One workaround would be to create custom popup, and start a timer once it is opened. Then if button is not clicked inside the popup, redirect, if it is clicked, abord the timeout. For example:
$(document).ready(function() {
var $activeTimer; // global timer to track inactivity
$('.btn').click(function(e) {
e.preventDefault();
$('#popup').addClass('active'); // show the popup on click
// start the timer
$activeTimer = setTimeout(function(){
// do something after certain seconds of inactivity
window.location.href = "www.google.com";
}, 3500)
});
// if ok button in popup is clicked, abort the timer for example
$('#confirm').on('click', function(e) {
e.preventDefault();
clearTimeout($activeTimer);
// do something when clicked
})
});
#popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
z-index: -1;
padding: 2em 3em;
border: 1px solid #333;
}
#popup.active {
opacity: 1;
z-index: 9999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="submit" value="Submit" class="btn" style="background: #FF3900; color: #fff;">
<div id="popup">
<p>Thank you<p>
Ok
</div>
</form>
alert() is blocking javascript's execution.
alert('alert')
console.log('log')
'log' would not appear in console until you close the alert dialog.
So only way to solve your problem is to create custom dialog window without using built-in alert
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>
I have a html/JavaScript project that i am working on and i am encountering problems.
I am making a sign-up form for an email newsletter and i have it in a div element in the middle of a page like so:
(i know, its structure is really messed up but i am just playing around right now.)
<div id="overlay"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><center><div id="nothin" class="form">Sign Up For Our Newsletter<br><br>
<table><TD width="50%" valign="middle"><img class="round"src="picture1.jpg" height="150" width="250"></td><td width="5%"></td><td width="40%" valign="middle"><form>
<input type="text" class="round"required id="name" width="190"><br><br>
<input type="email" class="round"required id="email" width="190"><br><br>
<input id="submit"type="submit" class="button"value="Submit Your Email" onclick="success()"><br>
</form></td></table></div></center></div>
The problem i have is i made the script below so when you submit you get a success message and a button that should close down the div, leaving the webpage:
<script>
function success()
{
document.getElementById("nothin").innerHTML="<div id='form2'>Success!<br><br>Thank You!<br> You have successfully signed up for the Our newsletter!<br><button onclick='hide()' class='button'>Continue</button></div>";
}
</script>
When you click on the button "continue" it should run the function "hide()":
<script>
function hide()
{
document.getElementById("overlay").innerHTML="";
}
</script>
My problem is that when the "continue" button is clicked, it only closes <div id="nothin>
not "overlay" like it should. Do you have any idea why? Should i use some other method to close it?
Here is the CSS for the form, it wont work that well without it:
<style>
#overlay {
z-index: 16777271;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}
.form, .form2{
background-color:white;
color:black;
width:500;
height:250;
align:center;
border-radius: 40px;
border:dashed darkgreen;
}
.round{
border-radius:8px;
}
.button{
background-color:green;
border-color:green;
border-radius:45px;
height: 40px;
width:190px;
}
.BUTTON:HOVER{
background-color:darkgreen;
border-color:darkgreen;
border-radius:45px;
}
</style>
In the hide() function you are making the contents of "#overlay" element empty while element itself, remains.
One solution can be hiding the element.
This should work -
function hide(){
document.getElementById("overlay").style.visibility = 'hidden';
/*
//or setting the display to none
document.getElementById("overlay").style.display = 'none';
*/
}
Suppose you have a html code like
<div id ='parentWow'>
<div id='ChildHello'>
Some Content
<div>
</div>
If you want to remove the child of id "ChildHello" from the parent, instead of just making their visibility "hidden", you can use the following javascript
document.getElementById("ChildHello").parentNode.removeChild(document.getElementById("ChildHello"))
This helps... (y)
I have a one field form (text input and submit button). Here is the form code:
<form id="new_skill" class="new_skill" method="post" action="/skills" >
<li>
<input id="resume-field" class="field field288" type="text"
value="Type a speciality you want to add to your profile"
title="Type a speciality you want to add to your profile"
name="skill[label]"></input>
</li>
<li class="td80">
<input class="button button-add button-add-disabled"
type="submit" value="ADD +" name="commit"></input>
</li>
</form>
Using javascript, if text is entered in the text field, the submit button should be unclickable. If there is no text in the field, it should be clickable. I am doing that by using javascript to remove and/or put back the button-add-disabled class. Here is the javascript:
(function($){
$(document).on('focusin', '#resume-field', function() {
$(this).parents().find('.button-add-disabled').removeClass('button-add-disabled');
}).on('focusout', '#resume-field', function(){
if(this.value==' '||this.title==this.value) {
$(this).parents().find('.button-add').addClass('button-add-disabled');
} else {
$(this).parents().find('.button-add').removeClass('button-add-disabled');
}
});
$('.button-add-disabled').click(function(){
return false;
});
}(jQuery));
And here is the css:
.button-add { width: 49px; height: 28px; border: solid 1px #8c8c8c; display: block;
font-size: 11px; line-height: 28px ; color: #fff; text-align: center;
font-family: 'Ubuntu', sans-serif; transition: none; margin: 0 0 0 auto;
border-radius: 3px; }
.button-add:hover { text-decoration: none;
-webkit-transition:none;
-moz-transition:none;
-ms-transition:none;
-o-transition:none;
transition:none;
}
.td80 .button-add { margin-left:35px !important; }
.button-add-disabled { background: url(/assets/add-specialities-disabled.png)
repeat-x 0 0; box-shadow: 0 0 0 0; margin-left:35px; }
.button-add-disabled:hover { background: url(/assets/add-specialities-disabled.png)
repeat-x 0 0; box-shadow: 0 0 0 0; }
The classes are changing as expected and the javascript is working. For some reason though, even if .button-add-disabled is not applied to the form element, the form element is still returning false and therefore won't submit. When "button-add-disabled" is removed by the javascript, the form should submit. I can see the server logs. If I remove the line from the javascript "return: false", the form works, So i know the form itself works. I'm pretty sure something is wrong with the javascript. Any ideas?
That's not how that works. Events are bound to elements, which are reached via selectors; they are not bound to selectors.
When you bind the event directly to the element, the event is now bound to that element until you explicitly unbind it. The original selector is no longer relevant.
You need to do this, or something like it:
$('.button-add-disabled').click(function(){
return !$(this).hasClass('button-add-disabled');
});
That is, test whether the button is currently disabled by your class at the point the event is raised.
As an aside, this...
if(this.value==' '||this.title==this.value) {
$(this).parents().find('.button-add').addClass('button-add-disabled');
} else {
$(this).parents().find('.button-add').removeClass('button-add-disabled');
}
should be this:
var disabled = this.value == ' ' || this.title == this.value;
$(this).parents().find('.button-add').toggleClass('button-add-disabled', disabled);
You want to set/remove the disabled attribute of the input element, not set a CSS style which is for display purposes only
$('#resume-field').on('change', function() {
if ($(this).val().length == 0) {
$(this.form).find('input[type=submit]').attr('disabled', false).removeClass('button-add-disabled');
} else {
$(this.form).find('input[type=submit]').attr('disabled', true).addClass('button-add-disabled');
}
})
jsFiddle Demo
Also be sure that you handle the submission of the form when the user presses enter in the input field, you can do that using the jQuery .submit event handler and preventing the default behaviour. It is also essential you handle this server side.
EDIT: I just noticed what the CSS was doing, updated answer.
Following is my fiddle in which i made a div with class overlay and i am trying to do that when user clicks on submit button then that overlay class div appears on the div of contact form and on clicking close button that div hides and it shows the reset form again. Kindly let me know how can I make such kind of overlay on the contact form on submit button
http://jsfiddle.net/VqDKS/
.overlay
{
background-color: yellow;
height:200px;
width: 300px;
}
See this, edited with jQuery and CSS. Set the overlay to position: absolute and hide it before the form is submitted. Then remove it when the 'Close'-button is clicked.
http://jsfiddle.net/VqDKS/3/
CSS:
.overlay
{
background-color: yellow;
height:200px;
width: 300px;
position: absolute;
top: 0px;
z-index: 99;
display: none;
}
Jquery code:
function js()
{
alert('clicked submit: get typed name');
var name = $("#FN3").val();
$("#name").html( name );
$(".overlay").fadeIn()
return false;
}
$(document).ready(function(){
$(".close").click(function(){
$(".overlay").fadeOut();
$('#contact_form3 input[type="text"]').val('');
});
});
Make following change in HTML:
<input type="button" value="close" class="close">
You need to hide your overlay at the beginning just show the form. When clicked submit, show overlay and hide the form. Then when close is clicked hide the overlay and show the form.
It can be as :
function js()
{ alert('clicked submit: get typed name');
var name = $("#FN3").val();
$("#name").html( name );
$("#form-div").hide();
$(".overlay").show();
return false;
}
function closeOverlay(){
$("div.overlay").hide();
$("div#form-div").show();
}
please have a look here :
http://jsfiddle.net/injulkarnilesh/VqDKS/7/
Basically you need to set the contact form wrapper position property to relative and then just set position of your overlay to absolute, something like this:
.contact_wrapper { position: relative; }
.overlay { position: absolute; top: 0; left: 0; }
This way you will be sure that your overlay will be absolute positioned on the top of your contact form.
When page is loaded, we don't need the overlay, so you can add the following property:
.overlay { display: none; }
In your code, when you submit the form you are using onclick event to execute your handler.
Here you need to make overlay visible again, you can use .show() of jQuery:
$('.overlay').show();
And now you need to add event handler to deal with close button, you can simply add unique idintifier (e.g. class) to the element, then with jQuery you can trigger click event for this element and here you can hide your overlay.
$('.closeBtn').click( function() {
$('.overlay').hide();
});
By the way, you can read about .submit() and .ajax() methods in jQuery.
Here is a working jsFiddle.
I updated your fiddle a bit: http://jsfiddle.net/nweevers/VqDKS/8/
This is a way to do this. But then your form isn't still submitted.
The best way is to show the overlay after the post. And then you can hide the overlay with the button.
$overlay.on('click', 'input[type=button]', function() {
$overlay.hide();
});