Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
858 views

Javascript - Blur and Unblur The Elements On My HTML - Stack Overflow

The document is a Stack Overflow post asking how to blur the background elements of an HTML page until a user logs in. The poster provides code for a login form overlaying content divs with different background colors. Initially, the content divs are blurred using CSS filters. Respondents suggest using an overlay instead of filters for better browser support. They also explain how to position the login form and remove the blur effect using jQuery by toggling a CSS class.

Uploaded by

bobo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
858 views

Javascript - Blur and Unblur The Elements On My HTML - Stack Overflow

The document is a Stack Overflow post asking how to blur the background elements of an HTML page until a user logs in. The poster provides code for a login form overlaying content divs with different background colors. Initially, the content divs are blurred using CSS filters. Respondents suggest using an overlay instead of filters for better browser support. They also explain how to position the login form and remove the blur effect using jQuery by toggling a CSS class.

Uploaded by

bobo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

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

You might also like