pstein

In a webpage (from remote server where I have no access) I want to insert the page URL after a certain element and after loading of the webpage Therefore I use the following code: var address = document.URL; var pane = document.getElementsByClassName("heading--large")[0]; pane.after("<a href=\"" + address + "\">" + address + "<\\a>"); Yes, the page URL is inserted, but only as text and not as recognized element. The URL is NOT clickable (as the following other Links). Have a look at the following snapshot: Why is in the inserted element "a" not blue and "href" not red as in the others "a" elements below? Is ".after()" not the suitable function?

Assume I have in an *.css file a CSS statement similar to the following: blahbla { font-size: 20px !important; line-height: 20px !important; /* added in August 2021 */ font-family: Verdana !important; } As you can see it contains a comment Now I want to comment out the whole CSS statement (without removing the inner comment!). The following does not work: /* blahbla { font-size: 20px !important; line-height: 20px !important; /* added in August 2021 */ font-family: Verdana !important; } */ ....since the closing comment tag of the inner comment closes the outer comment as well. How else can I comment out a CSS statement ignoring possible inner comments?

When I load certain webpage they contain occasionally CSS values starting with "-webkit....." e.g."-webkit-transition". How can I disable ALL -webkit" CSS-stuff inside such a webpage (after webpage loading by overwriting a central webkit node)?

Sorry, it was a typo from me. I originally meant padding-bottom: 10px !important; ...but this does not help either. How can I remove all style="......" definitions for all div.foobar elements?

