How can I create an inline link to a target without having an anchor element?
I want to reference a specific section in a target page. But because I'm not the owner of that target page, I'm not able to set an anchor element there.
You can use the browser feature URL Scroll-To-Text Fragment.
It's supported by chrome and safari, but unfortunately it's not supported by firefox or old browser versions: https://caniuse.com/url-scroll-to-text-fragment
You just have to add #:~:text=Search Fragment to your url.
Example:
en.wikipedia.org/wiki/Hyperlink#:~:text=link%20destination
Hints:
The characters #:~: must not be encoded by your web application.
But beware: Do not disable the url encoding for the full url, if you use user input to build the url. Because the encoding is a security feature to prevent XSS.
Therefore I don't provide a real link in my answer, because this link is not working here, as ~ is encoded by stackoverflow. So just copy and paste the link to see it working.
I don't know of this answers your question. I've created an inline element that scrolls the page to a specific element without the anchor tag. Please let me know if this is what you're looking for.
/* JAVASCRIPT */
function goTo() {
const targetElement = document.querySelector('#target')
window.scroll(0, targetElement)
}
/* CSS */
span { cursor:pointer; }
<!-- HTML -->
<span onclick="goTo()">Link</span>
Related
I am experiencing a strange rendering problem with the select2 plugin when the fixed-header class is applied to the body tag. I have manage to replicate the problem with the demo files distributed with the template. I have checked it with versions 1.8.6.2 and 1.8.7.1
To see the problem please navigate to file:////DEVELOPER/HTML_Full_Version/plugins.html click on the turning gears on the top right side of the screen and check the "Fixed Header" checkbox. Then scroll down to "Plugins & Enhancers" widget and try to open (drop-down) any of the select2 combos (the problem appears in both of them either single select or multiple select).
More specific when the drop down box appears it goes over the input element and occupies its space instead going under it. The problem doesn't appear if the drop down box needs to go on top of the input element due to lack of space below it.
Please take a look at the following screenshots demonstrating the problem:
Single select
Multiple select
Please note that the problem doesn't appear on the on-line demo that can be found here http://192.241.236.31/themes/preview/smartadmin/1.8.x/ajax/index.html#ajax/plugins.html which is very strange but indicates that this isn't browser specific (I use Firefox), nevertheless I tried to find what the differences are between the local files and the on-line source but to no avail.
Thank you.
When you initiate plugin select2, set Json parameter {"dropdownParent": object} with the value of the object of another wrapper (not body tag) that has CSS property position:relative. For example, in case with smartadmin template, it can be $('.jarviswidget').
The problem is that body class .fixed-header sets for tag header CSS property position: fixed. Automatically generated HTML code after select2 plugin initialization also has styles position: absolute ..., and it moves select2 tags down because, by default, additional select2 HTML code is generated directly in body tag, exactly before body closed.
.
var parentElement = $(".jarviswidget");
if ($('.select2').length) {
$('.select2').select2({
"dropdownParent": parentElement,
"allowClear": !0,
"width": "100%"
});
}
I have a question about how content-hiding feature is implemented on thefreedictionary.com site.
I don't understand how does it work.
If you visit the following URL with AdBlock enabled,
http://encyclopedia.thefreedictionary.com/stack+overflow
the main content will be hidden.
Even if JavaScript is disabled (I'm using "NoScript" FireFox add-on), the main content will still be hidden.
Let's look at the main content div:
<div id="content" class="yt">
The path to this div is the following (the image is clickable):
Please note that the class name (yt in my case) is different on every page refresh, so your class name may contain another 2 letters.
By looking at "Rules" and "Computed" tabs in Firefox Developer Tools we can see that .yt class has its display attribute set to none.
It is easy to check that it is this checkbox that controls the visibility of main content.
My question is: Where does this css line come from?
It looks like a css data URI, but I can't find data URIs in html file.
The html file refers to "all.css" which also does not contain setting .yt display to none.
JavaScript is disabled, so display property could not be changed dynamically by a script.
I'm interesting, what trick is being used here.
Could someone explain please?
I am creating a mobile simulator that mocks the appearance and functionality of an iPhone (and other devices later) in a web browser, using 100% javascript, HTML5, and CSS, with the simulator fully functional with only client side code.
While trying to accomplish this task with as little modification as necessary to the original app projects themselves to be hosted in the simulator, I am injecting the <script> and <link> tags into the head of the page, then loading the html into a <div> screen.
The problem is that when I load in a new css file, it (obviously) overrides the one I'm using to style the page, and therefor some elements are affected (ex the background changes color).
My question is: Is there any way to limit the "scope" of an external .css file to apply only to objects within the <div> screen? Would it make any difference if instead of me injecting it into the <head> of the page, I inject it into a <style> element in the <div> screen?
UPDATE Support for this feature has been dropped. Please seek other options
Original Post:
You may want to look at scoped styles; see http://css-tricks.com/saving-the-day-with-scoped-css/.
The basic idea is
<div>
<style scoped>
#import "scoped.css";
</style>
</div>
However, you are on the bleeding edge here in terms of browser support. See http://caniuse.com/style-scoped.
One alternative would be to use an iframe.
Simply wrap all you css code inside the selector for parent element, say it's a div with id of foo you'd do the following:
div#foo{
//All your css
}
And convert it as less to css, it will prepend the right selectors. Note that you'll need to take care manually of things like #media queries and so on.
While writing this, the <style scoped> is deprecated by the Chrome team.
As a result I experimented with some approaches and released https://github.com/thgreasi/jquery.scopeLinkTags .
Note: you should only have to use this approach in case that you can't control the imported CSS file. If you can use SASS/LESS/anything to pre-process your CSS, you should prefer that.
A simple way is adding pre-class before all selector in css file.
I find a grunt script can do this:
https://github.com/ericf/grunt-css-selectors
This is how i do it if not using preprocessor in my project. Search for a online preprocessor then load copy paste the css under the parent class/id
.parent{
// copy paste here
}
Example
Find a preprocessor for example https://beautifytools.com/scss-compiler.php works very well for me (I have no affiliation with the given link)
if you are using from a URL add the URL using the load URL button.
Wrap the css code under parent and hit compile then minify.
I had a similar issue and found that Shadow DOMÂ can solve it easily.
let output = d.querySelector('#output')
let shadow = output.attachShadow({
mode: 'closed'
});
shadow.innerHTML = HTMLcontent // HTMLÂ content and style injected
Source
I'm trying to remove a link completely via CSS and replace it with my own custom message. Is this possible? I found some link disabling via css but the anchor text is still visible, and doesn't allow me to include my own message.
Essentially I want to make it so only logged in members can view links, using a conditional that uses CSS only for non-logged in (guests) users, replacing download links with "Sorry, only members can see this link, register here"
Any ideas?
CSS would be a terrible way to add privacy to your element, as it could be seen in any case by inspecting the source code, or by just disabling CSS.
You have to hide your link server-side.
By the way, just for the sake of completeness, and in case you have to use such a thing for something that actually makes sense doing by CSS, you could go around doing it by adding a class to the html or body in case of non-authenticated users, and then having a CSS rule as such:
html.not-logged-in element {
display: none;
}
Keep in mind that, obviously anybody can still see the element if they want.
Edit
You can't change text with CSS (unless using the content property in a pseudo-element, but nevermind that, as you won't be able to change the href attribute of your link). So, to achieve what you are looking for, you need to have two separate elements. As I said above, add a class to your html or body when the user is authenticated (this is actually a good idea in general), then show and hide your elements conditionally.
So your HTML would look something like this:
<span class="error">Sorry, only members can see this link</span>
I am a secret link
And your CSS would look like this:
.not-logged-in .secret {
display: none;
}
.logged-in .error {
display: none;
}
You can see an example here. In this example I use Javascript to simulate your logging-in process (all I do in Javascript is really just adding the class to the html element).
I want to change background of this 2 link
<a href="http://www.domain.com/index.html">
<a href="http://www.domain.com/index.php">
But condition is I can't add any class or Div id here. I can't touch this this html code also. Just I need to add some css from external. I mean in main style.css sheet. Is is possible ? I have tried with this code a { background:url(../images/image.png);} but problem is it's change the whole link's background of the page. But I want 2 different background of the 2 link. Is is really possible. Anyone can help me please :)
You need to find a way to differentiate the two links, from the code you posted, they only differ in the url they point to, so you could use this:
/* anchors with href attribute ending in index.html */
a[href$='index.html'] { background:url(../images/image.png);}
/* anchors with href attribute ending in index.php */
a[href$='index.php'] { background:url(../images/image2.png);}
You can use CSS attribute selectors to only style links with an href that matches the links you supplied. Example:
a[href="http://www.domain.com/index.html"],
a[href="http://www.domain.com/index.php"]{
background:url(../images/image.png);
}
You could also match all links with an href starting with http://www.domain.com using the following rule
a[href^="http://www.domain.com"]{
background:url(../images/image.png);
}
Please check the support as older browser might ignore attribute selectors.
http://css-tricks.com/attribute-selectors/