I am styling a website. The core comes from a third party developer and also includes some css. There is one CSS file that really messes up the website. Therefore I would like to remove it from the DOM.
I tried using jQuery:
$('link[rel=stylesheet][href~="./admin/include/WantToRemove.css?rev=1634758035"]').remove();
and in theory it works fine. However every once in a while the rev ID is changed by the third party developer and the code stops working. The name of the .css before the rev does not change.
Something like
$('link[rel=stylesheet][href~="./admin/include/WantToRemove.css"]').remove();
did not work for me. How can I fix this?
~= will match elements that have the passed value surrounded by whitespace. The WantToRemove.css doesn't end in whitespace - it instead ends with ?rev=someNumbers, so that must be causing the selector to fail.
Use *= instead, so that the value is found anywhere inside the attribute, rather than requiring it to be matched as a "word" (with whitespace on one of the ends).
$('link[rel=stylesheet][href*="./admin/include/WantToRemove.css"]').remove();
To avoid jankyness, try to run this as soon as possible after the unwanted stylesheet appears, before the browser has a chance to paint, otherwise your users may see the website styles blink on pageload, which doesn't look good.
If you're able to run code before the CSS element appears, you could also use a MutationObserver instead, and .remove() the <link> when the observer detects it.
Related
I have a small web app which has <a href="> tag which renders the only runtime I mean it does not appear in HTML page it appears only in chrome developers tools. How to eliminate such kind a tag and override or edit it.
I tried editing code via its script when I inspected for long it split document.querySelector("#m360CrA483349594983") but when I search entire project there's no sign of it!
demos written can be eliminated for sure!
Even I tried to Enable Local Overrides on but nothing seems to work that mysterious tag is kept coming saying
"demos written can be eliminated for sure!"
once the dom is ready you can access the element
<script>
(function() {
// the DOM will be available here
document.getElementById("m360CrA483349594983");
})();
</script>
Add body onload event listener in order to search for tag appearing at runtime.
Also, pay attention to tag ID value, it seems it is generated every time, so, you won't be able to find it by static ID
When a user scrolls down on a webpage I have, a class gets added to the nav tag and it changes positions on the page. When the user scrolls back to the top, the class is removed and it moves back to the original position. I know this feature works and the class when I inspect the element in a browser. I'm trying to write an Rspec test to test this feature. I've been trying to use Capybara without success. The scrolling part of the test works but searching the HTML and CSS for the added class isn't.
The nav id is "views" and the class being added is "on_nav". This is the test so far:
scenario 'Scroll down' do
visit '/'
page.execute_script "window.scrollBy(0,1000)"
expect(page.html).to include('class="on_nav"')
end
The error message is that it cannot find 'class=on_nav"' on the page, even though when I inspect the element in the browser I can see it. These are a few of the different random commands I've tried, from answers I've looked at online when trying to Google this, that all give me the same error or they say my syntax is wrong and I can't find how to fix it:
expect(page.html).to have_selector("#on_nav")
expect(page).to have_css("nav#views.on_nav")
expect(page.has_css?(".on_nav")).to eq(true)
I am completely new to writing web tests, but I do know the answers I have found online (for example this question about checking the CSS and this article about testing elements with Capybara) haven't worked for me. It might be giving me problems because I'm trying to test the nav tag whereas all the examples I've found online talk about either div or input? Is it even possible?
Doing expect(page.html).to include('class="on_nav"') should never be done, and you should ignore everything from any article/tutorial that suggested that. By getting the page source as a string you are completely disabling Capybaras ability to wait/retry for the given condition to be met.
With regards to your other attempts
By default the selector type is :css, so expect(page.html).to have_selector("#on_nav") would look for an element with an id of 'on_nav' which isn't what you want, and by calling page.html you've again disabled waiting/retrying behavior since the string gets parsed back into a static document.
expect(page.has_css?(".on_nav")).to eq(true) is getting closer to what you want but will not provide useful error messages since your expectation is just for true or false
expect(page).to have_css("nav#views.on_nav") is the correct way to verify an elements existence on the page. It will look for a visible <nav> element with an id of views and a class of on_nav and wait/retry up to Capybara.default_max_wait_time seconds for that element to exist. If that isn't working for you then either the element isn't visible on the page, the selector doesn't actually match the element, or your JS that's adding/removing the class isn't working when you call scrollBy. If you're using selenium, pause the driver after calling scrollBy and inspect the element in the browser to ensure it's adding/removing the class as expected, and if it is then add the actual HTML of the nav to your question.
Is there a way to bookmark or link to an HTML page (which I am not author of) without having an anchor in the HTML code?
I want the page to get scrolled down to a particular section when accessed from a bookmark or hyperlink even if there is no anchor tag in the destination page.
Note: the destination page has an anchor tag as "foo" then bookmarking like http:/...hello.html#foo will not only take the user to hello.html, but also automatically scroll down to the section of the page so that the anchor tag "foo" is at the top of the screen.
It's the year 2020, there is a draft by WICG for Text Fragments, and now you can link to text on a page as if you were searching for it by adding the following to the hash
#:~:text=<Text To Link to>
Working example on Chrome Version 81.0.4044.138:
Click on this link Should take you to another answer page and highlight the link there
You only need to have the appropriate id attribute on an element to use it like a bookmark...
Test
...
<p id="test">Hello world</p>
See the W3C specification: Anchors with the id attribute
Older specifications also allowed navigation based on the name attribute, but this attribute has been removed from the latest HTML specifications (but if there is a name attribute it may be used in the same way as an id attribute).
If there is no id or name attribute where you wish to navigate to, there is no way of navigating to the specific point within the page, only to the page itself. In this case you may want to quote the pertinent information and supply a citation with a link or perhaps ask the author if they would add an id.
This is a copy of #AbderrahmaneTAHRIJOUTI's answer but updated with some extra info.
It's the year 2020, and now there is a draft by WICG for Text Fragments, and now you can link to text on a page as if you were searching for it by adding the percent-encoded quote to the URL like this:
#:~:text=<percent-encoded-text-quoted-from-site>
For example, this link highlights the syntax from the spec.
One can also highlight multiple sections as well by chaining query parameters with ampersand (&):
#:~:text=<quote-1>&text=<quote-2>
For example, see these highlights to the spec.
Even ranges can be set in case of a longer quote (at least in Chrome):
#:~:text=<begin-text>,<end-text>
For example, highlighting an entire paragraph in the spec.
For some reason, in Chrome 89.0.4389.90 the above links may only work if one (1) clicks on them, (2) goes to the address bar by clicking in it or by F6, and (3) hits Enter. Not sure why this is when Google search constantly offers links like this in the results which work out of the box (e.g., a link to Azure Vault)
Support
It's still spotty, but most major browsers support it (except for Firefox...). To check the current status of adoption, check out https://caniuse.com/?search=%3A~%3A
There is a relatively recent W3C Working Group Note on Selectors and States which would allow linking to selected text.
Here is a Firefox webextension partially implementing the link format (allowing you to "create" a link, based on the selection, as well as, obviously, open such a link, highlighting the correct selection):
https://addons.mozilla.org/en-US/firefox/addon/precise-links/
As of 2019 it seems to work fine.
Its source code is available here.
The Firefox extension "Web Marker" does exactly what you want.
https://addons.mozilla.org/en-US/firefox/addon/web-marker/
You can find its source code and documentation here:
http://liveurls.mozdev.org/tech.html
If the page supports being embedded as an iframe, you can link to a document that embedds it and then autoscrolls the document. The issue is that we can't get the height of the page, so instead we just hijack the scrolling event to make the page taller once we approach the bottom:
data:text/html,<html><body style="margin:0; padding:0;"><iframe id='i' src='http://forecast.weather.gov/MapClick.php?CityName=Las+Vegas&state=NV&site=VEF&textField1=36.175&textField2=-115.136&e=0' width=100% frameborder=0 margin=0 scrolling=no style="height: calc(100vh + 170px + 200px);"></iframe></body><script>window.scrollTo(0, 170);window.onscroll = function(e) {if((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 200) {document.getElementById('i').style.height = window.innerHeight + window.scrollY + 200;}};</script></html>
Modern browsers will try to scroll to an element with an ID that matches the hash part of the URL (i.e. if you have <h1 id="foo">, then #foo would get you there).
If everything else fails, you can use jQuery. Get the hash part from the document URL with window.location.hash. You can then interpret that in JavaScript to determine an element in the page.
Use scrollTop to move there (see Scroll to an element with jQuery).
See also: https://api.jquery.com/scrolltop/
I must be not getting something, but sadly your solution is not working for me... The attached document's jargon confuses me a bit as the dilettant I am. :-(
Though, it gave a nice clue... Hence, I found this link with a simpler way to do this (in my case, link to a specific part of a text in some other author's blog post without ID tags):
Share or link to quotes and text in Chrome
https://support.google.com/chrome/answer/10256233?hl=en-GB&co=GENIE.Platform%3DDesktop
To create a link that opens directly to highlighted text:
On your computer, open Chrome.
Go to a page with text that you want to share.
To highlight the text that you want to share, click and hold, then drag your mouse.
To open the context menu, right-click on the highlighted text.
Select Copy link to highlight.
If you can’t select this option, this feature may not work for the selected content.
Paste the link anywhere; for example, into an email or message thread.
Tip: To remove the highlight from the text in the linked content, right-click the highlighted text and select Remove highlight.
If you want to link to a specific part of a PDF file online, this solution also worked for me:
https://helpx.adobe.com/acrobat/kb/link-html-pdf-page-acrobat.html#:~:text=Open%20a%20PDF%20file%20to,end%20of%20the%20link's%20URL.
Just posting this in case someone is still lost as I was.
Cheers!
The AnchorMe addon from Firefox just solved this for me. Ctrl + double click on your desired destination and voilà.
I understand that it's a good idea not to leave empty anchor tags. In jQuery and other syntaxes I've noticed everyone typically uses a # to fill the gap (<a href='#'>anchor text</a>). Is this character any better or worse than filling it with anything else? (e.g. <a href='$'>anchor text</a>). I have no reason to want to do this, but seemingly no reason aside from convention to do it the other way either. Why is the # convention used in empty anchor tag hrefs?
This is because the # character in a URL references the local page.
It is used for named anchors (or any ID) within a page, so a link can jump directly to that area.
Wikipedia calls it the fragment identifier and has this to say:
The fragment identifier, if present, specifies a part or a position within the overall resource or document. When used with HTTP, it usually specifies a section or location within the page, and the browser may scroll to display that part of the page.
As a practical example - this link to wikipedia has a fragment identifier (always at the end of the URL):
http://en.wikipedia.org/wiki/Uniform_Resource_Locator#Syntax
In the page, there is a <span id="Syntax" ... tag, and the browser jumps directly to it.
This way, if the user has disabled javascript, actually following the link to "http://mysite.com/#" will not have any negative consequences.
For example, these links still work, since # specifies a location on the current page:
http://www.stackoverflow.com#
http://www.stackoverflow.com/#
while these don't:
http://www.stackoverflow.com$
http://www.stackoverflow.com/$
The link denoted by <a href= points to somewhere else. This somewhere could be on the other side of the world (absolute URL), or locally on the same domain/path (relative URL). Just leaving it empty refers to the very document itself.
The # is the character used to separate an anchor from the rest of the URL. Browers don't even send it to the server, but use it to vertically scroll to the position in the page marked with this anchor (using <a name="foo"></a>).
So basically, <a href="#"> instructs the browser to stay on the same page. It is usually used together with JavaScript - hooking into onClick events - so that the JavaScript does something useful, then return false to prevent the browser from actually following the link. But if he would (e.g. if JavaScript is disabled, or return false is ommitted) then it would not leave the current site, usually not even reloading it.
So #is used not as a random char, but because that's actually the char specified for the purpose of denoting an anchor in a link - it just happens that in your case you neither need the actual link (to another page) nor the anchor, but just a clickable element.
it's mostly old school way of preventing the click action to trigger a page reload.
If you aren t using the href attribute just leave it empty, or even better if you can target some fallback URL for people with JS disabled
I am trying to create a file upload field that has a little bit of style to it, but I seem to be having problems finding examples of this. I know part of the reason is that the field itself varies from browser to browser.
Any ideas how to do this? Or is there a way to do this without using a file element of a form that can be styled?
If what you mean is the text field for the file names, you can use the input[type=file] selector in the css files. For example :
input[type=file] { background-color: red; }
If what you mean is the file selection dialog box, I think it's browser/OS dependent and there's little (if any) you can do about it.
I have come up on this problem before. Unfortunately, file uploads are nearly impossible to style consistently across browsers. As of CSS 2, I think, the W3C standard specifically leaves behavior undefined--think of how many ways it would need to be implemented on different platforms. Firefox, for example, generates anonymous button and input elements inside the file upload element which only inherit some of the properties that you set on the upload element itself.
You can get some to work using, for example, Furuno's method, but know that the behavior will be spotty and differ widely across platforms/browsers.
Here's some links I found:
QuirksMode Article
One Extra Pixel Article (look for the file input styling section)
This would fit for your requirement.
If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field
This tiny plugin will display the file input field as a bootstrap button (with configurable classes) and will show selected file names (or selection errors) beautifully.
Additionally you can set various restrictions using simple data-attributes or JS settings.
e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.