I am trying to write a very basic (user)script for a game site (skribbl.io), where I add a div at the top of the site that should act as a lightswitch (dark mode on/off).
When I try to hot-swap a CSS file in oder to alter the style of my local webpage, I have no problems, but once I go over to my userscript, it won't work.
I get no errors in the console and on clicking the div I can see that the href of the link element does in fact change, as expected -- the catch: the site's appearance does not change.
Here's my userscript code:
var lightSwitch = document.createElement('div');
//Inserting it at the top of the page
document.body.insertBefore(lightSwitch, document.body.children[2]);
//I have to get and modify the <link> tag because by default it has no Id
var linkElement = document.getElementsByTagName('link')[0];
linkElement.setAttribute("id", "pagestyle");
function swapStyleSheet(sheet) {
var link = document.getElementById("pagestyle");
link.setAttribute("href", sheet);
}
lightSwitch.addEventListener('click', function(){
swapStyleSheet('https://cdn.rawgit.com/externally-hosted-style.css')
}, false);
//GREY DIV STYLING
lightSwitch.style.width = "50px";
lightSwitch.style.height = "50px";
//etc...
Again, this works locally on my HTML test file, but not with Tampermonkey. Why?
Note: It is not just about altering the style of the site, but about having it within my userscript that shall have greater functionalities at some point. Of course I could use other extensions to modify the page's appearance, but in my case that is out of the question.
GM_addStyle would be an idea if I can toggle it with a button or similar. But as you may notice - my Javascript knowledge is non-existent.
Related
this is my very first question on Stackoverflow. I am currently developing a print function in my sap ui5 app to print out certain UI controls. I've got the function from here: http://embed.plnkr.co/jjyEPa1updkjBiNZqumS/preview
However, during runtime, when I click on the print button, my app only jumps to the method once and executes it correctly (to print). But after that, I can press the printbutton as often as I want, nothing happens and I can't find out why.
what the method does: i replace the body with a temporary body, which only contains the elements to be printed and execute window.print(). afterwards i insert the original body content again. Of course I use the UI controls to grab the HTML tags.
onPrintChart: function(oEvent){
var oTarget = this.getView(),
sTargetId = oEvent.getSource().data("targetId");
if (sTargetId) {
oTarget = oTarget.byId(sTargetId);
}
if (oTarget) {
var $domTarget = oTarget.$()[0],
sTargetContent = $domTarget.innerHTML,
sOriginalContent = $(document.body)[0].innerHTML;
$(document.body)[0].innerHTML = sTargetContent;
window.print();
$(document.body)[0].innerHTML = sOriginalContent;
} else {
jQuery.sap.log.error("onPrint needs a valid target container [view|data:targetId=\"SID\"]");
}
}
I managed to do it in a different, more elegant way without using a temporary body. I used CSS to hide all irrelevant elements (display: none) and keep only the relevant element for printing.
Apparently ui5 hung up when replacing the original body temporarily with another body. I noticed that ALL buttons didn't work anymore, not only the print button.
I copied and customized one script taken from a past stackoverflow discussion. And now I can prevent the "Print screen" with the current key combinations: "ctrl+alt+printscr" , "ctrl+printscr" and "alt+printscr". But after I saved my blogger template, I did some tests with great resoults: the script really works great.. But not as expected, I encountered two problems:
If I click the address bar or leave the page unactive, the script automatically show the background image to cover the layout.
If I try to resize the window, the alignment of the elements fails..
I'm not expert with the javascript language, so probably I made some sort of mistake. I made a picture to show you the nature of the problem.
PS: My layout is totally responsive and I never got problems with the automatic alignment of the elements. Then I tried to remove the latest javascript and again works perfectly. Probably I made some unknown mistake into the code.
I installed many anti-stealing protection scripts, jquery and css (but they not conflict apparently..) Here is a screen demostration of the problem
Here is the code:
<script language='JavaScript'>
function copyToClipboard() {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", "You can no longer give printscreen. This is part of the new system security measure.");
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
alert("Print screen disabled.");
}
$(window).keyup(function(e){
if(e.keyCode == 44){
copyToClipboard();
}
});
$(window).focus(function() {
$("body").show();
}).blur(function() {
$("body").hide();
});
</script>
I need to detect if the browser disables images on the current page. Is this possible with JavaScript (jQuery/Modernizr)?
Problem: The project uses image sprites for icons and displays them like <i class="icon-user"></i>. The app is partially used by mobile users and some of them disable images if they're surfing with edge. As a result some buttons disappear.
The only thing I need is to display something (a gray square, circle…) if images are blocked. Via CSS class on the <html> element or so (class="no-images" e.g.). Writing alternative text between <i>…</i> is unhappily no option.
Thanks for your thoughts! I hope it exists a simple solution.
You can use the following script:
function noimage()
{
if ((document.getElementById('flag').offsetWidth==1
&& document.getElementById('flag').readyState=='complete')
||(document.getElementById('flag').offsetWidth==1
&& document.getElementById('flag').readyState==undefined))
{
var objHead = document.getElementsByTagName('head');
var objCSS = objHead[0].appendChild(document.createElement('link'));
objCSS.rel = 'stylesheet';
objCSS.href = 'alt.css';
objCSS.type = 'text/css';
}
}
And you need the following html markup:
<body onload="noimage();">
<img id="flag" src="clear.gif" alt="">
Just add it to the body. What this does is check the offsetWidth property to look for a 1x1 pixel image at the top of the browser. If it returns true it means that images are enabled.
If you need more info go here.
I know this has probably been answered multiple times before, but this is the second time I've worked with JQuery, and I'm not entirely sure what I need to do, since I'm not familiar with this format of coding. I've looked at other, similar, questions, but none of the answers are making sense to me, and I really need this to click in my head so I can keep working.
I'm using Jpopup for this, so the script info is all there, but my question is this:
I have two areas in an image that I need to be clickable, both showing different content, but I can only call one page at a time to pop up, and multiple anchor tags just give me the same content twice. What do I need to add to that script to allow the page to show two different popups?
This is the script in my HTML page
<script language="javascript">
$(document).ready(function() {
//Change these values to style your modal popup
var source = "demo.html";
var width = 920;
var align = "center";
var top = 100;
var padding = 10;
var backgroundColor = "#FFFFFF";
var source = 'popups/demo.html';
var borderColor = "#000000";
var borderWeight = 4;
var borderRadius = 5;
var fadeOutTime = 300;
var disableColor = "#666666";
var disableOpacity = 40;
var loadingImage = "popups/loading.gif";
//This method initialises the modal popup
$(".modal").click(function() {
modalPopup( align,
top,
width,
padding,
disableColor,
disableOpacity,
backgroundColor,
borderColor,
borderWeight,
borderRadius,
fadeOutTime,
source,
loadingImage );
});
//This method hides the popup when the escape key is pressed
$(document).keyup(function(e) {
if (e.keyCode == 27) {
closePopup(fadeOutTime);
}
});
});
</script>
The HTML
<div style="margin-top:200px;margin-left:395px;">
<a class="modal" href="javascript:void(0);"><img src="images/clickmelarge.png" border="0">
</a></div>
I studied the source code of the "plugin" and studied also the invoked source code of the HTML page at runtime. In my eyes this popup plugin doesn't support multiple popups at same time. Why?
Well, I used Firebug to exermine the source code at runtime and I saw only the same divs, added to the DOM tree by this. As far as I did understand when the DOM was complete loaded the author added the main divs to the DOM tree and set they all to 'hide'. If you call your function these divs will set to 'visible'.
Another reason is -in my eyes a very tricky way- the div with the Id 'blockModalPopupDiv' covers the full browser window. If you click on this element, the function of hiding all divs will be executed. You won't be have chance to click outside the div element.
So what can you do?
I think you have only three options :
Ask the author for an opportuniti to add your requirement.
Download the source code and modifiy it your self. Its created in standard Javascript.
Try to use another plugin or change your concept.
I'm experimenting with a Chrome extension that will remove the ads displayed in the right-hand pane in Gmail and instead put the information I want there. (I haven't decided exactly what to put there yet; vacillating between several ideas, including external content and/or attachments.)
The ads are (usually) contained in a <div class="oM"></div> element. But I can't seem to select that either in my extension or in the console.
I've tested my manifest.json settings by writing an extension that added a superfluous div to the top of the page, and that worked fine -- I just created a new element and
document.body.parentElement.insertBefore(new_el, document.body);
However, what I'm trying to do now is just rip out the ads and put in some dummy text, or just put the text above the ads. This is the main function called in my content_script.js file.
function modifyPage(txt) {
var container = document.getElementsByClassName('oM')[0];
container.innerHTML = txt;
}
function modifyPage(txt) {
var insert = document.createElement('div');
insert.innerText = txt;
var container = document.getElementsByClassName('oM')[0];
document.body.parentElement.insertBefore(insert, container);
}
I've even tried to jQuery:
function modifyPage(txt) {
$('.oM').html(txt);
}
Also, trying to retrieve the <div class="oM"> using the Chrome console returns nothing -- even though I can see it right there in the source.
Set a delay on the execution of your jquery selector. The Google Tubes are a bit more complicated than using static div classes on page load.
Rather than remove the ads with JS, just hide them with CSS:
.oM {
display: none;
}
I'm using AdBlock + Chrome add-in(or extension).
It works very well it's a donation-ware, I'm guessing the author use jquery {display:none } to hide or remove the ads with a custom filter lists.