How to block an element on a page. JQuery BlockUI - blocking a page or an individual element on a page
Installing the extension Adblock Plus to browsers
First of all, go to the official website of the developers this extension by this link adblockplus.org, you will see home page website:
Here we select the browser you use. Personally I use Chrome browser and therefore my button to install the extension will look like this “Install on Chrome”. It is clear that if you choose OPERA browser, then you will have a button “Install on Opera”
Click on “Install on Chrome” and this window will open in front of us:
Click on “Add” and get here:
As you can see, a window with an installation message has appeared in the right corner Adblock extensions Plus and to activate it you will need to click on the red “ABP” icon. This is what we will do - Press!
That's it, now you have the extension installed and activated to block ads on all sites.
This extension has settings where you can make personal filters and exclude certain domains. In order to go into the settings, you need to click on the red “ABP” icon and at the bottom click on the “Settings” option
And the experimental site will be the blog telets.com.zp.ua/
Let's go to one of his articles by disabling the Adblock Plus extension.
Now I will activate the extension and this is what we will see:
In order to turn off blocking on a site, you need to click on the red icon and select the “Enabled on this site” option. In order to enable the blocking again, you need to click on “Disabled on this site”
Block an element on the site
To do this, click on the ABP icon again and select the “Block element” option
After this, you will need to select any element on the site and click on it.
For example, I will try to block the image for the article.
And so I clicked on the “Block element” option and after that clicked on the picture. Here's what you'll see:
We see that a window has opened and a code with this picture appears in it. If we now click on the “Add” button, this code will be blocked and will no longer be displayed on the blog.I click on “Add” and this is what we will see:
Unblock an element on the site
Now I will show you how to return a blocked element, in our case it is a picture.
Again, click on the ABP icon, then click on “Settings”, then select “Personal filters”.
In the window with personal filters you will see the code of the picture that we have blocked.
Select all the code and click on “Delete”. After that, we reload the blog page and see everything in its place.
In this message I will tell you how to very easily and simply block radio display on LiRu pages in browsers Mozilla Firefox and in browsers of the family Google Chrome(Chrome, Opera, Yandex, etc.).
Part 1. Blocking the radio in Mozilla browser Firefox
To begin with you must put latest version extensions.
Now you need to hover your mouse over the extension icon:
Then click on left button mice. In the drop-down menu, select "Filter Settings": 
Here you need to go to the “Custom filters” tab (blue frame in the screenshot below):
Have you moved on? Now click "Add filter" (red frame in the screenshot above).
Did you click? Now in the form that appears you need to enter "###mediametrics-radio" (without quotes): 
After entering, do not forget to press "Enter".
You will have new filter:
Now you need to remember to check the box to the left of it (see screenshot above). And then click on the “Close” button.
That's it, there is no radio on LiRu anymore (and not only on LiRu, by the way).
Part 2. Blocking radio in the Google Chrome browser family (Opera, Yandex, etc.)
First, you must install the latest version of the extension in your Google browser Chrome, Opera or Yandex. But how to do that? Simple enough. At one time, the entire process of installing the "Adblock Plus" extension for Google Chrome was described in the message "". There, the first part of the message is called “How to install?”. I understand that not everyone likes to click on links in messages. And many are just so afraid of it. But there's nothing you can do about it. We'll have to do this, alas!
Now you need to hover your mouse over the extension icon (green frame in the screenshot below): 
Then click on the left mouse button. In the drop-down menu, select "Settings" (blue frame in the screenshot above).
Here you need to go to the “Personal filters” tab: 
So you need to add the text “###mediametrics-radio” to the input line (without quotes, blue frame in the screenshot below):
Block any page element in Mozilla Firefox using Adblock Plus
Alas, even interesting websites over time introduce innovations that can not only irritate, but also lead to a “white heat” that extends to its authors. This is how it worked out for me with the site http://lifehacker.ru
I read it, I receive its newsletter, but it “infuriates” me that they call me again and again to subscribe to the news. I was faced with a pressing question: how to block individual elements on a website. Fortunately, as one of the heroes of the old film said, “good people were found...” (film “The Irony of Fate or Enjoy Your Bath”). I had to pay attention to the ublock add-on (extension) previously installed in several of my browsers.
Browser extensions and add-ons serve the same purpose. "In a bourgeois way" this corresponds to the term plugins. The difference in terminology only applies to browsers. In Firefox they are called add-ons, in Chrome and Opera they are called extensions.
So, after installing this wonderful software, I go to the site again and cause the element to be blocked. This command is called from the right context menu mice.
After this, you will have to point with the mouse the area that needs to be blocked. You need to move the cursor to this area and press the left mouse button.
This operation will require some skill and consideration on your part, but as a result, in the lower right part of the page you will receive a request to create a filter. In this example:
After you click the “Create” button, the filter will immediately start working. You can check this simple update page being viewed.
My mood changed dramatically for the better. Chanting "Swords drawn, nobles!" (film "D" Artagnan and the Three Musketeers"), I am going on a decisive offensive against others, in my opinion, unnecessary elements. Right now I'm "annoyed" by the email newsletter subscription widget on the right.
Blocking this element had to be done by creating two rules: the line E-mail addresses and the "Done" button.
After creating these two filters, I wanted to perform “The Internationale”, since the words “... we will destroy the whole world of violence to the ground...” most accurately reflected my mood. And then, “And then Ostap suffered” (meaning the original meaning of this aphorism)... Carthage must be destroyed - and then the widgets were blocked by me the best way read Lifehacker, read on Twitter, watch on YouTube and various social networks:
Now I no longer needed to persuade myself: “Calm, just calm,” since this very calm did not disturb anything.
Ultimately, the ublock extension (add-on) created several rules that can now even be exported to a file:
02/15/2016, 0:02:44 http://lifehacker.ru/2016/02/08/100-habits-2016/
>p
02/15/2016, 0:03:06 http://lifehacker.ru/2016/02/08/100-habits-2016/
lifehacker.ru###mce-EMAIL
02/15/2016, 0:03:13 http://lifehacker.ru/2016/02/08/100-habits-2016/
02/15/2016, 0:03:19 http://lifehacker.ru/2016/02/08/100-habits-2016/
02/15/2016, 0:03:49 http://lifehacker.ru/2016/02/08/100-habits-2016/
lifehacker.ru###lh-fullscreen-sub__left
02/15/2016, 0:04:16 http://lifehacker.ru/2016/02/08/100-habits-2016/
02/15/2016, 0:04:55 http://lifehacker.ru/2016/02/08/100-habits-2016/
lifehacker.ru###lh_slides-2 > .soc-div > .social-root > .soc-youtube.soc
02/15/2016, 0:08:17 http://lifehacker.ru/
Let's check how true the assumption is that Exclamation point belongs to the “Comment” category, and the content of the filter itself is the second line of the rule. Let's find ublock in extensions (add-ons), go to its "Settings", call "Show control panel" and look at "My filters".
Let's remove these "extra lines" and get filters:
Lifehacker.ru###lh-fullscreen-sub__left > p
Lifehacker.ru###mce-EMAIL
Lifehacker.ru###mc-embedded-subscribe
Lifehacker.ru###lh-fullscreen-sub__not-now
Lifehacker.ru###lh-fullscreen-sub__left
Lifehacker.ru###lh-fullscreen-sub__overlay
Lifehacker.ru###lh_slides-2 > .soc-div > .social-root > .soc-youtube.soc
||www.facebook.com/v2.0/plugins/page.php?adapt_container_width=true&app_id=161427693904771&channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D42%23cb%3Df242b43cac35a2% 26domain%3Dlifehacker.ru%26origin%3Dhttp%253A%252F%252Flifehacker.ru%252Ff1d1b9113f6c558%26relation%3Dparent.parent&container_width=336&height=220&hide_cover=false&href= https%3A%2F%2Fwww.facebook.com%2F lifehacker.ru%2F&locale= ru_RU&sdk=joey&show_facepile=true&show_posts=true&small_header=false&width=500
Lifehacker.ru###lh_slides-2 > .soc-div > .ios-app-wrapper > .ios-left
Lifehacker.ru###lh_slides-2 > .soc-div > .social-root > .soc-twitter.soc > p
Lifehacker.ru###lh_slides-2 > .soc-div > .social-root > .soc-twitter.soc > .soc-wrapper
Lifehacker.ru###lh_slides-2 > .soc-div > .social-root > .soc-twitter.soc
Lifehacker.ru###lh_slides-2 > .soc-div > .mailchimp-wrapper
Let’s go to the site http://lifehacker.ru again and enjoy the “clean” page:
With all my heart I would like to say a big thank you to the author of this extension (addition).
You might be interested in this
In this short article I want to talk about a very convenient and useful plugin with which you can temporarily block an entire page or an individual element on a page.
The need for such manipulations with the page or its elements arose when AJAX began to gain its popularity. Everyone knows that when an AJAX request is executed, it is executed in background, externally it is not displayed in any way and, as is usually the case, the user does not understand what is happening and again clicks on the button or other element that causes an AJAX request, there is a high probability that something may go wrong). In such cases, the best thing to do is to block the user's access to the button, form, or other element so that they cannot fire the AJAX event again. And in my opinion jQuery plugin BlockUI is ideal, but of course it can be used for other cases, depending on what you need.
Usage
Using the plugin is very simple, we connect jQuery and the jQuery BlockUI plugins itself, then we execute the code:
You can change the text and background color:
Lock the entire page
The first examples already showed how to block an entire page:
Unlock:
Locking an individual element
Here, look carefully at the call function, it is slightly different, but the principle of operation is similar:
Unlock:
Settings
| Parameter | Default | Parameter description | ||
|---|---|---|---|---|
| message | ‘Please wait...’ |
The text of the message that is displayed when blocked can be specified using tags. | ||
| title | null | Sets the title of the blocking window. This setting only works if the setting is enabled theme | ||
| draggable | true | Allows you to drag the blocking window with the mouse cursor. This setting only works if the setting is enabled theme | ||
| theme | false | Includes a visual theme and functionality from jQuery UI. For some it may be useful feature, but I don’t like it, in order for everything to be displayed correctly you will also need to connect UI scripts and styles. | ||
| css |
|
Visual settings of the blocking window, standard parameters quite suitable. | ||
| themedCSS | This setting controls the blocking window's background, background color, transparency, and cursor. | |||
| cursorReset | 'default' | The setting is not entirely clear, but judging by the experiments, it regulates the type of cursor at the moment the lock is released. | ||
| growlCSS |
|
Configures appearance quick messages. More details about this on the demo page, called by the code: $.growlUI('Title', 'Text!'); | ||
| iframeSrc | js code | Judging by the description from the documentation, the setting does something when it works in older IE browsers. | ||
| forceIframe | false | Related to the setting above. | ||
| baseZ | 1000 | Adjusts the position of the blocking layer along the Z axis. | ||
| centerX And centerY | true | Centers the blocking window. | ||
| allowBodyStretch | true | Another setting that did not show much effect is most likely intended for older IE browsers. | ||
| bindEvents | true | Blocks mouse button clicks. | ||
| constrainTabKey | true | Blocks pressing the Tab key<./td> | ||
| fadeIn | 200 | Animation speed when appearing. | ||
| fadeOut | 400 | Animation speed when hiding. | ||
| timeout | 0 | After the specified time has elapsed, the lock is automatically released. | ||
| showOverlay | true | Disables background overlay behind a blocking window. | ||
| focusInput | true | Judging by the description in the documentation, it should set the cursor and the first empty text field on the page. | ||
| blockMsgClass | 'blockMsg' | Blocking window CSS class. | ||
| ignoreIfBlocked | false | If an element or page is already blocked, we do not block it again. | ||
| quirksmodeOffsetHack | 4 | some kind of incomprehensible secret setting about which they don’t even write anything in the documentation)) |
Callback functions
Examples
$(document).on("submit" , ".form_submit" , function () ( _this = $(this ) ; _block = _this; // start blocking the element // in my case the entire form is blocked so that it cannot be sent again $(_block).block(( message: " ", //just an animated icon, no text overlayCSS: ( backgroundColor: "#fff", opacity: 0.8, cursor: "wait"), css: ( border: 0, padding: 0, backgroundColor: "transparent" ) )) ; $.ajax(( url: _this.attr("action"), type: "POST", data: _this.serialize(), dataType: "JSON", success: function (data) ( /*.... */ ), error: function (data) ( /*....*/ ), complete: function(data) ( $(_block).unblock(); // remove the blocking ) )); return false; )) ; |
That's all, using the jQuery BlockUI plugin is very simple and convenient. There are more demo examples on the developer's page.
You might be interested in this