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");
});
})();