I am working on a site with a pop up, the only thing I am missing is a blur effect whenever this pop up is showing. This pop up will be showing every time the page loads, I therefore found a great blur code here on SO. Although that code is for a function where the blur effect is shown by a button.
Because of that I have changed the code, so that instead of the button it is now onLoad which is launched from the body tag.
The only issue is that the blur is showing up in front of the actual pop up which it isn't supposed to. I have tried to change the z-index in the CSS code for the pop up but it doesn't work.
Here is the JSFiddle for my code (modified) Also apparently this doesn't work on Safari.
HTML:
<div id="overlay">
<div id="popup">
X
</div>
</div>
<body id="main_container" onload="myBlurFunction(1)">
</body>
Javascript:
myBlurFunction = function(state) {
var containerElement = document.getElementById('main_container');
var overlayEle = document.getElementById('overlay');
if (state) {
overlayEle.style.display = 'block';
containerElement.setAttribute('class', 'blur');
} else {
overlayEle.style.display = 'none';
containerElement.setAttribute('class', null);
}
};
CSS:
.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}
#overlay {
position: fixed;
display: none;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: rgba(255,255,255,.8);
z-index: 999;
}
#popup {
position: absolute;
width: 400px;
height: 200px;
background: rgb(255,255,255);
border: 5px solid rgb(90,90,90);
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
Here is the JSFiddle for the stock code from the SO answer.
body tag should wrap all page content.
You might do as follows:
<body onload="myBlurFunction(1);">
<div id="overlay">
<div id="popup">
X
</div>
</div>
<div id="main_container">
Whatever
</div>
</body>
See jsfiddle
In this case, it's because you are setting the blur in the Body.
The best aprouch, i guess, is create a Div to put the Blur, e show this div in 100% e after the popup with a Z-index higher than the Blur.
applying blur to a tag has an impact on all inner tags, so try it this way.
do no set any styles on the body itself:
<body onload="myBlurFunction(true)">
do not include your popup inside the overlay (I added a button- you should use one instead of an anchor):
<div id="overlay" class="blur"></div>
<div id="popup">
<button onclick="javascript: myBlurFunction(false);">X</button>
LINK X
</div>
As you can see I added the blur css class to the overlay directly (uncommented code).
Modify your scripts:
myBlurFunction = function(state) {
var overlayEle = document.getElementById('overlay');
var popupEle = document.getElementById('popup');
if (state) {
overlayEle.style.display = 'block';
//overlayEle.setAttribute('class', 'blur');
popupEle.style.display = 'block';
} else {
overlayEle.style.display = 'none';
//overlayEle.setAttribute('class', null);
popupEle.style.display = 'none';
}
};
set your popup position to fixed, because it's not in you overlay anymore:
#popup {
position: fixed;
}
fiddle: https://jsfiddle.net/uy4xvz12/19/
Related
I am trying to implement a new behavior when the user click on the button .employers-button I am going to scroll down to the form #contactin JS.
I implemented a function with window.scrool and the current top is top: 200 (as it as to be a value).
It is working but how can I replace the top: 2000 by top: contact? I tried to put contact instead of 2000 but it is not going down at all since it was to be an int
const goToContact = () => {
const button = document.getElementsByClassName("employers-button")[0];
const contact = document.getElementById("contact");
button.addEventListener("click", ()=>{
event.preventDefault();
window.scroll({
top: 2000,
behavior: 'smooth'
});
});
}
Use element.scrollIntoView() with behavior:smooth to scroll to specific element and to avoid any hacks.
codepen:https://codepen.io/murliprajapati/pen/RwwLYyR
function scrollToElement() {
var elmnt = document.getElementById("content");
elmnt.scrollIntoView({behavior:'smooth', block:'start'});
}
#myDIV {
height: 250px;
width: 100%;
overflow: auto;
background: green;
}
#content {
margin-top:500px;
height: 800px;
width: 100%;
background-color: coral;
}
<html>
<head>
</head>
<body>
<div id="myDIV">
<button onclick="scrollToElement()">Scroll</button>
<div id="content">
Some text inside an element.
</div>
</div>
</body>
</html>
You can use anchor tags
.big-space{
height:2000px;
}
Button that scroll
<div class="big-space">
</div>
<form id="myForm">
<label>form here</label>
<input type="text" />
</form>
For the smooth transition, I made the following fiddle. The property you were looking for is offsetTop. Hope this help!
const button = document.getElementById("employers-button");
const contact = document.getElementById("contact");
button.addEventListener("click", ()=>{
window.scroll({
top: contact.offsetTop,
behavior: 'smooth'
});
});
html,
body {
height: 3000px;
background-image: linear-gradient(red, yellow);
}
#contact {
margin-top: 1800px;
height: 200px;
background-color: green;
}
<button id="employers-button">Let's scroll!</button>
<div id="contact">Contact</div>
Did you try something like:
VANILLA
top: contact.offsetTop;
Or JQUERY
top: contact.offset().top;
// but if you want it positioned relative to the closest positioned parent:
top: contact.position().top
Contact, in this case, is a DOM element, and as you rightly mentioned the top property of window.scroll expects a number.
I'm trying to show a modal window on top of the screen when user submits the form.
I want to disable form (show some loading icon) to show that button was clicked and action is being processed, because sometimes on mobile it's not so clear for our users
On PC browsers (Firefox, IE, Opera) everything works fine, but on Android or WP 8.1 div overlay is not shown after submitting the form.
Do you have any idea how to resolve this issue?
Maybe some other approach?
My sample code:
<script type="text/javascript">
function ShowLoadingPanel() {
document.getElementById('loadingPanel').style.display = 'block';
document.getElementById('overlay').style.display = 'block'
}
</script>
<body>
<div id="loadingPanel" class="loadingPanelStyle"></div>
<div id="overlay" class="blackOverlay"> </div>
<form id="form1" runat="server" onsubmit="return ShowLoadingPanel();">
//some content
<asp:Button runat="server" ID="xNext" Text="Next" OnClick="xNext_Click" />
</form>
</body>
And some CSS for modal window
.loadingPanelStyle
{
display: none;
position: fixed;
background:url(../img/load2.gif) no-repeat center center;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
font-size: small;
z-index: 1002;
overflow: auto;
}
.blackOverlay
{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
After some hints from #Velimir Tchatchevsky I found solution which is working.
function ShowLoadingPanel() {
document.getElementById('loadingPanel').style.display = 'block';
document.getElementById('overlay').style.display = 'block';
setTimeout(function(){
document.getElementById('form1').submit();
}, 100);
return false;
}
But it's weird that on WP8.1 (Internet Explorer) and Android 4 (Default browser) it's mandatory to use setTimeout() function, to postpone submit action.
Is it some mobile optimization or what?
Thank you all for help!
Please try with this. Remove javascript and add jquery function.
$("#loadingPanel").show();
$("#overlay").show();
You should put .preventDefault() to stop the form from submitting
<script type="text/javascript">
function ShowLoadingPanel(e) {
e.preventDefault();
document.getElementById('loadingPanel').style.display = 'block';
document.getElementById('overlay').style.display = 'block'
setTimeout(function(){
$(this).submit();
}, 3000);
}
</script>
I have created website which code can be found here: https://jsfiddle.net/7y373j8x/2
I have created a box which appears when clicking on "Portfolio". (The box is called "object2").
I want to insert PNG images inside of this box. Some have suggested to me to do a jQuery slider but I don't want a slideshow. I want the images to be placed next to each other (as thumbnails) and then the user can click on an image and it should become bigger.
HTML:
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png" alt="map" />
<div class="container">
<p>About me</p>
<div id="portfolio" onclick="show();">Portfolio</div>
<p>Contact me</p>
<div id="object2" onclick="show();">
</div>
</div>
CSS:
#map {
background-attachment: fixed;
}
.container {
color: yellow;
position: fixed;
top: 54%;
left: 58px;
font-family: normal normal 15px Calibri;
}
#object2 {
border-radius: 15px 50px;
background: black;
position: fixed;
bottom: 200px;
right: 400px;
width: 650px;
height: 350px;
cursor: pointer;
display: none;
z-index: 999;
opacity: 0.4;
}
JavaScript:
function show() {
document.getElementById("object2").style.display = "block";
}
you can append the images using javascript or jquery.
update your show() method like this.
function show(){
document.getElementById("object2").style.display = "block";
var image = new Image();
image.src = 'https://placehold.it/350x150';
var image1 = new Image();
image1.src = 'https://placehold.it/200x100';
$('#object2').html('');
$('#object2').append(image);
$('#object2').append(image1);
}
here's the updated JSFIDDLE for the same. hope it helps.
The reason why your function is not working is because onclick operates within the page scope so it can't execute any functions outside of it.
If I moved the script within the same scope, it will work as you can see here:
JavaScript jsfiddle: https://jsfiddle.net/AndrewL32/saTfR/60/
( I have replaced your style.display = "block" with .style.cssText = 'display: block'; )
jQuery Approach
If you are interested in using jQuery, here is a cleaner and easier jQuery approach to modifying css properties with js:
$("#portfolio").click(function(){
$("#object2").css("display", "block");
});
jQuery jsfiddle: https://jsfiddle.net/AndrewL32/saTfR/58/
So I am having 2 issues here and maybe this is just a poor execution in general so please point me in the right direction.
1.) Regardless of how many black boxes there are the last one always works correctly, meaning I click the black box and it opens then a red box appears, I can close the box by clicking the dark area surrounding the red box or the red box itself. The issue comes when I click any boxes before the last box, it opens as expected but when I try to close it by clicking the red box it opens another instance of the dark background, I don't want that to happen.
2.) So I think the deeper issue is when I click a black box it is adding the class "fart" to ALL .testthree divs instead of just the one for the area I am clicking AND when I click the red box it is also adding the class "open" to all of the other test divs.
So my question is, Is there a way to contain the classes that are added ONLY to the initial place that I click? What I want to happen is:
I click workImg, test gets the class of open, and testthree gets the class of fart, ONLY for the workImg that i click on. Then when I click anywhere it all closes nicely.
Link to fiddle:
http://jsfiddle.net/dkarasinski/L6gLLyko/
HTML:
<div class="workCont">
<div class="workBlock">
<div class="workImg">
<div class="test one">
<div class="testthree"></div>
</div>
<img src="/assets/images/piece1.jpg" />
</div>
<div class="workName">Project</div>
</div>
<div class="workBlock">
<div class="workImg">
<div class="test one">
<div class="testthree"></div>
</div>
<img src="/assets/images/piece1.jpg" />
</div>
<div class="workName">Project</div>
</div>
</div>
CSS:
.workImg {
background:#151515;
width:330px;
height:201px;
display:inline-block;
position: relative;
}
.test {
position: fixed;
top: 50%;
left: 50%;
z-index:100;
width: 0;
height: 0;
-webkit-transition-duration: 300ms;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease-in-out;
text-align: center;
background: white;
color: white;
font-family: sans-serif; /* Just 'cos */
}
.test.open {
top: 0;
left: 0;
width: 100%;
height: 100%;
position:fixed;
color:black;
background-color: rgba(0, 0, 0, 0.8);
}
.testthree {
width:0;
height:0;
background-color: red;
margin:auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.testthree.fart {
width:50%;
height:300px;
}
.testthree.close {
display:none;
}
.workName {
text-align:center;
margin-top:17px;
}
JQuery / Javascript:
$(document).ready(function(){
$(".workImg").click(function() {
$(this).find(".test").toggleClass("open");
if ($(this).find(".test").hasClass("one")) {
if($('.testthree').hasClass("fart")) {
$(".testthree").removeClass("fart");
}
else {
setTimeout(function(){
$( ".testthree" ).addClass( "fart" );
}, 500);
}
}
});
});
Replace all your code in else block with this:
var scope=$(this);
setTimeout(function(){
scope.find('.testthree').addClass('fart');
},500);
You needed a scope to work within and not apply fart class to all of the .testthree elements. Hope you find it useful.
Update: Your complete code may look like:
$(document).ready(function () {
$(".workImg").click(function () {
var scope = $(this);
var test = scope.find('.test');
var testthree = scope.find('.testthree');
test.toggleClass('open');
if (test.hasClass('one')) {
if (testthree.hasClass('fart')) {
testthree.removeClass('fart');
} else {
setTimeout(function () {
testthree.addClass('fart');
}, 500);
}
}
});
});
Hope this helps.
Why don't you just ignore the whole fart and close classes.
And make .testthree invisible by default..
.testthree {
width:50%;
height:300px;
background-color: red;
margin:auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display:none;
}
Then just do...
$(document).ready(function(){
$(".workImg").click(function() {
var test = $(this).find(".test");
test.toggleClass("open");
setTimeout(function(){
test.find(".testthree").toggle();
},100);
});
});
JSFIDDLE HERE
Try below code
$(document).ready(function(){
$(".workImg").click(function() {
$(this).find(".test").toggleClass("open");
if ($(this).find(".test").hasClass("one")) {
if($(this).find('.testthree').hasClass("fart")) {
$(this).find(".testthree").removeClass("fart");
}
else {
setTimeout(function(){
$(this).find( ".testthree" ).addClass( "fart" );
}, 500);
}
}
});
});
how can i fix this? when i click "smile" it appears smile but when i click sad it also appear a smiley face.
SMILE<br>
<div id="light"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/1024px-Smiley.svg.png" width=100 height=100></div>
SAD
<div id="light"><img src="http://www.clipartbest.com/cliparts/MiL/kkB/MiLkkBAia.png" width=100 height=100></div>
<div id="fade" onClick="lightbox_close();"></div>
CSS: fade for the close and light is for the the lightbox.
#fade{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
#light{
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
padding: 10px;
border: 2px solid #FFF;
background: #CCC;
z-index:1002;
overflow:visible;
javascript: for the open and close function
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
lightbox_close();
}
}
function lightbox_open(){
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
You cannot use the same ID twice. You must use unique ID's.
Try this:
In the HTML, give your two light divs each a unique ID, for example lightSmile and lightSad.
In order to be able to use the same CSS for both lightboxes, give both boxes a class lightbox, and in the CSS, change the #light to .lightbox.
Finally, change the lightbox_open() function to the one below here.
HTML
SMILE<br>
<div class="lightbox" id="lightSmile"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/1024px-Smiley.svg.png" width=100 height=100></div>
SAD
<div class="lightbox" id="lightSad"><img src="http://www.clipartbest.com/cliparts/MiL/kkB/MiLkkBAia.png" width=100 height=100></div>
<div id="fade" onClick="lightbox_close();"></div>
CSS
.lightbox{
display: none;
...
}
JS
function lightbox_open(id){
window.scrollTo(0,0);
document.getElementById(id).style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close(){
document.getElementById('lightSmile').style.display='none';
document.getElementById('lightSad').style.display='none';
document.getElementById('fade').style.display='none';
}
If you look at the HTML, you see that now a string of the lightbox's ID is send along when lightbox_open() is called.
In the function, this ID-string is supplied as a variable (between the brackets: id). And in the line where lightbox's display-style is changed, this id is used.
In the close-function, the display-style of both the lightbox's is set back to default.
UPDATE
If you have a lot of lightboxes, it's easier to access the lightboxes by classname in the close-function:
function lightbox_close(){
var list = document.getElementsByClassName('lightbox');
for (var i=0; i<list.length; i++) {
list[i].style.display = 'none';
}
document.getElementById('fade').style.display='none';
}
And if you're willing to use jQuery, you can do that with one line (and probably more reliably cross-browser):
function lightbox_close(){
$('.lightbox').css('display','none'); //<--------------jQuery
document.getElementById('fade').style.display='none';
}