4/15/2017 javascriptBlurandunblurtheelementsonmyhtmlStackOverflow

xDismiss

JointheStackOverflowCommunity

Stack Overflow is a community of 7.0 million

programmers, just like you, helping each other.
Join them it only takes a minute:

Signup

Blurandunblurtheelementsonmyhtml

whatI'mtryingtodoistocreatealoginpagewhichgoesinfrontoftheactualwebpage.Fromresearchonline,IfoundoutthatIcanmakethe
actualwebpageblurredbeforetheuserlogin.Belowisthecoding:

html:

<divid="login">
<formclass="formsignin">
<spanid="reauthemail"><h2>Login</h2></span>
<inputtype="email"id="inputEmail"placeholder="Emailaddress">
<inputtype="password"id="inputPassword"placeholder="Password">
<divid="remember"class="checkbox">
</div>
<buttonclass="btnbtnlgbtnprimarybtnblockbtnsignin"id="btn_login"
type="submit">Signin</button>
</form>
</div>
<divid="main">
<divid="div1">12345</div>
<divid="div2">67890</div>
<divid="div3">abcde</div>
</div>

css:

#div1{height:30px;width:400px;backgroundcolor:red}
#div2{height:300px;width:400px;backgroundcolor:yellow}
#div3{height:30px;width:400px;backgroundcolor:green}
#main
{webkitfilter:blur(5px);
mozfilter:blur(5px);
ofilter:blur(5px);
msfilter:blur(5px);
filter:blur(5px);
width:100px;
height:100px;
backgroundcolor:#ccc;}
#login{position:relative;top:180px;left:70px;width:35%;backgroundcolor:white;
border:2pxsolidblack;padding:0px20px20px20px;borderradius:10px;zindex:1000;}

JSFIDDLE

WhatIwanttoknowis,howcomemy"main"divwillnotgouptothetopofthepage(itleftawhitespaceontop)afterIplacedthe"login"div
onthemiddleofthepage?

Andhowdoweunblurreditaftertheuserlogin?

javascript jquery html css

askedAug18'15at8:52
Coolguy
769 4 18 39

Iwouldsuggestdon'tusecssfilter.Itdoesn'tworkinmostofbrowserinsteadidfilteruseanoverlay.
locateganeshAug18'15at9:05

Howdoweuseanoverlay? Coolguy Aug18'15at10:06

usethisreferencetympanus.net/codrops/2013/11/07/cssoverlaytechniqueslocateganeshAug18'15at
10:12

http://stackoverflow.com/questions/32067798/blurandunblurtheelementsonmyhtml 1/2
4/15/2017 javascriptBlurandunblurtheelementsonmyhtmlStackOverflow

2Answers

Justsetthepositionofthe login formto position:absolute andtherestwouldalignjustfine.

hereistheupdatedfiddle.

Update

Toremovetheblureffectafterlogin,justusethefollowingjQuerycode.

$('.btnsignin').click(function(e){
e.preventDefault();
$('#login').hide();
$('#main').css({
'webkitfilter':'none',
'mozfilter':'none',
'ofilter':'none',
'msfilter':'none',
'filter':'none',
})
})

Update2

Theclickeventonthesubmitbuttonfiresaformsubmit.justadd e.preventDefault() inthe

codeanditworksfine.

editedAug18'15at9:20 answeredAug18'15at8:56
ImeshChandrasiri
2,604 10 35 72

Gotthis{"error":"PleaseusePOSTrequest"}intheJSFIDDLEafterItrythejs. Coolguy Aug18'15at

9:12

Itestedyourupdate..howcometheloginpagewillshowagainafterpressingthebutton. Coolguy Aug18

'15at9:17

canyouexplaintheissueuarefacing?ImeshChandrasiriAug18'15at9:21

Ifyouwanttoblur/unblurjustcreateaclass.

.blured{
webkitfilter:blur(5px);
mozfilter:blur(5px);
ofilter:blur(5px);
msfilter:blur(5px);
filter:blur(5px);
}

Andjusttoggleiton #main .

answeredAug18'15at9:02
Sko
347 2 16

http://stackoverflow.com/questions/32067798/blurandunblurtheelementsonmyhtml 2/2