1

i have a web page , and there are many elements on that web page(including a "change BG" button). i want to hide all other content( excluding that "chang BG" button) when i click on that "change BG" button using JavaScript. secondary option is ->when i click on that button , i want to blur all other elements on that webpage (excluding that "change BG" button) using JavaScript.

the aim is , when a user click on that "change BG" button he/she should not be able to access any other content on that web page.

Weafs.py
  • 22,731
  • 9
  • 56
  • 78
user1936888
  • 47
  • 1
  • 1
  • 8
  • possible duplicate of [CSS: Blur and invert colors for entire page](http://stackoverflow.com/questions/27613721/css-blur-and-invert-colors-for-entire-page) – Weafs.py Jan 11 '15 at 07:13
  • In that answer, simply remove the `feColorMatrix` tags. To exclude the button simply put it outside the `svg` tag. – Weafs.py Jan 11 '15 at 07:14
  • "possible duplicate of CSS: Blur and invert colors for entire page"can i please have a fiddle. and i want it in javascript. – user1936888 Jan 11 '15 at 07:18
  • `svg` would be the easiest solution unless you really want to create an algorithm for blur using JavaScript. Apart from that, excluding the button would be even harder. Also, blurring using JavaScript would require a `canvas`, which would be pretty hard to implement since you are dealing with DOM elements not images. I'm not even sure if that's possible. – Weafs.py Jan 11 '15 at 07:20
  • ok. i will put my question in another way. "i want a pop up on click on that "change BG" button. and pop up shout contain data of another web page." – user1936888 Jan 11 '15 at 07:31

3 Answers3

2

One possible of doing this could be to have a hidden div in the body with a particular z-index, say 100 and the single element could have the z-index of 101. The hidden div is displayed whenever you want. You can set the background to 

background: rgba(100, 100, 100, 0.5)

for opacity. The rest of the content goes in another div say with class "main-content" and has z-index of less than 100 Here is a fiddle

Mr Boss
  • 739
  • 2
  • 8
  • 17
0

Not blurring/hiding single element in the middle of the page is hard, consider blurring/hinding all and showing new button.

Some of many possible ways:

  • use existing "dialog" library and open dialog with single button on it. Most libraries will put semi-transparent screen on top of the document
  • hide all content (i.e. display:none) and show new button wherever you want
  • position carefully constructed set of elements that cover all content, but button (like 4 div around hole in the middle).
Alexei Levenkov
  • 98,904
  • 14
  • 127
  • 179
  • i want exactly the same. (the first point " use existing "dialog" library and open dialog with single button on it. Most libraries will put semi-transparent screen on top of the document"). but how to do it ??? using javascript – user1936888 Jan 11 '15 at 07:22
  • @user1936888 one of many libraries - http://jqueryui.com/dialog/ . Usually one adds semi-transparent IFrame (to cover dropdonws/IFrames in IE) to cover whole documented setup similar to Udai Arora [answer](http://stackoverflow.com/a/27884905/477420). – Alexei Levenkov Jan 11 '15 at 07:31
0

The blurring of DOM elements is possible with JavaScript. I will give the code after I say the following.

Because your aim is to deny access to the DOM elements you are hiding, I need to tell you that that is impossible on the client-side. Once the client has retrieved all the data from the server, they can access it. Blurring with JavaScript is solely to enhance user experience (UX).

That said, the following code is from W3C:

$("input").blur(function(){
    alert("This input field has lost its focus.");
});

If you do want to hide information, you must do it server-side using, for example, Node.js.

Tim Visser
  • 916
  • 9
  • 28