pstein
-
Posts
130 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by pstein
-
-
-
Assume I have a CSS stylesheet link similar to
http://www.foobar.com/aaa/bbb/ccc.cssNow I want to show the content (=CSS rules) of this stylesheet in (Firefox) browser.
Unfortunately the css file content is compressed resp. written in one long line.
Is there a way to beautifiy the css content to a more human readable format with javascript code?
Peter
-
-
Assume I defined an element similar to
<header class="aaa bbb"> <div class="ccc ddd">....</div> </header>
When I (or the reader) print now the page from browser into a pdf document then this element should be printed at the top of each page.
So this element should be automatically inserted.
How can I achieve this?
Peter
-
Assume I have the following code
<p> <div>.aaa...</div> <div class="foobar">.bbb..</div> <div>.ccc..</div> <p>
then I can address the <div>element FOLLOWING the <div> element with class=foobar by
div.foobar + div
will address the <div> with ccc inside
Ok, but how do I address the opposite: The predecessor=the <div> with aaa inside?
div.foobar - div
seems not to work
Peter
-
-
Lets start with an example web page (from german computer magazin):
https://www.heise.de/newsticker/meldung/VMware-Workstation-14-braucht-juengere-Prozessoren-3847372.html?view=print
When you look at the bottom of this webpage you find a list of link lines.
I want to shrink the space gap between each of them. Therefore I applied (afterwards through Greasemonkey) the following CSS statement:
pre, code { font-size: 10px !important; line-height: 9px !important; }
Reduction of line-height works until 10px (even when the font-size itself is biggger !!!).
Specifying a lower value for line-height than 10 does not work any more.
Why?
How else can I reduce the space gap between the link lines?
-
-
In many other programming languages (e.g. Java) there is a function like:
((a < b ) ? "lower" : "greater")?
which outputs "lower" if the value of variable a is lower than the value of variable b. Otherwise "greater"
Is there a similar function in Javascript?
Peter
-
Assume I want to output something at the bottom of a webpage.
The output text should not be assigned to a certain element or tag (if possible).
I just want to write something like
document.write("<p);
Is this possible?
If I have to assign it to <body>: What would be the minimum code to achieve this?
Peter -
Lets start again with a sample web page:
http://www.thewindowsclub.com/windows-resource-protection-found-corrupt-files
Let the browser give a second to load the web page completely.
Then scroll with the browsers vertical scrollbar to the bottom of the page.As you can observe the embedded code somehow detects that the user scrolled to the end and loads+appends additional stuff from webserver.
In this case its all the comments from users to the article above.How can I prevent this delayed auto-loading? When the user scrolls to the bottom nothing else should be loaded.
Second, related question: How can I tell the web page already at first load time to load all possible stuff at the bottom even if the user did not scroll?
Thank you
Peter -
Lets start with a sample web page:
http://www.thewindowsclub.com/windows-resource-protection-found-corrupt-files
As you can see the article text contains various blue, clickable Links.
When I print the whole page (with Firefox print menu) then all these embedded links got automatically a postfix URL.
That means immediately after the link on the printed page appears the underlying URL as text writh round brackets (http://www.thewin............)
I want to avoid this for all links. The link tag written in blue should persist but no URLs should be added.
How can I do this?
I want to add your suggested javascript code to a greasemonkey script and let it do the filtering job at print time.
If possible the blue links on the web page(s) should be clickable in the future. If necessary the clickability can be removed
Peter
-
How do I output the current timestamp with a format DD.MM.YYYY HH:MM:SS
The web page
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
does not show it (an example).
Thank you
Peter
-
Assume I go onto one of the article webpages of this (german) computer magazine e.g.
When I click now on the browsers (e.g.Firefox) "print" menu then not all the stuff is printed but only the "core" article with some print specific CSS definitions.
I searched now for a while for the corresponding
@media print
CSS definitions for the print layout but did not found them.
Where are they ?
Maybe someone could find them more easily.
Thank you
Peter
-
Assume I use a simplified CSS setup like:
body { font-family: Merriweather, "Museo", Syncopate, Verdana; }As far as I know the HTML rendering engine searches for the first font family package it can find on the client from the list and uses it for rendering.
Now lets say I load the corresponding web page into Firefox: How can I find out which Font package is really currently used at the end (if I cannot identify it by shape/design)?
Assume Syncopate is used: What do I have to do to provide the package Merriweather and Museo to the client?
How do I put it into the web page as additional resource?
Is there a difference to put a font-family package name into double quotes or not?
Peter
-
No. They are the same as in the past
-
Assume I have 10 different "normal" web pages with an URL http:/www.foobar.com/.....
Ok, I could setup 10 bookmarks for all these 10 URLs and click them step by step individually.
However I am searching for a more convenient, faster way to view them in 1 (!) browser window.
How can I setup a "wrapping" web page which contains (as IFRAMES ???) all these 10 other external web pages?
They should be somehow embedded as a sub component.
Peter
-
Assume I have a web page which loocks pretty well for printing.
Now when I really click File--->print menu in Firefox
the whole page is printed but with big, fat margins around it. Furthermore some (logo) picture replacements take place.
I don't want this! I want to print the page just as I can see it right now in browser.
I guess there are some hidden "@media print" CSS statements but I cannot find them in Firebug.
So is there a way to bypass all further CSS+Javascript modifications after call of window.print()?
How do I find out where and why the currently visible layout is changed for print?
Peter
-
I want to insert the current URL at the bottom of a web page (before printing it).
Therefore I coded:
var address = document.URL; var pane = document.getElementsByTagName('body'); pane.innerHTML = pane.innerHTML + "<br/>" + address;
But this doesn't work.
The URL is NOT shown.
How else can I achieve this?
Peter
-
Assume I have a webpage which has currently NO CSS stylesheet assigned.
Instead font definitions are defined as HTML elements like
<font size="6" face="Arial">foobar</font>
How can I overwrite this definition e.g. by:
font-size: 16px; line-height: 18px; font-family: Verdana;
This new CSS definition should be assigned to all occurencies of exactly this element (but not e.g. <font size="2" ....>)
How can I achieve this?
Peter
-
Assume I have a web page which contains multiple elements similar to
<span style="font-size: medium;">....</span>
How can I remove the "style=" attribute for all the elements?
Overwriting with a neutral value and !important would be acceptable as well.
The element <span> itself should still persist
Peter -
Assume I have the following HTML source code:
<img onload="..." ... someotherattr="..." ...> ... </img>
How can I remove the two attributes "onload" and/or "someotherattr" but not all other (possibly existing) attributes?
Can I put the remove command for the two attributes into one statement or do I have to setup two commands (for one attribute per command)?
jQuery can be used if it is simpler
Thank you
Peter
-
At first here is a (sample) web page in focus:
http://www.giga.de/extra/gaming-pc/specials/arbeitsspeicher-auslesen-welchen-ram-habe-ich/
I want to get rid of the social community icons pretty much at the top.See the following snapshot:
https://abload.de/img/elementnothideablevqsyj.png
Therefore I tried to apply the following CSS instruction (e.g. with Firefox AddOn Greasemonkey) to the loaded page
.sharing_container.v1.top.floating { display: none !important; }";
Yes, this hides the five social community buttons.....for about 3 seconds (in newest Firefox under 64bit Win 7).
Then these 5 buttons re-appear.
Why?
I guess there is a delayed re-load/refresh mechanism embedded.
How do I hide them permanently?
Thank you -
Assume I have the following HTML code:
< table ......... bgcolor="#334455">
....
< /table>
Be aware that the bgcolor attribute is NOT placed in a separate CSS stylsheet but is embedded in the HTML code itself.
Now I want to overwrite this bgcolor by another color. The following does NOT work:
table { bgcolor: #ffffff !important; };
or
table { bgcolor=#ffffff !important; };
How else can I overwrite the color?
Peter -
Lets start with an example:
<div class="aaa bbb" ...> <p class="ccc" ....> firsttext </p> </div> <div class="aaa ddd" ...> <p class="eee"> secondtext </p> </div>
and the corresponding CSS rules:
.ccc { font-size: 18px; line-height: 18px }; .eee { font-size: 25px; line-height: 25px };As far as I understand more special CSS rules (inside an element) overwrite always the more general CSS rules of the enclosing element.
So if I define.aaa { font-size: 14px; line-height: 14px; };then the .ccc and .eee rules win.
Is there a way to overcome this priority rule hierachy so that all more special CSS rules inside are overwritten anyway by the outer CSS rule?
"!important" does not work since it overwrites only possibly existing rules for the same class. So.aaa { font-size: 12px !important; line-height: 12px !important; };only overwrites only the old .aaa rule but not the rules inside.
However I could imagine that there is an option to brutally overwrite all every more special rule inside an element.
How can I achieve this?
Peter -
Whenever I want to add something at the end inside an (the first) element which is identifiable by class name I can write:
var div = document.getElementsByClassName("myclassname")[0];
div.innerHTML = div.innerHTML + "foobar";
This works fine.
But what if there is no class name but only the element tag like in<cite> <span>01.07.2016</span> <span>sometext</span> </cite>
How can I add "foobar" text at the end (after last span) but inside (!) the <cite> element?
Is there a function similar to getElementByElementName(...) which means I could write:
var div = document.getElementsByElementName("cite")[0];
div.innerHTML = div.innerHTML + "foobar";
Peter -
Lets start with a (german news) sample page:
When you click on the grey printer icon just below the headline and the teaser text the core arcticle will be printed (e.g. into pdf file).
As you can see the printed article contains very wide/broad blank margins left and right of it.
Where exactly are these margin widths specified.
I searched now for a while for
@media print
or
@page
definitions - but without success.
Where are the print page CSS statements exactly defined?
Thank you
Peter
-
Maybe I am blind. I searched now for half an hour with Firebug for the background color definition for the following web page:
http://www.giga.de/downloads/windows-10/tipps/windows-update-reparieren-und-zuruecksetzen-so-geht-s/
As you can see there is an article in the mid "column".
Left and right of it there is a grey pane.
Where exactly is this grey color defined?
It drives my crazy.
Peter
Default margins and padding for <li> elements? Ignore or overwrite?
in CSS
Posted
When I look at <li> elements of an <ol>...</ol> then the space gaps between the <li> lines are more than the "usual" line-height defined in <body> or parent elements.
No special, additional margin or padding values are assigned in CSS.
So I guess there is a default built-in margin-bottom or margin-top or padding-bottom or padding-top value.
What is it?
How can I tell the browser rendering engine to ignore these default built-in values for <li> elements?
Or how do I overwrite them by my own values?
Peter