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?

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"?

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?

On 2/18/2021 at 9:54 PM, dsonesuk said:

Can't you just search for any text(), no text remove(), doesn't matter if any elements exist

$(document).ready(function(){
  
    $("p").each(function(){
    if($(this).text().trim() ==""){
    $(this).remove();
 }
});
});

 

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>

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 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

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