In UBlcok Origin I'm trying to hide the search/header bar at the top of Youtube when on a video page, but not when on the home page. It's been far trickier then I imagined because youtube not only reuses ids on the same page, but also reuses the same ids and classes on the home page as the video pages - so I thought I would try and use a procedural cosmetic filter.
So far I have:
! stop search bar from floating when scrolling
youtube.com###masthead-container.ytd-app:style(position: static !important)
! remove resulting whitespace (search bar still remains for some reason)
youtube.com###masthead-container:style(height: 0 !important)
! move video up to cover search bar but only if #content's ytd-page-manager element contains a ytd-watch-flexy element
youtube.com###content.style-scope.ytd-app:has(ytd-page-manager:has(ytd-watch-flexy)):style(position: relative; top: -56px !important)
but the last line doesn't work. So I changed it to call the custom youtube elements by id and class:
youtube.com###content.style-scope.ytd-app:has(#page-manager:has(.hide-skeleton)):style(position: relative; top: -56px !important)
and it will successfully select the correct #content element if I remove the :style(...) conditional - but, as shown, it doesn't appear to apply hide or apply the style if I chain a :style() to the :has() conditional.
Can you chain :has() and :style()?
The feature of chaining conditionals to :style() has not been added as of the end of 2019
https://github.com/uBlockOrigin/uBlock-issues/issues/382
Related
I'm using Ublock origin to change how my pages look and hide annoyances.
I want to hide text in an element instead of filtering the object. It's a span object with an unique class that has a specific height. It sits at he top of the page and when hiding the element, a whole chunk of the page moves up, while other objects don't, making the page look bad.
Is there a way to write a filter in ublock origin that replaces the text inside the object with a space?
<span class="unique-id">text to hide</span>
Resources:
ublock static filter wiki
ABP filter guide
How about:
yourWebsite.com##.unique-id:style(display: none !important)
I'm building a simple table in CKEditor. If I select Left or Right align, it aligns in the expected side of the view when saved. However, when saved this fails if I select Centre align. It's obviously not the whole page because Centre Align text above and below will display Centre aligned. This issue only becomes apparent when "saved" ... (ie a centre aligned table will centre align in edit).
Can you suggest what's going on?
Thanks
How is the centering actually performed? If you have configured using the XHTML configuration, this sounds like a class issue - if not, it could be a CSS !important override rule.
I have CKE configured based on the XHTML example, so my CKE produces centering on table cells like this: <td class="JustifyCenter">Twilight Sparkle</td>. So, if you place the HTML generated by CKEditor in an external page, make sure that the JustifyCenter class actually defined in the parent page. Also in Developer tools that not only it the class rule exists, that it is actually correct and applies.
Also in your developer tools and check to see if your CSS style is actually working or is it being overridden. If you have a parent page CSS rule like td {text-align:left !important;} and CKE produces content like <td style="text-align:center">Fluttershy</td>, the parent page is overriding your inline CSS definition.
I'm only guessing here - it would help if you can you show us the final code as it's used when saved and also your CKEditor configuration.
the table align to center CKeditor will generate something like this, <table align="center">
but it is not working.
finally i found a solution by using CSS, here my code
table[align="center"] {
margin: 0 auto;
}
I am using DOMPDF library to generate invoices dynamically. My use-case scenario is to leave around 3 inches of space on top of each page. On the first page i created it using a blank div with appropriate height.
Now on second page, it doesn't take the required height from very beginning for obvious reasons. any suggestions?
Instead of spacer divs just set the page margins in css with:
#page { margin-top: 3in; }
If I open the following HTML e-mail in Gmail or Outlook it renders as it should:
<img src="img.png" />
However, if I open it in Outlook and then forward it to Gmail, it adds extra garbage HTML that makes the area taller than it should be (the 'p' tag is responsible for the added height - 3px specifically):
<p class="MsoNormal">
<span style="font-size:10.0pt">
<img src="img.png">
<u></u>
<u></u>
</span>
</p>
There are lots of solutions for fixing spacing issues in Gmail, like adding display:block to the image, setting the font-size and line-height to 0, etc. I've tried over a dozen methods and none have worked because of behind the scenes HTML modification that I have no control over - styles and attributes getting stripped, tags with their own properties getting added, etc.
Is there is a work around to allow the original formatting to always be preserved? I will gladly provide any additional details needed, just let me know.
There is no fix for this, but there are ways to limit and hide the size of the separation. I'll refer to it as separation, but it is really the top cell expanding due to Outlook applying the mso-normal p tag. Here is a related article.
Between tables creates a bigger gap (about 15px) than between table rows (2px). It is more complex, but try and put everything that you can't afford separating into one big table. Colspans and rowspans can be complex, but they work if set up correctly.
To hide the separation, wrap all the tables in a master-content table with the bgcolor set. For example, make one big content pane set to white. When sending from Outlook, all your child tables will then move, but the gaps will remain white, stopping unwanted lines appearing in your email body.
A trick for footers - As the last child table of your main white panel, when this separates, it will create a white line underneath it. Either remove the footer table from the main panel or set the cell bgcolor to the same as your email background to hide this separation.
I managed to change this situation by changing the MsoNormal class
<style>
td p.MsoNormal {margin: -4px !important}
/* ou */
.MsoNormal {
margin: -4px !important;
}
</style>
I am using the Twitter Bootstrap Affix JS component. My UL list is affixing properly when I scroll the page down. Also - when I click on the individual list items (much like Twitter does on its docs page), it scrolls down to my anchor ID in my document, but the LI element does not receive the Twitter 'active' class. Nor does it get the 'active' class when I scroll my document.
I would expect the appropriate link to be active when I have scrolled to the particular part in the document (much like scroll-spy works), but I can't seem to get this to work.
Is there something special I need to set up so that Bootstrap will add the 'active' class when appropriate?
Yes, you need to also use the ScrollSpy plugin. You can activate it through markup or through JS. Letting #scroll-pane be the element that triggers scroll events and #navbar be the element containing the ul.nav, the following should get it working:
HTML
<div id="scroll-pane" data-spy="scroll" data-target="#navbar">
JS
$('#scroll-pane').scrollspy({target: '#navbar'});
Use either the HTML or the JS, but not both.
Additional Info
When the ScrollSpy plugin is passed a target, like scrollspy({target: '#navbar'}), this is used to construct a selector of the form
target + ' .nav li > a'
which, in this example would give
'#navbar .nav li > a'
It is important to understand the stipulations that this selector creates.
The original target must be an element which contains an element with class nav. So .nav should probably never be your target.
The .nav element must contain list items.
Those list items must have a <a> as a direct child.
The <a> elements selected by this are then filtered out by those whose data-target or href begin with a '#'. These href's are in turn used to select the elements contained in the element to which the ScrollSpy plugin is attached. Offsets of those selected are stored, and when a scroll occurs, a comparison of the current scroll offset is made with the stored values, updating the corresponding <a> element with the class active.
Hopefully, this summary can aid in better understanding what one might be tripping over when attempting to implement the plugin, without having to dig into the code in further detail.