Assume I have loaded a webpage which contains multiple <div> elements which contain inner style definitions like <div class="foobar" style="/*! padding-bottom:22% */">? 1.) Why is the inner style definition enclosed in /*!........*/ Never seen that before. 2.) How can I set the "padding-bottom" value to 10px for all <div> elements which contain a padding-bottom definition inside the tag itself (=NOT in separate CSS stylesheet)? 3.) How can I set the "padding-bottom" value to 10px for all <div> elements which have a class="foobar")? div.foobar { padding:bottom: 10px !important"; } seems not to help since the inner style="......" definition has always a higher priority than the outside CSS stylesheet definition even when it has an !important attribute. 4.) Alternatively: How can I remove the whole atyle="......" definition"?

Assume I have a webpage loaded which contains some big pictures. When I print this webpage (into a pdf file) and a picture does not fit completely onto the current pdf page then automatically a page break is inserted and the picture is printed on the next pdf page. How can I avoid this? If the picture cannot be fully printed on the current page it should be cut. The remaining, lower part should be printed on the next pdf page. How can I achieve this with CSS? I guess it must have something to do with the "clear" attribute?

Looks good. Thank you

Assume I have statement document.querySelectorAll("p") ........ Now I want to apply the full statement not only to <P> tags but also to <div> tags. Ok, I could write a second statement document.querySelectorAll("div") ........ but I want to avoid this. Is there a way to merge the two commands into ONE statement?

Thank you for the suggestion. The problem is here that <P> could contain (only) <img> elements. And <img> are not text elements. So <p> <img src=".......>...</img> </p> would be deleted with your javascript. Thats not intended

How can I (after loading of webpage) remove with JavaScript/jQuery ALL <P> elements which contain whitespaces only? The code should match for example the following elements: <P><br></P> <P><br><br></P> <P><br class="foobar">&nbsp;</P>

Assume I load a web page which contains a CSS stylesheet. I have no access to the webserver and the original CSS stylesheet but want to modify it by applying another, own CSS stylesheet after loading. Normally this can be done by specifying an "!important" attribute. So .someclass { margin-left: 40px !important; width: 1280px !important; } overwrites the original .someclass { margin-left: 20px; width: 1024; } But what, if the original CSS already contains CSS rules with !important flag? What I need is something like a !moreimportant attribute: .someclass { margin-left: 40px !moreimportant; width: 1280px !moreimportant; } How can I achieve this? Related question: How can I disable an existing whole CSS rule (.someclass from above)?

Ok, thank you. However if ((location.href).indexOf("foobar\") == -1) { alert(" not found"); } is not working Whats wrong?

I am searching for a JavaScript function which let me check if the URL of the current webpage (e.g. "https:\\www.mydomain.com\foobar\blah\") contains a certain pattern (e.g. "foobar\")? If yes, further, following commands should be executed. Otherwise the processing should continue after If statement. Is there such a function?

Assume I load a web page (from a web server where I have no access) and inspect CSS script files. Some of the CSS rules contain values declared as "!important". I want to overwrite a few of these values (after web page loading by my own user.js script) by other, customized values. Since my values should have priority I am search for a way to declare them "!moreimportant". How can I achieve this? Peter

Assume I have web page which uses a CSS script with lots of rules. Some of them have properties like .foobar { display: grid; grid-template-columns: 1fr 300px; grid-column-gap: 70px; } I want to get rid of all these grid-related instructions in all CSS rules. How can I disable all grid layout stuff completely for all CSS rules of the current webpage? I have no access to the original web server (and the original CSS) but want to overwrite the CSS script in my browser after loading. Peter

Normally a more specific CSS rule has priority over the more general rule e.g. <header class="foobar"> //width=1200px <div> <P> ....</P> //width=860px; </div> </header> But is there a way to let a parent element force to recursively overwrite all nested child CSS rules? In the sample above the header width instruction should overwrite the inner P width instruction. In general all nested width instructions should be overwritten. If a nested element has no width instruction nothing should happen. How can I write such a CSS (or javascript?) instruction? Advanced related question: How can I restrict the width instruction to only childs (=next lower hierarchy level)? Peter

Lets take an example: https://www.makeuseof.com/tag/how-to-add-cool-effects-videos-android/ When I print this webpage (into a pdf file) then alla rticle pictures are printed in a big, fat dimension. Have a look at the three picture below the section title "1. Glitch Video Effects". They are placed in full format on a full pdf page. I want to get them shrinked down to 20% resp. a maximum width of 200px. Therefore I want to add a new CSS rule. But neither .article-gallery { max-width: 840px !important; } nor img { width: 200px !important; } help. How else can I shrink the pictures for printing? I don't have access to the original web server but want to apply the new CSS rules afterwards by script in browser. Peter

Lets have a look at an example webpage: https://www.makeuseof.com/tag/lock-methods-android-phone/ Now right click (in Firefox) on the text (starting "You can secure your Android phone's lock screen....") below the headline and select "Inspect element" from context menu The element has a class "heading_excerpt". Now have a look on the element(s) in HTML code just ABOVE this element. They have a class e.g. "heading_meta". Although they are physically written in HTML code ABOVE the "heading_excerpt" they are appear on the loaded webpage in the opposite order. Why? Is there a way to let the browsers rendering machine show them in the order they appear in HTML source code? I have no access to the original web page server but may want to re-arrange it afterwards (from user script). Peter

How can I most easily delete all values of all <name>.....</name> elements of a certain *.xml file? the <name> element tags should be kept. A command line tool and command would be preferred rather than a GUI based tool. The <name> elements contain only value and no further nested elements.

It happens sometimes that I wrote and apply buggy CSS & Javascript/jQuery scripts into a webpage. An errorneous CSS rule could be .myclassname { width: 1024kk !important; }}; or a javascript var pane = document.getElementsByClassName("page-header-meta")[0]; does not find at least 1 instance of the class. So the remaining statements of such a scripts are not executed. How can I find out (in Firefox) which statement is causing the trouble? The webdeveloper pane at the bottom is not really useful. I have problems finding in it errors or warnings which come from my focussed *.css or *.user.js script (errors from other *.css and *.user.js) should be excluded. How can I achieve a better/faster error search? Peter

Assume I have an element like <img src="https://www.foobar.com/mysmallpic.png" ......>samplepic</img> Now I want to avoid a linking to a picture source on an external server. Instead I want to embed the few KB of the picture directly into HTML source code. I can imagine that there is a method similar to <img src=x'21315112A56CED......58889EFED' ......>samplepic</img> or alternatively with variable: mypic=x'21315112A56CED......58889EFED' ; <img src=mypic .....>samplepic</img> x'...' means the hexadecimal binary content (ANSI or Unicode ?) of the picture source. Is this somehow possible? Peter

Obviously this doesn't work since I have NO Access to the original CSS files. I am not the owner of the webserver. I want to change the loaded webpage AFTER loading by scripts with Firefox AddOns like Greasemonkey or Firemonkey. This work fine for many CSS statements. So again: Is there a way to delete @media print { .... } statements AFTER loading?

Assume the following code: <div class="foobar"> "whitespace" <p>....</p> </div> "whitespace" is not the text but a whitespace as indicated in Firefox WebDeveloper. How can I get rid of every whitespace inside after a <div class=foobar"> and the first <p> with Javascript?

Oftentimes web pages include a separate *.css file and have additional special CSS instructions inside for printing the article. How can I delete with CSS-important! or JavaScript this @media print { ............. } rule / instruction? Peter

Lets start with an example from a CSS for a Webpage: <div class="lg:w-10/12 ....">....</div> One of the referenced CSS rules is as follows (mind the additional masking backslash \): .lg\:w-10\/12 { width: 50%; } Now I want to override this CSS statement (later after loading) by the following additional CSS statement: .lg\:w-10/12, .lg\:w-10\/12 { width: 90% !important; } I put the classname WITH and WITHOUT backslash before it. Nevertheless the !important new CSS is NOT accepted. The width is (as shown in WebDeveloper of Firefox) still 50%. What wrong? How can I (without touching the original CSS file) adjust the width otherwise? Peter