I just wrote a small script for a website to hide an element that contains advertising (It's a gaming website which shows buying options for the game they are writing about). What's weird is, that the script works fine. I only set the CSS property display
to none
. It works as aspected and this should not break CSS or javascript selectors. But when the script is enabled it doesn't let me click on images (to view them in a cinema mode) or start videos.
I get the following message, when clicking on such media elements:
gamestar.min.js?cc=310520171659:1 Uncaught TypeError: $(...).modal is not a function
at openLightbox (gamestar.min.js?cc=310520171659:1)
at HTMLAnchorElement.<anonymous> (gamestar.min.js?cc=310520171659:1)
at HTMLBodyElement.dispatch (jquery.min.js:3)
at HTMLBodyElement.r.handle (jquery.min.js:3)
Without the script it loads via an Ajax request the media correctly:
jquery.min.js:4 XHR finished loading: GET "http://www.gamestar.de/gs_cb/index.cfm?event=content%3Aajax.zoom&id=132536&…Star+Wars%3A+Battlefront+2%3C%2Fb%3E%3Cbr%3E+Reveal+Screenshot+1&clicked=1".
How is it possible that the script intefers with the website in such a way? And how can I prevent this?
Here is my script:
// ==UserScript==
// @name Better Gamestar
// @namespace k-ruben
// @version 1.0
// @description Disable Buying options
// @author You
// @match http://www.gamestar.de/*
// @grant none
// @require http://code.jquery.com/jquery-2.2.0.min.js
// ==/UserScript==
(function() {
'use strict';
$(document).ready(function() {
var offerteaser = $(".offerteaser-box").parent().parent();
offerteaser.css("display", "none");
});
})();